/* ============================================================
   app.css — shared base styles (loaded by all layouts)
   ============================================================ */

/* ── Custom scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar          { width: 4px; height: 4px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #1c2030; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a304a; }

/* ── Body / typography ─────────────────────────────────────── */
html, body {
    font-family: 'Syne', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Focus ring reset ──────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* ── Page fade-in ──────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
main { animation: fadeIn 0.15s ease-out; }

/* ── Alert dismiss animation ───────────────────────────────── */
.alert-item {
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
}
.alert-item.hiding {
    opacity: 0;
    transform: translateX(6px);
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ── Utility: visually hidden ──────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Number formatting fix ─────────────────────────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Progress bar shimmer ──────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.progress-shimmer {
    background: linear-gradient(90deg, #f59e0b 0%, #fcd34d 50%, #f59e0b 100%);
    background-size: 200% auto;
    animation: shimmer 2s linear infinite;
}

/* ── Pulse ring (jail / alerts) ────────────────────────────── */
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.ring-pulse { animation: pulseRing 1.5s ease-out infinite; }