/* QUADRA Essenziale: the approved identity, shared by every server workflow. */
:root {
  color-scheme:light;
  --ink:#102a43; --muted:#536574; --line:#dae2e7;
  --accent:#087f8c; --accent-hover:#066773; --paper:#f4f6f7;
  --surface:#fff; --nav:#eef2f4; --soft:#e7f3f3; --on-accent:#ffffff;
  --warning:#835714; --warning-bg:#fff5e3;
  --danger:#a12f3b; --danger-bg:#fff0f1;
  --good:#27674f; --good-bg:#edf6f1; --focus:#087f8c;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#f8fafc; --muted:#cbd5e1; --line:#2d3f4e;
  --accent:#0d9488; --accent-hover:#14b8a6; --paper:#0b141c;
  --surface:#13222e; --nav:#0f1b24; --soft:rgba(20, 184, 166, 0.14); --on-accent:#ffffff;
  --warning:#fbbf24; --warning-bg:#3b2a14;
  --danger:#fda4af; --danger-bg:#3f1d28;
  --good:#6ee7b7; --good-bg:#14352a; --focus:#2dd4bf;
}
body {font:14px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--paper)}
a {color:var(--accent)}
:root[data-theme=dark] a:not(.button):not(.area-pill):not(.studio-nav a):not(.logo):not(.mobile-logo) {color:#5eead4}
button,input,textarea,select {font:inherit}
h1 {font-size:clamp(24px,2.4vw,30px); font-weight:700; letter-spacing:-.6px; overflow-wrap:anywhere; color:var(--ink)}
h2 {font-size:19px; font-weight:650; line-height:1.4; color:var(--ink)}
h3 {font-size:16px; font-weight:650; color:var(--ink)}
p,small {overflow-wrap:anywhere}
small,.helptext,.technical,.muted {font-size:12px; color:var(--muted)}
.eyebrow {color:var(--muted); letter-spacing:1px; font-size:11px; font-weight:700}

/* Layout Principale Desktop */
.studio-layout {display:grid; grid-template-columns:228px minmax(0,1fr); min-height:100vh}
.studio-sidebar {background:var(--nav); border-right:1px solid var(--line); padding:24px 16px; display:flex; flex-direction:column; gap:22px; min-width:0}
.logo {display:flex; align-items:center; gap:10px; color:var(--ink); font-size:22px; font-weight:800; letter-spacing:.5px; text-decoration:none; padding:0 4px; white-space:nowrap}
.logo img {display:block; width:30px; height:30px; flex-shrink:0}
.logo .logo-dark {display:none}
[data-theme=dark] .logo .logo-light {display:none}
[data-theme=dark] .logo .logo-dark {display:block}
.studio-space {background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:11px 12px; font-size:13px; font-weight:600; color:var(--ink)}
.studio-space small,.studio-sidebar-foot small {display:block; font-weight:400; margin-top:4px; color:var(--muted)}
.studio-nav {display:flex; flex-direction:column; gap:5px}
.nav-heading {font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin:10px 10px 4px; font-weight:700}
.studio-nav a {display:block; padding:10px 12px; border-radius:7px; border-left:3px solid transparent; text-decoration:none; color:var(--muted); line-height:1.4; transition:all .2s ease}
.studio-nav a:hover {color:var(--ink); background:var(--surface)}
.studio-nav a[aria-current] {background:var(--soft); color:var(--ink); border-left-color:var(--accent); font-weight:600}
:root[data-theme=dark] .studio-nav a[aria-current] {
  background:rgba(20, 184, 166, 0.20) !important;
  border-left:3px solid #2dd4bf !important;
  color:#ffffff !important;
  font-weight:600 !important;
}
.studio-sidebar-foot {margin-top:auto; border-top:1px solid var(--line); padding:16px 8px 0; font-size:12px; color:var(--muted)}
.studio-content {min-width:0; display:flex; flex-direction:column}
.studio-topbar {display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 24px; min-height:62px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap}
.studio-location {color:var(--muted); font-size:13px}
.account {margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0}
.account-name {max-width:200px; overflow-wrap:anywhere; font-weight:600; color:var(--ink)}
.account a {font-size:12.5px}
.account form {margin:0}
main {width:100%; max-width:1540px; margin:24px auto 0; padding:0 clamp(16px, 2.2vw, 36px) 44px; flex:1; min-width:0}
footer {width:100%; max-width:1540px; padding:20px 24px; border-color:var(--line); color:var(--muted); font-size:11px; overflow-wrap:anywhere}
.studio-public {grid-template-columns:1fr}
.studio-public .studio-sidebar {border-right:0; border-bottom:1px solid var(--line); padding:18px 24px}
.studio-public .studio-topbar {min-height:54px}
.studio-public main {max-width:660px}
.skip-link {position:absolute; left:16px; top:-80px; z-index:20; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:12px 18px}
.skip-link:focus {top:12px}

/* Bottoni: tutti i bottoni pieni colorati usano sempre testo #ffffff */
.button,button {display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 16px; border:1px solid var(--accent); border-radius:7px; background:var(--accent); color:#ffffff; font-size:14px; font-weight:600; line-height:1.4; text-align:center; white-space:normal; gap:8px; max-width:100%; overflow-wrap:anywhere; transition:background .15s,border-color .15s}
.button:hover,button:hover {background:var(--accent-hover); border-color:var(--accent-hover); color:#ffffff}
.secondary,button.secondary,a.secondary {background:var(--surface); color:var(--ink); border-color:var(--line)}
.secondary:hover,button.secondary:hover,a.secondary:hover {background:var(--nav); border-color:var(--muted); color:var(--ink)}
.text-button,.theme-toggle {background:transparent; color:var(--accent); border-color:transparent; padding:8px 10px; font-size:13px}
:root[data-theme=dark] .text-button,:root[data-theme=dark] .theme-toggle {color:#5eead4}
.text-button:hover,.theme-toggle:hover {background:var(--soft); border-color:transparent}
button:disabled {opacity:.6; cursor:not-allowed}
:focus-visible {outline:3px solid var(--focus); outline-offset:3px}

/* Input e Controlli Form (Dark Mode solido) */
input:not([type=checkbox]),textarea,select {background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:10px 12px; min-height:42px; min-width:0; max-width:100%; font-size:14px}
:root[data-theme=dark] input:not([type=checkbox]),:root[data-theme=dark] textarea,:root[data-theme=dark] select {background:#0f1b24; color:#ffffff; border-color:#334858}
input::placeholder,textarea::placeholder {color:var(--muted); opacity:1}
input[type=checkbox] {accent-color:var(--accent); width:18px; height:18px; flex-shrink:0}
input[type=file] {font-size:13px; color:var(--ink)}
input[type=file]::file-selector-button {background:var(--nav); color:var(--ink); border:1px solid var(--line); border-radius:5px; padding:7px 10px; margin-right:10px; font:inherit; cursor:pointer}
:root[data-theme=dark] input[type=file]::file-selector-button {background:#192b3a; color:#ffffff; border-color:#3b5266}
input[readonly] {background:var(--nav)}
input:disabled,select:disabled,textarea:disabled {color:var(--muted); background:var(--nav)}
label {color:var(--ink); font-size:13px; font-weight:600}
:root[data-theme=dark] label {color:#ffffff}

/* Card e Tabelle */
.card {background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; box-shadow:none; min-width:0}
:root[data-theme=dark] .card {background:#13222e; border-color:#2a3c4b}
.grid,.grid-3,.form-grid,.source-grid {min-width:0}
.grid>* ,.grid-3>*,.form-grid>*,.source-grid>* {min-width:0}
.notice,.next-action {background:var(--soft); color:var(--ink); border-color:var(--accent); border-radius:7px}
.notice.error {background:var(--danger-bg); color:var(--danger); border-color:var(--danger)}
.notice.warning {background:var(--warning-bg); color:var(--warning); border-color:var(--warning)}
.error,.errorlist,.draft-status.error {color:var(--danger)}
.draft-status.error {background:var(--danger-bg); border-color:var(--danger)}
.field-error input,.field-error select,.field-error textarea {border-color:var(--danger)}
.context-bar {background:var(--surface); border-color:var(--line); border-left-color:var(--accent); box-shadow:none; border-radius:7px}
.step-nav {gap:8px; flex-wrap:wrap}
.step-nav li {flex:1 1 100px; display:flex}
.step-nav a,.step-nav>li>span {flex:1; min-height:46px; color:var(--muted); padding:9px 8px; border-color:var(--line); line-height:1.4}
.step-nav .number {background:var(--nav); color:var(--ink)}
.step-nav .active .number {background:var(--accent); color:#ffffff}
.step-nav .active a,.step-nav .active>span {color:var(--ink); border-color:var(--accent)}
.stat,.source-card,.account-mapping,fieldset {background:var(--surface); border-color:var(--line); border-radius:7px}
.source-grid a.source-card {color:var(--ink)}
.source-grid a.source-card:hover {background:var(--soft); border-color:var(--accent)}
.stat strong,.stat-grid strong {color:var(--ink); font-variant-numeric:tabular-nums}
.stat span,.source-card small {color:var(--muted)}
.badge {background:var(--nav); color:var(--muted); border-radius:5px; white-space:normal; font-size:12px; line-height:1.5}
:root[data-theme=dark] .badge {background:#1b2e3d; color:#e2e8f0}
.badge.good {background:var(--good-bg); color:var(--good)}
.badge.warning {background:var(--warning-bg); color:var(--warning)}
.badge.danger {background:var(--danger-bg); color:var(--danger)}
.table-wrap,.table-scroll {overflow-x:auto; max-width:100%}
table {font-size:13px}
th {background:var(--nav); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted)}
td,th {padding:12px 11px; border-color:var(--line)}
tbody tr:hover {background:var(--soft)}
table input,table select {min-width:100px}
.amount,.amount-column,.num,.numeric {text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.compact-list li,details {border-color:var(--line)}
.progress-track {background:var(--nav)}
.progress-track span {background:var(--accent)}
.flow-section {scroll-margin-top:130px}
.empty {padding:36px 18px; color:var(--muted)}
.empty h2 {color:var(--ink)}
.form-actions,.source-tools {gap:10px; flex-wrap:wrap}
.source-tools select {min-width:0; flex:1 1 180px}
.source-tools button {font-size:13px; min-height:42px}

/* --- Co-Branding "Quadra | STUDIO CASTALDO" & Temi 5 Aree Operative --- */
body[data-suite-theme="emerald"] { --accent:#087f8c; --accent-hover:#066773; --soft:#e6f4f1; --focus:#087f8c; }
body[data-suite-theme="indigo"]  { --accent:#4338ca; --accent-hover:#3730a3; --soft:#eef2ff; --focus:#4338ca; }
body[data-suite-theme="violet"]  { --accent:#6d28d9; --accent-hover:#5b21b6; --soft:#f3e8ff; --focus:#6d28d9; }
body[data-suite-theme="bordeaux"]{ --accent:#9f1239; --accent-hover:#881337; --soft:#ffe4e6; --focus:#9f1239; }
body[data-suite-theme="teal"]    { --accent:#0f766e; --accent-hover:#115e59; --soft:#ccfbf1; --focus:#0f766e; }

:root[data-theme="dark"] body[data-suite-theme="emerald"] { --accent:#0d9488; --accent-hover:#14b8a6; --soft:rgba(20, 184, 166, 0.14); --on-accent:#ffffff; }
:root[data-theme="dark"] body[data-suite-theme="indigo"]  { --accent:#4f46e5; --accent-hover:#6366f1; --soft:rgba(99, 102, 241, 0.16); --on-accent:#ffffff; }
:root[data-theme="dark"] body[data-suite-theme="violet"]  { --accent:#7c3aed; --accent-hover:#8b5cf6; --soft:rgba(139, 92, 246, 0.16); --on-accent:#ffffff; }
:root[data-theme="dark"] body[data-suite-theme="bordeaux"]{ --accent:#be123c; --accent-hover:#e11d48; --soft:rgba(225, 29, 72, 0.16); --on-accent:#ffffff; }
:root[data-theme="dark"] body[data-suite-theme="teal"]    { --accent:#0f766e; --accent-hover:#0d9488; --soft:rgba(20, 184, 166, 0.16); --on-accent:#ffffff; }

.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.cobrand-wrapper {display:flex; flex-direction:column; gap:10px}
.cobrand-top-row {display:flex; align-items:center; justify-content:space-between; gap:8px}
.cobrand-divider {height:1px; background:linear-gradient(90deg, var(--accent), transparent); opacity:.45}
.studio-cobrand-badge {display:flex; flex-direction:column; padding:8px 11px; border-radius:8px; background:linear-gradient(135deg, var(--surface) 0%, var(--soft) 100%); border:1px solid var(--line); border-left:3px solid var(--accent); box-shadow:0 2px 8px rgba(16,42,67,.05); transition:all .35s cubic-bezier(0.22, 1, 0.36, 1)}
.studio-cobrand-title {font-size:11.5px; font-weight:800; letter-spacing:1.4px; color:var(--ink); text-transform:uppercase; line-height:1.2}
.studio-cobrand-subtitle {font-size:10.5px; font-weight:500; color:var(--muted); letter-spacing:.2px; margin-top:2px; line-height:1.2}

/* Fix Contrasto Badge STUDIO CASTALDO in Dark Mode */
:root[data-theme="dark"] .studio-cobrand-badge {
  background:#13222e !important;
  border:1px solid rgba(45, 212, 191, 0.45) !important;
  border-left:3px solid #2dd4bf !important;
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .studio-cobrand-title {
  color:#ffffff !important;
}
:root[data-theme="dark"] .studio-cobrand-subtitle {
  color:#5eead4 !important;
}

/* Header Mobile Compatto e Drawer Controls (nascosti su Desktop) */
.mobile-compact-header,
.mobile-drawer-close,
.mobile-drawer-backdrop {
  display:none;
}

/* Selettore Topbar 5 Aree Operative */
.topbar-center-areas {display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-start; padding:4px; background:var(--nav); border:1px solid var(--line); border-radius:10px}
.area-pill {display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; border:1px solid transparent; transition:all .32s cubic-bezier(0.22, 1, 0.36, 1)}
.area-pill:hover {color:var(--ink); background:var(--surface); transform:translateY(-1px)}
.area-pill.is-active {background:var(--accent); color:#ffffff !important; border-color:var(--accent); box-shadow:0 3px 10px rgba(16,42,67,.18)}
.area-svg {flex-shrink:0; transition:transform .35s cubic-bezier(0.22, 1, 0.36, 1)}
.area-pill:hover .area-svg, .area-pill.is-active .area-svg {transform:scale(1.12)}

/* Selettore Contestuale Animato 5 Ambienti di Lavoro */
.suite-switcher-card {border-top:4px solid var(--accent); transition:border-color .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1)}
.suite-switcher-header {display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.suite-accent-badge {display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.4px; background:var(--soft); color:var(--accent); border:1px solid var(--accent); transition:all .35s cubic-bezier(0.22, 1, 0.36, 1)}
:root[data-theme="dark"] .suite-accent-badge {color:#ffffff; background:rgba(20, 184, 166, 0.18); border-color:#2dd4bf}

.suite-tabs {display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-bottom:20px}
.suite-tab {display:flex; align-items:center; justify-content:flex-start; gap:11px; padding:12px 13px; border-radius:10px; background:var(--nav); color:var(--ink); border:1px solid var(--line); text-align:left; cursor:pointer; transition:all .35s cubic-bezier(0.22, 1, 0.36, 1)}
.suite-tab:hover {background:var(--surface); border-color:var(--accent); color:var(--ink); transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,42,67,.07)}
.suite-tab.is-selected {background:var(--accent); color:#ffffff !important; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,42,67,.2)}
.suite-tab span {display:flex; flex-direction:column; min-width:0}
.suite-tab strong {font-size:13px; font-weight:700; line-height:1.25; color:inherit}
.suite-tab small {font-size:11px; color:var(--muted); font-weight:400; margin-top:2px}
.suite-tab.is-selected strong,
.suite-tab.is-selected small {color:#ffffff !important; opacity:.95}
.suite-tab-icon {flex-shrink:0; transition:transform .4s cubic-bezier(0.22, 1, 0.36, 1)}
.suite-tab:hover .suite-tab-icon, .suite-tab.is-selected .suite-tab-icon {transform:scale(1.15) rotate(-4deg)}

.suite-panel {animation:suiteFadeIn .38s cubic-bezier(0.22, 1, 0.36, 1)}
@keyframes suiteFadeIn {
  from {opacity:0; transform:translateY(8px)}
  to   {opacity:1; transform:translateY(0)}
}

/* Dropzone / Card di Caricamento con Fix Contrasto Dark Mode (Zero Bianco su Testo Chiaro) */
.suite-upload-grid {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:16px 0}
.suite-dropbox {padding:18px; border-radius:10px; border:1.5px dashed var(--accent); background:linear-gradient(180deg, var(--surface) 0%, var(--soft) 100%); transition:all .35s cubic-bezier(0.22, 1, 0.36, 1)}
.suite-dropbox:hover {transform:translateY(-1px); box-shadow:0 4px 14px rgba(16,42,67,.06)}
.suite-drop-tag {display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.1px; color:var(--accent); text-transform:uppercase; margin-bottom:6px}
.suite-dropbox h3 {margin:4px 0 8px; font-size:15px; color:var(--ink)}
.suite-panel-actions {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px}

:root[data-theme="dark"] .suite-dropbox,
:root[data-theme="dark"] .source-card,
:root[data-theme="dark"] section.card.flow-section {
  background:linear-gradient(180deg, #0f1b24 0%, #162634 100%) !important;
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(45, 212, 191, 0.12), 0 4px 14px rgba(0, 0, 0, 0.28);
}
:root[data-theme="dark"] .suite-drop-tag {
  color:#5eead4 !important;
}
:root[data-theme="dark"] .suite-dropbox h3,
:root[data-theme="dark"] .suite-dropbox label,
:root[data-theme="dark"] .source-card h3,
:root[data-theme="dark"] .card h1,
:root[data-theme="dark"] .card h2,
:root[data-theme="dark"] .card h3 {
  color:#ffffff !important;
}
:root[data-theme="dark"] .suite-dropbox .helptext,
:root[data-theme="dark"] .suite-dropbox p,
:root[data-theme="dark"] .source-card p,
:root[data-theme="dark"] .card .helptext,
:root[data-theme="dark"] .card .muted,
:root[data-theme="dark"] p.muted {
  color:#cbd5e1 !important;
}

/* Semafori */
.suite-semaphore-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin:20px 0}
.semaphore-card {padding:18px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--line); border-left-width:5px}
.semaphore-card .sem-kicker {display:block; font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted)}
.semaphore-card strong {display:block; font-size:28px; font-weight:800; margin:6px 0 4px; font-variant-numeric:tabular-nums}
.semaphore-card p {margin:0; font-size:12.5px; color:var(--muted)}
.semaphore-card.sem-red   {border-left-color:var(--danger); background:var(--danger-bg)}
.semaphore-card.sem-red strong {color:var(--danger)}
.semaphore-card.sem-amber {border-left-color:var(--warning); background:var(--warning-bg)}
.semaphore-card.sem-amber strong {color:var(--warning)}
.semaphore-card.sem-green {border-left-color:var(--good); background:var(--good-bg)}
.semaphore-card.sem-green strong {color:var(--good)}
.semaphore-card.sem-blue  {border-left-color:var(--accent); background:var(--soft)}
.semaphore-card.sem-blue strong {color:var(--accent)}

/* Banner Animato Auto-Apprendimento IA e Rilevamento Impronta Excel/CSV */
.ai-learner-banner {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin:14px 0 18px;
  border-radius:10px;
  border:1px solid var(--accent);
  background:linear-gradient(135deg, var(--soft) 0%, var(--surface) 100%);
  box-shadow:0 4px 14px rgba(16,42,67,.06);
  transition:all .38s cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] .ai-learner-banner {
  background:linear-gradient(135deg, #0f1b24 0%, #162634 100%) !important;
  border-color:#2dd4bf;
}
.ai-learner-banner.is-learning {
  border-color:var(--warning);
  background:linear-gradient(135deg, var(--warning-bg) 0%, var(--surface) 100%);
  box-shadow:0 6px 20px rgba(180,83,9,.14);
}
.ai-learner-pulse {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--accent);
  color:#ffffff;
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(16,42,67,.25);
  animation:aiPulseGlow 2.4s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-learner-banner.is-learning .ai-learner-pulse {
  background:var(--warning);
  animation:aiSpinPulse 1.2s infinite linear;
}
@keyframes aiPulseGlow {
  0%   {box-shadow:0 0 0 0 rgba(16,42,67,.25); transform:scale(1)}
  50%  {box-shadow:0 0 0 8px rgba(16,42,67,0); transform:scale(1.05)}
  100% {box-shadow:0 0 0 0 rgba(16,42,67,0); transform:scale(1)}
}
@keyframes aiSpinPulse {
  0%   {transform:rotate(0deg) scale(1)}
  50%  {transform:rotate(180deg) scale(1.08)}
  100% {transform:rotate(360deg) scale(1)}
}
.ai-learner-copy {display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.ai-learner-title {font-size:13.5px; font-weight:800; color:var(--ink)}
:root[data-theme="dark"] .ai-learner-title {color:#ffffff !important}
.ai-learner-sub {font-size:12px; color:var(--muted); line-height:1.4}
:root[data-theme="dark"] .ai-learner-sub {color:#cbd5e1 !important}
.ai-learner-stats {display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0}
.spec-generated-card {border-left:5px solid var(--warning); background:var(--warning-bg)}

/* --- RESPONSIVE DESKTOP LARGE & TABLET / SMARTPHONE (@media max-width: 960px) --- */
@media(min-width:1600px) {
  .studio-layout {grid-template-columns:236px minmax(0,1fr)}
  main {padding-top:8px}
}
@media(max-width:1180px) {
  .suite-tabs {grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media(max-width:960px) {
  .studio-layout {
    grid-template-columns:1fr;
  }

  /* 1. Header Mobile Compatto (1 sola riga con Logo Quadra | STUDIO CASTALDO + ☰) */
  .mobile-compact-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 14px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:95;
  }
  .mobile-cobrand {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    overflow:hidden;
  }
  .mobile-logo {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:17px;
    font-weight:800;
    color:var(--ink);
    text-decoration:none;
    flex-shrink:0;
  }
  .mobile-logo img {width:24px; height:24px; display:block}
  .mobile-logo .logo-dark {display:none}
  [data-theme=dark] .mobile-logo .logo-light {display:none}
  [data-theme=dark] .mobile-logo .logo-dark {display:block}
  .mobile-divider {
    width:1px;
    height:24px;
    background:var(--line);
    flex-shrink:0;
  }
  .mobile-studio-badge {
    padding:4px 8px !important;
    border-radius:6px;
    min-width:0;
  }
  .mobile-studio-badge .studio-cobrand-title {
    font-size:10.5px;
    letter-spacing:1px;
    white-space:nowrap;
  }
  .mobile-studio-badge .studio-cobrand-subtitle {
    font-size:9.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    border-radius:8px;
    font-size:20px;
    line-height:1;
    background:var(--nav);
    color:var(--ink) !important;
    border:1px solid var(--line);
    flex-shrink:0;
  }
  :root[data-theme="dark"] .mobile-menu-toggle {
    background:#162634;
    color:#ffffff !important;
    border-color:#354a5c;
  }

  /* 2. Sidebar trasformata in Drawer fisso a scomparsa (MAI spalancata sopra la pagina) */
  .studio-layout:not(.studio-public) .studio-sidebar {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(288px, 84vw);
    z-index:1010;
    padding:20px 16px;
    border-right:1px solid var(--line);
    border-bottom:0;
    overflow-y:auto;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:0 16px 40px rgba(0, 0, 0, 0.42);
  }
  body.is-drawer-open .studio-layout:not(.studio-public) .studio-sidebar {
    transform:translateX(0);
  }
  .mobile-drawer-close {
    display:inline-flex;
    width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    border-radius:7px;
    font-size:16px;
  }
  body.is-drawer-open .mobile-drawer-backdrop {
    display:block !important;
    position:fixed;
    inset:0;
    z-index:1005;
    background:rgba(8, 15, 23, 0.62);
    backdrop-filter:blur(2px);
  }

  /* 3. Barra delle 5 Aree Operative scorrevole col dito subito sotto l'header mobile */
  .studio-topbar {
    padding:8px 12px;
    min-height:0;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
  }
  .topbar-center-areas {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;
    justify-content:flex-start;
    padding:4px;
    gap:6px;
  }
  .topbar-center-areas::-webkit-scrollbar {
    display:none;
  }
  .area-pill {
    flex:0 0 auto;
    white-space:nowrap;
    padding:6px 11px;
    font-size:12px;
  }
  .account {
    width:100%;
    margin-left:0;
    justify-content:flex-end;
    gap:8px;
    font-size:12px;
  }

  /* 4. Contenuto pagina compatto così titolo e form partono subito nella metà alta dello schermo */
  main {
    padding:0 14px 28px;
    margin-top:14px;
  }
  .suite-tabs {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding-bottom:4px;
    margin-bottom:14px;
  }
  .suite-tab {
    flex:0 0 210px;
    padding:10px 12px;
  }
  .suite-upload-grid,
  .grid,
  .grid-3,
  .form-grid,
  .source-grid,
  .filter-grid {
    grid-template-columns:1fr;
  }
  .form-grid .wide {grid-column:auto}
  .context-bar {position:static}
  .card {padding:16px 14px}
  .ai-learner-banner {flex-direction:column; align-items:flex-start; gap:10px; padding:12px 14px}
  .next-action {flex-direction:column; align-items:flex-start}
  .step-nav li {flex-basis:calc(33.333% - 8px)}
  .filters>p {min-width:0; flex-basis:100%}
  .source-tools select {max-width:100%}
  input:not([type=checkbox]),textarea,select {font-size:16px}
  .studio-public .studio-sidebar {display:none}
  footer {padding:16px 14px}
  .toolbar {gap:10px}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none!important; scroll-behavior:auto!important}
  .progress-track span, .ai-learner-pulse {animation:none}
}
@media print {
  :root,:root[data-theme=dark] {color-scheme:light; --ink:#102a43; --muted:#536574; --line:#dae2e7; --accent:#087f8c; --paper:#fff; --surface:#fff; --nav:#eef2f4; --soft:#e7f3f3; --on-accent:#fff; --warning:#835714; --warning-bg:#fff5e3; --danger:#a12f3b; --danger-bg:#fff0f1; --good:#27674f; --good-bg:#edf6f1}
  .studio-layout {display:block; min-height:0} .studio-sidebar,.studio-topbar,.mobile-compact-header,.skip-link {display:none} main {margin:0; padding:0} .context-bar {position:static} .card {box-shadow:none; overflow:visible} .table-scroll,.table-wrap {overflow:visible} .table-scroll table {font-size:10px} footer {padding:12px 0}
}

/* QuadraBF — shared macOS-inspired surfaces and accessible controls. */
.quadra-wordmark {display:flex; flex-direction:column; line-height:1.12; letter-spacing:-.5px}
.quadra-wordmark .brand-bf {color:#0d9488}
[data-theme=dark] .quadra-wordmark .brand-bf {color:#2dd4bf}
.quadra-wordmark small {font-size:9.5px; letter-spacing:1.6px; font-weight:700; color:var(--accent); margin-top:5px}
header.studio-topbar {position:sticky; top:0; z-index:90; background:rgba(255,255,255,.84); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px)}
[data-theme=dark] header.studio-topbar {background:rgba(15,23,42,.84)}
.card {border-radius:16px; box-shadow:0 4px 24px -4px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04)}
button,.button,input:not([type=checkbox]),select,textarea {border-radius:10px; transition:background .18s,border-color .18s,box-shadow .18s}
button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {box-shadow:0 0 0 3px rgba(13,148,136,.22); outline:2px solid var(--focus); outline-offset:2px}
footer {margin:0 auto; padding:0 clamp(16px,2.2vw,36px) 44px}
.skip-link {z-index:1100}
.login-shell {width:100%; max-width:440px; margin:clamp(16px,5vh,64px) auto; text-align:center}
.login-shell .card {padding:clamp(20px,4vw,36px); text-align:left}
.login-shell input,.login-shell button {width:100%}
.login-icon {display:block; margin:0 auto 20px; width:80px; height:80px}
.login-shell .eyebrow {color:var(--accent); margin-bottom:12px}
.login-legal {margin-top:24px; font-size:12px}
.privacy-policy section {margin:24px 0}
@media(max-width:960px) {
 header.studio-topbar {position:relative; top:auto}
 .mobile-menu-toggle,.mobile-drawer-close,.area-pill {min-height:42px}
 .mobile-studio-badge .studio-cobrand-title {white-space:normal}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important; transition:none!important}}
.logo .quadra-wordmark,.logo .quadra-wordmark span {width:auto; height:auto; border:0; margin:0}
.logo .quadra-wordmark {display:flex}
/* Only the navigation sticks: work controls remain in their document position. */
.context-bar {position:static}
#bulk-assign-form.q-bulk-bar {position:static}

/* Focus on the current movement; secondary tools remain within reach. */
.review-overview > summary, .review-guide > summary, #bulk-actions > summary {
  min-height: 42px;
  display: list-item;
  align-content: center;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.review-overview .card {box-shadow: none; margin-bottom: 0;}
#bulk-actions {margin: .75rem 0; border-block: 1px solid var(--line); padding: .35rem .6rem;}
.movement-description {font-weight: 500; overflow-wrap: anywhere;}
.movement-description > summary {cursor: pointer; line-height: 1.5; min-height: 42px;}
.movement-description p {white-space: pre-wrap; font-size: .9rem;}
#movements-table .q-inline-box {background: var(--surface) !important; border-color: var(--line) !important; gap: .55rem !important; padding: .65rem !important;}
#movements-table .q-inline-box label {line-height: 1.4;}
#movements-table .q-inline-box small {font-size: .73rem; font-weight: 400;}
#movements-table .q-inline-box input {min-width: 0;}
/* The review stays short; evidence and editable metadata remain accessible. */
.review-editor-hint {font-size: .85rem; color: var(--muted); margin: .65rem 0;}
#movements-table .q-review-select-all {display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin: 0; white-space: normal; font-size: .75rem;}
#movements-table .q-review-select-all input {flex: 0 0 18px; margin: 0;}
#movements-table input[type="checkbox"] {width: 18px !important; min-width: 18px !important; max-width: 18px; flex: 0 0 18px;}
#movements-table .q-review-table th {overflow-wrap: normal; text-transform: none; letter-spacing: 0;}
#movements-table .q-reconciliation-status {border-radius: 7px; line-height: 1.45; padding: .4rem .55rem;}
#movements-table .q-inline-grid > label {min-width: 0;}
#movements-table .q-acc-xray-live {background: transparent !important; border: 0 !important; padding: 0 !important;}
#movements-table .q-account-evidence {border: 0; padding: .15rem 0;}
#movements-table .q-account-evidence > summary {min-height: 32px; color: var(--accent); font-size: .76rem;}
#movements-table .q-account-evidence-body {padding: .55rem; background: var(--soft); border: 1px solid var(--line); border-radius: 8px;}
#movements-table .q-decision-options {grid-column: 1 / -1; border: 0; padding: 0;}
#movements-table .q-decision-options > summary, #movements-table .q-decision-note > summary {min-height: 32px; align-content: center; color: var(--accent);}
#movements-table .q-decision-options label + label {margin-top: .6rem !important;}
#movements-table .q-decision-note {border: 0; padding: .15rem 0; margin-top: .2rem;}
#movements-table .q-decision-note p {font-size: .85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;}
#toggle-compact-view-btn[aria-pressed="true"] {background: var(--accent); color: #fff; border-color: var(--accent);}
@media (min-width: 901px) {
  #year-filter-form {display: grid !important; grid-template-columns: minmax(220px, 1fr) 190px auto;}
  #year-filter-form input[type="search"] {min-width: 0 !important;}
  #year-filter-form > a {grid-column: 3;}
}
.scad-snapshot-notice summary {cursor: pointer; min-height: 42px; align-content: center; font-weight: 600;}
@media (max-width: 900px) {
  .q-scad-header {flex-wrap: wrap; gap: .5rem;}
  .q-scad-header > div:first-child {flex-basis: 100% !important;}
  .q-scad-header > div:last-child {margin-left: auto;}
  .q-scad-header h3 {font-size: .95rem !important;}
}
:root[data-theme="dark"] #quadra-xray-results [style*="color:#2563eb"] {color: #93c5fd !important;}
.riba-batches { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0; }
.riba-batches a { display:flex; flex-direction:column; gap:8px; padding:16px; text-decoration:none; }
.riba-batches a[aria-current="page"] { outline:2px solid var(--accent); }
.riba-effect { min-width:0; margin:20px 0; padding:20px; border:1px solid var(--border); border-radius:16px; }
.riba-effect select,.riba-effect input { display:block; width:100%; max-width:100%; min-height:44px; margin:8px 0 16px; }
.riba-effect legend { font-weight:700; overflow-wrap:anywhere; max-width:100%; }
.riba-verification { display:flex; align-items:flex-start; gap:12px; margin:20px 0; }
@media(max-width:900px) { .riba-batches { grid-template-columns:1fr; } .riba-effect { padding:12px; } .riba-effect select { font-size:16px; } }


/* ==========================================================================
   QUADRABF · QUADRANTE DI CONTROLLO 2x2 + DRAWER UNIVERSALE + SEZIONI INTERNE
   ========================================================================== */
:root {
  --c-emerald: #10b981;
  --c-emerald-glow: rgba(16, 185, 129, 0.28);
  --c-emerald-soft: rgba(16, 185, 129, 0.13);
  --c-indigo: #6366f1;
  --c-indigo-glow: rgba(99, 102, 241, 0.28);
  --c-indigo-soft: rgba(99, 102, 241, 0.13);
  --c-violet: #8b5cf6;
  --c-violet-glow: rgba(139, 92, 246, 0.28);
  --c-violet-soft: rgba(139, 92, 246, 0.13);
  --c-bordeaux: #e11d48;
  --c-bordeaux-glow: rgba(225, 29, 72, 0.28);
  --c-bordeaux-soft: rgba(225, 29, 72, 0.13);
  --c-teal: #06b6d4;
  --c-teal-glow: rgba(6, 182, 212, 0.28);
  --c-teal-soft: rgba(6, 182, 212, 0.13);
  --c-amber: #f59e0b;
  --c-amber-glow: rgba(245, 158, 11, 0.26);
  --c-amber-soft: rgba(245, 158, 11, 0.13);
  --active-accent: var(--c-emerald);
  --active-glow: var(--c-emerald-glow);
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 1. Layout a pagina intera con Menu Laterale attivabile dal tasto fisso ☰ in alto a destra */
.studio-layout {
  display: block !important;
  min-height: 100vh;
}

.studio-layout:not(.studio-public) .studio-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: min(350px, 88vw);
  z-index: 1010;
  padding: 20px 18px;
  border-left: 1px solid var(--line);
  border-right: 0;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.42);
}

body.is-drawer-open .studio-layout:not(.studio-public) .studio-sidebar {
  transform: translateX(0);
}

body.is-drawer-open .mobile-drawer-backdrop {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(6, 11, 20, 0.62);
  backdrop-filter: blur(4px);
}

.mobile-drawer-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
}

.drawer-tech-details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* 2. Topbar Unificata e Fissa (Zero Overflow Orizzontale su 390px..1920px) */
header.studio-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 95;
  padding: 0 !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.topbar-brand-left {
  min-width: 0;
  flex: 1;
}

.brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.brand-logo-img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

.brand-cluster .logo-dark { display: none; }
:root[data-theme="dark"] .brand-cluster .logo-light { display: none; }
:root[data-theme="dark"] .brand-cluster .logo-dark { display: block; }

.brand-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.brand-row-1 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.quadra-wordmark-inline {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.quadra-wordmark-inline .brand-bf {
  color: #10b981;
}

.studio-inline-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #0d9488;
  border: 1px solid rgba(16, 185, 129, 0.30);
  white-space: nowrap;
}

:root[data-theme="dark"] .studio-inline-pill {
  color: #34d399;
}

.brand-row-2 {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.security-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #0d9488;
  white-space: nowrap;
}

:root[data-theme="dark"] .security-pill {
  color: #34d399;
}

.security-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.hamburger-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  min-height: 38px;
  padding: 0 13px !important;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.20), rgba(13, 148, 136, 0.08)) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.48) !important;
  color: var(--ink) !important;
  white-space: nowrap;
  cursor: pointer;
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 15px;
}

.hamburger-lines span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* 3. Quadrante di Comando 2x2 Centrato e Simmetrico su ogni schermo */
.cockpit-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cockpit-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d9488;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.26);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

:root[data-theme="dark"] .cockpit-eyebrow {
  color: #34d399;
}

.cockpit-title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 6px;
}

.cockpit-subtitle {
  font-size: clamp(12.5px, 1.6vw, 14px);
  color: var(--muted);
  line-height: 1.42;
  max-width: 520px;
  margin: 0;
}

.status-command-bar {
  max-width: 880px;
  margin: 0 auto 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}

.kpi-inline-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kpi-chip {
  background: var(--nav);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kpi-val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.quadra-cube-wrapper {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto 24px;
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: 24px;
  background: var(--surface);
  border: 1.5px solid var(--active-accent);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), 0 0 50px var(--active-glow);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.quadra-matrix {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 16px);
}

.quadrant-tile {
  position: relative;
  background: var(--nav);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: clamp(12px, 2vw, 20px) clamp(10px, 1.8vw, 18px);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: clamp(152px, 21vw, 196px);
  text-decoration: none !important;
  color: var(--ink) !important;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.24s ease,
              box-shadow 0.24s ease;
}

:root[data-theme="dark"] .quadrant-tile {
  background: rgba(20, 33, 54, 0.94);
}

.quadrant-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--tile-glow), transparent 72%);
  opacity: 0.25;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.quadrant-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tile-color);
  opacity: 0.75;
  transition: opacity 0.25s ease, height 0.25s ease;
}

.quadrant-tile:hover,
.quadrant-tile:focus-visible,
.quadrant-tile.is-lit {
  transform: translateY(-2px);
  border-color: var(--tile-color);
  box-shadow: 0 12px 30px var(--tile-glow), inset 0 0 22px var(--tile-soft);
}

.quadrant-tile:hover::before,
.quadrant-tile.is-lit::before {
  opacity: 0.88;
}

.quadrant-tile:hover::after,
.quadrant-tile.is-lit::after {
  opacity: 1;
  height: 5px;
}

.q-banche { --tile-color: var(--c-emerald); --tile-glow: var(--c-emerald-glow); --tile-soft: var(--c-emerald-soft); padding-bottom: clamp(18px, 2.5vw, 24px); }
.q-fatture { --tile-color: var(--c-indigo); --tile-glow: var(--c-indigo-glow); --tile-soft: var(--c-indigo-soft); padding-bottom: clamp(18px, 2.5vw, 24px); }
.q-personale { --tile-color: var(--c-violet); --tile-glow: var(--c-violet-glow); --tile-soft: var(--c-violet-soft); padding-top: clamp(18px, 2.5vw, 24px); }
.q-f24 { --tile-color: var(--c-bordeaux); --tile-glow: var(--c-bordeaux-glow); --tile-soft: var(--c-bordeaux-soft); padding-top: clamp(18px, 2.5vw, 24px); }

.tile-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.tile-icon-box {
  width: clamp(34px, 4.5vw, 42px);
  height: clamp(34px, 4.5vw, 42px);
  border-radius: 11px;
  background: var(--tile-soft);
  border: 1.5px solid var(--tile-color);
  color: var(--tile-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px var(--tile-soft);
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}

.quadrant-tile:hover .tile-icon-box,
.quadrant-tile.is-lit .tile-icon-box {
  background: var(--tile-color);
  color: #ffffff;
  transform: scale(1.06);
}

.tile-status-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--tile-soft);
  color: var(--tile-color);
  border: 1px solid var(--tile-color);
  white-space: nowrap;
}

.tile-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 4px 0;
}

.tile-title {
  font-size: clamp(14px, 2vw, 17.5px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.tile-desc {
  font-size: clamp(11px, 1.35vw, 12.5px);
  color: var(--muted);
  line-height: 1.32;
  max-width: 230px;
}

.tile-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile-enter {
  color: var(--tile-color);
  font-size: clamp(11px, 1.4vw, 12.5px);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quadra-center-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  width: clamp(50px, 7.2vw, 72px);
  height: clamp(50px, 7.2vw, 72px);
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--active-accent);
  box-shadow: 0 0 24px var(--active-glow), 0 0 0 5px var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  color: var(--ink);
}

.quadra-center-core svg {
  width: clamp(20px, 2.8vw, 28px);
  height: clamp(20px, 2.8vw, 28px);
}

.quadra-center-core span {
  font-size: clamp(7px, 0.95vw, 8.5px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--active-accent);
  white-space: nowrap;
}

.quadra-bottom-wing {
  margin-top: clamp(10px, 1.8vw, 14px);
}

.q-audit {
  --tile-color: var(--c-teal);
  --tile-glow: var(--c-teal-glow);
  --tile-soft: var(--c-teal-soft);
  width: 100%;
  min-height: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 12px;
}

.q-audit-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.q-audit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.q-audit-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.live-focus-bar {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--nav);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  text-align: center;
  color: var(--muted);
}

.focus-indicator {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--active-accent);
  box-shadow: 0 0 8px var(--active-accent);
  flex-shrink: 0;
}

.filter-actions-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .security-pill,
  .studio-inline-pill,
  .account-name,
  .account-pwd-link {
    display: none !important;
  }
  .q-audit {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 13px 12px;
  }
  .q-audit-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .q-audit-title-row {
    justify-content: center;
  }
}

/* 4. Rifinitura Sottosezioni Interne (Banche, Scadenzario 23.03.01/57.03.01, Storico X-Ray, Dark Mode) */
:root[data-theme="dark"] .staged-file-box {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #d1fae5 !important;
}
:root[data-theme="dark"] .staged-file-box label.staged-clear-toggle {
  color: #6ee7b7 !important;
}
:root[data-theme="dark"] .selected-files-summary {
  background: rgba(20, 33, 54, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #f8fafc !important;
}
form.card.filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
details table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* 5. Reattività DOM a 60fps sulle Tabelle Voluminose (Pillar E) */
#movements-table tbody tr,
.q-scad-item-row,
.q-scad-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}

.q-ajax-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}

/* ==========================================================================
   9. WIDESCREEN DESKTOP EXPANSION (96vw / 1760px) & MOBILE ZERO-OVERFLOW
   ========================================================================== */
:root {
  --surface-2: var(--nav, #eef2f4);
  --line-strong: var(--line, #cbd5e1);
}
:root[data-theme="dark"] {
  --surface-2: #0f1b24;
  --line-strong: #354a5c;
}

@media (min-width: 1024px) {
  .topbar-inner,
  main#main,
  main,
  .page,
  .studio-main,
  .workspace-container,
  .suite-shell {
    width: min(96vw, 1760px) !important;
    max-width: 1760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .quadra-cube-wrapper {
    max-width: 1140px;
  }

  .status-command-bar {
    max-width: 1140px;
  }
}

@media (min-width: 1536px) {
  .topbar-inner,
  main#main,
  main,
  .page,
  .studio-main,
  .workspace-container,
  .suite-shell {
    width: min(96vw, 1840px) !important;
    max-width: 1840px !important;
  }
}

/* ==========================================================================
   10. CASSETTI RAGGRUPPATI E CHIUSI DI DEFAULT (Revisioni & Anomalie)
   ========================================================================== */
details.collapsible-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 !important;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

details.collapsible-section[open] {
  border-color: var(--active-accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

details.collapsible-section > summary.collapsible-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-2);
}

details.collapsible-section > summary.collapsible-summary::-webkit-details-marker {
  display: none;
}

details.collapsible-section > summary.collapsible-summary .collapsible-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

details.collapsible-section > summary.collapsible-summary .collapsible-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

details.collapsible-section .collapsible-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
}

.grouped-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.grouped-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-dot.warn { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
.status-dot.ok { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }

/* ==========================================================================
   11. PULSANTI GEMELLI (Distinte Ri.Ba. & Rate, finanziamenti e AdER/INPS)
   ========================================================================== */
.action-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
  width: 100%;
}

.action-pair-grid > a.action-twin-btn,
.action-pair-grid > a.button.secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line-strong, var(--line)) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.action-pair-grid > a.action-twin-btn:hover,
.action-pair-grid > a.button.secondary:hover {
  border-color: var(--active-accent) !important;
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  .action-pair-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   12. BARRA DESCRIZIONE MOVIMENTO CONTESTUALE + IMPORTO GIGANTE + RIDUCI/ESPANDI
   ========================================================================== */
.quadra-movement-banner,
.sticky-movement-header,
[data-movement-context-bar] {
  position: sticky;
  top: 56px;
  z-index: 85;
  background: var(--surface);
  border: 1px solid var(--active-accent);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transition: all .2s ease;
}

body.is-list-scrolling-mode .quadra-movement-banner:not(.is-working-active):not(.is-split-page-banner),
.quadra-movement-banner.is-hidden-context {
  display: none !important;
}

.movement-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.movement-meta-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.movement-date-pill {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.movement-amount-hero {
  font-size: clamp(17px, 2vw, 21px) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  padding: 4px 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}

.movement-amount-hero.is-outflow {
  color: #fda4af;
  background: rgba(225, 29, 72, 0.16);
  border: 1px solid rgba(225, 29, 72, 0.42);
}

:root[data-theme="light"] .movement-amount-hero.is-outflow {
  color: #be123c;
  background: rgba(225, 29, 72, 0.10);
}

.movement-amount-hero.is-inflow {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.42);
}

:root[data-theme="light"] .movement-amount-hero.is-inflow {
  color: #047857;
  background: rgba(16, 185, 129, 0.10);
}

.movement-banner-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.movement-banner-btn {
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer;
}

.movement-desc-content {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
}

.quadra-movement-banner.is-compact-desc .movement-desc-content {
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--muted);
  font-size: 12.5px;
}

/* ==========================================================================
   13. SCRITTURA CON PIÙ CONTI (bank_split.html) E RI.BA.: PRESET & RESIDUO
   ========================================================================== */
.split-presets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.split-preset-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.split-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: all .15s ease;
}

.split-preset-btn.is-active,
.split-preset-btn:hover {
  border-color: var(--active-accent) !important;
  background: var(--c-emerald-soft) !important;
}

.split-residual-pill {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.split-residual-pill.is-balanced {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.45);
}

.split-residual-pill.is-unbalanced {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
}

/* ==========================================================================
   14. TABELLE PRATICHE (DASHBOARD & SUITE): CARD RESPONSIVE SU SMARTPHONE
   ========================================================================== */
.table-scroll td p,
.table-scroll td small,
.table-scroll td strong,
.table-scroll td a {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 861px) {
  .dashboard-cases-table th:nth-child(1),
  .dashboard-cases-table td:nth-child(1) { min-width: 190px; width: 20%; }
  .dashboard-cases-table th:nth-child(2),
  .dashboard-cases-table td:nth-child(2) { min-width: 170px; width: 17%; }
  .dashboard-cases-table th:nth-child(3),
  .dashboard-cases-table td:nth-child(3) { min-width: 340px; width: 43%; }
  .dashboard-cases-table th:nth-child(4),
  .dashboard-cases-table td:nth-child(4) { min-width: 120px; width: 11%; }
  .dashboard-cases-table th:nth-child(5),
  .dashboard-cases-table td:nth-child(5) { width: 9%; white-space: nowrap; }
}

@media (max-width: 860px) {
  .table-scroll {
    overflow-x: visible;
  }

  .table-scroll > table,
  .table-scroll > table > tbody {
    display: block;
    width: 100%;
  }

  .table-scroll > table > thead {
    display: none;
  }

  .table-scroll > table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--active-accent, #10b981);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
  }

  .table-scroll > table > tbody > tr:last-child {
    margin-bottom: 0;
  }

  .table-scroll > table > tbody > tr > td {
    display: block;
    width: 100%;
    padding: 0 0 8px 0 !important;
    border: 0;
    border-bottom: 1px dashed var(--line);
    text-align: left !important;
    min-width: 0 !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .table-scroll > table > tbody > tr > td:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0;
  }

  .table-scroll > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
}




/* Commands remain readable at narrow widths and at browser zoom. */
.brand-cluster {width:100%; max-width:100%;}
.brand-text-col {overflow:hidden;}
.brand-row-1 {min-width:0;}
.brand-row-2 {max-width:100%;}
.command-actions {display:flex; align-items:stretch; flex-wrap:wrap; gap:10px;}
.command-actions > .button,.command-actions > button {min-height:44px; margin:0;}
.toolbar > :first-child {min-width:0;}
.toolbar h1 {overflow-wrap:anywhere;}
.studio-content .topbar-inner,.studio-content main#main {width:100% !important;}
@media (min-width:1024px) {
  .studio-content .topbar-inner,.studio-content main#main {max-width:1760px !important;}
}
@media (max-width:600px) {
  .topbar-inner {display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:10px 14px;}
  .topbar-brand-left {width:100%;}
  .brand-row-2 {white-space:normal; line-height:1.35;}
  .studio-inline-pill {display:none;}
  .topbar-right-actions {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr); width:100%; margin-left:0; gap:8px; align-items:stretch;}
  .topbar-right-actions .security-pill,.topbar-right-actions .account-name,.topbar-right-actions .account-pwd-link {display:none;}
  .topbar-right-actions button {width:100%; min-height:44px; height:auto; margin:0; padding:8px !important; font-size:13px; white-space:normal;}
  .topbar-right-actions form {display:flex; min-width:0; margin:0;}
  .command-actions {display:grid; grid-template-columns:minmax(0,1fr); width:100%;}
  .command-actions > .button,.command-actions > button {width:100%; padding:10px 14px;}
  .form-actions {align-items:stretch;}
  .form-actions > button,.form-actions > .button {min-height:44px;}
}

/* ==========================================================================
 * Quadra Accounting Intelligence · design system esecutivo (2026-10)
 * Solo presentazione: ID DOM, attributi data-* e hook JS restano invariati.
 * ========================================================================== */
:root:not([data-theme=dark]) {
  --navy:#101c2d; --ink:#142338; --muted:#61728a; --green:#087e76; --mint:#b8f4df;
  --line:#e3eaf0; --paper:#f5f8fa; --white:#fff; --amber:#ad6511;
  --accent:#087e76; --accent-hover:#06665f; --focus:#087e76; --soft:#e8f6f2;
  --good:#13705d; --good-bg:#edf6f2; --warning:#9b5b0b; --warning-bg:#fff3e3;
  --surface:#fff;
}
body {font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}

/* Marchio vettoriale */
.q-brand {display:flex; align-items:center; gap:10px; text-decoration:none}
.q-brand-mark {display:block; flex:0 0 auto}
:root[data-theme=dark] .q-brand-mark path:first-child {fill:#e2e8f0}
.q-brand-word, .quadra-wordmark-inline.q-brand-word {font-weight:830; letter-spacing:-1px; color:var(--ink); font-size:21px; line-height:1}
.q-brand-sub, .brand-row-2.q-brand-sub {font-size:10px; letter-spacing:1.9px; font-weight:750; color:#087e76; text-transform:uppercase; line-height:1.3}
:root[data-theme=dark] .q-brand-sub {color:#5eead4}
.logo.q-brand .quadra-wordmark {display:flex; flex-direction:column; gap:2px}
.logo.q-brand .q-brand-sub {font-size:8.5px; letter-spacing:1.4px}

/* Navbar sticky con vetro smerigliato */
header.studio-topbar {position:sticky; top:0; z-index:90; background:rgba(255,255,255,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
:root[data-theme=dark] header.studio-topbar {background:rgba(15,23,42,.82)}

/* Login */
.q-login-brand {display:flex; align-items:center; gap:14px; margin:0 0 14px}
.q-login-brand-text {display:flex; flex-direction:column; gap:4px}
.q-login-brand .q-brand-word {font-size:34px}
.q-login-brand .q-brand-sub {font-size:10px}

/* Card */
.card {border:1px solid #e3eaf0; box-shadow:0 6px 22px #15273708; border-radius:16px}
:root[data-theme=dark] .card {border-color:var(--line)}

/* Bottoni primari */
.button:not(.secondary), button:not(.secondary):not(.theme-toggle):not(.mobile-menu-toggle):not(.hamburger-btn) {border-radius:12px}
:root:not([data-theme=dark]) .button:not(.secondary), :root:not([data-theme=dark]) button:not(.secondary):not(.theme-toggle):not(.mobile-menu-toggle):not(.hamburger-btn):not(.q-partitario-trigger-btn) {background:#087e76; border-color:#087e76; color:#fff}
:root:not([data-theme=dark]) .button:not(.secondary):hover, :root:not([data-theme=dark]) button:not(.secondary):not(.theme-toggle):not(.mobile-menu-toggle):not(.hamburger-btn):not(.q-partitario-trigger-btn):hover {background:#06665f; border-color:#06665f; color:#fff}
.button.secondary, button.secondary {border-radius:12px}

/* Badge di stato */
.badge.good {background:#edf6f2; color:#13705d; font-weight:800}
.badge.warning {background:#fff3e3; color:#9b5b0b}
:root[data-theme=dark] .badge.good {background:#14352a; color:#6ee7b7}
:root[data-theme=dark] .badge.warning {background:#3b2a14; color:#fbbf24}

/* Testata pratica (.worktop) */
.toolbar.worktop {background:var(--navy, #101c2d); color:#fff; border-radius:22px 22px 0 0; padding:18px 22px; margin-top:8px}
.toolbar.worktop h1, .toolbar.worktop .eyebrow, .toolbar.worktop p, .toolbar.worktop .muted {color:#fff}
.toolbar.worktop .eyebrow {color:#b8f4df; letter-spacing:1.6px}
.toolbar.worktop .muted {opacity:.78}
.toolbar.worktop .button.secondary {background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff}
.toolbar.worktop .button.secondary:hover {background:rgba(255,255,255,.16); color:#fff}

/* Toggle Saldaconto BETA */
.q-saldaconto-toggle {margin-top:.75rem; padding:.85rem 1rem; border:1px solid #e3eaf0; border-radius:14px; background:#f5f8fa}
.q-saldaconto-toggle[data-saldaconto-beta=on] {border-color:#087e76; background:#edf6f2}
.q-saldaconto-toggle-head {display:flex; align-items:center; gap:.55rem; flex-wrap:wrap}
.q-saldaconto-toggle-title {font-size:15px; color:var(--ink)}
.q-beta-pill {display:inline-block; padding:.1rem .45rem; border-radius:999px; background:#fff3e3; color:#ad6511; font-size:10px; font-weight:800; letter-spacing:1.2px}
:root[data-theme=dark] .q-saldaconto-toggle {background:var(--surface); border-color:var(--line)}

/* Pre-Flight .MOV */
.q-preflight {margin:1rem 0; padding:1rem; border:1px solid #e3eaf0; border-radius:16px; background:#fff; box-shadow:0 6px 22px #15273708}
.q-preflight-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.65rem; margin-top:.5rem}
.q-preflight-cell {display:flex; flex-direction:column; gap:.15rem; padding:.7rem .8rem; border-radius:12px; background:#f5f8fa; border:1px solid #e3eaf0}
.q-preflight-cell strong {font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums}
.q-preflight-label {font-size:11px; font-weight:750; letter-spacing:.6px; color:#61728a; text-transform:uppercase}
.q-preflight-cell.is-good {background:#edf6f2; border-color:#b8f4df}
.q-preflight-cell.is-good strong {color:#13705d}
.q-preflight-cell.is-warning {background:#fff3e3; border-color:#f5d7a8}
.q-preflight-cell.is-warning strong {color:#9b5b0b}
:root[data-theme=dark] .q-preflight, :root[data-theme=dark] .q-preflight-cell {background:var(--surface); border-color:var(--line)}

/* Suggerimento commissioni */
.q-inline-fee-split.q-fee-hint-active {border-style:solid !important; border-color:#087e76 !important; background:#edf6f2 !important}
.q-fee-hint-cta {border-color:#087e76 !important; color:#06665f !important; background:#fff !important}

/* Conferma scadenzario */
.q-scad-confirm-snapshot {display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin:.45rem 1rem 0 1rem; padding:.55rem .75rem; border:1px solid #f5d7a8; border-radius:12px; background:#fff3e3}
.q-scad-confirm-snapshot small {flex:1 1 260px}

/* =====================================================================
   QUADRA · Design system «Registro di studio» — v1.0 (2026-10-23)
   Strato finale: si carica DOPO identity.css e ne sostituisce i token.
   Regole complete in docs/DESIGN.md. Modificare i colori SOLO qui.
   ===================================================================== */

/* ---- 1. Token: tema chiaro ---------------------------------------- */
:root {
  --q-ink:#17212B;        /* testo principale, barra superiore */
  --q-ink-2:#22303D;      /* superfici sulla barra scura */
  --q-muted:#5B6672;      /* testo secondario (contrasto AA su bianco) */
  --q-line:#E1E4E8;       /* bordi */
  --q-line-soft:#EEF0F2;  /* righe di tabella */
  --q-paper:#F3F4F6;      /* fondo pagina */
  --q-surface:#FFFFFF;    /* schede, tabelle */
  --q-accent:#0B6B57;     /* UNICO accento: verde petrolio */
  --q-accent-hover:#084D3F;
  --q-accent-soft:#E6F2EE;
  --q-on-dark-accent:#7FCDB7;
  --q-info:#2457A6;       --q-info-bg:#E8EFFA;    /* stato: proposto */
  --q-warn:#9A5B00;       --q-warn-bg:#FBF1E1;    /* stato: da verificare */
  --q-danger:#A8322A;     --q-danger-bg:#FBEAE8;  /* stato: errore / non quadra */
  --q-good:#0B6B57;       --q-good-bg:#E6F2EE;    /* stato: abbinato / quadra */
  --q-radius:6px; --q-radius-card:8px;
  --q-font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --q-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* mappatura sui token storici di identity.css */
  --ink:var(--q-ink); --muted:var(--q-muted); --line:var(--q-line); --line-strong:#C7CCD2;
  --paper:var(--q-paper); --surface:var(--q-surface); --surface-2:#F8F9FA; --nav:var(--q-surface);
  --accent:var(--q-accent); --accent-hover:var(--q-accent-hover); --soft:var(--q-accent-soft);
  --focus:var(--q-accent); --on-accent:#FFFFFF;
  --warning:var(--q-warn); --warning-bg:var(--q-warn-bg);
  --danger:var(--q-danger); --danger-bg:var(--q-danger-bg);
  --good:var(--q-good); --good-bg:var(--q-good-bg);
}

/* ---- 2. Token: tema scuro ----------------------------------------- */
:root[data-theme=dark] {
  --q-ink:#E4E9E5; --q-ink-2:#1B2620; --q-muted:#9AA59F; --q-line:#2E3632; --q-line-soft:#242B28;
  --q-paper:#121715; --q-surface:#1A201D; --q-accent:#6CC4A2; --q-accent-hover:#8AD3B6; --q-accent-soft:#1F3229;
  --q-info:#8FB3EB; --q-info-bg:#1C2738; --q-warn:#E0B067; --q-warn-bg:#33291A;
  --q-danger:#F0A39B; --q-danger-bg:#3A1F1C; --q-good:#6CC4A2; --q-good-bg:#1F3229;
  --ink:var(--q-ink); --muted:var(--q-muted); --line:var(--q-line); --paper:var(--q-paper);
  --surface:var(--q-surface); --nav:var(--q-surface); --accent:var(--q-accent); --accent-hover:var(--q-accent-hover);
  --soft:var(--q-accent-soft); --focus:var(--q-accent); --on-accent:#0D2A23;
  --warning:var(--q-warn); --warning-bg:var(--q-warn-bg); --danger:var(--q-danger); --danger-bg:var(--q-danger-bg);
  --good:var(--q-good); --good-bg:var(--q-good-bg);
}

/* ---- 3. Un solo accento: le 6 aree non cambiano più colore -------- */
html body[data-suite-theme] { --accent:var(--q-accent); --accent-hover:var(--q-accent-hover); --soft:var(--q-accent-soft); --focus:var(--q-accent); }
:root[data-theme=dark] body[data-suite-theme] { --accent:var(--q-accent); --accent-hover:var(--q-accent-hover); --soft:var(--q-accent-soft); --on-accent:#0D2A23; }

/* ---- 4. Tipografia ------------------------------------------------- */
html body { font-family:var(--q-font); font-size:14px; line-height:1.5; color:var(--q-ink); background:var(--q-paper); font-variant-numeric:tabular-nums; }
html body h1 { font-size:24px; font-weight:600; letter-spacing:-.01em; }
html body h2 { font-size:18px; font-weight:600; }
html body h3 { font-size:15px; font-weight:600; }
html body .eyebrow, html body .nav-heading { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--q-muted); }
/* importi: monospaziati, allineati a destra, centesimi in colonna */
html body .numeric, html body .number, html body td.numeric, html body th.numeric,
html body .movement-amount-hero, html body .q-amount {
  font-family:var(--q-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
html body code, html body kbd, html body .technical { font-family:var(--q-mono); }

/* ---- 5. Barra superiore: solida, niente vetro sfocato ------------- */
html body header.studio-topbar {
  background:var(--q-ink) !important; color:#F3F4F6; border-bottom:0;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; min-height:56px; padding:8px 24px;
}
:root[data-theme=dark] body header.studio-topbar { background:#0C100E !important; }
html body header.studio-topbar a, html body header.studio-topbar .account-name,
html body header.studio-topbar .q-brand-word, html body header.studio-topbar .quadra-wordmark-inline { color:#F3F4F6 !important; }
html body header.studio-topbar .q-brand-sub { color:var(--q-on-dark-accent) !important; }
html body header.studio-topbar .q-brand-mark path:first-child { fill:#F3F4F6; }
html body header.studio-topbar .q-brand-mark path:last-child { fill:var(--q-on-dark-accent); }
html body header.studio-topbar .studio-inline-pill {
  background:var(--q-ink-2); color:#F3F4F6; border:1px solid #33414F; border-radius:var(--q-radius); font-weight:500;
}
html body header.studio-topbar button.secondary, html body header.studio-topbar .account-logout-btn {
  background:transparent; color:#F3F4F6; border:1px solid #33414F; min-height:34px;
}
html body header.studio-topbar button.secondary:hover { background:var(--q-ink-2); }

/* ---- 6. Barra laterale -------------------------------------------- */
html body .studio-sidebar { background:var(--q-surface); border-right:1px solid var(--q-line); }
html body .studio-nav a { border-left:0 !important; border-radius:var(--q-radius); color:var(--q-ink); padding:8px 12px; font-size:13.5px; }
html body .studio-nav a:hover { background:var(--q-paper); }
html body .studio-nav a[aria-current] { background:var(--q-accent-soft) !important; color:var(--q-accent) !important; font-weight:600; border-left:0 !important; }
html body .studio-space { border-radius:var(--q-radius); }

/* ---- 7. Schede, tabelle, pulsanti, campi -------------------------- */
html body .card { border-radius:var(--q-radius-card); box-shadow:none; border:1px solid var(--q-line); background:var(--q-surface); }
html body table { font-size:13px; border-collapse:collapse; }
html body th {
  background:var(--q-surface); color:var(--q-muted); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--q-line);
}
html body td, html body th { padding:9px 12px; }
html body td { border-color:var(--q-line-soft); }
html body tbody tr:hover td { background:#F7F9F8; }
:root[data-theme=dark] body tbody tr:hover td { background:#202824; }
html body button, html body .button { border-radius:var(--q-radius); min-height:38px; font-weight:600; }
html body button.secondary, html body .button.secondary { background:var(--q-surface); color:var(--q-ink); border:1px solid var(--line-strong, #C7CCD2); }
html body button.secondary:hover, html body .button.secondary:hover { background:var(--q-paper); color:var(--q-ink); }
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea { border-radius:var(--q-radius); }
html body :focus-visible { outline:2px solid var(--q-accent); outline-offset:2px; box-shadow:none; }

/* ---- 8. Stati: sempre forma + colore ------------------------------ */
.q-chip { display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px; font-weight:600; white-space:nowrap; }
.q-chip--abbinato, .q-chip--quadra { background:var(--q-good-bg); color:var(--q-good); }
.q-chip--proposto { background:var(--q-info-bg); color:var(--q-info); }
.q-chip--verificare { background:var(--q-warn-bg); color:var(--q-warn); }
.q-chip--errore { background:var(--q-danger-bg); color:var(--q-danger); }
html body .notice.error { background:var(--q-danger-bg); color:var(--q-danger); border-color:transparent; }
html body .notice.warning { background:var(--q-warn-bg); color:var(--q-warn); border-color:transparent; }
html body .notice.success { background:var(--q-good-bg); color:var(--q-good); border-color:transparent; }

/* ---- 9. Piè di pagina ---------------------------------------------- */
html body footer { font-size:12px; color:var(--q-muted); }
.q-integrity { display:inline-flex; align-items:center; gap:6px; }
.q-integrity::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--q-accent); }

/* ---- 10. Pagine pubbliche (accesso, privacy) ----------------------- */
html body .studio-public .studio-sidebar { display:none !important; }
html body .q-login { max-width:400px; margin:clamp(32px,10vh,96px) auto; text-align:left; }
html body .q-login .card { padding:28px; display:flex; flex-direction:column; gap:6px; }
html body .q-login .eyebrow { margin:0; color:var(--q-accent); }
html body .q-login h1 { margin:0; font-size:22px; }
html body .q-login .muted { margin:0 0 12px; font-size:13px; }
html body .q-login form { display:flex; flex-direction:column; gap:6px; }
html body .q-login label { font-size:13px; font-weight:600; margin-top:6px; }
html body .q-login input, html body .q-login button { width:100%; }
html body .q-login button { min-height:42px; margin-top:8px; }
html body .q-login .error { margin:0 0 4px; padding:8px 10px; border-radius:var(--q-radius); background:var(--q-danger-bg); color:var(--q-danger); font-size:13px; }
html body .q-login .login-legal { margin-top:16px; text-align:center; font-size:12px; }
html body .q-login .login-legal a { color:var(--q-muted); }
html body footer { text-align:center; line-height:1.8; }

/* ---- 11. Pulsanti principali: un solo accento ---------------------- */
html body .button:not(.secondary),
html body button:not(.secondary):not(.theme-toggle):not(.mobile-menu-toggle):not(.hamburger-btn):not(.q-partitario-trigger-btn):not(.mobile-drawer-close) {
  background:var(--q-accent) !important; border-color:var(--q-accent) !important; color:var(--on-accent) !important; border-radius:var(--q-radius) !important;
}
html body .button:not(.secondary):hover,
html body button:not(.secondary):not(.theme-toggle):not(.mobile-menu-toggle):not(.hamburger-btn):not(.q-partitario-trigger-btn):not(.mobile-drawer-close):hover {
  background:var(--q-accent-hover) !important; border-color:var(--q-accent-hover) !important;
}

/* ---- 12. Scrivania: intestazione pagina e aree di lavoro ----------- */
.q-page-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin:4px 0 24px; }
.q-page-head .eyebrow { margin:0; color:var(--q-accent); }
.q-page-head h1 { margin:2px 0 4px; }
.q-page-head .muted { margin:0; font-size:14px; }
.q-section-title { margin:0 0 10px; font-size:11px !important; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--q-muted) !important; }
.q-areas { margin-bottom:28px; }
.q-areas-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width:1000px) { .q-areas-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px) { .q-areas-grid { grid-template-columns:minmax(0, 1fr); } }
html body a.q-area {
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px; min-width:0;
  background:var(--q-surface); border:1px solid var(--q-line); border-radius:var(--q-radius-card);
  color:var(--q-ink) !important; text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
html body a.q-area:hover { border-color:var(--q-accent); box-shadow:0 2px 12px rgba(23,33,43,.07); }
html body a.q-area:focus-visible { outline:2px solid var(--q-accent); outline-offset:2px; }
.q-area-icon { flex:none; padding:8px; box-sizing:content-box; color:var(--q-accent); background:var(--q-accent-soft); border-radius:var(--q-radius); }
.q-area-body { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.q-area-title { font-weight:600; font-size:15px; color:var(--q-ink); }
.q-area-desc { font-size:13px; line-height:1.45; color:var(--q-muted); }
.q-area-go { align-self:center; color:var(--q-muted); font-size:16px; }
a.q-area:hover .q-area-go { color:var(--q-accent); }

/* ---- 13. Desktop: menu laterale sempre visibile -------------------- */
@media (min-width:1100px) {
  html body .studio-layout:not(.studio-public) { display:grid !important; grid-template-columns:252px minmax(0, 1fr); }
  html body .studio-layout:not(.studio-public) .studio-sidebar {
    position:sticky !important; top:0; left:auto; right:auto; height:100vh; width:auto;
    transform:none !important; box-shadow:none !important; z-index:20;
    background:var(--q-ink) !important; border:0 !important; padding:20px 14px; overflow-y:auto;
  }
  :root[data-theme=dark] body .studio-layout:not(.studio-public) .studio-sidebar { background:#0C100E !important; border-right:1px solid var(--q-line) !important; }
  html body .mobile-menu-toggle, html body .mobile-drawer-close, html body .mobile-drawer-backdrop { display:none !important; }
  html body .studio-sidebar .cobrand-divider, html body .studio-sidebar .studio-space, html body .studio-sidebar .studio-sidebar-foot { display:none !important; }
  html body .studio-sidebar .q-brand-word, html body .studio-sidebar .logo { color:#F3F4F6 !important; }
  html body .studio-sidebar .q-brand-sub { color:#7FCDB7 !important; }
  html body .studio-sidebar .q-brand-mark path:first-child { fill:#F3F4F6; }
  html body .studio-sidebar .q-brand-mark path:last-child { fill:#7FCDB7; }
  html body .studio-sidebar .studio-cobrand-badge { background:transparent !important; border:1px solid #33414F !important; box-shadow:none !important; border-radius:var(--q-radius); }
  html body .studio-sidebar .studio-cobrand-title { color:#F3F4F6 !important; }
  html body .studio-sidebar .studio-cobrand-subtitle { color:#A9B3BD !important; }
  html body .studio-sidebar .nav-heading, html body .studio-sidebar summary.nav-heading { color:#8B96A1 !important; margin:16px 12px 6px; }
  html body .studio-sidebar .studio-nav a { color:#C9D1D9 !important; background:transparent !important; }
  html body .studio-sidebar .studio-nav a:hover { color:#FFFFFF !important; background:#22303D !important; }
  html body .studio-sidebar .studio-nav a[aria-current] { color:#7FCDB7 !important; background:rgba(127,205,183,.13) !important; font-weight:600; }
  /* barra superiore chiara: il marchio sta già nel menu */
  html body header.studio-topbar { background:var(--q-surface) !important; border-bottom:1px solid var(--q-line); min-height:52px; }
  html body header.studio-topbar .topbar-brand-left { display:none; }
  html body header.studio-topbar .account-name, html body header.studio-topbar a { color:var(--q-ink) !important; }
  html body header.studio-topbar button.secondary, html body header.studio-topbar .account-logout-btn { color:var(--q-ink) !important; border-color:var(--line-strong, #C7CCD2) !important; background:var(--q-surface) !important; }
  html body header.studio-topbar button.secondary:hover { background:var(--q-paper) !important; }
}

/* ---- 14. Elementi comuni delle schermate di lavoro ----------------- */
.q-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:baseline; margin-right:4px; background:var(--q-muted); }
.q-dot--good { background:var(--q-good); }
.q-dot--warn { background:#B87300; }
.q-dot--danger { background:var(--q-danger); }
.q-dot--info { background:var(--q-info); }
.q-dot--muted { background:#AEB5BC; }
.q-breadcrumb { font-size:12.5px; color:var(--q-muted); margin:0 0 6px; }
html body .q-breadcrumb a { color:var(--q-muted) !important; text-decoration:none; }
html body .q-breadcrumb a:hover { color:var(--q-accent) !important; text-decoration:underline; }
html body .ai-learner-banner { background:var(--q-info-bg) !important; border:1px solid transparent !important; border-radius:var(--q-radius) !important; box-shadow:none !important; padding:10px 14px !important; }
html body .ai-learner-banner .ai-learner-title { color:var(--q-info) !important; font-weight:600; }
html body .ai-learner-banner .ai-learner-sub { color:var(--q-ink) !important; }
html body .flow-section .eyebrow { color:var(--q-accent); }
html body .flow-section h2 { margin-top:2px; }

/* ---- 15. Banche & MOV: schermata di lavoro (docs/DESIGN.md) ------- */
.q-chip--neutro { background:var(--q-paper); color:var(--q-muted); border:1px solid var(--q-line); }
.q-mt { margin-top:12px; }
.q-small { font-size:12px; }
.q-grow { flex:1 1 200px; min-width:0; }
.q-btn-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.q-btn-row form { margin:0; }
html body .q-btn-xs { min-height:28px; padding:2px 8px; font-size:12px; font-weight:600; }
html body .q-btn-sm { min-height:32px; padding:4px 10px; font-size:12.5px; }
.q-link { color:var(--q-accent); font-weight:600; text-decoration:underline; }

/* fascia di quadratura: 4 celle */
.q-balance-strip { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; margin:12px 0 16px;
  background:var(--q-line); border:1px solid var(--q-line); border-radius:var(--q-radius-card); overflow:hidden; }
.q-balance-cell { display:flex; flex-direction:column; gap:4px; padding:12px 16px; background:var(--q-surface); min-width:0; }
.q-balance-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--q-muted); }
.q-balance-cell > strong { font-size:20px; font-weight:600; text-align:left; }
.q-balance-cell > strong.q-amount { text-align:left; }
.q-balance-cell small { font-size:12px; color:var(--q-muted); line-height:1.6; }
.q-balance-cell small .q-amount { text-align:left; }
@media (max-width:1000px) { .q-balance-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:480px) { .q-balance-strip { grid-template-columns:minmax(0, 1fr); } }

/* barre e pannelli informativi senza colori propri */
.q-memory-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:8px 0; padding:10px 16px; font-size:13px; }
.q-memory-text { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.q-progress { width:140px; height:6px; background:var(--q-line); border-radius:3px; overflow:hidden; }
.q-progress-fill { height:100%; background:var(--q-accent); transition:width .25s ease; }
.q-panel { margin:12px 0; padding:12px 16px; background:var(--q-paper); border:1px solid var(--q-line); border-radius:var(--q-radius-card); }
.q-summary-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.q-next-action { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
html body .q-callout { margin-bottom:16px; border:1px solid transparent; }
html body .q-callout--warn { background:var(--q-warn-bg); }
html body .q-callout--good { background:var(--q-good-bg); }
html body .q-callout h2 { margin-top:2px; }
.q-subtle-details { margin-top:10px; }
.q-subtle-details > summary { font-size:13px; color:var(--q-accent); font-weight:600; cursor:pointer; }
.q-upload-row { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-top:8px; padding:10px 12px; border:1px dashed var(--q-line); border-radius:var(--q-radius); }
.q-upload-row .q-field { flex:1 1 210px; }

/* filtri per stato con conteggi */
.q-filters { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 8px; }
html body a.q-filter { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:4px 12px;
  border:1px solid var(--q-line); border-radius:var(--q-radius); background:var(--q-surface); color:var(--q-ink) !important;
  font-size:13px; font-weight:500; text-decoration:none; }
html body a.q-filter:hover { border-color:var(--q-accent); }
html body a.q-filter.is-active { border-color:var(--q-accent); background:var(--q-accent-soft); color:var(--q-accent) !important; font-weight:600; }
.q-filter .q-dot { margin:0; }
.q-count { font-family:var(--q-mono); font-size:12px; color:var(--q-muted); }
.q-filter.is-active .q-count { color:inherit; }
.q-search-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.q-search-bar input[type=search] { flex:1 1 220px; min-width:0; }
.q-search-bar #inline-movement-exclude { flex:0 1 190px; }
.q-search-bar #inline-movement-mode, .q-search-bar #inline-movement-sign { flex:0 0 auto; width:auto; }
.q-table-head { flex-wrap:wrap; gap:12px; }

/* azioni su più righe */
html body .q-bulk-bar { margin:8px 0; padding:12px; background:var(--q-surface); border:1px solid var(--q-line); border-radius:var(--q-radius-card); box-shadow:none; }
.q-bulk-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.q-bulk-fields { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.q-bulk-fields #bulk-partitario-input { width:210px; }

/* tabella movimenti: righe dense, importi in colonna */
.q-review-main { min-width:0; overflow-x:auto; }
html body #movements-table .q-review-table { width:100%; border-collapse:collapse; border-spacing:0; table-layout:auto; }
html body #movements-table .q-review-table th { text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
html body #movements-table .q-review-table td { padding:8px 10px; vertical-align:top; border-bottom:1px solid var(--q-line-soft); background:var(--q-surface); }
html body #movements-table .q-review-table tbody tr { background:var(--q-surface); box-shadow:none; }
html body #movements-table .q-col-date { width:96px; white-space:nowrap; }
html body #movements-table .q-col-out, html body #movements-table .q-col-in { width:112px; font-family:var(--q-mono); font-size:13px; text-align:right; white-space:nowrap; }
html body #movements-table td.q-col-out { color:var(--q-ink); }
html body #movements-table .q-col-match { width:150px; }
html body #movements-table .q-col-decision { width:38%; min-width:260px; }
html body #movements-table .q-col-desc { overflow-wrap:anywhere; line-height:1.45; }
.q-col-date .q-bulk-row-cb { margin:0 6px 0 0; vertical-align:middle; cursor:pointer; }
.q-date { font-family:var(--q-mono); font-size:12.5px; color:var(--q-muted); }
html body #movements-table .q-review-table tfoot th, html body #movements-table .q-review-table tfoot td {
  border-top:1px solid var(--q-line); border-bottom:0; background:var(--q-paper); font-size:12.5px; text-transform:none; letter-spacing:0; }
html body #movements-table tr.q-row { cursor:default; }
html body #movements-table tr.q-row.is-selected td { background:var(--q-accent-soft); }
html body #movements-table tr.q-row:focus-visible { outline:2px solid var(--q-accent); outline-offset:-2px; }
html body #movements-table .q-reconciliation-status { white-space:normal; line-height:1.35; }
.q-decision-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:6px; }
.q-row-links { margin:6px 0 0; font-size:12.5px; }
.q-prov { margin-top:6px; font-size:12.5px; }
.q-table-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--q-line); }
.q-pager { margin-top:12px; }

/* editor della riga */
html body #movements-table .q-inline-box { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; margin-top:8px; padding:10px;
  background:var(--q-surface) !important; border:1px solid var(--q-line) !important; border-radius:var(--q-radius); }
html body #movements-table .q-inline-box--open { background:var(--q-paper) !important; }
.q-field { display:block; margin:0; font-size:12px; font-weight:600; min-width:0; }
.q-field input, .q-field select { width:100%; }
.q-field--wide { grid-column:1 / -1; }
.q-input-row { display:flex; align-items:center; gap:6px; }
.q-input-row input { flex:1 1 auto; min-width:0; }
.q-input-row button { flex:0 0 auto; white-space:nowrap; }
.q-acc-desc, .q-part-desc { display:block; font-size:12px; font-weight:400; color:var(--q-muted); margin-top:2px; }
html body .q-acc-xray-live { margin-top:4px; font-size:12px; line-height:1.4; font-weight:400; }
.q-row-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:8px; padding-top:8px; border-top:1px solid var(--q-line-soft); }
.q-edit-details { margin-top:6px; }
.q-edit-details > summary { font-size:13px; color:var(--q-accent); cursor:pointer; }
.q-fee-split { grid-column:1 / -1; padding:8px 10px; border:1px dashed var(--q-line); border-radius:var(--q-radius); background:var(--q-paper); }
.q-fee-split > summary { font-size:12.5px; font-weight:600; cursor:pointer; color:var(--q-accent); }
.q-fee-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-top:6px; align-items:end; }
.q-fee-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:12px; }
.q-fee-cta { margin-top:6px; }
.q-hist-hints { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
html body .q-hist-hint-badge { cursor:pointer; padding:6px 8px; font-size:12.5px; line-height:1.4; border-radius:var(--q-radius);
  background:var(--q-info-bg) !important; border:1px solid transparent; color:var(--q-ink); }
html body .q-hist-hint-badge:hover, html body .q-hist-hint-badge:focus-visible { border-color:var(--q-info); }

/* «Perché questa proposta» */
.q-why { display:flex; flex-direction:column; gap:10px; margin:8px 0; }
.q-why-block { min-width:0; }
.q-why-title { margin:0 0 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--q-muted); }
.q-why-reason { margin:0; font-size:13px; }
.q-why-source { margin:2px 0 0; font-size:12px; color:var(--q-muted); }
.q-entry { font-size:12.5px; border:1px solid var(--q-line); border-radius:var(--q-radius); }
.q-entry-row { display:grid; grid-template-columns:minmax(0, 1fr) 96px 96px; gap:8px; padding:5px 8px; border-bottom:1px solid var(--q-line-soft); }
.q-entry-row:last-child { border-bottom:0; }
.q-entry-row > :first-child { overflow-wrap:anywhere; }
.q-entry-head { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--q-muted); }
.q-entry-head > :not(:first-child) { text-align:right; }

/* tabella a sinistra, dettaglio a destra (≥1400 px, attivato da workflow.js) */
.q-review-split.is-panel { display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:16px; align-items:start; }
.q-review-split.is-panel .q-review-table .q-row-detail { display:none; }
.q-review-split.is-panel .q-col-decision { width:30%; }
html body .q-detail-panel { position:sticky; top:72px; max-height:calc(100vh - 88px); overflow-y:auto; padding:14px 16px;
  background:var(--q-surface); border:1px solid var(--q-line); border-radius:var(--q-radius-card); }
.q-detail-panel .q-inline-box { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:8px; padding:10px; border:1px solid var(--q-line); border-radius:var(--q-radius); }
.q-detail-panel .q-fee-split, .q-detail-panel .q-row-actions, .q-detail-panel .q-field--wide { grid-column:1 / -1; }
.q-detail-head { margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--q-line); }
.q-detail-head p { margin:0; }
.q-detail-head .q-detail-amount { font-family:var(--q-mono); font-size:18px; font-weight:600; }
.q-detail-empty p { margin:0 0 4px; }

/* vista compatta */
html body #movements-table.q-compact-table .q-review-table td { padding:4px 8px; font-size:12.5px; }
html body #movements-table.q-compact-table .q-compact-hide { display:none !important; }
html body #movements-table.q-compact-table .q-inline-box { margin-top:4px; padding:6px 8px; gap:6px; }

/* modale ricerca conti */
html body .q-modal { position:fixed; inset:0; z-index:9998; padding:16px; overflow-y:auto; background:rgba(23,33,43,.6); }
.q-modal-box { max-width:1060px; margin:24px auto; padding:20px; background:var(--q-surface); color:var(--q-ink); border:1px solid var(--q-line); border-radius:var(--q-radius-card); }
.q-modal-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--q-line); }
.q-modal-head h2 { margin:2px 0; }
.q-modal-banner { margin-top:6px; padding:6px 10px; border-radius:var(--q-radius); background:var(--q-info-bg); font-size:13px; }
.q-modal-results { display:flex; flex-direction:column; gap:10px; max-height:62vh; overflow-y:auto; padding-right:4px; }

/* smartphone: ogni movimento è un blocco; data e importo sulla prima riga */
@media (max-width:900px) {
  html body #movements-table .q-review-table, html body #movements-table .q-review-table tbody, html body #movements-table .q-review-table tfoot { display:block; width:100%; }
  html body #movements-table .q-review-table thead { display:none; }
  html body #movements-table .q-review-table tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; padding:10px 12px;
    border:1px solid var(--q-line); border-radius:var(--q-radius-card); margin-bottom:8px; background:var(--q-surface); }
  html body #movements-table .q-review-table td, html body #movements-table .q-review-table tfoot th { display:block; width:auto !important; min-width:0 !important; padding:4px 0; border:0; background:transparent; text-align:left; }
  html body #movements-table .q-review-table td:empty { display:none; }
  html body #movements-table .q-review-table .q-col-date { grid-column:1; }
  html body #movements-table .q-review-table .q-col-out, html body #movements-table .q-review-table .q-col-in { grid-column:2; grid-row:1; text-align:right; font-size:15px; font-weight:600; }
  html body #movements-table .q-review-table .q-col-out::before, html body #movements-table .q-review-table .q-col-in::before {
    content:attr(data-label); display:block; font-family:var(--q-font); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--q-muted); }
  html body #movements-table .q-review-table .q-col-desc, html body #movements-table .q-review-table .q-col-match,
  html body #movements-table .q-review-table .q-col-decision, html body #movements-table .q-review-table td[colspan] { grid-column:1 / -1; }
  html body #movements-table .q-inline-box { grid-template-columns:minmax(0, 1fr); }
  .q-bulk-fields #bulk-partitario-input { width:100%; }
  html body #movements-table button { white-space:normal; }
}
@media (max-width:900px) {
  html body #movements-table .q-review-table tfoot .q-col-in { grid-row:2; }
}
html body #movements-table tr.q-row.q-row-just-saved td { background:var(--q-good-bg); transition:background-color .35s ease; }
/* testata pratica (.worktop): stessa intestazione delle altre pagine, niente blocco scuro */
html body .toolbar.worktop { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px;
  margin:4px 0 16px; padding:0; background:transparent; color:var(--q-ink); border-radius:0; border:0; box-shadow:none; }
html body .toolbar.worktop h1 { color:var(--q-ink); margin:2px 0 4px; }
html body .toolbar.worktop .eyebrow { color:var(--q-accent); }
html body .toolbar.worktop p, html body .toolbar.worktop .muted { color:var(--q-muted); }
html body .toolbar.worktop .button.secondary { background:var(--q-surface); border-color:var(--line-strong, #C7CCD2); color:var(--q-ink); }
html body .toolbar.worktop .button.secondary:hover { background:var(--q-paper); color:var(--q-ink); }

/* ---- 16. Collaudo v1: classi di servizio --------------------------- */
.q-icon { display:inline-block; vertical-align:middle; }
.q-nowrap { white-space:nowrap; }
.q-inline-form { display:inline; margin:0; }
html body .q-btn-danger, html body button.secondary.q-btn-danger { color:var(--q-danger) !important; border-color:var(--q-danger) !important; background:var(--q-surface) !important; }
html body .q-btn-danger:hover { background:var(--q-danger-bg) !important; }
.q-pre { max-width:520px; max-height:240px; overflow:auto; margin:6px 0 0; font-size:11.5px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- 17. Tema scuro: il vecchio tema blu notte non vince più ------ */
/* Le regole storiche usano «:root[data-theme=dark] …» (e !important): qui stessa forma
   con «body» in più, così valgono i token --q-* anche in scuro. */
:root[data-theme=dark] { --surface-2:var(--q-paper); --line-strong:color-mix(in srgb, var(--q-line) 60%, var(--q-muted)); }
:root[data-theme=dark] body .card { background:var(--q-surface); border-color:var(--q-line); }
:root[data-theme=dark] body input:not([type=checkbox]):not([type=radio]), :root[data-theme=dark] body textarea, :root[data-theme=dark] body select {
  background:var(--q-paper); color:var(--q-ink); border-color:var(--q-line); }
:root[data-theme=dark] body input[type=file]::file-selector-button { background:var(--q-surface); color:var(--q-ink); border-color:var(--q-line); }
:root[data-theme=dark] body label { color:var(--q-ink); }
:root[data-theme=dark] body .studio-nav a[aria-current] { border-left:0 !important; background:var(--q-accent-soft) !important; color:var(--q-accent) !important; }
:root[data-theme=dark] body .studio-sidebar .studio-nav a[aria-current] { color:#7FCDB7 !important; background:rgba(127,205,183,.13) !important; }
html body .studio-cobrand-badge, :root[data-theme=dark] body .studio-cobrand-badge {
  background:var(--q-surface) !important; border:1px solid var(--q-line) !important; box-shadow:none !important; }
:root[data-theme=dark] body .studio-sidebar .studio-cobrand-badge { background:transparent !important; border:1px solid #33414F !important; }
:root[data-theme=dark] body .suite-dropbox, :root[data-theme=dark] body .source-card, :root[data-theme=dark] body section.card.flow-section {
  background:var(--q-surface) !important; border-color:var(--q-line); box-shadow:none; }
:root[data-theme=dark] body .ai-learner-banner { background:var(--q-info-bg) !important; border-color:transparent !important; }
html body .context-bar { border-left:1px solid var(--q-line) !important; box-shadow:none; }
/* pulsante Menu sulla barra scura (sotto 1100 px): testo leggibile */
html body header.studio-topbar .mobile-menu-toggle, :root[data-theme=dark] body header.studio-topbar .mobile-menu-toggle {
  background:transparent !important; color:#F3F4F6 !important; border:1px solid #33414F !important; }

/* ---- 18. Tabella movimenti con pannello: solo l'essenziale in riga -- */
.q-review-split.is-panel tr.q-row:not(.is-selected) .q-row-links { display:none; }
.q-review-split.is-panel .q-col-decision .q-small { display:none; }
.q-review-split.is-panel .q-col-decision .q-partitario-trigger-btn { padding:2px 8px !important; font-size:12px !important; min-height:28px; }
html body .q-review-split.is-panel #movements-table .q-col-match, .q-review-split.is-panel .q-col-match { width:120px; }
.q-review-split.is-panel .q-col-desc { min-width:180px; }
/* etichette di stato anche quando la vecchia classe .badge è presente */
html body .badge.q-chip, :root[data-theme=dark] body .badge.q-chip { border:0 !important; border-radius:3px !important; padding:2px 8px !important; font-size:12px !important; font-weight:600 !important; box-shadow:none !important; }
html body .badge.q-chip--neutro, :root[data-theme=dark] body .badge.q-chip--neutro { background:var(--q-paper) !important; color:var(--q-muted) !important; border:1px solid var(--q-line) !important; }
html body .badge.q-chip--abbinato, :root[data-theme=dark] body .badge.q-chip--abbinato { background:var(--q-good-bg) !important; color:var(--q-good) !important; }
html body .badge.q-chip--proposto, :root[data-theme=dark] body .badge.q-chip--proposto { background:var(--q-info-bg) !important; color:var(--q-info) !important; }
html body .badge.q-chip--verificare, :root[data-theme=dark] body .badge.q-chip--verificare { background:var(--q-warn-bg) !important; color:var(--q-warn) !important; }
html body .badge.q-chip--errore, :root[data-theme=dark] body .badge.q-chip--errore { background:var(--q-danger-bg) !important; color:var(--q-danger) !important; }
html body #movements-table .q-reconciliation-status { padding:2px 8px !important; border-radius:3px !important; }
:root[data-theme=dark] body .badge { background:var(--q-paper); color:var(--q-ink); }
:root[data-theme=dark] body .badge.good { background:var(--q-good-bg); color:var(--q-good); }
:root[data-theme=dark] body .badge.warning { background:var(--q-warn-bg); color:var(--q-warn); }
html body .q-review-split.is-panel .q-review-table .q-col-match { display:none; }
.q-review-split.is-panel { grid-template-columns:minmax(0, 1fr) 380px; }
html body .q-review-split.is-panel #movements-table .q-col-decision, .q-review-split.is-panel .q-col-decision { width:auto; min-width:210px; }
.q-detail-match { margin-top:6px; }
.q-detail-match .helptext { margin:4px 0 0; font-size:12px; }
.q-review-split.is-panel .q-col-decision .q-decision-head small.muted { display:none; }
.q-backup-alert-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:1280px; margin:0 auto; padding:6px 16px; border-top:1px solid var(--q-line); background:var(--q-surface); color:var(--q-ink); font-size:12.5px; }

/* ==========================================================================
   Testata: selettore gruppo (superamministratore) e azioni tabella pratiche
   Registro di studio: solo variabili del design system, nessun colore nuovo.
   ========================================================================== */
html body header.studio-topbar .q-group-switch {
  display:flex; align-items:center; gap:6px; margin:0; min-width:0;
  padding:3px 4px 3px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
}
html body header.studio-topbar .q-group-switch-label {
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
html body header.studio-topbar .q-group-switch select {
  width:auto; min-width:0; max-width:220px; height:32px; min-height:32px; margin:0; padding:0 26px 0 8px;
  border:0; background-color:transparent; color:var(--ink); font-size:13px; font-weight:600; text-overflow:ellipsis;
}
html body header.studio-topbar .q-group-switch button {
  height:30px; min-height:30px; margin:0; padding:0 12px !important; font-size:12px; white-space:nowrap; width:auto;
}
.dashboard-cases-table th.q-col-actions,
.dashboard-cases-table td[data-label="Azioni"] { width:1%; min-width:96px; white-space:nowrap; }
html body .dashboard-cases-table button.q-row-delete {
  width:auto; min-height:32px; padding:.3rem .75rem !important; font-size:.8rem; white-space:nowrap; word-break:normal;
}
@media (max-width:600px) {
  html body header.studio-topbar .q-group-switch { grid-column:1 / -1; width:100%; max-width:100%; box-sizing:border-box; }
  html body header.studio-topbar .q-group-switch select { flex:1 1 0; width:0; max-width:none; }
  html body header.studio-topbar .q-group-switch button { width:auto !important; min-width:0; flex:0 0 auto; }
  .dashboard-cases-table td[data-label="Azioni"] { width:auto; min-width:0; }
  html body .dashboard-cases-table button.q-row-delete { display:inline-flex; align-items:center; justify-content:center; width:auto !important; min-width:96px; height:auto; }
}

/* ==========================================================================
   T13 · Segnala un problema e avviso di risoluzione
   ========================================================================== */
.q-problem-report-section { margin:24px 0 8px; }
.q-problem-report-details { padding:10px 14px; }
.q-problem-report-summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer; list-style:none; }
.q-problem-report-summary::-webkit-details-marker { display:none; }
.q-problem-report-form { margin-top:12px; padding-top:12px; border-top:1px solid var(--q-line-soft); }
.q-problem-report-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:10px; }
.q-problem-report-grid textarea { width:100%; }
.q-problem-admin-form select, .q-problem-admin-form input[type="text"] { width:auto; min-width:140px; }
.q-problem-resolved-bar { background:var(--q-good-bg); color:var(--q-ink); }
@media (max-width:768px) {
  .q-problem-report-grid { grid-template-columns:minmax(0, 1fr); }
}