/* ============================================================================
   Krinia · Dashboard Salone (Staff) — redesign 2026-06-06
   CSS scritto a mano (niente build Tailwind), token del Krinia Design System.
   CSP stretta: nessun inline style; i valori dinamici (agenda) via CSSOM da JS.
   ============================================================================ */

/* ---- Font self-hosted (CSP font-src 'self') ---- */
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/archivo-400-latin.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/archivo-500-latin.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/archivo-600-latin.woff2") format("woff2");}
@font-face{font-family:Archivo;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-700-latin.woff2") format("woff2");}
@font-face{font-family:Unbounded;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/unbounded-600-latin.woff2") format("woff2");}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-400-italic-latin.woff2") format("woff2");}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-400-latin.woff2") format("woff2");}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-mono-400-latin.woff2") format("woff2");}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dm-mono-500-latin.woff2") format("woff2");}

/* ---- Token (light) ---- */
:root{
  --ink:#15110e; --plum:#3b2230;
  --paper:#f6f1ea; --paper-2:#ece4d7; --paper-3:#e3d8c4;
  --surface:#fffdf9; --surface-2:#fdfaf3;
  --accent:#c96a55; --accent-dark:#a8503f; --accent-soft:#f2c8be; --blush:#e8a89a;
  --success:#4f7a4a; --warning:#c79024; --danger:#b34c43; --info:#4a6d8c;
  --fg-1:#15110e; --fg-2:#4a3f37; --fg-3:#7a6e63; --fg-disabled:#a89c8e;
  --bg-1:var(--paper); --bg-2:var(--paper-2);
  --line:rgba(21,17,14,.08); --line-2:rgba(21,17,14,.14); --line-strong:rgba(21,17,14,.22);
  --on-accent:#fdfaf3;

  --font-display:Unbounded,system-ui,sans-serif;
  --font-body:Archivo,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Instrument Serif","Times New Roman",serif;
  --font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(60,30,20,.07);
  --shadow-md:0 12px 28px -14px rgba(60,30,20,.22);
  --shadow-lg:0 30px 70px -28px rgba(60,30,20,.42);
  --ease:cubic-bezier(.2,.7,.3,1);
  --d-fast:120ms; --d-base:200ms; --d-slow:320ms;

  --sidebar-w:248px;
  --hour-px:72px;
}

/* ---- Token (dark) ---- */
[data-theme="dark"]{
  --paper:#15110e; --paper-2:#1f1a16; --paper-3:#2a2420;
  --surface:#1c1713; --surface-2:#221c17;
  --accent:#e8a89a; --accent-dark:#dd8b78; --accent-soft:#7a4036; --blush:#e8a89a;
  --fg-1:#f6f1ea; --fg-2:#d6cabb; --fg-3:#9c9085; --fg-disabled:#5a4f45;
  --bg-1:var(--paper); --bg-2:var(--paper-2);
  --line:rgba(246,241,234,.08); --line-2:rgba(246,241,234,.14); --line-strong:rgba(246,241,234,.24);
  --on-accent:#15110e;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 16px 34px -16px rgba(0,0,0,.6);
  --shadow-lg:0 36px 80px -30px rgba(0,0,0,.7);
}

/* ---- Reset ---- */
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{min-height:100%;}
body{
  margin:0; background:var(--bg-1); color:var(--fg-1);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer; border:none; background:none;}
button:disabled{cursor:not-allowed;}
svg{display:block;}
h1,h2,h3,h4,p{margin:0;}
a{color:var(--accent); text-decoration:none;}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong);}
::selection{background:var(--accent-soft); color:var(--ink);}

/* ---- Helpers ---- */
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.serif-italic{font-family:var(--font-serif); font-style:italic; font-weight:400;}
.wordmark{font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; line-height:1;}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);}
.muted-meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3);}
.empty{padding:28px 16px; text-align:center; color:var(--fg-3); font-size:14px;}

/* ---- Brand mark SVG ---- */
.mark-svg{width:100%; height:100%; fill:var(--paper);}
.mark-stroke-paper{stroke:var(--paper); stroke-width:3; stroke-linecap:round; fill:none;}
.mark-rings circle{stroke:var(--blush); stroke-width:2.6; fill:none;}
.mark-pivot{fill:var(--blush);}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px; padding:10px 16px; border-radius:var(--r-sm);
  transition:background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), opacity var(--d-fast);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-sm{padding:7px 13px; font-size:13px;}
.btn-block{width:100%;}
.btn-ico{width:16px; height:16px;}
.btn-ico path{stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:var(--ink); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--fg-1); box-shadow:inset 0 0 0 1px var(--line-2);}
.btn-ghost:hover{background:var(--bg-2);}
.link-button{color:var(--fg-3); font-size:12px; text-decoration:underline; text-underline-offset:2px; padding:0;}
.link-button:hover{color:var(--accent);}

.icon-button{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-sm); background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-2); color:var(--fg-2);
  transition:background var(--d-fast) var(--ease), color var(--d-fast);
}
.icon-button.sm{width:32px; height:32px;}
.icon-button:hover{background:var(--bg-2); color:var(--fg-1);}
.icon-button svg{width:18px; height:18px;}
.icon-button svg path{stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none;}

/* ---- Inputs ---- */
.field-label{display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:6px;}
.input{
  width:100%; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--fg-1);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow var(--d-fast) var(--ease);
}
.input::placeholder{color:var(--fg-disabled);}
.input:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);}
.code-input{text-align:center; font-size:26px; letter-spacing:.4em;}
.form-error{color:var(--danger); font-size:13px; min-height:18px; margin-top:8px;}

/* ---- Status chip ---- */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:var(--r-full); white-space:nowrap;}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.chip-success{background:color-mix(in srgb,var(--success) 16%,var(--surface)); color:var(--success);}
.chip-warn{background:color-mix(in srgb,var(--warning) 18%,var(--surface)); color:var(--warning);}
.chip-danger{background:color-mix(in srgb,var(--danger) 16%,var(--surface)); color:var(--danger);}
.chip-info{background:color-mix(in srgb,var(--info) 16%,var(--surface)); color:var(--info);}
.chip-neutral{background:var(--bg-2); color:var(--fg-2);}
.chip-neutral::before{display:none;}

/* ============================================================================
   LOGIN
   ============================================================================ */
.login-view{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;}
.login-aside{
  background:var(--ink); color:var(--paper);
  padding:56px; display:flex; flex-direction:column; justify-content:space-between;
  background-image:radial-gradient(120% 90% at 12% 8%, rgba(232,168,154,.18), transparent 55%);
}
.login-aside-mark{width:72px; height:72px;}
.login-aside-quote{font-size:34px; line-height:1.16; max-width:14ch; color:var(--paper);}
.login-aside-meta{font-size:12px; color:rgba(246,241,234,.55); letter-spacing:.1em;}
.login-panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:56px clamp(24px,6vw,88px); max-width:560px;
}
.login-panel h1{font-size:32px; font-weight:700; letter-spacing:-.02em; margin:6px 0 4px;}
.login-sub{color:var(--fg-3); margin-bottom:28px;}
.login-step{display:flex; flex-direction:column; gap:14px;}
@media (max-width:820px){
  .login-view{grid-template-columns:1fr;}
  .login-aside{display:none;}
  .login-panel{min-height:100vh; padding:32px 24px;}
}

/* ============================================================================
   APP SHELL
   ============================================================================ */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; gap:8px; padding:20px 14px;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{display:flex; align-items:center; gap:11px; padding:6px 8px 14px;}
.sidebar-mark{width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(246,241,234,.06); border-radius:9px; padding:5px;}
.sidebar-word{display:flex; flex-direction:column; line-height:1;}
.sidebar-word .wordmark{font-size:19px; color:var(--paper);}
.sidebar-sub{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,241,234,.45); margin-top:4px;}
.sidebar-group{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,234,.38); padding:6px 10px 2px; margin:0;}
.sidebar-nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border-radius:9px; font-size:14px; font-weight:500;
  color:rgba(246,241,234,.66);
  transition:background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.nav-item:hover{background:rgba(246,241,234,.06); color:var(--paper);}
.nav-item.active{background:rgba(246,241,234,.11); color:var(--paper);}
.nav-item.active .nav-ico{color:var(--blush);}
.nav-ico{width:18px; height:18px; flex:none; color:rgba(246,241,234,.7);}
.nav-ico path,.nav-ico circle{stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.sidebar-bottom{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:12px;}
.sidebar-salon-label{color:rgba(246,241,234,.5); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:0;}
.business-select{
  width:100%; padding:9px 11px; border-radius:8px; font-size:13px;
  background:rgba(246,241,234,.06); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(246,241,234,.14);
}
.business-select option{color:#15110e;}
.sidebar-operator{display:flex; align-items:center; gap:10px; padding:10px; border-radius:9px; background:rgba(246,241,234,.05);}
.operator-avatar{width:30px; height:30px; flex:none; border-radius:99px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
.operator-id{display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.operator-name{font-size:13px; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- Workspace ---- */
.workspace{display:flex; flex-direction:column; min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px clamp(20px,3vw,40px) 16px;
  position:sticky; top:0; z-index:6;
  background:color-mix(in srgb, var(--bg-1) 86%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-greeting{font-size:26px; font-weight:700; letter-spacing:-.02em;}
.topbar-greeting .serif-italic{color:var(--accent); margin-left:.28em; font-weight:400;}
.topbar-date{font-size:12px; color:var(--fg-3); margin-top:3px; letter-spacing:.04em; text-transform:capitalize;}
.topbar-actions{display:flex; align-items:center; gap:8px;}
.ico-moon{display:none;}
[data-theme="dark"] .ico-sun{display:none;}
[data-theme="dark"] .ico-moon{display:block;}

/* ---- Mobile tabs ---- */
.mobile-tabs{display:none;}

/* ---- Views ---- */
.views{flex:1; padding:22px clamp(20px,3vw,40px) 40px; min-width:0;}
.view-panel{animation:rise var(--d-slow) var(--ease);}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.view-title{font-size:22px; font-weight:700; letter-spacing:-.015em; margin-top:2px;}
.view-head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* ---- Segmented control ---- */
.segmented{display:inline-flex; background:var(--bg-2); border-radius:var(--r-sm); padding:3px;}
.segmented button{padding:6px 14px; border-radius:6px; font-size:13px; font-weight:600; color:var(--fg-3); transition:all var(--d-fast) var(--ease);}
.segmented button.active{background:var(--surface); color:var(--fg-1); box-shadow:var(--shadow-sm);}

/* ---- Redirect page (index.html legacy -> staff.html) ---- */
.redirect-view{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;}
.redirect-view h1{font-size:26px; font-weight:700; letter-spacing:-.02em;}
.redirect-view p{color:var(--fg-3); max-width:34ch;}
.redirect-view .btn{margin-top:14px;}

/* ============================================================================
   HOME (riepilogo)
   ============================================================================ */
.home-hero{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--plum); color:var(--paper); border-radius:var(--r-lg);
  padding:24px 28px; margin-bottom:18px; box-shadow:var(--shadow-md);
  background-image:radial-gradient(120% 120% at 92% 0%, rgba(232,168,154,.18), transparent 55%);
}
.home-hero .eyebrow{color:rgba(246,241,234,.55);}
.home-hero-line{font-family:var(--font-serif); font-style:italic; font-size:26px; line-height:1.25; margin-top:6px; max-width:46ch; color:var(--paper);}
.home-hero-line b{font-style:normal; font-family:var(--font-body); font-weight:700; color:var(--blush);}
.home-hero .btn-primary{flex:none;}

.home-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
.kpi-link{text-align:left; width:100%; cursor:pointer; transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);}
.kpi-link:not(:disabled):hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.kpi-link:disabled{cursor:default;}

.home-columns{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; margin-bottom:18px;}
.home-block-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;}
.home-block-head h3{font-size:15px; font-weight:600;}
.home-appts,.home-todo,.home-conv{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);}

.home-appt{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); text-align:left; width:100%; transition:background var(--d-fast) var(--ease);}
.home-appt:last-child{border-bottom:none;}
.home-appt:hover{background:var(--bg-2);}
.home-appt-time{font-size:14px; font-weight:600; color:var(--accent); flex:none; width:44px;}
.home-appt-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.home-appt-client{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.home-appt-service{font-size:12.5px; color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.todo-row{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; width:100%; transition:background var(--d-fast) var(--ease);}
.todo-row:last-child{border-bottom:none;}
.todo-row:hover{background:var(--bg-2);}
.todo-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.todo-name{font-size:14px; font-weight:600;}
.todo-sub{font-size:12.5px; color:var(--fg-3);}
.todo-badge{min-width:22px; height:22px; padding:0 7px; border-radius:99px; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none;}
.todo-arrow{width:18px; height:18px; flex:none; color:var(--fg-disabled);}
.todo-arrow path{stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none;}

.conv-row{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); text-align:left; width:100%; transition:background var(--d-fast) var(--ease);}
.conv-row:last-child{border-bottom:none;}
.conv-row:hover{background:var(--bg-2);}
.conv-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.conv-name{font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px;}
.conv-dot{width:7px; height:7px; border-radius:50%; background:var(--warning); flex:none;}
.conv-last{font-size:12.5px; color:var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.conv-when{font-size:11px; color:var(--fg-3); flex:none;}

/* ============================================================================
   AGENDA
   ============================================================================ */
.agenda-nav{display:flex; align-items:center; gap:8px;}
.agenda-current{font-family:var(--font-serif); font-style:italic; font-size:22px; margin-left:6px;}

.day-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
.strip-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-sm);}
.strip-card .eyebrow{display:block; margin-bottom:8px;}
.strip-val{font-family:var(--font-mono); font-size:28px; font-weight:500; line-height:1; color:var(--fg-1);}
.strip-val.accent{color:var(--accent);}
.strip-sub{font-size:12px; color:var(--fg-3); margin-top:6px;}

.agenda-grid-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:0; box-shadow:var(--shadow-sm); overflow:hidden;}
.agenda-grid{position:relative; overflow-x:auto;}
.agenda-headrow{display:grid; position:sticky; top:0; z-index:3; background:var(--surface); border-bottom:1px solid var(--line-2);}
.agenda-corner{padding:10px;}
.agenda-ophead{display:flex; align-items:center; gap:8px; padding:12px 14px; border-left:1px solid var(--line);}
.op-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.op-name{font-weight:600; font-size:14px;}
.op-meta{font-family:var(--font-mono); font-size:10px; color:var(--fg-3); margin-left:auto;}

.agenda-body{display:grid; position:relative;}
.agenda-times{display:flex; flex-direction:column;}
.time-cell{height:var(--hour-px); padding:6px 10px; font-family:var(--font-mono); font-size:11px; color:var(--fg-3); border-top:1px solid var(--line); display:flex; justify-content:flex-end;}
.time-cell:first-child{border-top:none;}
.agenda-col{position:relative; border-left:1px solid var(--line);}
.slot-cell{height:var(--hour-px); border-top:1px solid var(--line);}
.slot-cell:first-child{border-top:none;}
.slot-cell.half{border-top:1px dashed var(--line);}

.appt-card{
  position:absolute; left:6px; right:6px; top:var(--top); height:var(--height);
  background:var(--surface-2); border-radius:9px; padding:6px 9px;
  border-left:3px solid var(--op-color, var(--accent));
  box-shadow:var(--shadow-sm); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; gap:2px;
  transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.appt-card:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); z-index:1;}
.appt-client{font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.appt-service{font-size:12px; color:var(--fg-2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.appt-card.compact{justify-content:flex-start; gap:1px;}
.appt-card.compact .appt-service{display:none;}
.appt-card.compact .appt-foot{margin-top:auto;}
.appt-foot{display:flex; align-items:center; justify-content:space-between; gap:6px; flex:none;}
.appt-time{font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--fg-3);}

.agenda-now{position:absolute; left:0; right:0; top:var(--now-top); height:0; border-top:2px solid var(--accent); z-index:0; pointer-events:none;}
.agenda-now::before{content:""; position:absolute; left:48px; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--accent);}

/* ============================================================================
   CLIENTI
   ============================================================================ */
.search-inline{position:relative; min-width:min(320px,60vw);}
.search-ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px;}
.search-ico path{stroke:var(--fg-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.search-input{padding-left:36px;}
.filter-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.filter-chip{padding:7px 14px; border-radius:var(--r-full); font-size:13px; font-weight:600; color:var(--fg-3); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); transition:all var(--d-fast) var(--ease);}
.filter-chip:hover{color:var(--fg-1);}
.filter-chip.active{background:var(--ink); color:var(--paper); box-shadow:none;}

.client-list{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.client-row{display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line); transition:background var(--d-fast) var(--ease); cursor:pointer; text-align:left; width:100%;}
.client-row:last-child{border-bottom:none;}
.client-row:hover{background:var(--bg-2);}
.client-av{width:40px; height:40px; flex:none; border-radius:99px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--ink); background:linear-gradient(135deg,#e8d9c4,#cdbfa6);}
.client-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.client-name{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.client-meta{font-size:12.5px; color:var(--fg-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.client-tags{display:flex; gap:6px; flex:none;}
.client-last{font-family:var(--font-mono); font-size:11px; color:var(--fg-3); flex:none; text-align:right;}

/* ============================================================================
   APPROVAZIONI (HITL)
   ============================================================================ */
.hitl-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
.kpi-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-sm);}
.kpi-card .eyebrow{display:block; margin-bottom:8px;}
.kpi-val{font-family:var(--font-mono); font-size:26px; font-weight:500; line-height:1;}
.kpi-val.amber{color:var(--warning);}
.kpi-val.accent{color:var(--accent);}
.kpi-sub{font-size:12px; color:var(--fg-3); margin-top:6px;}

.hitl-columns{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.hitl-col-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.hitl-col-head h3{font-size:15px; font-weight:600;}
.count-pill{font-family:var(--font-mono); font-size:12px; color:var(--fg-3);}
.hitl-stack{display:flex; flex-direction:column; gap:12px;}
.hitl-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm);}
.hitl-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px;}
.hitl-name{font-weight:600; font-size:14px;}
.hitl-when{font-family:var(--font-mono); font-size:11px; color:var(--fg-3);}
.hitl-line{font-size:13px; color:var(--fg-2); margin-bottom:8px;}
.hitl-line b{color:var(--fg-1);}
.hitl-draft{font-size:13px; font-style:italic; color:var(--fg-2); background:var(--bg-2); border-radius:8px; padding:10px 12px; margin-bottom:10px; line-height:1.45;}
.hitl-rating{color:var(--warning); letter-spacing:.08em;}
.hitl-actions{display:flex; gap:8px;}
.hitl-actions .btn{flex:none;}
.btn-approve{background:var(--accent); color:var(--on-accent);}
.btn-approve:hover{background:var(--accent-dark);}
.btn-skip{background:var(--bg-2); color:var(--fg-2);}
.btn-edit{background:color-mix(in srgb,var(--warning) 16%,var(--surface)); color:var(--warning);}

/* ============================================================================
   MARKETING
   ============================================================================ */
.marketing-style{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow-sm);}
.marketing-style .style-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.marketing-style .style-txt{flex:1; min-width:0;}
.marketing-style .style-txt strong{font-size:14px;}
.marketing-style .style-txt p{font-size:12.5px; color:var(--fg-3); margin-top:2px;}

.ig-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
.ig-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.ig-thumb{position:relative; aspect-ratio:4/5; background:var(--bg-2); overflow:hidden;}
.ig-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.ig-state{position:absolute; top:8px; left:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:99px;}
.ig-state.pending{background:color-mix(in srgb,var(--warning) 88%, white); color:#3a2a06;}
.ig-state.published{background:color-mix(in srgb,var(--success) 90%, white); color:#1d3a1c;}
.ig-body{padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:6px;}
.ig-focus{font-weight:600; font-size:13.5px;}
.ig-caption{font-size:12.5px; color:var(--fg-2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ig-tags{font-size:11px; color:var(--fg-3);}

/* ============================================================================
   REPORT
   ============================================================================ */
.report-latest{background:var(--plum); color:var(--paper); border-radius:var(--r-lg); padding:26px 28px; margin-bottom:20px; box-shadow:var(--shadow-md); background-image:radial-gradient(120% 100% at 90% 0%, rgba(232,168,154,.16), transparent 55%);}
.report-latest .eyebrow{color:rgba(246,241,234,.55);}
.report-headline{font-family:var(--font-serif); font-style:italic; font-size:30px; line-height:1.15; margin:8px 0 14px; max-width:24ch; color:var(--paper);}
.report-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:18px; margin-bottom:16px;}
.report-kpi .k-val{font-family:var(--font-mono); font-size:26px; font-weight:500;}
.report-kpi .k-lab{font-size:12px; color:rgba(246,241,234,.6); margin-top:3px;}
.report-insight{font-size:14px; color:rgba(246,241,234,.85); line-height:1.5; border-top:1px solid rgba(246,241,234,.16); padding-top:14px;}
.report-history{display:flex; flex-direction:column; gap:10px;}
.report-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-sm);}
.report-row .r-week{font-weight:600; font-size:14px;}
.report-row .r-head{font-size:12.5px; color:var(--fg-3); margin-top:2px;}
.report-row .r-when{font-family:var(--font-mono); font-size:11px; color:var(--fg-3);}

/* ============================================================================
   IMPOSTAZIONI
   ============================================================================ */
.settings-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:22px;}
.settings-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow-sm); text-align:left; width:100%; transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); cursor:pointer;}
.settings-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.settings-card .eyebrow{display:block; margin-bottom:8px;}
.settings-card strong{font-size:15px;}
.settings-card p{font-size:12.5px; color:var(--fg-3); margin-top:4px;}

.capabilities-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm);}
.capabilities-card h3{font-size:15px; font-weight:600; margin-bottom:14px;}
.capability-list{display:flex; flex-direction:column; gap:10px;}
.cap-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line);}
.cap-row:first-child{border-top:none;}
.cap-name{flex:1; font-size:14px;}
.cap-name small{display:block; color:var(--fg-3); font-size:12px; margin-top:1px;}

/* ============================================================================
   CHAT POPUP (globale, stile landing)
   ============================================================================ */
.chat-root{position:fixed; right:24px; bottom:24px; z-index:60;}
.chat-fab{
  display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 22px 0 16px;
  border-radius:var(--r-full); background:var(--accent); color:#fff;
  box-shadow:0 16px 34px -10px rgba(60,30,20,.5);
  transition:transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.chat-fab:hover{transform:translateY(-2px); box-shadow:0 22px 44px -12px rgba(60,30,20,.55);}
.chat-fab-ico{width:24px; height:24px; flex:none;}
.chat-fab-ico path{stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.chat-fab-label{font-weight:600; font-size:15px; white-space:nowrap;}
.chat-root[data-open="true"] .chat-fab{display:none;}

.chat-panel{
  position:absolute; right:0; bottom:0;
  width:392px; max-width:calc(100vw - 32px);
  height:600px; max-height:calc(100vh - 48px);
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.chat-root[data-open="true"] .chat-panel{opacity:1; transform:none; pointer-events:auto;}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 14px 16px; background:var(--plum); color:var(--paper);}
.chat-head-id{display:flex; align-items:center; gap:11px;}
.chat-avatar{width:36px; height:36px; flex:none; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:18px;}
.chat-head-txt{display:flex; flex-direction:column; line-height:1.25;}
.chat-head-txt strong{font-size:15px;}
.chat-state{font-size:12px; color:rgba(246,241,234,.7);}
.chat-state.warn{color:var(--warning);}
.chat-state.danger{color:var(--accent-soft);}
.chat-close{width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(246,241,234,.8);}
.chat-close:hover{background:rgba(255,255,255,.12); color:var(--paper);}
.chat-close svg{width:18px; height:18px;}
.chat-close svg path{stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none;}

.chat-notice{margin:12px 14px 0; background:color-mix(in srgb,var(--warning) 14%,var(--surface)); border:1px solid color-mix(in srgb,var(--warning) 40%,transparent); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;}
.chat-notice strong{font-size:13px;}
.chat-notice span{font-size:12px; color:var(--fg-3);}

.chat-messages{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; background:var(--bg-1);}
.bubble{max-width:85%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; word-wrap:break-word; white-space:pre-wrap;}
.bubble .bubble-meta{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.55; margin-bottom:3px;}
.bubble.owner{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px;}
.bubble.assistant{align-self:flex-start; background:var(--surface); color:var(--fg-1); box-shadow:inset 0 0 0 1px var(--line-2); border-bottom-left-radius:5px;}
.bubble.assistant.error{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 50%,transparent); color:var(--danger);}
.bubble .tool-tag{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.chat-empty{margin:auto; text-align:center; color:var(--fg-3); display:flex; flex-direction:column; gap:4px;}
.chat-empty strong{color:var(--fg-2);}
.chat-typing{align-self:flex-start; display:inline-flex; gap:4px; padding:13px 14px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); border-radius:16px; border-bottom-left-radius:5px;}
.chat-typing span{width:7px; height:7px; border-radius:50%; background:var(--fg-3); opacity:.5; animation:blink 1.2s infinite;}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

.chat-quick{display:flex; gap:7px; padding:10px 12px 0; flex-wrap:wrap; background:var(--surface);}
.chat-quick button{font-size:12px; font-weight:600; color:var(--fg-2); padding:6px 11px; border-radius:var(--r-full); background:var(--bg-2); transition:all var(--d-fast) var(--ease);}
.chat-quick button:hover{background:var(--accent-soft); color:var(--ink);}

.chat-composer{display:flex; align-items:flex-end; gap:8px; padding:10px 12px; background:var(--surface);}
.voice-button{width:42px; height:42px; flex:none; border-radius:12px; background:var(--bg-2); color:var(--fg-2); display:flex; align-items:center; justify-content:center; transition:all var(--d-fast) var(--ease);}
.voice-button:hover{background:var(--paper-3);}
.voice-button svg{width:20px; height:20px;}
.voice-button svg path{stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.voice-button.recording{background:var(--danger); color:#fff; animation:pulse 1.3s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 45%,transparent);}50%{box-shadow:0 0 0 7px transparent;}}
.chat-input{flex:1; resize:none; border-radius:14px; padding:11px 13px; font-size:14px; line-height:1.4; max-height:120px; background:var(--bg-1); color:var(--fg-1); box-shadow:inset 0 0 0 1px var(--line-2); outline:none;}
.chat-input:focus{box-shadow:inset 0 0 0 1.5px var(--accent);}
.chat-send{width:42px; height:42px; flex:none; border-radius:12px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; transition:background var(--d-fast);}
.chat-send:hover{background:var(--accent-dark);}
.chat-send:disabled{opacity:.5;}
.chat-send svg{width:20px; height:20px;}
.chat-send svg path{stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; fill:none;}
.voice-status{padding:0 14px 10px; font-size:12px; color:var(--fg-3); background:var(--surface); min-height:0;}
.voice-status:empty{padding:0;}

/* ---- Spinner ---- */
.spinner{display:inline-block; width:16px; height:16px; border:2px solid color-mix(in srgb,currentColor 30%,transparent); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Toasts ---- */
.toasts{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:var(--r-full); font-size:13px; font-weight:500; box-shadow:var(--shadow-md); max-width:90vw;}
.toast.err{background:var(--danger);}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:980px){
  .day-strip{grid-template-columns:repeat(2,1fr);}
  .hitl-kpi{grid-template-columns:repeat(2,1fr);}
  .hitl-columns{grid-template-columns:1fr;}
  .home-kpi{grid-template-columns:repeat(2,1fr);}
  .home-columns{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .mobile-tabs{display:flex; gap:4px; overflow-x:auto; padding:10px clamp(16px,4vw,24px); position:sticky; top:0; z-index:7; background:color-mix(in srgb,var(--bg-1) 92%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .mobile-tabs button{flex:none; padding:7px 14px; border-radius:var(--r-full); font-size:13px; font-weight:600; color:var(--fg-3); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);}
  .mobile-tabs button.active{background:var(--ink); color:var(--paper); box-shadow:none;}
  .topbar{padding:16px 18px 12px;}
  .topbar-greeting{font-size:22px;}
  .views{padding:16px 18px 96px;}
  .chat-root{right:16px; bottom:16px;}
  .chat-fab-label{display:none;}
  .chat-fab{padding:0; width:54px; justify-content:center;}
  .chat-panel{width:calc(100vw - 24px); height:calc(100dvh - 24px);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}