/* Cara.Hub: stesso linguaggio visivo della dashboard React (frontend/src/styles/index.css).
   Token su :root; il tema scuro segue prefers-color-scheme oppure data-theme (impostato da theme.js). */

/* Inter (variabile, latin) auto-ospitato: SIL OFL 1.1, licenza in wwwroot/fonts/OFL.txt.
   Stessa famiglia del template satnaing/shadcn-admin. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-latin.woff2") format("woff2");
}

:root {
    color-scheme: light;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Superfici e testo: token del template satnaing/shadcn-admin (stessi valori della console React). */
    --bg: oklch(1 0 0);
    --surface: oklch(1 0 0);
    --surface-subtle: oklch(0.968 0.007 247.896);
    --input-bg: oklch(1 0 0);
    --text: oklch(0.129 0.042 264.695);
    --muted: oklch(0.554 0.046 257.417);
    --muted-strong: oklch(0.38 0.03 265.755);
    --line: oklch(0.929 0.013 255.508);
    --line-strong: oklch(0.86 0.015 255.508);
    --link: oklch(0.48 0.17 262);
    --ring: oklch(0.704 0.04 256.788);

    /* Azioni */
    --primary: oklch(0.208 0.042 265.755);
    --primary-text: oklch(0.984 0.003 247.858);
    --secondary-text: oklch(0.208 0.042 265.755);

    /* Stati */
    --danger: oklch(0.577 0.245 27.325);
    --danger-fg: oklch(1 0 0);
    --danger-bg: oklch(0.955 0.03 27);
    --ok: oklch(0.45 0.12 155);
    --ok-bg: oklch(0.96 0.03 155);
    --warn: oklch(0.45 0.1 75);
    --warn-bg: oklch(0.96 0.05 90);

    /* Forma: radius del template (10px); sm e lg come scala Tailwind del template. */
    --radius-sm: 0.375rem;
    --radius: 0.625rem;
    --radius-lg: 0.625rem;
    --shadow-card: 0 1px 2px oklch(0 0 0 / 0.06);

    /* Spaziature */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

/* Alias con i nomi dei token del template (come in frontend/src/styles/index.css): stessi valori, nessuna regola cambiata.
   Il tema scuro redefinisce le variabili base, quindi gli alias si aggiornano da soli. */
:root {
    --background: var(--bg);
    --foreground: var(--text);
    --card: var(--surface);
    --muted-foreground: var(--muted);
    --border: var(--line);
    --input: var(--input-bg);
    --primary-foreground: var(--primary-text);
    --destructive: var(--danger);
    --destructive-foreground: var(--danger-fg);
    --success: var(--ok);
    --warning: var(--warn);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: oklch(0.129 0.042 264.695);
    --surface: oklch(0.14 0.04 259.21);
    --surface-subtle: oklch(0.279 0.041 260.031);
    --input-bg: oklch(0.14 0.04 259.21);
    --text: oklch(0.984 0.003 247.858);
    --muted: oklch(0.704 0.04 256.788);
    --muted-strong: oklch(0.85 0.03 256.788);
    --line: oklch(1 0 0 / 10%);
    --line-strong: oklch(1 0 0 / 15%);
    --link: oklch(0.75 0.13 262);
    --ring: oklch(0.551 0.027 264.364);
    --primary: oklch(0.929 0.013 255.508);
    --primary-text: oklch(0.208 0.042 265.755);
    --secondary-text: oklch(0.984 0.003 247.858);
    --danger: oklch(0.704 0.191 22.216);
    --danger-fg: oklch(0.129 0.042 264.695);
    --danger-bg: oklch(0.28 0.06 25);
    --ok: oklch(0.85 0.15 155);
    --ok-bg: oklch(0.3 0.06 155);
    --warn: oklch(0.86 0.14 85);
    --warn-bg: oklch(0.3 0.06 75);
    --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: oklch(0.129 0.042 264.695);
        --surface: oklch(0.14 0.04 259.21);
        --surface-subtle: oklch(0.279 0.041 260.031);
        --input-bg: oklch(0.14 0.04 259.21);
        --text: oklch(0.984 0.003 247.858);
        --muted: oklch(0.704 0.04 256.788);
        --muted-strong: oklch(0.85 0.03 256.788);
        --line: oklch(1 0 0 / 10%);
        --line-strong: oklch(1 0 0 / 15%);
        --link: oklch(0.75 0.13 262);
        --ring: oklch(0.551 0.027 264.364);
        --primary: oklch(0.929 0.013 255.508);
        --primary-text: oklch(0.208 0.042 265.755);
        --secondary-text: oklch(0.984 0.003 247.858);
        --danger: oklch(0.704 0.191 22.216);
        --danger-fg: oklch(0.129 0.042 264.695);
        --danger-bg: oklch(0.28 0.06 25);
        --ok: oklch(0.85 0.15 155);
        --ok-bg: oklch(0.3 0.06 155);
        --warn: oklch(0.86 0.14 85);
        --warn-bg: oklch(0.3 0.06 75);
        --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Intestazione e navigazione */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.topbar nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.topbar nav a {
    color: var(--muted-strong);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}
.topbar nav a:hover { color: var(--text); background: var(--surface-subtle); }
.topbar nav a[aria-current="page"] { color: var(--text); font-weight: 600; background: var(--surface-subtle); }

.controls { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

main {
    min-width: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

/* Titoli e testo */
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-3); }
a { color: var(--link); text-underline-offset: 3px; }
small { font-size: 0.875rem; }

.muted { color: var(--muted); }
.page-actions { margin: 0 0 var(--space-4); }

/* Card e sezioni */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-card);
    min-width: 0;
}
.card > :last-child { margin-bottom: 0; }
.card.narrow { max-width: 420px; margin: var(--space-6) auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* Form */
.grid-form {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    align-items: end;
}
.grid-form > .form-actions { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
label > small { color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
label.inline { flex-direction: row; align-items: center; gap: var(--space-2); font-size: 1rem; font-weight: 400; }

input, select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    min-height: 2.5rem;
    min-width: 0;
}
input::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] {
    flex: none;
    width: 1rem;
    height: 1rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
input:user-invalid, select:user-invalid, textarea:user-invalid,
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }

fieldset {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
legend { font-size: 0.875rem; font-weight: 600; padding: 0 var(--space-1); }

/* Pulsanti */
button, .button {
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--primary-text);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 120ms ease, background-color 120ms ease;
}
button:hover:not(:disabled), .button:hover { opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondario: contorno neutro */
.button.secondary, button.secondary {
    background: var(--surface);
    color: var(--secondary-text);
    border-color: var(--line-strong);
}

/* Fantasma: testo con bordo leggero (azioni di barra e di tabella) */
button.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }

/* Pericolo: azioni distruttive */
button.danger, .button.danger { background: var(--danger); border-color: var(--danger); color: var(--danger-fg); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.inline { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; flex-wrap: wrap; }

/* Avvisi e stati */
.alert, .notice, .warning {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-sm);
}
.alert { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
.notice { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in oklch, var(--ok) 40%, transparent); }
.warning { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }

.empty-state {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    font-size: 0.875rem;
    color: var(--muted);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Tabelle: intestazioni chiare, righe leggibili, numeri a destra */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    overflow-wrap: break-word;
}
thead th {
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--line-strong);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-strong);
    white-space: nowrap;
}
tbody tr:hover { background: var(--surface-subtle); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.actions .inline input { width: 160px; }

/* Cards dei clienti (MSP) */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-4);
}
.overview-grid > * { min-width: 0; }
.tenant-card { margin-bottom: 0; }
.tenant-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}
.tenant-card-header h2 { margin-bottom: 2px; overflow-wrap: anywhere; }
.tenant-card-header p { margin: 0; }

/* Badge di stato */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--space-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--muted-strong);
    background: var(--surface-subtle);
}
.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.status-warning { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.status-unreachable, .status-not_configured, .status-critical { color: var(--danger); background: var(--danger-bg); border-color: transparent; }

/* Fasce di gravita' */
.band-healthy { color: var(--ok); font-weight: 600; }
.band-warning { color: var(--warn); font-weight: 600; }
.band-critical { color: var(--danger); font-weight: 600; }

/* Metriche: griglia di riquadri con numero in evidenza */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.metrics span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.3;
}
.metrics strong {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.metrics .band-healthy { color: var(--ok); border: 1px solid color-mix(in oklch, var(--ok) 40%, transparent); }
.metrics .band-warning { color: var(--warn); border: 1px solid color-mix(in oklch, var(--warn) 40%, transparent); }
.metrics .band-critical { color: var(--danger); border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent); }

/* Schede di navigazione interne */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
}
.tabs a {
    margin-bottom: -1px;
    padding: var(--space-2) var(--space-3);
    color: var(--muted-strong);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

/* Coppie chiave/valore */
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }

/* Pagine di accesso e di errore */
.card.narrow .button { display: flex; width: 100%; }
.stack > button { width: 100%; }

@media (max-width: 40rem) {
    .topbar { padding: var(--space-3) var(--space-3); }
    .controls { margin-left: 0; width: 100%; }
    .card { padding: var(--space-4); }
    .details { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .details dt { margin-top: var(--space-3); font-size: 0.8125rem; }
    .details dt:first-child { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    button, .button { transition: none; }
}