/** * Kyvvu theme tokens and the Bulma 0.9.4 dark layer. * * Loaded LAST on all five entry points, after Bulma and after our own sheets, * so the overrides below win on order as well as specificity. * * --------------------------------------------------------------------------- * THE INVARIANT: deleting this file restores the pre-theme rendering exactly. * * style.css keeps its own :root block with the original light literals, and * every literal we replaced elsewhere carries today's value as the var() * fallback -- `var(--color-surface-raised, #f5f5f5)`. So a 404, a stale cache * or a deleted file degrades to today's light UI rather than to a broken page, * and "did light mode change?" is answerable by deleting two files and * re-screenshotting rather than by reading a diff. * --------------------------------------------------------------------------- * * Why there is no `@media (prefers-color-scheme: dark)` block full of tokens: * js/theme.js resolves auto -> light|dark itself and writes the answer to * , so the dark palette is declared exactly ONCE below. The * three-selector pattern would need the whole dark list duplicated into a media * query, and CSS gives us no way to share it without a build step. * * We stay on Bulma 0.9.4 deliberately. Bulma 1.x has native dark mode but does * not fix what we need: `.has-text-grey` is a literal (#69748c) in both its * schemes, and `--bulma-light-l` is never redefined in a dark block, so all 89 * of our `is-light` chips would stay near-white there too. Upgrading would mean * writing this same layer AND absorbing a light-mode restyle. Keep every * selector here expressed in OUR token names so a future upgrade rewrites the * selectors and keeps the vocabulary. */ /* ========================================================================== * * Tokens -- light * * style.css:7-19 still owns the eleven original names (--color-primary, * --color-text, --color-white, ...). This block adds only what was never * tokenised. Values are today's literals, so in light mode this file is a * no-op by construction. * ========================================================================== */ :root { color-scheme: light; /* Surfaces. --color-white in style.css is the base surface; these are the * shades layered on top of it. */ --color-surface: #ffffff; /* navbar, box, card, modal body, table */ --color-surface-raised: #f5f5f5; /* 
, code, modal head/foot, chips    */
  --color-surface-alt:     #f0f0f0;  /* the denser 
 variant in events.js  */
  --color-surface-sunken:  #fafafa;  /* footer, striped and task-child rows    */
  --color-surface-inset:   #f9f9f9;  /* detail rows nested under a table row   */
  --color-surface-hover:   #f5f5f5;  /* row hover                              */

  /* Text. --color-text (#4a4a4a) and --color-text-light (#888888) already
   * exist in style.css. */
  --color-text-strong:     #363636;  /* Bulma $text-strong: titles, th, labels */
  --color-text-muted:      #7a7a7a;  /* Bulma $grey: .has-text-grey, 92 uses   */
  --color-text-faint:      #b5b5b5;  /* Bulma $grey-light                      */

  /* Borders. --color-border (#eee) already exists in style.css. */
  --color-border-input:    #dbdbdb;  /* Bulma $border: inputs, tabs, table     */
  --color-border-subtle:   #f0f0f0;  /* list hairlines                         */
  --color-border-mid:      #e8e8e8;  /* footer rule, timeline spine            */
  --color-border-strong:   #e0e0e0;  /* 2px section rules                      */

  /* Scheme-invariant. These are the same in BOTH themes and must not be
   * redefined in the dark block.
   *
   * --color-on-accent is the white that sits ON a saturated chip. style.css
   * used --color-white for this at three sites, which is a different job from
   * the surface it names elsewhere -- redefining that one name for dark would
   * put near-black text on the green, red and blue tags. */
  --color-on-accent:       #ffffff;
  --color-warning-text:    #4a4a4a;  /* #ffdd57 needs dark text in both themes */
  --color-success-strong:  #48c78e;  /* Bulma 0.9.4 $success; dashboard.js     */

  /* Accents that do vary. */
  --color-primary-tint:    #fff5ed;  /* table row hover                        */
  --color-link:            #3273dc;
  --color-link-hover:      #363636;  /* Bulma a:hover -- near-black, must flip */

  /* is-light pairs, shared by .tag / .button / .notification. */
  --color-danger-soft:     #feecf0;  --color-danger-soft-text:  #cc0f35;
  --color-success-soft:    #effaf5;  --color-success-soft-text: #257953;
  --color-warning-soft:    #fffaeb;  --color-warning-soft-text: #946c00;
  --color-info-soft:       #eff5fb;  --color-info-soft-text:    #296fa8;
  --color-link-soft:       #eff1fa;  --color-link-soft-text:    #3850b7;
  --color-primary-soft:    #fff5eb;  --color-primary-soft-text: #b35400;
  --color-chip-bg:         #f5f5f5;  --color-chip-text:         rgba(0,0,0,.7);

  /* Elevation. Kept as whole shadows rather than an rgb triplet so the dark
   * values can change spread and add a hairline, not just opacity. */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-nav:   0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-menu:  0 8px 16px rgba(0, 0, 0, 0.10);
  --shadow-login: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-box:   0 .5em 1em -.125em rgba(10, 10, 10, .1),
                  0 0 0 1px rgba(10, 10, 10, .02);   /* Bulma .box / .card */
  --color-overlay: rgba(10, 10, 10, 0.86);           /* .modal-background  */

  /* Loading screen. Deliberately its own token: the overlay is #ffffff today
   * while --color-background is #f9f9f9, so reusing that would move a pixel. */
  --color-loading-bg:    #ffffff;
  --color-spinner-track: #f3f3f3;
  --color-spinner-head:  #3273dc;

  /* Sidebar. sidebar.css uses a Tailwind-ish ramp that does not match
   * style.css's warm greys (#e5e7eb vs #eee, #6b7280 vs #888888), and an
   * active state in BLUE while the brand is orange. Folding either into the
   * shared tokens would move light-mode pixels, so the sidebar keeps a
   * parallel set at its current literals. Unifying the blue onto the brand is
   * a product decision and its own ticket. */
  --sidebar-bg:           #ffffff;
  --sidebar-border:       #e5e7eb;
  --sidebar-text:         #6b7280;
  --sidebar-text-strong:  #111827;
  --sidebar-text-sub:     #9ca3af;
  --sidebar-hover-bg:     #f3f4f6;
  --sidebar-hover-text:   #374151;
  --sidebar-active-bg:    #eff6ff;
  --sidebar-accent:       #3b82f6;
  --sidebar-overlay:      rgba(0, 0, 0, 0.3);
  --app-bg:               #f9fafb;

  /* Timeline. */
  --color-timeline-spine: #e8e8e8;
  --color-timeline-dot:   #dbdbdb;
  --color-timeline-halo:  #ffffff;   /* ring between the dot and the surface */
}

/* ========================================================================== *
 * Tokens -- dark
 *
 * Redefines the eleven names style.css owns PLUS the ones added above. The
 * scheme-invariant group (--color-on-accent, --color-warning-text,
 * --color-success-strong) is deliberately absent.
 * ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* The eleven from style.css:7-19. Brand and status hues are unchanged;
   * only the greys move. */
  --color-text:            #c7ccd6;
  --color-text-light:      #9aa2b1;
  --color-border:          #2b2f35;
  --color-background:      #131519;
  --color-white:           #1b1e24;   /* the SURFACE role -- see the note above */

  --color-surface:         #1b1e24;
  --color-surface-raised:  #23272f;
  --color-surface-alt:     #202328;
  --color-surface-sunken:  #16181c;
  --color-surface-inset:   #1f2229;
  --color-surface-hover:   #2a2f38;

  --color-text-strong:     #f0f2f5;
  --color-text-muted:      #9aa2b1;
  --color-text-faint:      #6f7784;

  --color-border-input:    #343a45;
  --color-border-subtle:   #24282e;
  --color-border-mid:      #2b2f35;
  --color-border-strong:   #434b58;

  --color-primary-tint:    rgba(255, 119, 0, 0.10);
  --color-link:            #7aa5f0;
  --color-link-hover:      #ffffff;

  --color-danger-soft:     rgba(241, 70, 104, 0.16); --color-danger-soft-text:  #ff8fa3;
  --color-success-soft:    rgba(72, 199, 116, 0.16); --color-success-soft-text: #74d99f;
  --color-warning-soft:    rgba(255, 221, 87, 0.16); --color-warning-soft-text: #f0d178;
  --color-info-soft:       rgba(50, 152, 220, 0.16); --color-info-soft-text:    #7cc0f0;
  --color-link-soft:       rgba(122, 165, 240, 0.16);--color-link-soft-text:    #a7b4f0;
  --color-primary-soft:    rgba(255, 119, 0, 0.16);  --color-primary-soft-text: #ffa552;
  --color-chip-bg:         #2a2f38;                  --color-chip-text:         #c7ccd6;

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md:    0 4px 10px rgba(0, 0, 0, 0.55);
  --shadow-nav:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-menu:  0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-login: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-box:   0 .5em 1em -.125em rgba(0, 0, 0, .5),
                  0 0 0 1px rgba(255, 255, 255, .06);
  --color-overlay: rgba(0, 0, 0, 0.8);

  --color-loading-bg:    #131519;
  --color-spinner-track: #2e3238;
  --color-spinner-head:  #5b8def;

  --sidebar-bg:           #1a1d21;
  --sidebar-border:       #2b2f35;
  --sidebar-text:         #9aa2b1;
  --sidebar-text-strong:  #f0f2f5;
  --sidebar-text-sub:     #6f7784;
  --sidebar-hover-bg:     #24272d;
  --sidebar-hover-text:   #d5d8dc;
  --sidebar-active-bg:    rgba(59, 130, 246, 0.16);
  --sidebar-accent:       #60a5fa;
  --sidebar-overlay:      rgba(0, 0, 0, 0.6);
  --app-bg:               #131519;

  --color-timeline-spine: #2b2f35;
  --color-timeline-dot:   #434b58;
  --color-timeline-halo:  #1b1e24;
}

/* No-JS fallback. Can only match if js/theme.js never ran, since theme.js
 * always writes a concrete data-theme. Gets native controls and scrollbars
 * right even then; the page itself stays light, which is the safe default. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

/* Bulma sets html{background-color:#fff} at (0,0,1). Same specificity, later in
 * the cascade, so this wins -- and unlike body it covers the overscroll area. */
:root[data-theme="dark"] html { background-color: var(--color-background); }

/* ========================================================================== *
 * Bulma 0.9.4 dark layer
 *
 * Bulma 0.9.4 predates CSS custom properties, so every surface is pinned by
 * hand. Scoped under :root[data-theme="dark"] for specificity, not decoration:
 * Bulma's own `.tag:not(body).is-light` is (0,2,1), which a bare
 * `.tag.is-light` at (0,2,0) would LOSE to. The prefix takes us to (0,4,1).
 *
 * !important appears only where Bulma itself uses it (the colour helpers).
 * ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
:root[data-theme="dark"] body {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* --- Typography ---------------------------------------------------------- */
:root[data-theme="dark"] strong,
:root[data-theme="dark"] .title,
:root[data-theme="dark"] .title strong,
:root[data-theme="dark"] .subtitle strong,
:root[data-theme="dark"] .label,
:root[data-theme="dark"] th,
:root[data-theme="dark"] .content h1,
:root[data-theme="dark"] .content h2,
:root[data-theme="dark"] .content h3,
:root[data-theme="dark"] .content h4,
:root[data-theme="dark"] .content h5,
:root[data-theme="dark"] .content h6 { color: var(--color-text-strong); }

:root[data-theme="dark"] .subtitle,
:root[data-theme="dark"] .content { color: var(--color-text); }
:root[data-theme="dark"] .help    { color: var(--color-text-light); }

/* Bare links. The exclusions sit inside :where() so they contribute NOTHING to
 * specificity: written as :not(.button):not(.sidebar-item):not(.tag) this rule
 * scores (0,6,1) -- each :not() adds its argument's weight -- and silently
 * outranks the component rules below it, so a hovered tab would take the link
 * hover colour instead of its own. With :where() it is (0,2,1) and loses to
 * .tabs a, .card-footer-item and friends, which is the intent. */
:root[data-theme="dark"] a:not(:where(.button, .sidebar-item, .tag)) {
  color: var(--color-link);
}
:root[data-theme="dark"] a:not(:where(.button, .sidebar-item, .tag)):hover {
  color: var(--color-link-hover);
}

:root[data-theme="dark"] code,
:root[data-theme="dark"] .content code,
:root[data-theme="dark"] pre,
:root[data-theme="dark"] .content pre {
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .content hr { background-color: var(--color-border-input); }
:root[data-theme="dark"] .content blockquote {
  background-color: var(--color-surface-raised);
  border-left-color: var(--color-border-input);
}
:root[data-theme="dark"] .content table th,
:root[data-theme="dark"] .content table td { border-color: var(--color-border-input); }

/* --- Box and card -------------------------------------------------------- *
 * .card is NOT only .modal-card: html/pages/dashboard.html:18,26,34,42 use it
 * for the four headline stat tiles. */
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .card {
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-box);
}
:root[data-theme="dark"] .card-content     { color: var(--color-text); }
:root[data-theme="dark"] .card-header      { box-shadow: 0 .125em .25em rgba(0,0,0,.4); }
:root[data-theme="dark"] .card-header-title { color: var(--color-text-strong); }
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .card-footer-item:not(:last-child) {
  border-color: var(--color-border-input);
}

/* --- Form controls ------------------------------------------------------- */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .textarea,
:root[data-theme="dark"] .select select {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-input);
  color: var(--color-text-strong);
}
:root[data-theme="dark"] .input::placeholder,
:root[data-theme="dark"] .textarea::placeholder { color: var(--color-text-faint); }
:root[data-theme="dark"] .input:hover,
:root[data-theme="dark"] .textarea:hover,
:root[data-theme="dark"] .select select:hover { border-color: var(--color-text-faint); }
:root[data-theme="dark"] .input[disabled],
:root[data-theme="dark"] .textarea[disabled],
:root[data-theme="dark"] .select select[disabled] {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-subtle);
  color: var(--color-text-faint);
}
/* Native popup list; the UA paints this, so it needs a real colour. */
:root[data-theme="dark"] .select select option { background-color: var(--color-surface-raised); }
:root[data-theme="dark"] .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--color-primary);
}
:root[data-theme="dark"] .checkbox,
:root[data-theme="dark"] .radio { color: var(--color-text); }
:root[data-theme="dark"] .checkbox:hover,
:root[data-theme="dark"] .radio:hover { color: var(--color-text-strong); }
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] { accent-color: var(--color-primary); }

/* --- Buttons ------------------------------------------------------------- *
 * .is-primary / .is-danger / .is-success etc. are saturated fills that read
 * correctly on both schemes and are left alone. */
:root[data-theme="dark"] .button {
  background-color: var(--color-surface);
  border-color: var(--color-border-input);
  color: var(--color-text-strong);
}
:root[data-theme="dark"] .button:hover { border-color: var(--color-text-faint); }
:root[data-theme="dark"] .button[disabled],
:root[data-theme="dark"] fieldset[disabled] .button,
:root[data-theme="dark"] .button.is-static {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-subtle);
  color: var(--color-text-faint);
}
:root[data-theme="dark"] .button.is-light {
  background-color: var(--color-chip-bg);
  color: var(--color-chip-text);
}
:root[data-theme="dark"] .button.is-light:hover { background-color: var(--color-surface-hover); }
:root[data-theme="dark"] .button.is-text  { color: var(--color-text-light); }
:root[data-theme="dark"] .button.is-ghost { color: var(--color-link); }
:root[data-theme="dark"] .button.is-danger.is-light {
  background-color: var(--color-danger-soft);  color: var(--color-danger-soft-text);
}
:root[data-theme="dark"] .button.is-info.is-light {
  background-color: var(--color-info-soft);    color: var(--color-info-soft-text);
}
:root[data-theme="dark"] .button.is-success.is-light {
  background-color: var(--color-success-soft); color: var(--color-success-soft-text);
}
:root[data-theme="dark"] .button.is-warning.is-light {
  background-color: var(--color-warning-soft); color: var(--color-warning-soft-text);
}

/* --- Tables -------------------------------------------------------------- */
:root[data-theme="dark"] .table {
  background-color: transparent;
  color: var(--color-text);
}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table tfoot th { color: var(--color-text-strong); }
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th { border-color: var(--color-border-input); }
:root[data-theme="dark"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--color-surface-sunken);
}
:root[data-theme="dark"] .table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--color-surface-hover);
}

/* --- Tags ---------------------------------------------------------------- *
 * 89 is-light uses, 65 of them emitted from js/ui.js's severity/risk maps. */
:root[data-theme="dark"] .tag:not(body) {
  background-color: var(--color-chip-bg);
  color: var(--color-chip-text);
}
:root[data-theme="dark"] .tag:not(body).is-light {
  background-color: var(--color-chip-bg);
  color: var(--color-chip-text);
}
:root[data-theme="dark"] .tag:not(body).is-danger.is-light {
  background-color: var(--color-danger-soft);  color: var(--color-danger-soft-text);
}
:root[data-theme="dark"] .tag:not(body).is-success.is-light {
  background-color: var(--color-success-soft); color: var(--color-success-soft-text);
}
:root[data-theme="dark"] .tag:not(body).is-warning.is-light {
  background-color: var(--color-warning-soft); color: var(--color-warning-soft-text);
}
:root[data-theme="dark"] .tag:not(body).is-info.is-light {
  background-color: var(--color-info-soft);    color: var(--color-info-soft-text);
}
:root[data-theme="dark"] .tag:not(body).is-link.is-light {
  background-color: var(--color-link-soft);    color: var(--color-link-soft-text);
}
:root[data-theme="dark"] .tag:not(body).is-primary.is-light {
  background-color: var(--color-primary-soft); color: var(--color-primary-soft-text);
}

/* --- Notifications ------------------------------------------------------- */
:root[data-theme="dark"] .notification {
  background-color: var(--color-chip-bg);
  color: var(--color-chip-text);
}
:root[data-theme="dark"] .notification.is-danger.is-light {
  background-color: var(--color-danger-soft);  color: var(--color-danger-soft-text);
}
:root[data-theme="dark"] .notification.is-success.is-light {
  background-color: var(--color-success-soft); color: var(--color-success-soft-text);
}
:root[data-theme="dark"] .notification.is-warning.is-light {
  background-color: var(--color-warning-soft); color: var(--color-warning-soft-text);
}
/* style.css:381-385 also gives this one a border. */
:root[data-theme="dark"] .notification.is-info.is-light {
  background-color: var(--color-info-soft);    color: var(--color-info-soft-text);
  border-color: var(--color-info);
}
:root[data-theme="dark"] .notification.is-link.is-light {
  background-color: var(--color-link-soft);    color: var(--color-link-soft-text);
}
:root[data-theme="dark"] .notification.is-primary.is-light {
  background-color: var(--color-primary-soft); color: var(--color-primary-soft-text);
}

/* --- Modals -------------------------------------------------------------- */
:root[data-theme="dark"] .modal-background { background-color: var(--color-overlay); }
:root[data-theme="dark"] .modal-card-head,
:root[data-theme="dark"] .modal-card-foot {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-input);
}
:root[data-theme="dark"] .modal-card-body  { background-color: var(--color-surface); }
:root[data-theme="dark"] .modal-card-title { color: var(--color-text-strong); }
/* NOTE: show-apikey-modal.html:5 puts .has-background-success (which Bulma
 * ships !important) on .modal-card-head, with .has-text-white on the title.
 * Bulma's !important wins over the two rules above. That is correct and
 * deliberate -- a green success header on both schemes. Do not "fix" it. */
:root[data-theme="dark"] .delete,
:root[data-theme="dark"] .modal-close { background-color: rgba(255,255,255,.2); }
:root[data-theme="dark"] .delete:hover,
:root[data-theme="dark"] .modal-close:hover { background-color: rgba(255,255,255,.3); }

/* --- Tabs (html/pages/settings.html:11 uses .tabs.is-boxed) -------------- */
:root[data-theme="dark"] .tabs    { color: var(--color-text); }
:root[data-theme="dark"] .tabs ul { border-bottom-color: var(--color-border-input); }
:root[data-theme="dark"] .tabs a  {
  border-bottom-color: var(--color-border-input);
  color: var(--color-text);
}
:root[data-theme="dark"] .tabs a:hover {
  border-bottom-color: var(--color-text-strong);
  color: var(--color-text-strong);
}
:root[data-theme="dark"] .tabs li.is-active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
:root[data-theme="dark"] .tabs.is-boxed a:hover {
  background-color: var(--color-surface-hover);
  border-bottom-color: var(--color-border-input);
}
:root[data-theme="dark"] .tabs.is-boxed li.is-active a {
  background-color: var(--color-surface);
  border-color: var(--color-border-input);
  border-bottom-color: transparent !important;   /* Bulma uses !important here */
}

/* --- Misc ---------------------------------------------------------------- */
:root[data-theme="dark"] .progress { background-color: var(--color-surface-raised); }
:root[data-theme="dark"] .footer   { background-color: var(--color-surface-sunken); }

/* --- Colour helpers: Bulma ships these !important ------------------------ *
 * .has-text-grey alone is 92 uses, 55 of them emitted from JS. */
:root[data-theme="dark"] .has-text-grey         { color: var(--color-text-muted) !important; }
:root[data-theme="dark"] .has-text-grey-light   { color: var(--color-text-faint) !important; }
:root[data-theme="dark"] .has-text-grey-lighter { color: var(--color-text-light) !important; }
:root[data-theme="dark"] .has-text-grey-dark,
:root[data-theme="dark"] .has-text-grey-darker,
:root[data-theme="dark"] .has-text-dark,
:root[data-theme="dark"] .has-text-black        { color: var(--color-text-strong) !important; }
:root[data-theme="dark"] .has-text-link         { color: var(--color-link) !important; }
/* Bulma's #946c00 is unreadable on dark. manifest-preview-modal.html:55. */
:root[data-theme="dark"] .has-text-warning-dark { color: var(--color-warning-soft-text) !important; }
:root[data-theme="dark"] .has-background-white,
:root[data-theme="dark"] .has-background-white-bis,
:root[data-theme="dark"] .has-background-white-ter { background-color: var(--color-surface) !important; }
:root[data-theme="dark"] .has-background-light     { background-color: var(--color-surface-raised) !important; }
/* .has-text-white and the saturated .has-text-danger/-success/-info/-warning
 * plus .has-background-success are deliberately literal and left alone. */

/* --- Defensive: not in today's markup, but one partial away -------------- */
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .dropdown-content,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .message-body {
  background-color: var(--color-surface);
  color: var(--color-text);
}
:root[data-theme="dark"] .navbar-item,
:root[data-theme="dark"] .dropdown-item,
:root[data-theme="dark"] .menu-list a,
:root[data-theme="dark"] .pagination-link,
:root[data-theme="dark"] .pagination-previous,
:root[data-theme="dark"] .pagination-next,
:root[data-theme="dark"] .breadcrumb li a { color: var(--color-text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .menu-list a:hover { background-color: var(--color-surface-hover); }
:root[data-theme="dark"] .menu-label     { color: var(--color-text-light); }
:root[data-theme="dark"] .message-header { background-color: var(--color-surface-raised); }

/* ========================================================================== *
 * Loading screen
 *
 * Moved out of index.html's inline