/* s3-ops theme — Bootstrap 5.3 dark base with a green accent ramp.
   Slice colours are shared with the dashboard doughnut so the legend, the
   badges and the chart never drift apart. */
:root,
[data-bs-theme="dark"] {
    --s3-bg: #0d1411;
    --s3-surface: #141f1a;
    --s3-surface-2: #1b2b23;
    --s3-border: #26382e;
    --s3-text: #e6f0ea;
    --s3-muted: #8ba396;

    --s3-green: #3ddc84;
    --s3-green-dim: #2bb56b;
    --s3-green-deep: #14795a;
    --s3-teal: #2ac9b0;
    --s3-amber: #e8b53f;
    --s3-slate: #6f8a9c;
    --s3-red: #e56a6a;

    /* Donut categories */
    --s3-cat-not-archived: var(--s3-amber);
    --s3-cat-locked: var(--s3-slate);
    --s3-cat-archived-restorable: var(--s3-green);
    --s3-cat-archived-sealed: var(--s3-green-deep);

    --bs-body-bg: var(--s3-bg);
    --bs-body-color: var(--s3-text);
    --bs-primary: var(--s3-green-dim);
    --bs-link-color: var(--s3-green);
    --bs-link-hover-color: var(--s3-green-dim);
    --bs-border-color: var(--s3-border);
}

body {
    background: radial-gradient(1200px 600px at 15% -10%, #16241d 0%, var(--s3-bg) 60%);
    background-attachment: fixed;
    color: var(--s3-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    min-height: 100vh;
}

/* --- Navbar --- */
.navbar-s3 {
    background: rgba(20, 31, 26, 0.92);
    border-bottom: 1px solid var(--s3-border);
    backdrop-filter: blur(8px);
}
.navbar-s3 .navbar-brand {
    color: var(--s3-green);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.navbar-s3 .nav-link {
    color: var(--s3-muted);
    font-weight: 500;
}
.navbar-s3 .nav-link:hover,
.navbar-s3 .nav-link.active {
    color: var(--s3-green);
}

/* --- Surfaces --- */
.card-s3 {
    background: var(--s3-surface);
    border: 1px solid var(--s3-border);
    border-radius: 1rem;
}
.card-s3 .card-header {
    background: transparent;
    border-bottom: 1px solid var(--s3-border);
    font-weight: 600;
}

.stat-label {
    color: var(--s3-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stat-value {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.1;
}

/* --- Category legend / badges --- */
.cat-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-right: 0.45rem;
    vertical-align: -1px;
}
.cat-not-archived { background: var(--s3-cat-not-archived); }
.cat-locked { background: var(--s3-cat-locked); }
.cat-archived-restorable { background: var(--s3-cat-archived-restorable); }
.cat-archived-sealed { background: var(--s3-cat-archived-sealed); }

.badge-s3 {
    border: 1px solid var(--s3-border);
    background: var(--s3-surface-2);
    color: var(--s3-muted);
    font-weight: 500;
}

table.table-s3 {
    --bs-table-bg: transparent;
    --bs-table-color: var(--s3-text);
    --bs-table-border-color: var(--s3-border);
    --bs-table-hover-bg: var(--s3-surface-2);
    --bs-table-hover-color: var(--s3-text);
}

.footer-s3 {
    color: var(--s3-muted);
    font-size: 0.8rem;
    border-top: 1px solid var(--s3-border);
}

/* --- Login --- */
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
.login-card {
    width: min(24rem, 92vw);
}

/* --- Plan history timeline --- */
.timeline-s3 {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .35rem;
}
.timeline-s3 li {
    display: flex;
    gap: .75rem;
    padding: 0 0 1.1rem 1.1rem;
    border-left: 1px solid var(--s3-border);
    position: relative;
}
.timeline-s3 li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}
.timeline-s3 li > i {
    position: absolute;
    left: -0.62rem;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--s3-surface);
    border: 1px solid var(--s3-border);
    color: var(--s3-green);
    font-size: .68rem;
}

/* --- Reachable vs blocked backlog --- */
.split-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--s3-border);
    overflow: hidden;
}
.split-bar .split-reachable {
    height: 100%;
    background: var(--s3-green);
}

.path {
    font-family: ui-monospace, monospace;
    font-size: .85em;
    background: var(--s3-surface-2);
    padding: .1rem .35rem;
    border-radius: .2rem;
    word-break: break-all;
}

/* --- Live run heartbeat --- */
.live-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--s3-green);
    margin: 0 .35rem 0 .2rem;
}
.live-dot.pulse { animation: s3-pulse .9s ease-out; }
@keyframes s3-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); }
    100% { box-shadow: 0 0 0 .5rem rgba(61, 220, 132, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot.pulse { animation: none; }
}