/* ==========================================================
   PHOTOGRAPHY CRM — Design system
   Token-based, tema chiaro/scuro, mobile-first drawer.
   I nomi delle classi sono compatibili con i template esistenti.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root{
  --accent:#5A57D6; --accent-soft:#EEEEFB; --accent-ink:#3F3CB4; --accent-2:#8B88F0;
  --ground:#FBFBFD; --surface:#FFFFFF; --sunken:#F4F4F8;
  --rail:#1A1A24; --rail-ink:#C7C7D6; --rail-dim:#5C5C74;
  --ink:#16161D; --ink-2:#5B5B6B; --ink-3:#8E8EA0;
  --line:#E5E5EE; --line-soft:#F0F0F6;
  --ok:#15803D; --ok-bg:#DCFCE7; --warn:#B45309; --warn-bg:#FEF3C7;
  --bad:#B91C1C; --bad-bg:#FEE2E2; --idle:#64748B; --idle-bg:#EEF1F5;
  --info:#1D4ED8; --info-bg:#DBEAFE;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --shadow-sm:0 1px 2px rgba(22,22,29,.05);
  --shadow:0 1px 2px rgba(22,22,29,.05),0 8px 24px -12px rgba(22,22,29,.18);
  --shadow-lg:0 24px 60px -12px rgba(22,22,29,.28);
  --rail-w:236px; --tr:.2s cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#8B88F0; --accent-soft:#23233A; --accent-ink:#B0AEF7; --accent-2:#A5A2F5;
  --ground:#0E0E15; --surface:#17171F; --sunken:#1E1E28;
  --rail:#0A0A11; --rail-ink:#9E9EB3; --rail-dim:#55556B;
  --ink:#F2F2F7; --ink-2:#A9A9BC; --ink-3:#71718A;
  --line:#2A2A38; --line-soft:#222230;
  --ok:#4ADE80; --ok-bg:#14331F; --warn:#FBBF24; --warn-bg:#3A2A08;
  --bad:#F87171; --bad-bg:#3A1616; --idle:#94A3B8; --idle-bg:#22222E;
  --info:#60A5FA; --info-bg:#12233F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --accent:#8B88F0; --accent-soft:#23233A; --accent-ink:#B0AEF7; --accent-2:#A5A2F5;
  --ground:#0E0E15; --surface:#17171F; --sunken:#1E1E28;
  --rail:#0A0A11; --rail-ink:#9E9EB3; --rail-dim:#55556B;
  --ink:#F2F2F7; --ink-2:#A9A9BC; --ink-3:#71718A;
  --line:#2A2A38; --line-soft:#222230;
  --ok:#4ADE80; --ok-bg:#14331F; --warn:#FBBF24; --warn-bg:#3A2A08;
  --bad:#F87171; --bad-bg:#3A1616; --idle:#94A3B8; --idle-bg:#22222E;
  --info:#60A5FA; --info-bg:#12233F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;
  text-wrap:balance;letter-spacing:-.01em;line-height:1.2}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.num,table td,.stat-card-value{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.app-container{display:flex;min-height:100vh}
.sidebar{width:var(--rail-w);background:var(--rail);color:var(--rail-ink);flex-shrink:0;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
  transition:transform var(--tr)}
.sidebar-header{padding:20px 18px 18px;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07)}
/* Il marchio prende il colore del testo della barra tramite currentColor:
   una sola immagine per tema chiaro e scuro, invece di due file. */
.sidebar-marchio{width:100%;height:auto;max-width:190px;color:#fff;
  --logo-negativo:#0A0A11}
.sidebar-logo{width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;font-size:17px}
.sidebar-title h1{font-family:Fraunces,serif;font-size:16px;font-weight:600;color:#fff;line-height:1.15}
.sidebar-subtitle{font-size:11px;color:var(--rail-dim);letter-spacing:.04em;
  text-transform:uppercase;margin-top:2px}
.sidebar-nav{padding:14px 10px;flex:1;overflow-y:auto}
.nav-section{margin-bottom:4px}
.nav-section-title{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rail-dim);padding:12px 10px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-s);
  color:var(--rail-ink);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-item.active{background:var(--accent);color:#fff}
.nav-icon{width:18px;text-align:center;font-size:15px;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--bad);color:#fff;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:20px;font-variant-numeric:tabular-nums}
.nav-item.active .nav-badge{background:rgba(255,255,255,.25)}
.sidebar-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}

.main-content{flex:1;margin-left:var(--rail-w);min-width:0;display:flex;flex-direction:column}
.top-bar{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);padding:13px 26px;display:flex;align-items:center;gap:14px}
@supports (backdrop-filter:blur(10px)){
  .top-bar{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px)}}
.page-title{font-size:19px;font-family:Fraunces,serif;font-weight:600}
.page-subtitle{font-size:13px;color:var(--ink-3);margin-top:2px}
.page-header{margin-bottom:20px}
.page-header .page-title{font-size:23px}
.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.content-area{padding:26px;max-width:1180px;width:100%}

.mobile-menu-toggle{display:none;width:38px;height:38px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-s);cursor:pointer;
  align-items:center;justify-content:center;flex-shrink:0;padding:0}
.mobile-menu-toggle span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative}
.mobile-menu-toggle span::before,.mobile-menu-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:transform var(--tr)}
.mobile-menu-toggle span::before{top:-5.5px}
.mobile-menu-toggle span::after{top:5.5px}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,17,.55);z-index:55}
.mobile-overlay.active{display:block}

/* ---------- card ---------- */
.card,.content-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card-header{padding:15px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-title{font-family:Fraunces,serif;font-size:15.5px;font-weight:600}
.card-body{padding:18px}
.card-footer{padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px}

/* ---------- stat cards ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:15px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.stat-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.stat-card.is-ok::after{background:var(--ok)}
.stat-card.is-warn::after{background:var(--warn)}
.stat-card.is-bad::after{background:var(--bad)}
.stat-card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-card-title{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.stat-card-icon{font-size:16px;opacity:.75}
.stat-card-value{font-family:Fraunces,serif;font-size:29px;font-weight:600;line-height:1;margin:8px 0 3px}
.stat-card-label,.stat-card-sub{font-size:12.5px;color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:var(--r-s);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--sunken);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-outline{background:transparent}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover{filter:brightness(.92)}
.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-lg{padding:11px 20px;font-size:15px}
.btn-block{width:100%}

/* ---------- forms ---------- */
.form-group{margin-bottom:15px;display:flex;flex-direction:column;gap:5px}
.form-label{font-size:12px;font-weight:600;color:var(--ink-2)}
.form-input,.form-select,.form-textarea{width:100%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:var(--r-s);
  padding:9px 11px;font-size:14px;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-soft)}
.form-textarea{min-height:88px;resize:vertical;font-family:inherit}
.form-select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%238E8EA0' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  /* Senza una dimensione dichiarata il browser allarga il disegnino
     fino a riempire l'altezza del campo: era per questo che la
     freccia sembrava enorme. */
  background-size:11px 11px;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-hint{font-size:11.5px;color:var(--ink-3)}
.form-check{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-s);cursor:pointer;font-size:13.5px;font-weight:500;transition:var(--tr)}
.form-check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.form-check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- table ---------- */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
table,.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,table th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--sunken)}
.table td,table td{padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.table tbody tr:last-child td,table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover,table tbody tr:hover{background:var(--sunken)}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:20px;background:var(--idle-bg);color:var(--idle);white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-success,.status-accepted{background:var(--ok-bg);color:var(--ok)}
.badge-warning,.status-pending{background:var(--warn-bg);color:var(--warn)}
.badge-danger,.status-rejected{background:var(--bad-bg);color:var(--bad)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-idle{background:var(--idle-bg);color:var(--idle)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,10,17,.5)}
.modal.active,.modal[style*="flex"]{display:flex}
.modal-content{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);width:100%;max-width:560px;box-shadow:var(--shadow-lg);
  max-height:88vh;overflow-y:auto}
.modal-header{padding:18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-header h2,.modal-header h3{font-size:18px}
.modal-body{padding:18px}
.modal-footer{padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:9px;justify-content:flex-end}
.modal-close{background:none;border:0;font-size:21px;cursor:pointer;color:var(--ink-3);line-height:1;padding:4px}
.modal-close:hover{color:var(--ink)}

/* ---------- empty / loading ---------- */
.empty-state{padding:44px 18px;text-align:center}
.empty-state-icon{font-size:32px;opacity:.4;margin-bottom:10px}
.empty-state-title{font-family:Fraunces,serif;font-size:16px;font-weight:600;margin-bottom:5px}
.empty-state-text{font-size:13.5px;color:var(--ink-3);max-width:38ch;margin:0 auto}
.loading-container{display:flex;align-items:center;justify-content:center;padding:44px;gap:11px;color:var(--ink-3)}
.spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- alert ---------- */
.alert{padding:11px 14px;border-radius:var(--r-s);font-size:13.5px;margin-bottom:14px;
  border-left:3px solid var(--accent);background:var(--sunken)}
.alert-success{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.alert-warning{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.alert-danger,.alert-error{border-left-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.alert-info{border-left-color:var(--info);background:var(--info-bg);color:var(--info)}

/* ---------- calendar (vista mese) ---------- */
.calendar-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.calendar-nav{display:flex;gap:6px;align-items:center}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.calendar-day-header{background:var(--sunken);padding:9px 6px;text-align:center;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.calendar-day{background:var(--surface);min-height:92px;padding:7px;position:relative}
.calendar-day.other-month{background:var(--sunken);opacity:.55}
.calendar-day.today{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.calendar-day-number{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:4px}
.calendar-day.today .calendar-day-number{background:var(--accent);color:#fff;border-radius:50%;
  width:24px;height:24px;display:grid;place-items:center}
.calendar-event{background:var(--accent-soft);color:var(--accent-ink);border-left:3px solid var(--accent);
  border-radius:4px;padding:3px 6px;font-size:11px;font-weight:600;margin-bottom:3px;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-event:hover{filter:brightness(.96)}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.legend-color{width:11px;height:11px;border-radius:3px;flex-shrink:0}


/* ---------- pulsanti a segmenti (viste calendario, filtri) ----------
   ATTENZIONE alla cascata: ".seg-group .btn" ha specificita' 0-2-0 e batte
   ".btn-primary" (0-1-0). Senza la regola combinata qui sotto il pulsante
   attivo perde lo sfondo e resta testo bianco su fondo chiaro: invisibile. */
.seg-group{display:inline-flex;background:var(--sunken);border-radius:var(--r-s);padding:2.5px;gap:2px}
.seg-group .btn{border:0;background:none;box-shadow:none;color:var(--ink-2);font-weight:600}
.seg-group .btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.seg-group .btn.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg-group .btn.btn-primary:hover{background:var(--accent-ink)}


/* ---------- finestra larga a tre colonne ----------
   Il form del lead ha una ventina di campi: in colonna singola costringe a
   scorrere per arrivare al pulsante Salva. Qui i campi vanno su tre colonne
   e l'intestazione, con Salva dentro, resta fissa in alto.
   La disposizione e' tutta in CSS: l'HTML del form non viene riorganizzato. */
.modal-content.modal-wide{max-width:980px}
.modal-wide .modal-header{position:sticky;top:0;z-index:5;background:var(--surface);
  border-bottom:1px solid var(--line)}
.modal-header-actions{display:flex;gap:9px;align-items:center;margin-left:auto}
.modal-wide .modal-body>form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 16px;align-items:start}
.modal-wide .modal-body>form>.form-group{margin-bottom:14px;min-width:0}
/* riga intera: gruppi annidati, riquadri, e i campi con testo lungo */
.modal-wide .modal-body>form>.form-row,
.modal-wide .modal-body>form>.card,
.modal-wide .modal-body>form>div:not(.form-group){grid-column:1/-1}
.modal-wide .modal-body>form>.form-group:has(textarea){grid-column:1/-1}
.modal-wide .modal-body>form>.form-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .modal-wide .modal-body>form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-wide .modal-body>form>.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .modal-content.modal-wide{max-width:none}
  .modal-wide .modal-body>form,
  .modal-wide .modal-body>form>.form-row{grid-template-columns:1fr}
  .modal-header-actions .btn{padding:6px 11px;font-size:12.5px}
}

/* ---------- avvisi che spariscono da soli ---------- */
#avvisi{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.avviso{pointer-events:auto;cursor:pointer;background:var(--ink);color:var(--ground);
  padding:11px 18px;border-radius:22px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.4);max-width:88vw;
  animation:avviso-entra .22s cubic-bezier(.2,.8,.3,1)}
.avviso-ok{background:var(--ok);color:#fff}
.avviso-errore{background:var(--bad);color:#fff}
.avviso.via{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes avviso-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.avviso{animation:none}}
@media (max-width:768px){#avvisi{bottom:14px}}

/* ---------- stato del pagamento ----------
   Rosso finche' non e' incassato, verde quando lo dichiari pagato: il
   colore deve saltare all'occhio scorrendo l'elenco, non richiedere lettura. */
select.pagamento-atteso{border-color:var(--bad);background-color:var(--bad-bg);
  color:var(--bad);font-weight:700}
select.pagamento-fatto{border-color:var(--ok);background-color:var(--ok-bg);
  color:var(--ok);font-weight:700}
.badge-pagato{background:var(--ok-bg);color:var(--ok)}
.badge-attesa-pagamento{background:var(--bad-bg);color:var(--bad)}

.bordo-ok{border-color:var(--ok)}

/* ---------- riepilogo degli incassi nel modulo ---------- */
.riepilogo-incassi{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;margin-bottom:15px}
.ri-testata{display:flex;align-items:center;justify-content:space-between;
  padding:11px 15px;background:var(--sunken);border-bottom:1px solid var(--line);
  font-weight:700;font-size:13.5px}
.ri-riga{display:grid;grid-template-columns:1fr auto minmax(0,300px);gap:14px;
  align-items:center;padding:11px 15px;border-bottom:1px solid var(--line-soft)}
.ri-riga:last-child{border-bottom:0}
.ri-nome{font-size:13.5px;font-weight:600}
.ri-nota{font-size:11.5px;color:var(--ink-3);font-weight:400;margin-left:6px}
.ri-cifra{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;text-align:right;
  white-space:nowrap}
.ri-azioni{display:flex;gap:9px;align-items:center;justify-content:flex-end}
.ri-azioni .form-select{max-width:150px;font-size:12.5px;padding:6px 26px 6px 9px}
.ri-azioni .form-check{padding:6px 11px;font-size:12.5px;white-space:nowrap}
.ri-totale{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ri-totale .ri-cifra{font-size:17px}
.ri-fatta{background:var(--ok-bg)}
.ri-fatta .ri-nome,.ri-fatta .ri-cifra{color:var(--ok)}
.ri-conclusione{background:var(--sunken);font-weight:700}
.ri-rosso{color:var(--bad)}
.ri-verde{color:var(--ok)}
@media (max-width:768px){
  .ri-riga{grid-template-columns:1fr auto;gap:8px}
  .ri-azioni{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
}

/* ---------- passaggio del mouse, uniforme su tutti i pulsanti ----------
   Prima ogni variante reagiva a modo suo: filter su alcuni, niente su altri,
   e i pulsanti chiari sembravano spenti. */
.btn{transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{background:var(--sunken);border-color:var(--ink-3)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-danger:hover{background:var(--bad);border-color:var(--bad);color:#fff;filter:none}
.btn-success:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-outline:hover{background:var(--sunken)}
.btn:active{transform:translateY(1px)}
.btn:disabled:hover{background:inherit;border-color:var(--line);transform:none}

.pacchetti{display:flex;gap:9px;flex-wrap:wrap}
.pacchetto-scelta{cursor:pointer}
.pacchetto-scelta input{accent-color:var(--accent)}
.pacchetto-scelta.scelto{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-ink);font-weight:700}

/* ---------- utility ---------- */
.flex{display:flex}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.flex-gap,.gap-2{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--ink-3)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.hide{display:none!important}

/* ---------- theme toggle ---------- */
.theme-toggle{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-s);
  cursor:pointer;color:var(--rail-ink);font-size:13.5px;background:none;border:0;width:100%;text-align:left}
.theme-toggle:hover{background:rgba(255,255,255,.06)}
.toggle-switch{margin-left:auto;width:34px;height:19px;border-radius:20px;
  background:rgba(255,255,255,.16);position:relative;transition:background var(--tr);pointer-events:none}
.toggle-switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:transform var(--tr)}
[data-theme="dark"] .toggle-switch{background:var(--accent)}
[data-theme="dark"] .toggle-switch::after{transform:translateX(15px)}

/* ---------- responsive ---------- */
@media (max-width:1024px){.content-area{padding:20px}}
@media (max-width:768px){
  .sidebar{transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sidebar.mobile-open,.sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0}
  .mobile-menu-toggle{display:inline-flex}
  .content-area{padding:16px}
  .top-bar{padding:11px 16px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .stat-card-value{font-size:24px}
  .form-row{grid-template-columns:1fr}
  .page-header .page-title{font-size:20px}
  .modal{padding:0;align-items:flex-end}
  .modal-content{max-width:none;border-radius:var(--r-l) var(--r-l) 0 0;max-height:92vh}
  .modal-footer{flex-direction:column-reverse}
  .modal-footer .btn{width:100%}
  .calendar-day{min-height:64px;padding:4px}
  .calendar-event{font-size:9.5px;padding:2px 4px}
  .table th,.table td,table th,table td{padding:10px 11px}
}
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .top-actions{width:100%;margin-left:0}
  .top-actions .btn{flex:1}
}


/* ==========================================================
   TELEFONO: LE TABELLE DIVENTANO SCHEDE
   Una tabella da nove colonne dentro uno schermo da 375 pixel
   costringe a trascinare di lato per leggere l'importo. Sotto i
   760 pixel ogni riga diventa una scheda, e ogni valore si porta
   accanto il nome della sua colonna.
   ========================================================== */
@media (max-width: 760px){
  .table-container{overflow-x:visible; border:0; background:none; box-shadow:none}
  /* Due bordi annidati mangiavano 68 dei 375 pixel dello schermo: dove le
     righe sono gia' schede, la scheda che le contiene non serve piu'. */
  .card-body:has(> .table-container){padding-left:0; padding-right:0}
  .content-card:has(.table-container){border:0; background:none; box-shadow:none}
  .table thead{position:absolute; width:1px; height:1px; overflow:hidden;
               clip:rect(0 0 0 0); white-space:nowrap}
  .table, .table tbody, .table tr, .table td{display:block; width:auto}
  .table tr{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-l); box-shadow:var(--shadow-sm);
    padding:6px 2px; margin-bottom:12px;
  }
  .table td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    border:0; border-bottom:1px solid var(--line-soft);
    padding:10px 14px; min-height:44px; text-align:right;
  }
  .table tr td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-etichetta);
    flex:0 0 auto; text-align:left;
    font-size:11.5px; font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-3);
  }
  /* Una cella senza etichetta (o vuota) non deve lasciare una riga vuota. */
  .table td:empty{display:none}
  .table td:not([data-etichetta])::before{content:none}

  /* La prima cella e' il nome: fa da titolo della scheda. */
  .table tr td:first-child{
    background:var(--sunken); border-radius:var(--r-m) var(--r-m) 0 0;
    font-size:16px; font-weight:600; text-align:left;
    justify-content:flex-start; padding:12px 14px; margin:-6px -2px 6px;
  }
  .table tr td:first-child::before{content:none}

  /* I pulsanti in fondo stanno larghi: sul telefono si tocca col pollice. */
  .table td .btn-group, .table td .azioni{
    display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
  }
  .table td .btn{min-height:40px; padding-left:14px; padding-right:14px}
}

/* ---------- il telefono, in generale ---------- */
@media (max-width: 760px){
  /* iPhone ingrandisce da solo qualsiasi campo sotto i 16px, e poi la
     pagina resta ingrandita. Meglio partire gia' a 16. */
  input, select, textarea{font-size:16px}

  /* Niente si deve poter trascinare di lato. */
  html, body{overflow-x:hidden}

  /* Bersagli grandi abbastanza da centrarli col pollice. */
  .btn, .nav-item, .seg-group .btn, .icon-btn{min-height:44px}
  .icon-btn{min-width:44px}

  /* Le finestre a comparsa partono dal basso e occupano quasi tutto:
     una finestrella centrata su un telefono e' scomoda da compilare. */
  .modal{align-items:flex-end; padding:0}
  .modal-content{
    max-height:92dvh; width:100%; max-width:100%;
    border-radius:var(--r-l) var(--r-l) 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .modal-footer{position:sticky; bottom:0; background:var(--surface);
                padding-top:12px; border-top:1px solid var(--line)}
  .modal-footer .btn{flex:1}

  /* Due colonne di campi su un telefono diventano una. */
  .form-row, .form-grid{grid-template-columns:1fr !important}

  /* I numeri grossi della bacheca non devono andare a capo storti. */
  .stat-value, .numero-grosso{font-size:26px}

  .page-header{flex-wrap:wrap; gap:10px}
  .page-header .btn{flex:1 1 auto}
}

/* Sotto i 380 pixel (iPhone SE e mini) si stringe ancora un po'. */
@media (max-width: 380px){
  .table td{padding-left:11px; padding-right:11px}
  .table td::before{font-size:11px}
}


/* ==========================================================
   RIEPILOGO DELL'EVENTO nel popup del calendario
   Affiancato invece che in colonna: le informazioni che servono
   per decidere -- quando, dove, quanto, incassato o no -- si
   leggono tutte insieme senza scorrere.
   ========================================================== */
.riep-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
}
/* I bordi stanno sulle celle, non sullo sfondo che traspare fra una e
   l'altra: se l'ultima riga non e' piena, lo spazio in coda resta pulito
   invece di sembrare due caselle vuote. */
.riep-voce{
  padding:12px 14px; min-width:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:3px;
}
.riep-eti{
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.riep-val{
  font-size:15px; font-weight:600; color:var(--ink);
  overflow-wrap:anywhere; text-decoration:none;
}
.riep-num{font-variant-numeric:tabular-nums}
.riep-sotto{font-size:12.5px; color:var(--ink-2); overflow-wrap:anywhere}
.riep-note{
  margin-top:14px; background:var(--sunken); border-radius:var(--r-m);
  padding:12px 14px; display:flex; flex-direction:column; gap:5px;
}
.riep-note p{font-size:14px; color:var(--ink-2); white-space:pre-wrap; margin:0}
@media (max-width:760px){
  .riep-griglia{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .riep-voce{padding:11px 12px}
}


/* ==========================================================
   DOVE VANNO I SOLDI — i costi divisi nelle tre voci
   Sommarli in un numero solo non aiuta a decidere: 900 euro
   possono essere un secondo fotografo o venti contatti pagati
   che non si sono chiusi, e si rimedia in modi opposti.
   ========================================================== */
.costi-griglia{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
}
.costo-voce{
  padding:14px 16px; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.costo-eti{
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.costo-cifra{
  font-family:Fraunces,Georgia,serif; font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ink); line-height:1.15;
}
.costo-nota{font-size:12px; color:var(--ink-2)}
.costo-totale{background:var(--sunken)}
.costo-totale .costo-cifra{color:var(--warn)}
.card-nota{font-size:12.5px; color:var(--ink-3)}
/* Le colonne dei costi, piu' tenui: la riga si legge lo stesso quando
   sono tre invece di una. */
.c-costo{color:var(--ink-2); font-size:13.5px; font-variant-numeric:tabular-nums}
th.c-costo{font-size:11px}


/* ---------- da ricontattare oggi ---------- */
.sollecito{
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:16px 18px; margin-bottom:14px; background:var(--surface);
}
.sollecito-capo{display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap}
.sollecito-nome{font-size:17px; font-weight:600; color:var(--ink);
  text-decoration:none; margin-right:9px}
.sollecito-nome:hover{color:var(--accent)}
.sollecito-quando{font-size:12.5px; color:var(--warn); font-weight:600; white-space:nowrap}
.sollecito-meta{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.sollecito-azioni{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.sollecito-nota{font-size:12px; color:var(--ink-3); margin-top:9px; line-height:1.5}
.btn-ghost{background:none; border:1px solid var(--line); color:var(--ink-2)}
@media (max-width:760px){
  .sollecito-azioni .btn{flex:1 1 auto}
  .sollecito-quando{white-space:normal}
}


/* ---------- nei prossimi giorni ---------- */
.prossimo{display:flex; gap:11px; align-items:center; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line-soft)}
.prossimo:last-child{border-bottom:0}
.prossimo-quando{font-size:12px; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.05em; min-width:88px}
.prossimo-nome{font-weight:600; color:var(--ink); text-decoration:none}
.prossimo-nome:hover{color:var(--accent)}
.prossimo-nota{font-size:12px; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:99px; padding:2px 9px}
@media (max-width:560px){.prossimo-quando{min-width:0}}


/* ==========================================================
   RITOCCHI: orari da telefono, spunta del ricontatto,
   mesi apribili nel report
   ========================================================== */

/* L'orologio di sistema, da telefono, ignora il passo di mezz'ora: e' il
   sistema operativo a decidere. Sotto i 760 pixel si mostra un menu, che
   il passo lo rispetta per forza. */
.orario-mobile{display:none}
@media (max-width:760px){
  .orario-grande{display:none}
  .orario-mobile{display:block}
}

/* La spunta del ricontatto: una casella normale, allineata in alto perche'
   accanto ha due righe di spiegazione. */
.spunta-ricontatto{align-items:flex-start; padding:12px 14px; margin-top:6px}
.spunta-ricontatto input{margin-top:2px; flex-shrink:0}
.spunta-ricontatto b{font-weight:600}

/* I riquadri informativi che erano rimasti col tema vecchio: usavano due
   colori cancellati da tempo, quindi si vedevano senza sfondo. */
.riquadro-info{background:var(--sunken); border:1px solid var(--line);
  border-radius:var(--r-m); padding:14px 16px; margin-bottom:14px}
.riquadro-info-titolo{font-size:13px; font-weight:600; color:var(--ink-2);
  margin:0 0 8px}

/* I mesi del report, apribili. Il riquadro deve dire da solo che si tocca:
   bordo, sfondo, e la freccia che gira. */
.mese-box{border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface); margin-bottom:9px; overflow:hidden}
.mese-testa{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:15px; color:var(--ink); text-align:left;
  transition:background var(--tr);
}
.mese-testa:hover{background:var(--sunken)}
.mese-testa:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.mese-nome{font-weight:600; min-width:104px}
.mese-riassunto{color:var(--ink-2); font-size:13.5px; font-variant-numeric:tabular-nums;
  margin-left:auto; text-align:right}
.mese-freccia{flex-shrink:0; color:var(--ink-3); transition:transform var(--tr); font-size:13px}
.mese-box.aperto .mese-freccia{transform:rotate(90deg)}
.mese-box.vuoto .mese-testa{color:var(--ink-3)}
.mese-corpo{padding:2px 16px 16px; border-top:1px solid var(--line-soft)}
.mese-voce{display:flex; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14px}
.mese-voce:last-child{border-bottom:0}
.mese-voce span:first-child{color:var(--ink-2)}
.mese-voce span:last-child{font-variant-numeric:tabular-nums; font-weight:600}

/* Da telefono anche i lead partono chiusi: si scorre l'elenco dei nomi e
   si apre solo quello che serve. */
@media (max-width:760px){
  .table tr.chiusa td:not(:first-child){display:none}
  .table tr.chiusa td:first-child::after{content:"›"; margin-left:auto; color:var(--ink-3);
    font-size:19px; line-height:1}
  .table tr:not(.chiusa) td:first-child::after{content:"⌄"; margin-left:auto; color:var(--ink-3);
    font-size:19px; line-height:1}
  .table tr td:first-child{cursor:pointer}
}


/* ==========================================================
   ICONE
   Disegni a tratto scritti dentro la pagina: niente libreria da
   scaricare, funzionano senza rete, e prendono il colore del
   testo accanto -- quindi vanno bene sul chiaro e sullo scuro
   senza doverne tenere due versioni.
   ========================================================== */
.ico{width:18px; height:18px; flex-shrink:0; display:block}
.nav-item .ico{opacity:.72; transition:opacity var(--tr)}
.nav-item:hover .ico,.nav-item.active .ico{opacity:1}

/* Il pulsante che apre gli altri messaggi. */
.altri-messaggi{margin-bottom:12px}

/* Da telefono le righe chiuse mostrano il solo nome. */
@media (max-width:760px){
  .table tr.chiusa td:first-child{border-radius:var(--r-m)}
}


/* ---------- le opzioni dei messaggi ---------- */
.azione{position:relative}
/* Quella scelta si vede: e' anche quella che il CRM ha aperto da solo. */
.azione-scelta{border-color:var(--accent); background:var(--accent-soft)}
.azione-scelta .azione-nome{color:var(--accent-ink)}
.azione-suggerita{
  display:inline-block; margin-top:6px;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ok); background:var(--ok-bg); border-radius:99px; padding:2px 8px;
}


/* ---------- il link corto di un documento ---------- */
.doc-corto{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 4px}
.doc-corto-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-s);
  padding:5px 9px; color:var(--accent-ink); overflow-wrap:anywhere; flex:1 1 220px;
}
.doc-corto-nota{font-size:12px; color:var(--ink-3); margin-bottom:8px; max-width:62ch}
.btn-sm{font-size:12.5px; padding:5px 11px; min-height:32px}
@media (max-width:760px){
  .doc-corto{gap:6px}
  .doc-corto .btn-sm{flex:1 1 auto}
}