/* ============================================================
   TEMA OCEANO — Stopazzo (layer di override)
   Caricato DOPO app.css: per disattivarlo basta rimuovere il link.
   Sidebar chiara, accento blu elettrico, titoli Space Grotesk.
   ============================================================ */
:root{
  --primary:#2563EB; --primary-hover:#1D4FBF; --primary-light:#EAF0FB;
  --secondary:#23508F; --secondary-light:#E0E9F7;
  --success:#3F6224; --success-light:#E4EEDD;
  --warning:#7A5A1F; --warning-light:#F4EBD8;
  --danger:#9B3535; --danger-light:#F5E1E1;

  --bg-body:#F6F8FB; --bg-card:#FFFFFF; --bg-sidebar:#FFFFFF;
  --bg-secondary:#F0F3F8; --bg-hover:#E8EDF4;

  --text-primary:#10151C; --text-secondary:#3D4754; --text-muted:#7C8694;
  --text-light:#10151C;            /* la sidebar ora è chiara: testo scuro */
  --text-on-primary:#FFFFFF;

  --border-color:#E2E7EE;
  --shadow-sm:0 1px 2px rgba(16,21,28,.05);
  --shadow-md:0 4px 14px rgba(16,21,28,.07);
  --shadow-lg:0 8px 24px rgba(16,21,28,.09);
}

/* ---- Sidebar chiara stile Oceano ---- */
.sidebar{ border-right:1px solid var(--border-color); }
.sidebar-logo{ border-bottom-color:var(--border-color); }
.sidebar-logo-text{ color:var(--text-primary); font-family:'Space Grotesk',sans-serif; }
.sidebar-logo-tagline{ color:var(--primary); }
.sidebar-nav a, .sidebar-nav button{ color:var(--text-muted); opacity:1; font-weight:500; }
.sidebar-nav a:hover, .sidebar-nav button:hover{ background:var(--bg-secondary); color:var(--text-primary); }
.sidebar-nav a.active, .sidebar-nav button.active{ background:var(--primary); color:var(--text-on-primary); }
.sidebar-user{ border-top-color:var(--border-color); }
.sidebar-user-avatar{ background:var(--text-primary); border-radius:var(--radius-sm,9px); }
.sidebar-user-role{ color:var(--text-muted); }

/* ---- Header mobile chiaro ---- */
.mobile-header{ border-bottom:1px solid var(--border-color); }
.mobile-header-logo{ color:var(--text-primary); font-family:'Space Grotesk',sans-serif; }

/* ---- Tipografia titoli ---- */
h1, h2, h3, .page-header h1, .modal-title{
  font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-.3px;
}

/* ---- Card e bottoni ---- */
.card{ border:1px solid var(--border-color); }
.trip-card{ transition:transform .18s, border-color .18s; }
.trip-card:hover{ transform:translateY(-2px); border-color:var(--text-primary); }
.btn{ border-radius:9px; font-weight:500; }

/* ============================================================
   Fondo cassa: barre quota target + dropdown movimenti
   ============================================================ */
.fund-progress-list{ display:flex; flex-direction:column; gap:10px; }
.fund-progress-row{ display:flex; flex-direction:column; gap:4px; }
.fund-progress-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:500; }
.fund-progress-bar{ height:8px; background:var(--bg-secondary); border-radius:99px; overflow:hidden; }
.fund-progress-fill{ height:100%; background:var(--primary); border-radius:99px; transition:width .3s ease; }
.dropdown{ position:relative; }
.dropdown-menu{ position:absolute; top:calc(100% + 4px); z-index:50; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:6px; min-width:190px; box-shadow:var(--shadow-lg); }
.dropdown-item{ display:block; width:100%; text-align:left; padding:8px 12px; border:none; background:transparent; border-radius:7px; font-size:13.5px; color:var(--text-primary); cursor:pointer; }
.dropdown-item:hover{ background:var(--bg-secondary); }
[x-cloak]{ display:none !important; }

/* ============================================================
   Footer modal Proposta — due fasce (spostamento / gestione)
   ============================================================ */
.modal-footer.proposal-footer{
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
}
/* ogni fascia: i pulsanti si dividono la riga in parti uguali (50/50, 33/33/33...) */
.proposal-footer .pf-band{
  display:flex; gap:8px; align-items:stretch;
}
.proposal-footer .pf-band .btn{
  flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; text-align:center;
}
.proposal-footer .pf-manage{
  border-top:1px solid var(--border-color, #e6e9ef); padding-top:10px;
}

/* Mobile stretto: se i testi non entrano, vanno a capo restando comunque a larghezza piena */
@media (max-width:480px){
  .proposal-footer .pf-band{ flex-wrap:wrap; }
  .proposal-footer .pf-band .btn{ flex:1 1 45%; }
}