/* ============================================================
   SplitExpenses — foglio di stile unificato, mobile-first.
   Tutti i colori passano dai token in :root e [data-theme="dark"].
   ============================================================ */

:root {
  --c-bg: #f6f7fb;
  --c-surface: #ffffff;
  --c-surface-2: #f1f2f8;
  --c-text: #1f2433;
  --c-muted: #6b7280;
  --c-border: #e6e8ef;
  --c-border-strong: #d7dae5;

  --c-primary: #4f46e5;
  --c-primary-700: #4338ca;
  --c-on-primary: #ffffff;
  --c-primary-soft: #eef0ff;
  --c-primary-soft-text: #4338ca;

  --c-success: #097969;
  --c-success-soft: #e7f7ea;
  --c-success-soft-text: #0b6b34;
  --c-danger: #b00020;
  --c-danger-soft: #fdecec;
  --c-danger-soft-text: #7a1a1a;
  --c-warn-soft: #fff3cd;
  --c-warn-soft-text: #6b5e00;

  --c-payment-row: #f6f5ff;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(31, 38, 135, .08);
  --shadow: 0 8px 18px rgba(31, 38, 135, .08);

  --container: 680px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2rem;
}

[data-theme="dark"] {
  --c-bg: #14161c;
  --c-surface: #1e2128;
  --c-surface-2: #23262f;
  --c-text: #e6e8ef;
  --c-muted: #9aa0ad;
  --c-border: #2c303a;
  --c-border-strong: #3a3f4c;

  --c-primary: #5b52e8;
  --c-primary-700: #4f46e5;
  --c-on-primary: #ffffff;
  --c-primary-soft: #2c2a4a;
  --c-primary-soft-text: #b7b2f5;

  --c-success: #3ecf9a;
  --c-success-soft: #143028;
  --c-success-soft-text: #3ecf9a;
  --c-danger: #f0726f;
  --c-danger-soft: #321a1d;
  --c-danger-soft-text: #f0726f;
  --c-warn-soft: #332b12;
  --c-warn-soft-text: #e7c970;

  --c-payment-row: #222033;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow: 0 8px 18px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h1, h2, h3 { color: var(--c-text); line-height: 1.25; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4);
}

/* ---------- Topbar applicazione (in base.html) ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .65rem var(--space-4);
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.appbar .brand {
  color: var(--c-on-primary);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  letter-spacing: .01em;
}
.appbar .brand:hover { text-decoration: none; opacity: .92; }
.theme-toggle {
  width: auto;
  margin: 0;
  padding: .35rem .7rem;
  background: rgba(255, 255, 255, .18);
  color: var(--c-on-primary);
  border: none;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Card / pannelli ---------- */
.card, .list {
  background: var(--c-surface);
  border: .5px solid var(--c-border);
  padding: var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

/* ---------- Layout a griglie (responsive, mobile-first) ---------- */
.grid-2, .grid-3cols, .grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tabelle (scrollabili in orizzontale su mobile) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: .55rem .5rem;
  border-bottom: .5px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
th { font-weight: 600; color: var(--c-muted); }
tbody tr:hover td { background: var(--c-surface-2); }

.pos { color: var(--c-success); font-weight: 600; }
.neg { color: var(--c-danger); font-weight: 600; }

tr.movement-payment td { background: var(--c-payment-row); font-style: italic; }
tr.expense-row:hover td { background: var(--c-surface-2); }

span.expense-link, a.expense-link { display: block; color: inherit; text-decoration: none; }
a.expense-link:focus, a.expense-link:hover { text-decoration: underline; }

/* ---------- Form ---------- */
label { display: block; margin-top: var(--space-2); color: var(--c-text); }
input, select, textarea, button {
  font: inherit;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  border: .5px solid var(--c-border-strong);
  width: 100%;
  box-sizing: border-box;
  background: var(--c-surface);
  color: var(--c-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--c-primary); }
input[type="file"] { padding: .4rem; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: auto;
  background: transparent;
  color: var(--c-primary);
  border: .5px solid var(--c-border-strong);
  border-radius: 8px;
  padding: .45rem .8rem;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  margin-top: var(--space-2);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button svg, .button svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
button:hover, .button:hover { background: var(--c-surface-2); border-color: var(--c-primary); text-decoration: none; }
button:active, .button:active { transform: translateY(.5px); }
.button.disabled, button[disabled] { background: transparent; color: var(--c-muted); border-color: var(--c-border); pointer-events: none; cursor: default; }

button.danger, .button.danger { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
button.danger:hover, .button.danger:hover { background: rgba(192,57,43,.1); color: var(--c-danger); border-color: var(--c-danger); }

/* pulsante secondario (outline) */
.btn-outline {
  background: var(--c-surface);
  color: var(--c-primary);
  border: .5px solid var(--c-primary);
}
.btn-outline:hover { background: var(--c-primary-soft); }

nav a { color: var(--c-primary); text-decoration: none; }

/* ---------- Accordion azioni (details/summary) ---------- */
details { border-radius: var(--radius-sm); }
details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: .35rem 0;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }

fieldset { border: .5px solid var(--c-border); border-radius: var(--radius-sm); }
legend { font-weight: 600; color: var(--c-text); }

/* ---------- Avvisi ---------- */
.alert {
  background: var(--c-warn-soft);
  color: var(--c-warn-soft-text);
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

/* ---------- Misc ---------- */
.muted { color: var(--c-muted); font-size: var(--fs-sm); }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.topbar a { margin-left: 0; }
.topbar nav { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.inline { display: flex; gap: .75rem; flex-wrap: wrap; list-style: none; padding: 0; }
.inline-form { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; align-items: center; }
.checkboxes { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; }

.avatar { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: .4rem; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

.badge {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .45rem;
  border-radius: var(--radius-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 600;
}
.badge-recurring-stopped {
  background: var(--c-danger-soft);
  color: var(--c-danger-soft-text);
}

.group-title { text-align: center; margin: .5rem 0 1.5rem; }

/* ---------- Partecipanti ---------- */
.participant-list { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.participant-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.participant-label { display: flex; align-items: center; gap: .4rem; margin: 0; }
.participant-percentage { width: 6rem; }

/* ---------- Campo password con toggle ---------- */
.password-field { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.password-field:first-of-type { margin-top: 0; }
.password-field input { flex: 1 1 auto; min-width: 0; }
.password-field .password-toggle,
button.password-toggle {
  margin: 0;
  padding: 0;
  flex: 0 0 2.2rem;
  width: 2.2rem;
  min-width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2);
  border: .5px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.password-field .password-toggle:hover,
button.password-toggle:hover { background: var(--c-border); }
.password-field .password-toggle:focus,
button.password-toggle:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }

/* ---------- Pagine auth ---------- */
.auth-shell { display: flex; flex-direction: column; align-items: center; }
.auth-card { width: min(100%, calc(34ch + 2.5rem)); margin-left: auto; margin-right: auto; }
.auth-card input, .auth-card button { width: 100%; }
.auth-title { text-align: center; margin: 0 auto 1.5rem; }

/* ---------- Header gruppo + azioni ---------- */
.group-header { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; margin: .25rem 0 1.25rem; }
@media (min-width: 900px) { .group-header { grid-template-columns: 2fr 1.2fr; } }
.group-header-main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.group-title-l { font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--c-text); }
.group-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.group-actions button { margin-top: 0; width: auto; }

/* ---------- Griglia principale (movimenti + bilanci) ---------- */
.grid-main { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .grid-main { grid-template-columns: 2fr 1.2fr; } }

/* ---------- Modale ---------- */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; background: rgba(15, 23, 42, .6); z-index: 1000; overflow-y: auto; }
.modal-overlay.is-hidden { display: none; }
.modal-card { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; margin: auto; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.modal-head h3 { margin: 0; }
.modal-close { width: auto; margin: 0; padding: .3rem .6rem; background: var(--c-surface-2); color: var(--c-text); border: .5px solid var(--c-border-strong); border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--c-border); }
body.modal-open { overflow: hidden; }
/* ---------- Lista gruppi (home) ---------- */
.group-list { background: var(--c-surface); border: .5px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .4rem; margin-bottom: var(--space-4); }
.group-row { display: flex; align-items: center; gap: .65rem; padding: .6rem .5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text); }
.group-row + .group-row { border-top: .5px solid var(--c-border); }
.group-row:hover { background: var(--c-surface-2); text-decoration: none; }
.group-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--c-primary-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.group-name { font-weight: 500; flex: 1 1 auto; min-width: 0; }
.group-bal { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.group-bal.pos { color: var(--c-success); }
.group-bal.neg { color: var(--c-danger); }
.group-bal.neutral { color: var(--c-muted); }
@media (max-width: 520px) { .group-row { flex-wrap: wrap; } .group-bal { flex: 1 1 100%; padding-left: calc(32px + .65rem); } }

/* ---------- Bottoni azioni gruppo piu piccoli ---------- */


/* ---------- Celle tabelle movimenti a 10px (intestazioni invariate) ---------- */
.movements-table td { font-size: var(--fs-sm); }
/* ---------- Footer: avviso nuova versione ---------- */
@keyframes app-version-blink { 0%, 100% { opacity: .85; } 50% { opacity: .15; } }
.app-version.update-available { animation: app-version-blink 1.1s ease-in-out infinite; opacity: 1 !important; font-weight: 600; }
.app-version.update-available a { color: var(--c-danger); text-decoration: underline; }

/* ---------- Paginazione movimenti (compatta) ---------- */
.pager .button { padding: .3rem .5rem; font-size: .6rem; border-radius: 6px; margin-top: 0; }
.pager span { font-size: .75rem; }

/* ---------- Dashboard stat-cards (home) ---------- */
.stat-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); }
@media (min-width: 640px) { .stat-cards { grid-template-columns: repeat(3, 1fr); } }
.stat-card { background: var(--c-surface); border: .5px solid var(--c-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .25rem; }
.stat-label { font-size: .8rem; color: var(--c-muted); }
.stat-value { font-size: 1.5rem; font-weight: 600; }
.stat-card.pos .stat-value { color: var(--c-success); }
.stat-card.neg .stat-value { color: var(--c-danger); }

/* ---------- Categorie: chip cliccabili (click per rinominare) ---------- */
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; align-items: flex-start; }
.cat-chip > summary { list-style: none; cursor: pointer; display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary-soft-text); font-size: .8rem; font-weight: 600; }
.cat-chip > summary::-webkit-details-marker { display: none; }
.cat-chip[open] > summary { background: var(--c-primary); color: var(--c-on-primary); }
.cat-chip[open] { width: 100%; }
.cat-chip .inline-form { margin-top: .4rem; }

/* ---------- App shell + sidebar ---------- */
.appbar-left { display: flex; align-items: center; gap: .5rem; }
.menu-toggle { display: none; width: auto; margin: 0; padding: .25rem .5rem; background: transparent; color: var(--c-on-primary); border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.app-shell { display: flex; align-items: flex-start; max-width: 940px; margin: 0 auto; }
.sidebar { flex: 0 0 230px; width: 230px; background: var(--c-surface); border: .5px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem .6rem; margin-top: 4.75rem; align-self: flex-start; }
.sidebar nav { display: flex; flex-direction: column; gap: .1rem; }
.side-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: .9rem .5rem .2rem; }
.side-link { display: block; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; font-size: .95rem; }
.side-link:hover { background: var(--c-surface-2); text-decoration: none; }
.side-link.side-sub { padding-left: 1.1rem; font-size: .9rem; }
.app-main { flex: 1 1 auto; min-width: 0; }
.sidebar-backdrop { display: none; }
.icon-rail { display: none; }
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); min-height: 100vh; margin-top: 0; border-radius: 0; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; }
  .icon-rail { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 0; left: 0; bottom: 0; width: 56px; z-index: 40; background: var(--c-surface); border-right: .5px solid var(--c-border); padding-top: 3.75rem; }
  .rail-btn { width: 100%; aspect-ratio: 1 / 1; background: transparent; border: none; color: var(--c-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .rail-btn:hover, .rail-btn:active { color: var(--c-text); background: var(--c-surface-2); }
  .rail-ic { width: 22px; height: 22px; }
  .app-main { padding-left: 56px; }
}
/* fix allineamento: le celle della griglia possono restringersi (la tabella scrolla) */
.grid-main > * { min-width: 0; }
/* con sidebar: contenuto allineato a sinistra (adiacente alla sidebar), non centrato */
.sidebar ~ .app-main .container { margin-left: 0; margin-right: auto; }


/* ---------- Appbar allineata ai contenuti + user menu v0.7.2 ---------- */
.appbar { display: block; padding: .65rem 0; }
.appbar-inner { display: flex; align-items: center; max-width: 940px; margin: 0 auto; }
.appbar-spacer { flex: 0 0 230px; }
.appbar-content { flex: 1 1 auto; min-width: 0; max-width: var(--container); padding: 0 var(--space-4); display: flex; align-items: center; gap: .5rem; }
.appbar-content:first-child { margin-left: auto; margin-right: auto; }
.appbar .brand { margin-right: auto; }
.appbar-right { display: flex; align-items: center; gap: .5rem; }
.user-menu { position: relative; }
.user-menu-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; background: rgba(255,255,255,.18); color: var(--c-on-primary); border: none; border-radius: var(--radius-pill); font-size: .9rem; line-height: 1; cursor: pointer; }
.user-menu-btn:hover, .user-menu.open .user-menu-btn { background: rgba(255,255,255,.28); }
.user-menu-btn .avatar { width: 24px; height: 24px; margin: 0; }
.user-menu-ini { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.30); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; }
.user-menu-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-caret { font-size: .7rem; opacity: .9; }
.user-menu-dropdown { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 170px; background: var(--c-surface); border: .5px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; display: none; flex-direction: column; z-index: 60; }
.user-menu.open .user-menu-dropdown { display: flex; }
.user-menu-dropdown a { display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; color: var(--c-text); text-decoration: none; font-size: .92rem; }
.user-menu-dropdown a:hover { background: var(--c-surface-2); text-decoration: none; }
.user-menu-dropdown a + a { border-top: .5px solid var(--c-border); }
.user-menu-dropdown a svg { flex: 0 0 auto; opacity: .8; }
@media (max-width: 860px) { .appbar-spacer { display: none; } }
@media (max-width: 480px) { .user-menu-name { display: none; } }

/* ---------- Movimenti: intestazione mese v0.7.5 ---------- */
.month-row td { background: var(--c-surface-2); color: var(--c-muted); font-weight: 600; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .5rem; }

/* ---------- Icone categoria Movimenti v0.7.6 ---------- */
.cat-ic { width: 1.05em; height: 1.05em; vertical-align: -3px; margin-right: .4rem; color: var(--c-muted); flex: 0 0 auto; }

/* ---------- Movimenti: pagante sotto importo v0.7.8 ---------- */
.mov-amt-cell { white-space: normal; }
.mov-payer { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.2; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Icone/foto gruppi + Impostazioni gruppo v0.7.9 ---------- */
.group-img { width: 19px; height: 19px; border-radius: 5px; object-fit: cover; vertical-align: middle; }
.side-grp-ic { width: 1.05em; height: 1.05em; margin-right: .45rem; vertical-align: -3px; color: var(--c-muted); }
.side-grp-img { width: 1.05em; height: 1.05em; border-radius: 4px; object-fit: cover; margin-right: .45rem; vertical-align: -3px; }
.group-title-ic { width: 1.1em; height: 1.1em; margin-right: .45rem; vertical-align: -3px; }
.group-title-img { width: 1.3em; height: 1.3em; border-radius: 6px; object-fit: cover; margin-right: .45rem; vertical-align: -4px; }
.grp-row { padding: .9rem 0; border-top: .5px solid var(--c-border); }
.grp-row:first-child { border-top: 0; }
.grp-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.grp-preview { width: 38px; height: 38px; border-radius: 8px; background: var(--c-surface-2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.grp-preview svg { width: 22px; height: 22px; color: var(--c-text); }
.grp-preview img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.grp-name { font-weight: 600; }
.grp-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .6rem; }
.grp-swatch { width: 34px; height: 34px; padding: 0; border-radius: 8px; border: .5px solid var(--c-border); background: var(--c-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.grp-swatch svg { width: 18px; height: 18px; color: var(--c-text); }
.grp-swatch:hover { background: var(--c-surface-2); }
.grp-swatch.active { border: 2px solid var(--c-primary); background: var(--c-primary-soft); }
.grp-photo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.grp-photo label { font-size: .8rem; color: var(--c-muted); }
.grp-photo input[type=file] { flex: 1 1 auto; min-width: 0; width: auto; }
.grp-photo button { width: auto; }

.group-people { font-size: .8rem; color: var(--c-muted); margin: .15rem 0 1rem; }

/* ---------- Lightbox immagine v0.7.16 ---------- */
.grp-img-btn { padding: 0; border: none; background: none; cursor: zoom-in; line-height: 0; }
.grp-img-btn img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.img-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); padding: 2rem; cursor: zoom-out; }
.img-modal.is-hidden { display: none; }
.img-modal img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow); }

/* ---------- Membri gruppo v0.7.17 ---------- */
.grp-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin: .8rem 0 .35rem; }
.grp-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.grp-member { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .1rem; }
.grp-member-info { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.grp-member-info .avatar { width: 26px; height: 26px; margin: 0; }
.grp-ini { width: 26px; height: 26px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; flex: 0 0 auto; }
.grp-member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-member-note { font-size: .72rem; color: var(--c-muted); flex: 0 0 auto; }
.grp-owner-badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; background: var(--c-primary-soft); color: var(--c-primary-soft-text); padding: .08rem .4rem; border-radius: var(--radius-pill); vertical-align: middle; }
.btn-danger-sm { width: auto; padding: .2rem .55rem; font-size: .78rem; background: transparent; color: #c0392b; border: .5px solid currentColor; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.3; }
.btn-danger-sm:hover { background: rgba(192,57,43,.1); }
.grp-delete { margin-top: .8rem; }
.grp-delete .danger { width: auto; }
.grp-select-form { margin: 0 0 var(--space-4); }
.grp-select-form select { max-width: 280px; }
.grp-danger-zone { border-color: var(--c-danger); background: var(--c-danger-soft); }
.grp-danger-zone .grp-sub { color: var(--c-danger-soft-text); }
.confirm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); padding: 2rem; }
.confirm-modal.is-hidden { display: none; }
.confirm-modal-card { max-width: 360px; width: 100%; }
.confirm-modal-actions { display: flex; gap: .5rem; margin-top: .7rem; }
.confirm-modal-actions button { width: auto; }

/* ---------- Bilanci + colonna destra v0.7.20 ---------- */
.grid-right { display: flex; flex-direction: column; gap: var(--space-4); }
.bal-list { display: flex; flex-direction: column; }
.bal-row { display: flex; align-items: center; gap: 10px; padding: .5rem 0; border-bottom: .5px solid var(--c-border); }
.bal-row:last-child { border-bottom: 0; }
.bal-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; margin: 0; object-fit: cover; }
.bal-text { font-size: var(--fs-sm); line-height: 1.35; }

.grp-inline-img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; vertical-align: -3px; margin-right: 5px; }
.grp-inline-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; color: var(--c-muted); }

.group-count { color: var(--c-muted); font-size: var(--fs-sm); margin-left: .45rem; white-space: nowrap; }

/* ---------- Filtro movimenti v0.7.29 ---------- */
.mov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.mov-filter-btn { width: auto; padding: .3rem .5rem; margin: 0; flex: 0 0 auto; }
.mov-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.mov-filter[hidden] { display: none; }
.mov-filter input[type=search] { flex: 1 1 12rem; min-width: 0; width: auto; }
.mov-filter select, .mov-filter button { width: auto; }


/* Hub import */
.import-source{display:block;margin:.6rem 0;border:.5px solid var(--c-border-strong);border-radius:8px;}
.import-source>summary{cursor:pointer;padding:.6rem .9rem;display:flex;align-items:center;gap:.5rem;}
.import-source[open]>summary{border-bottom:.5px solid var(--c-border-strong);}
.import-source .card{margin:.6rem;}
.import-link{display:flex;align-items:center;gap:.5rem;width:100%;margin:.6rem 0;justify-content:flex-start;}

.import-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0;}
.import-row .import-link{flex:1 1 auto;margin:0;}


/* Import Splitwise: selezione + overlay caricamento */
.sw-group { padding: .6rem 0; border-bottom: .5px solid var(--c-border, #ddd); }
.sw-group:last-child { border-bottom: none; }
.sw-detail { margin: .5rem 0 .2rem 1.6rem; display: none; flex-direction: column; gap: .4rem; }
.sw-detail:not([hidden]) { display: flex; }
.sw-dest-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sw-merge-badge { font-size: var(--fs-sm, .875rem); color: var(--c-accent, #6d28d9); font-weight: 600; }
.sw-loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; }
.sw-loading-overlay:not([hidden]) { display: flex; }
.sw-loading-box { background: var(--c-surface, #fff); color: var(--c-text, #111); padding: 1.6rem 2rem; border-radius: 12px; text-align: center; max-width: 320px; }
.sw-hourglass { font-size: 2.4rem; animation: sw-spin 1.4s ease-in-out infinite; display: inline-block; }
@keyframes sw-spin { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }


/* ---------- Premium: grafici a torta ---------- */
.premium-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.premium-filter-vertical { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.premium-filter-vertical input, .premium-filter-vertical select { width: 75%; min-width: 90px; }
.premium-filter-vertical button[type="submit"] { align-self: flex-start; margin-top: var(--space-2); }
.premium-filter label { display: block; font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: .25rem; }
.premium-chart-wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.premium-pie { width: 220px; height: 220px; flex: none; display: block; margin: 0 auto; }
.premium-legend-dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .4em; }
.premium-total-row td { border-top: 1px solid var(--c-border-strong); }


/* ---------- Impostazioni gruppo: sezioni a comparsa (icona, aggiungi partecipante) ---------- */
.grp-reveal { margin: .6rem 0; border: .5px solid var(--c-border); border-radius: var(--radius-sm); padding: .5rem .75rem; }
.grp-reveal > summary { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.grp-reveal > summary::after { content: '\25BC'; font-size: .7rem; color: var(--c-muted); margin-left: .5rem; }
.grp-reveal[open] > summary { margin-bottom: .6rem; }
.grp-reveal[open] > summary::after { content: '\25B2'; }
.grp-reveal-body { display: flex; flex-direction: column; gap: .6rem; }
.grp-delete-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }


/* ---------- Attivita' recenti ---------- */
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--c-border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon-wrap { position: relative; flex: none; width: 40px; height: 40px; }
.activity-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--c-surface-2); display: flex; align-items: center; justify-content: center; }
.activity-icon svg { width: 20px; height: 20px; color: var(--c-muted); }
.activity-badge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-accent, #6d28d9); color: #fff; font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-surface); }
.activity-badge.you { background: #2563eb; }
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: var(--fs-sm); line-height: 1.4; }
.activity-amount { font-weight: 600; font-size: var(--fs-sm); }
.activity-amount.pos { color: #16a34a; }
.activity-amount.neg { color: #ea580c; }
.activity-amount.muted { color: var(--c-muted); font-weight: 400; }
.activity-date { font-size: var(--fs-2xs, .75rem); color: var(--c-muted); margin-top: .15rem; }