/* Rise design system — tokens, base elements, components.
   Sharp mood is always on. Palette only changes accent color.
   Density tokens scale spacing and typography. */

:root {
    --bg: oklch(0.985 0.004 80);
    --surface: #ffffff;
    --surface-2: oklch(0.96 0.005 80);
    --surface-3: oklch(0.92 0.005 80);
    --hover: oklch(0.94 0.005 80);
    --border: oklch(0.84 0.005 80);
    --border-faint: oklch(0.88 0.005 80);
    --border-strong: oklch(0.74 0.005 80);

    --text: oklch(0.20 0.006 80);
    --text-muted: oklch(0.50 0.006 80);
    --text-soft: oklch(0.62 0.006 80);

    --accent: oklch(0.55 0.17 270);
    --accent-fg: #ffffff;
    --accent-soft: oklch(0.95 0.04 270);

    --ok: oklch(0.62 0.13 150);
    --ok-bg: oklch(0.96 0.04 150);
    --warn: oklch(0.62 0.12 70);
    --warn-bg: oklch(0.96 0.06 80);
    --err: oklch(0.58 0.18 25);
    --err-bg: oklch(0.96 0.04 25);
    --info: oklch(0.55 0.13 250);
    --info-bg: oklch(0.96 0.03 250);

    --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.04);
    --shadow-md: 0 4px 18px rgba(20, 20, 15, 0.05), 0 1px 2px rgba(20, 20, 15, 0.04);
    --shadow-lg: 0 24px 60px rgba(20, 20, 15, 0.10), 0 2px 6px rgba(20, 20, 15, 0.06);

    --radius: 6px;
    --radius-sm: 5px;
    --radius-xs: 3px;

    /* Log surface and chart stack colors. Read by the deployment logs UI
       (JS uses var() to fill chart bars; CSS uses for row gradients). */
    --r-logs-bg: oklch(0.985 0.004 80);
    --r-logs-bg-hover: oklch(0.94 0.005 80);
    --r-log-chart-info: oklch(0.55 0.005 80);
    --r-log-chart-warn: oklch(0.70 0.14 85);
    --r-log-chart-error: oklch(0.58 0.18 25);
    /* Loki emits additional `detected_level` values beyond info/warn/error.
       The CLI mirrors this palette in ANSI; keep them in sync if you tweak. */
    --r-log-chart-critical: oklch(0.50 0.20 25);
    --r-log-chart-fatal: oklch(0.45 0.20 20);
    --r-log-chart-debug: oklch(0.65 0.02 230);
    --r-log-chart-trace: oklch(0.70 0.02 230);
    --r-log-chart-unknown: oklch(0.72 0.005 80);
    /* Recharts cursor (the hover highlight rectangle behind the active bar).
       Themed so it doesn't look hard-coded-dark on light mode. */
    --r-logs-chart-cursor: oklch(0.80 0.005 80 / 0.45);
}

.dark {
    --bg: oklch(0.17 0.005 80);
    --surface: oklch(0.20 0.005 80);
    --surface-2: oklch(0.23 0.005 80);
    --surface-3: oklch(0.27 0.005 80);
    --hover: oklch(0.24 0.005 80);
    --border: oklch(0.27 0.005 80);
    --border-faint: oklch(0.23 0.005 80);
    --border-strong: oklch(0.34 0.005 80);

    --text: oklch(0.96 0.004 80);
    --text-muted: oklch(0.68 0.004 80);
    --text-soft: oklch(0.55 0.004 80);

    --accent: oklch(0.75 0.16 270);
    --accent-fg: oklch(0.20 0.05 270);
    --accent-soft: oklch(0.30 0.10 270);

    --ok: oklch(0.78 0.13 150);
    --ok-bg: oklch(0.28 0.06 150);
    --warn: oklch(0.82 0.12 75);
    --warn-bg: oklch(0.30 0.06 75);
    --err: oklch(0.72 0.16 25);
    --err-bg: oklch(0.30 0.10 25);
    --info: oklch(0.78 0.12 250);
    --info-bg: oklch(0.28 0.08 250);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

    --r-logs-bg: oklch(0.14 0.005 80);
    --r-logs-bg-hover: oklch(0.22 0.005 80);
    --r-log-chart-info: oklch(0.62 0.005 80);
    --r-log-chart-warn: oklch(0.78 0.13 85);
    --r-log-chart-error: oklch(0.62 0.16 25);
    --r-log-chart-critical: oklch(0.55 0.18 25);
    --r-log-chart-fatal: oklch(0.50 0.20 20);
    --r-log-chart-debug: oklch(0.55 0.04 230);
    --r-log-chart-trace: oklch(0.62 0.04 230);
    --r-log-chart-unknown: oklch(0.50 0.005 80);
    --r-logs-chart-cursor: oklch(0.22 0.005 80 / 0.45);
}

/* Palette: shifts the accent plus a subtle tint of the light-mode
   surfaces toward the accent hue. Dark mode keeps neutral surfaces. */
[data-palette="mint"]:not(.dark) {
    --accent: oklch(0.55 0.10 165);
    --accent-soft: oklch(0.95 0.04 165);
    --bg: oklch(0.985 0.008 165);
    --surface-2: oklch(0.96 0.011 165);
    --hover: oklch(0.945 0.012 165);
    --border-faint: oklch(0.89 0.009 165);
}
[data-palette="mint"].dark, .dark[data-palette="mint"] {
    --accent: oklch(0.78 0.13 165);
    --accent-fg: oklch(0.20 0.04 165);
    --accent-soft: oklch(0.30 0.08 165);
}

[data-palette="indigo"]:not(.dark) {
    --accent: oklch(0.55 0.17 270);
    --accent-soft: oklch(0.95 0.04 270);
    --bg: oklch(0.985 0.009 270);
    --surface-2: oklch(0.96 0.012 270);
    --hover: oklch(0.945 0.013 270);
    --border-faint: oklch(0.89 0.01 270);
}
[data-palette="indigo"].dark, .dark[data-palette="indigo"] {
    --accent: oklch(0.78 0.14 270);
    --accent-fg: oklch(0.20 0.05 270);
    --accent-soft: oklch(0.30 0.10 270);
}

[data-palette="ember"]:not(.dark) {
    --accent: oklch(0.62 0.16 40);
    --accent-soft: oklch(0.95 0.05 40);
    --bg: oklch(0.987 0.01 55);
    --surface-2: oklch(0.965 0.013 55);
    --hover: oklch(0.95 0.014 55);
    --border-faint: oklch(0.89 0.011 55);
}
[data-palette="ember"].dark, .dark[data-palette="ember"] {
    --accent: oklch(0.78 0.15 40);
    --accent-fg: oklch(0.22 0.06 40);
    --accent-soft: oklch(0.32 0.10 40);
}

[data-palette="slate"]:not(.dark) {
    --accent: oklch(0.32 0.012 250);
    --accent-fg: #ffffff;
    --accent-soft: oklch(0.92 0.006 250);
    --bg: oklch(0.985 0.004 250);
    --surface-2: oklch(0.96 0.005 250);
    --hover: oklch(0.945 0.006 250);
    --border-faint: oklch(0.89 0.005 250);
}
[data-palette="slate"].dark, .dark[data-palette="slate"] {
    --accent: oklch(0.88 0.005 250);
    --accent-fg: oklch(0.18 0.005 250);
    --accent-soft: oklch(0.30 0.06 250);
}

/* Base */
html, body, #root { height: 100%; margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text);
}

.mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-variant-ligatures: none;
    letter-spacing: -0.01em;
}

a { color: inherit; }

/* ---------- App shell ---------- */
.r-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.r-layout { display: flex; flex: 1; min-height: 0; }

.r-side {
    width: 232px;
    flex: 0 0 232px;
    background: var(--surface);
    border-right: 1px solid var(--border-faint);
    padding: 18px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.r-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.r-brand-mark {
    width: 26px; height: 26px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--accent-fg);
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px;
    box-shadow: var(--shadow-sm);
}
.r-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }

.r-org {
    /* Hidden until multi-tenancy / workspace switching ships. Markup retained
       so the slot returns once an org switcher is wired in. */
    display: none;
    align-items: center; gap: 9px;
    padding: 8px 10px;
    background: var(--surface-2);
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background 0.14s;
}
.r-org:hover { background: var(--hover); }
.r-org-avatar {
    width: 22px; height: 22px;
    border-radius: 3px;
    background: oklch(0.62 0.12 230);
    color: white;
    display: grid; place-items: center;
    font-weight: 600; font-size: 11px;
}
.r-org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-org svg { color: var(--text-muted); }

.r-nav { display: flex; flex-direction: column; gap: 1px; }
.r-nav-section {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-soft);
    padding: 10px 10px 4px;
    font-weight: 600;
}
.r-nav button {
    all: unset;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 13.5px;
    color: var(--text-muted);
    transition: background 0.14s, color 0.14s;
}
.r-nav button:hover { background: var(--hover); color: var(--text); }
.r-nav button.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.r-nav button.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
}
.dark .r-nav button.active { color: var(--text); }
.r-nav .ico { width: 16px; height: 16px; opacity: 0.82; flex: 0 0 16px; }
.r-nav .badge {
    margin-left: auto;
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--text-soft);
}
.r-nav button.active .badge { background: var(--surface); color: var(--text-muted); }

.r-side-footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.r-theme-btn {
    all: unset;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
}
.r-theme-btn:hover { background: var(--hover); color: var(--text); }
.r-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    cursor: pointer;
    transition: background 0.14s;
}
.r-user:hover { background: var(--hover); }
.r-user.active {
    background: var(--accent-soft);
    border-color: transparent;
}
.r-user.active .r-user-name { color: var(--accent); font-weight: 600; }
.dark .r-user.active .r-user-name { color: var(--text); }
.r-ava {
    width: 26px; height: 26px;
    border-radius: 4px;
    background: oklch(0.66 0.13 35);
    color: white;
    display: grid; place-items: center;
    font-weight: 600; font-size: 12px;
}
.r-user-info { flex: 1; min-width: 0; }
.r-user-name { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--text); }
.r-user-mail { font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Main column ---------- */
.r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.r-topbar {
    height: 52px;
    flex: 0 0 52px;
    border-bottom: 1px solid var(--border-faint);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 28px;
    background: var(--surface);
}
.r-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: nowrap;
    min-width: 0;
}
.r-crumbs a { color: var(--text-muted); text-decoration: none; cursor: pointer; white-space: nowrap; }
.r-crumbs a:hover { color: var(--text); }
.r-crumbs .sep { color: var(--text-soft); }
.r-crumbs strong { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.r-topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.r-kbar {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 11px;
    background: var(--surface-2);
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    color: var(--text-soft);
    font-size: 12.5px;
    min-width: 240px;
}
.r-kbar:hover { background: var(--hover); }
.r-kbar .placeholder { flex: 1; }
.r-kbar kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 1px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-soft);
}
.r-icon-btn {
    all: unset;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    background: var(--surface);
    display: grid; place-items: center;
    color: var(--text-muted);
}
.r-icon-btn:hover { background: var(--hover); color: var(--text); }

.r-content { flex: 1; overflow: auto; padding: 32px 36px 44px; }

/* ---------- Page head ---------- */
.r-page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.r-page-head .title-stack { flex: 1; min-width: 0; }
.r-page-title {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.15;
    color: var(--text);
}
.r-page-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 6px; }
.r-meta-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12.5px;
    flex-wrap: wrap;
}
.r-meta-bar .dot-sep {
    width: 3px; height: 3px;
    background: var(--text-soft);
    border-radius: 50%;
    flex: 0 0 3px;
}

/* ---------- Buttons ---------- */
.r-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 12.75px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: background 0.14s, border 0.14s, transform 0.12s;
    white-space: nowrap;
    line-height: 1.2;
}
.r-btn:hover { background: var(--hover); }
.r-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.r-btn.primary:hover { filter: brightness(1.06); }
.r-btn.ghost { border: none; background: transparent; padding: 6px 9px; }
.r-btn.ghost:hover { background: var(--hover); }
.r-btn.small { padding: 4px 9px; font-size: 12px; }
.r-btn.danger { background: var(--err); color: #fff; border-color: transparent; }
.r-btn.danger:hover { background: var(--err); filter: brightness(1.07); }
.r-btn:disabled, .r-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.r-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Split button ----------
   Two segments that share a single border. The left segment is a stateful
   toggle (e.g. live streaming); the right segment is an independent secondary
   toggle (e.g. auto-scroll). Sized to match `.r-btn.small`. */
.r-split-btn {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    overflow: hidden;
    line-height: 1.2;
}
.r-split-btn button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text);
    transition: background 0.14s, color 0.14s;
    white-space: nowrap;
}
.r-split-btn button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-split-btn-main { padding: 5px 12px 5px 14px; }
.r-split-btn-side {
    padding: 5px 9px;
    border-left: 1px solid var(--border);
    color: var(--text-soft);
}
.r-split-btn button:hover { background: var(--hover); }
.r-split-btn-main .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-soft);
    flex: 0 0 6px;
}
.r-split-btn-main.active { color: var(--ok); background: var(--ok-bg); }
.r-split-btn-main.active .dot {
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 30%, transparent);
    animation: r-pulse-soft 2.4s infinite;
}
.r-split-btn-side.active { color: var(--accent); background: var(--accent-soft); }

/* ---------- Logs panel header ----------
   Title + level filter on the left, controls on the right. Both groups wrap
   internally; the whole row also wraps onto two lines at narrow widths so
   things don't get squeezed together. */
.r-logs-head { flex-wrap: wrap; row-gap: 10px; }
.r-logs-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}
.r-logs-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.r-logs-tail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.r-logs-tail .r-field { width: 64px; -moz-appearance: textfield; }
.r-logs-tail .r-field::-webkit-outer-spin-button,
.r-logs-tail .r-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.r-logs-level { width: 130px; }
.r-logs-range { width: 150px; }
.r-logs-autorefresh { width: 120px; }
.r-logs-count {
    font-size: 11.5px;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    padding: 0 4px;
    user-select: none;
}

/* ---------- Inputs ---------- *
   All form fields share a single visual style: same border, padding, focus
   ring and font. Native <select> is deliberately not used — we render a
   custom Combobox so its chevron, search input, and list match. */
.r-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    min-width: 220px;
    transition: border 0.14s, box-shadow 0.14s;
    color: var(--text);
}
.r-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.r-input input { all: unset; flex: 1; min-width: 0; color: var(--text); font-family: inherit; }
.r-input input::placeholder { color: var(--text-soft); }

.r-field-label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}
.r-field {
    width: 100%;
    padding: 8px 11px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    transition: border 0.14s, box-shadow 0.14s;
}
.r-field::placeholder { color: var(--text-soft); }
.r-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.r-field:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}
textarea.r-field { resize: vertical; min-height: 80px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

/* ---------- Combobox ----------
   Custom dropdown control. The trigger is a styled button matching .r-field;
   the popover contains a search input and a scrollable option list. */
.r-cbox {
    position: relative;
}
.r-cbox-trigger {
    all: unset;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 32px 8px 11px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    transition: border 0.14s, box-shadow 0.14s;
}
.r-cbox-trigger:hover { background: var(--hover); }
.r-cbox-trigger:focus, .r-cbox.open .r-cbox-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
.r-cbox-trigger[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
.r-cbox-trigger[aria-disabled="true"]:hover { background: var(--surface); }
.r-cbox-trigger.placeholder { color: var(--text-soft); }
.r-cbox-trigger .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-cbox-trigger .chev {
    position: absolute;
    right: 10px;
    color: var(--text-muted);
    pointer-events: none;
}
.r-cbox-trigger .clear {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 2px;
    border-radius: 3px;
    display: inline-flex;
    margin-right: 18px;
}
.r-cbox-trigger .clear:hover { color: var(--text); background: var(--hover); }

.r-cbox-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.r-cbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px 1px 8px;
    font-size: 11.75px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 3px;
    line-height: 1.4;
}
.dark .r-cbox-chip { color: var(--text); }
.r-cbox-chip button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 2px;
}
.r-cbox-chip button:hover { background: color-mix(in oklch, currentColor 14%, transparent); }

.r-cbox-pop {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    overflow: hidden;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}
.r-cbox-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--border-faint);
}
.r-cbox-search input {
    all: unset;
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
.r-cbox-search input::placeholder { color: var(--text-soft); }
.r-cbox-list { overflow: auto; padding: 4px; min-height: 40px; }
.r-cbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    font-size: 13px;
    color: var(--text);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-cbox-item:hover, .r-cbox-item.sel { background: var(--surface-2); }
.r-cbox-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.r-cbox-item .check {
    width: 14px;
    height: 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-fg);
    background: var(--surface);
    flex: 0 0 14px;
}
.r-cbox-item.on .check { background: var(--accent); border-color: var(--accent); }
.r-cbox-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r-cbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    flex: 0 0 auto;
    line-height: 0;
}
.r-cbox-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.r-cbox-item-text .label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-cbox-item-text .hint {
    color: var(--text-soft);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.r-cbox-item .hint { color: var(--text-soft); font-size: 11.5px; }
.r-cbox-empty {
    padding: 14px 11px;
    font-size: 12.5px;
    color: var(--text-soft);
    text-align: center;
}

/* ---------- Segmented / pills ---------- */
.r-seg {
    display: inline-flex;
    padding: 2px;
    background: var(--surface-2);
    border-radius: 5px;
    border: 1px solid var(--border-faint);
}
.r-seg button {
    all: unset;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-muted);
    border-radius: 3px;
    transition: background 0.14s, color 0.14s;
}
.r-seg button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.r-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: 11.75px;
    line-height: 1.45;
    background: var(--surface-2);
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    color: var(--text-muted);
}
.r-pill.env-prod { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.r-pill.env-staging { color: var(--info); background: var(--info-bg); border-color: transparent; }
.r-pill.env-global { color: var(--text-muted); background: var(--surface-2); border-color: transparent; }
.r-pill.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }

/* ---------- BasePill / Chip (two-tone: icon cell | name cell) ----------
   Shared base for EnvPill, GroupPill, and any future compound chip. Sized to
   match .r-status and .r-pill: font 11.75/1.45 + 1px y-padding + 1px border
   each side gives the same total box height as the borderless 2px-padded
   status pill, so all chip families line up in tables and meta rows. */
.r-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    overflow: hidden;
    font-size: 11.75px;
    line-height: 1.45;
    background: var(--surface);
    white-space: nowrap;
    vertical-align: middle;
}
.r-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    background: var(--surface-2);
    color: var(--text-soft);
    border-right: 1px solid var(--border-faint);
}
.r-chip-name {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    color: var(--text-muted);
}
.r-chip-name-strong { color: var(--text); font-weight: 500; }
.r-chip.primary .r-chip-icon {
    background: var(--accent-soft);
    color: var(--accent);
    border-right-color: var(--accent-soft);
}
.r-chip.primary .r-chip-name { color: var(--text); }
[data-density="compact"] .r-chip { font-size: 11px; }
[data-density="compact"] .r-chip-icon { padding: 0 5px; }
[data-density="compact"] .r-chip-name { padding: 0 7px; }

/* Clickable env row in the project-overview Environments card. */
.r-env-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 80ms ease;
}
.r-env-row:hover { background: var(--hover); }
.r-env-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--hover); }

/* ---------- Status ---------- */
.r-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 4px;
    font-size: 11.75px;
    font-weight: 500;
    line-height: 1.45;
}
.r-status .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }

.r-status.healthy, .r-status.running, .r-status.ok, .r-status.available, .r-status.active {
    color: var(--ok);
    background: var(--ok-bg);
}
.r-status.healthy .dot, .r-status.running .dot, .r-status.ok .dot, .r-status.available .dot, .r-status.active .dot {
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok) 30%, transparent);
}
.r-status.healthy .dot, .r-status.running .dot { animation: r-pulse-soft 2.4s infinite; }

.r-status.unhealthy, .r-status.failed, .r-status.error, .r-status.bad {
    color: var(--err);
    background: var(--err-bg);
}
.r-status.unhealthy .dot, .r-status.failed .dot, .r-status.error .dot, .r-status.bad .dot {
    background: var(--err);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--err) 30%, transparent);
}
.r-status.unhealthy .dot { animation: r-pulse-soft 1.6s infinite; }

.r-status.building, .r-status.deploying, .r-status.queued, .r-status.pending,
.r-status.pushing, .r-status.pushed, .r-status.warn,
.r-status.creating, .r-status.provisioning, .r-status.updating, .r-status.deletion_blocked {
    color: var(--warn);
    background: var(--warn-bg);
}
.r-status.building .dot, .r-status.deploying .dot, .r-status.queued .dot, .r-status.pending .dot,
.r-status.pushing .dot, .r-status.pushed .dot, .r-status.warn .dot,
.r-status.creating .dot, .r-status.provisioning .dot, .r-status.updating .dot, .r-status.deletion_blocked .dot { background: var(--warn); }
.r-status.building .dot, .r-status.deploying .dot { animation: r-pulse 1.4s infinite; }

.r-status.superseded, .r-status.stopped, .r-status.cancelled, .r-status.expired,
.r-status.terminating, .r-status.inactive, .r-status.muted,
.r-status.deleting, .r-status.deleted, .r-status.unknown {
    color: var(--text-soft);
    background: var(--surface-2);
    border: 1px solid var(--border-faint);
}
.r-status.superseded .dot, .r-status.stopped .dot, .r-status.cancelled .dot, .r-status.expired .dot,
.r-status.terminating .dot, .r-status.inactive .dot, .r-status.muted .dot,
.r-status.deleting .dot, .r-status.deleted .dot, .r-status.unknown .dot { background: var(--text-soft); }

.r-status.bare { padding: 0; background: transparent; border: none; }

@keyframes r-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@keyframes r-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@keyframes r-spin { to { transform: rotate(360deg); } }
.r-spin { animation: r-spin 1s linear infinite; }

/* ---------- Tabs ---------- */
.r-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-faint);
    margin-bottom: 26px;
    padding: 0 2px;
    flex-wrap: wrap;
}
.r-tab {
    all: unset;
    cursor: pointer;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--text-muted);
    position: relative;
    border-radius: 4px 4px 0 0;
}
.r-tab:hover { color: var(--text); background: var(--surface-2); }
.r-tab.active { color: var(--text); font-weight: 500; }
.r-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}
.r-tab-count {
    margin-left: 6px;
    font-size: 11.5px;
    color: var(--text-soft);
    padding: 0 5px;
    background: var(--surface-2);
    border-radius: 3px;
}

/* ---------- Panels / cards ---------- */
.r-panel {
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
}
/* When a panel contains a wide table, let it scroll horizontally instead of
   clipping. The panel-head scrolls along with the table — acceptable since
   the head content is short relative to the panel width. */
.r-panel:has(> .r-table) { overflow-x: auto; }
.r-panel-head {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--border-faint);
}
.r-panel-title { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.r-panel-sub { font-size: 12px; color: var(--text-soft); }
.r-panel-body { padding: 18px; }
.r-panel-clickable { cursor: pointer; transition: border-color 0.14s; }
.r-panel-clickable:hover { border-color: var(--text-soft); }
.r-panel-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Accent left border, e.g. cards for teams the current user owns. Drawn as an
   overlay so it stays continuous over the panel head's bottom divider. */
.r-panel-own { position: relative; }
.r-panel-own::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    z-index: 1;
}

/* ---------- Tables ---------- */
.r-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.r-table.r-table-fixed { table-layout: fixed; }
.r-table.r-table-fixed td, .r-table.r-table-fixed th { overflow: hidden; text-overflow: ellipsis; }
.r-table.r-table-fixed td > *:not(.row-actions) { max-width: 100%; }
.r-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-soft);
    font-size: 11.25px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border-faint);
    background: var(--surface-2);
    white-space: nowrap;
}
.r-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-faint);
    vertical-align: middle;
    color: var(--text);
}
.r-table tr:last-child td { border-bottom: none; }
.r-table tr.click { cursor: pointer; transition: background 0.14s; }
.r-table tr.click:hover td { background: var(--hover); }
.r-table .row-actions { opacity: 0; transition: opacity 0.14s; }
.r-table tr:hover .row-actions { opacity: 1; }
/* Left-border ownership indicator (team detail project list): accent bar for
   team-owned projects, a dull gray bar for projects merely shared with it. */
.r-table tr.r-row-own td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.r-table tr.r-row-shared td:first-child { box-shadow: inset 3px 0 0 var(--text-soft); }

/* ---------- Stat group ---------- */
.r-stat-grid {
    display: grid;
    /* auto-fit ensures stat cards wrap to a new row instead of overflowing
       when the viewport is narrower than the natural width of the grid. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* 1px gaps + a matching background act as natural inter-cell dividers
       that work correctly whether the row is full or wraps. */
    gap: 1px;
    margin-bottom: 26px;
    border: 1px solid var(--border-faint);
    border-radius: 6px;
    overflow: hidden;
    background: var(--border-faint);
}
.r-stat-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.r-stat-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.r-stat { padding: 14px 18px; background: var(--surface); }
.r-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 600;
}
.r-stat-value {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 6px;
    line-height: 1.05;
    color: var(--text);
}
.r-stat-unit { font-size: 13px; color: var(--text-muted); margin-left: 3px; font-weight: 500; }
.r-stat-delta { font-size: 11.5px; margin-top: 6px; color: var(--text-muted); }
.r-stat-delta.up { color: var(--ok); }
.r-stat-delta.down { color: var(--err); }

/* ---------- Modal ---------- */
.r-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 15, 0.35);
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 16px;
}
.dark .r-modal-mask { background: rgba(0, 0, 0, 0.55); }
.r-modal {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    width: 480px;
    max-width: 92%;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--text);
}
.r-modal.wide { width: 640px; }
.r-modal.xwide { width: 760px; }
.r-modal-head { padding: 20px 22px 6px; }
.r-modal-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.r-modal-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.r-modal-body {
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 70vh;
    overflow: auto;
}
.r-modal-foot {
    padding: 12px 18px;
    background: var(--surface-2);
    border-top: 1px solid var(--border-faint);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Links ---------- */
.r-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.r-link:hover { text-decoration: underline; }

/* ---------- Logs ---------- */
.r-logs {
    background: var(--r-logs-bg);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.62;
    padding: 14px 16px;
    overflow: auto;
    height: 100%;
    border-radius: 5px;
}
.dark .r-logs { color: oklch(0.92 0.005 80); }
.r-logs .ts { color: oklch(0.55 0.005 80); margin-right: 10px; }
.r-logs .src { color: oklch(0.72 0.10 165); margin-right: 8px; }
/* Per-line level colours. Bumped chroma vs. the chart bar palette so each
   level is unambiguously distinct from the default text on a dark
   background — the bars fill a region; text needs more saturation to read
   the same way. Light-mode values are darkened enough to clear WCAG-AA on
   the lightest (odd) row background (~oklch 0.965) while keeping info/notice
   in the default body colour. */
.r-logs .lv-info,
.r-logs .lv-notice { color: inherit; }
.r-logs .lv-warn { color: oklch(0.55 0.20 85); }
.r-logs .lv-error { color: oklch(0.50 0.22 25); }
.r-logs .lv-critical { color: oklch(0.45 0.23 25); }
.r-logs .lv-fatal { color: oklch(0.40 0.22 20); }
.r-logs .lv-debug,
.r-logs .lv-trace { color: oklch(0.52 0.10 230); }
.r-logs .lv-unknown { color: inherit; }
.dark .r-logs .lv-warn { color: oklch(0.85 0.20 85); }
.dark .r-logs .lv-error { color: oklch(0.78 0.20 25); }
.dark .r-logs .lv-critical { color: oklch(0.72 0.22 25); }
.dark .r-logs .lv-fatal { color: oklch(0.68 0.22 20); }
.dark .r-logs .lv-debug,
.dark .r-logs .lv-trace { color: oklch(0.75 0.08 230); }
.r-logs-row {
    position: relative;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
    outline: none;
}
.r-logs-row.is-expandable { cursor: pointer; }
.r-logs-row.is-expanded { cursor: zoom-out; }
/* Subtle row striping. Tuned per mode: light mode wants a near-white
   tint so it doesn't shout, dark mode wants a row a step brighter than
   the panel bg to remain visible. */
.r-logs-row:nth-child(odd):not(.is-expanded) {
    background: oklch(0.965 0.004 80);
}
.dark .r-logs-row:nth-child(odd):not(.is-expanded) {
    background: oklch(0.195 0.005 80);
}
.r-logs-row:hover:not(.is-expanded),
.r-logs-row:focus-visible:not(.is-expanded) {
    background: var(--r-logs-bg-hover);
}
.r-logs-row.is-expanded {
    white-space: pre-wrap;
    word-break: break-word;
}
.r-logs-row:not(.is-expanded)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--r-logs-bg) 70%);
}
.r-logs-row:hover:not(.is-expanded)::after {
    background: linear-gradient(to right, transparent, var(--r-logs-bg-hover) 70%);
}
.r-logs-row .r-logs-ts {
    color: oklch(0.55 0.005 80);
    margin-right: 10px;
    user-select: none;
    font-variant-numeric: tabular-nums;
}
/* Lines paginated in from outside the user's selected range (the Kubernetes
   backend can keep going as long as the kubelet has buffered them). The row
   stays readable, but the timestamp fades so it's clear the line is older
   (or newer) than the chart's window. */
.r-logs-row.is-out-of-range .r-logs-ts {
    opacity: 0.4;
}
.r-logs-row .r-logs-action {
    display: none;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: oklch(0.26 0.005 80);
    border: 1px solid oklch(0.34 0.005 80);
    color: oklch(0.90 0.005 80);
    font-size: 10.5px;
    line-height: 1.4;
    padding: 1px 7px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1;
    font-family: inherit;
}
.r-logs-row.is-expandable:hover .r-logs-action {
    display: inline-block;
}
.r-logs-row.is-expanded .r-logs-action {
    position: absolute;
    top: 4px;
    right: 4px;
    transform: none;
    display: inline-block;
    margin-left: 0;
}
.r-logs-row .r-logs-action:hover {
    background: oklch(0.32 0.005 80);
    color: oklch(0.95 0.005 80);
}
.r-logs-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.r-logs-search > svg {
    position: absolute;
    left: 8px;
    color: var(--text-soft);
    pointer-events: none;
}
.r-logs-search input.r-field {
    padding-left: 26px;
    width: 200px;
    font-size: 12px;
}
.r-logs-bucket-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 4px 6px 4px 10px;
    background: oklch(0.40 0.10 260 / 0.18);
    border: 1px solid oklch(0.50 0.12 260 / 0.5);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--text);
}
.r-logs-bucket-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--text-soft);
    cursor: pointer;
}
.r-logs-bucket-clear:hover { background: oklch(0.50 0.12 260 / 0.3); color: var(--text); }
.r-logs-loader {
    padding: 8px 4px;
    text-align: center;
    color: oklch(0.55 0.005 80);
    font-size: 11px;
    user-select: none;
}
.r-logs-json {
    margin: 4px 0 0 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: oklch(0.82 0.005 80);
}
.r-logs-json .json-key  { color: oklch(0.78 0.10 165); }
.r-logs-json .json-str  { color: oklch(0.80 0.09 140); }
.r-logs-json .json-num  { color: oklch(0.82 0.11 85); }
.r-logs-json .json-bool { color: oklch(0.75 0.13 280); }
.r-logs-json .json-null { color: oklch(0.55 0.005 80); }

/* ---------- Log volume chart tooltip ---------- */
.r-logs-chart-tip {
    /* Explicit background-color (not the shorthand) and a backdrop blur so
       the log lines behind the chart aren't visible through the tooltip in
       case Recharts' wrapper carries any residual transition opacity. */
    background-color: var(--surface);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--text);
    min-width: 180px;
}
/* Recharts' tooltip-wrapper sometimes settles below opacity:1 during the
   show/hide animation; force it solid so our tooltip background is the
   final word on visibility. Scoped to the log-volume chart so it doesn't
   override Recharts opacity behaviour for any future charts on the page. */
.r-logs-chart .recharts-tooltip-wrapper { opacity: 1 !important; }
.r-logs-chart-tip-title {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}
.r-logs-chart-tip-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 6px;
    align-items: center;
    line-height: 1.5;
}
.r-logs-chart-tip-row .dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
}
.r-logs-chart-tip-row .lbl { color: var(--text-soft); }
.r-logs-chart-tip-row .val { font-variant-numeric: tabular-nums; font-weight: 500; }
.r-logs-chart-tip-total {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 6px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border);
}
.r-logs-chart-tip-total .lbl {
    grid-column: 1 / span 2;
    color: var(--text);
    font-weight: 600;
}
.r-logs-chart-tip-total .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.r-logs-chart-tip-hint {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-soft);
    text-align: right;
}
.r-logs-chart .recharts-rectangle:hover {
    cursor: pointer;
}
.r-logs-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
    color: var(--text-soft);
    width: 100%;
}
.r-logs-chart-head-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}
.r-logs-chart-head-toggle-btn:hover .r-logs-chart-head-title { color: var(--text); }
.r-logs-chart-head-toggle-btn.inert {
    cursor: default;
}
.r-logs-chart-head.disabled .r-logs-chart-head-toggle {
    color: var(--text-muted);
}
.r-logs-chart-head.disabled .r-logs-chart-head-title {
    color: var(--text-soft);
}
.r-logs-chart-head-note {
    margin-left: 6px;
    color: var(--text-soft);
    font-style: italic;
}
.r-logs-chart-head-toggle {
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
}
.r-logs-chart-head-title {
    font-weight: 500;
    color: var(--text);
}
.r-logs-chart-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Date range popover ---------- */
.r-date-range {
    position: relative;
    display: inline-block;
}
.r-date-range-trigger {
    cursor: pointer;
    text-align: left;
    min-width: 240px;
    font-variant-numeric: tabular-nums;
}
.r-date-range-popover {
    /* Inline `position`/`top`/`left` are set by JS via createPortal so the
       popover escapes any ancestor overflow:hidden. */
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    max-width: 90vw;
}
.r-date-range-popover .rdp-months {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rdp-months-gap);
}
.r-date-range-popover .rdp-month {
    flex: 0 0 auto;
}
.r-date-range-times {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.r-date-range-times label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-soft);
}
.r-date-range-times label > span { user-select: none; }
.r-date-range-times input[type="time"] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}
.r-date-range .rdp-root {
    --rdp-accent-color: var(--accent);
    --rdp-accent-background-color: oklch(0.40 0.10 260 / 0.28);
    --rdp-background-color: transparent;
    --rdp-day-height: 34px;
    --rdp-day-width: 34px;
    --rdp-day_button-height: 30px;
    --rdp-day_button-width: 30px;
    --rdp-day_button-border-radius: 6px;
    --rdp-day_button-border: 1px solid transparent;
    --rdp-selected-border: 1px solid transparent;
    --rdp-range_middle-background-color: oklch(0.40 0.10 260 / 0.28);
    --rdp-range_middle-color: var(--text);
    --rdp-range_start-color: oklch(0.98 0.005 80);
    --rdp-range_end-color: oklch(0.98 0.005 80);
    --rdp-today-color: var(--accent);
    --rdp-outside-opacity: 0.4;
    --rdp-disabled-opacity: 0.3;
    --rdp-nav_button-height: 28px;
    --rdp-nav_button-width: 28px;
    --rdp-months-gap: 1.25rem;
    color: var(--text);
    margin: 0;
    font-size: 12px;
}
.r-date-range .rdp-month_caption,
.r-date-range .rdp-caption_label {
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
}
.r-date-range .rdp-weekday {
    color: var(--text-soft);
    font-weight: 500;
    font-size: 11px;
    text-transform: none;
}
.r-date-range .rdp-day_button {
    color: var(--text);
}
.r-date-range .rdp-day_button:hover:not([disabled]) {
    background: oklch(0.24 0.005 80);
}
.r-date-range .rdp-outside .rdp-day_button {
    color: var(--text-soft);
}
.r-date-range .rdp-today:not(.rdp-selected) .rdp-day_button {
    color: var(--accent);
    font-weight: 600;
}
.r-date-range .rdp-selected .rdp-day_button {
    border: none;
    font-weight: 500;
}
.r-date-range .rdp-range_start .rdp-day_button,
.r-date-range .rdp-range_end .rdp-day_button {
    background: var(--accent);
    color: oklch(0.98 0.005 80);
}
.r-date-range .rdp-range_middle .rdp-day_button {
    background: var(--rdp-range_middle-background-color);
    color: var(--rdp-range_middle-color);
    border-radius: 0;
}
.r-date-range .rdp-range_start:not(.rdp-range_end) .rdp-day_button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.r-date-range .rdp-range_end:not(.rdp-range_start) .rdp-day_button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.r-date-range .rdp-button_previous,
.r-date-range .rdp-button_next {
    color: var(--text);
    background: transparent;
    border-radius: 6px;
}
.r-date-range .rdp-button_previous:hover:not([disabled]),
.r-date-range .rdp-button_next:hover:not([disabled]) {
    background: oklch(0.24 0.005 80);
}
.r-date-range .rdp-chevron { fill: currentColor; }

/* ---------- Tooltip ---------- */
.r-tip { display: inline-flex; }
.r-tip-pop {
    z-index: 100;
    width: max-content;
    max-width: 320px;
    padding: 7px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    pointer-events: none;
}

/* ---------- Misc ---------- */
.r-progress { height: 6px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.r-progress > div { height: 100%; background: var(--accent); border-radius: 2px; }
.r-divider { height: 1px; background: var(--border-faint); margin: 22px 0; }
.r-empty {
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 36px;
    text-align: center;
    color: var(--text-muted);
}
.r-empty .empty-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 4px; }

.r-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text-muted);
}
.r-group-bar.expandable { cursor: pointer; transition: background 0.14s; }
.r-group-bar.expandable:hover { background: var(--hover); }
.r-group-bar .chev { transition: transform 0.15s; }
.r-group-bar.open .chev { transform: rotate(90deg); }
.r-group-name { display: flex; align-items: center; gap: 9px; }
.r-group-name strong { color: var(--text); font-weight: 600; font-size: 13px; }

.r-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-faint);
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Grid helpers ---------- */
.r-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.r-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Collapse multi-column page layouts to a single column at narrow widths so
   their contents don't overflow the viewport. */
@media (max-width: 880px) {
    .r-grid-2-1, .r-grid-2 { grid-template-columns: 1fr; }
    .r-grid-3 { grid-template-columns: 1fr; }
}
.r-stack { display: flex; flex-direction: column; gap: 20px; }
.r-stack.tight { gap: 12px; }
.r-row { display: flex; align-items: center; gap: 14px; }

/* ---------- Section header inside content ---------- */
.r-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 14px; flex-wrap: wrap; }
.r-section-title { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.r-section-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Command palette ---------- */
.r-cmdp-mask {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 15, 0.45);
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    backdrop-filter: blur(6px);
}
.dark .r-cmdp-mask { background: rgba(0, 0, 0, 0.6); }
.r-cmdp {
    width: 560px;
    max-width: 92%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--text);
}
.r-cmdp-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-faint);
}
.r-cmdp-input input { all: unset; flex: 1; font-size: 15px; color: var(--text); }
.r-cmdp-input input::placeholder { color: var(--text-soft); }
.r-cmdp-list { max-height: 380px; overflow: auto; padding: 6px; }
.r-cmdp-group {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    padding: 8px 10px 4px;
    font-weight: 600;
}
.r-cmdp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13.5px;
}
.r-cmdp-item:hover, .r-cmdp-item.sel { background: var(--surface-2); }
.r-cmdp-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.r-cmdp-item .grow { flex: 1; }
.r-cmdp-foot {
    padding: 9px 16px;
    border-top: 1px solid var(--border-faint);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: var(--text-soft);
}
.r-cmdp-foot kbd {
    font-family: inherit;
    padding: 1px 5px;
    background: var(--surface-2);
    border: 1px solid var(--border-faint);
    border-radius: 3px;
}

/* ---------- Login ---------- */
.r-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--bg);
}
.r-login-card {
    width: 380px;
    max-width: 100%;
    padding: 36px 32px;
    border: 1px solid var(--border-faint);
    background: var(--surface);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    text-align: center;
}
.r-login-logo {
    width: 48px; height: 48px;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-fg);
    display: grid; place-items: center;
    font-weight: 700; font-size: 22px;
    box-shadow: var(--shadow-sm);
}

/* ---------- Alerts ---------- */
.r-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 5px;
    border: 1px solid var(--border-faint);
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
}
.r-alert.warn {
    background: var(--warn-bg);
    border-color: color-mix(in oklch, var(--warn) 30%, transparent);
    color: oklch(0.40 0.10 70);
}
.dark .r-alert.warn { color: var(--warn); }
.r-alert.err {
    background: var(--err-bg);
    border-color: color-mix(in oklch, var(--err) 30%, transparent);
    color: oklch(0.40 0.14 25);
}
.dark .r-alert.err { color: var(--err); }
.r-alert.info {
    background: var(--info-bg);
    border-color: color-mix(in oklch, var(--info) 30%, transparent);
    color: oklch(0.36 0.12 250);
}
.dark .r-alert.info { color: var(--info); }

/* ---------- Key/value list ---------- */
.r-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; font-size: 13px; }
.r-kv dt { color: var(--text-soft); font-size: 11.25px; align-self: center; }
.r-kv dd { margin: 0; color: var(--text); }

/* ---------- Avatar / member stack ---------- */
.r-member-stack { display: inline-flex; }
.r-member-stack > * { margin-left: -6px; }
.r-member-stack > *:first-child { margin-left: 0; }
.r-member-stack .r-ava-sm { border: 2px solid var(--surface); }
.r-ava-sm {
    width: 24px; height: 24px;
    border-radius: 4px;
    display: grid; place-items: center;
    font-weight: 600;
    color: white;
    font-size: 11px;
}

/* ---------- Profile / preferences ---------- */
.r-prefs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) {
    .r-prefs-grid { grid-template-columns: 1fr; }
}
.r-palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.r-palette-btn {
    appearance: none;
    position: relative;
    height: 64px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.r-palette-btn:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.r-palette-btn[aria-checked="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 35%, transparent);
}
.r-palette-btn-swatch {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.r-palette-btn-swatch > div { display: flex; flex-direction: column; }
.r-palette-btn-swatch i { display: block; flex: 1; }
.r-palette-btn-check {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
    color: white;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
.r-palette-btn-label {
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---------- Environment color picker ---------- */
.r-env-color-pick {
    all: unset;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--border-faint);
    background: var(--surface-2);
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
.r-env-color-pick:hover { background: var(--hover); border-color: var(--text-soft); }
.r-env-color-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-env-color-pick[aria-checked="true"] {
    border-color: currentColor;
    background: color-mix(in oklch, currentColor 12%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 35%, transparent);
}

/* ---------- Loading spinner ---------- */
.r-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in oklch, var(--text) 25%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: r-spin 0.8s linear infinite;
    display: inline-block;
}
.r-spinner.lg { width: 32px; height: 32px; border-width: 3px; }

/* ---------- Density: compact ---------- */
[data-density="compact"] body, [data-density="compact"] { font-size: 12.5px; }
[data-density="compact"] .r-topbar { height: 44px; flex: 0 0 44px; padding: 0 22px; }
[data-density="compact"] .r-content { padding: 22px 26px 32px; }
[data-density="compact"] .r-page-head { margin-bottom: 18px; gap: 12px; }
[data-density="compact"] .r-page-title { font-size: 19px; }
[data-density="compact"] .r-page-sub { font-size: 12.5px; margin-top: 4px; }
[data-density="compact"] .r-meta-bar { font-size: 11.75px; gap: 10px; }
[data-density="compact"] .r-panel-head { padding: 9px 14px; }
[data-density="compact"] .r-panel-body { padding: 14px; }
[data-density="compact"] .r-table td { padding: 9px 14px; }
[data-density="compact"] .r-table th { padding: 7px 14px; }
[data-density="compact"] .r-group-bar { padding: 7px 14px; }
[data-density="compact"] .r-stat { padding: 10px 14px; }
[data-density="compact"] .r-stat-value { font-size: 20px; margin-top: 4px; }
[data-density="compact"] .r-stat-delta { font-size: 11px; margin-top: 4px; }
[data-density="compact"] .r-btn { padding: 5px 10px; font-size: 12px; }
[data-density="compact"] .r-btn.small { padding: 3px 7px; font-size: 11.5px; }
[data-density="compact"] .r-stack { gap: 14px; }
[data-density="compact"] .r-grid-2-1, [data-density="compact"] .r-grid-2 { gap: 14px; }
[data-density="compact"] .r-stat-grid { margin-bottom: 18px; }
[data-density="compact"] .r-tabs { margin-bottom: 18px; }
[data-density="compact"] .r-tab { padding: 7px 10px; font-size: 12.75px; }
[data-density="compact"] .r-side { padding: 14px 12px; gap: 16px; }
[data-density="compact"] .r-nav button { padding: 5px 9px; font-size: 12.75px; }
[data-density="compact"] .r-input { padding: 4px 9px; }
[data-density="compact"] .r-field { padding: 6px 10px; font-size: 12.5px; }
[data-density="compact"] .r-pill { font-size: 11px; padding: 1px 7px; }
[data-density="compact"] .r-status { font-size: 11px; padding: 1px 7px; }
[data-density="compact"] .r-logs { font-size: 11.25px; line-height: 1.55; padding: 11px 13px; }
