/* ============================================================================
   App theme layer — sits on top of Materia's compiled CSS (vendor-*.css).

   This is the ONE place to rebrand a new project. Two roles are defined:
   PRIMARY (the main brand colour) and ACCENT (a supporting second colour). Each
   is a small ramp, mapped to semantic tokens that FLIP between light and dark.

   Why the flip: a colour step readable on a light ground is unreadable on a dark
   one and vice-versa, so a single fixed hex can't serve both modes. Light mode
   uses darker steps for text/fills with white ink; dark mode uses brighter steps
   with dark ink. Keep that pattern when you retint.

   FixtureFeed: primary is the brand navy, accent the brand green, both from the
   extension's design handoff (docs/design_handoff_fixturefeed). Checked for WCAG
   (4.5:1 body text, 3:1 large text / graphics) on Materia's light and dark grounds.
   ========================================================================== */

:root {
    /* ---- PRIMARY ramp: FixtureFeed navy (design handoff #0F1D3F) ---- */
    --pri-700: #0f1d3f; /* text on light  ~16:1 on #fff */
    --pri-600: #0f1d3f; /* fill on light, carries white ink */
    --pri-500: #aeb8c9; /* fill on dark, carries navy ink ~9:1 */
    --pri-300: #c9d1de; /* text on dark */

    /* ---- ACCENT ramp: FixtureFeed green (#12C98A) ---- */
    --acc-700: #0a7a53; /* text on light ~5.4:1 on #fff (the brand green itself is too pale for text) */
    --acc-600: #0e9f6e; /* border / graphic on light, 3:1 */
    --acc-500: #12c98a; /* the brand green: fills in both modes, with its dark ink */
    --acc-300: #12c98a; /* text on dark ~8:1 */

    /* ---- Semantic roles — LIGHT ---- */
    --app-primary-text: var(--pri-700);
    --app-primary-fill: var(--pri-600);
    --app-primary-fill-hover: #22325c;
    --app-primary-soft: rgba(15, 29, 63, .08);
    --app-on-primary: #fff;

    /* The accent fill is the popup's primary action: green with #06331F ink, hover #0FB87D. */
    --app-accent-text: var(--acc-700);
    --app-accent-fill: var(--acc-500);
    --app-accent-fill-hover: #0fb87d;
    --app-accent-border: var(--acc-600);
    --app-accent-soft: rgba(18, 201, 138, .12);
    --app-on-accent: #06331f;

    /* ---- Hand back to Bootstrap so Materia's own components track the brand ---- */
    --bs-primary: var(--pri-600);
    --bs-primary-rgb: 15, 29, 63;
    --bs-link-color: var(--app-primary-text);
    --bs-link-hover-color: var(--acc-700);
    /* Bootstrap colours links from the -rgb pair, so these must match the two above. */
    --bs-link-color-rgb: 15, 29, 63;
    --bs-link-hover-color-rgb: 10, 122, 83;
    /* Solid, not a wash: a focus ring is a non-text indicator and owes 3:1 against
       the ground it lands on (WCAG 2.4.11); a tinted ring can't reach that. */
    --bs-focus-ring-color: var(--pri-600);

    /* ---- Brand type: Space Grotesk for UI, JetBrains Mono for data ---- */
    --bs-font-sans-serif: "Space Grotesk", system-ui, sans-serif;
    --bs-font-monospace: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Brand neutrals (handoff tokens), replacing Materia's blue-tinted greys ---- */
    --bs-body-color: #4b5563;
    --bs-body-color-rgb: 75, 85, 99;
    --bs-body-bg: #f7f8fa;
    --bs-body-bg-rgb: 247, 248, 250;
    --bs-emphasis-color: #0f1d3f;
    --bs-emphasis-color-rgb: 15, 29, 63;
    --bs-secondary-color: #6b7280;
    --bs-secondary-color-rgb: 107, 114, 128;
    --bs-tertiary-color: #9aa1ac;
    --bs-tertiary-color-rgb: 154, 161, 172;
    --bs-secondary-bg: #eef0f3;
    --bs-secondary-bg-rgb: 238, 240, 243;
    --bs-tertiary-bg: #f6f8fa;
    --bs-tertiary-bg-rgb: 246, 248, 250;
    --bs-border-color: #e6e8ec;
    --bs-border-color-translucent: #e6e8ec;
    --bs-border-light: #eef0f3;
    --bs-light: #eef0f3;
    --bs-light-rgb: 238, 240, 243;
    --bs-dark: #0f1d3f;
    --bs-dark-rgb: 15, 29, 63;
    --bs-secondary: #e1e4e9;
    --bs-secondary-rgb: 225, 228, 233;
    --bs-secondary-text-emphasis: #4b5563;
    --bs-light-text-emphasis: #4b5563;
    --bs-dark-text-emphasis: #4b5563;

    /* Status colours. The brand error red and green are too pale for text on white,
       so alerts use darker text steps of the same hues. */
    --bs-danger: #e25a5a;
    --bs-danger-rgb: 226, 90, 90;
    --bs-danger-text-emphasis: #b42828;
    --bs-danger-bg-subtle: rgba(226, 90, 90, .1);
    --bs-danger-border-subtle: rgba(226, 90, 90, .35);
    --bs-success: #0a7a53;
    --bs-success-rgb: 10, 122, 83;
    --bs-success-text-emphasis: #0a7a53;
    --bs-success-bg-subtle: rgba(18, 201, 138, .12);
    --bs-success-border-subtle: rgba(18, 201, 138, .4);
    --bs-warning-text-emphasis: #8a4b00;
    --bs-warning-bg-subtle: rgba(254, 168, 76, .14);
    --bs-form-valid-color: #0a7a53;
    --bs-form-valid-border-color: #0e9f6e;
    --bs-form-invalid-color: #b42828;
    --bs-form-invalid-border-color: #e25a5a;
    --bs-code-color: #0f1d3f; /* Materia's pink code reads as an error; mono data is navy */

    /* Radii from the handoff: 8 buttons and inputs, 10 rows, 12 cards. */
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: .75rem;

    /* No shadows anywhere: separation comes from hairlines and surface tints. */
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-box-shadow-inset: none;

    /* Materia's own surface ramp, re-pointed at the brand greys */
    --bs-theme-50: #fbfbfc;
    --bs-theme-100: #f6f8fa;
    --bs-theme-200: #eef0f3;
    --bs-theme-400: #e1e4e9;
    --bs-theme-500: #8c939f; /* input borders: 3:1 on white (WCAG 1.4.11) */
    --bs-theme-600: #6b7280;
    --bs-theme-700: #4b5563;
    --bs-theme-800: #1f2a44;
    --bs-theme-900: #0f1d3f;
    --bs-tertiary-emphasis-bg: #eef0f3;
    --bs-tertiary-content-bg: #f6f8fa;
    --bs-secondary-content-bg: #f6f8fa;
    --bs-theme-list-hover-bg: #f6f8fa;
    --bs-theme-component-bg: #fff;
    --bs-theme-popup-bg: #fff;
    --bs-theme-popup-hover-bg: #f6f8fa;
    --bs-theme-backdrop-bg: rgba(15, 29, 63, .45);
    --bs-theme-body-highlight-bg: #eef0f3;
    --bs-navbar-mobile-bg: #fff;
    --bs-sidebar-bg: #fff;
    --bs-sidebar-sub-bg: #fff;
    --bs-sidebar-close-handle-bg: #fff;
    --bs-sidebar-box-shadow: transparent;
    --bs-sidebar-border-color: #e6e8ec;
    --bs-scrollbar-bg: #e1e4e9;
    --bs-tooltips-bg: #0f1d3f;
    --bs-tooltips-color: #fff;

    /* Buttons and chips outside the accent: hairline border, navy text (handoff "Copy JSON") */
    --app-control-border: #e1e4e9;
    --app-hairline: #eef0f3;
}

/* ============================================================================
   DARK mode — every role re-points at the opposite end of the ramp. Must come
   after :root: `[data-bs-theme=dark]` and `:root` carry equal specificity, so
   source order decides.
   ========================================================================== */
[data-bs-theme="dark"] {
    --app-primary-text: var(--pri-300);
    --app-primary-fill: var(--pri-500);
    --app-primary-fill-hover: var(--pri-300);
    --app-primary-soft: rgba(174, 184, 201, .14);
    --app-on-primary: #0f1d3f;

    --app-accent-text: var(--acc-300);
    --app-accent-fill: var(--acc-500);
    --app-accent-fill-hover: #0fb87d;
    --app-accent-border: var(--acc-500);
    --app-accent-soft: rgba(18, 201, 138, .16);
    --app-on-accent: #06331f;

    --bs-primary: var(--pri-500);
    --bs-primary-rgb: 174, 184, 201;
    --bs-link-color: var(--app-primary-text);
    --bs-link-hover-color: var(--acc-300);
    --bs-link-color-rgb: 201, 209, 222;
    --bs-link-hover-color-rgb: 18, 201, 138;
    --bs-focus-ring-color: var(--pri-300);

    /* Dark neutrals built from the brand navy, with the handoff's dark-ground text #AEB8C9 */
    --bs-body-color: #aeb8c9;
    --bs-body-color-rgb: 174, 184, 201;
    --bs-body-bg: #0a1530;
    --bs-body-bg-rgb: 10, 21, 48;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #8b97ad;
    --bs-secondary-color-rgb: 139, 151, 173;
    --bs-tertiary-color: #6c7892;
    --bs-tertiary-color-rgb: 108, 120, 146;
    --bs-secondary-bg: #1a2a52;
    --bs-secondary-bg-rgb: 26, 42, 82;
    --bs-tertiary-bg: #142348;
    --bs-tertiary-bg-rgb: 20, 35, 72;
    --bs-border-color: #22325c;
    --bs-border-color-translucent: #22325c;
    --bs-border-light: #1a2a52;
    --bs-light: #1a2a52;
    --bs-light-rgb: 26, 42, 82;
    --bs-secondary: #22325c;
    --bs-secondary-rgb: 34, 50, 92;
    --bs-secondary-text-emphasis: #c9d1de;
    --bs-light-text-emphasis: #c9d1de;
    --bs-dark-text-emphasis: #c9d1de;

    --bs-danger-text-emphasis: #f29a9a;
    --bs-danger-bg-subtle: rgba(226, 90, 90, .16);
    --bs-danger-border-subtle: rgba(226, 90, 90, .45);
    --bs-success: #12c98a;
    --bs-success-rgb: 18, 201, 138;
    --bs-success-text-emphasis: #12c98a;
    --bs-success-bg-subtle: rgba(18, 201, 138, .16);
    --bs-warning-text-emphasis: #ffc98a;
    --bs-warning-bg-subtle: rgba(254, 168, 76, .14);
    --bs-form-valid-color: #12c98a;
    --bs-form-valid-border-color: #12c98a;
    --bs-form-invalid-color: #f29a9a;
    --bs-code-color: #c9d1de;

    --bs-theme-50: #0d1936;
    --bs-theme-100: #142348;
    --bs-theme-200: #1a2a52;
    --bs-theme-400: #22325c;
    --bs-theme-500: #5b6885; /* input borders: 3:1 on the card navy */
    --bs-theme-600: #8b97ad;
    --bs-theme-700: #aeb8c9;
    --bs-theme-800: #c9d1de;
    --bs-theme-900: #fff;
    --bs-tertiary-emphasis-bg: #1a2a52;
    --bs-tertiary-content-bg: #142348;
    --bs-secondary-content-bg: #142348;
    --bs-theme-list-hover-bg: #142348;
    --bs-theme-component-bg: #0f1d3f;
    --bs-theme-popup-bg: #0f1d3f;
    --bs-theme-popup-hover-bg: #1a2a52;
    --bs-theme-backdrop-bg: rgba(5, 10, 24, .7);
    --bs-theme-body-highlight-bg: #1a2a52;
    --bs-navbar-mobile-bg: #0f1d3f;
    --bs-sidebar-bg: #0f1d3f;
    --bs-sidebar-sub-bg: #0f1d3f;
    --bs-sidebar-close-handle-bg: #1a2a52;
    --bs-sidebar-box-shadow: transparent;
    --bs-sidebar-border-color: #22325c;
    --bs-scrollbar-bg: #22325c;
    --bs-tooltips-bg: #fff;
    --bs-tooltips-color: #0f1d3f;

    --app-control-border: #2c3d6a;
    --app-hairline: #1a2a52;
}

/* ---- Accent utilities ---- */
.text-accent { color: var(--app-accent-text) !important; }
.bg-accent-soft { background-color: var(--app-accent-soft) !important; }
.border-accent { border-color: var(--app-accent-border) !important; }

.btn-accent {
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-bg: var(--app-accent-fill);
    --bs-btn-border-color: var(--app-accent-fill);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-bg: var(--app-accent-fill-hover);
    --bs-btn-hover-border-color: var(--app-accent-fill-hover);
    --bs-btn-active-color: var(--app-on-accent);
    --bs-btn-active-bg: var(--app-accent-fill-hover);
    --bs-btn-active-border-color: var(--app-accent-fill-hover);
    --bs-btn-disabled-color: var(--app-on-accent);
    --bs-btn-disabled-bg: var(--app-accent-fill);
    --bs-btn-disabled-border-color: var(--app-accent-fill);
}

/* Solid brand call-to-action (Materia's own btn-theme is outline-only) */
.btn-primary-solid {
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-bg: var(--app-primary-fill);
    --bs-btn-border-color: var(--app-primary-fill);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-hover-bg: var(--app-primary-fill-hover);
    --bs-btn-hover-border-color: var(--app-primary-fill-hover);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary-fill-hover);
    --bs-btn-active-border-color: var(--app-primary-fill-hover);
    --bs-btn-disabled-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary-fill);
    --bs-btn-disabled-border-color: var(--app-primary-fill);
}

/* ---- Initials avatars (Avatar.razor) ---- */
.app-avatar {
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-primary-fill);
    color: var(--app-on-primary);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
}
.app-avatar.accent { background: var(--app-accent-fill); color: var(--app-on-accent); }
/* Initials are content, so the muted variant still owes 4.5:1: the lighter fill is
   what reads as muted, the ink stays legible. */
.app-avatar.muted { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ---- Stat card icon tile (StatCard.razor, PageIntro.razor) ---- */
.stat-tile {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

/* ---- Page intro heading (PageIntro.razor) ---- */
.page-intro { margin-bottom: 1.5rem; }
.page-intro h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }

/* ---- Locked / secure panel (AccessDenied.razor) ---- */
.secure-banner {
    border: 1px dashed var(--app-accent-border);
    background: var(--app-accent-soft);
    border-radius: .75rem;
}

/* ============================================================================
   FixtureFeed brand bits: the wordmark and the monospace data style from the
   extension's design (Space Grotesk 700 for the wordmark, JetBrains Mono for
   keys, prefixes, IDs and times).
   ========================================================================== */
.ff-wordmark {
    font-family: 'Space Grotesk', var(--bs-font-sans-serif);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}
.ff-wordmark .fixture { color: var(--bs-emphasis-color); }
.ff-wordmark .feed { color: #12c98a; }
.ff-mono { font-family: 'JetBrains Mono', var(--bs-font-monospace); font-size: .8125rem; }
.ff-secret {
    font-family: 'JetBrains Mono', var(--bs-font-monospace);
    font-size: .875rem;
    word-break: break-all;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--app-accent-border);
    border-radius: .5rem;
    padding: .75rem 1rem;
    white-space: pre-wrap;
}
.ff-signin { max-width: 26rem; margin: 8vh auto 2rem; }
.ff-public { max-width: 48rem; margin: 5vh auto 2rem; }

/* The mark swaps navy and white on dark grounds; the green lane stays (handoff rule). */
.ff-mark .ff-card { fill: #0f1d3f; }
.ff-mark .ff-line { fill: #ffffff; stroke: #ffffff; }
[data-bs-theme="dark"] .ff-mark .ff-card { fill: #ffffff; }
[data-bs-theme="dark"] .ff-mark .ff-line { fill: #0f1d3f; stroke: #0f1d3f; }

/* ============================================================================
   Brand components: the extension's look carried into the portal. Flat, 1px
   hairlines, 8px controls, 12px cards, Space Grotesk with mono for data.
   ========================================================================== */
body { letter-spacing: -0.005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-emphasis-color);
    font-weight: 700;
    letter-spacing: -0.03em;
}
code, kbd, pre, samp { font-family: var(--bs-font-monospace); }

/* Navy links sit close to the grey body text, so links inside running text carry an underline too. */
:is(p, .fs-7, .form-text, .alert, td) a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    text-decoration-color: rgba(var(--bs-link-color-rgb), .35);
}
:is(p, .fs-7, .form-text, .alert, td) a:not(.btn):hover { text-decoration-color: currentColor; }

/* Page title in the sticky header (header 16/700/-0.03em) */
.header-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.page-intro h1 { font-size: 1.375rem; letter-spacing: -0.03em; } /* title 22/700 */

/* Mono eyebrow: section labels like "Today" in the popup list. The handoff's #9AA1AC is
   2.6:1 on white, too faint for text people need to read, so labels use the muted grey (4.8:1). */
.ff-eyebrow {
    font-family: var(--bs-font-monospace);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Cards: white on the page grey, hairline border, no shadow */
.card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    --bs-card-box-shadow: none;
    --bs-card-cap-bg: transparent;
}
/* Card headings are section labels, set like the popup's eyebrows (a touch larger, as they head a card). */
.card-header {
    border-bottom: 1px solid var(--app-hairline);
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
/* Buttons, tabs and badges in a header keep their own type. */
.card-header :is(.btn, .ff-tab, .badge, .ff-pill, .form-control, .form-select) { text-transform: none; letter-spacing: normal; }
.card-header :is(.btn, .ff-tab, .form-control, .form-select) { font-family: var(--bs-font-sans-serif); }
.card-footer { border-top: 1px solid var(--app-hairline); background: var(--bs-theme-50); }

/* Buttons: 8px radius, 13px/500 labels */
.btn {
    --bs-btn-border-radius: .5rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3125rem; --bs-btn-font-size: .75rem; --bs-btn-border-radius: .5rem; }
.btn-lg { --bs-btn-border-radius: .5rem; }
.btn-accent { --bs-btn-font-weight: 700; }

/* Materia's blue outline button becomes the brand secondary ("Copy JSON"):
   hairline border, navy label, border darkens on hover. */
.btn-theme {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--bs-theme-component-bg);
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: var(--app-control-border);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-theme-component-bg);
    --bs-btn-hover-border-color: var(--bs-emphasis-color);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: var(--bs-emphasis-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-theme-component-bg);
    --bs-btn-disabled-border-color: var(--app-control-border);
    padding-block: var(--bs-btn-padding-y);
    padding-inline: var(--bs-btn-padding-x);
}

/* Inputs: white field, 8px radius, navy border on focus */
.form-control, .form-select {
    background-color: var(--bs-theme-component-bg);
    border-color: var(--bs-theme-500);
    border-radius: .5rem;
    font-size: .875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--app-primary-fill);
    box-shadow: 0 0 0 1px var(--app-primary-fill);
}
.form-control::placeholder { color: var(--bs-secondary-color); }
.form-label { color: var(--bs-emphasis-color); font-weight: 500; }

/* Alerts: tinted surface with a hairline, 10px radius */
.alert {
    --bs-alert-border-radius: .625rem;
    border: 1px solid var(--bs-alert-border-color, transparent);
}
.alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-border-color: var(--bs-danger-border-subtle); }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--bs-success-bg-subtle); --bs-alert-border-color: var(--bs-success-border-subtle); }
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--bs-warning-bg-subtle); --bs-alert-border-color: rgba(254, 168, 76, .4); }

/* Badges read as data chips: mono, pill, surface tint */
.badge {
    font-family: var(--bs-font-monospace);
    font-weight: 500;
    border-radius: 999px;
    letter-spacing: 0;
}
/* Materia's .text-bg-light / .text-bg-secondary put white text on a pale ground (~1.2:1)
   and don't flip between modes. These pair a surface and ink that flip together. */
.badge.text-bg-light,
.badge.text-bg-secondary {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-emphasis-color) !important;
}

/* Lists and tables: 10px rows with the popup's hover tint */
.list-group { --bs-list-group-border-color: var(--app-hairline); --bs-list-group-action-hover-bg: var(--bs-tertiary-bg); }
.table { --bs-table-border-color: var(--app-hairline); --bs-table-hover-bg: var(--bs-tertiary-bg); --bs-table-color: var(--bs-body-color); }
.table > thead th {
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Menus and popovers: hairline instead of a drop shadow */
.dropdown-menu {
    --bs-dropdown-box-shadow: none;
    --bs-dropdown-border-width: 1px;
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: .625rem;
    --bs-dropdown-link-active-bg: var(--app-primary-fill);
    --bs-dropdown-link-active-color: var(--app-on-primary);
}
.popover { --bs-popover-box-shadow: none; --bs-popover-border-width: 1px; }

/* Shell: the sidebar is navy like the extension's header (Sidebar.razor pins it to
   data-bs-theme="dark", so the tokens inside it are the dark ones in both modes). The
   navbar rail stays light and drops Materia's shadow. */
#sidebar { --bs-sidebar-bg: #0f1d3f; --bs-sidebar-sub-bg: #0f1d3f; border-right: 1px solid transparent; }
[data-bs-theme="dark"] #sidebar { border-right-color: var(--bs-border-color); }
.nav-bar { box-shadow: none !important; }
.header { background: linear-gradient(0deg, transparent 0, rgb(var(--bs-body-bg-rgb)) .75rem); }
.footer { color: var(--bs-secondary-color); }
.ff-legal { display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; }
.ff-legal a { color: inherit; }
.ff-legal a:hover { color: var(--bs-link-hover-color); }

/* Sidebar menu: #AEB8C9 labels that turn white on hover. The current page gets the
   extension's "feeding" pill treatment: a green tint with green text. */
#sidebar .menu {
    --menu-link-color: var(--bs-body-color);
    --menu-link-hover-color: #12c98a;
    --menu-link-highlight-bg: rgba(18, 201, 138, .16);
}
#sidebar .menu > li:not(.active, :has(a.active)):hover > div { --menu-link-color: #fff; }
#sidebar .menu > li > ul > li > a { border-radius: .5rem; }
#sidebar .menu > li > ul > li > a:not(.active):hover { --menu-link-bg: rgba(255, 255, 255, .06); --menu-link-color: #fff; }
#sidebar .menu > li > ul > li > a.active {
    --menu-link-color: #12c98a;
    --menu-link-bg: rgba(18, 201, 138, .16);
}

/* Status pill from the extension header ("feeding" / "paused" / "error"): mono label, dot. */
.ff-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(18, 201, 138, .14);
    color: var(--app-accent-text);
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    line-height: 1.2;
    white-space: nowrap;
}
.ff-pill .dot { width: 6px; height: 6px; border-radius: 3px; background: #12c98a; flex-shrink: 0; }
.ff-pill.error { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.ff-pill.error .dot { background: #e25a5a; }
.ff-pill.paused { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.ff-pill.paused .dot { background: var(--bs-secondary-color); }

/* Tabs from the extension popup: muted text, tint on hover, navy chip when selected. */
.ff-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ff-tab {
    padding: 7px 12px;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .12s ease, color .12s ease;
}
.ff-tab:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
.ff-tab[aria-pressed="true"], .ff-tab[aria-selected="true"] { background: var(--app-primary-fill); color: var(--app-on-primary); }

/* ============================================================================
   Match rows, loading rows and the "updated" line, from the extension's popup.
   ========================================================================== */
.ff-list { padding: 12px 14px; }

.ff-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease;
}
a.ff-row:hover, .ff-row.clickable:hover { background: var(--bs-tertiary-bg); color: inherit; }
.ff-row .time {
    width: 42px;
    flex-shrink: 0;
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    color: var(--bs-secondary-color);
}
.ff-row .main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ff-row .name {
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-row .meta {
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ff-row .meta .warn { color: var(--bs-danger-text-emphasis); }
.ff-row .score {
    flex-shrink: 0;
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}
/* Green is for live state: a played score. The darker green step keeps it readable on white. */
.ff-row .score.final { color: var(--app-accent-text); }

/* Loading rows: the list's geometry in #EEF0F3 blocks, pulsing between 1 and .5 */
.ff-skeleton .ff-row { padding-block: 13px; }
.ff-skeleton .block {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: var(--app-hairline);
    animation: ff-pulse 1.4s ease-in-out infinite;
}
.ff-skeleton .time.block { width: 42px; }
.ff-skeleton .main { gap: 6px; }
.ff-skeleton .main .block:first-child { width: 60%; height: 12px; }
.ff-skeleton .main .block:last-child { width: 30%; }
@keyframes ff-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ff-skeleton .block { animation: none; } }

/* "updated 3 minutes ago": mono meta with the green lane's dot */
.ff-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    color: var(--bs-secondary-color);
}
.ff-meta .dot { width: 6px; height: 6px; border-radius: 3px; background: #12c98a; flex-shrink: 0; }

/* Rows whose text runs long (error messages) wrap instead of cutting off. */
.ff-row .name.wrap { white-space: normal; line-height: 1.35; }
.ff-row .meta.wrap { white-space: normal; line-height: 1.5; }

/* Code and stack traces: mono on the surface tint with a hairline. */
.ff-code {
    font-family: var(--bs-font-monospace);
    font-size: .75rem;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--app-hairline);
    border-radius: .5rem;
    padding: .75rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

/* Destructive buttons in the brand error red. White on #E25A5A is only 3.5:1, so the light
   fill is a darker step of the same red; on dark it's the brand red with navy ink. */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b42828;
    --bs-btn-border-color: #b42828;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9a2020;
    --bs-btn-hover-border-color: #9a2020;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9a2020;
    --bs-btn-active-border-color: #9a2020;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b42828;
    --bs-btn-disabled-border-color: #b42828;
}
.btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: var(--bs-theme-component-bg);
    --bs-btn-border-color: var(--bs-danger-border-subtle);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
    --bs-btn-hover-border-color: #e25a5a;
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-border-color: #e25a5a;
    --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-danger-border-subtle);
}
[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #0f1d3f;
    --bs-btn-bg: #e25a5a;
    --bs-btn-border-color: #e25a5a;
    --bs-btn-hover-color: #0f1d3f;
    --bs-btn-hover-bg: #f29a9a;
    --bs-btn-hover-border-color: #f29a9a;
    --bs-btn-active-color: #0f1d3f;
    --bs-btn-active-bg: #f29a9a;
    --bs-btn-active-border-color: #f29a9a;
    --bs-btn-disabled-color: #0f1d3f;
    --bs-btn-disabled-bg: #e25a5a;
    --bs-btn-disabled-border-color: #e25a5a;
}

/* Blazor moves focus to the page heading after navigation, for screen readers. It doesn't need a ring. */
h1:focus { outline: none; }