/**
 * Matrix theme — Brian's DEVELOPER-only portal-wide skin. One of possibly
 * several themes registered in PortalThemeService::THEMES; each rides on
 * Bootstrap's own light/dark component CSS (data-bs-theme stays light/dark —
 * see public/index.php) and gets its whole look from its own stylesheet
 * keyed off `html[data-portal-theme="<key>"]`, which base.twig stamps
 * unconditionally. Adding a theme = one THEMES entry + one stylesheet like
 * this one + one entry in portal-theme.js's PORTAL_THEMES — nothing else in
 * the toggle/cascade machinery changes.
 *
 * Gate lives server-side (PortalThemeService::isAllowedFor — DEVELOPER only
 * for this theme, fail-closed) and the toggle only offers it to DEVELOPER
 * (footer.twig / navigation.twig read portalEligibleThemes) — this
 * stylesheet has no gate of its own, same as any other CSS: it does nothing
 * unless the attribute is present.
 *
 * Palette matches /RND (public/css/rnd/rnd.css) so the personal dashboard
 * and "the rest of the portal in the same mood" read as one thing.
 */

/* ── Content tokens — redefine --portal-c-* so every .portal-page-themed
   surface (cards, buttons, badges, forms, tables — all of portal-kit) picks
   this up automatically with zero per-component CSS. Mirrors the token SET
   in portal-components.css's dark block; only the values changed. ── */
html[data-portal-theme="matrix"] body {
    --portal-c-surface: rgba(6, 20, 10, 0.74) !important;
    --portal-c-surface-opaque: #07150a !important;
    /* The see-through twin, and one of the few rungs Matrix cannot let fall
       through to dark: it is what the launcher cards, the home page's floor
       group and the docs tiles paint with, and dark's value is a purple-grey
       that reads as a stain on this canvas rather than as glass. 0.30 rather
       than the 0.20 the dark chrome uses — the rain behind it is moving
       detail, not a smooth gradient, and the text has to win. */
    --portal-c-surface-seethrough: rgba(6, 20, 10, 0.30) !important;
    /* The ladder, mirrored ONCE. Matrix declares with !important on
       html[data-portal-theme], so any token it omits falls through to dark —
       coherent enough for a DEVELOPER-only workbench. That is why this is the
       only mirror v3 pays for: doing it again on every later token commit is a
       recurring tax for a theme no user sees. */
    --portal-c-surface-sunken: rgba(0, 0, 0, 0.36) !important;
    --portal-c-surface-raised: rgba(12, 34, 18, 0.78) !important;
    --portal-c-surface-raised-opaque: #0c2212 !important;
    --portal-c-surface-lift: rgba(57, 255, 106, 0.05) !important;

    --portal-c-specular: rgba(57, 255, 106, 0.16) !important;
    --portal-c-specular-strong: rgba(57, 255, 106, 0.24) !important;
    --portal-c-edge-shade: rgba(0, 0, 0, 0.6) !important;
    --portal-c-edge-bloom: rgba(57, 255, 106, 0.05) !important;
    --portal-c-edge-card: inset 0 1px 0 var(--portal-c-specular),
                          inset 0 -1px 0 var(--portal-c-edge-shade) !important;
    --portal-c-edge-dialog: inset 0 1px 0 var(--portal-c-specular-strong),
                            inset 0 -1px 0 var(--portal-c-edge-shade),
                            inset 0 14px 28px -20px var(--portal-c-edge-bloom) !important;
    --portal-c-edge-hero: inset 0 1px 0 var(--portal-c-specular-strong),
                          inset 0 -1px 0 var(--portal-c-edge-shade),
                          inset 0 22px 44px -26px var(--portal-c-edge-bloom) !important;
    --portal-c-surface-sheen: linear-gradient(180deg, rgba(57, 255, 106, 0.05) 0%, rgba(57, 255, 106, 0) 22%) !important;
    --portal-c-btn-specular: rgba(57, 255, 106, 0.14) !important;
    --portal-c-surface-header: rgba(0, 0, 0, 0.4) !important;

    --portal-c-border: rgba(0, 0, 0, 0.78) !important;
    --portal-c-border-subtle: rgba(0, 0, 0, 0.5) !important;
    --portal-c-edge-control: rgba(57, 255, 106, 0.22) !important;
    --portal-c-edge-control-subtle: rgba(57, 255, 106, 0.1) !important;

    --portal-c-text: #d6ffe0 !important;
    --portal-c-text-muted: #6fae7f !important;

    --portal-c-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    --portal-c-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55) !important;
    --portal-c-shadow-pressed: 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important;

    --portal-c-brand: #0f5c26 !important;
    --portal-c-accent: #39ff6a !important;
    --portal-c-accent-muted: color-mix(in srgb, var(--portal-c-accent) 14%, transparent) !important;
    --portal-c-accent-border: color-mix(in srgb, var(--portal-c-accent) 32%, transparent) !important;
    --portal-c-focus-ring: 0 0 0 1px var(--portal-c-accent-border), 0 0 0 0.25rem var(--portal-c-accent-muted) !important;
    --portal-c-on-accent: #04180a !important;

    --portal-c-tab-track: rgba(0, 0, 0, 0.5) !important;
    --portal-c-tab-track-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    --portal-c-tab-hover: rgba(57, 255, 106, 0.08) !important;
    --portal-c-tab-active-bg: #103a1c !important;
    --portal-c-tab-active-border: rgba(0, 0, 0, 0.55) !important;
    --portal-c-tab-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(57, 255, 106, 0.18) !important;
    --portal-c-tab-active-color: #d6ffe0 !important;
    --portal-c-tab-inactive-color: rgba(57, 255, 106, 0.55) !important;

    --portal-c-btn-primary-bg: #14622c !important;
    --portal-c-btn-primary-bg-hover: #1c7d39 !important;
    --portal-c-btn-primary-border: rgba(57, 255, 106, 0.2) !important;
    --portal-c-btn-primary-border-hover: rgba(57, 255, 106, 0.4) !important;
    --portal-c-btn-primary-shadow: inset 0 1px 0 var(--portal-c-btn-specular), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    --portal-c-btn-primary-shadow-hover: inset 0 1px 0 var(--portal-c-btn-specular), 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2) !important;

    --portal-c-btn-danger-bg: #c92a2a !important;
    --portal-c-btn-danger-bg-hover: #e03131 !important;
    --portal-c-btn-danger-border: rgba(57, 255, 106, 0.1) !important;
    --portal-c-btn-danger-border-hover: rgba(57, 255, 106, 0.16) !important;
    --portal-c-btn-danger-shadow: inset 0 1px 0 var(--portal-c-btn-specular), 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(201, 42, 42, 0.2) !important;
    --portal-c-btn-danger-shadow-hover: inset 0 1px 0 var(--portal-c-btn-specular), 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(201, 42, 42, 0.25) !important;
    --portal-c-btn-danger-disabled-bg: rgba(201, 42, 42, 0.35) !important;

    --portal-c-btn-outline-border: rgba(57, 255, 106, 0.28) !important;
    --portal-c-btn-outline-bg: rgba(57, 255, 106, 0.04) !important;
    --portal-c-btn-outline-color: rgba(214, 255, 224, 0.85) !important;
    --portal-c-btn-outline-hover-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-btn-outline-hover-color: #d6ffe0 !important;
    --portal-c-btn-outline-hover-border: rgba(57, 255, 106, 0.4) !important;

    --portal-c-badge-inset: inset 0 1px 0 rgba(57, 255, 106, 0.1) !important;
    --portal-c-badge-brand-bg: #0f5c26 !important;
    --portal-c-badge-brand-border: rgba(57, 255, 106, 0.16) !important;
    --portal-c-badge-live-bg: var(--portal-c-accent-muted) !important;
    --portal-c-badge-live-color: var(--portal-c-accent) !important;
    --portal-c-badge-muted-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-badge-muted-color: rgba(214, 255, 224, 0.7) !important;
    --portal-c-badge-running-bg: color-mix(in srgb, var(--portal-c-accent) 16%, transparent) !important;
    --portal-c-badge-running-color: var(--portal-c-accent) !important;
    --portal-c-badge-success-bg: rgba(57, 255, 106, 0.16) !important;
    --portal-c-badge-success-color: #6dff92 !important;
    --portal-c-badge-warning-bg: rgba(255, 206, 84, 0.16) !important;
    --portal-c-badge-warning-color: #ffce54 !important;
    --portal-c-badge-danger-bg: rgba(255, 95, 86, 0.16) !important;
    --portal-c-badge-danger-color: #ff8a82 !important;
    --portal-c-badge-info-bg: rgba(57, 255, 106, 0.1) !important;
    --portal-c-badge-info-color: #9dffb8 !important;

    --portal-c-btn-success-bg: #2f9e44 !important;
    --portal-c-btn-success-bg-hover: #37b24c !important;
    --portal-c-btn-success-border: rgba(57, 255, 106, 0.12) !important;
    --portal-c-btn-success-border-hover: rgba(57, 255, 106, 0.2) !important;
    --portal-c-btn-warning-bg: #d9822b !important;
    --portal-c-btn-warning-bg-hover: #ec8f30 !important;
    --portal-c-btn-warning-border: rgba(57, 255, 106, 0.12) !important;
    --portal-c-btn-warning-border-hover: rgba(57, 255, 106, 0.2) !important;

    --portal-c-progress-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-progress-bar-bg: var(--portal-c-accent) !important;
    --portal-c-progress-bar-stripe: rgba(0, 0, 0, 0.2) !important;

    --portal-c-skeleton-bg: rgba(57, 255, 106, 0.08) !important;
    --portal-c-skeleton-sheen: rgba(57, 255, 106, 0.06) !important;

    --portal-c-status-idle: var(--portal-c-text-muted) !important;
    --portal-c-row-hover: rgba(57, 255, 106, 0.05) !important;
    --portal-c-row-selected: color-mix(in srgb, var(--portal-c-accent) 14%, transparent) !important;

    --portal-c-elev-overlay: 0 4px 16px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.7) !important;
    --portal-c-elev-menu: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
    --portal-c-elev-hero: 0 8px 24px rgba(0, 0, 0, 0.55), 0 32px 88px rgba(0, 0, 0, 0.72) !important;

    --portal-c-input-bg: rgba(0, 0, 0, 0.45) !important;
    --portal-c-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    --portal-c-input-bg-focus: var(--portal-c-input-bg) !important;
    --portal-c-input-placeholder: rgba(214, 255, 224, 0.35) !important;

    --portal-c-chrome-hover: rgba(57, 255, 106, 0.1) !important;
    --portal-c-overlay: rgba(6, 20, 10, 0.78) !important;
    --portal-c-overlay-opaque: #07150a !important;
    --portal-c-scrim: rgba(0, 0, 0, 0.6) !important;
    --portal-c-kbd: rgba(57, 255, 106, 0.4) !important;

    /* Canvas — replace the violet/teal aurora with a quiet green vignette. */
    background-color: #030503 !important;
    background-image: radial-gradient(ellipse 70rem 34rem at 85% -10%, rgba(57, 255, 106, 0.05), transparent 60%) !important;
    background-attachment: fixed !important;
    color: var(--portal-c-text) !important;
}

/* ── Chrome: sidebar/system-bar/tab-bar go black/green, overriding the
   dark chrome rules those elements keep matching (they stay data-bs-theme
   ="dark" for Bootstrap's sake — see index.php). ──

   #site-sidebar left this list when the sidebar died in v3.1.1 and rejoined it
   on 2026-08-28. The comment above never stopped saying "sidebar", which is
   how the gap was found: without the selector the slab kept the DARK chrome
   rule — purple-tinted glass carrying a magenta-and-teal aurora — down the
   left of a green-on-black page. The `background-image` below is what puts
   that aurora out, so the slab needs nothing of its own here. */
html[data-portal-theme="matrix"] #site-sidebar,
html[data-portal-theme="matrix"] #site-footer,
html[data-portal-theme="matrix"] #portal-tab-bar {
    /* TRANSLUCENT, like every other theme's chrome. This was #030503 — fully
       opaque, no alpha — and it got away with it for a long time because on a
       near-black canvas an opaque near-black bar looks exactly like a
       transparent one. It was not free, though: the dark chrome rule's
       backdrop-filter still applied underneath, so the bar paid for a
       per-frame blur of a backdrop it then painted over.
       Same lever as the dark chrome (--portal-chrome-opacity-dark), which
       means the three glass gates at the end of portal-components.css take
       this bar near-opaque along with everything else. */
    background-color: rgba(3, 5, 3, var(--portal-chrome-opacity-dark, 0.2)) !important;
    background-image: linear-gradient(
        180deg,
        rgba(9, 26, 14, var(--portal-chrome-opacity-dark, 0.2)) 0%,
        rgba(3, 5, 3, var(--portal-chrome-opacity-dark, 0.2)) 100%
    ) !important;
    border-color: rgba(57, 255, 106, 0.22) !important;
    /* A slab has four edges, and a translucent one NEEDS them — opaque, the
       bar was its own silhouette and could afford `box-shadow: none`. Green
       specular rather than the dark theme's white: on this canvas the
       theme's line colour is the light source. */
    box-shadow: inset 0 1px 0 rgba(57, 255, 106, 0.16),
                inset 0 -1px 0 rgba(0, 0, 0, 0.6),
                0 0 24px rgba(57, 255, 106, 0.08) !important;
    color: #39ff6a !important;
}

html[data-portal-theme="matrix"] #site-footer { border-top: 1px solid rgba(57, 255, 106, 0.22) !important; }

/* .portal-tab-link, not `a`: the tab bar's Search and Menu slots are
   <button>s, and the anchor-only selector left them wearing the dark-chrome
   colors in a green bar. */
html[data-portal-theme="matrix"] #site-footer .portal-bar-breadcrumb,
html[data-portal-theme="matrix"] #site-footer .portal-launcher-btn,
html[data-portal-theme="matrix"] #site-footer .portal-bar-user-btn,
html[data-portal-theme="matrix"] #site-sidebar .portal-sidebar-link,
html[data-portal-theme="matrix"] #portal-tab-bar .portal-tab-link {
    color: rgba(57, 255, 106, 0.78) !important;
}

/* The current row keeps its accent pill (--portal-c-accent is green here) and
   its weight, but not a colour of its own — the rule above is !important and
   flattens it, exactly as it already flattens the tab bar's [aria-current].
   Two carriers is what the dark theme has too; only the third is lost. */
html[data-portal-theme="matrix"] #site-sidebar .portal-sidebar-link i {
    color: inherit !important;
}

html[data-portal-theme="matrix"] #portal-tab-bar .portal-tab-link:hover {
    color: #39ff6a !important;
    background-color: rgba(57, 255, 106, 0.1) !important;
    text-shadow: 0 0 8px rgba(57, 255, 106, 0.35);
}

html[data-portal-theme="matrix"] .dropdown-menu {
    background-color: #030503 !important;
    border-color: rgba(57, 255, 106, 0.22) !important;
    box-shadow: 0 0 20px rgba(57, 255, 106, 0.12) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-header,
html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item {
    color: rgba(57, 255, 106, 0.78) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item:hover,
html[data-portal-theme="matrix"] .dropdown-menu .dropdown-item:focus {
    color: #39ff6a !important;
    background-color: rgba(57, 255, 106, 0.1) !important;
}

html[data-portal-theme="matrix"] .dropdown-menu .dropdown-divider {
    border-color: rgba(57, 255, 106, 0.22) !important;
}

/* Bell + search + drawer toggle: green icon/border only — no filled
   background plate. */
html[data-portal-theme="matrix"] .portal-notif-btn,
html[data-portal-theme="matrix"] .portal-launcher-btn,
html[data-portal-theme="matrix"] .portal-bar-user-btn {
    border-color: rgba(57, 255, 106, 0.2) !important;
    color: #39ff6a !important;
}

/* Sparky's white-ink art already reads correctly on this canvas (portal-theme.js
   treats matrix like dark for the art swap) — just drop the usual purple/teal
   glow some chrome surfaces put behind icons/badges, if any survive the token
   pass above, in favor of the flat green line work. */
html[data-portal-theme="matrix"] .portal-icon-badge {
    box-shadow: none !important;
}

/* ── Matrix rain (public/js/site/portal-matrix-rain.js) ─────────────────
   Injected as <body>'s FIRST child — plain DOM-order stacking (no z-index
   needed) puts it behind every other body child, chrome included, the same
   way /RND's canvas sits behind .brian-shell. [hidden] is how the script
   parks it between theme flips instead of destroying/recreating the canvas. */
#portal-matrix-rain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.16;
    pointer-events: none;
}

#portal-matrix-rain[hidden] {
    display: none;
}

/* ── Sliders (.form-range) — Bootstrap's stock thumb/track are near-invisible
   on this canvas; recolor to the accent green. Separate rules per engine:
   a browser drops a whole selector list when it doesn't recognize the
   other engine's pseudo. */
html[data-portal-theme="matrix"] .form-range::-webkit-slider-thumb {
    background-color: var(--portal-c-accent);
    box-shadow: 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range::-webkit-slider-runnable-track {
    background-color: rgba(57, 255, 106, 0.18);
}

html[data-portal-theme="matrix"] .form-range::-moz-range-thumb {
    background-color: var(--portal-c-accent);
    box-shadow: 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range::-moz-range-track {
    background-color: rgba(57, 255, 106, 0.18);
}

html[data-portal-theme="matrix"] .form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--portal-c-focus-ring), 0 0 0 1px var(--portal-c-on-accent);
}

html[data-portal-theme="matrix"] .form-range:focus::-moz-range-thumb {
    box-shadow: var(--portal-c-focus-ring), 0 0 0 1px var(--portal-c-on-accent);
}