@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* ── Pre-paint sidebar collapse (no transition) ────────────────────────────── */
html.sidebar-pre-collapsed .sidebar {
  width: var(--sidebar-w-col);
  transition: none !important;
}
html.sidebar-pre-collapsed .main-content {
  margin-left: var(--sidebar-w-col);
  transition: none !important;
}

/* ── Theme Variables ───────────────────────────────────────────────────────── */
:root {
  /* Layout - never changes */
  --sidebar-w:     240px;
  --sidebar-w-col: 60px;
  --topbar-h:      58px;
  --card-radius:   10px;

  /* ── Light (default) ── */
  --sidebar-bg:          #1e293b;
  --sidebar-text:        #94a3b8;
  --sidebar-active:      #3b82f6;
  --sidebar-hover:       rgba(255,255,255,0.06);
  --sidebar-divider:     rgba(255,255,255,0.08);
  --sidebar-brand-color: #ffffff;

  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(0,0,0,0.08);
  --topbar-title:   #1e293b;

  --page-bg:        #f1f5f9;
  --body-color:     #1e293b;
  --muted-color:    #64748b;

  --card-bg:            #ffffff;
  --card-border:        #e2e8f0;
  --card-shadow:        rgba(0,0,0,0.06);
  --card-header-bg:     #f8fafc;
  --card-header-border: #e2e8f0;
  --card-header-color:  #374151;

  --input-bg:          #ffffff;
  --input-border:      #dee2e6;
  --input-color:       #1e293b;
  --input-placeholder: #94a3b8;
  --input-focus-border:#3b82f6;
  --input-focus-shadow:rgba(59,130,246,0.2);

  --table-header-bg: #f8fafc;
  --table-border:    #e2e8f0;
  --table-hover:     #f8fafc;

  --list-item-bg:    #ffffff;
  --list-item-border:#e2e8f0;

  --btn-icon-border: #e2e8f0;
  --btn-icon-color:  #64748b;
  --btn-icon-hover:  #f1f5f9;

  --comment-bg:      #f8fafc;
  --comment-border:  #e2e8f0;
  --detail-border:   #f1f5f9;
  --filter-bg:       #ffffff;
  --link-color:      #1e293b;
  --link-hover:      #3b82f6;

  --dropdown-bg:     #ffffff;
  --dropdown-border: #e2e8f0;
  --dropdown-color:  #1e293b;
  --dropdown-hover:  #f1f5f9;

  /* Scrollbars. Derived from variables every theme already defines, so all 34
     get a matching scrollbar with no per-theme work. A theme that wants
     something different overrides these four; none need to. */
  /* Health. Three hexes used to live in a macro on one page, which meant no
     theme could touch them and only that page had them. */
  --health-green: #22c55e;
  --health-amber: #f59e0b;
  --health-red:   #ef4444;
  --health-grey:  #6b7280;   /* paused: an SLA clock that is not running */
  --tone-orange:  #f97316;

  --scrollbar-size:        10px;
  --scrollbar-track:       transparent;
  --scrollbar-thumb:       var(--card-border);
  --scrollbar-thumb-hover: var(--muted-color);
}

.text-tone-orange { color: var(--tone-orange); }

/* ── Scrollbars ────────────────────────────────────────────────────────────────
   Three places used to style their own, and two of them were already reaching
   for --card-border, which is the tell that this belonged in one place.

   Firefox takes scrollbar-color by inheritance, so setting it on the root
   covers every scroller on the page. WebKit needs the pseudo-elements. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width:  var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: calc(var(--scrollbar-size) / 2);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

/* ── Dark ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --sidebar-bg:          #020617;
  --sidebar-text:        #94a3b8;
  --sidebar-active:      #60a5fa;
  --sidebar-hover:       rgba(255,255,255,0.05);
  --sidebar-divider:     rgba(255,255,255,0.07);
  --sidebar-brand-color: #e2e8f0;

  --topbar-bg:      #1e293b;
  --topbar-shadow:  rgba(0,0,0,0.3);
  --topbar-title:   #e2e8f0;

  --page-bg:        #0f172a;
  --body-color:     #cbd5e1;
  --muted-color:    #64748b;

  --card-bg:            #1e293b;
  --card-border:        #334155;
  --card-shadow:        rgba(0,0,0,0.2);
  --card-header-bg:     #162032;
  --card-header-border: #334155;
  --card-header-color:  #94a3b8;

  --input-bg:          #0f172a;
  --input-border:      #334155;
  --input-color:       #e2e8f0;
  --input-placeholder: #475569;
  --input-focus-border:#60a5fa;
  --input-focus-shadow:rgba(96,165,250,0.2);

  --table-header-bg: #162032;
  --table-border:    #334155;
  --table-hover:     #263348;

  --list-item-bg:    #1e293b;
  --list-item-border:#334155;

  --btn-icon-border: #334155;
  --btn-icon-color:  #94a3b8;
  --btn-icon-hover:  #263348;

  --comment-bg:      #162032;
  --comment-border:  #334155;
  --detail-border:   #334155;
  --filter-bg:       #1e293b;
  --link-color:      #cbd5e1;
  --link-hover:      #60a5fa;

  --dropdown-bg:     #1e293b;
  --dropdown-border: #334155;
  --dropdown-color:  #cbd5e1;
  --dropdown-hover:  #263348;
}


/* ── Diesel (dark industrial charcoal + electric orange) ─────────────────── */
[data-theme="nord"] {
  --sidebar-bg:          #141414;
  --sidebar-text:        #8a8a8a;
  --sidebar-active:      #f97316;
  --sidebar-hover:       rgba(249,115,22,0.1);
  --sidebar-divider:     rgba(249,115,22,0.15);
  --sidebar-brand-color: #e8e8e8;

  --topbar-bg:      #1e1e1e;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #f97316;

  --page-bg:        #111111;
  --body-color:     #d4d4d4;
  --muted-color:    #6b6b6b;

  --card-bg:            #1e1e1e;
  --card-border:        #2e2e2e;
  --card-shadow:        rgba(0,0,0,0.5);
  --card-header-bg:     #181818;
  --card-header-border: #2e2e2e;
  --card-header-color:  #8a8a8a;

  --input-bg:          #181818;
  --input-border:      #2e2e2e;
  --input-color:       #d4d4d4;
  --input-placeholder: #4a4a4a;
  --input-focus-border:#f97316;
  --input-focus-shadow:rgba(249,115,22,0.2);

  --table-header-bg: #181818;
  --table-border:    #2e2e2e;
  --table-hover:     #242424;

  --list-item-bg:    #1e1e1e;
  --list-item-border:#2e2e2e;

  --btn-icon-border: #2e2e2e;
  --btn-icon-color:  #6b6b6b;
  --btn-icon-hover:  #242424;

  --comment-bg:      #181818;
  --comment-border:  #f97316;
  --detail-border:   #2e2e2e;
  --filter-bg:       #1e1e1e;
  --link-color:      #d4d4d4;
  --link-hover:      #f97316;

  --dropdown-bg:     #1e1e1e;
  --dropdown-border: #2e2e2e;
  --dropdown-color:  #d4d4d4;
  --dropdown-hover:  #242424;
}

/* ── Solarized (warm amber) ──────────────────────────────────────────────── */
[data-theme="solarized"] {
  --sidebar-bg:          #002b36;
  --sidebar-text:        #657b83;
  --sidebar-active:      #268bd2;
  --sidebar-hover:       rgba(38,139,210,0.1);
  --sidebar-divider:     rgba(255,255,255,0.08);
  --sidebar-brand-color: #fdf6e3;

  --topbar-bg:      #eee8d5;
  --topbar-shadow:  rgba(0,43,54,0.1);
  --topbar-title:   #073642;

  --page-bg:        #fdf6e3;
  --body-color:     #586e75;
  --muted-color:    #93a1a1;

  --card-bg:            #eee8d5;
  --card-border:        #d9d2c0;
  --card-shadow:        rgba(0,43,54,0.06);
  --card-header-bg:     #e5dfc8;
  --card-header-border: #d9d2c0;
  --card-header-color:  #657b83;

  --input-bg:          #fdf6e3;
  --input-border:      #d9d2c0;
  --input-color:       #073642;
  --input-placeholder: #93a1a1;
  --input-focus-border:#268bd2;
  --input-focus-shadow:rgba(38,139,210,0.2);

  --table-header-bg: #e5dfc8;
  --table-border:    #d9d2c0;
  --table-hover:     #e5dfc8;

  --list-item-bg:    #eee8d5;
  --list-item-border:#d9d2c0;

  --btn-icon-border: #d9d2c0;
  --btn-icon-color:  #657b83;
  --btn-icon-hover:  #e5dfc8;

  --comment-bg:      #e5dfc8;
  --comment-border:  #d9d2c0;
  --detail-border:   #d9d2c0;
  --filter-bg:       #eee8d5;
  --link-color:      #586e75;
  --link-hover:      #268bd2;

  --dropdown-bg:     #eee8d5;
  --dropdown-border: #d9d2c0;
  --dropdown-color:  #586e75;
  --dropdown-hover:  #e5dfc8;
}


/* ── Coffee (dark espresso browns + caramel accent) ──────────────────────── */
[data-theme="monokai"] {
  --sidebar-bg:          #1a0f08;
  --sidebar-text:        #9a7a5a;
  --sidebar-active:      #c87941;
  --sidebar-hover:       rgba(200,121,65,0.1);
  --sidebar-divider:     rgba(200,121,65,0.18);
  --sidebar-brand-color: #f0dfc8;

  --topbar-bg:      #231508;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #c87941;

  --page-bg:        #140c05;
  --body-color:     #e8d5c0;
  --muted-color:    #7a5a40;

  --card-bg:            #231508;
  --card-border:        #3d2510;
  --card-shadow:        rgba(0,0,0,0.45);
  --card-header-bg:     #1a0f08;
  --card-header-border: #3d2510;
  --card-header-color:  #9a7a5a;

  --input-bg:          #1a0f08;
  --input-border:      #3d2510;
  --input-color:       #e8d5c0;
  --input-placeholder: #5a3d28;
  --input-focus-border:#c87941;
  --input-focus-shadow:rgba(200,121,65,0.22);

  --table-header-bg: #1a0f08;
  --table-border:    #3d2510;
  --table-hover:     #2a1a0a;

  --list-item-bg:    #231508;
  --list-item-border:#3d2510;

  --btn-icon-border: #3d2510;
  --btn-icon-color:  #7a5a40;
  --btn-icon-hover:  #2a1a0a;

  --comment-bg:      #1a0f08;
  --comment-border:  #c87941;
  --detail-border:   #3d2510;
  --filter-bg:       #231508;
  --link-color:      #e8d5c0;
  --link-hover:      #c87941;

  --dropdown-bg:     #231508;
  --dropdown-border: #3d2510;
  --dropdown-color:  #e8d5c0;
  --dropdown-hover:  #2a1a0a;
}


/* ── Synthwave (80s neon retro) ───────────────────────────────────────────── */
[data-theme="synthwave"] {
  --sidebar-bg:          #09000f;
  --sidebar-text:        #9b5de5;
  --sidebar-active:      #f72585;
  --sidebar-hover:       rgba(247,37,133,0.1);
  --sidebar-divider:     rgba(247,37,133,0.15);
  --sidebar-brand-color: #fee440;
  --topbar-bg:      #130024;
  --topbar-shadow:  rgba(247,37,133,0.3);
  --topbar-title:   #fee440;
  --page-bg:        #180030;
  --body-color:     #e9d5ff;
  --muted-color:    #9b5de5;
  --card-bg:            #130024;
  --card-border:        #4a0080;
  --card-shadow:        rgba(247,37,133,0.2);
  --card-header-bg:     #180030;
  --card-header-border: #4a0080;
  --card-header-color:  #c77dff;
  --input-bg:          #180030;
  --input-border:      #4a0080;
  --input-color:       #e9d5ff;
  --input-placeholder: #9b5de5;
  --input-focus-border:#f72585;
  --input-focus-shadow:rgba(247,37,133,0.25);
  --table-header-bg: #130024;
  --table-border:    #4a0080;
  --table-hover:     #180030;
  --list-item-bg:    #130024;
  --list-item-border:#4a0080;
  --btn-icon-border: #4a0080;
  --btn-icon-color:  #9b5de5;
  --btn-icon-hover:  #180030;
  --comment-bg:      #180030;
  --comment-border:  #4a0080;
  --detail-border:   #180030;
  --filter-bg:       #130024;
  --link-color:      #e9d5ff;
  --link-hover:      #f72585;
  --dropdown-bg:     #130024;
  --dropdown-border: #4a0080;
  --dropdown-color:  #e9d5ff;
  --dropdown-hover:  #180030;
}


/* ── Rose (deep wine sidebar, rose page) ─────────────────────────────────── */
[data-theme="rose"] {
  --sidebar-bg:          #4a0e34;
  --sidebar-text:        #f0abca;
  --sidebar-active:      #f472b6;
  --sidebar-hover:       rgba(244,114,182,0.1);
  --sidebar-divider:     rgba(244,114,182,0.2);
  --sidebar-brand-color: #fdf2f8;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(244,114,182,0.15);
  --topbar-title:   #831843;
  --page-bg:        #fdf2f8;
  --body-color:     #831843;
  --muted-color:    #be185d;
  --card-bg:            #ffffff;
  --card-border:        #fbcfe8;
  --card-shadow:        rgba(244,114,182,0.1);
  --card-header-bg:     #fdf2f8;
  --card-header-border: #fbcfe8;
  --card-header-color:  #9d174d;
  --input-bg:          #ffffff;
  --input-border:      #fbcfe8;
  --input-color:       #831843;
  --input-placeholder: #f9a8d4;
  --input-focus-border:#f472b6;
  --input-focus-shadow:rgba(244,114,182,0.2);
  --table-header-bg: #fdf2f8;
  --table-border:    #fbcfe8;
  --table-hover:     #fdf2f8;
  --list-item-bg:    #ffffff;
  --list-item-border:#fbcfe8;
  --btn-icon-border: #fbcfe8;
  --btn-icon-color:  #be185d;
  --btn-icon-hover:  #fdf2f8;
  --comment-bg:      #fdf2f8;
  --comment-border:  #fbcfe8;
  --detail-border:   #fdf2f8;
  --filter-bg:       #ffffff;
  --link-color:      #831843;
  --link-hover:      #ec4899;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #fbcfe8;
  --dropdown-color:  #831843;
  --dropdown-hover:  #fdf2f8;
}


/* ── Parchment (aged paper, warm olive ink, antiquarian feel) ────────────── */
[data-theme="cream"] {
  --sidebar-bg:          #2a2415;
  --sidebar-text:        #a09060;
  --sidebar-active:      #8b7536;
  --sidebar-hover:       rgba(139,117,54,0.12);
  --sidebar-divider:     rgba(139,117,54,0.2);
  --sidebar-brand-color: #f5eedc;
  --topbar-bg:      #f5eedc;
  --topbar-shadow:  rgba(0,0,0,0.08);
  --topbar-title:   #2a2415;
  --page-bg:        #ede6d0;
  --body-color:     #2a2415;
  --muted-color:    #7a6a48;
  --card-bg:            #f5eedc;
  --card-border:        #d4c8a8;
  --card-shadow:        rgba(0,0,0,0.07);
  --card-header-bg:     #ede6d0;
  --card-header-border: #d4c8a8;
  --card-header-color:  #4a3d22;
  --input-bg:          #f5eedc;
  --input-border:      #d4c8a8;
  --input-color:       #2a2415;
  --input-placeholder: #a09060;
  --input-focus-border:#8b7536;
  --input-focus-shadow:rgba(139,117,54,0.2);
  --table-header-bg: #ede6d0;
  --table-border:    #d4c8a8;
  --table-hover:     #ede6d0;
  --list-item-bg:    #f5eedc;
  --list-item-border:#d4c8a8;
  --btn-icon-border: #d4c8a8;
  --btn-icon-color:  #7a6a48;
  --btn-icon-hover:  #ede6d0;
  --comment-bg:      #ede6d0;
  --comment-border:  #d4c8a8;
  --detail-border:   #ede6d0;
  --filter-bg:       #f5eedc;
  --link-color:      #2a2415;
  --link-hover:      #8b7536;
  --dropdown-bg:     #f5eedc;
  --dropdown-border: #d4c8a8;
  --dropdown-color:  #2a2415;
  --dropdown-hover:  #ede6d0;
}


/* ── Sand (dark brown sidebar, desert-warm page) ─────────────────────────── */
[data-theme="sand"] {
  --sidebar-bg:          #451a03;
  --sidebar-text:        #fcd34d;
  --sidebar-active:      #d97706;
  --sidebar-hover:       rgba(217,119,6,0.1);
  --sidebar-divider:     rgba(217,119,6,0.2);
  --sidebar-brand-color: #fffbeb;
  --topbar-bg:      #fffbeb;
  --topbar-shadow:  rgba(0,0,0,0.06);
  --topbar-title:   #78350f;
  --page-bg:        #fef3c7;
  --body-color:     #78350f;
  --muted-color:    #92400e;
  --card-bg:            #fffbeb;
  --card-border:        #fde68a;
  --card-shadow:        rgba(0,0,0,0.06);
  --card-header-bg:     #fef3c7;
  --card-header-border: #fde68a;
  --card-header-color:  #92400e;
  --input-bg:          #fffbeb;
  --input-border:      #fde68a;
  --input-color:       #78350f;
  --input-placeholder: #fcd34d;
  --input-focus-border:#d97706;
  --input-focus-shadow:rgba(217,119,6,0.2);
  --table-header-bg: #fef3c7;
  --table-border:    #fde68a;
  --table-hover:     #fef3c7;
  --list-item-bg:    #fffbeb;
  --list-item-border:#fde68a;
  --btn-icon-border: #fde68a;
  --btn-icon-color:  #92400e;
  --btn-icon-hover:  #fef3c7;
  --comment-bg:      #fef3c7;
  --comment-border:  #fde68a;
  --detail-border:   #fef3c7;
  --filter-bg:       #fffbeb;
  --link-color:      #78350f;
  --link-hover:      #b45309;
  --dropdown-bg:     #fffbeb;
  --dropdown-border: #fde68a;
  --dropdown-color:  #78350f;
  --dropdown-hover:  #fef3c7;
}

/* ── Blossom (crimson sidebar, sakura page) ───────────────────────────────── */


/* ── Ember (volcanic dark, red ember glow) ────────────────────────────────── */
[data-theme="ember"] {
  --sidebar-bg:          #1a0505;
  --sidebar-text:        #f87171;
  --sidebar-active:      #ef4444;
  --sidebar-hover:       rgba(239,68,68,0.1);
  --sidebar-divider:     rgba(239,68,68,0.12);
  --sidebar-brand-color: #fef2f2;
  --topbar-bg:      #250808;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #fca5a5;
  --page-bg:        #160404;
  --body-color:     #fca5a5;
  --muted-color:    #b91c1c;
  --card-bg:            #200707;
  --card-border:        #3f0d0d;
  --card-shadow:        rgba(239,68,68,0.1);
  --card-header-bg:     #160404;
  --card-header-border: #3f0d0d;
  --card-header-color:  #f87171;
  --input-bg:          #160404;
  --input-border:      #3f0d0d;
  --input-color:       #fca5a5;
  --input-placeholder: #7f1d1d;
  --input-focus-border:#ef4444;
  --input-focus-shadow:rgba(239,68,68,0.2);
  --table-header-bg: #200707;
  --table-border:    #3f0d0d;
  --table-hover:     #160404;
  --list-item-bg:    #200707;
  --list-item-border:#3f0d0d;
  --btn-icon-border: #3f0d0d;
  --btn-icon-color:  #b91c1c;
  --btn-icon-hover:  #160404;
  --comment-bg:      #160404;
  --comment-border:  #3f0d0d;
  --detail-border:   #160404;
  --filter-bg:       #200707;
  --link-color:      #fca5a5;
  --link-hover:      #ef4444;
  --dropdown-bg:     #200707;
  --dropdown-border: #3f0d0d;
  --dropdown-color:  #fca5a5;
  --dropdown-hover:  #160404;
}


/* ── Jade (deep emerald dark, jade green glow) ────────────────────────────── */
[data-theme="jade"] {
  --sidebar-bg:          #042318;
  --sidebar-text:        #6ee7b7;
  --sidebar-active:      #059669;
  --sidebar-hover:       rgba(5,150,105,0.1);
  --sidebar-divider:     rgba(5,150,105,0.12);
  --sidebar-brand-color: #ecfdf5;
  --topbar-bg:      #071f13;
  --topbar-shadow:  rgba(0,0,0,0.45);
  --topbar-title:   #a7f3d0;
  --page-bg:        #031a10;
  --body-color:     #a7f3d0;
  --muted-color:    #065f46;
  --card-bg:            #071f13;
  --card-border:        #14402a;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #031a10;
  --card-header-border: #14402a;
  --card-header-color:  #6ee7b7;
  --input-bg:          #031a10;
  --input-border:      #14402a;
  --input-color:       #a7f3d0;
  --input-placeholder: #065f46;
  --input-focus-border:#059669;
  --input-focus-shadow:rgba(5,150,105,0.2);
  --table-header-bg: #071f13;
  --table-border:    #14402a;
  --table-hover:     #031a10;
  --list-item-bg:    #071f13;
  --list-item-border:#14402a;
  --btn-icon-border: #14402a;
  --btn-icon-color:  #065f46;
  --btn-icon-hover:  #031a10;
  --comment-bg:      #031a10;
  --comment-border:  #14402a;
  --detail-border:   #031a10;
  --filter-bg:       #071f13;
  --link-color:      #a7f3d0;
  --link-hover:      #059669;
  --dropdown-bg:     #071f13;
  --dropdown-border: #14402a;
  --dropdown-color:  #a7f3d0;
  --dropdown-hover:  #031a10;
}

/* ── Hoss Mode (US Military - OD green, tan, army tactical) ──────────────── */
[data-theme="hoss"] {
  --sidebar-bg:          #1a1e10;
  --sidebar-text:        #7a8c5a;
  --sidebar-active:      #8a9970;
  --sidebar-hover:       rgba(138,153,112,0.12);
  --sidebar-divider:     rgba(138,153,112,0.15);
  --sidebar-brand-color: #c8b89a;

  --topbar-bg:      #2d3518;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #c8b89a;

  --page-bg:        #3a3f20;
  --body-color:     #c8b89a;
  --muted-color:    #7a8c5a;

  --card-bg:            #2d3518;
  --card-border:        #4b5320;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #222817;
  --card-header-border: #4b5320;
  --card-header-color:  #8a9970;

  --input-bg:          #222817;
  --input-border:      #4b5320;
  --input-color:       #c8b89a;
  --input-placeholder: #556b2f;
  --input-focus-border:#8a9970;
  --input-focus-shadow:rgba(138,153,112,0.2);

  --table-header-bg: #222817;
  --table-border:    #4b5320;
  --table-hover:     #2d3518;

  --list-item-bg:    #2d3518;
  --list-item-border:#4b5320;

  --btn-icon-border: #4b5320;
  --btn-icon-color:  #7a8c5a;
  --btn-icon-hover:  #222817;

  --comment-bg:      #222817;
  --comment-border:  #4b5320;
  --detail-border:   #222817;
  --filter-bg:       #2d3518;
  --link-color:      #c8b89a;
  --link-hover:      #8a9970;

  --dropdown-bg:     #2d3518;
  --dropdown-border: #4b5320;
  --dropdown-color:  #c8b89a;
  --dropdown-hover:  #222817;
}
[data-theme="hoss"] * {
  font-family: 'Courier New', Courier, monospace !important;
  letter-spacing: .03em;
}
[data-theme="hoss"] .sidebar-brand i { color: #8a9970 !important; }

/* ── Jagur Mode (shades of white - good luck reading this) ────────────────── */
[data-theme="jagur"] {
  --sidebar-bg:          #ebebeb;
  --sidebar-text:        #d8d8d8;
  --sidebar-active:      #c5c5c5;
  --sidebar-hover:       rgba(0,0,0,0.04);
  --sidebar-divider:     rgba(0,0,0,0.06);
  --sidebar-brand-color: #e0e0e0;

  --topbar-bg:      #f5f5f5;
  --topbar-shadow:  rgba(0,0,0,0.03);
  --topbar-title:   #d0d0d0;

  --page-bg:        #f8f8f8;
  --body-color:     #d5d5d5;
  --muted-color:    #e2e2e2;

  --card-bg:            #ffffff;
  --card-border:        #f0f0f0;
  --card-shadow:        rgba(0,0,0,0.02);
  --card-header-bg:     #fafafa;
  --card-header-border: #f0f0f0;
  --card-header-color:  #d8d8d8;

  --input-bg:          #ffffff;
  --input-border:      #ebebeb;
  --input-color:       #c8c8c8;
  --input-placeholder: #e8e8e8;
  --input-focus-border:#d0d0d0;
  --input-focus-shadow:rgba(0,0,0,0.04);

  --table-header-bg: #fafafa;
  --table-border:    #f0f0f0;
  --table-hover:     #fafafa;

  --list-item-bg:    #ffffff;
  --list-item-border:#f0f0f0;

  --btn-icon-border: #ebebeb;
  --btn-icon-color:  #d5d5d5;
  --btn-icon-hover:  #f5f5f5;

  --comment-bg:      #fafafa;
  --comment-border:  #f0f0f0;
  --detail-border:   #f5f5f5;
  --filter-bg:       #ffffff;
  --link-color:      #d0d0d0;
  --link-hover:      #c5c5c5;

  --dropdown-bg:     #ffffff;
  --dropdown-border: #f0f0f0;
  --dropdown-color:  #d0d0d0;
  --dropdown-hover:  #fafafa;
}

/* ── Curtis Mode (John Deere - nothing runs like a Deere) ────────────────── */
[data-theme="curtis"] {
  --sidebar-bg:          #1a3d0f;
  --sidebar-text:        #a8c890;
  --sidebar-active:      #FFDE00;
  --sidebar-hover:       rgba(255,222,0,0.12);
  --sidebar-divider:     rgba(255,222,0,0.2);
  --sidebar-brand-color: #FFDE00;

  --topbar-bg:      #1f4a12;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #FFDE00;

  --page-bg:        #0f2208;
  --body-color:     #d4e8c0;
  --muted-color:    #6a9a4a;

  --card-bg:            #1a3d0f;
  --card-border:        #2a5c18;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #143309;
  --card-header-border: #2a5c18;
  --card-header-color:  #FFDE00;

  --input-bg:          #143309;
  --input-border:      #2a5c18;
  --input-color:       #d4e8c0;
  --input-placeholder: #6a9a4a;
  --input-focus-border:#FFDE00;
  --input-focus-shadow:rgba(255,222,0,0.25);

  --table-header-bg: #143309;
  --table-border:    #2a5c18;
  --table-hover:     #1a3d0f;

  --list-item-bg:    #1a3d0f;
  --list-item-border:#2a5c18;

  --btn-icon-border: #2a5c18;
  --btn-icon-color:  #6a9a4a;
  --btn-icon-hover:  #143309;

  --comment-bg:      #143309;
  --comment-border:  #2a5c18;
  --detail-border:   #143309;
  --filter-bg:       #1a3d0f;
  --link-color:      #d4e8c0;
  --link-hover:      #FFDE00;

  --dropdown-bg:     #1a3d0f;
  --dropdown-border: #2a5c18;
  --dropdown-color:  #d4e8c0;
  --dropdown-hover:  #143309;
}
[data-theme="curtis"] .sidebar-brand i { color: #FFDE00 !important; }
[data-theme="curtis"] .sidebar-nav .nav-link.active { border-left-color: #FFDE00 !important; }

/* ── Weiland Mode (official brand colors - PMS 533 navy + PMS 7408 gold) ───── */
[data-theme="weiland"] {
  --sidebar-bg:          #1F2A44;
  --sidebar-text:        #A2AAAD;
  --sidebar-active:      #F6BE00;
  --sidebar-hover:       rgba(246,190,0,0.1);
  --sidebar-divider:     rgba(246,190,0,0.18);
  --sidebar-brand-color: #F6BE00;

  --topbar-bg:      #1F2A44;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #F6BE00;

  --page-bg:        #425563;
  --body-color:     #D0D3D4;
  --muted-color:    #A2AAAD;

  --card-bg:            #1F2A44;
  --card-border:        #344560;
  --card-shadow:        rgba(0,0,0,0.35);
  --card-header-bg:     #18223a;
  --card-header-border: #344560;
  --card-header-color:  #A2AAAD;

  --input-bg:          #18223a;
  --input-border:      #344560;
  --input-color:       #D0D3D4;
  --input-placeholder: #A2AAAD;
  --input-focus-border:#F6BE00;
  --input-focus-shadow:rgba(246,190,0,0.22);

  --table-header-bg: #18223a;
  --table-border:    #344560;
  --table-hover:     #263352;

  --list-item-bg:    #1F2A44;
  --list-item-border:#344560;

  --btn-icon-border: #344560;
  --btn-icon-color:  #A2AAAD;
  --btn-icon-hover:  #18223a;

  --comment-bg:      #18223a;
  --comment-border:  #344560;
  --detail-border:   #344560;
  --filter-bg:       #1F2A44;
  --link-color:      #D0D3D4;
  --link-hover:      #F6BE00;

  --dropdown-bg:     #1F2A44;
  --dropdown-border: #344560;
  --dropdown-color:  #D0D3D4;
  --dropdown-hover:  #18223a;
}
[data-theme="weiland"] .sidebar-brand i { color: #F6BE00 !important; }
[data-theme="weiland"] .sidebar-nav .nav-link.active { border-left-color: #F6BE00 !important; }

/* ── Bootstrap variable bridge (makes BS components respect our themes) ───── */
:root, [data-theme] {
  --bs-body-bg:              var(--page-bg);
  --bs-body-color:           var(--body-color);
  --bs-border-color:         var(--card-border);
  --bs-card-bg:              var(--card-bg);
  --bs-card-border-color:    var(--card-border);
  --bs-card-cap-bg:          var(--card-header-bg);
  --bs-card-color:           var(--body-color);
  --bs-secondary-color:      var(--muted-color);
  --bs-tertiary-bg:          var(--card-header-bg);
  --bs-link-color:           var(--link-hover);
  --bs-link-hover-color:     var(--link-hover);
}
.table {
  --bs-table-color:          var(--body-color);
  --bs-table-bg:             transparent;
  --bs-table-border-color:   var(--table-border);
  --bs-table-hover-bg:       var(--table-hover);
  --bs-table-hover-color:    var(--body-color);
  --bs-table-striped-bg:     var(--table-hover);
  --bs-table-striped-color:  var(--body-color);
  --bs-table-active-bg:      var(--table-hover);
  --bs-table-active-color:   var(--body-color);
}
.list-group {
  --bs-list-group-bg:           var(--list-item-bg);
  --bs-list-group-border-color: var(--list-item-border);
  --bs-list-group-color:        var(--body-color);
  --bs-list-group-action-color: var(--body-color);
  --bs-list-group-hover-bg:     var(--table-hover);
}
.dropdown-menu {
  --bs-dropdown-bg:           var(--dropdown-bg);
  --bs-dropdown-border-color: var(--dropdown-border);
  --bs-dropdown-color:        var(--dropdown-color);
  --bs-dropdown-link-color:   var(--dropdown-color);
  --bs-dropdown-link-hover-bg:    var(--dropdown-hover);
  --bs-dropdown-link-hover-color: var(--dropdown-color);
  --bs-dropdown-divider-bg:   var(--dropdown-border);
  --bs-dropdown-header-color: var(--muted-color);
}
.modal {
  --bs-modal-bg:           var(--card-bg);
  --bs-modal-color:        var(--body-color);
  --bs-modal-border-color: var(--card-border);
  --bs-modal-header-border-color: var(--card-border);
  --bs-modal-footer-border-color: var(--card-border);
}
/* Bootstrap's default active tab is --bs-emphasis-color (near black) on
   --bs-body-bg, which is unreadable on every dark theme. Point the whole set
   at our own variables so the tab reads as sitting on the content card. */
.nav-tabs {
  --bs-nav-link-color:                    var(--muted-color);
  --bs-nav-link-hover-color:              var(--body-color);
  --bs-nav-tabs-border-color:             var(--card-border);
  --bs-nav-tabs-link-hover-border-color:  var(--card-border);
  --bs-nav-tabs-link-active-color:        var(--body-color);
  --bs-nav-tabs-link-active-bg:           var(--card-bg);
  --bs-nav-tabs-link-active-border-color: var(--card-border) var(--card-border) var(--card-bg);
}
.nav-tabs .nav-link { font-size: .875rem; }
.nav-tabs .nav-link.active { font-weight: 600; }

/* ── Reset / Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--page-bg);
  font-size: 14px;
  color: var(--body-color);
  transition: background 0.3s, color 0.3s;
}

/* ── Bootstrap component overrides (themed) ───────────────────────────────── */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 1px 3px var(--card-shadow);
}
.card-header {
  background: var(--card-header-bg) !important;
  border-bottom: 1px solid var(--card-header-border) !important;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  padding: 12px 16px !important;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--card-header-color) !important;
}
/* A card that is itself the news: l.card(tone='success'|'warning'|'danger').
   Mixed into the theme's own card colours, so a dark theme gets a dark tint.
   !important because the two rules above are, which is why the inline
   border-color and header background these cards used to carry never showed. */
.card.card-tone-success { --tone: var(--health-green); }
.card.card-tone-warning { --tone: var(--health-amber); }
.card.card-tone-danger  { --tone: var(--health-red); }
.card[class*="card-tone-"] { border-color: color-mix(in srgb, var(--tone) 45%, var(--card-border)) !important; }
.card[class*="card-tone-"] > .card-header {
  background: color-mix(in srgb, var(--tone) 10%, var(--card-header-bg)) !important;
}
.card[class*="card-tone-"] > .card-header .bi:first-child { color: var(--tone); }
/* l.card(focusable=true): the section takes focus for its own keys, and the
   ring around a whole card read as a stray border. */
.card-focusable { outline: none; }

/* ── elements/_feedback.html ──────────────────────────────────────────────── */
/* The help mark: quiet until it is pointed at, and reachable by keyboard. */
.help-mark { color: var(--muted-color); cursor: help; font-size: .85em; margin-left: .25rem; }
.help-mark:hover, .help-mark:focus-visible { color: var(--sidebar-active); outline: none; }
/* Initials in a circle, coloured from the theme so it follows the theme. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; font-weight: 600; line-height: 1; color: #fff;
  background: var(--sidebar-active); user-select: none;
}
.avatar-sm { width: 22px; height: 22px; font-size: .62rem; }
.avatar-md { width: 30px; height: 30px; font-size: .75rem; }
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.avatar-tone-0 { background: var(--sidebar-active); }
.avatar-tone-1 { background: color-mix(in srgb, var(--health-green) 80%, #000); }
.avatar-tone-2 { background: color-mix(in srgb, var(--health-amber) 85%, #000); }
.avatar-tone-3 { background: color-mix(in srgb, var(--health-red) 85%, #000); }
.avatar-tone-4 { background: color-mix(in srgb, var(--sidebar-active) 55%, var(--health-green)); }
.avatar-none  { background: var(--health-grey); }
/* Saving, Saved, Couldn't save: one of the three shows, by data-state. */
.save-state { font-size: .8rem; white-space: nowrap; }
.save-state > span { display: none; }
.save-state[data-state="saving"] .save-state-saving { display: inline; color: var(--muted-color); }
.save-state[data-state="saved"]  .save-state-saved  { display: inline; color: var(--health-green); }
.save-state[data-state="failed"] .save-state-failed { display: inline; color: var(--health-red); }
.save-state .spinner-border-sm { width: .7rem; height: .7rem; border-width: .12em; vertical-align: -1px; }
.form-control, .form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}
.form-control::placeholder { color: var(--input-placeholder) !important; }
/* A ticket's deadline, amber when it is close and red once it has passed.
   This used to be an inline border-color and color, which never showed: the
   rule above sets both with !important and an ordinary inline style loses to
   that. Two classes on the same element outrank it. */
.form-control.deadline-soon    { border-color: var(--health-amber) !important; color: var(--health-amber) !important; }
.form-control.deadline-overdue { border-color: var(--health-red) !important;   color: var(--health-red) !important; }
/* The smaller checkbox in a card header's filter (ticket notes). */
.form-check-input.check-sm { width: .85rem; height: .85rem; }
/* A text input with a search icon sitting inside its left edge. */
.form-control.has-lead-icon { padding-left: 2rem; }
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--input-focus-border) !important;
  color: var(--input-color) !important;
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important;
}
.list-group-item {
  background-color: var(--list-item-bg) !important;
  border-color: var(--list-item-border) !important;
  color: var(--body-color) !important;
}
.text-muted { color: var(--muted-color) !important; }
.text-dark  { color: var(--body-color) !important; }
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
.dropdown-item {
  color: var(--dropdown-color) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--dropdown-color) !important;
}
.dropdown-divider { border-color: var(--dropdown-border) !important; }
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--body-color) !important;
  border-color: var(--card-border) !important;
}
.modal-header, .modal-footer {
  border-color: var(--card-border) !important;
}
/* Two dialog shapes the modal element cannot take as a style argument,
   because the escape-hatch test keeps colour and borders off those. The
   changelog's softer corners, and a live preview whose body is the page
   background so the ticket drawn inside it reads as a page, not a card. */
.changelog-modal .modal-content { border-radius: 12px; overflow: hidden; }
.modal-body-page { background: var(--page-bg); }
/* keep Bootstrap's alert-success green - only retheme its border */
.alert-success { border-color: var(--card-border) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, background 0.3s;
  z-index: 1000;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  color: var(--sidebar-brand-color);
  font-size: 1.05rem;
  font-weight: 700;
  border-bottom: 1px solid var(--sidebar-divider);
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-brand i { font-size: 1.3rem; color: var(--sidebar-active); flex-shrink: 0; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; gap: 0; }
.sidebar.collapsed .brand-text { opacity: 0; width: 0; overflow: hidden; }

.sidebar-nav { padding: 12px 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
  font-size: 0.875rem;
}
.sidebar-nav .nav-link:hover { color: var(--sidebar-brand-color); background: var(--sidebar-hover); }
.sidebar-nav .nav-link.active {
  color: var(--sidebar-brand-color);
  background: color-mix(in srgb, var(--sidebar-active) 18%, transparent);
  border-left: 3px solid var(--sidebar-active);
}
.sidebar-nav .nav-link i { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar-nav .nav-link span { transition: opacity 0.15s; white-space: nowrap; }
/* ── Collapsed state ──────────────────────────────────────────────────────── */
.sidebar.collapsed .nav-link {
  gap: 0;
  justify-content: center;
  padding: 9px 0;
  border-left: none;
}
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-link .badge { display: none; }
.sidebar.collapsed .nav-link.active {
  border-left: none;
  box-shadow: inset 2px 0 0 var(--sidebar-active), inset -2px 0 0 var(--sidebar-active);
}
/* nav-link-row (saved queries): hide delete button, center icon */
.sidebar.collapsed .nav-link-row { padding: 0; justify-content: center; }
.sidebar.collapsed .nav-link-row .btn-icon { display: none; }
.sidebar.collapsed .nav-link-row .nav-link { flex: none; width: 100%; gap: 0; justify-content: center; padding: 9px 0; }

.sidebar-divider {
  border-top: 1px solid var(--sidebar-divider);
  margin: 8px 16px;
}

.sidebar-spacer { flex: 1; }

.nav-link-row .btn-icon {
  background: none;
  border: none;
  color: var(--muted-color);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
}
.nav-link-row .btn-icon:hover { background: var(--sidebar-hover); color: var(--sidebar-brand-color); }

/* Saved query drag-and-drop + rename */
.sq-row { cursor: default; }
.sq-row:hover .sq-btns { opacity: 1 !important; }
.sq-handle { user-select: none; }
.sq-rename-input { flex: 1 1 auto; min-width: 0; }
.sidebar.collapsed .sq-handle,
.sidebar.collapsed .sq-btns,
.sidebar.collapsed .sq-rename-input { display: none; }

.text-danger-soft { color: #f87171 !important; }

/* ── Main Content ─────────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
}
.main-content.expanded { margin-left: var(--sidebar-w-col); }

/* ── Top Bar ──────────────────────────────────────────────────────────────── */
.top-bar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  box-shadow: 0 1px 3px var(--topbar-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s;
}
.top-bar-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--topbar-title);
}
.btn-icon {
  background: none;
  border: 1px solid var(--btn-icon-border);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--btn-icon-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.btn-icon:hover { background: var(--btn-icon-hover); color: var(--body-color); }

/* ── Content Area ─────────────────────────────────────────────────────────── */
.content-area {
  padding: 20px 24px;
  flex: 1;
}
.flash-container { margin-bottom: 16px; }

/* ── Stat Cards ───────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px var(--card-shadow);
  height: 100%;
}
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.bg-blue-soft   { background: color-mix(in srgb, #3b82f6 14%, var(--card-bg)); }
.bg-indigo-soft { background: color-mix(in srgb, #6366f1 14%, var(--card-bg)); }
.bg-yellow-soft { background: color-mix(in srgb, #eab308 14%, var(--card-bg)); }
.bg-green-soft  { background: color-mix(in srgb, #22c55e 14%, var(--card-bg)); }
.text-indigo    { color: var(--sidebar-active); }

.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-color); font-weight: 600; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--body-color); line-height: 1.1; }

/* ── Alert Cards ──────────────────────────────────────────────────────────── */
.alert-card {
  border-radius: var(--card-radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.alert-card-critical { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-card-high     { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.alert-card:hover    { filter: brightness(0.97); }

/* ── Priority / Status Badges ─────────────────────────────────────────────── */
.badge-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.bp-very-low { background: #f1f5f9; color: #475569; }
.bp-low      { background: #dcfce7; color: #166534; }
.bp-medium   { background: #dbeafe; color: #1e40af; }
.bp-high     { background: #ffedd5; color: #9a3412; }
.bp-critical { background: #fee2e2; color: #991b1b; }
.bs-open        { background: #dbeafe; color: #1e40af; }
.bs-in-progress { background: #fef3c7; color: #92400e; }
.bs-pending     { background: #ffedd5; color: #9a3412; }
.bs-resolved    { background: #dcfce7; color: #166534; }
.bs-closed      { background: #f1f5f9; color: #475569; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table { color: var(--body-color); }
.table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-color);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border) !important;
  border-color: var(--table-border) !important;
  padding: 10px 12px;
}
.table td { padding: 10px 12px; vertical-align: middle; border-color: var(--table-border) !important; }
.table-hover tbody tr:hover { background: var(--table-hover) !important; }

.ticket-title-link { color: var(--link-color); font-weight: 500; text-decoration: none; }
.ticket-title-link:hover { color: var(--link-hover); }

.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--sidebar-active); }
.sort-link.active { color: var(--sidebar-active); }

/* ── Filter Bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  background: var(--filter-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  box-shadow: 0 1px 3px var(--card-shadow);
}

/* ── Filter Dropdown Buttons ─────────────────────────────────────────────── */
.filter-dropdown-btn {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--body-color);
  font-size: .82rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.filter-dropdown-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--sidebar-active);
  color: var(--sidebar-brand-color);
}
.filter-dropdown-btn.active {
  background: color-mix(in srgb, var(--sidebar-active) 12%, transparent);
  border-color: var(--sidebar-active);
  color: var(--sidebar-active);
}
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-active);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
}
.filter-mode-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  background: #10b981;
  color: #fff;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 2px;
}
.filter-dropdown .dropdown-menu {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  max-height: 280px;
  overflow-y: auto;
}
.filter-dropdown .form-check-label { color: var(--body-color); cursor: pointer; }
.filter-dropdown .form-check-input { cursor: pointer; }

/* ── Detail Table ─────────────────────────────────────────────────────────── */
.detail-table th {
  font-size: 0.78rem;
  color: var(--muted-color);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: transparent !important;
  width: 40%;
  padding: 8px 16px;
  border-bottom: 1px solid var(--detail-border) !important;
  border-color: var(--detail-border) !important;
}
.detail-table td {
  font-size: 0.875rem;
  padding: 8px 16px;
  border-bottom: 1px solid var(--detail-border) !important;
  border-color: var(--detail-border) !important;
}
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: none !important; }

/* ── Comment ──────────────────────────────────────────────────────────────── */
.comment-item {
  border-left: 3px solid var(--comment-border);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  background: var(--comment-bg);
  margin-bottom: 10px;
}

/* ── Dopamine close button ────────────────────────────────────────────────── */
.btn-dopamine {
  background: linear-gradient(135deg, var(--sidebar-active), color-mix(in srgb, var(--sidebar-active) 60%, #ec4899));
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sidebar-active) 40%, transparent);
}
.btn-dopamine:hover {
  color: #fff;
  filter: brightness(1.1);
}

/* ── Search highlight mark ────────────────────────────────────────────────── */
mark.search-mark {
  background: color-mix(in srgb, var(--sidebar-active) 28%, var(--card-bg));
  color: var(--body-color);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Detail text ──────────────────────────────────────────────────────────── */
.detail-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--body-color);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Quick status / rock buttons ──────────────────────────────────────────── */
.btn-xs {
  padding: 2px 10px;
  font-size: 0.75rem;
  border-radius: 20px;
  line-height: 1.6;
}

/* ── Import page ──────────────────────────────────────────────────────────── */
.import-wrap { max-width: 800px; }
.step-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sidebar-active);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Theme picker active dot ──────────────────────────────────────────────── */
.theme-opt { position: relative; }
.theme-opt.is-active::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sidebar-active);
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.row-hidden { display: none !important; }

/* ── Mobile FAB (hidden on desktop) ───────────────────────────────────── */
.mobile-fab {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* ── Mobile: <= 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar: off-screen slide-out drawer ─────────────────────────────── */
  .sidebar {
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.3s ease, background 0.3s;
    z-index: 1100;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.collapsed {
    width: var(--sidebar-w);
    transform: translateX(-100%);
  }
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }
  /* Keep text visible in mobile drawer */
  .sidebar .brand-text,
  .sidebar .nav-link span,
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-link span { opacity: 1 !important; }
  .sidebar .nav-link,
  .sidebar.collapsed .nav-link {
    justify-content: flex-start !important;
    padding: 12px 20px !important;
    gap: 12px !important;
    box-shadow: none !important;
  }
  .sidebar .nav-link span,
  .sidebar.collapsed .nav-link span { display: inline !important; opacity: 1 !important; }
  .sidebar .nav-link .badge,
  .sidebar.collapsed .nav-link .badge { display: inline-flex !important; }
  .sidebar .nav-link.active,
  .sidebar.collapsed .nav-link.active {
    border-left: 3px solid var(--sidebar-active) !important;
    box-shadow: none !important;
  }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1050;
  }
  .sidebar-backdrop.active { display: block; }

  /* Sidebar nav items: bigger touch targets */
  .sidebar-nav .nav-link {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .sidebar-nav .nav-link i { font-size: 1.15rem; }

  /* Saved query delete button: bigger touch target */
  .nav-link-row .btn-icon {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Main content: full width ─────────────────────────────────────────── */
  .main-content,
  .main-content.expanded {
    margin-left: 0 !important;
  }

  /* ── Top bar ──────────────────────────────────────────────────────────── */
  .top-bar {
    padding: 0 12px;
    gap: 8px;
    height: 50px;
  }
  .top-bar-title {
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
  }
  /* Hamburger button: bigger touch target */
  .top-bar .btn-icon#sidebarToggle,
  .top-bar #sidebarToggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Content area ─────────────────────────────────────────────────────── */
  .content-area {
    padding: 12px 10px;
  }

  /* ── Stat cards: 2-column grid, tighter ───────────────────────────────── */
  .stat-card {
    padding: 12px 14px;
  }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: .68rem; }

  /* ── Filter bar: full-width wrapping ──────────────────────────────────── */
  .filter-bar {
    padding: 10px 12px;
  }
  .filter-bar .input-group {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .filter-bar .d-flex.flex-wrap {
    gap: 6px !important;
  }
  .filter-dropdown-btn {
    font-size: .78rem;
    padding: 6px 10px;
    min-height: 36px;
  }
  /* Make filter dropdowns wider on mobile for touch */
  .filter-dropdown .dropdown-menu {
    min-width: 220px !important;
    max-height: 60vh;
  }
  .filter-dropdown .form-check {
    padding: 6px 0 6px 28px;
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .filter-dropdown .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
  .filter-dropdown .form-check-label {
    font-size: .88rem;
    padding-left: 4px;
  }

  /* ── Ticket table: horizontal scroll ──────────────────────────────────── */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
  .table th,
  .table td {
    padding: 8px 10px;
    font-size: .82rem;
    white-space: nowrap;
  }
  /* Hide less important columns on small screens */
  .table .hide-mobile {
    display: none !important;
  }

  /* ── Bulk action bar ──────────────────────────────────────────────────── */
  #bulk-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    border-radius: 0;
    margin: 0 -10px 8px -10px;
  }
  #bulk-bar .d-flex.gap-2 {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  #bulk-bar .btn {
    font-size: .78rem;
    padding: 4px 8px;
  }

  /* ── Cards: tighter spacing ───────────────────────────────────────────── */
  .card {
    border-radius: 8px !important;
  }
  .card-header {
    padding: 10px 14px !important;
    font-size: .82rem;
  }
  .card-body {
    padding: 12px 14px;
  }

  /* ── Detail table (ticket detail right panel) ─────────────────────────── */
  .detail-table th,
  .detail-table td {
    padding: 8px 12px;
    font-size: .82rem;
  }
  .detail-table th { width: 35%; }

  /* ── Inline fields: touch-friendly ────────────────────────────────────── */
  .inline-field {
    min-height: 38px !important;
    font-size: .88rem !important;
  }

  /* ── Comment items ────────────────────────────────────────────────────── */
  .comment-item {
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  /* ── Modals / popups: full width on mobile ────────────────────────────── */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-dialog.modal-sm {
    max-width: calc(100vw - 16px) !important;
  }

  /* ── Custom modal backdrops (merge, link, theme shop) ─────────────────── */
  #merge-modal-backdrop,
  #link-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #merge-modal-backdrop > div,
  #link-modal-backdrop > div {
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* Theme shop: full width bottom sheet */
  #theme-shop-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #theme-shop-backdrop > div {
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }

  /* Lightbox: safe on mobile */
  #lightbox img {
    max-width: 96vw !important;
    max-height: 85vh !important;
  }
  #lightbox button {
    top: 8px !important;
    right: 8px !important;
    font-size: 2.5rem !important;
    min-width: 44px;
    min-height: 44px;
  }

  /* Keyboard shortcuts modal -- hide on mobile (not relevant) */
  #kb-help-modal > div {
    width: 95vw !important;
    padding: 16px 18px !important;
  }

  /* ── Schedule banner / toasts ─────────────────────────────────────────── */
  #schedule-banner {
    padding: 8px 12px !important;
    font-size: .88rem;
  }
  #schedule-toasts {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: 100% !important;
  }

  /* ── Settings tabs: scrollable horizontally ───────────────────────────── */
  #settingsTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
  }
  #settingsTabs::-webkit-scrollbar { display: none; }
  #settingsTabs .nav-item { flex-shrink: 0; }
  #settingsTabs .nav-link {
    padding: 8px 12px;
    font-size: .82rem;
    white-space: nowrap;
  }

  /* ── Settings field options: tighter on mobile ────────────────────────── */
  .option-row {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .option-row .option-name-input {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* ── Import page table ────────────────────────────────────────────────── */
  .import-wrap { max-width: 100%; }

  /* ── Rock detail custom fields ────────────────────────────────────────── */
  #custom-fields-list .d-flex {
    flex-wrap: wrap;
  }
  #custom-fields-list .d-flex input[style*="max-width:160px"] {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ── Dashboard: My Queue list items ───────────────────────────────────── */
  .list-group-item.list-group-item-action {
    padding: 10px 12px !important;
    min-height: 44px;
  }

  /* ── Buttons: minimum touch target ────────────────────────────────────── */
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: .82rem;
  }
  .btn-icon {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Portal table: horizontal scroll ──────────────────────────────────── */
  .portal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Rock cards: single column on very small ──────────────────────────── */
  .rock-card .card-body { padding: 12px; }

  /* ── Alert cards ──────────────────────────────────────────────────────── */
  .alert-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .alert-card .fs-3 { font-size: 1.2rem !important; }

  /* ── Forms: wider inputs ──────────────────────────────────────────────── */
  .form-control,
  .form-select {
    min-height: 40px;
    font-size: .9rem;
  }
  .form-control-sm,
  .form-select-sm {
    min-height: 36px;
    font-size: .85rem;
  }
  textarea.form-control {
    min-height: auto;
  }

  /* ── Dopamine / close ticket button: prominent ────────────────────────── */
  #dopamine-btn {
    min-height: 44px;
    font-size: .9rem !important;
  }

  /* ── Note image drop zone: thumb-friendly ─────────────────────────────── */
  #drop-zone {
    padding: 14px !important;
    font-size: .88rem !important;
  }
  #drop-zone label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Chart containers in dashboard ────────────────────────────────────── */
  .card-body.d-flex[style*="height:180px"] {
    height: 140px !important;
  }

  /* ── Search page ──────────────────────────────────────────────────────── */
  .input-group-lg .form-control {
    font-size: .95rem;
  }
  .input-group-lg .input-group-text {
    padding: 8px 12px;
  }

  /* ── Top bar actions: compact ─────────────────────────────────────────── */
  .top-bar .ms-auto.d-flex {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .top-bar .btn-sm {
    padding: 4px 8px;
    min-height: 36px;
    font-size: .78rem;
  }

  /* ── Mobile search bar (visible only on mobile) ───────────────────────── */
  .mobile-search-form {
    display: flex !important;
    padding: 6px 10px 10px;
    background: var(--topbar-bg);
    margin: 0 -10px;
    margin-top: -12px;
    margin-bottom: 12px;
  }
  .mobile-search-form .input-group {
    max-width: 100% !important;
  }

  /* ── Floating Action Button ────────────────────────────────────────────── */
  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sidebar-active);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--sidebar-active) 50%, transparent), 0 2px 8px rgba(0,0,0,.2);
    text-decoration: none;
    z-index: 1000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .mobile-fab:hover,
  .mobile-fab:active {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 28px color-mix(in srgb, var(--sidebar-active) 60%, transparent), 0 3px 12px rgba(0,0,0,.25);
    color: #fff;
    text-decoration: none;
  }

} /* end @media (max-width: 768px) */

/* Mobile search form: hidden by default, shown when topbar search is hidden */
.mobile-search-form {
  display: none !important;
}
@media (max-width: 1150px) {
  .mobile-search-form {
    display: flex !important;
  }
}

/* ── Headspace (canvas) mobile styles ────────────────────────────────────── */
@media (max-width: 768px) {
  #hs-bar {
    height: auto !important;
    min-height: 48px;
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  #hs-bar .back-btn {
    font-size: .75rem;
    padding: 4px 8px;
  }
  #hs-bar .ticket-label,
  #hs-bar .rock-label,
  #hs-bar .hs-name-label {
    max-width: 100px;
    font-size: .72rem;
  }
  .hs-divider {
    display: none !important;
  }
  .hs-tool-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem;
  }
  #hs-color {
    width: 36px;
    height: 36px;
  }
  #hs-width {
    width: 52px;
    font-size: .75rem;
    padding: 3px 2px;
  }
  .hs-check-label {
    font-size: .75rem;
  }
  #hs-canvas-wrap {
    top: auto !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
  }
  #hs-status {
    font-size: .72rem;
  }
}

/* ── Driver.js tour popover theme ───────────────────────────────────────── */
.vantage-tour-popover.driver-popover {
  background: var(--card-bg, #fff);
  color: var(--body-color, #1e293b);
  border: 1px solid var(--card-border, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-width: 340px;
}
.vantage-tour-popover .driver-popover-title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--body-color, #1e293b);
}
.vantage-tour-popover .driver-popover-description {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--body-color, #1e293b);
  opacity: .9;
}
.vantage-tour-popover .driver-popover-footer {
  border-top: 1px solid var(--card-border, rgba(0,0,0,.1));
  padding-top: 10px;
  margin-top: 10px;
}
.vantage-tour-popover .driver-popover-footer button {
  font-size: .8rem;
  border-radius: 6px;
  padding: 5px 12px;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  letter-spacing: normal;
}
.vantage-tour-popover .driver-popover-footer button::before,
.vantage-tour-popover .driver-popover-footer button::after {
  display: none !important;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-next-btn {
  background: var(--sidebar-active, #3b82f6);
  border-color: var(--sidebar-active, #3b82f6);
  color: #fff;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-next-btn:hover {
  opacity: .88;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-prev-btn {
  background: transparent;
  border-color: var(--card-border, rgba(0,0,0,.2));
  color: var(--body-color, #1e293b);
}
.vantage-tour-popover .driver-popover-progress-text {
  font-size: .75rem;
  opacity: .6;
}
.vantage-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--card-bg, #fff); }
@media (max-width: 768px) {
  .vantage-tour-popover.driver-popover { max-width: calc(100vw - 32px); }
}

/* ── Tutorial help button subtle pulse (first visit) ─────────────────────── */
#tutorial-help-btn.tour-pulse {
  animation: tour-pulse-ring 2s ease-in-out 3;
}
@keyframes tour-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  50%  { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* ── Portal form wrapper ─────────────────────────────────────────────────── */
.portal-form-wrap {
  max-width: 680px;
}
@media (max-width: 768px) {
  .portal-form-wrap {
    max-width: 100%;
  }
  /* Portal notification pref: full width on mobile */
  .card[style*="max-width:480px"] {
    max-width: 100% !important;
  }
  /* Detail pages: top_actions stay single-line, icon-only on mobile */
  .top-bar .ms-auto.d-flex {
    flex-wrap: nowrap !important;
  }
  /* Changes/rocks/ideas list: card grid 1-column on small phones */
  .row-cols-md-2 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Stat bar: 2-up grid on mobile */
  .col-6.col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* CIR / CMDB / KB detail cards: stacked on mobile */
  .col-lg-8, .col-lg-4 {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Table description truncation: relax on mobile */
  .text-truncate[style*="max-width:380px"] {
    max-width: 100% !important;
  }
}


/* ── Copper (light - warm cream, dark brown sidebar, metallic copper accent) ─ */
[data-theme="copper"] {
  --sidebar-bg:          #2d1505;
  --sidebar-text:        #d4956a;
  --sidebar-active:      #b87333;
  --sidebar-hover:       rgba(184,115,51,0.12);
  --sidebar-divider:     rgba(184,115,51,0.15);
  --sidebar-brand-color: #f5d9b8;
  --topbar-bg:           #ffffff;
  --topbar-shadow:       rgba(45,21,5,0.08);
  --topbar-title:        #2d1505;
  --page-bg:             #fdf7f0;
  --body-color:          #2d1505;
  --muted-color:         #a06840;
  --card-bg:             #ffffff;
  --card-border:         #f0d0a8;
  --card-shadow:         rgba(45,21,5,0.06);
  --card-header-bg:      #fdf7f0;
  --card-header-border:  #f0d0a8;
  --card-header-color:   #2d1505;
  --input-bg:            #fffaf5;
  --input-border:        #e8b880;
  --input-color:         #2d1505;
  --input-placeholder:   #c08050;
  --input-focus-border:  #b87333;
  --input-focus-shadow:  rgba(184,115,51,0.18);
  --table-header-bg:     #fdf0e0;
  --table-border:        #f0d0a8;
  --table-hover:         #fdf0e0;
  --list-item-bg:        #ffffff;
  --list-item-border:    #f0d0a8;
  --btn-icon-border:     #f0d0a8;
  --btn-icon-color:      #a06840;
  --btn-icon-hover:      #fdf0e0;
  --comment-bg:          #fdf7f0;
  --comment-border:      #f0d0a8;
  --detail-border:       #f5e0c0;
  --filter-bg:           #ffffff;
  --link-color:          #b87333;
  --link-hover:          #8a5520;
  --dropdown-bg:         #ffffff;
  --dropdown-border:     #f0d0a8;
  --dropdown-color:      #2d1505;
  --dropdown-hover:      #fdf0e0;
  --bs-body-bg:          #fdf7f0;
  --bs-body-color:       #2d1505;
  --bs-border-color:     #f0d0a8;
  --bs-tertiary-bg:      #fdf0e0;
  --bs-secondary-color:  #a06840;
  --success-color:       #059669;
  --warning-color:       #d97706;
  --danger-color:        #dc2626;
}


/* ── Compact topbar: hide search + icon-only action buttons ──────────────── */
@media (max-width: 1150px) {
  /* Hide the inline search bar - mobile search bar below topbar handles it */
  .topbar-search { display: none !important; }

  /* Action buttons collapse to icon-only */
  .top-actions-wrap {
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
  }
  .top-actions-wrap .btn {
    font-size: 0 !important;
    padding: 5px 9px !important;
    flex-shrink: 0;
  }
  .top-actions-wrap .btn i,
  .top-actions-wrap .btn .bi {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Keep the whole right section on one line */
  .top-bar .ms-auto.d-flex {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
}

/* ── Tablet / small desktop tweaks ───────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .content-area {
    padding: 16px 18px;
  }
  .sidebar.collapsed + .main-content,
  .main-content.expanded {
    margin-left: var(--sidebar-w-col);
  }
}

/* ── Board Tiles ──────────────────────────────────────────────────────────── */
.board-tile {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius, 8px);
  padding: 12px 14px;
  min-width: 170px;
  max-width: 210px;
  flex: 0 0 auto;
  transition: border-color .15s;
}
.board-tile:hover { border-color: var(--sidebar-active); }
.board-tile-active {
  border-color: var(--sidebar-active) !important;
  background: color-mix(in srgb, var(--sidebar-active) 8%, var(--card-bg)) !important;
}

/* TV role - hide sidebar and related chrome */
body[data-user-role="tv"] .sidebar,
body[data-user-role="tv"] .mobile-fab,
body[data-user-role="tv"] .sidebar-backdrop { display: none !important; }

/* ── Autolink view (click-to-edit text fields) ────────────────────────────── */
.autolink-view {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--input-color);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--card-radius, 6px);
  /* Match the textarea this swaps with: without pre-wrap the view collapses
     line breaks, so it renders shorter and the box jumps on click. */
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Auto-growing textareas. Height is driven by JS (see autoExpand); these keep
   the box metrics identical to .autolink-view so the swap is seamless. */
textarea.auto-expand {
  min-height: 38px;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: var(--card-radius, 6px);
  resize: none;
  overflow: hidden;
}
.autolink-view:hover {
  border-color: var(--input-focus-border);
}
.autolink-view a { color: var(--sidebar-active); }
.autolink-view .al-placeholder { color: var(--input-placeholder); }

/* ── My Work - Kanban ─────────────────────────────────────────────────────── */
.mw-kanban-board {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  /* Fixed-height board with each lane scrolling its own cards. That keeps every
     header - and so every drop target - on screen no matter how many cards one
     lane holds, which sticky headers inside a shared scrollport cannot do. */
  height: calc(100vh - var(--topbar-h) - 200px);
  min-height: 280px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
.mw-kanban-col {
  flex: 0 0 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* The column header as a band, the way production's boards (and the old Ideas
   board) drew it: users missed it (Brady, 2026-10-09: "the column header being
   darker on the old is what the users are talking about"). */
.mw-kanban-col-header {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-color);
  padding: 7px 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-bottom: 2px solid var(--sidebar-active);
  border-radius: 6px 6px 0 0;
}
.mw-kanban-cards {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 6px 6px 4px;
  min-height: 60px;
  flex: 1;
  overflow-y: auto;
  transition: background .15s, border-color .15s;
}
.mw-kanban-drop-target .mw-kanban-cards,
.mw-kanban-drop-target .mw-lane-drop,
.mw-kanban-cards.mw-kanban-drop-target,
.mw-lane-drop.mw-kanban-drop-target {
  background: color-mix(in srgb, var(--sidebar-active) 10%, var(--card-bg)) !important;
  border-color: var(--sidebar-active) !important;
}
.mw-kanban-drop-target .mw-kanban-col-header,
.mw-kanban-drop-target .mw-stream-head {
  background: color-mix(in srgb, var(--sidebar-active) 22%, var(--card-bg)) !important;
  color: var(--body-color) !important;
}

/* ── Empty lanes: hidden until you pick something up ───────────────────────────
   Brady, 2026-09-15: a board should show the buckets you have work in, and the
   rest only while you are dragging, after the filled ones.

   Hidden here rather than left out of the rendered board, because a lane that
   is not in the DOM cannot be a drop target, and adding lanes back on dragstart
   would rebuild the board underneath a drag that has already begun. The
   ordering is done in groupItems, so these are already last in source order and
   need no reordering here.

   The class goes on the board you are dragging in, not on the page: My Work
   draws two of these boards and revealing the other one's empty lanes would
   grow the page underneath a drag in progress.

   The display values are written out rather than reverted because the two
   lanes differ: a stream is a block and a kanban column is a flex column, and
   display:revert is the kind of thing that works until somebody adds a rule
   above it. */
/* Week calendar (elements/_calendar.html, static/js/week_calendar.js):
   the work list beside a week of hours. --wc-span is the number of hours
   drawn, set by the script from the element's settings. */
.wc { --wc-hour: 44px; --wc-span: 12; }
.wc-summary { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wc-wrap { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 991px) { .wc-wrap { grid-template-columns: minmax(0, 1fr); } }
.wc-hint { color: var(--muted-color); font-size: .7rem; padding: .25rem .5rem; }
.wc-list { max-height: calc(100vh - 230px); overflow-y: auto; }
.wc-list-head { font-size: .72rem; font-weight: 600; color: var(--muted-color); padding: .5rem .6rem .25rem;
                border-top: 1px solid var(--card-border); text-transform: uppercase; letter-spacing: .03em; }
.wc-item { display: flex; gap: .4rem; align-items: flex-start; padding: .4rem .6rem; border-bottom: 1px solid var(--card-border);
           cursor: grab; font-size: .8rem; color: var(--body-color); background: var(--card-bg); }
.wc-item:hover { background: color-mix(in srgb, var(--sidebar-active) 8%, var(--card-bg)); }
.wc-item:active { cursor: grabbing; }
.wc-item-icon { color: var(--muted-color); margin-top: .15rem; }
.wc-item-main { flex: 1 1 auto; min-width: 0; }
.wc-item-title { display: block; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-item.wc-unassigned { border-left: 3px solid var(--muted-color); }
.wc-meta { color: var(--muted-color); font-size: .7rem; }
.wc-item.wc-on-cal .wc-when { color: var(--sidebar-active); }
.wc-est { border: 0; background: none; padding: 0 .15rem; font: inherit; color: var(--sidebar-active);
          border-bottom: 1px dashed currentColor; cursor: pointer; line-height: 1.1; }
.wc-est:disabled { color: var(--muted-color); border-bottom: 0; cursor: default; }
.wc-est-input { display: inline-block; width: 4.5rem; height: 1.4rem; padding: 0 .3rem; font-size: .72rem; }
.wc-cal { overflow-x: auto; }
.wc-grid { display: grid; grid-template-columns: 46px repeat(7, minmax(96px, 1fr)); min-width: 720px; }
.wc-head { text-align: center; font-size: .75rem; font-weight: 600; padding: .35rem 0; border-bottom: 1px solid var(--card-border); }
.wc-head.wc-today { color: var(--sidebar-active); }
.wc-gutter-label { font-size: .65rem; color: var(--muted-color); text-align: right; padding: 4px 6px 0 0; }
.wc-allday { border-bottom: 1px solid var(--card-border); border-left: 1px solid var(--card-border); padding: 2px; min-height: 26px; }
.wc-chip { display: block; font-size: .68rem; padding: 1px 4px; margin-bottom: 2px; border-radius: 4px; color: var(--body-color);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.wc-chip-due { background: color-mix(in srgb, var(--bs-danger, #dc3545) 15%, transparent); }
.wc-chip-event { background: color-mix(in srgb, var(--muted-color) 20%, transparent); }
.wc-hour { height: var(--wc-hour); position: relative; }
.wc-hour span { position: absolute; right: 6px; top: 0; transform: translateY(-50%); font-size: .65rem; color: var(--muted-color); }
.wc-day { position: relative; height: calc(var(--wc-span) * var(--wc-hour)); border-left: 1px solid var(--card-border);
          background-image: linear-gradient(to bottom, var(--card-border) 1px, transparent 1px);
          background-size: 100% var(--wc-hour); }
.wc-day.wc-today { background-color: color-mix(in srgb, var(--muted-color) 6%, transparent); }
.wc-day.wc-over { background-color: color-mix(in srgb, var(--sidebar-active) 8%, transparent); }
.wc-block { position: absolute; border-radius: 5px; padding: 2px 5px; font-size: .68rem; overflow: hidden;
            line-height: 1.25; box-sizing: border-box; color: var(--body-color); }
.wc-block-event { background: color-mix(in srgb, var(--muted-color) 22%, transparent); border-left: 3px solid var(--muted-color); }
.wc-block-event.wc-free { opacity: .55; }
.wc-block-work { background: color-mix(in srgb, var(--sidebar-active) 28%, transparent); border-left: 3px solid var(--sidebar-active); cursor: grab; padding-right: 14px; }
.wc-block-work a { color: inherit; text-decoration: none; }
.wc-block .wc-t { color: var(--muted-color); }
.wc-x { position: absolute; top: 1px; right: 3px; border: 0; background: none; color: inherit; padding: 0;
        font-size: .8rem; line-height: 1; opacity: .6; cursor: pointer; }
.wc-x:hover { opacity: 1; }
.wc-ghost { position: absolute; left: 2px; right: 2px; border: 2px dashed var(--sidebar-active); border-radius: 5px;
            pointer-events: none; font-size: .68rem; padding: 1px 4px; color: var(--sidebar-active); }

/* Sizer (elements/_sizer.html, static/js/task_sizer.js): a task's estimate
   and worth where it is listed. Compact is one line for a list row. */
.sz { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.sz-box { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.sz-label { font-size: .68rem; color: var(--muted-color); white-space: nowrap; }
.sz-input { width: 6.5rem; }
.sz-compact .sz-input { width: 4.6rem; height: 1.7rem; padding: .1rem .35rem; font-size: .78rem; }
.sz-compact .sz-label { font-size: .62rem; }
.sz-answer { display: flex; flex-direction: column; font-size: .72rem; color: var(--muted-color); margin-left: auto; text-align: right; }
.sz-per-hour.sz-ready { color: var(--health-green, #22c55e); font-weight: 600; }
.sz.sz-saving .sz-answer { opacity: .5; }
.sz.sz-saved .sz-answer { color: var(--sidebar-active); }

/* Peek (elements/_peek.html, static/js/peek.js): a record in a drawer. */
.peek.offcanvas { width: min(440px, 100vw); background: var(--card-bg); color: var(--body-color); }
.peek .offcanvas-header { border-bottom: 1px solid var(--card-border); }
.peek-title { font-size: 1rem; font-weight: 600; margin: 0; }
.peek-loading, .peek-empty { color: var(--muted-color); font-size: .82rem; padding: .5rem 0; }
.peek-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .75rem; }
.peek-sub { font-size: .75rem; color: var(--muted-color); }
.peek-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; font-size: .82rem; margin-bottom: .5rem; }
.peek-facts dt { color: var(--muted-color); font-weight: 500; }
.peek-facts dd { margin: 0; }
.peek-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-color);
                font-weight: 600; margin: 1rem 0 .4rem; border-top: 1px solid var(--card-border); padding-top: .75rem; }
.peek-text { font-size: .82rem; white-space: pre-wrap; }
.peek-note { margin-bottom: .6rem; }
.peek-note-head { font-size: .7rem; color: var(--muted-color); }
.peek-open, tr.peek-open > td { background-color: color-mix(in srgb, var(--sidebar-active) 12%, transparent) !important; }
tr.peek-open > td:first-child, li.peek-open { box-shadow: inset 3px 0 0 var(--sidebar-active); }

/* What's next. A row and its dot light up together (data-link-key). */
.next-title { color: var(--body-color); text-decoration: none; font-weight: 500; }
.next-title:hover { color: var(--sidebar-active); }
.next-ref { color: var(--muted-color); font-size: .78rem; margin-right: .3rem; font-weight: 400; }
.next-who { font-size: .75rem; color: var(--muted-color); }
.next-quick-tag { font-size: .65rem; padding: .05rem .4rem; border-radius: 999px; margin-left: .3rem;
                  color: var(--health-green, #22c55e); border: 1px solid currentColor; white-space: nowrap; }
tr.next-row > td { transition: background-color .15s; }
tr.next-row.is-linked > td { background-color: color-mix(in srgb, var(--sidebar-active) 10%, transparent); }
tr.next-row.is-linked > td:first-child { box-shadow: inset 3px 0 0 var(--sidebar-active); }
.next-svg { width: 100%; height: auto; }
.next-quadrant { fill: var(--health-green, #22c55e); opacity: .08; }
.next-axis { stroke: var(--card-border); }
.next-mid { stroke-dasharray: 4 4; }
.next-label { font-size: 12px; fill: var(--muted-color); }
.next-point circle { fill: var(--sidebar-active); opacity: .8; stroke: var(--card-bg); stroke-width: 2;
                     transition: r .15s, opacity .15s; }
.next-point.next-point-quick circle { fill: var(--health-green, #22c55e); }
.next-point:hover circle, .next-point.is-linked circle, .next-point.peek-open circle { r: 10; opacity: 1; stroke: var(--body-color); }
.next-unsized-row { display: block; padding: .5rem .75rem; border-bottom: 1px solid var(--card-border); }
.next-unsized-head { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .35rem; font-size: .82rem; }
.next-unsized-head .next-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-ranked-note { display: none; font-size: .7rem; color: var(--health-green, #22c55e); white-space: nowrap; }
.sz-row-ranked .next-ranked-note { display: inline; }
.sz-row-ranked { box-shadow: inset 3px 0 0 var(--health-green, #22c55e); }

/* A task's notes; the opening note (what the description said) is pinned
   first, on a faint tint so it reads as the brief rather than a reply. */
.note-text { white-space: pre-wrap; color: var(--body-color); }
.note-opening { background: color-mix(in srgb, var(--sidebar-active) 6%, transparent); }

/* Work breakdown: the plan on each task row, and the quick add under each
   milestone (elements/_wbs.html, static/js/wbs_quick.js). */
.wbs-facts { display: inline-flex; gap: .3rem; align-items: center; }
.wbs-fact { font-size: .68rem; padding: .05rem .4rem; border-radius: 999px; white-space: nowrap;
            background: color-mix(in srgb, var(--muted-color) 14%, transparent); color: var(--body-color); }
.wbs-fact-pri { background: color-mix(in srgb, var(--sidebar-active) 18%, transparent); }
.wbs-due-follows { color: var(--muted-color); background: transparent; border: 1px dashed var(--card-border); }
.wbs-quick { margin: .25rem 0 .5rem 28px; }
.wbs-quick-main { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.wbs-quick-icon { color: var(--muted-color); font-size: .8rem; }
.wbs-quick-title { flex: 1 1 14rem; min-width: 10rem; }
.wbs-quick-est { width: 4.5rem; }
.wbs-quick-pri { width: 7.5rem; }
.wbs-quick-due { width: 8.5rem; }
.wbs-quick-more.active { background: color-mix(in srgb, var(--sidebar-active) 15%, transparent); }
.wbs-quick-extra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .4rem 0 0 1.2rem; }
.wbs-quick-extra .form-select { min-width: 9rem; }
.wbs-quick-who { width: 12rem; }
.wbs-quick-error { font-size: .75rem; color: var(--bs-danger, #dc3545); margin: .25rem 0 0 1.2rem; }

/* The board's bar (elements/_board.html). */
.bv-search { max-width: 250px; flex: 1 1 170px; }
.bv-search .input-group-text { background: var(--input-bg); border-color: var(--input-border); color: var(--muted-color); }
.bv-filter-menu { min-width: 200px; max-height: 320px; overflow-y: auto; }
.bv-group-menu { min-width: 170px; }

/* Workflow automations and scheduled tasks, as list rows. */
.wf-auto-row, .sched-row { display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem;
                           border-bottom: 1px solid var(--card-border); }
.wf-auto-icon { color: var(--sidebar-active); }
.wf-auto-icon.wf-auto-off { color: var(--muted-color); }
.wf-auto-main, .sched-main { flex: 1 1 auto; min-width: 0; }
.wf-auto-where { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); }
.wf-auto-text { font-size: .84rem; }
.wf-auto-runs, .sched-meta { font-size: .72rem; color: var(--muted-color); }
.sched-title { font-size: .86rem; font-weight: 500; }

/* Saved views fold under All Tickets in the sidebar. */
.sq-parent .nav-link { min-width: 0; }
.sq-toggle { border: 0; background: none; color: var(--sidebar-text, inherit); opacity: .6; padding: 0 .55rem;
             display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; line-height: 1; }
.sq-toggle:hover { opacity: 1; }
.sq-toggle .bi { transition: transform .15s; }
.sq-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.sq-count { font-size: .65rem; }
.sidebar.collapsed .sq-toggle, .sidebar.collapsed #sq-list { display: none !important; }

/* Type to pick (elements/_choice.html past SEARCH_OVER, static/js/combo.js). */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 1080; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0;
              list-style: none; max-height: 260px; overflow-y: auto; background: var(--card-bg);
              border: 1px solid var(--card-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.combo-opt { padding: .3rem .65rem; font-size: .82rem; cursor: pointer; color: var(--body-color); }
.combo-opt.is-active, .combo-opt:hover { background: color-mix(in srgb, var(--sidebar-active) 16%, transparent); }
.combo-opt.is-chosen { font-weight: 600; }
.combo-empty, .combo-none { padding: .3rem .65rem; font-size: .78rem; color: var(--muted-color); }
.sc-toggle-icon, .sc-toggle-text { font-size: .7rem; }

/* The Rocks page: sections by type (rocks.html). */
.rock-section { margin-bottom: 1.5rem; }
.rock-section-head { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
                     color: var(--muted-color); margin-bottom: .75rem; }
.rock-section-icon { margin-right: .35rem; flex-shrink: 0; }
.rock-icon-diagram-3 { color: var(--sidebar-active); }
.rock-icon-building { color: #f59e0b; }
.rock-icon-gem { color: #0ea5e9; }
.rock-card { color: inherit; }
.rock-card-main { min-width: 0; }
.rock-card-name { font-weight: 600; font-size: .95rem; color: var(--body-color); }
.rock-card-goals { color: var(--muted-color); font-size: .82rem; margin-top: .2rem; display: -webkit-box;
                   -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rock-card-foot { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .9rem;
                  background: transparent; font-size: .75rem; color: var(--muted-color); }

/* A tab that wants looking at, such as Unassigned while it has anything in
   it: a slow pulse until somebody deals with it, a steady tint for anybody
   who has asked for less motion. */
@keyframes tab-alert-pulse {
  0%, 100% { background-color: transparent; }
  50%      { background-color: color-mix(in srgb, var(--bs-danger, #dc3545) 35%, transparent); }
}
.tab-alert { animation: tab-alert-pulse 1.6s ease-in-out infinite; color: var(--bs-danger, #dc3545) !important; }
.tab-alert .badge { background-color: var(--bs-danger, #dc3545) !important; }
@media (prefers-reduced-motion: reduce) {
  .tab-alert { animation: none; background-color: color-mix(in srgb, var(--bs-danger, #dc3545) 25%, transparent); }
}
.mw-lane-vacant { display: none; }
/* A board that keeps every lane (a workflow's steps), and, while a card is
   held, only the lanes that card may go to. */
.bv-all-lanes .mw-stream.mw-lane-vacant { display: block; }
.bv-all-lanes .mw-kanban-col.mw-lane-vacant { display: flex; }
.mw-dragging .bv-lane-off { display: none !important; }
.mw-dragging .mw-stream.mw-lane-vacant { display: block; }
.mw-dragging .mw-kanban-col.mw-lane-vacant { display: flex; }

/* Visibly a place to drop rather than a lane you overlooked. */
.mw-dragging .mw-lane-vacant .mw-kanban-cards,
.mw-dragging .mw-lane-vacant .mw-lane-drop {
  border: 1px dashed var(--card-border);
  border-radius: 6px;
}
.mw-dragging .mw-lane-vacant { opacity: .72; }
.mw-dragging .mw-lane-vacant.mw-kanban-drop-target { opacity: 1; }
.mw-kanban-card {
  display: block;
  background: var(--page-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sidebar-active);
  border-radius: 5px;
  padding: 8px 9px;
  margin-bottom: 5px;
  color: var(--body-color);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.mw-kanban-card:hover {
  border-color: var(--sidebar-active);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  transform: translateY(-1px);
  color: var(--body-color);
  text-decoration: none;
}

/* ── Settings ─ Fields & Options ───────────────────────────── */
/* One page holding what used to be three tabs, so it needs its own signposting:
   a row of jump links at the top and a labelled band per record type. */
.fo-section { scroll-margin-top: 16px; }
#fo-tabs .nav-link { padding: .3rem .75rem; font-size: .85rem; }

/* Folded by default: a pane of seven open option lists is a wall, and the one
   an admin came to edit is usually a single card in it. */
.fo-card-head { position: relative; }
.fo-card-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* The button's hit area is stretched over the whole header, so clicking the
   card's title bar anywhere folds it. The header itself cannot be the button
   the way a team card's is: the Priority card has a Map Values button in it,
   and a <button> inside a <button> is invalid. */
.fo-card-toggle::after { content: ''; position: absolute; inset: 0; }
.fo-card-toggle:focus-visible {
  outline: 2px solid var(--sidebar-active);
  outline-offset: 2px;
}
/* Raised above that overlay so the badge, and Map Values, keep their clicks. */
.fo-card-actions { position: relative; z-index: 1; }
.fo-card-head:hover { background: var(--filter-bg); }
.fo-caret {
  font-size: .7rem;
  color: var(--muted-color);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.fo-card.open .fo-caret { transform: rotate(90deg); }
/* A folded card is a header and nothing else, so the divider under it would be
   a line ruled across the bottom of an empty box. */
.fo-card:not(.open) .fo-card-head { border-bottom: 0; }
/* h-100 stretches a folded card to match the tallest open one in its row. */
.fo-card:not(.open) .card { height: auto !important; }

/* ── Settings - Teams grid ────────────────────────────────────────────────── */
/* Closed cards tile; the open one takes the whole row, because the form inside
   is a four-column layout and folding it into a grid cell only makes the card
   taller than the list it replaced. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}
.team-card { margin-bottom: 0; }
.team-card.open { grid-column: 1 / -1; }
/* A closed card is a header and nothing else, so the divider under it would be
   a line ruled across the bottom of an empty box. */
.team-card:not(.open) .fo-card-head { border-bottom: 0; border-radius: inherit; }
/* A team that is switched off, dimmed rather than hidden. */
.team-card-inactive { opacity: .6; }

/* The header folds the card through l.card(collapses=...), the same toggle as
   Fields and Options. Here it takes the whole row, so the counts can sit at the
   far end of it, and keeps the slightly wider gap the team header had. */
.team-card .fo-card-toggle { flex: 1 1 auto; min-width: 0; gap: 8px; }
.team-card.open .fo-caret { transform: rotate(90deg); }
.team-card-name { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.team-card-flags { display: flex; gap: 4px; flex: 0 0 auto; }
.team-card-counts {
  margin-left: auto;
  color: var(--muted-color);
  white-space: nowrap;
  flex: 0 0 auto;
}
.team-save-status.ok   { color: var(--success-color, #22c55e); }
.team-save-status.bad  { color: #ef4444; }
.team-save-status.busy { color: var(--muted-color); }

/* ── My Work - a shallower top ────────────────────────────────────────────── */
/* Everything above the work is chrome, and on this page there are four bands of
   it: rocks, tabs, filters, and the page's own padding. Each one was sized on
   its own and together they pushed the first ticket most of the way down the
   screen. Scoped to .mw-tight so the shared components keep their own spacing
   everywhere else. */
.mw-tight .filter-bar { padding: 9px 12px; }
.mw-tight .nav-tabs .nav-link { padding: .3rem .75rem; font-size: .85rem; }
.mw-tight .nav-tabs { --bs-nav-tabs-border-width: 1px; }
.content-area:has(> .mw-tight) { padding-top: 12px; }

/* ── My Work - Rocks strip ────────────────────────────────────────────────── */
.mw-rocks-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  /* One row that scrolls sideways, never a block that grows downward. Own six
     rocks and the wrapping version cost three lines of height before the first
     ticket, which is the space this page is short of. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
  margin-bottom: 8px;
}
/* Only the size differs from the global scrollbar; the colour comes from
   there. A strip of rocks wants a slimmer bar than a board does. */
.mw-rocks-strip::-webkit-scrollbar { height: 4px; }
.mw-rocks-strip::-webkit-scrollbar-thumb { border-radius: 2px; }
.mw-rocks-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-color);
  white-space: nowrap;
}
.mw-rock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sidebar-active);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .78rem;
  color: var(--body-color);
  text-decoration: none;
  /* Chips never shrink to nothing or wrap mid-name; the strip scrolls instead. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.mw-rock-chip:hover { border-color: var(--sidebar-active); color: var(--body-color); }
.mw-rock-meta { color: var(--muted-color); font-size: .7rem; }

/* ── My Work - Rows (List view + Streams children) ────────────────────────── */
.mw-list {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-bg);
}
.mw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--card-border);
  color: var(--body-color);
  text-decoration: none;
  transition: background .12s;
}
.mw-list .mw-row:first-child { border-top: none; }
/* The per-type tabs (Changes, Releases, Problems...) draw the same rows in the
   same card as the ticket list. */
.mw-other {
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-bg);
  margin-top: .5rem;
}
.mw-other-body .mw-row:first-child { border-top: none; }
.mw-row:hover { background: var(--table-hover); color: var(--body-color); }
.mw-row-icon { color: var(--muted-color); font-size: .8rem; flex-shrink: 0; }
.mw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mw-row-title {
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mw-ref { color: var(--muted-color); font-size: .76rem; font-weight: 400; }
.mw-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .7rem;
  color: var(--muted-color);
}
.mw-row-meta i { margin-right: 3px; }
.mw-row-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mw-parent {
  color: var(--muted-color);
  font-size: .7rem;
  white-space: nowrap;
}
.mw-svc { font-size: .6rem; color: #fff; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
/* Team marker on a My Work row. Only rendered when the page spans more than
   one team, so it is styled to read as a label rather than as a status. */
.mw-team { font-size: .6rem; font-weight: 600; padding: 3px 8px; border-radius: 20px;
           background: var(--input-bg); color: var(--muted-color);
           border: 1px solid var(--card-border); }

/* Deadline pills */
.mw-due {
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}
.mw-due-over  { color: #ef4444; }
.mw-due-today { color: #f59e0b; }
.mw-due-soon  { color: #f59e0b; }
.mw-due-far   { color: var(--muted-color); font-weight: 500; }

/* ── My Work - Streams ────────────────────────────────────────────────────── */
.mw-stream {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px var(--card-shadow);
}
.mw-stream-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card-header-bg);
  color: var(--body-color);
  text-decoration: none;
  border-left: 3px solid var(--sidebar-active);
}
a.mw-stream-head:hover { background: var(--table-hover); color: var(--body-color); }
.mw-stream-head .mw-row-title { flex: 1; min-width: 0; font-weight: 600; font-size: .88rem; }
.mw-stream-head-rock   { border-left-color: #f59e0b; }
.mw-stream-head-ticket { border-left-color: var(--sidebar-active); }
.mw-stream-head-plain {
  border-left-color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.mw-stream-head-plain .mw-row-title { font-size: .72rem; color: var(--muted-color); }
.mw-stream-count {
  background: var(--input-bg);
  color: var(--muted-color);
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 9px;
}
/* Milestone sub-header inside a rock stream */
.mw-ms-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 30px;
  border-top: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--card-header-bg) 55%, var(--card-bg));
  font-size: .75rem;
  font-weight: 600;
  color: var(--body-color);
}
.mw-ms-head i { color: var(--muted-color); }
.mw-ms-target { color: var(--muted-color); font-weight: 400; font-size: .7rem; }
/* Children indent under their stream head */
.mw-stream .mw-row { padding-left: 34px; }

/* ── My Work - "Also assigned to me" section ──────────────────────────────── */
.mw-stream-head-other {
  border: none;
  border-left: 3px solid var(--muted-color);
  background: var(--card-header-bg);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.mw-stream-head-other .mw-row-title {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--muted-color);
}
.mw-stream-head-other:hover { background: var(--table-hover); }
.mw-other-caret { color: var(--muted-color); font-size: .75rem; transition: transform .15s; }
.mw-other-collapsed .mw-other-caret { transform: rotate(-90deg); }

/* ── My Work - Streams drag targets ───────────────────────────────────────── */
.mw-lane-drop { min-height: 34px; transition: background .15s; }
.mw-lane-drop.mw-kanban-drop-target {
  background: color-mix(in srgb, var(--sidebar-active) 8%, var(--card-bg));
}
.mw-stream .mw-row[draggable="true"] { cursor: grab; }
.mw-stream .mw-row[draggable="true"]:active { cursor: grabbing; }
.mw-kanban-card[draggable="true"] { cursor: grab; }
.mw-kanban-card[draggable="true"]:active { cursor: grabbing; }

@media (max-width: 768px) {
  .mw-row { flex-wrap: wrap; }
  .mw-row-badges { justify-content: flex-start; width: 100%; padding-left: 24px; }
  .mw-stream .mw-row { padding-left: 20px; }
}

/* ── My Work - Calendar ───────────────────────────────────────────────────── */
.mw-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mw-cal-day-header {
  text-align: center;
  font-size: .63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-color);
  padding: 4px 2px;
}
.mw-cal-day {
  min-height: 76px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  padding: 5px 5px 3px;
  font-size: .7rem;
  overflow: hidden;
}
.mw-cal-day.other-month { opacity: .3; }
.mw-cal-day.today { border-color: var(--sidebar-active); }
.mw-cal-day-num {
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted-color);
  margin-bottom: 3px;
  line-height: 1;
}
.mw-cal-day.today .mw-cal-day-num {
  color: var(--sidebar-active);
}
.mw-cal-event {
  display: block;
  padding: 2px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  font-size: .64rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body-color);
  text-decoration: none;
  background: color-mix(in srgb, var(--sidebar-active) 14%, var(--card-bg));
}
.mw-cal-event:hover {
  background: color-mix(in srgb, var(--sidebar-active) 28%, var(--card-bg));
  color: var(--body-color);
  text-decoration: none;
}
.mw-cal-event.overdue {
  background: color-mix(in srgb, #ef4444 20%, var(--card-bg));
}
body[data-user-role="tv"] .main-content { margin-left: 0 !important; }

/* ── Boards ─────────────────────────────────────────────────────────────────
   One look for every board in the app. Brady, 2026-09-29, asked for the
   project board to use the same code as My Work "so it looks identical", and
   identical has to mean the CSS too: the card markup now comes from one
   renderer, so a second set of rules would have put them straight back out of
   step.

   The lanes above lost their boxes in the same pass. Drawn as a bordered
   header stacked on a bordered body, inside a card, holding bordered cards,
   the board was three nested outlines saying nothing, with a heavy accent
   rule under every heading. Brady's word for it was "eww".

   The one strong colour left is the one that means something: a card that is
   late, or held up waiting on something.                                     */

.mw-kanban-card.pb-late { border-left: 3px solid #ef4444; }
.mw-kanban-card.pb-held { border-left: 3px solid #f59e0b; }
.mw-kanban-card:active  { cursor: grabbing; }
/* The count as production had it: a solid badge (bg-secondary), not a tint. */
.mw-kanban-empty {
  border: 1px dashed var(--card-border);
  border-radius: 7px;
  opacity: .6;
}

/* Who is on a card, as initials. A face is what people scan a board for, and
   three full names wrap the card. */
.mw-who {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 600;
  background: var(--sidebar-active);
  color: #fff;
  flex-shrink: 0;
}
.mw-held { font-size: .72rem; color: #f59e0b; }

/* The project board is the page rather than a widget in a column, so it gets
   the height and wider lanes. Everything else about it is shared. */
.pb-toolbar { row-gap: .35rem; }
.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--muted-color);
  white-space: nowrap;
}
#project-board {
  height: calc(100vh - var(--topbar-h) - 170px);
  min-height: 340px;
  gap: 14px;
  scrollbar-width: thin;
}
#project-board .mw-kanban-col { flex: 0 0 272px; }
/* Same size and colour as the global scrollbar, so it needs nothing of its
   own any more. */

/* Add a card: invisible until wanted, so an empty column reads as empty
   rather than as a row of input boxes. */
.kb-add-input {
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: background .12s, border-color .12s;
}
.kb-add-input::placeholder { color: var(--muted-color); opacity: .75; }
.kb-add-input:hover {
  background: color-mix(in srgb, var(--card-bg) 70%, transparent) !important;
}
.kb-add-input:focus {
  background: var(--card-bg) !important;
  border-color: var(--sidebar-active) !important;
  box-shadow: none;
}

/* ── A dropdown inside a table row ─────────────────────────────────────────
   Smaller than form-select-sm, because a control in a cell has to sit on one
   line with the text beside it. It was inline on every such dropdown, which
   meant it came through the element's style argument and the escape hatch
   test refused it, correctly: a size is the element's business. */
.form-select-xs { font-size: .78rem; padding: 2px 6px; }

/* ── A linked ticket that is finished ──────────────────────────────────────
   The row carries ticket-done and everything inside follows from here. It was
   written inline in three places before: the template, the script that rebuilds
   a row after a status change, and again on the title. Three copies of one
   rule is three chances for a row to disagree with itself about whether it is
   done. The colour is the theme's rather than a hardcoded red. */
.ticket-done .ticket-title-link { text-decoration: line-through; color: var(--health-red) !important; }
.ticket-done .form-select       { color: var(--health-red); border-color: var(--health-red); }
.ticket-done > td:first-child   { opacity: .55; }

/* ── New themes, 2026-10-06 (the starred ones in the Theme Shop) ───────── */
/* Lilac (id terracotta, kept so nobody using it is moved; 2026-10-08, Brady:
   "terracotta is the same colors as all the others"). Lavender paper, a deep
   plum sidebar, violet, and a flash of chartreuse on what is active. */
[data-theme="terracotta"] {
  --sidebar-bg: #2e1f5e;
  --sidebar-text: #cfc2f2;
  --sidebar-active: #7c3aed;
  --sidebar-hover: rgba(255,255,255,0.10);
  --sidebar-divider: rgba(255,255,255,0.14);
  --sidebar-brand-color: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-shadow: rgba(0,0,0,0.08);
  --topbar-title: #241a40;
  --page-bg: #f6f3fc;
  --body-color: #241a40;
  --muted-color: #7a6e98;
  --card-bg: #ffffff;
  --card-border: #e4dcf5;
  --card-shadow: rgba(0,0,0,0.06);
  --card-header-bg: #efe9fa;
  --card-header-border: #e4dcf5;
  --card-header-color: #241a40;
  --input-bg: #ffffff;
  --input-border: #e4dcf5;
  --input-color: #241a40;
  --input-placeholder: #7a6e98;
  --input-focus-border: #7c3aed;
  --input-focus-shadow: #7c3aed33;
  --table-header-bg: #efe9fa;
  --table-border: #e4dcf5;
  --table-hover: #efe9fa;
  --list-item-bg: #ffffff;
  --list-item-border: #e4dcf5;
  --btn-icon-border: #e4dcf5;
  --btn-icon-color: #7a6e98;
  --btn-icon-hover: #efe9fa;
  --comment-bg: #efe9fa;
  --comment-border: #e4dcf5;
  --detail-border: #e4dcf5;
  --filter-bg: #ffffff;
  --link-color: #6d28d9;
  --link-hover: #8b5cf6;
  --dropdown-bg: #ffffff;
  --dropdown-border: #e4dcf5;
  --dropdown-color: #241a40;
  --dropdown-hover: #efe9fa;
}
[data-theme="terracotta"] .sidebar-nav .nav-link.active { box-shadow: inset 3px 0 0 #c6f432; }
[data-theme="terracotta"] .sidebar-brand i { color: #c6f432; }
[data-theme="terracotta"] .btn-primary { background: #7c3aed; border-color: #7c3aed; }
[data-theme="terracotta"] .btn-primary:hover { background: #6d28d9; border-color: #6d28d9; }
/* Matcha: whisked green tea on rice paper. */
[data-theme="matcha"] {
  --sidebar-bg: #24361f;
  --sidebar-text: #bfd4a8;
  --sidebar-active: #7fa650;
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-divider: rgba(255,255,255,0.12);
  --sidebar-brand-color: #ffffff;
  --topbar-bg: #ffffff;
  --topbar-shadow: rgba(0,0,0,0.08);
  --topbar-title: #22301b;
  --page-bg: #f4f7ee;
  --body-color: #22301b;
  --muted-color: #6f7f61;
  --card-bg: #ffffff;
  --card-border: #dfe8d2;
  --card-shadow: rgba(0,0,0,0.06);
  --card-header-bg: #eef3e5;
  --card-header-border: #dfe8d2;
  --card-header-color: #22301b;
  --input-bg: #ffffff;
  --input-border: #dfe8d2;
  --input-color: #22301b;
  --input-placeholder: #6f7f61;
  --input-focus-border: #7fa650;
  --input-focus-shadow: #7fa65033;
  --table-header-bg: #eef3e5;
  --table-border: #dfe8d2;
  --table-hover: #eef3e5;
  --list-item-bg: #ffffff;
  --list-item-border: #dfe8d2;
  --btn-icon-border: #dfe8d2;
  --btn-icon-color: #6f7f61;
  --btn-icon-hover: #eef3e5;
  --comment-bg: #eef3e5;
  --comment-border: #dfe8d2;
  --detail-border: #dfe8d2;
  --filter-bg: #ffffff;
  --link-color: #4f7a2a;
  --link-hover: #7fa650;
  --dropdown-bg: #ffffff;
  --dropdown-border: #dfe8d2;
  --dropdown-color: #22301b;
  --dropdown-hover: #eef3e5;
}
/* Volt (id aurora, kept so nobody using it is moved; 2026-10-08, Brady:
   "aurora is to close to jade"). Graphite with an electric chartreuse. */
[data-theme="aurora"] {
  --sidebar-bg: #0b0c0d;
  --sidebar-text: #a3a8ad;
  --sidebar-active: #d4ff3a;
  --sidebar-hover: #d4ff3a1f;
  --sidebar-divider: #d4ff3a26;
  --sidebar-brand-color: #ffffff;
  --topbar-bg: #1a1c1e;
  --topbar-shadow: rgba(0,0,0,0.5);
  --topbar-title: #eceff1;
  --page-bg: #121314;
  --body-color: #eceff1;
  --muted-color: #8a9096;
  --card-bg: #1a1c1e;
  --card-border: #2a2d30;
  --card-shadow: rgba(0,0,0,0.45);
  --card-header-bg: #202326;
  --card-header-border: #2a2d30;
  --card-header-color: #eceff1;
  --input-bg: #1a1c1e;
  --input-border: #2a2d30;
  --input-color: #eceff1;
  --input-placeholder: #8a9096;
  --input-focus-border: #d4ff3a;
  --input-focus-shadow: #d4ff3a33;
  --table-header-bg: #202326;
  --table-border: #2a2d30;
  --table-hover: #202326;
  --list-item-bg: #1a1c1e;
  --list-item-border: #2a2d30;
  --btn-icon-border: #2a2d30;
  --btn-icon-color: #8a9096;
  --btn-icon-hover: #202326;
  --comment-bg: #202326;
  --comment-border: #2a2d30;
  --detail-border: #2a2d30;
  --filter-bg: #1a1c1e;
  --link-color: #d4ff3a;
  --link-hover: #ffffff;
  --dropdown-bg: #1a1c1e;
  --dropdown-border: #2a2d30;
  --dropdown-color: #eceff1;
  --dropdown-hover: #202326;
}
[data-theme="aurora"] .top-bar { border-bottom: 1px solid #d4ff3a40; }
[data-theme="aurora"] .sidebar-nav .nav-link.active { color: #d4ff3a !important; box-shadow: inset 3px 0 0 #d4ff3a, 0 0 18px #d4ff3a26; }
[data-theme="aurora"] .btn-primary { background: #d4ff3a; border-color: #d4ff3a; color: #111214; font-weight: 600; }
[data-theme="aurora"] .btn-primary:hover { background: #e4ff7a; border-color: #e4ff7a; color: #111214; }
/* Chartreuse is too bright for the white text other themes put on the accent. */
[data-theme="aurora"] .range-pill.active, [data-theme="aurora"] .filter-count, [data-theme="aurora"] .step-badge,
[data-theme="aurora"] .ts-check, [data-theme="aurora"] .help-item.active, [data-theme="aurora"] .avatar-tone-0,
[data-theme="aurora"] .btn-check:checked + .btn, [data-theme="aurora"] .nav-pills .nav-link.active { color: #111214 !important; }
/* Nebula: deep space dust in pink and violet. */
[data-theme="nebula"] {
  --sidebar-bg: #120a24;
  --sidebar-text: #b49ad6;
  --sidebar-active: #ff7ad9;
  --sidebar-hover: #ff7ad91f;
  --sidebar-divider: #ff7ad926;
  --sidebar-brand-color: #ffffff;
  --topbar-bg: #1f1340;
  --topbar-shadow: rgba(0,0,0,0.5);
  --topbar-title: #f1e6ff;
  --page-bg: #170d2e;
  --body-color: #f1e6ff;
  --muted-color: #9a85bd;
  --card-bg: #1f1340;
  --card-border: #3a2766;
  --card-shadow: rgba(0,0,0,0.45);
  --card-header-bg: #251852;
  --card-header-border: #3a2766;
  --card-header-color: #f1e6ff;
  --input-bg: #1f1340;
  --input-border: #3a2766;
  --input-color: #f1e6ff;
  --input-placeholder: #9a85bd;
  --input-focus-border: #ff7ad9;
  --input-focus-shadow: #ff7ad933;
  --table-header-bg: #251852;
  --table-border: #3a2766;
  --table-hover: #251852;
  --list-item-bg: #1f1340;
  --list-item-border: #3a2766;
  --btn-icon-border: #3a2766;
  --btn-icon-color: #9a85bd;
  --btn-icon-hover: #251852;
  --comment-bg: #251852;
  --comment-border: #3a2766;
  --detail-border: #3a2766;
  --filter-bg: #1f1340;
  --link-color: #c4b5fd;
  --link-hover: #ff7ad9;
  --dropdown-bg: #1f1340;
  --dropdown-border: #3a2766;
  --dropdown-color: #f1e6ff;
  --dropdown-hover: #251852;
}
[data-theme="nebula"] body { background-image: radial-gradient(circle at 80% 10%, #ff7ad91a, transparent 40%), radial-gradient(circle at 10% 90%, #8b5cf61f, transparent 45%); background-attachment: fixed; }

/* ── Brady Mode: a markerboard ──────────────────────────────────────────────
   2026-10-08, Brady: "way to pink ... I want mine to have like a markerboard
   look". A glossy white board in an aluminium frame, headings in marker
   (Segoe Print, which every Windows machine has; no web font to fetch), and
   the four marker colours: black, blue, red, green. */
[data-theme="brady"] {
  --marker-black: #1b1d21;
  --marker-blue: #1f5fd1;
  --marker-red: #d6332f;
  --marker-green: #1f8a4c;
  --marker-font: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --marker-purple: #6b3fa0;
  --marker-orange: #e8730c;
  --sidebar-bg: #dfe3e8;
  --sidebar-text: #2b3038;
  --sidebar-active: #1f5fd1;
  --sidebar-hover: rgba(0,0,0,0.05);
  --sidebar-divider: rgba(0,0,0,0.12);
  --sidebar-brand-color: #1b1d21;
  --topbar-bg: #ffffff;
  --topbar-shadow: rgba(0,0,0,0.06);
  --topbar-title: #1b1d21;
  --page-bg: #fbfcfd;
  --body-color: #1b1d21;
  --muted-color: #6b7280;
  --card-bg: #ffffff;
  --card-border: #2b3038;
  --card-shadow: rgba(0,0,0,0.05);
  --card-header-bg: #ffffff;
  --card-header-border: #e3e6ea;
  --card-header-color: #1b1d21;
  --input-bg: #ffffff;
  --input-border: #b9bfc7;
  --input-color: #1b1d21;
  --input-placeholder: #8a9099;
  --input-focus-border: #1f5fd1;
  --input-focus-shadow: #1f5fd126;
  --table-header-bg: #f5f7f9;
  --table-border: #e3e6ea;
  --table-hover: #f1f5fd;
  --list-item-bg: #ffffff;
  --list-item-border: #e3e6ea;
  --btn-icon-border: #b9bfc7;
  --btn-icon-color: #4b5563;
  --btn-icon-hover: #f1f3f5;
  --comment-bg: #f7f9fb;
  --comment-border: #e3e6ea;
  --detail-border: #e3e6ea;
  --filter-bg: #ffffff;
  --link-color: #1f5fd1;
  --link-hover: #d6332f;
  --dropdown-bg: #ffffff;
  --dropdown-border: #d3d8de;
  --dropdown-color: #1b1d21;
  --dropdown-hover: #f1f5fd;
}
/* The board: glossy white, with the faint ghost of things wiped off it. */
[data-theme="brady"] body {
  background-color: #fbfcfd;
  background-image:
    linear-gradient(115deg, transparent 0 38%, #ffffffcc 45%, transparent 52%),
    radial-gradient(ellipse 420px 120px at 22% 30%, #1f5fd10a, transparent 70%),
    radial-gradient(ellipse 360px 90px at 70% 72%, #d6332f08, transparent 70%),
    radial-gradient(ellipse 300px 80px at 85% 18%, #1b1d2108, transparent 70%);
  background-attachment: fixed;
}
/* The frame: brushed aluminium down the side and along the top. */
[data-theme="brady"] .sidebar {
  background: linear-gradient(90deg, #cfd4da, #e9ecef 35%, #dfe3e8 70%, #c7ccd3);
  border-right: 3px solid #b3b9c1;
}
[data-theme="brady"] .top-bar { border-bottom: 3px solid #c7ccd3; }
[data-theme="brady"] .sidebar-nav .nav-link { color: #2b3038; }
[data-theme="brady"] .sidebar-nav .nav-link:hover { color: #1b1d21; background: rgba(255,255,255,0.45); }
[data-theme="brady"] .sidebar-nav .nav-link.active {
  color: #1f5fd1 !important; background: #ffffffb3; font-weight: 600;
  box-shadow: inset 4px 0 0 #1f5fd1;
}
[data-theme="brady"] .sidebar-brand { font-family: var(--marker-font); }
[data-theme="brady"] .sidebar-brand i { color: #d6332f; }
/* Drawn on: cards outlined in marker, slightly hand-drawn at the corners. */
[data-theme="brady"] .card {
  border: 2px solid #2b3038;
  border-radius: 14px 6px 12px 5px / 6px 12px 5px 14px;
  box-shadow: 2px 3px 0 #1b1d2112;
}
[data-theme="brady"] .card-header {
  font-family: var(--marker-font); font-weight: 700; font-size: 1rem !important;
  border-bottom: 2px dashed #d3d8de !important;
}
/* Each column's headings in its own marker. */
/* The logo is drawn white for dark sidebars; on the aluminium it goes black. */
[data-theme="brady"] .sidebar-brand img { filter: brightness(0); }
/* Six markers, as in a pack, taken in turn by each card's heading. */
[data-theme="brady"] .grid-stack-item:nth-child(6n+1) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+1) > .card { --card-header-color: var(--marker-black); }
[data-theme="brady"] .grid-stack-item:nth-child(6n+2) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+2) > .card { --card-header-color: var(--marker-blue); }
[data-theme="brady"] .grid-stack-item:nth-child(6n+3) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+3) > .card { --card-header-color: var(--marker-red); }
[data-theme="brady"] .grid-stack-item:nth-child(6n+4) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+4) > .card { --card-header-color: var(--marker-green); }
[data-theme="brady"] .grid-stack-item:nth-child(6n+5) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+5) > .card { --card-header-color: var(--marker-purple); }
[data-theme="brady"] .grid-stack-item:nth-child(6n+6) .card,
[data-theme="brady"] [class*="col"]:nth-child(6n+6) > .card { --card-header-color: var(--marker-orange); }
[data-theme="brady"] h1, [data-theme="brady"] h2, [data-theme="brady"] h3,
[data-theme="brady"] .top-bar-title { font-family: var(--marker-font); font-weight: 700; }
[data-theme="brady"] .top-bar-title { color: #1b1d21; }
/* Buttons are marker strokes: an outline in blue, filled when pressed. */
[data-theme="brady"] .btn-primary {
  background: #ffffff; color: #1f5fd1; border: 2px solid #1f5fd1; font-weight: 700;
  border-radius: 10px 4px 9px 4px / 4px 9px 4px 10px;
}
[data-theme="brady"] .btn-primary:hover, [data-theme="brady"] .btn-primary:focus {
  background: #1f5fd1; color: #ffffff; border-color: #1f5fd1;
}
[data-theme="brady"] .btn-danger { background: #ffffff; color: #d6332f; border: 2px solid #d6332f; }
[data-theme="brady"] .btn-danger:hover { background: #d6332f; color: #ffffff; }
[data-theme="brady"] .btn-success { background: #ffffff; color: #1f8a4c; border: 2px solid #1f8a4c; }
[data-theme="brady"] .btn-success:hover { background: #1f8a4c; color: #ffffff; }
[data-theme="brady"] .form-control:focus, [data-theme="brady"] .form-select:focus {
  border-color: #1f5fd1; box-shadow: 0 0 0 2px #1f5fd126;
}
/* The tray along the bottom of the board. */
[data-theme="brady"] .main-content::after, [data-theme="brady"] main::after { content: none; }

/* ── Nolan Mode: hacking, the way the movies do it ──────────────────────── */
[data-theme="nolan"] {
  --sidebar-bg: #000000;
  --sidebar-text: #00b32c;
  --sidebar-active: #00ff41;
  --sidebar-hover: #00ff411f;
  --sidebar-divider: #00ff4126;
  --sidebar-brand-color: #ffffff;
  --topbar-bg: #000a02;
  --topbar-shadow: rgba(0,0,0,0.5);
  --topbar-title: #00ff41;
  --page-bg: #000500;
  --body-color: #00ff41;
  --muted-color: #00992a;
  --card-bg: #000a02;
  --card-border: #00ff4140;
  --card-shadow: rgba(0,0,0,0.45);
  --card-header-bg: #001405;
  --card-header-border: #00ff4140;
  --card-header-color: #00ff41;
  --input-bg: #000a02;
  --input-border: #00ff4140;
  --input-color: #00ff41;
  --input-placeholder: #00992a;
  --input-focus-border: #00ff41;
  --input-focus-shadow: #00ff4133;
  --table-header-bg: #001405;
  --table-border: #00ff4140;
  --table-hover: #001405;
  --list-item-bg: #000a02;
  --list-item-border: #00ff4140;
  --btn-icon-border: #00ff4140;
  --btn-icon-color: #00992a;
  --btn-icon-hover: #001405;
  --comment-bg: #001405;
  --comment-border: #00ff4140;
  --detail-border: #00ff4140;
  --filter-bg: #000a02;
  --link-color: #7dff9c;
  --link-hover: #00ff41;
  --dropdown-bg: #000a02;
  --dropdown-border: #00ff4140;
  --dropdown-color: #00ff41;
  --dropdown-hover: #001405;
}
[data-theme="nolan"] * {
  font-family: 'Cascadia Mono', 'Consolas', 'Courier New', monospace !important;
}
[data-theme="nolan"] body { text-shadow: 0 0 4px #00ff4166; }
[data-theme="nolan"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99999;
  background: repeating-linear-gradient(0deg, #00000000 0 2px, #00ff410a 2px 3px);
  animation: nolanflicker 7s infinite;
}
@keyframes nolanflicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .6; } 98% { opacity: .95; } }
[data-theme="nolan"] .top-bar-title::after {
  content: '\2588'; margin-left: .25rem; animation: nolancursor 1s steps(1) infinite;
}
@keyframes nolancursor { 50% { opacity: 0; } }
[data-theme="nolan"] .card { border: 1px solid #00ff4155; box-shadow: 0 0 14px #00ff411a; }
[data-theme="nolan"] .card-header::before { content: '> '; color: #00ff41; }
[data-theme="nolan"] .btn-primary { background: #00ff41; border-color: #00ff41; color: #001405; font-weight: 700; }
[data-theme="nolan"] .sidebar-nav .nav-link.active { box-shadow: inset 3px 0 0 #00ff41; text-shadow: 0 0 8px #00ff41; }
[data-theme="nolan"] .sidebar-brand .brand-text::after { content: ' // ACCESS GRANTED'; font-size: .55rem; opacity: .7; }

/* ── Easter eggs: a few sidebar icons are not quite the usual ones in the legendaries ── */
/* Brady Mode is a markerboard (2026-10-08): an easel, a marker, a clipboard. */
[data-theme="brady"] .sidebar .bi-speedometer2::before { content: "\f66f"; }  /* easel3 */
[data-theme="brady"] .sidebar .bi-lightbulb::before { content: "\f7f8"; }     /* highlighter */
[data-theme="brady"] .sidebar .bi-check2-all::before { content: "\f28b"; }    /* clipboard-check */
[data-theme="brady"] .sidebar .bi-kanban::before { content: "\f66d"; }        /* easel2 */
[data-theme="nolan"] .sidebar .bi-gem::before { content: "\f44e"; }
[data-theme="nolan"] .sidebar .bi-lightbulb::before { content: "\f5c2"; }
[data-theme="nolan"] .sidebar .bi-speedometer2::before { content: "\f671"; }
[data-theme="nolan"] .sidebar .bi-list-ul::before { content: "\f1dc"; }
[data-theme="nolan"] .sidebar .bi-check2-all::before { content: "\f2c6"; }
[data-theme="nolan"] .sidebar .bi-arrow-repeat::before { content: "\f777"; }
[data-theme="hoss"] .sidebar .bi-gem::before { content: "\f154"; }
[data-theme="hoss"] .sidebar .bi-speedometer2::before { content: "\f769"; }
[data-theme="hoss"] .sidebar .bi-lightbulb::before { content: "\f18f"; }
[data-theme="hoss"] .sidebar .bi-check2-all::before { content: "\f531"; }
[data-theme="jagur"] .sidebar .bi-gem::before { content: "\f496"; }
[data-theme="jagur"] .sidebar .bi-lightbulb::before { content: "\f319"; }
[data-theme="jagur"] .sidebar .bi-speedometer2::before { content: "\f427"; }
[data-theme="curtis"] .sidebar .bi-gem::before { content: "\f5e2"; }
[data-theme="curtis"] .sidebar .bi-lightbulb::before { content: "\f3cd"; }
[data-theme="curtis"] .sidebar .bi-speedometer2::before { content: "\f5ea"; }
[data-theme="curtis"] .sidebar .bi-check2-all::before { content: "\f180"; }
[data-theme="curtis"] .sidebar .bi-arrow-repeat::before { content: "\f2d2"; }

/* ── Theme Shop (base.html): compact, all of it on one screen ───────────────── */
.ts-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9500;
               align-items: center; justify-content: center; padding: 16px; }
.ts-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
            width: min(1080px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.ts-header { padding: 12px 18px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 10px; }
.ts-header-icon { font-size: 1.15rem; color: var(--sidebar-active); }
.ts-title { font-weight: 700; font-size: 1rem; color: var(--body-color); }
.ts-sub { font-size: .72rem; color: var(--muted-color); }
.ts-star { color: #f6be00; }
.ts-close { margin-left: auto; background: none; border: 0; color: var(--muted-color); font-size: 1.4rem; line-height: 1; padding: 0 4px; }
.ts-body { padding: 10px 18px 14px; }
.ts-section { margin-bottom: 10px; }
.ts-section-label { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                    color: var(--muted-color); margin-bottom: 6px; }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
.ts-card { position: relative; background: var(--dropdown-hover); border: 2px solid var(--card-border);
           border-radius: 8px; padding: 0; text-align: left; overflow: hidden; cursor: pointer;
           transition: border-color .15s, transform .12s; }
.ts-card:hover { border-color: var(--sidebar-active); transform: translateY(-1px); }
.ts-card--active { border-color: var(--sidebar-active); }
.ts-strip { display: flex; height: 22px; }
.ts-strip span { flex: 1; }
.ts-name { padding: 4px 7px 5px; font-size: .72rem; font-weight: 600; color: var(--body-color);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-new { position: absolute; top: 2px; left: 4px; color: #f6be00; font-size: .8rem; line-height: 1;
          text-shadow: 0 0 3px rgba(0,0,0,.6); }
.ts-check { display: none; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%;
            background: var(--sidebar-active); color: #fff; align-items: center; justify-content: center; font-size: .7rem; }
.ts-card--active .ts-check { display: flex; }

/* ── Neutralized database (base.html, Settings > Notifications) ─────────────── */
.neutral-banner { position: sticky; top: 0; z-index: 1020; background: #b91c1c; color: #fff; font-size: .82rem;
                  padding: .4rem 1rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.neutral-since { opacity: .85; margin-left: .35rem; }
.neutral-card { border-color: var(--card-border); }
.neutral-card--on { border: 2px solid #dc2626; }
.neutral-icon { font-size: 1.6rem; color: #dc2626; }

/* ── Sidebar New menu (base.html) ─────────────────────────────────────────── */
.nav-new-caret { font-size: .7rem; opacity: .55; }
.nav-new-menu { min-width: 13rem; font-size: .85rem; }
.nav-new-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .35rem .9rem; }
.nav-new-menu .dropdown-item i { width: 1rem; text-align: center; opacity: .75; }
.sidebar.collapsed .nav-new-caret { display: none; }

/* ── All Tasks list (all_tasks.html): what a task belongs to ────────────────── */
.task-kind { display: inline-block; font-size: .66rem; font-weight: 600; letter-spacing: .03em;
             text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-right: 4px;
             background: var(--dropdown-hover); color: var(--muted-color); }
.task-kind-rock { color: #2563eb; }
.task-kind-project { color: #7c3aed; }
.task-kind-workflow { color: #0f766e; }
.task-kind-idea { color: #b45309; }
.task-kind-ticket { color: #be123c; }
.tf-menu { min-width: 200px; max-height: 320px; overflow-y: auto; }

/* ── A person's week in the peek drawer (This Week) ───────────────────────── */
.cad-person { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--muted-color); }
.cad-person:hover { color: var(--sidebar-active); border-bottom-color: currentColor; }
.peek-count { font-weight: 400; opacity: .7; margin-left: .25rem; }
.peek-section--bad { color: var(--health-red); }
.peek-line { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem .1rem;
             border-bottom: 1px solid var(--card-border); color: inherit; text-decoration: none; font-size: .84rem; }
.peek-line:hover { background: var(--dropdown-hover); }
.peek-line-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-line-meta { flex-shrink: 0; color: var(--muted-color); font-size: .76rem; }
.peek-more { font-size: .76rem; color: var(--muted-color); padding: .25rem .1rem; }

/* ── Suggested SLA targets (Settings > SLA) ───────────────────────────────── */
.sla-suggest { border-top: 1px solid var(--card-border); padding-top: .75rem; }
.sla-suggest-row { display: flex; gap: .75rem; align-items: center; padding: .4rem 0;
                   border-bottom: 1px dashed var(--card-border); font-size: .8rem; }
.sla-suggest-row:last-child { border-bottom: 0; }

/* ── Plan my week list groups (elements/_calendar.html) ────────────────────── */
.wc-tools { display: flex; gap: .4rem; padding: .5rem .6rem 0; }
.wc-tools .wc-find { flex: 1 1 auto; min-width: 0; }
.wc-group > summary { cursor: pointer; list-style: none; user-select: none; }
.wc-group > summary::-webkit-details-marker { display: none; }
.wc-group > summary::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .65rem;
                              margin-right: .35rem; display: inline-block; transition: transform .15s; opacity: .6; }
.wc-group[open] > summary::before { transform: rotate(90deg); }
.wc-group-late > summary { color: var(--health-red); }
.wc-group-week > summary { color: var(--health-amber); }

/* ── AI Suggestions (ai_suggestions.html) ───────────────────────────────────── */
.sug-kind { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
            background: var(--dropdown-hover); color: var(--muted-color); }
.sug-kind-duplicate { color: #b45309; }
.sug-kind-problem { color: #be123c; }
.sug-kind-change { color: #7c3aed; }
.sug-kind-categorize, .sug-kind-link { color: #2563eb; }
.sug-kind-knowledge { color: #0f766e; }
.sug-why { white-space: pre-line; }
.sug-records { display: flex; flex-direction: column; gap: 2px; }
.sug-record { font-size: .82rem; color: inherit; text-decoration: none; padding: 2px 0; }
.sug-record:hover { color: var(--sidebar-active); }
.sug-draft { white-space: pre-line; padding: .4rem .6rem; border-left: 3px solid var(--card-border); margin-top: .3rem; }


/* ── Request forms: the service cards and answers (portal, ticket page) ─────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; max-width: 1000px; }
.svc-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 10px;
            background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--svc, var(--sidebar-active));
            color: var(--body-color); text-decoration: none; transition: transform .12s, border-color .12s; }
.svc-card:hover { transform: translateY(-1px); border-color: var(--svc, var(--sidebar-active)); }
.svc-card--other { border-left-color: var(--card-border); }
.svc-name { font-weight: 600; }
.svc-blurb { font-size: .82rem; color: var(--muted-color); flex: 1 1 auto; }
.svc-go { font-size: .78rem; color: var(--sidebar-active); font-weight: 600; }
.svc-picked { padding: 10px 14px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--card-border); }
.req-answers { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: .84rem; }
.req-answers dt { color: var(--muted-color); font-weight: 500; }
.req-answers dd { margin: 0; white-space: pre-line; }
.rf-q { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border-bottom: 1px solid var(--card-border); }
.rf-q:last-child { border-bottom: 0; }
.rf-kind { font-size: .7rem; color: var(--muted-color); white-space: nowrap; }

/* ── Calendar: working hours, 15-minute blocks, split (2026-10-07) ─────────── */
.wc-day.wc-dayoff { background-color: color-mix(in srgb, var(--muted-color) 12%, transparent); }
.wc-offhours { position: absolute; left: 0; right: 0; pointer-events: none;
               background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted-color) 10%, transparent) 6px 8px); }
.wc-block-work { padding-right: 30px; }
.wc-tools-b { position: absolute; top: 1px; right: 3px; display: flex; gap: 3px; }
.wc-tools-b .wc-x { position: static; }
.wc-split { border: 0; background: none; color: inherit; padding: 0; font-size: .72rem; line-height: 1; opacity: .55; }
.wc-split:hover { opacity: 1; }
.wc-len { color: var(--muted-color); font-size: .62rem; }
.wc-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.wc-block-work:hover .wc-grip { background: color-mix(in srgb, var(--sidebar-active) 35%, transparent); }
.wc-hours { position: relative; display: inline-block; }
.wc-hours > summary { list-style: none; cursor: pointer; }
.wc-hours > summary::-webkit-details-marker { display: none; }
.wc-hours-form { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 300px; padding: 12px;
                 background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
                 box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* ── Claude's guesses at estimate and worth (elements/_sizer.html ai_value) ── */
.ai-value { color: var(--muted-color); font-style: italic; white-space: nowrap; }
.ai-value i { font-size: .75em; margin-right: 2px; color: #b45309; font-style: normal; }
.ai-note { margin-top: 4px; }

/* ── Dashboard: open over time (index.html) ────────────────────────────────── */
.trend-wrap { min-height: 140px; }
.trend-grid { stroke: var(--card-border); stroke-width: 1; }
.trend-axis { fill: var(--muted-color); font-size: 10px; font-variant-numeric: tabular-nums; }
.trend-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.trend-tickets { stroke: var(--sidebar-active); }
.trend-tasks { stroke: #d97706; }
.trend-tickets-dot { fill: var(--sidebar-active); }
.trend-tasks-dot { fill: #d97706; }
.trend-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.trend-key-tickets { background: var(--sidebar-active); }
.trend-key-tasks { background: #d97706; }

/* ── Suggestions under a text box (static/js/suggest.js) ────────────────────── */
.suggest-menu { position: absolute; z-index: 2000; list-style: none; margin: 0; padding: 4px 0; max-height: 260px;
                overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px;
                box-shadow: 0 8px 20px rgba(0,0,0,.18); font-size: .85rem; }
.suggest-menu li { padding: 4px 10px; cursor: pointer; color: var(--body-color); white-space: nowrap; }
.suggest-menu li:hover, .suggest-menu li.active { background: var(--dropdown-hover); }

/* ── Help (help.html) and its unread flag on the ? in the header ─────────────── */
.help-btn { position: relative; text-decoration: none; }
.help-btn--unread { color: #dc2626 !important; animation: help-pulse 1.4s ease-in-out infinite; }
.help-dot { position: absolute; top: -3px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
            background: #dc2626; color: #fff; font-size: .6rem; font-weight: 700; line-height: 15px; text-align: center; }
@keyframes help-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .help-btn--unread { animation: none; } }
.help-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .help-shell { grid-template-columns: 1fr; } }
.help-list { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1rem; }
.help-list-head { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 700;
                  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-color); padding: 0 .6rem .4rem; }
.help-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: 6px; color: var(--body-color);
             text-decoration: none; font-size: .88rem; }
.help-item:hover { background: var(--dropdown-hover); }
.help-item.active { background: var(--sidebar-active); color: #fff; }
.help-item i { width: 1rem; text-align: center; opacity: .75; }
.help-new { margin-left: auto; font-size: .62rem; font-weight: 700; color: #fff; background: #dc2626; border-radius: 8px;
            padding: 1px 6px; animation: help-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .help-new { animation: none; } }
.help-text { max-width: 72ch; line-height: 1.6; }
.help-text h4 { font-size: 1rem; font-weight: 600; margin: 1.1rem 0 .4rem; }
.help-text kbd { font-size: .78em; }
.help-releases { margin-top: 2rem; max-width: 900px; }
.help-release > summary { cursor: pointer; list-style: none; }
.help-release > summary::-webkit-details-marker { display: none; }

/* ── A table that starts or ends a card keeps the card's rounded corners ──────
   2026-10-08, Brady: "a bunch of cards missing the corners". Cards leave
   overflow visible (clipping them would cut off menus that open inside), so a
   table's square header sat over the card's curve. The scroll wrapper already
   clips, so it takes the card's radius; a table straight in a padding-free
   body rounds its own corner cells instead. */
.card > .table-responsive { border-radius: inherit; }
.card > .card-body.p-0:first-child > .table > :first-child > tr:first-child > :first-child,
.card > .table-responsive:first-child > .table > :first-child > tr:first-child > :first-child { border-top-left-radius: var(--card-radius, 10px); }
.card > .card-body.p-0:first-child > .table > :first-child > tr:first-child > :last-child,
.card > .table-responsive:first-child > .table > :first-child > tr:first-child > :last-child { border-top-right-radius: var(--card-radius, 10px); }
.card > .card-body.p-0:last-child > .table > :last-child > tr:last-child > :first-child,
.card > .table-responsive:last-child > .table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: var(--card-radius, 10px); }
.card > .card-body.p-0:last-child > .table > :last-child > tr:last-child > :last-child,
.card > .table-responsive:last-child > .table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: var(--card-radius, 10px); }

/* ── The breakdown, changed in place, and several tasks at once (2026-10-08) ─ */
.wbs-edit { gap: .25rem; }
.wbs-edit .wbs-inline { font-size: .72rem; padding: 1px 6px; height: 24px; min-height: 0; }
.wbs-edit .wbs-in-est { width: 3.6rem; }
.wbs-edit .wbs-in-pri { width: 6.4rem; padding-right: 18px; }
.wbs-edit .wbs-in-due { width: 7.4rem; }
.wbs-edit .wbs-in-due.wbs-due-follows { color: var(--muted-color); }
.wbs-inline.wbs-saved { border-color: var(--health-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--health-green) 25%, transparent); }
.wbs-sel, .wbs-sel-ms { cursor: pointer; }
.wbs-quick-who { width: 11rem; }
.wbs-bulk { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; position: sticky; top: 0; z-index: 5;
            background: color-mix(in srgb, var(--sidebar-active) 10%, var(--card-bg));
            border-bottom: 1px solid var(--card-border); }
.wbs-bulk[hidden] { display: none; }
.wbs-bulk .form-control, .wbs-bulk .form-select { width: auto; max-width: 10rem; font-size: .78rem; }
.wbs-bulk .wbs-bulk-who { width: 10rem; }
/* With the facts editable the row holds a lot; in the rock's narrow column
   the title keeps a sensible width and the controls drop to a second line
   under it instead of squeezing it to one word a line. */
.wbs-task { flex-wrap: wrap; row-gap: .2rem; }
.wbs-task .wbs-task-title { flex: 1 1 14rem; min-width: 10rem; }
.wbs-task .wbs-edit, .wbs-task .wbs-assign, .wbs-task .wbs-move-select { margin-left: auto; }
.wbs-task .wbs-edit ~ .wbs-assign, .wbs-task .wbs-edit ~ .wbs-move-select { margin-left: 0; }
.wbs-bulk #wbs-bulk-est { width: 4.5rem; }

.mw-kanban-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .7rem; color: var(--muted-color); margin-bottom: .25rem; }
.mw-kanban-meta .bi { margin-right: .15rem; }

/* ── Release notes in sections (What's new and Help, 2026-10-08) ─────────── */
.cl-section + .cl-section { margin-top: .85rem; }
.cl-section-title { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700;
                    letter-spacing: .06em; text-transform: uppercase; color: var(--sidebar-active); margin-bottom: .35rem; }
.cl-items { display: flex; flex-direction: column; gap: .35rem; }
.cl-items li { font-size: .86rem; line-height: 1.4; }
.cl-tick { color: var(--sidebar-active); font-size: .7rem; margin-top: .3rem; opacity: .8; }

/* The step as a pill on a workflow card grouped by something else (2026-10-09). */
.badge-pill.bp-step { background: color-mix(in srgb, var(--sidebar-active) 16%, transparent); color: var(--body-color); }

/* ── Breadcrumbs (elements/_crumbs.html, 2026-10-09) ─────────────────────── */
.top-bar-title { display: flex; align-items: center; min-width: 0; }
.crumbs { display: inline-flex; min-width: 0; flex-shrink: 1; }
.crumbs ol { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; min-width: 0; }
.crumbs-item { display: inline-flex; align-items: center; min-width: 0; font-size: .82rem; font-weight: 500;
               color: var(--muted-color); text-transform: none; letter-spacing: normal; font-family: inherit; }
.crumbs-item > a, .crumbs-item > span { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-item > a { color: var(--muted-color); text-decoration: none; }
.crumbs-item > a:hover { color: var(--link-color); text-decoration: underline; }
.crumbs-item::after { content: '\203A'; margin: 0 .45rem; opacity: .6; }
@media (max-width: 767.98px) {
  .crumbs-item:not(.crumbs-near) { display: none; }
  .crumbs-item.crumbs-near::before { content: '\2039'; margin-right: .3rem; }
  .crumbs { flex-shrink: 0; max-width: 45vw; }
  .crumbs-item.crumbs-near { min-width: 0; flex: 1 1 auto; }
  .crumbs-item.crumbs-near > a, .crumbs-item.crumbs-near > span { max-width: 40vw; }
  .crumbs-item::after { margin: 0 .35rem 0 .2rem; }
}

.wbs-edit .wbs-in-wf { width: 8.5rem; padding-right: 18px; }
.wbs-ms-assign { max-width: 14rem; }

/* ── Rock task rows: two lines, room to read (2026-10-09) ─────────────────── */
.wbs-task { flex-wrap: wrap; row-gap: .15rem; padding-top: .45rem !important; padding-bottom: .45rem !important;
            border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); }
.wbs-task .wbs-task-title { flex: 1 1 auto; min-width: 0; font-size: .9rem; font-weight: 500; line-height: 1.35; }
.wbs-task .wbs-task-del { font-size: .75rem; opacity: .45; flex-shrink: 0; margin-left: auto; }
.wbs-task .wbs-task-del:hover { opacity: 1; }
.wbs-task .wbs-edit { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: flex-end;
                      padding-left: 84px; }
.wbs-field { display: flex; flex-direction: column; gap: 1px; margin: 0; }
.wbs-field > span { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-color); }
.wbs-field .wbs-inline { font-size: .76rem; padding: 2px 6px; height: 26px; min-height: 0; }
.wbs-field .wbs-in-est { width: 4.2rem; }
.wbs-field .wbs-in-pri { width: 6.6rem; padding-right: 20px; }
.wbs-field .wbs-in-due { width: 8rem; }
.wbs-field .wbs-in-wf, .wbs-field .wbs-in-wait { width: 9.5rem; padding-right: 20px; }
.wbs-field-who .wbs-assign { min-width: 10rem; }
@media (max-width: 767.98px) { .wbs-task .wbs-edit { padding-left: 28px; } }
/* Tighter, so the second line fits the rock's left column on a laptop. */
.wbs-task .wbs-edit { gap: .3rem .55rem; padding-left: 60px; }
.wbs-field .wbs-in-est { width: 3.6rem; }
.wbs-field .wbs-in-pri { width: 5.8rem; }
.wbs-field .wbs-in-due { width: 7.6rem; }
.wbs-field .wbs-in-wf, .wbs-field .wbs-in-wait { width: 8rem; }
.wbs-field-who .wbs-assign { min-width: 8rem; }

/* The trail beside the search bar (2026-10-09): parents only, so no arrow
   after the last step. */
.top-bar-crumbs { display: flex; align-items: center; min-width: 0; margin-left: .9rem; }
.top-bar-crumbs .crumbs-item:last-child::after { content: none; }
.top-bar-crumbs .crumbs-item { font-size: .8rem; }
@media (max-width: 767.98px) { .top-bar-crumbs { margin-left: .4rem; } }
@media (max-width: 767.98px) {
  .top-bar-crumbs { flex: 0 1 auto; max-width: 34vw; overflow: hidden; }
  .top-bar-crumbs .crumbs { max-width: 100%; }
  .top-bar-crumbs .crumbs-item.crumbs-near > a { max-width: 30vw; }
}

/* Waiting on another task (2026-10-09): shown, not hidden. */
.badge-pill.bp-waiting { background: color-mix(in srgb, #f59e0b 18%, transparent); color: var(--body-color);
                         max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-waiting { font-size: .7rem; color: #b45309; }
/* On the login pages the body centres its children in a row, so the banner
   sat squeezed beside the sign-in card; there it runs across the top
   (2026-10-09). */
.neutral-banner.neutral-banner-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
                                     margin: 0; border-radius: 0; text-align: center; }

.badge-pill.bp-worth { background: color-mix(in srgb, var(--health-green) 16%, transparent); color: var(--body-color); }

/* ── Rock task rows back on one line (2026-10-09, Brady: "ugly, go back to
   one line"). The same controls, no labels; the boxes say what they are
   when empty, and the title takes what room is left. ─────────────────────── */
.wbs-task { flex-wrap: nowrap; row-gap: 0; padding-top: .25rem !important; padding-bottom: .25rem !important; border-bottom: none; }
.wbs-task .wbs-task-title { flex: 1 1 8rem; min-width: 6rem; font-size: .84rem; font-weight: 400;
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbs-task .wbs-edit { flex: 0 1 auto; flex-wrap: nowrap; gap: .25rem; padding-left: 0; align-items: center; }
.wbs-field { flex-direction: row; }
.wbs-field > span { display: none; }
.wbs-field .wbs-inline { font-size: .72rem; height: 24px; }
.wbs-field .wbs-in-est { width: 3.2rem; }
.wbs-field .wbs-in-pri { width: 5.6rem; }
.wbs-field .wbs-in-due { width: 7.2rem; }
.wbs-field .wbs-in-wf, .wbs-field .wbs-in-wait { width: 6.8rem; }
.wbs-field-who .wbs-assign { min-width: 7rem; max-width: 10rem; }
.wbs-task .wbs-task-del { order: 10; margin-left: .25rem; }
@media (max-width: 767.98px) { .wbs-task { flex-wrap: wrap; } .wbs-task .wbs-edit { flex-wrap: wrap; } }

/* The requester form's Category, when the service has none to offer (2026-10-09). */
.pf-field[data-no-options] { display: none !important; }

/* Request form editor: a question that fills a ticket field (2026-10-09). */
.rf-kind-field { background: color-mix(in srgb, var(--sidebar-active) 14%, transparent); }
.rf-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; }

/* Request forms: give several services a team at once (2026-10-09). */
.rf-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 8px;
           border: 1px solid var(--card-border); background: var(--card-bg); position: sticky; top: .5rem; z-index: 5; }
.rf-bulk.rf-bulk-on { border-color: var(--sidebar-active); background: color-mix(in srgb, var(--sidebar-active) 8%, var(--card-bg)); }

/* Each option's own name on a request form question (2026-10-09). */
.rf-opts { flex-direction: column; align-items: stretch; gap: .25rem; }
.rf-opt { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: .5rem; align-items: center; }
.rf-opt-label { font-size: .8rem; }
/* With something ticked, the bar floats at the foot of the screen so it can
   be reached from anywhere on the page (2026-10-09). */
.rf-bulk.rf-bulk-on { position: fixed; top: auto; bottom: 1rem; left: 50%; transform: translateX(-50%);
                      z-index: 1030; max-width: calc(100vw - 2rem); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
body.rf-bulk-open .main-content { padding-bottom: 6rem; }

.rf-label { font-size: .82rem; }
.rf-label.rf-saved { border-color: var(--health-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--health-green) 25%, transparent); }

/* A question pulled in from the team, kept but not asked while the service goes by the team's form. */
.rf-q-idle { opacity: .65; }

/* A ticket on a workflow board (2026-10-12). */
.badge-pill.bp-ticket { background: color-mix(in srgb, var(--sidebar-active) 16%, transparent);
  color: var(--sidebar-active); border: 1px solid color-mix(in srgb, var(--sidebar-active) 35%, transparent); }

/* Links found in the Issue or Resolution box, listed under it (2026-10-12). */
.autolink-links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .25rem; }
.autolink-links a { color: var(--sidebar-active); word-break: break-all; text-decoration: none; }
.autolink-links a:hover { text-decoration: underline; }

/* My Tickets: lanes a picked-up card may not go to (2026-10-12). */
.mw-dragging .mw-lane-vacant.mw-lane-off { display: none !important; }
.mw-dragging .mw-lane-off { opacity: .3; }

/* ── The work breakdown in the rock's left column (2026-10-13) ───────────────
   Still one line a task, compacted to fit the column; nothing spills over
   the right-hand cards. */
.col-lg-8 #wbs-section { overflow: hidden; }
.col-lg-8 .wbs-task { gap: .3rem !important; }
.col-lg-8 .wbs-task .wbs-task-title { flex: 1 1 6rem; min-width: 4.5rem; }
.col-lg-8 .wbs-task .wbs-edit { gap: .2rem; }
.col-lg-8 .wbs-field .wbs-inline { font-size: .7rem; padding-left: .35rem; }
.col-lg-8 .wbs-field .wbs-in-est { width: 2.7rem; }
.col-lg-8 .wbs-field .wbs-in-pri { width: 4.9rem; padding-right: 16px; }
.col-lg-8 .wbs-field .wbs-in-due { width: 6.7rem; }
.col-lg-8 .wbs-field .wbs-in-wf, .col-lg-8 .wbs-field .wbs-in-wait { width: 5.3rem; padding-right: 16px; }
.col-lg-8 .wbs-field-who .wbs-assign { min-width: 5.5rem; max-width: 7.5rem; flex-wrap: nowrap; overflow: hidden; }
.col-lg-8 .wbs-field-who .tag-pill { white-space: nowrap; }
.col-lg-8 .wbs-ms-assign { max-width: 9rem; }

/* Hours boxes (2026-10-16, task 2503): "1h 15m" with their own arrows, from
   static/js/hours_input.js. */
.v-hours-wrap { position: relative; display: block; }
.v-hours-wrap > input.v-hours { padding-right: 1.6rem; width: 100%; }
.v-hours-btns { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 1.25rem;
                display: flex; flex-direction: column; border-left: 1px solid var(--bs-border-color, #dee2e6); }
.v-hours-btns button { flex: 1 1 50%; border: 0; padding: 0; line-height: 1; font-size: .55rem;
                       background: transparent; color: var(--bs-secondary-color, #6c757d); }
.v-hours-btns button:hover { background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-body-color, #212529); }
input.v-hours:disabled + .v-hours-btns { display: none; }

/* A release's UAT check sheet (2026-10-19, task 2520), templates/_release_uat.html. */
.uat-track { height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: var(--card-border, #dee2e6); }
.uat-track i { display: block; height: 100%; }
.uat-track .p { background: #1f8a4c; } .uat-track .f { background: #c0392b; } .uat-track .s { background: #9aa3ad; }
.uat-section.uat-failed { border-color: #c0392b; }
.uat-steps { counter-reset: none; }
.uat-step { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 12px; padding: 10px 16px;
            border-top: 1px solid var(--card-border, #dee2e6); }
.uat-step:first-child { border-top-color: transparent; }
.uat-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--card-border, #dee2e6);
           display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--muted-color); }
.uat-step.pass .uat-num { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.uat-step.fail .uat-num { background: #c0392b; border-color: #c0392b; color: #fff; }
.uat-step.skip .uat-num { background: #9aa3ad; border-color: #9aa3ad; color: #fff; }
.uat-body { min-width: 0; }
.uat-expect-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.uat-marks { display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.uat-mark { font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 5px; cursor: pointer;
            border: 1px solid var(--card-border, #dee2e6); background: var(--card-bg, #fff); color: var(--muted-color); }
.uat-mark[aria-pressed="true"][data-v="pass"] { background: #e3f4ea; color: #1f8a4c; border-color: #1f8a4c; }
.uat-mark[aria-pressed="true"][data-v="fail"] { background: #fbe7e4; color: #c0392b; border-color: #c0392b; }
.uat-mark[aria-pressed="true"][data-v="skip"] { background: #eceef1; color: #5f6b77; border-color: #9aa3ad; }
.uat-step-tools { display: inline-flex; margin-left: 4px; }
.uat-edit { resize: none; overflow: hidden; }
.uat-hide-passed .uat-step.pass { display: none; }
@media (max-width: 575px) { .uat-step { grid-template-columns: 22px 1fr; } .uat-marks { grid-column: 2; justify-content: flex-start; } }
#rel-tab-uat .uat-edit-only { display: none !important; }
#rel-tab-uat.uat-editing .uat-edit-only { display: block !important; }
#rel-tab-uat.uat-editing span.uat-edit-only, #rel-tab-uat.uat-editing .uat-step-tools { display: inline-flex !important; }
#rel-tab-uat.uat-editing form.uat-edit-only { display: flex !important; }
#rel-tab-uat.uat-editing .uat-view-only { display: none !important; }
.uat-track { background: color-mix(in srgb, var(--muted-color, #6c757d) 22%, transparent); }