/* ═══════════════════════════════════════════════════════════
   SUW Agency HUB — design system (dal handoff approvato)
   Font: Hanken Grotesk + JetBrains Mono · Icone: Phosphor
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f8fafc; --border:#e7eaf0; --border-strong:#d6dbe4;
  --text:#0f141b; --text-2:#5a6573; --text-3:#919cab;
  --accent:#2a6fdb; --accent-2:#1e5cc0; --accent-weak:#eaf1fd;
  --green:#16915a; --green-weak:#e4f5ec; --amber:#b87708; --amber-weak:#fbf1dd; --red:#d23f37; --red-weak:#fbe9e7;
  --shadow:0 1px 2px rgba(15,20,27,.04),0 2px 6px rgba(15,20,27,.05);
  --shadow-lg:0 8px 30px rgba(15,20,27,.10);
  --ui:'Hanken Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
.theme-dark{
  --bg:#0c0e12; --surface:#14171d; --surface-2:#1a1e25; --border:#262b34; --border-strong:#333a45;
  --text:#e9edf3; --text-2:#98a2b2; --text-3:#69727f;
  --accent:#4d8df0; --accent-2:#6aa0f4; --accent-weak:#16243a;
  --green:#34c07d; --green-weak:#11241c; --amber:#e0a43a; --amber-weak:#2a2113; --red:#f06a60; --red-weak:#2c1714;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.35); --shadow-lg:0 12px 36px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:13.5px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:var(--mono);}

/* ---------- Layout ---------- */
.suw-app{display:flex;min-height:100vh;background:var(--bg);color:var(--text);}
.suw-sidebar{width:252px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;z-index:1030;}
.suw-brand{display:flex;align-items:center;gap:11px;padding:18px 20px 16px;border-bottom:1px solid var(--border);}
.suw-brand:hover{text-decoration:none;}
.suw-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;box-shadow:0 4px 10px rgba(42,111,219,.35);flex-shrink:0;}
.suw-brand-name{font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:var(--text);line-height:1.15;}
.suw-brand-sub{font-size:11.5px;color:var(--text-3);font-weight:500;}

.suw-nav{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:3px;}
.suw-nav-group{font-size:10.5px;font-weight:700;color:var(--text-3);letter-spacing:.07em;padding:14px 10px 4px;}
.suw-nav-group:first-child{padding-top:6px;}
.suw-nav-item{display:flex;align-items:center;gap:11px;width:100%;border:none;cursor:pointer;text-align:left;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:500;background:transparent;color:var(--text-2);transition:background .12s;text-decoration:none;}
.suw-nav-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}
.suw-nav-item.active{background:var(--accent-weak);color:var(--accent);font-weight:700;}
.suw-nav-item.disabled{opacity:.45;cursor:default;pointer-events:none;}
.suw-nav-item i{font-size:18px;width:18px;}
.suw-nav-item .lbl{flex:1;}
.suw-badge{font-family:var(--mono);font-size:10.5px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-2);}
.suw-badge.red{background:var(--red-weak);color:var(--red);}
.suw-badge.amber{background:var(--amber-weak);color:var(--amber);}
.suw-badge.soon{font-family:var(--ui);font-size:9.5px;letter-spacing:.04em;}

.suw-userbox{padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.suw-avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;color:var(--text-2);flex-shrink:0;}
.suw-theme-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.suw-theme-btn:hover{background:var(--accent-weak);color:var(--accent);border-color:var(--accent);}

.suw-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.suw-topbar{display:flex;align-items:center;gap:16px;padding:15px 28px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;}
.suw-topbar h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.suw-topbar .sub{margin:2px 0 0;font-size:12.5px;color:var(--text-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.suw-search{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;flex:0 1 280px;min-width:120px;}
.suw-search input{border:none;background:transparent;outline:none;color:var(--text);font-size:13px;width:100%;font-family:var(--ui);}
.suw-content{flex:1;overflow-y:auto;padding:24px 28px;}

@media (max-width:992px){
  .suw-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg);}
  .suw-sidebar.show{transform:none;}
  .suw-main{height:auto;overflow:visible;}
  .suw-content{padding:16px;}
  .suw-hamburger{display:flex!important;}
}
.suw-hamburger{display:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;align-items:center;justify-content:center;font-size:18px;}

/* ---------- Pills di stato ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px;line-height:1.5;}
.pill.green{background:var(--green-weak);color:var(--green);}
.pill.amber{background:var(--amber-weak);color:var(--amber);}
.pill.red{background:var(--red-weak);color:var(--red);}
.pill.gray{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);}
.pill.blue{background:var(--accent-weak);color:var(--accent);}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);padding:16px 18px;}
.kpi-card .k-label{font-size:11.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px;}
.kpi-card .k-value{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:6px;letter-spacing:-.02em;}
.kpi-card .k-foot{font-size:11.5px;color:var(--text-3);margin-top:3px;}

/* ---------- Adattamento Bootstrap al design system ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);color:var(--text);}
.card-header{background:var(--surface)!important;border-bottom:1px solid var(--border)!important;border-radius:13px 13px 0 0!important;font-weight:700;padding:14px 18px;color:var(--text);}
.card-body{padding:16px 18px;}
.btn{border-radius:9px;font-weight:600;font-size:13px;font-family:var(--ui);}
.btn-primary{background:var(--accent);border-color:var(--accent);}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-2);border-color:var(--accent-2);}
.btn-success{background:var(--green);border-color:var(--green);}
.btn-outline-primary{color:var(--accent);border-color:var(--accent);}
.btn-outline-primary:hover{background:var(--accent);border-color:var(--accent);}
.btn-outline-secondary{color:var(--text-2);border-color:var(--border-strong);}
.btn-outline-secondary:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong);}
.form-control,.form-select{background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;color:var(--text);font-size:13px;}
.form-control:focus,.form-select:focus{background:var(--surface);color:var(--text);border-color:var(--accent);box-shadow:0 0 0 .2rem var(--accent-weak);}
.form-control::placeholder{color:var(--text-3);}
.table{color:var(--text);--bs-table-bg:transparent;--bs-table-hover-bg:var(--surface-2);--bs-table-hover-color:var(--text);--bs-table-striped-bg:var(--surface-2);margin-bottom:0;}
.table>thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;background:var(--surface-2);border-bottom:1px solid var(--border);}
.table>tbody td,.table>tbody th{border-color:var(--border);padding-top:.7rem;padding-bottom:.7rem;vertical-align:middle;}
.badge{font-weight:700;border-radius:20px;padding:.35em .7em;font-size:11px;}
.badge.bg-success{background:var(--green-weak)!important;color:var(--green)!important;}
.badge.bg-danger{background:var(--red-weak)!important;color:var(--red)!important;}
.badge.bg-warning{background:var(--amber-weak)!important;color:var(--amber)!important;}
.badge.bg-primary{background:var(--accent-weak)!important;color:var(--accent)!important;}
.badge.bg-secondary{background:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--border);}
.badge.bg-light{background:var(--surface-2)!important;color:var(--text-2)!important;border:1px solid var(--border);}
.badge.bg-info{background:var(--accent-weak)!important;color:var(--accent)!important;}
.badge.bg-dark{background:var(--border-strong)!important;color:var(--text)!important;}
.alert{border-radius:12px;border:1px solid var(--border);}
.alert-success{background:var(--green-weak);color:var(--green);border-color:transparent;}
.alert-danger{background:var(--red-weak);color:var(--red);border-color:transparent;}
.alert-warning{background:var(--amber-weak);color:var(--amber);border-color:transparent;}
.alert-info,.alert-light{background:var(--accent-weak);color:var(--text);border-color:transparent;}
.text-muted{color:var(--text-3)!important;}
.text-success{color:var(--green)!important;}
.text-danger{color:var(--red)!important;}
hr{border-color:var(--border);opacity:1;}
.modal-content,.dropdown-menu{background:var(--surface);color:var(--text);border:1px solid var(--border);}
.page-head h1{font-weight:800;letter-spacing:-.02em;font-size:1.5rem;margin:0;}
.page-head .sub{color:var(--text-3);font-size:.85rem;}
h1.h3,h2,h5,h6{font-weight:800;letter-spacing:-.01em;}

/* dark-mode: testo dentro componenti bootstrap */
.theme-dark .card,.theme-dark .table{color:var(--text);}
.theme-dark .form-check-input{background-color:var(--surface-2);border-color:var(--border-strong);}
.theme-dark .btn-outline-danger{color:var(--red);border-color:var(--red);}

/* kpi legacy della vecchia dashboard (compat) */
.kpi{display:flex;align-items:center;gap:15px;}
.kpi .kpi-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto;background:var(--accent-weak);color:var(--accent);}
.kpi .kpi-val{font-family:var(--mono);font-size:1.45rem;font-weight:600;line-height:1.1;}
.kpi-i-indigo{background:var(--accent-weak)!important;color:var(--accent)!important;}
.kpi-i-green{background:var(--green-weak)!important;color:var(--green)!important;}
.kpi-i-amber{background:var(--amber-weak)!important;color:var(--amber)!important;}
.kpi-i-blue{background:var(--accent-weak)!important;color:var(--accent)!important;}
.kpi-panel{display:flex;flex-direction:row;align-items:center;gap:22px;}
.kpi-panel .panel-icon{width:64px;height:64px;border-radius:17px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:1.7rem;background:var(--accent-weak);color:var(--accent);}
.kpi-panel .panel-icon.green{background:var(--green-weak);color:var(--green);}
.kpi-panel .metrics{display:flex;gap:38px;flex-wrap:wrap;}
.metric .m-label{font-size:.78rem;color:var(--text-3);margin-bottom:2px;}
.metric .m-val{font-family:var(--mono);font-size:1.4rem;font-weight:600;line-height:1.05;}

/* ---------- Tab scheda (stile prototipo) ---------- */
.suw-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;}
.suw-tabs .suw-tab{display:flex;align-items:center;gap:7px;padding:10px 14px;border:none;background:transparent;color:var(--text-2);font-weight:500;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-family:var(--ui);}
.suw-tabs .suw-tab i{font-size:16px;}
.suw-tabs .suw-tab:hover{color:var(--text);}
.suw-tabs .suw-tab.active{color:var(--accent);font-weight:700;border-bottom-color:var(--accent);}
.suw-stat{text-align:center;padding:0 14px;border-right:1px solid var(--border);}
.suw-stat:last-child{border-right:none;}
.suw-stat .v{font-family:var(--mono);font-weight:600;font-size:17px;}
.suw-stat .l{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;}