/* Sales Desk — stile condiviso da tutte le pagine */

:root{
  --ink:#14161c; --panel:#1b1e26; --panel-alt:#20232c; --panel-raised:#242832;
  --hairline:#2f3340; --hairline-soft:#262a34;
  --text:#ece9e1; --text-dim:#9a9ca8; --text-faint:#666b7a;
  --brass:#c9a15a; --brass-dim:#8a744a; --brass-glow:rgba(201,161,90,.14);
  --good:#6fbf8b; --good-dim:#3a4f43;
  --warn:#d9a441; --warn-dim:#4f4634;
  --bad:#d97c6c; --bad-dim:#4f3733;
  --hover:#262a35;                       /* righe di tabella al passaggio del mouse */
  --tot-bg:#232a24; --tot-bg-alt:#1e2420; /* colonne dei totali */
  --btn-text:#20180c; --btn-hover:#d9b06c;
  --forte:#fff;                           /* testo in evidenza al passaggio del mouse */
  --velo:rgba(10,11,14,.78);              /* sfondo dietro finestre e foto */
  --bad-bordo:rgba(217,124,108,.35);
  --logo-filtro:none;                     /* il logo è bianco: nel tema chiaro si inverte */
  --radius:14px;
  --radius-sm:10px;
  color-scheme:dark;
}

/* --- tema chiaro --- */
:root[data-tema="chiaro"]{
  --ink:#f5f3ee; --panel:#ffffff; --panel-alt:#f9f7f3; --panel-raised:#efebe3;
  --hairline:#dcd6ca; --hairline-soft:#e9e4da;
  --text:#1d1f24; --text-dim:#565a64; --text-faint:#868a93;
  --brass:#9a7330; --brass-dim:#b8955a; --brass-glow:rgba(154,115,48,.10);
  --good:#2e8550; --good-dim:#cfe6d7;
  --warn:#a8720e; --warn-dim:#f1e2c4;
  --bad:#bf4a37; --bad-dim:#f6dcd6;
  --hover:#f1ede4;
  --tot-bg:#eef4ee; --tot-bg-alt:#e7efe7;
  --btn-text:#fff; --btn-hover:#86632a;
  --forte:#000;
  --velo:rgba(30,28,24,.45);
  --bad-bordo:rgba(191,74,55,.35);
  --logo-filtro:invert(1);
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ink);color:var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;}
body{padding:0 32px 60px;}

/* --- top bar: logo piccolo a sinistra, dicitura al centro, percorso a destra --- */
.topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  padding:18px 0 16px; border-bottom:1px solid var(--hairline); margin-bottom:22px; }
.topbar.spaced{ margin-bottom:32px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; justify-self:start; opacity:.85;
  transition:opacity .18s ease; }
.brand:hover{ opacity:1; }
.brand-logo-wrap{ display:inline-flex; align-items:center; justify-content:center; }
.brand-logo-wrap img.brand-logo{ display:block; height:20px; width:auto; filter:var(--logo-filtro); }
.brand .wordmark{ font-family:'Fraunces',serif; font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--text-dim); }

.sd-wordmark{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; justify-self:center; }
.sd-wordmark-txt{ font-family:'Fraunces',serif; font-weight:400; font-size:26px; line-height:1;
  letter-spacing:.01em; color:var(--text); white-space:nowrap; }
.sd-wordmark-txt em{ font-style:italic; font-weight:500; color:var(--brass); }
.sd-wordmark-orn{ width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--brass-dim)); }
.sd-wordmark-orn:last-child{ background:linear-gradient(90deg, var(--brass-dim), transparent); }
.sd-wordmark:hover .sd-wordmark-txt{ color:var(--forte); }

.topbar-dx{ justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.utente-bar{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); }
.utente-bar:empty{ display:none; }
.utente-bar .utente-nome{ color:var(--text); font-weight:500; }
.utente-bar .sep{ color:var(--hairline); }
.utente-bar a, .utente-bar .utente-esci{ color:var(--text-dim); text-decoration:none; background:none; border:none;
  padding:0; font:inherit; cursor:pointer; }
.utente-bar a:hover, .utente-bar .utente-esci:hover{ color:var(--brass); }
/* --- finestra "Cambia password" (dalla topbar) --- */
.sd-modale{ position:fixed; inset:0; z-index:60; background:var(--velo); display:none; align-items:center; justify-content:center; padding:20px; }
.sd-modale.aperta{ display:flex; }
.sd-modale-box{ width:100%; max-width:400px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:24px 26px 22px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.sd-modale-box h2{ font-family:'Fraunces',serif; font-weight:500; font-size:21px; margin:0 0 4px; color:var(--text); }
.sd-modale-box .sub{ color:var(--text-dim); font-size:13px; margin:0 0 18px; line-height:1.45; }
.sd-modale-box .field{ margin-bottom:13px; }
.sd-modale-box input[type=password]{ width:100%; min-width:0; padding:10px 12px; font-size:14px; }
.sd-modale-msg{ display:none; margin:0 0 14px; padding:10px 12px; border-radius:7px; font-size:13px; line-height:1.45; }
.sd-modale-msg.errore{ display:block; color:var(--bad); background:var(--bad-dim); border:1px solid var(--bad-bordo); }
.sd-modale-msg.ok{ display:block; color:var(--good); background:var(--good-dim); }
.sd-modale-piede{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.sd-modale-piede .btn:disabled{ opacity:.6; cursor:default; }

/* --- interruttore tema chiaro/scuro --- */
.tema-btn{ background:none; border:1px solid var(--hairline); color:var(--text-dim); border-radius:20px; width:26px; height:20px;
  display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:color .15s ease, border-color .15s ease; }
.tema-btn:hover{ color:var(--brass); border-color:var(--brass-dim); }
.tema-btn svg{ width:13px; height:13px; display:block; }

/* --- icone delle schede (colore dal tema) --- */
.icon, .doc-icon{ color:var(--brass); }

/* --- bandierine della lingua --- */
.lingue{ display:inline-flex; align-items:center; gap:5px; }
.bandiera-btn{ background:none; border:0; padding:2px; cursor:pointer; line-height:0; border-radius:3px; opacity:.45;
  transition:opacity .15s ease, box-shadow .15s ease; }
.bandiera-btn:hover{ opacity:.85; }
.bandiera-btn.attiva{ opacity:1; box-shadow:0 0 0 1px var(--brass-dim); }
.bandiera{ display:inline-block; width:20px; height:14px; border-radius:2px; overflow:hidden; line-height:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.bandiera svg{ width:100%; height:100%; display:block; }
.crumb{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.crumb:empty{ display:none; }
.crumb a{ color:var(--text-dim); text-decoration:none; }
.crumb a:hover{ color:var(--brass); }
.crumb span.current{ color:var(--brass); }

/* --- intestazione pagina --- */
.header{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom:18px; }
.header.ruled{ border-bottom:1px solid var(--hairline); padding-bottom:20px; margin-bottom:16px; }
.header-left h1{ font-family:'Fraunces',serif; font-weight:500; font-size:30px; margin:0; letter-spacing:-.01em; color:var(--text); }
.header-left .sub{ color:var(--text-dim); font-size:13.5px; margin-top:6px; }
.header-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); }
select, input[type=text], input[type=password]{
  background:var(--panel-raised); border:1px solid var(--hairline); color:var(--text);
  border-radius:7px; padding:8px 10px; font-size:13.5px; font-family:inherit; outline:none; min-width:150px;
}
select:focus, input[type=text]:focus, input[type=password]:focus{ border-color:var(--brass-dim); }
input[type=text]::placeholder{ color:var(--text-faint); }

/* --- pulsanti e barra di stato --- */
.btn{ background:var(--brass); color:var(--btn-text); border:none; border-radius:7px; padding:9px 16px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.btn:hover{ background:var(--btn-hover); }
.btn.secondary{ background:transparent; color:var(--text-dim); border:1px solid var(--hairline); }
.btn.secondary:hover{ color:var(--text); border-color:var(--brass-dim); }

.source-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  padding:12px 16px; margin-bottom:18px; }
.source-status{ font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); flex:none; }
.dot.live{ background:var(--good); animation:pulse 1.8s infinite; }
.dot.error{ background:var(--bad); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(111,191,139,.55); }
  70%{ box-shadow:0 0 0 7px rgba(111,191,139,0); }
  100%{ box-shadow:0 0 0 0 rgba(111,191,139,0); }
}

/* --- riquadri statistiche --- */
.stats-row{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline);
  border-radius:var(--radius-sm); overflow:hidden; margin-bottom:22px; }
.stat{ background:var(--panel); padding:14px 16px; }
.stat .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:6px; }
.stat .v{ font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--text); }
.stat .v small{ font-size:11px; color:var(--text-dim); font-family:'Inter',sans-serif; line-height:1.3; display:inline-block; }
.stat.accent .v{ color:var(--brass); }
.stat.stat-bad .v{ color:var(--bad); }
.stat.stat-good .v{ color:var(--good); }

/* --- stati vuoti --- */
.empty-state{ padding:60px 20px; text-align:center; color:var(--text-dim); }
.empty-state .big{ font-family:'Fraunces',serif; font-size:20px; color:var(--text); margin-bottom:6px; }

/* --- footer --- */
.footer-brand{ margin-top:40px; padding:22px 0 30px; border-top:1px solid var(--hairline-soft);
  display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; }
.footer-brand .tw{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-dim); font-weight:600; }
.footer-brand .sep{ color:var(--hairline); font-size:11px; }
.footer-brand .payoff{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-faint); }

::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brass-dim); }

@media (max-width:720px){
  .topbar{ grid-template-columns:auto 1fr; }
  .sd-wordmark{ justify-self:end; }
  .sd-wordmark-orn{ display:none; }
  .sd-wordmark-txt{ font-size:21px; }
  .topbar-dx{ grid-column:1 / -1; justify-self:stretch; flex-direction:row; flex-wrap:wrap-reverse;
    justify-content:space-between; align-items:center; }
  .crumb{ justify-content:flex-start; }
}
@media (max-width:600px){
  body{ padding:0 18px 60px; }
}