@charset "UTF-8";
/*
    Sitewide baseline dark theme -- covers the shared header/nav/modal chrome
    from check/includes/header.htm (and the theme-toggle icon itself), so
    every page that pulls in head.htm gets a working, coherent dark mode even
    before it has any page-specific dark CSS of its own. Loaded once from
    head.htm rather than per-page.

    Shares Kanban and the checklist editor's crimson-accented, metal-flake
    look (kanban-dark.css / checklist-dark.css) so the whole site reads as
    one dark "brand" rather than those two pages having a special theme and
    everywhere else getting a plainer fallback. Kanban's own header icon
    row is skipped by header.htm (see $isKanban there), so none of this
    touches that page; its <main> is also excluded from the background
    rule below so kanban-dark.css's own sparkle texture (painted on
    html/body) still shows through it untouched.
*/

html[data-theme="dark"] {
    color-scheme: dark;

    --dk-bg: #121214;
    --dk-bg-alt: #1a1a1d;
    --dk-bg-raised: #202024;
    --dk-border: #2e2e33;
    --dk-border-soft: rgba(255, 255, 255, 0.07);
    --dk-text: #e8e6e3;
    --dk-text-dim: #a8a6a3;
    --dk-text-mute: #737170;

    /* Same crimson family as kanban-dark.css / checklist-dark.css. */
    --dk-crimson: #c81e34;
    --dk-crimson-bright: #ff2f47;
    --dk-crimson-deep: #5c0e18;
    --dk-crimson-soft: rgba(200, 30, 52, 0.16);

    --dk-accent: var(--dk-crimson-bright);
    --dk-accent-soft: var(--dk-crimson-soft);

    /* Metal-flake sparkle recipe shared verbatim with kanban-dark.css and
       checklist-dark.css (see the page-base rule below). Split around the
       "grid dot" layer since that one is theme-specific -- kanban-dark.css
       colors it with --kanban-border, this file with --dk-border, and
       checklist-dark.css skips it entirely -- everything before and after
       it is identical across all three, so only that middle piece stays
       per-file. Consuming files also share --dk-sparkle-repeat/-size,
       except checklist-dark.css, whose missing grid-dot layer shifts its
       own repeat/size lists one entry shorter. */
    --dk-sparkle-fine:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(1.5px 1.5px at 22% 38%, rgba(220, 43, 62, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 68% 74%, rgba(220, 43, 62, 0.4), transparent 60%),
        radial-gradient(1px 1px at 84% 18%, rgba(220, 43, 62, 0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 50% 15%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1px 1px at 12% 82%, rgba(255, 255, 255, 0.35), transparent 60%);
    --dk-sparkle-base:
        radial-gradient(ellipse 900px 460px at 50% -8%, rgba(200, 30, 52, 0.12), transparent 70%),
        linear-gradient(160deg, #111113 0%, #0a0a0b 55%, #050506 100%);
    --dk-sparkle-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
    --dk-sparkle-size: 200px 200px, 137px 137px, 191px 191px, 113px 113px, 97px 97px, 149px 149px, 18px 18px, 100% 100%, 100% 100%;
}

/* ------------------------------------------------------------------ */
/* Page base + metal-flake sparkle texture (same recipe as kanban-dark  */
/* and checklist-dark, minus their !important -- lower-priority so a    */
/* page with its own dark CSS can still override this cheaply).         */
/* ------------------------------------------------------------------ */

/* :not(.kanban-page) on <main> -- kanban-dark.css paints its metal-flake
   sparkle texture on html/body and deliberately leaves kanban's own <main>
   transparent so that texture shows through underneath it. An opaque
   background here would sit on top and hide it. (The checklist editor's
   equivalent main rule in checklist-dark.css uses !important, so it
   already wins over this regardless of load order -- only kanban's
   non-!important rule was vulnerable to this.) */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] main:not(.kanban-page) {
    background-color: var(--dk-bg);
    background-image:
        var(--dk-sparkle-fine),
        radial-gradient(circle, var(--dk-border) 1px, transparent 1px),
        var(--dk-sparkle-base);
    background-repeat: var(--dk-sparkle-repeat);
    background-size: var(--dk-sparkle-size);
    color: var(--dk-text);
}

html[data-theme="dark"] a {
    color: var(--dk-accent);
}

/* ------------------------------------------------------------------ */
/* Dashboard cards (manage/index.htm's own .dashboard-card) -- page-    */
/* specific content, not shared chrome, but a hardcoded white card on   */
/* an otherwise-dark page is the same class of bug as the bottom nav    */
/* above. Left as a general-purpose selector since other pages may      */
/* reuse the same "white card on a dashboard" pattern under this name.  */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .dashboard-card {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .card-title {
    color: var(--dk-text);
}

html[data-theme="dark"] .card-description {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .card-count {
    color: var(--dk-accent);
}

/* ------------------------------------------------------------------ */
/* Header (check/includes/header.htm)                                 */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] header {
    background-color: var(--dk-bg-alt);
    border-bottom: 1px solid var(--dk-crimson-deep);
}

html[data-theme="dark"] header .d-header {
    background: linear-gradient(180deg, var(--dk-bg-raised) 0%, var(--dk-bg-alt) 55%, var(--dk-bg) 100%) !important;
    border-bottom: none !important;
}

html[data-theme="dark"] header .d-header::before {
    background: linear-gradient(to right,
        var(--dk-bg-alt) 0%,
        var(--dk-bg-alt) 25%,
        rgba(26, 26, 29, 0) 75%,
        rgba(26, 26, 29, 0) 100%) !important;
}

html[data-theme="dark"] .logo a {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] #org-name-display,
html[data-theme="dark"] #user-name-display {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] #org-name-text,
html[data-theme="dark"] #user-name-text {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .user-icon svg {
    stroke: var(--dk-text-dim);
}

html[data-theme="dark"] .user-icon.single-user.logged-out svg path {
    stroke: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .user-icon:hover svg {
    stroke: var(--dk-accent);
}

html[data-theme="dark"] .user-icon.active svg,
html[data-theme="dark"] .user-icon.org-member.active svg {
    stroke: var(--dk-accent) !important;
}

html[data-theme="dark"] .user-icon.inactive svg,
html[data-theme="dark"] .user-icon.org-member.inactive svg {
    stroke: #4a4a4d !important;
}

html[data-theme="dark"] .user-icon.inactive:hover svg,
html[data-theme="dark"] .user-icon.org-member.inactive:hover svg {
    stroke: var(--dk-text-mute) !important;
}

html[data-theme="dark"] #invites-badge {
    box-shadow: 0 0 0 2px var(--dk-bg-alt);
}

/* Theme toggle icon itself -- see the sun/moon swap in header.htm's own
   <style> block (unscoped: moon shown by default) and this file (dark:
   sun shown instead). Coloring otherwise falls out of .user-icon above. */
html[data-theme="dark"] .theme-toggle-icon--sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle-icon--moon {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Top nav (check/includes/top-nav.htm)                                */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] nav.topnav {
    background-color: var(--dk-bg-alt);
    border-bottom-color: var(--dk-border);
}

/* Not transparent: below 768px (see style.css), #navi becomes its own
   floating dropdown card over the page content and needs an opaque
   background of its own -- style.css gives it a hardcoded white one for
   light mode. At the desktop width, #navi sits flush inside nav.topnav,
   which is already this same color, so there's no visible seam either
   way. */
html[data-theme="dark"] #navi {
    background-color: var(--dk-bg-alt);
}

html[data-theme="dark"] #navi a {
    color: var(--dk-text-dim);
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] #navi a:hover {
    background-color: var(--dk-bg-raised);
    color: var(--dk-accent);
}

/* ------------------------------------------------------------------ */
/* Reusable modal system (header.htm's showModal/.org-item)           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] #global-modal {
    background: rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="dark"] #global-modal > div {
    background: var(--dk-bg-raised) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--dk-border-soft) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] #global-modal > div > div:first-child {
    border-bottom-color: var(--dk-border) !important;
}

html[data-theme="dark"] .modal-header h3,
html[data-theme="dark"] #global-modal h3 {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .modal-close,
html[data-theme="dark"] #modal-close {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] #modal-close:hover {
    background: var(--dk-bg-raised) !important;
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] #global-modal > div > div:nth-child(2) {
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .modal-btn-secondary {
    background: var(--dk-bg-raised) !important;
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .modal-btn-secondary:hover {
    background: var(--dk-border) !important;
}

html[data-theme="dark"] .modal-btn-primary {
    background: var(--dk-accent) !important;
}

html[data-theme="dark"] .modal-btn-primary:hover {
    background: var(--dk-crimson) !important;
}

html[data-theme="dark"] .org-item {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .org-item:hover {
    background: var(--dk-border);
}

html[data-theme="dark"] .org-item.selected {
    background-color: var(--dk-accent-soft);
    border-color: var(--dk-accent);
}

html[data-theme="dark"] .org-item strong {
    color: var(--dk-text);
}

html[data-theme="dark"] .org-item small {
    color: var(--dk-text-mute);
}

/* ------------------------------------------------------------------ */
/* Bottom nav (manage/includes/bottom-nav.htm + manage.css) -- used by  */
/* about half of /manage/*.htm; without this it stays a hardcoded white */
/* bar at the bottom of an otherwise-dark page.                        */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .manage-bottom-nav {
    background: var(--dk-bg-alt);
}

html[data-theme="dark"] .manage-bottom-nav::after {
    background: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__action {
    color: var(--dk-accent);
}

html[data-theme="dark"] .manage-bottom-nav__action--secondary {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .manage-bottom-nav__action--danger {
    color: #f87171;
}

html[data-theme="dark"] .manage-bottom-nav__action--icon {
    color: var(--dk-text);
}

html[data-theme="dark"] .manage-bottom-nav__action--icon:hover,
html[data-theme="dark"] .manage-bottom-nav__action--icon:focus-visible {
    background: var(--dk-bg-raised);
    color: var(--dk-text);
}

html[data-theme="dark"] .manage-bottom-nav__quick-menu {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__quick-action {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    color: var(--dk-text);
}

html[data-theme="dark"] .manage-bottom-nav__quick-action:hover {
    background: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__menu-button span {
    background: var(--dk-text);
}

html[data-theme="dark"] .manage-bottom-nav__menu-button:hover,
html[data-theme="dark"] .manage-bottom-nav__menu-button:focus-visible {
    background: var(--dk-bg-raised);
}

html[data-theme="dark"] .manage-bottom-nav__menu,
html[data-theme="dark"] .manage-bottom-nav__submenu {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__menu-item {
    color: var(--dk-text);
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__submenu .manage-bottom-nav__menu-item {
    color: var(--dk-text-dim);
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__submenu .manage-bottom-nav__menu-item:hover,
html[data-theme="dark"] .manage-bottom-nav__submenu .manage-bottom-nav__menu-item:focus-visible,
html[data-theme="dark"] .manage-bottom-nav[data-menu-style="classic"] .manage-bottom-nav__menu-item:hover,
html[data-theme="dark"] .manage-bottom-nav[data-menu-style="classic"] .manage-bottom-nav__menu-item:focus-visible {
    background: var(--dk-bg-alt);
    color: var(--dk-text);
}

html[data-theme="dark"] .manage-bottom-nav[data-menu-style="classic"] .manage-bottom-nav__menu-item {
    color: var(--dk-text-dim);
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .manage-bottom-nav__menu-item:hover,
html[data-theme="dark"] .manage-bottom-nav__menu-item:focus-visible {
    background: var(--dk-bg-raised);
    color: var(--dk-accent);
}

/* ------------------------------------------------------------------ */
/* Search panel (manage/search-panel.htm) -- used on lists.htm,        */
/* sets.htm, templates.htm and 8 other pages. Its styles are injected  */
/* into <head> by JS at runtime (after this stylesheet has already     */
/* loaded), so equal-specificity rules here would lose the cascade;    */
/* !important keeps these winning regardless of injection order.      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .yzy-search-panel {
    background: var(--dk-bg-raised) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .yzy-search-panel-title {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .yzy-search-action {
    background: var(--dk-bg-alt) !important;
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .yzy-search-action:hover,
html[data-theme="dark"] .yzy-search-action.active {
    background: var(--dk-accent) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .yzy-search-input {
    background: var(--dk-bg-alt) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .yzy-search-input:focus {
    border-color: var(--dk-accent) !important;
    box-shadow: 0 0 0 3px var(--dk-accent-soft) !important;
}

html[data-theme="dark"] .yzy-search-input-toggles {
    background: rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .yzy-search-input-toggle {
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .yzy-search-submit,
html[data-theme="dark"] .yzy-search-clear,
html[data-theme="dark"] .yzy-search-advanced-toggle {
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-search-clear,
html[data-theme="dark"] .yzy-search-advanced-toggle {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] .yzy-search-submit:hover,
html[data-theme="dark"] .yzy-search-clear:hover,
html[data-theme="dark"] .yzy-search-advanced-toggle:hover,
html[data-theme="dark"] .yzy-search-advanced-toggle.active {
    background: var(--dk-accent-soft) !important;
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-extension-panel {
    background: var(--dk-bg-alt) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .yzy-extension-panel h4 {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .yzy-extension-placeholder {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] .yzy-search-advanced {
    background: var(--dk-bg-alt) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] .yzy-search-checkboxes label {
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .yzy-result-title {
    color: var(--dk-text) !important;
}

html[data-theme="dark"] .yzy-result-subtitle {
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-result-meta {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] .yzy-result-action {
    background: var(--dk-bg-alt) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-result-action:hover {
    background: var(--dk-accent) !important;
    color: #ffffff !important;
    border-color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-load-more-button {
    color: var(--dk-accent) !important;
}

html[data-theme="dark"] .yzy-load-more-button:hover:not(:disabled) {
    background: var(--dk-accent-soft) !important;
}

html[data-theme="dark"] .yzy-load-more-button:disabled {
    color: var(--dk-text-mute) !important;
}

/* ------------------------------------------------------------------ */
/* Templates & Lists row/detail UI (manage/templates.htm +              */
/* manage/lists.htm). These two pages are hand-duplicated -- same       */
/* markup and behavior, but with class names prefixed "template"/       */
/* "templates" on one page and "list"/"lists" on the other -- so most   */
/* rules below are paired rather than deduplicated to a single          */
/* selector. Where both pages happen to reuse the exact same class      */
/* (.template-badge, .file-path, .modal-content, .error, ...) there's   */
/* only one rule.                                                       */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .template-title,
html[data-theme="dark"] .list-title {
    color: var(--dk-text);
}

html[data-theme="dark"] .template-row-wrapper,
html[data-theme="dark"] .list-row-wrapper {
    border-bottom-color: var(--dk-border);
}

html[data-theme="dark"] .template-row-wrapper:hover,
html[data-theme="dark"] .list-row-wrapper:hover {
    background-color: var(--dk-bg-raised);
}

html[data-theme="dark"] .list-project-mark {
    color: var(--dk-text-mute);
}

html[data-theme="dark"] .template-pill,
html[data-theme="dark"] .list-pill {
    background: var(--dk-bg-raised);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .template-pill.active,
html[data-theme="dark"] .list-pill.active {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

html[data-theme="dark"] .template-pill.archived,
html[data-theme="dark"] .template-pill.deleted,
html[data-theme="dark"] .list-pill.archived,
html[data-theme="dark"] .list-pill.deleted {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

html[data-theme="dark"] .template-meta-line,
html[data-theme="dark"] .template-description-preview,
html[data-theme="dark"] .template-details-meta,
html[data-theme="dark"] .template-tags-values .template-tags-empty,
html[data-theme="dark"] .templates-filter-panel-hint,
html[data-theme="dark"] .templates-filter-panel-empty,
html[data-theme="dark"] .list-meta-line,
html[data-theme="dark"] .list-description-preview,
html[data-theme="dark"] .list-details-meta,
html[data-theme="dark"] .list-tags-values .list-tags-empty,
html[data-theme="dark"] .lists-filter-panel-hint,
html[data-theme="dark"] .lists-filter-panel-empty,
html[data-theme="dark"] .loading {
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .template-details-label,
html[data-theme="dark"] .template-details-meta-label,
html[data-theme="dark"] .list-details-label,
html[data-theme="dark"] .list-details-meta-label {
    color: var(--dk-text-mute);
}

html[data-theme="dark"] .template-details-value,
html[data-theme="dark"] .list-details-value {
    color: var(--dk-text);
}

html[data-theme="dark"] .file-path {
    background: var(--dk-bg-raised);
    color: var(--dk-text-dim);
}

/* .template-badge covers the "Template" pill and, on templates.htm, the
   "System" pill -- which sets its own light-mode background/color via an
   inline style. !important wins over that inline style the same way the
   search-panel overrides above do. */
html[data-theme="dark"] .template-badge,
html[data-theme="dark"] .version-info {
    background: var(--dk-accent-soft) !important;
    color: var(--dk-accent) !important;
}

/* .template-toggle/.list-toggle and the panel trigger/menu-item buttons
   never set an explicit color in light mode, so their currentColor svg
   icons fall back to the browser's "buttontext" system color -- which
   flips to white under the color-scheme: dark these pages inherit,
   leaving a white icon on their own white/light circle. Setting color
   here (only for dark) fixes that instead of just changing the chrome. */
html[data-theme="dark"] .template-toggle,
html[data-theme="dark"] .list-toggle {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .template-toggle:hover,
html[data-theme="dark"] .list-toggle:hover {
    background: var(--dk-border);
    border-color: var(--dk-text-mute);
}

html[data-theme="dark"] .templates-panel-trigger,
html[data-theme="dark"] .templates-panel-menu-item,
html[data-theme="dark"] .lists-panel-trigger,
html[data-theme="dark"] .lists-panel-menu-item {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .templates-panel-trigger:hover,
html[data-theme="dark"] .lists-panel-trigger:hover {
    background: var(--dk-border);
    border-color: var(--dk-text-mute);
    color: var(--dk-text);
}

html[data-theme="dark"] .templates-panel-menu-item:hover,
html[data-theme="dark"] .lists-panel-menu-item:hover {
    background: var(--dk-border);
}

html[data-theme="dark"] .templates-panel-menu-item.is-active,
html[data-theme="dark"] .lists-panel-menu-item.is-active {
    background: var(--dk-accent-soft);
    border-color: var(--dk-accent);
    color: var(--dk-accent);
}

/* The tags menu icon and trigger icon are injected with their own inline
   color (see PANEL_ICONS.tags / the static "#" span in each page's own
   script) instead of inheriting from the button above -- override those
   directly. The [data-panel-option="tags"] selector already covers both
   pages since neither namespaces that attribute. */
html[data-theme="dark"] [data-panel-option="tags"] span[aria-hidden="true"],
html[data-theme="dark"] .templates-panel-trigger-icon span,
html[data-theme="dark"] .lists-panel-trigger-icon span {
    color: var(--dk-text-dim) !important;
}

html[data-theme="dark"] .templates-filter-panel,
html[data-theme="dark"] .lists-filter-panel {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .templates-filter-empty,
html[data-theme="dark"] .lists-filter-empty {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
    color: var(--dk-text-dim);
}

html[data-theme="dark"] .template-tags-editor,
html[data-theme="dark"] .list-tags-editor {
    background: var(--dk-bg-raised);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .template-tags-row.is-editing,
html[data-theme="dark"] .list-tags-row.is-editing {
    background: var(--dk-accent-soft);
}

html[data-theme="dark"] .template-tags-row:focus-visible,
html[data-theme="dark"] .list-tags-row:focus-visible {
    outline-color: var(--dk-accent);
}

html[data-theme="dark"] .template-tags-editor-actions .cancel,
html[data-theme="dark"] .list-tags-editor-actions .cancel {
    background: var(--dk-bg-alt);
    color: var(--dk-text);
}

html[data-theme="dark"] .modal-content {
    background: var(--dk-bg-raised);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--dk-border-soft);
}

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea {
    border-color: var(--dk-border);
}

html[data-theme="dark"] .error {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

html[data-theme="dark"] .success {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

/* Permission list inside lists.htm's "List Details" modal (Grant
   Permission / revoke flow) -- same light pastel badges as the rest of
   the page. */
html[data-theme="dark"] .permission-item {
    border-color: var(--dk-border);
}

html[data-theme="dark"] .permission-info div[style] {
    color: var(--dk-text-mute) !important;
}

html[data-theme="dark"] .permission-type.read {
    background: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
}

html[data-theme="dark"] .permission-type.write,
html[data-theme="dark"] .permission-type.admin {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

html[data-theme="dark"] .permission-type.delete {
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

html[data-theme="dark"] .permission-type.share {
    background: var(--dk-accent-soft);
    color: var(--dk-accent);
}

/* #templates-count / #lists-count set their own inline color; !important
   wins over that inline style the same way it does for .template-badge
   above. */
html[data-theme="dark"] #templates-count,
html[data-theme="dark"] #lists-count {
    color: var(--dk-text-dim) !important;
}