/*
 * GenStatus — foglio di stile.
 * Tema chiaro predefinito (con dark opzionale), animazioni e micro-interazioni.
 * Nessuna dipendenza esterna.
 */

/* ------------------------------------------------------------ Palette -- */
:root {
    /* Light (predefinito) */
    --bg: #eef2f8;
    --bg-grad-1: radial-gradient(900px 380px at 15% -10%, #dbe7ff 0%, transparent 60%);
    --bg-grad-2: radial-gradient(1000px 420px at 100% -20%, #e7fbf1 0%, transparent 55%);
    --card: #ffffff;
    --card-2: #f1f4f9;
    --border: #e4e9f1;
    --border-strong: #d3dae6;
    --text: #16202e;
    --muted: #64748b;
    --up: #10b981;
    --up-2: #34d399;
    --up-soft: rgba(16, 185, 129, .12);
    --warn: #f59e0b;
    --warn-soft: rgba(245, 158, 11, .13);
    --down: #ef4444;
    --down-soft: rgba(239, 68, 68, .12);
    --pending: #94a3b8;
    --accent: #6366f1;
    --chart-grid: rgba(100, 116, 139, .14);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --radius: 16px;
    --radius-sm: 10px;
}

:root[data-theme="dark"] {
    --bg: #0b0f17;
    --bg-grad-1: radial-gradient(900px 380px at 15% -10%, #16233b 0%, transparent 60%);
    --bg-grad-2: radial-gradient(1000px 420px at 100% -20%, #10241d 0%, transparent 55%);
    --card: #141a24;
    --card-2: #1b222e;
    --border: #232c3a;
    --border-strong: #2c3646;
    --text: #e6edf5;
    --muted: #8b97a8;
    --up-soft: rgba(16, 185, 129, .16);
    --warn-soft: rgba(245, 158, 11, .16);
    --down-soft: rgba(239, 68, 68, .16);
    --chart-grid: rgba(139, 151, 168, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    background-image: var(--bg-grad-1), var(--bg-grad-2);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    transition: background-color .35s ease, color .35s ease;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 32px 18px 64px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- Keyframes -- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 var(--up-soft); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes beatGrow {
    from { transform: scaleY(.25); opacity: .35; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes spinOnce { to { transform: rotate(360deg); } }
@keyframes softBlink { 50% { opacity: .35; } }

/* ---------------------------------------------------------------- Topbar -- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; gap: 12px; animation: fadeInUp .5s ease both;
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-dot {
    width: 13px; height: 13px; border-radius: 50%; background: var(--pending);
    flex: 0 0 auto; position: relative; transition: background .3s;
}
.brand-dot.up { background: var(--up); animation: pulseRing 2.4s ease-out infinite; }
.brand-dot.down { background: var(--down); }
.brand-dot.degraded { background: var(--warn); }
.brand-text { min-width: 0; }
.brand h1 { font-size: 23px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { margin: 0; color: var(--muted); font-size: 13px; }

.controls { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.controls select, .controls button {
    background: var(--card); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: border-color .18s, transform .18s, box-shadow .18s;
}
.controls select:hover, .controls button:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.controls select:focus-visible, .controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.controls button { line-height: 1; width: 40px; display: grid; place-items: center; }
.theme-icon { display: inline-block; transition: transform .4s ease; }
.theme-icon.spin { animation: spinOnce .5s ease; }

/* --------------------------------------------------------------- Overall -- */
.overall {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 24px; box-shadow: var(--shadow);
    animation: fadeInUp .55s ease both;
}
.overall::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--pending);
    transition: background .3s;
}
.overall.up::before { background: linear-gradient(var(--up), var(--up-2)); }
.overall.degraded::before { background: var(--warn); }
.overall.down::before { background: var(--down); }
.overall-icon {
    width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
    font-size: 24px; font-weight: 800; animation: popIn .4s ease both;
}
.overall.up .overall-icon { background: var(--up-soft); color: var(--up); }
.overall.degraded .overall-icon { background: var(--warn-soft); color: var(--warn); }
.overall.down .overall-icon { background: var(--down-soft); color: var(--down); }
.overall.pending .overall-icon { background: var(--card-2); color: var(--muted); }
.overall-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.overall-sub { color: var(--muted); font-size: 14px; }
.overall-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px; background: var(--card-2); color: var(--muted);
    white-space: nowrap; animation: popIn .35s ease both;
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-up { color: var(--up); background: var(--up-soft); }
.chip-down { color: var(--down); background: var(--down-soft); }
.chip-pending { color: var(--muted); }

/* ------------------------------------------------------------- Monitors -- */
.monitors { display: flex; flex-direction: column; gap: 15px; }
.group-label {
    color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; margin: 12px 4px 2px;
}

.card {
    position: relative;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 20px; box-shadow: var(--shadow);
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card.animate-in { animation: fadeInUp .5s cubic-bezier(.2, .7, .2, 1) both; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pill { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--pending); position: relative; }
.pill.up { background: var(--up); animation: pulseRing 2.4s ease-out infinite; }
.pill.down { background: var(--down); box-shadow: 0 0 0 4px var(--down-soft); }
.pill.pending { background: var(--pending); animation: softBlink 1.6s ease-in-out infinite; }
.card-texts { min-width: 0; }
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.card-target { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.type-badge {
    font-size: 10px; color: var(--muted); background: var(--card-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 2px 7px; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 600; flex: 0 0 auto;
}

.card-metrics { display: flex; align-items: center; gap: 22px; }
.metric { text-align: right; }
.metric .val { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metric .lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.metric .val.up { color: var(--up); }
.metric .val.warn { color: var(--warn); }
.metric .val.down { color: var(--down); }

/* Heartbeat */
.beats-box { margin-top: 16px; }
.beats { display: flex; align-items: stretch; gap: 3px; height: 36px; }
.beat {
    flex: 1 1 0; min-width: 3px; max-width: 10px; border-radius: 3px; background: var(--card-2);
    transform-origin: bottom; transition: opacity .15s, transform .15s;
}
.beats-box.animate-in .beat { animation: beatGrow .4s ease both; }
.beat.up { background: linear-gradient(var(--up-2), var(--up)); }
.beat.down { background: var(--down); }
.beat:hover { opacity: .8; transform: scaleY(1.12); }
.beats-empty { color: var(--muted); font-size: 13px; margin-top: 12px; }
.beats-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 7px; }

/* Chart */
.chart-wrap { margin-top: 14px; height: 92px; }

/* Card footer */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.card-msg { color: var(--muted); font-size: 12.5px; }
.card-last { color: var(--muted); font-size: 12px; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* Empty state */
.empty-state {
    background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--radius);
    padding: 40px 22px; text-align: center; color: var(--muted); font-size: 14.5px;
    animation: fadeInUp .5s ease both;
}

/* Footer */
.foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 34px; animation: fadeInUp .6s ease both; }
.foot .sep { margin: 0 9px; opacity: .5; }
#updatedAt { transition: opacity .3s; }
#updatedAt.refreshing { opacity: .4; }

/* Responsive */
@media (max-width: 620px) {
    .wrap { padding: 22px 14px 48px; }
    .overall { grid-template-columns: auto 1fr; padding: 18px; }
    .overall-chips { grid-column: 1 / -1; justify-content: flex-start; }
    .card-metrics { gap: 16px; }
    .card-target { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}