/* ============================================================
   Rift Console — Codli Design brand mapping + domain selectors
   ------------------------------------------------------------
   Rift adopts the Codli Design system (_content/Codli.Design/css/
   codli-design.css). This file only:
     1. maps the 12-shade --brand-* scale to Rift's teal identity,
     2. defines Rift-domain selectors under the .rift-* prefix.
   It must never redefine the --bg or --ink tokens or touch .r- classes —
   the flat surfaces, neutral-dark sidebar and white topbar all
   come straight from the design system. Loaded AFTER the library.
   ============================================================ */

:root {
    /* Rift brand = teal. Only the accent scale is overridden; the
       sidebar/topbar/app backgrounds stay Codli's neutral defaults. */
    --brand-50: #e3f7f4;
    --brand-100: #c2ece5;
    --brand-200: #96dfd4;
    --brand-300: #68d0c2;
    --brand-400: #39bfae;
    --brand-500: #12a394;
    --brand-600: #009688;
    --brand-700: #00897b;
    --brand-800: #00695c;
    --brand-900: #004d40;
    --brand-950: #00312a;

    /* Teal focus rings (override the library's indigo ones). */
    --shadow-focus: 0 0 0 3px rgba(0, 137, 123, 0.22);
    --shadow-focus-ring: 0 0 0 3px rgba(0, 137, 123, 0.18);
}

/* ============================================================
   Topbar right cluster — realtime indicator + user + sign out
   ============================================================ */
.rift-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-left: auto;
}

.rift-realtime {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px var(--s-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--t-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}

.rift-realtime-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.rift-realtime-dot.is-live { background: var(--status-done-solid, #16a34a); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
.rift-realtime-dot.is-connecting,
.rift-realtime-dot.is-reconnecting { background: var(--status-pending-solid, #d97706); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16); }
.rift-realtime-dot.is-offline { background: var(--status-rejected-solid, #dc2626); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }

/* ============================================================
   Dashboard KPI stat cards (built on .r-card)
   ============================================================ */
.rift-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

@media (max-width: 900px) {
    .rift-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .rift-stats { grid-template-columns: 1fr; }
}

.rift-stat-card {
    position: relative;
    overflow: hidden;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.rift-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--brand-600);
}

.rift-stat-label {
    font-size: var(--t-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.rift-stat-value {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.rift-stat-value--sm {
    font-size: var(--t-h3);
    font-family: var(--font-mono);
}

/* Full-width variant for the "Last loaded at" row. */
.rift-stat-card--wide { grid-column: 1 / -1; }

/* ============================================================
   Auth screen (login) — flat surface, centered card
   ============================================================ */
.rift-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
    background: var(--bg-app);
}

.rift-auth-card {
    width: min(440px, 100%);
    padding: var(--s-8);
}

.rift-auth-brand {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}

.rift-auth-brand img {
    width: 56px;
    height: 56px;
}

.rift-auth-title {
    margin: 0;
    font-size: var(--t-h2);
    font-weight: 600;
    color: var(--text-primary);
}

.rift-auth-subtitle {
    margin: 2px 0 0;
    font-size: var(--t-small);
    color: var(--text-secondary);
}

/* ============================================================
   Page header with a trailing action (New… button)
   ============================================================ */
.rift-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}

.rift-page-head .r-page-header { margin-bottom: 0; }

/* ============================================================
   Small helpers reused across pages
   ============================================================ */
.rift-table-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.rift-muted { color: var(--text-secondary); }

/* Manuals markdown sits inside an .r-card. The card shell carries no padding
   by design (that lives in .r-card-body), so we give the documentation surface
   its own generous padding; Codli Design's .md-root (content.css) caps line
   length at 760px and styles all the markdown internals. */
.rift-manual-content {
    padding: var(--s-6) var(--s-8);
    overflow-x: auto;
}