:root{
  --bg:#0b1220; --panel:#ffffff; --muted:#6b7688; --line:#e9eef5;
  --brand:#3b5bff; --brand-d:#2f49d6; --ok:#16a34a; --danger:#e0463b;
  --soft:#eef2f8; --ink:#111827; --ink-soft:#374151;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 8px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04);
  --radius:16px; --radius-sm:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(59,91,255,.06), transparent 60%),
    var(--soft);
  color:var(--ink);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* topbar */
.topbar{background:linear-gradient(180deg,#101b33,#0b1220);color:#fff;
  padding:0 26px;display:flex;align-items:center;height:62px;gap:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 6px 24px rgba(11,18,32,.22);
  position:sticky;top:0;z-index:50}
.topbar .brand{font-weight:700;letter-spacing:-.015em;font-size:15px;color:#fff;
  display:flex;align-items:center;gap:11px;white-space:nowrap;text-decoration:none}
.topbar .brand:hover{text-decoration:none}
.topbar .brand-logo{height:34px;width:auto;display:block;
  background:#fff;border-radius:8px;padding:4px 9px}
.topbar .brand-name{font-weight:700}
@media (max-width:640px){
  .topbar{padding:0 14px;gap:12px}
  .topbar .brand-name{display:none}
  .topbar .brand-logo{height:30px}
}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{color:#a7b2c4;font-size:14px;font-weight:500;padding:8px 13px;border-radius:9px;
  transition:background .15s,color .15s}
.topbar nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.07)}
.topbar nav a.active{color:#fff;background:rgba(91,118,255,.22);box-shadow:inset 0 0 0 1px rgba(138,160,255,.25)}
.topbar .who{color:#cbd5e1;font-size:13px;font-weight:500}
.topbar a[href="logout.php"]{color:#9aa6ba !important;font-size:13px;font-weight:500}

/* layout */
.wrap{max-width:1320px;margin:30px auto;padding:0 26px}
h1{font-size:25px;font-weight:750;letter-spacing:-.025em;margin:0 0 20px;color:var(--ink)}
h2{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:26px 0 12px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:20px;overflow-x:auto;box-shadow:var(--shadow-sm)}
/* card che contiene una tabella: vai a filo per un look più pulito */
.card:has(table){padding:7px}

/* tables */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{text-align:left;padding:12px 10px;vertical-align:middle}
/* colonna email compatta: tronca con "…" (indirizzo completo nel tooltip) */
td.col-email{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;background:#fbfcfe;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1}
thead th:first-child{border-top-left-radius:12px}
thead th:last-child{border-top-right-radius:12px}
tbody td{border-bottom:1px solid #eff3f8}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f7f9fe}
tbody tr:last-child td{border-bottom:none}
tbody td strong{font-weight:650;color:var(--ink)}

/* forms */
label{display:block;font-size:13px;color:var(--ink-soft);font-weight:600;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:11px 13px;border:1px solid #d6deea;border-radius:var(--radius-sm);
  font-size:14px;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#9aa6b6}
input:focus,select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(59,91,255,.13)}
.password-field{position:relative}
.password-field input{padding-right:48px}
.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:17px;line-height:1}
.password-toggle:hover,.password-toggle:focus-visible{background:#eef2f8;outline:none}
.row{display:flex;gap:18px;flex-wrap:wrap}
.row>div{flex:1;min-width:220px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--brand);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:10px 17px;font-size:14px;cursor:pointer;font-weight:600;line-height:1;
  box-shadow:0 1px 2px rgba(59,91,255,.3);
  transition:background .15s,box-shadow .15s,transform .04s}
.btn:hover{background:var(--brand-d);text-decoration:none;box-shadow:0 4px 12px rgba(59,91,255,.32)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#fff;color:var(--ink-soft);border:1px solid #d6deea;box-shadow:var(--shadow-xs)}
.btn.secondary:hover{background:#f6f8fc;border-color:#c4cedd;box-shadow:var(--shadow-xs)}
.btn.danger{background:var(--danger);box-shadow:0 1px 2px rgba(224,70,59,.28)}
.btn.danger:hover{background:#c23a30}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}

/* actions toolbar */
.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
h1+.actions,.actions{margin-bottom:2px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.45;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.badge.on{background:#e7f7ed;color:#15803d;border-color:#bfe9cd}
.badge.off{background:#fdeaea;color:#c0362c;border-color:#f6cfcc}
.badge.lvl{background:#e8ecff;color:#3a48c8;border-color:#cdd5ff}
.badge.none{background:#f1f4f9;color:#5b6675;border-color:#e3e9f1}

/* misc */
.muted{color:var(--muted)}
.flash,.error{padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:18px;
  box-shadow:var(--shadow-xs);font-weight:550;display:flex;align-items:center;gap:9px}
.flash{background:#e9f9f0;border:1px solid #b6e8c8;color:#0f6b3d}
.error{background:#fdeeee;border:1px solid #f6cdca;color:#9e2820}
.login-box{max-width:400px;margin:9vh auto}
.login-box .card{padding:26px}
.login-logo{text-align:center;margin-bottom:18px}
.login-logo img{height:54px;width:auto;max-width:100%}
code{background:#f2f5fa;padding:3px 8px;border-radius:7px;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#3a4456;
  border:1px solid #e6ecf4}
.help{font-size:13px;color:var(--muted);margin-top:6px}


/* Fix rendering celle azioni: display:flex su un <td> rompe il layout della
   cella (i pulsanti non venivano dipinti finche un hover forzava il repaint).
   La cella torna table-cell; le barre azioni in cima (div.actions) restano flex. */
td.actions { display: table-cell !important; white-space: nowrap; vertical-align: middle; }
td.actions > * { vertical-align: middle; }
td.actions > * + * { margin-left: 9px; }

/* Nell'elenco utenti i comandi restano visibili anche quando la tabella e piu
   larga della finestra. Lo scorrimento orizzontale continua a funzionare per
   consultare le altre colonne senza nascondere Riepilogo, Gestisci ed Elimina. */
#usersTable th:last-child,
#usersTable td.actions {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -12px 0 18px -18px rgba(15, 23, 42, .5);
}
#usersTable th:last-child { z-index: 3; min-width: 276px; }
#usersTable td.actions { z-index: 2; }

/* 20261014c-gdm-coordinato */
/* GDM coordinated design tokens. Additional screen-only theme; preserves print/PDF. */
@font-face{font-family:GDMOutfit;src:url('./gdm-outfit.woff2') format('woff2');font-weight:100 900;font-display:swap}
@media screen{
:root,html.tema-sf{--gdm-blue:#134d8d;--gdm-red:#e3161b;--gdm-red-hover:#ad1215;--gdm-paper:#f5f7f9;--gdm-ink:#202020;--gdm-muted:#626a73;--gdm-line:#dce2e8;--primary:#134d8d;--primary-dark:#103e73;--brand:#134d8d;--brand-d:#103e73;--accent:#134d8d;--navy:#134d8d;--navy-2:#103e73;--blue:#134d8d;--blue-soft:#eef3f9;--red:#e3161b;--ink:#202020;--muted:#626a73;--line:#dce2e8;--canvas:#f5f7f9;--sfondo:#f5f7f9;--superficie:#fff;--bordo:#dce2e8;--testo:#202020;--testo-tenue:#626a73;--tenue:#626a73;--primario:#134d8d;--primario-alto:#103e73;--blu:#134d8d;--blu2:#103e73;--blu3:#134d8d;--sf-brand:#134d8d;--sf-brand-dark:#103e73;--sf-background:#f5f7f9;--raggio:6px;--btn-r:5px}
body,button,input,select,textarea{font-family:GDMOutfit,Arial,sans-serif!important}
body{color:#202020;-webkit-text-size-adjust:100%}
:is(header,.topbar,.app-header,.site-header,.navbar,.testata,.header-bar,.sf-topbar,.gdm-strip){background:#134d8d!important;color:#fff;border-top:4px solid #e3161b;box-shadow:none!important}
header :is(h1,h2,h3,p,small,.title,.brand-name){color:#fff}
:is(.topbar,.app-header,.site-header,.navbar,.testata,.header-bar,.sf-topbar) :is(h1,h2,.title,.brand-name,.brand-product strong){color:#fff}
:is(.topbar,.app-header,.navbar,.testata) :is(.muted,.subtitle,.brand-product small){color:#e2ecf8}
:is(.topbar,.app-header,.navbar,.testata,.gdm-strip,header.top) :is(a,button){color:#fff}
:is(.sidebar,.side-nav){background:#eef3f9;color:#134d8d;border-color:#dce2e8}
:is(.sidebar,.side-nav) :is(a,.nav-link,.menu-item){color:#134d8d}
:is(.sidebar,.side-nav) :is(a.active,.nav-link.active,.menu-item.active){background:#d5e4f6;border-left:3px solid #e3161b;color:#134d8d}
:is(.page-title,.page-head h1,.page-header h1,.panel-head h2,main>h1,.content>h1){color:#134d8d;font-weight:550}
:is(.btn-primary,.button-primary,.primary-button,button.primary,a.primary,.btn.pri,.top-btn.primary){background:#e3161b!important;border-color:#e3161b!important;color:#fff!important;border-radius:5px;min-height:44px}
:is(.btn-primary,.button-primary,.primary-button,button.primary,a.primary,.btn.pri):hover{background:#ad1215!important;border-color:#ad1215!important}
:is(.btn-secondary,.secondary-button){background:#fff;color:#134d8d;border:1px solid #b9c9dc;border-radius:5px;min-height:44px}
:is(.card,.panel,.metric-card){border-color:#dce2e8;border-radius:6px}
:is(.table-responsive,.table-wrap,.table-wrapper,.comparison-wrap){overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
:is(input,select,textarea):focus-visible{outline:2px solid #134d8d;outline-offset:2px}
:is(button,a):focus-visible{outline:3px solid #134d8d;outline-offset:3px}
@media(max-width:700px){body{font-size:15px}input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px!important;min-height:44px;max-width:100%}:is(.btn,.button,.btn-primary,.primary-button,.secondary-button,.icon-button){min-height:44px}:is(.topbar,.app-header,.navbar,.testata-riga){gap:10px;max-width:100%}:is(.page-head,.page-header,.toolbar,.filter-bar){flex-wrap:wrap;gap:12px}:is(.page-head,.page-header) h1{font-size:27px;line-height:1.2}:is(.modal,.dialog,dialog){max-width:calc(100vw - 24px)}:is(.form-grid,.row3){grid-template-columns:minmax(0,1fr)}:is(.toolbar,.filter-bar)>input{min-width:0;flex:1 1 100%}:is(.sidebar,.side-nav){max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:700px){.login-card .brand{flex-wrap:wrap;justify-content:center}.login-card .brand-logo{max-width:100%;height:auto;max-height:54px}.testata-riga{flex-wrap:wrap}.top-in{flex-wrap:wrap;gap:10px}.top-in h1{min-width:0;flex:1 1 120px}.top-in .who{margin-left:auto}.app:has(>.side){flex-direction:column}.app>.side{position:static;width:100%;max-width:100%;height:auto}.app>.side .brand{padding:12px;flex-direction:row;justify-content:flex-start;text-align:left}.app>.side .brand-logo{width:150px}.app>.side nav{flex-direction:row;overflow-x:auto;flex-wrap:nowrap}.app>.side nav a{white-space:nowrap;flex-shrink:0}.app>.side+.main{margin-left:0;min-width:0;width:100%}.app>.side+.main .content{padding:18px 14px}.app>.side+.main .top{padding:14px}.login-card form,.login-card .field,.login-card .pw{min-width:0;max-width:100%}}
@media(max-width:700px){.riga-strumenti,.strumenti-destra{min-width:0;max-width:100%;flex-wrap:wrap}.riga-strumenti>*{max-width:100%;min-width:0}.strumenti-destra>*{max-width:100%}.settimana{max-width:100%}.settimana>span{min-width:80px}.testata-riga>div{min-width:0}.testata-riga>.utente{margin-left:auto}}
:is(.topbar,.app-header,.navbar,.testata,.gdm-strip,header.top) :is(.btn-secondary,.secondary-button,.btn-outline){color:#134d8d}
}
