/* DuomoTicket — design system multi-tema (CSS variables) */

/* ===== SOBER (default) — brutalism sobrio, indaco ===== */
:root{
    --font-display:'Archivo'; --font-body:'Archivo'; --font-mono:'Space Mono';
    --display-weight:800; --disp-spacing:-0.02em;
    --bg:#f3f3f1; --bg-image:none; --bg-size:auto;
    --surface:#ffffff; --surface-2:#f7f7f6;
    --ink:#101014; --muted:#6b7280; --faint:#9ca3af;
    --line:#15151a; --line-soft:#e6e6e4; --bw:1.5px; --radius:7px; --badge-radius:5px;
    --shadow:0 8px 24px -12px rgba(16,16,24,.28); --shadow-hover:0 14px 30px -12px rgba(16,16,24,.34);
    --accent:#3730a3; --accent-ink:#ffffff; --accent-soft:#ececfb;
    --btn-bg:#3730a3; --btn-ink:#ffffff; --link:#3730a3;
    --t-blue-bg:#ecedfb;--t-blue-fg:#312e81;--t-blue-bd:#c6c8f3;
    --t-amber-bg:#fbf3e7;--t-amber-fg:#92400e;--t-amber-bd:#eed9b6;
    --t-green-bg:#eaf6ee;--t-green-fg:#15803d;--t-green-bd:#bfe5cb;
    --t-gray-bg:#f0f0ef;--t-gray-fg:#52525b;--t-gray-bd:#dadada;
    --t-red-bg:#fceced;--t-red-fg:#b42318;--t-red-bd:#f2c4c4;
}

/* ===== EDITORIAL — serif, hairline, spazio ===== */
[data-theme="editorial"]{
    --font-display:'Fraunces'; --display-weight:600; --disp-spacing:-0.01em;
    --font-body:'Archivo';
    --bg:#f7f5ef; --bg-image:none; --surface:#fffdf8; --surface-2:#f4f1e8;
    --ink:#1c1a17; --muted:#7a7165; --faint:#aaa092;
    --line:#26221c; --line-soft:#e4ddcf; --bw:1px; --radius:2px; --badge-radius:2px;
    --shadow:0 10px 30px -16px rgba(40,33,22,.3); --shadow-hover:0 16px 36px -16px rgba(40,33,22,.36);
    --accent:#7c2d12; --accent-ink:#fff; --accent-soft:#f3e7df; --btn-bg:#26221c; --btn-ink:#fff; --link:#7c2d12;
    --t-blue-bg:#eef0f2;--t-blue-fg:#33415c;--t-blue-bd:#d6dbe0;
    --t-amber-bg:#f6ecdd;--t-amber-fg:#8a5a16;--t-amber-bd:#e6d3b3;
    --t-green-bg:#edf2ea;--t-green-fg:#3f6b3a;--t-green-bd:#cfe0c6;
    --t-gray-bg:#efece5;--t-gray-fg:#5c554a;--t-gray-bd:#ddd6c8;
    --t-red-bg:#f6e9e5;--t-red-fg:#8a3324;--t-red-bd:#e6c8bf;
}

/* ===== DARK refined ===== */
[data-theme="dark"]{
    --font-display:'Archivo'; --display-weight:800;
    --bg:#0d1117; --bg-image:none; --surface:#161b22; --surface-2:#1c2230;
    --ink:#e6edf3; --muted:#9da7b3; --faint:#6e7681;
    --line:#30363d; --line-soft:#21262d; --bw:1px; --radius:8px; --badge-radius:6px;
    --shadow:0 12px 30px -12px rgba(0,0,0,.6); --shadow-hover:0 18px 40px -14px rgba(0,0,0,.7);
    --accent:#6366f1; --accent-ink:#fff; --accent-soft:#1e2240; --btn-bg:#6366f1; --btn-ink:#fff; --link:#8b93f8;
    --t-blue-bg:#16213e;--t-blue-fg:#a9b6ff;--t-blue-bd:#2c3a66;
    --t-amber-bg:#2a2113;--t-amber-fg:#f3c075;--t-amber-bd:#4d3c1d;
    --t-green-bg:#10261a;--t-green-fg:#6ee7a0;--t-green-bd:#1f4d33;
    --t-gray-bg:#1c222b;--t-gray-fg:#9da7b3;--t-gray-bd:#30363d;
    --t-red-bg:#2c1416;--t-red-fg:#ff8a85;--t-red-bd:#5a2226;
}

/* ===== NEO-BRUTALISM (giocoso) ===== */
[data-theme="neo"]{
    --font-display:'Archivo Black'; --display-weight:400; --disp-spacing:-0.02em;
    --bg:#f7f3e8; --bg-image:radial-gradient(#0a0a0a 1.1px,transparent 1.1px); --bg-size:22px 22px;
    --surface:#fff; --surface-2:#fffce8; --ink:#0a0a0a; --muted:#555; --faint:#888;
    --line:#0a0a0a; --line-soft:#0a0a0a; --bw:3px; --radius:0; --badge-radius:0;
    --shadow:5px 5px 0 #0a0a0a; --shadow-hover:8px 8px 0 #0a0a0a;
    --accent:#ffd400; --accent-ink:#0a0a0a; --accent-soft:#fff7cc; --btn-bg:#ffd400; --btn-ink:#0a0a0a; --link:#2b59ff;
    --t-blue-bg:#2b59ff;--t-blue-fg:#fff;--t-blue-bd:#0a0a0a;
    --t-amber-bg:#ff8a00;--t-amber-fg:#0a0a0a;--t-amber-bd:#0a0a0a;
    --t-green-bg:#9ae600;--t-green-fg:#0a0a0a;--t-green-bd:#0a0a0a;
    --t-gray-bg:#d4d0c4;--t-gray-fg:#0a0a0a;--t-gray-bd:#0a0a0a;
    --t-red-bg:#ff3b30;--t-red-fg:#fff;--t-red-bd:#0a0a0a;
}

/* ===== OCEAN ===== */
[data-theme="ocean"]{
    --bg:#eef6f7; --surface:#ffffff; --surface-2:#e6f2f3;
    --ink:#0e2b30; --muted:#5d7a7e; --faint:#9bb3b6;
    --line:#0f3b40; --line-soft:#cfe3e5; --bw:1.5px; --radius:11px; --badge-radius:9px;
    --shadow:0 12px 28px -16px rgba(13,80,90,.45); --shadow-hover:0 18px 36px -16px rgba(13,80,90,.55);
    --accent:#0d9488; --accent-ink:#fff; --accent-soft:#d6f0ec; --btn-bg:#0d9488; --btn-ink:#fff; --link:#0d9488;
    --t-blue-bg:#d9eff1;--t-blue-fg:#0e6b73;--t-blue-bd:#b6dee1;
}

/* ===== SUNSET ===== */
[data-theme="sunset"]{
    --font-display:'Fraunces'; --display-weight:600;
    --bg:#fdf4ee; --surface:#fffaf6; --surface-2:#fbece2;
    --ink:#3a1f17; --muted:#9a6b58; --faint:#c8a392;
    --line:#5a2f22; --line-soft:#f0d8c8; --bw:1.5px; --radius:14px; --badge-radius:10px;
    --shadow:0 14px 30px -16px rgba(150,70,40,.4); --shadow-hover:0 20px 38px -16px rgba(150,70,40,.5);
    --accent:#e0592b; --accent-ink:#fff; --accent-soft:#fbe2d6; --btn-bg:#e0592b; --btn-ink:#fff; --link:#c2410c;
    --t-red-bg:#fde3dc;--t-red-fg:#b4341c;--t-red-bd:#f4c4b8;
}

/* ===== MONO ===== */
[data-theme="mono"]{
    --bg:#ffffff; --surface:#ffffff; --surface-2:#f5f5f5;
    --ink:#000000; --muted:#6b6b6b; --faint:#a3a3a3;
    --line:#000000; --line-soft:#e2e2e2; --bw:1.5px; --radius:2px; --badge-radius:2px;
    --shadow:0 6px 18px -10px rgba(0,0,0,.35); --shadow-hover:0 12px 26px -12px rgba(0,0,0,.45);
    --accent:#000000; --accent-ink:#fff; --accent-soft:#ececec; --btn-bg:#000; --btn-ink:#fff; --link:#000;
    --t-blue-bg:#eee;--t-blue-fg:#111;--t-blue-bd:#ccc;
    --t-amber-bg:#f3f3f3;--t-amber-fg:#333;--t-amber-bd:#ccc;
    --t-green-bg:#e9e9e9;--t-green-fg:#111;--t-green-bd:#bbb;
    --t-gray-bg:#f3f3f3;--t-gray-fg:#555;--t-gray-bd:#ddd;
    --t-red-bg:#e2e2e2;--t-red-fg:#000;--t-red-bd:#aaa;
}

/* ===== Override CARATTERE (indipendente dal tema) ===== */
[data-font="archivo"]{ --font-display:'Archivo Black'; --font-body:'Archivo'; --display-weight:400; }
[data-font="fraunces"]{ --font-display:'Fraunces'; --font-body:'Archivo'; --display-weight:600; }
[data-font="sora"]{ --font-display:'Sora'; --font-body:'Sora'; --display-weight:800; }
[data-font="poppins"]{ --font-display:'Poppins'; --font-body:'Poppins'; --display-weight:700; }
[data-font="lora"]{ --font-display:'Lora'; --font-body:'Lora'; --display-weight:700; }
[data-font="mono"]{ --font-display:'Space Mono'; --font-body:'Space Mono'; --display-weight:700; }

/* ===== Base ===== */
*{ border-color:var(--line); }
body{
    background:var(--bg); background-image:var(--bg-image); background-size:var(--bg-size);
    color:var(--ink); font-family:var(--font-body),system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.font-display{ font-family:var(--font-display),system-ui,sans-serif; font-weight:var(--display-weight); letter-spacing:var(--disp-spacing); }
.font-mono{ font-family:var(--font-mono),monospace; }
.muted{ color:var(--muted); }
.accent{ color:var(--accent); }

.card{ background:var(--surface); border:var(--bw) solid var(--line); border-radius:var(--radius) !important; box-shadow:var(--shadow); }
.lift{ transition:transform .18s ease, box-shadow .18s ease; }
.lift:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }

.btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; background:var(--btn-bg); color:var(--btn-ink); border:var(--bw) solid var(--line); border-radius:var(--radius) !important; font-weight:700; box-shadow:var(--shadow); transition:transform .15s,box-shadow .15s,filter .15s; }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:var(--shadow-hover); }
.btn-primary:active{ transform:translateY(0); }
.btn-secondary{ display:inline-flex;align-items:center;gap:.4rem; background:transparent; color:var(--ink); border:var(--bw) solid var(--line); border-radius:var(--radius) !important; font-weight:700; transition:background .15s,transform .15s; }
.btn-secondary:hover{ background:var(--accent-soft); transform:translateY(-1px); }

.field{ border:var(--bw) solid var(--line); border-radius:var(--radius) !important; background:var(--surface); color:var(--ink); transition:box-shadow .15s,border-color .15s; }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
::placeholder{ color:var(--faint); }

.badge{ display:inline-flex;align-items:center;gap:.3rem; border:1px solid; border-radius:var(--badge-radius) !important; padding:.18rem .5rem; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.badge-blue{ background:var(--t-blue-bg);color:var(--t-blue-fg);border-color:var(--t-blue-bd); }
.badge-amber{ background:var(--t-amber-bg);color:var(--t-amber-fg);border-color:var(--t-amber-bd); }
.badge-green{ background:var(--t-green-bg);color:var(--t-green-fg);border-color:var(--t-green-bd); }
.badge-gray{ background:var(--t-gray-bg);color:var(--t-gray-fg);border-color:var(--t-gray-bd); }
.badge-red{ background:var(--t-red-bg);color:var(--t-red-fg);border-color:var(--t-red-bd); }

.chip{ display:inline-flex;align-items:center; border-radius:calc(var(--radius)*.7); background:var(--surface-2); color:var(--muted); border:1px solid var(--line-soft); padding:.1rem .45rem; font-size:.7rem; font-weight:600; }

.ava{ display:grid;place-items:center; border:var(--bw) solid var(--line); border-radius:var(--radius) !important; background:var(--accent); color:var(--accent-ink); font-weight:700; }
.ava-muted{ background:var(--surface-2); color:var(--ink); }

/* Header */
.site-header{ position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:var(--bw) solid var(--line); }
.brand-badge{ display:grid;place-items:center; background:var(--accent); color:var(--accent-ink); border:var(--bw) solid var(--line); border-radius:var(--radius) !important; font-family:var(--font-display); }
.navlink{ flex:none; border:var(--bw) solid transparent; border-radius:var(--radius) !important; padding:.4rem .8rem; font-weight:600; font-size:.875rem; color:var(--muted); transition:all .15s; }
.navlink:hover{ color:var(--ink); background:var(--accent-soft); }
.navlink.is-active{ color:var(--accent-ink); background:var(--accent); border-color:var(--line); }

/* Sub-nav admin */
.subnav{ flex:none; border:var(--bw) solid var(--line); border-radius:var(--radius) !important; padding:.4rem .8rem; font-weight:600; font-size:.82rem; background:var(--surface); transition:all .15s; }
.subnav:hover{ background:var(--accent-soft); }
.subnav.is-active{ background:var(--ink); color:var(--surface); }

/* Bar */
.bar{ height:.65rem; border:var(--bw) solid var(--line); border-radius:calc(var(--radius)/1.6); background:var(--surface-2); overflow:hidden; }
.bar>span{ display:block; height:100%; background:var(--accent); }

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px); }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1); }

/* Modale conferma (sostituisce confirm/alert del browser) */
.modal-overlay{ position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:1rem; background:rgba(10,10,15,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .2s ease; }
.modal-overlay.open{ opacity:1; }
.modal{ width:100%; max-width:26rem; transform:translateY(8px) scale(.98); transition:transform .2s cubic-bezier(.2,.9,.3,1); }
.modal-overlay.open .modal{ transform:none; }
.modal .danger{ background:var(--t-red-fg) !important; color:#fff !important; border-color:var(--t-red-fg) !important; }

/* Editor Quill a tema */
.ql-toolbar.ql-snow{ border:var(--bw) solid var(--line) !important; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); background:var(--surface-2); }
.ql-container.ql-snow{ border:var(--bw) solid var(--line) !important; border-top:0 !important; border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); font-family:var(--font-body); font-size:.95rem; color:var(--ink); }
.ql-editor{ min-height:170px; }
.ql-editor.ql-blank::before{ color:var(--faint); font-style:normal; }
.ql-snow .ql-stroke{ stroke:var(--ink); } .ql-snow .ql-fill{ fill:var(--ink); }
.ql-snow .ql-picker{ color:var(--ink); }
.ql-snow.ql-toolbar button:hover .ql-stroke{ stroke:var(--accent); }
/* Rendering output ticket */
.ql-render{ line-height:1.6; }
.ql-render p{ margin:0 0 .6rem; } .ql-render ul,.ql-render ol{ margin:0 0 .6rem 1.4rem; } .ql-render ul{ list-style:disc; } .ql-render ol{ list-style:decimal; }
.ql-render a{ color:var(--link); text-decoration:underline; }
.ql-render blockquote{ border-left:3px solid var(--line); padding-left:.8rem; color:var(--muted); margin:.4rem 0; }
.ql-render pre,.ql-render code{ font-family:var(--font-mono); background:var(--surface-2); border-radius:4px; padding:.1rem .3rem; }

.flash-error{ background:var(--t-red-bg); color:var(--t-red-fg); border-color:var(--t-red-bd); }
.flash-success{ background:var(--t-green-bg); color:var(--t-green-fg); border-color:var(--t-green-bd); }
.flash-info{ background:var(--t-blue-bg); color:var(--t-blue-fg); border-color:var(--t-blue-bd); }

.spin{ animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } }
.no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.divider-soft{ background:var(--line-soft); }

/* Transizioni morbide tra pagine (cross-document view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: vt-out .25s ease both; }
::view-transition-new(root){ animation: vt-in .35s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }

/* Micro-interazioni */
.brand-badge{ transition:transform .3s cubic-bezier(.2,.9,.3,1); }
.brand-badge:hover{ transform:rotate(-6deg) scale(1.06); }
.ava{ transition:transform .2s ease; }
.navlink, .subnav, .btn-secondary{ position:relative; }
.badge{ transition:transform .15s ease; }
.card .badge:hover{ transform:translateY(-1px) scale(1.04); }

/* Shimmer sui bottoni primari */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
    content:''; position:absolute; inset:0; transform:translateX(-130%);
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
}
.btn-primary:hover::after{ animation:shimmer .8s ease; }
@keyframes shimmer{ to{ transform:translateX(130%); } }

/* Anelli pulse per badge urgenti/SLA scaduta */
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(220,40,30,.4);} 70%{ box-shadow:0 0 0 6px rgba(220,40,30,0);} 100%{ box-shadow:0 0 0 0 rgba(220,40,30,0);} }
.badge-red{ animation:pulse-ring 2.4s infinite; }

@media (max-width:640px){ h1{ font-size:1.7rem; line-height:1.14; } }
@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; }
    .badge-red, .btn-primary::after{ animation:none; }
}