/* =====================================================================
   EURID .eu Manager - Colossus house style
   ===================================================================== */
:root{
    --bg:#f4f6f9; --card:#ffffff; --ink:#1c2733; --muted:#6b7a8d;
    --line:#e2e8f0; --line2:#eef2f6;
    --brand:#1a56db; --brand-ink:#0b3aa3;
    --ok:#0f9d58; --ok-bg:#e6f6ee;
    --warn:#c77700; --warn-bg:#fdf3e2;
    --err:#d93025; --err-bg:#fce8e6;
    --info:#1a56db; --info-bg:#e8effd;
    --radius:10px; --shadow:0 1px 3px rgba(20,40,70,.08),0 1px 2px rgba(20,40,70,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* --- Topbar --- */
.topbar{background:#0f1b2d; color:#e7edf5; box-shadow:var(--shadow); position:sticky; top:0; z-index:50}
.topbar-inner{max-width:1600px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:6px 22px; min-height:56px}
.brand{color:#fff; font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; white-space:nowrap; flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.25)}
.brand-sub{color:#8fb0ff;font-weight:600}
.mainnav{display:flex; gap:1px; flex:1 1 auto; min-width:0; flex-wrap:wrap}
.mainnav a{color:#b8c4d4; padding:7px 10px; border-radius:7px; font-weight:500; white-space:nowrap; font-size:13.5px}
.mainnav a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.mainnav a.active{background:var(--brand); color:#fff}
.topbar-right{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.env-form{margin:0}
.env-select{background:#1c3050; color:#e7edf5; border:1px solid #2b456b; border-radius:7px; padding:5px 8px; font-weight:600; cursor:pointer}
.env-select.env-production{border-color:#2b6b45; color:#8ff0bb}
.env-select.env-ote{border-color:#8a6d2b; color:#ffd98a}
.user-chip{color:#c5d1e0; font-size:13px}
.role{font-size:11px; padding:1px 6px; border-radius:5px; text-transform:uppercase; font-weight:700}
.role-admin{background:#3b1e6b;color:#d9c4ff}
.role-operator{background:#0b3a52;color:#9fe1ff}
.role-viewer{background:#334155;color:#cbd5e1}
.btn-logout{color:#ffb4ac; border:1px solid #55343a; padding:5px 12px; border-radius:7px; font-weight:600}
.btn-logout:hover{background:#3a2429; text-decoration:none}

/* --- Layout --- */
.page-body{max-width:1240px; margin:24px auto; padding:0 20px 40px}
.fade-in{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.page-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 18px; gap:16px; flex-wrap:wrap}
.page-head h1{font-size:22px; margin:0}
.page-head .sub{color:var(--muted); font-size:13px; margin-top:2px}

/* --- Card --- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:20px}
.card h2{font-size:16px; margin:0 0 14px}
.card h3{font-size:14px; margin:18px 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}

/* --- Grid stats --- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:22px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.stat .n{font-size:28px; font-weight:700; line-height:1}
.stat .l{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-top:6px}
.stat.accent .n{color:var(--brand)}
.stat.warn .n{color:var(--warn)}
.stat.err .n{color:var(--err)}

/* --- Tabelle --- */
table.grid{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
table.grid th{background:#f7f9fc; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line)}
table.grid td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:middle}
table.grid tr:last-child td{border-bottom:none}
table.grid tr:hover td{background:#fafcfe}
table.grid td.mono,table.grid td .mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:13px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.empty{padding:40px; text-align:center; color:var(--muted)}

/* --- Badge --- */
.badge{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.02em}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-warn{background:var(--warn-bg); color:var(--warn)}
.badge-err{background:var(--err-bg); color:var(--err)}
.badge-info{background:var(--info-bg); color:var(--info)}
.badge-neutral{background:#eef2f6; color:#64748b}

/* --- Form --- */
.form-row{margin-bottom:14px}
.form-row label{display:block; font-weight:600; margin-bottom:5px; font-size:13px}
.form-row .hint{color:var(--muted); font-size:12px; margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
    width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,86,219,.12)}
textarea{min-height:80px; resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1/-1}
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 18px}
fieldset legend{font-weight:700; padding:0 8px; color:var(--brand)}
.checkbox-row{display:flex; align-items:center; gap:8px}
.checkbox-row input{width:auto}

/* --- Bottoni --- */
.btn{display:inline-block; background:var(--brand); color:#fff; border:none; padding:9px 16px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none}
.btn:hover{background:var(--brand-ink); text-decoration:none}
.btn-sm{padding:6px 11px; font-size:13px}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:#f7f9fc}
.btn-danger{background:var(--err)}
.btn-danger:hover{background:#b3261e}
.btn-ok{background:var(--ok)}
.btn-ok:hover{background:#0b7c46}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.actions{display:flex; gap:6px; flex-wrap:wrap}

/* --- Flash --- */
.flash{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-weight:500; border:1px solid transparent}
.flash-success{background:var(--ok-bg); color:var(--ok); border-color:#bfe6cf}
.flash-error{background:var(--err-bg); color:var(--err); border-color:#f5c6c2}
.flash-info{background:var(--info-bg); color:var(--info); border-color:#c7d9fb}
.flash-warn{background:var(--warn-bg); color:var(--warn); border-color:#f0dcb0}

/* --- Login --- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f1b2d,#16305a)}
.login-card{background:#fff; border-radius:14px; padding:34px; width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card h1{font-size:20px; margin:0 0 4px}
.login-card .sub{color:var(--muted); margin-bottom:22px; font-size:13px}
.login-brand{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-weight:700;font-size:18px}

/* --- Definizioni chiave/valore --- */
.kv{display:grid; grid-template-columns:180px 1fr; gap:8px 16px}
.kv dt{color:var(--muted); font-weight:600}
.kv dd{margin:0}

/* --- QR / 2FA --- */
.qr-box{text-align:center; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:inline-block}
.secret-code{font-family:ui-monospace,monospace; font-size:15px; letter-spacing:.1em; background:#f1f5f9; padding:8px 12px; border-radius:6px; display:inline-block; margin:8px 0; user-select:all}

/* --- Footer --- */
.app-footer{max-width:1240px; margin:0 auto; padding:20px; color:var(--muted); font-size:12px; text-align:center; border-top:1px solid var(--line)}
.app-footer .sep{margin:0 6px; color:#cbd5e1}

/* --- Utility --- */
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.text-muted{color:var(--muted)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.pill-env{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.pill-env.production{background:var(--ok-bg);color:var(--ok)}
.pill-env.ote{background:var(--warn-bg);color:var(--warn)}
.tag{display:inline-block;background:#eef2f6;color:#475569;padding:1px 7px;border-radius:5px;font-size:12px;margin:1px}
pre.xml{background:#0f1b2d;color:#c8d6e6;padding:14px;border-radius:8px;overflow:auto;font-size:12px;max-height:340px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.kv{grid-template-columns:1fr}}