/* AlarMail — operator dashboard styling.
   Dark control-room theme with priority-based row colour-coding. */

:root {
    --bg:        #0e1116;
    --panel:     #161b22;
    --panel-2:   #1c232d;
    --border:    #2a3441;
    --text:      #e6edf3;
    --muted:     #8b98a5;
    --accent:    #3b82f6;

    --sev-critical: #ef4444;
    --sev-high:     #f97316;
    --sev-medium:   #eab308;
    --sev-low:      #64748b;

    --ok:        #22c55e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.brand h1 { margin: 0; font-size: 1.15rem; letter-spacing: .3px; }
.brand .subtitle { margin: .1rem 0 0; color: var(--muted); font-size: .8rem; }

.topbar-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.counts { display: flex; gap: .5rem; }
.count {
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--panel-2);
    border: 1px solid var(--border);
}
.count-new { color: var(--sev-critical); border-color: var(--sev-critical); }
.count-ack { color: var(--sev-medium); }
.count-closed { color: var(--muted); }

.lang-nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 0 .25rem;
    font-weight: 600;
}
.lang-nav a.active { color: var(--accent); }
.logout { color: var(--muted); text-decoration: none; font-size: .85rem; }
.logout:hover { color: var(--text); }

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: .85rem 1.25rem;
    flex-wrap: wrap;
}
.toolbar label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); }
.toolbar select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .4rem .6rem;
    min-width: 160px;
}
.poller { width: 0; height: 0; overflow: hidden; }

/* ── Alarm table ─────────────────────────────────────────── */
main { padding: 0 1.25rem 2rem; }
.alarm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.alarm-table thead th {
    text-align: left;
    padding: .6rem .75rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
}
.alarm-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.alarm-row:hover { background: var(--panel-2); }
.alarm-empty td { text-align: center; color: var(--muted); padding: 2rem; }

/* Severity accent stripe on the left edge of each row. */
.alarm-row { border-left: 4px solid transparent; }
.sev-critical { border-left-color: var(--sev-critical); }
.sev-high     { border-left-color: var(--sev-high); }
.sev-medium   { border-left-color: var(--sev-medium); }
.sev-low      { border-left-color: var(--sev-low); }

/* New alarms pulse gently to draw the operator's eye. */
.st-new .c-time { font-weight: 700; }
.sev-critical.st-new { background: rgba(239, 68, 68, .08); }
.sev-high.st-new     { background: rgba(249, 115, 22, .07); }

.c-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.c-event { color: var(--text); max-width: 32rem; }
.st-closed { opacity: .55; }

/* Badges */
.type-badge, .status-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 5px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.type-badge { background: var(--panel-2); border: 1px solid var(--border); }
.type-FIRE, .type-PANIC, .type-MEDICAL { color: var(--sev-critical); border-color: var(--sev-critical); }
.type-INTRUSION { color: var(--sev-high); border-color: var(--sev-high); }
.type-TAMPER, .type-AC_LOSS, .type-BATTERY { color: var(--sev-medium); }

.status-new    { background: var(--sev-critical); color: #fff; }
.status-ack    { background: var(--sev-medium); color: #201a00; }
.status-closed { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }

/* Action buttons */
.btn {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .3rem .6rem;
    margin-right: .3rem;
    cursor: pointer;
    font-size: .78rem;
    transition: transform .05s ease, background .1s ease;
}
.btn:hover { background: #26313d; }
.btn:active { transform: translateY(1px); }          /* instant click affordance */
.btn:disabled { opacity: .5; cursor: default; }
.btn-ack   { border-color: var(--sev-medium); }
.btn-close { border-color: var(--ok); }

/* ── Detail modal content ────────────────────────────────── */
.alarm-detail { max-width: 100%; }
.detail-meta { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.detail-meta th {
    text-align: left; color: var(--muted); font-weight: 600;
    padding: .3rem .6rem .3rem 0; width: 9rem; vertical-align: top;
}
.detail-meta td { padding: .3rem 0; }
.detail-event { font-size: 1rem; margin: .5rem 0 1rem; }
.snapshots { display: flex; gap: .6rem; flex-wrap: wrap; }
.snapshot {
    max-width: 220px; max-height: 165px;
    border: 1px solid var(--border); border-radius: 6px;
}
.raw-email {
    background: #0b0e12; border: 1px solid var(--border); border-radius: 6px;
    padding: .75rem; overflow-x: auto; max-height: 320px; font-size: .78rem;
    white-space: pre-wrap; word-break: break-word; color: var(--muted);
}

/* ── Login page ──────────────────────────────────────────── */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
}
.login-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    width: min(360px, 92vw);
    display: flex; flex-direction: column; gap: .85rem;
}
.login-card h1 { margin: 0; font-size: 1.2rem; }
.login-card .subtitle { margin: 0 0 .5rem; color: var(--muted); font-size: .82rem; }
.login-card label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); }
.login-card input {
    background: var(--panel-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px; padding: .55rem .7rem;
}
.login-card button {
    margin-top: .5rem; background: var(--accent); color: #fff;
    border: none; border-radius: 6px; padding: .6rem; font-weight: 600; cursor: pointer;
}
.login-error { color: var(--sev-critical); font-size: .85rem; margin: 0; }