/* ============================================================
   MODERN REDMINE THEME — application.css
   Drop-in Redmine 6 theme: dark mode, collapsible sidebar,
   Inter font, modern card layout, design tokens.

   This file is served INSTEAD of Redmine's default application.css
   when this theme is active. It first imports the Redmine defaults,
   then applies overrides.
   ============================================================ */

/* Load Redmine's default application.css first.
   Relative path: theme lives at themes/modern-redmine-theme/stylesheets/
   so ../../application.css resolves to /assets/application.css.
   CSS spec: @import rules must precede all other rules (except @charset and
   other @imports). Must stay at the top. */
@import url("/assets/application-c183e617.css");

/* Self-hosted Inter font — no external CDN dependency (GDPR-safe). */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-400-cyrillic-ext-bdd1d2f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-400-cyrillic-d15bc467.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-400-latin-ext-ad60622d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-400-latin-0555e090.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-500-cyrillic-ext-bdd1d2f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-500-cyrillic-d15bc467.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-500-latin-ext-ad60622d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-500-latin-0555e090.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-600-cyrillic-ext-bdd1d2f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-600-cyrillic-d15bc467.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-600-latin-ext-ad60622d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-600-latin-0555e090.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-700-cyrillic-ext-bdd1d2f0.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-700-cyrillic-d15bc467.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-700-latin-ext-ad60622d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/themes/modern-redmine-theme/fonts/inter-700-latin-0555e090.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   MODERN REDMINE THEME — design tokens + layout + components
   ============================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────── */
:root {
  --c-primary:       #0891B2;  /* cyan-600 */
  --c-primary-hover: #0E7490;  /* cyan-700 */
  --c-primary-light: #ECFEFF;  /* cyan-50  */
  --c-primary-ring:  rgba(8,145,178,.25);
  --c-success:  #10B981;
  --c-warning:  #F59E0B;
  --c-danger:   #EF4444;
  --c-info:     #3B82F6;

  --c-bg:          #F0F4F8;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F7FAFC;
  --c-border:      #DDE3EA;
  --c-border-2:    #C4CDD6;
  --c-text:        #0F1923;
  --c-text-muted:  #5A6A7A;
  --c-text-subtle: #617282;   /* lightest text that still passes WCAG AA (4.5:1) on --c-bg */

  --c-topbar-bg:   #083344;   /* deep cyan-900 */
  --c-topbar-text: rgba(255,255,255,.88);
  --c-topbar-hover:rgba(255,255,255,.13);
  --c-header-bg:   #FFFFFF;
  --c-sidebar-bg:  #FFFFFF;
  --sidebar-w:     240px;

  --topbar-h:  44px;
  --header-h:  90px;   /* generous default: h1 row + tabs row */
  --total-top: 134px;  /* JS measures and overrides */

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;

  --shadow-xs: 0 1px 2px rgb(0 0 0/.06);
  --shadow-sm: 0 1px 3px rgb(0 0 0/.1), 0 1px 2px -1px rgb(0 0 0/.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0/.1), 0 2px 4px -2px rgb(0 0 0/.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0/.1), 0 4px 6px -4px rgb(0 0 0/.1);

  --r-sm: .25rem;  --r: .5rem;  --r-md: .75rem;  --r-lg: 1rem;
  --t-fast: 150ms ease;  --t: 200ms ease;  --t-slow: 300ms ease;

  /* Status / alert text tokens (see flash messages, badges) */
  --c-badge-private-text: #991B1B;
  --c-flash-success-text: #065F46;
  --c-flash-error-text:   #991B1B;
  --c-flash-warning-text: #92400E;

  /* Focus ring — used by :focus-visible across all interactive elements */
  --c-focus-ring: rgba(8,145,178,.55);

  /* Text on a --c-primary background (buttons, current page, badges) */
  --c-on-primary: white;

  /* Default SVG icon colour — Redmine core's link blue, kept as-is for Modern */
  --c-icon: #116699;

  /* Not a colour: where theme.js fetches every Gogh palette from for the search on
     My account. Propshaft rewrites this url() to the digested asset path. */
  --rm-gogh-palettes: url("/assets/themes/modern-redmine-theme/gogh/palettes-39944819.json");
}

/* Modern browsers (color-mix supported): derive hover/light/ring from
   --c-primary so changing the primary token propagates everywhere.
   Older browsers keep the hand-picked fallbacks above. */
@supports (color: color-mix(in srgb, red, white)) {
  :root {
    --c-primary-hover: color-mix(in srgb, var(--c-primary) 85%, black);
    --c-primary-light: color-mix(in srgb, var(--c-primary) 10%, white);
    --c-primary-ring:  color-mix(in srgb, var(--c-primary) 35%, transparent);
    --c-focus-ring:    color-mix(in srgb, var(--c-primary) 55%, transparent);
  }
}

/* ── 2. DARK MODE TOKENS ─────────────────────────────────── */
html.dark-mode {
  --c-primary:       #22D3EE;  /* cyan-400 — vibrant on dark */
  --c-primary-hover: #38BDF8;  /* sky-400 — hand-picked fallback */
  --c-primary-ring:  rgba(34,211,238,.22);
  --c-focus-ring:    rgba(34,211,238,.5);

  --c-bg:          #161E2A;   /* lighter than before */
  --c-surface:     #1E2C3A;   /* lighter card bg     */
  --c-surface-2:   #243040;   /* slightly lighter    */
  --c-border:      #2E3F52;   /* lighter border      */
  --c-border-2:    #3A5068;
  --c-text:        #E8F0F8;   /* softer white        */
  --c-text-muted:  #8AAABF;
  --c-text-subtle: #7B9AB0;   /* AA on --c-surface-2 */
  --c-primary-light: rgba(34,211,238,.12);
  --c-topbar-bg:   #0C1E2C;   /* dark navy-cyan      */
  --c-header-bg:   #1E2C3A;
  --c-sidebar-bg:  #1A2635;

  --c-badge-private-text: #FCA5A5;
  --c-flash-success-text: #6EE7B7;
  --c-flash-error-text:   #FCA5A5;
  --c-flash-warning-text: #FCD34D;

  /* White on the bright dark-mode cyan is ~1.8:1; dark navy reads at ~10:1 */
  --c-on-primary: #0C1E2C;
}

@supports (color: color-mix(in srgb, red, white)) {
  html.dark-mode {
    --c-primary-hover: color-mix(in srgb, var(--c-primary) 85%, white);
    --c-primary-light: color-mix(in srgb, var(--c-primary) 14%, transparent);
    --c-primary-ring:  color-mix(in srgb, var(--c-primary) 30%, transparent);
    --c-focus-ring:    color-mix(in srgb, var(--c-primary) 50%, transparent);
  }
}

/* ── 2b. COLOUR SCHEMES ──────────────────────────────────── */
/* Optional palettes picked from the account menu (theme.js → initSchemePicker).
   Each scheme sets only raw --s-* inputs taken from a Gogh terminal palette
   (github.com/Gogh-Co/Gogh, MIT): background, foreground, muted text, an
   accent, the red/green/yellow/blue slots, and the text colour on the accent.
   The per-scheme blocks are generated by src/gen-schemes.py, which also
   contrast-checks each palette and nudges colours that fail WCAG AA.
   The block below derives every --c-* token from them, so a new scheme is
   one short block. Needs color-mix(); theme.js hides the picker without it.
   Must stay after the dark-mode blocks — same specificity, later wins. */
@supports (color: color-mix(in srgb, red, white)) {
  html[data-scheme] {
    --c-bg:          var(--s-bg);
    --c-text:        var(--s-fg);
    --c-text-muted:  var(--s-muted, color-mix(in srgb, var(--s-fg) 72%, var(--s-bg)));
    --c-text-subtle: var(--s-muted, color-mix(in srgb, var(--s-fg) 48%, var(--s-bg)));
    --c-border:      color-mix(in srgb, var(--s-fg) 15%, var(--s-bg));
    --c-border-2:    color-mix(in srgb, var(--s-fg) 24%, var(--s-bg));
    --c-primary:     var(--s-accent);
    --c-on-primary:  var(--s-on-accent);
    --c-success:     var(--s-green);
    --c-warning:     var(--s-yellow);
    --c-danger:      var(--s-red);
    --c-info:        var(--s-blue);
    --c-topbar-bg:   var(--s-topbar);
    --c-icon:        var(--c-primary);
  }
  /* Default topbar; zero specificity so a scheme's own --s-topbar wins */
  :where(html[data-scheme].dark-mode)        { --s-topbar: color-mix(in srgb, var(--s-bg) 72%, black); }
  :where(html[data-scheme]:not(.dark-mode))  { --s-topbar: color-mix(in srgb, var(--s-fg) 80%, black); }

  /* Dark schemes: cards lift towards the foreground */
  html[data-scheme].dark-mode {
    --c-surface:     color-mix(in srgb, var(--s-fg) 6%, var(--s-bg));
    --c-surface-2:   color-mix(in srgb, var(--s-fg) 10%, var(--s-bg));
    --c-sidebar-bg:  color-mix(in srgb, var(--s-fg) 3%, var(--s-bg));
    --c-header-bg:   var(--c-surface);
    --c-badge-private-text: var(--s-red);
    --c-flash-success-text: var(--s-green);
    --c-flash-error-text:   var(--s-red);
    --c-flash-warning-text: var(--s-yellow);
  }
  /* Light schemes: cards lift towards white */
  html[data-scheme]:not(.dark-mode) {
    --c-surface:     color-mix(in srgb, white 65%, var(--s-bg));
    --c-surface-2:   color-mix(in srgb, white 35%, var(--s-bg));
    --c-sidebar-bg:  var(--c-surface);
    --c-header-bg:   var(--c-surface);
    --c-badge-private-text: color-mix(in srgb, var(--s-red) 75%, black);
    --c-flash-success-text: color-mix(in srgb, var(--s-green) 70%, black);
    --c-flash-error-text:   color-mix(in srgb, var(--s-red) 75%, black);
    --c-flash-warning-text: color-mix(in srgb, var(--s-yellow) 65%, black);
  }

  /* @schemes:begin — generated by src/gen-schemes.py, do not edit */
  /* Gogh: Ayu Dark */
  html[data-scheme="ayu-dark"] {
    --s-bg: #0A0E14;  --s-fg: #B3B1AD;  --s-muted: #878785;
    --s-accent: #59C2FF;  --s-on-accent: #0A0E14;
    --s-red: #FF3333;  --s-green: #C2D94C;  --s-yellow: #FF8F40;  --s-blue: #59C2FF;
  }
  /* Gogh: Ayu Mirage */
  html[data-scheme="ayu-mirage"] {
    --s-bg: #1F2430;  --s-fg: #CCCAC2;  --s-muted: #9F9F9C;
    --s-accent: #6DCBFA;  --s-on-accent: #1F2430;
    --s-red: #ED8274;  --s-green: #87D96C;  --s-yellow: #FACC6E;  --s-blue: #6DCBFA;
  }
  /* Gogh: Catppuccin Macchiato */
  html[data-scheme="catppuccin-macchiato"] {
    --s-bg: #24273A;  --s-fg: #CAD3F5;  --s-muted: #9CA3C1;
    --s-accent: #8AADF4;  --s-on-accent: #24273A;
    --s-red: #ED8796;  --s-green: #A6DA95;  --s-yellow: #EED49F;  --s-blue: #8AADF4;
  }
  /* Gogh: Catppuccin Mocha */
  html[data-scheme="catppuccin-mocha"] {
    --s-bg: #1E1E2E;  --s-fg: #CDD6F4;  --s-muted: #9CA2BD;
    --s-accent: #89B4FA;  --s-on-accent: #1E1E2E;
    --s-red: #F38BA8;  --s-green: #A6E3A1;  --s-yellow: #F9E2AF;  --s-blue: #89B4FA;
  }
  /* Gogh: Dracula */
  html[data-scheme="dracula"] {
    --s-bg: #282A36;  --s-fg: #F8F8F2;  --s-muted: #BEBEBD;
    --s-accent: #C098F9;  --s-on-accent: #282A36;
    --s-red: #FF8888;  --s-green: #50FA7B;  --s-yellow: #F1FA8C;  --s-blue: #BD93F9;
  }
  /* Gogh: Everforest Dark */
  html[data-scheme="everforest-dark"] {
    --s-bg: #2D353B;  --s-fg: #E5DDCC;  --s-muted: #B9B5A9;
    --s-accent: #85BEB7;  --s-on-accent: #2D353B;
    --s-red: #EC9EA0;  --s-green: #A7C080;  --s-yellow: #DBBC7F;  --s-blue: #7FBBB3;
  }
  /* Gogh: GitHub Dark */
  html[data-scheme="github-dark"] {
    --s-bg: #101216;  --s-fg: #A8AFB6;  --s-muted: #848990;
    --s-accent: #6CA4F8;  --s-on-accent: #101216;
    --s-red: #F78166;  --s-green: #56D364;  --s-yellow: #E3B341;  --s-blue: #6CA4F8;
  }
  /* Gogh: GitHub Dark Dimmed */
  html[data-scheme="github-dark-dimmed"] {
    --s-bg: #22272E;  --s-fg: #BDC8D2;  --s-muted: #98A1AB;
    --s-accent: #64A5F6;  --s-on-accent: #22272E;
    --s-red: #F57E76;  --s-green: #57AB5A;  --s-yellow: #C69026;  --s-blue: #539BF5;
  }
  /* Gogh: Gruvbox Dark */
  html[data-scheme="gruvbox-dark"] {
    --s-bg: #282828;  --s-fg: #EBDBB2;  --s-muted: #B4A98B;
    --s-accent: #D79921;  --s-on-accent: #282828;
    --s-red: #E6928E;  --s-green: #98971A;  --s-yellow: #D79921;  --s-blue: #458588;
  }
  /* Gogh: Kanagawa Wave */
  html[data-scheme="kanagawa-wave"] {
    --s-bg: #1F1F28;  --s-fg: #DCD7BA;  --s-muted: #A7A391;
    --s-accent: #7E9CD8;  --s-on-accent: #1F1F28;
    --s-red: #D88385;  --s-green: #76946A;  --s-yellow: #C0A36E;  --s-blue: #7E9CD8;
  }
  /* Gogh: Material Ocean */
  html[data-scheme="material-ocean"] {
    --s-bg: #0F111A;  --s-fg: #ABAEB9;  --s-muted: #868893;
    --s-accent: #82AAFF;  --s-on-accent: #0F111A;
    --s-red: #FF5370;  --s-green: #C3E88D;  --s-yellow: #FFCB6B;  --s-blue: #82AAFF;
  }
  /* Gogh: Monokai Pro */
  html[data-scheme="monokai-pro"] {
    --s-bg: #2D2A2E;  --s-fg: #FCFCFA;  --s-muted: #C2C1C1;
    --s-accent: #FC9867;  --s-on-accent: #2D2A2E;
    --s-red: #FF88A6;  --s-green: #A9DC76;  --s-yellow: #FFD866;  --s-blue: #FC9867;
  }
  /* Gogh: Nord */
  html[data-scheme="nord"] {
    --s-bg: #2E3440;  --s-fg: #D8DEE9;  --s-muted: #ACB2BD;
    --s-accent: #88C0D0;  --s-on-accent: #2E3440;
    --s-red: #DCA8AD;  --s-green: #A3BE8C;  --s-yellow: #EBCB8B;  --s-blue: #81A1C1;
  }
  /* Gogh: One Dark Pro */
  html[data-scheme="one-dark"] {
    --s-bg: #282C34;  --s-fg: #CDD1D9;  --s-muted: #A5A9B1;
    --s-accent: #61AFEF;  --s-on-accent: #282C34;
    --s-red: #E89198;  --s-green: #98C379;  --s-yellow: #D19A66;  --s-blue: #61AFEF;
  }
  /* Gogh: Rose Pine */
  html[data-scheme="ros-pine"] {
    --s-bg: #191724;  --s-fg: #E0DEF4;  --s-muted: #A8A6BA;
    --s-accent: #C4A7E7;  --s-on-accent: #191724;
    --s-red: #EB6F92;  --s-green: #31748F;  --s-yellow: #F6C177;  --s-blue: #9CCFD8;
  }
  /* Gogh: Rose Pine Moon */
  html[data-scheme="ros-pine-moon"] {
    --s-bg: #232136;  --s-fg: #E0DEF4;  --s-muted: #ABA9BF;
    --s-accent: #C4A7E7;  --s-on-accent: #232136;
    --s-red: #ED7D9D;  --s-green: #3E8FB0;  --s-yellow: #F6C177;  --s-blue: #9CCFD8;
  }
  /* Gogh: TokyoNight */
  html[data-scheme="tokyo-night"] {
    --s-bg: #1A1B26;  --s-fg: #C0CAF5;  --s-muted: #9299BB;
    --s-accent: #7AA2F7;  --s-on-accent: #1A1B26;
    --s-red: #F7768E;  --s-green: #9ECE6A;  --s-yellow: #E0AF68;  --s-blue: #7AA2F7;
  }
  /* Gogh: Ayu Light */
  html[data-scheme="ayu-light"] {
    --s-bg: #F8F9FA;  --s-fg: #4E5257;  --s-muted: #6D7074;
    --s-accent: #2573A9;  --s-on-accent: #FFFFFF;
    --s-red: #B05152;  --s-green: #6CBF43;  --s-yellow: #ECA944;  --s-blue: #3199E1;
  }
  /* Gogh: Catppuccin Latte */
  html[data-scheme="catppuccin-latte"] {
    --s-bg: #EFF1F5;  --s-fg: #4C4F69;  --s-muted: #696C82;
    --s-accent: #1C61E9;  --s-on-accent: #FFFFFF;
    --s-red: #D20F39;  --s-green: #40A02B;  --s-yellow: #DF8E1D;  --s-blue: #1E66F5;
  }
  /* Gogh: Everforest Light */
  html[data-scheme="everforest-light"] {
    --s-bg: #FDF6E3;  --s-fg: #4A555B;  --s-muted: #6A7274;
    --s-accent: #2E769E;  --s-on-accent: #FFFFFF;
    --s-red: #C64442;  --s-green: #8DA101;  --s-yellow: #DFA000;  --s-blue: #3A94C5;
  }
  /* Gogh: GitHub Light Default */
  html[data-scheme="github-light"] {
    --s-bg: #FFFFFF;  --s-fg: #1F2328;  --s-muted: #5E6164;
    --s-accent: #0969DA;  --s-on-accent: #FFFFFF;
    --s-red: #CF222E;  --s-green: #116329;  --s-yellow: #4D2D00;  --s-blue: #0969DA;
  }
  /* Gogh: Gruvbox Light */
  html[data-scheme="gruvbox-light"] {
    --s-bg: #FBF1C7;  --s-fg: #3C3836;  --s-muted: #716C5F;
    --s-accent: #3B7174;  --s-on-accent: #FFFFFF;
    --s-red: #CC241D;  --s-green: #98971A;  --s-yellow: #D79921;  --s-blue: #458588;
  }
  /* Gogh: Kanagawa Lotus */
  html[data-scheme="kanagawa-lotus"] {
    --s-bg: #F2ECBC;  --s-fg: #4C4C5A;  --s-muted: #6A686C;
    --s-accent: #4D699B;  --s-on-accent: #FFFFFF;
    --s-red: #B43A4B;  --s-green: #6F894E;  --s-yellow: #77713F;  --s-blue: #4D699B;
  }
  /* Gogh: One Light */
  html[data-scheme="one-light"] {
    --s-bg: #F8F8F8;  --s-fg: #2A2B32;  --s-muted: #646469;
    --s-accent: #315EEE;  --s-on-accent: #FFFFFF;
    --s-red: #CF3B36;  --s-green: #41933E;  --s-yellow: #855504;  --s-blue: #315EEE;
  }
  /* Gogh: Rose Pine Dawn */
  html[data-scheme="ros-pine-dawn"] {
    --s-bg: #FAF4ED;  --s-fg: #534E73;  --s-muted: #716C89;
    --s-accent: #7A6890;  --s-on-accent: #FFFFFF;
    --s-red: #A2596E;  --s-green: #286983;  --s-yellow: #EA9D34;  --s-blue: #56949F;
  }
  /* Gogh: Solarized Light */
  html[data-scheme="solarized-light"] {
    --s-bg: #FCF4DC;  --s-fg: #42535A;  --s-muted: #647071;
    --s-accent: #1F70BD;  --s-on-accent: #FFFFFF;
    --s-red: #D11C24;  --s-green: #738A05;  --s-yellow: #A57706;  --s-blue: #2176C7;
  }
  /* Gogh: TokyoNight Day */
  html[data-scheme="tokyo-night-day"] {
    --s-bg: #E1E2E7;  --s-fg: #264386;  --s-muted: #4C6399;
    --s-accent: #225EAF;  --s-on-accent: #FFFFFF;
    --s-red: #B8204C;  --s-green: #587539;  --s-yellow: #8C6C3E;  --s-blue: #2E7DE9;
  }
  /* @schemes:end */
}

/* ── 3. BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 3b. FOCUS VISIBLE — keyboard-only ring on all interactive elements.
   Uses :focus-visible so mouse clicks don't show the ring; keyboard
   navigation (tab) does. WCAG AA contrast met by --c-focus-ring. */
:focus { outline: none !important; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--c-focus-ring) !important;
  border-radius: var(--r-sm);
}
/* Icons + text links get a softer ring (no outline offset) */
a:focus-visible,
#top-menu a:focus-visible,
#main-menu a:focus-visible,
#sidebar a:focus-visible {
  outline-offset: 1px !important;
}

/* ── 4. TOPBAR (#top-menu) ──────────────────────────────── */
#top-menu {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: var(--topbar-h) !important;
  background: var(--c-topbar-bg) !important;
  color: var(--c-topbar-text) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 var(--sp-4) !important;
  z-index: 1000 !important;
  box-shadow: 0 1px 3px rgb(0 0 0/.4) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

/* DOM order: #account → #loggedas → ul(nav)
   We want:   ul(nav) LEFT → loggedas RIGHT → #account FAR RIGHT
   Use order + margin tricks                                      */
#top-menu > ul {
  order: 0 !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
  flex: 1 !important; /* take available space, pushes account to far right */
}

#top-menu #account {
  order: 3 !important;
  display: flex !important;
  align-items: center !important;
  margin-left: var(--sp-2) !important;
  padding-left: var(--sp-3) !important;
  border-left: 1px solid rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
}

#top-menu #loggedas {
  order: 2 !important;
  color: var(--c-topbar-text) !important;
  font-size: var(--text-xs) !important;
  white-space: nowrap !important;
  opacity: .65 !important;
  padding: 0 var(--sp-3) !important;
  flex-shrink: 0 !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  margin-left: auto !important; /* push loggedas+account to far right */
}

#top-menu #loggedas a { color: white !important; font-weight: 500 !important; }

#top-menu ul li a,
#top-menu ul li span.disabled {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--sp-2) var(--sp-3) !important;
  color: var(--c-topbar-text) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  text-decoration: none !important;
  transition: background var(--t-fast) !important;
  white-space: nowrap !important;
}

#top-menu ul li a:hover { background: var(--c-topbar-hover) !important; color: white !important; }
#top-menu ul li.selected a,
#top-menu ul li a.active { background: var(--c-topbar-hover) !important; color: white !important; }

/* ── Hide mobile hamburger — not needed on desktop ───────── */
.mobile-toggle-button { display: none !important; }

/* ── ACCOUNT DROPDOWN (JS-injected) ───────────────────────
   Trigger button with avatar + name + caret; panel opens on click. */
.rm-account-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.rm-account-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  background: transparent !important;
  border: none !important;
  color: var(--c-topbar-text) !important;
  padding: 4px 8px !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  transition: background var(--t-fast) !important;
}
.rm-account-trigger:hover { background: var(--c-topbar-hover) !important; color: white !important; }
.rm-account-trigger[aria-expanded="true"] { background: var(--c-topbar-hover) !important; color: white !important; }
.rm-account-trigger .rm-account-caret { display: inline-flex !important; transition: transform var(--t-fast) !important; opacity: .7; }
.rm-account-trigger[aria-expanded="true"] .rm-account-caret { transform: rotate(180deg) !important; }

.rm-account-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.rm-account-avatar-lg { width: 40px !important; height: 40px !important; font-size: 14px !important; }

.rm-account-name {
  font-weight: 500 !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.rm-account-panel {
  /* Fixed so the dropdown escapes #top-menu's overflow:hidden clip.
     Position is set in JS to track the trigger's bounding rect. */
  position: fixed !important;
  top: calc(var(--topbar-h) + 4px) !important;
  right: var(--sp-4) !important;
  min-width: 220px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--sp-1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast) !important;
  z-index: 1001 !important;
  color: var(--c-text) !important;
}
.rm-account-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.rm-account-panel-head {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-3) !important;
  border-radius: var(--r-sm) !important;
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: background var(--t-fast) !important;
}
.rm-account-panel-head:hover { background: var(--c-primary-light) !important; }
.rm-account-panel-name { display: block !important; font-weight: 600 !important; color: var(--c-text) !important; }
.rm-account-panel-view { display: block !important; font-size: var(--text-xs) !important; color: var(--c-text-muted) !important; margin-top: 2px !important; }
.rm-account-panel-sep { height: 1px !important; background: var(--c-border) !important; margin: var(--sp-1) 0 !important; }

.rm-account-panel ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.rm-account-panel ul li a {
  display: flex !important;
  align-items: center !important;
  padding: var(--sp-2) var(--sp-3) !important;
  color: var(--c-text) !important;
  font-size: var(--text-sm) !important;
  text-decoration: none !important;
  border-radius: var(--r-sm) !important;
  transition: background var(--t-fast) !important;
}
.rm-account-panel ul li a:hover { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }

/* Colour scheme picker (theme.js → initSchemePicker / initSchemeSettings).
   Account menu: the four most recently used schemes as dots + a link to My account.
   My account: every scheme as a small preview card, grouped dark / light. */
.rm-scheme-label {
  padding: var(--sp-1) var(--sp-3) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--c-text-subtle) !important;
}
.rm-scheme-recent { display: flex !important; gap: var(--sp-2) !important; padding: var(--sp-1) var(--sp-3) var(--sp-2) !important; }
.rm-scheme-dot {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--c-border-2) !important;
  cursor: pointer !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.rm-scheme-dot:hover { transform: scale(1.1) !important; }
.rm-scheme-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-primary) !important; }
.rm-account-panel a.rm-scheme-more {
  display: block !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-size: var(--text-sm) !important;
  color: var(--c-text) !important;
  border-radius: var(--r-sm) !important;
  text-decoration: none !important;
}
.rm-account-panel a.rm-scheme-more:hover { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }

#rm-schemes .rm-scheme-group { margin: var(--sp-2) 0 var(--sp-1) !important; font-size: var(--text-xs) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--c-text-subtle) !important; }
#rm-schemes .rm-scheme-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: var(--sp-2) !important; }
#rm-schemes .rm-scheme-hint { margin: var(--sp-3) 0 0 !important; font-size: var(--text-xs) !important; color: var(--c-text-muted) !important; }
#rm-schemes .rm-gogh { margin-top: var(--sp-4) !important; padding-top: var(--sp-3) !important; border-top: 1px solid var(--c-border) !important; }
#rm-schemes .rm-gogh-search { width: 100% !important; max-width: 420px !important; height: 32px !important; }
#rm-schemes .rm-gogh-status { margin: var(--sp-1) 0 var(--sp-2) !important; }
#rm-schemes .rm-gogh-current:not([hidden]) { margin-bottom: var(--sp-3) !important; }
#rm-schemes .rm-gogh-title { font-weight: 600 !important; color: var(--c-text) !important; }
#rm-schemes .rm-gogh-accents { padding: var(--sp-1) 0 0 !important; }
#rm-schemes .rm-gogh-note { margin-top: var(--sp-1) !important; }
.rm-scheme-card {
  /* a <button>: core's `input, select, button { height: 24px; margin: 1px 0 }` would clip it */
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 6px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  color: var(--c-text) !important;
  font: inherit !important;
  font-size: var(--text-xs) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color var(--t-fast) !important;
}
.rm-scheme-card:hover { border-color: var(--c-primary) !important; }
.rm-scheme-card[aria-checked="true"] { border-color: var(--c-primary) !important; box-shadow: 0 0 0 2px var(--c-primary-ring) !important; font-weight: 600 !important; }
/* Mini preview: the scheme's own colours are set inline (--p-bg / --p-fg / --p-accent) */
.rm-scheme-preview {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  height: 46px !important;
  padding: 7px 8px !important;
  border-radius: var(--r-sm) !important;
  background: var(--p-bg) !important;
}
.rm-scheme-preview i { display: block !important; height: 5px !important; border-radius: 3px !important; background: var(--p-fg) !important; opacity: .85 !important; }
.rm-scheme-preview i:nth-child(1) { width: 70% !important; }
.rm-scheme-preview i:nth-child(2) { width: 45% !important; opacity: .5 !important; }
.rm-scheme-preview i:nth-child(3) { width: 30% !important; height: 9px !important; background: var(--p-accent) !important; opacity: 1 !important; margin-top: auto !important; }

/* Dark-mode adjustments for the panel */
html.dark-mode .rm-account-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode .rm-account-panel ul li a:hover { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }

/* ── 5. HEADER ──────────────────────────────────────────── */
#header {
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 0 !important; right: 0 !important;
  background: var(--c-header-bg) !important;
  z-index: 999 !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-xs) !important;
  /* padding-bottom: reserves space for #main-menu (absolute, bottom:0) + visual
     breathing room between project title and tabs. */
  padding: var(--sp-2) var(--sp-6) 58px var(--sp-6) !important;
  transition: background var(--t) !important;
  /* position:fixed already creates a containing block for absolute children like #main-menu */
}

/* When there are no project tabs, remove the extra bottom padding */
#header:not(:has(#main-menu ul li)) {
  padding-bottom: var(--sp-2) !important;
}

/* Default h1 (non-project pages: My page, Projects list, Admin, etc.) */
#header h1 {
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 340px 0 0 !important;
  padding: var(--sp-2) 0 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#header h1 a { color: inherit !important; text-decoration: none !important; }

/* Project pages — h1 contains .breadcrumbs + .current-project. Render as a
   two-column grid: [badge] [breadcrumb ↑ / project-name ↓]. */
#header h1:has(.current-project) {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  grid-auto-flow: column !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 2px 0 !important;
  font-size: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#header h1 > .rm-project-badge {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-radius: var(--r-md) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

#header h1 > .breadcrumbs {
  grid-row: 1 !important;
  grid-column: 2 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--c-text-subtle) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#header h1 > .breadcrumbs a.root {
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
}
#header h1 > .breadcrumbs a.root:hover { color: var(--c-primary) !important; }
#header h1 > .breadcrumbs .separator { opacity: .5 !important; margin: 0 4px !important; }

#header h1 > .current-project {
  grid-row: 2 !important;
  grid-column: 2 !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

#quick-search {
  float: right !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-2) 0 !important;
  /* cap width so h1 has room */
  max-width: 340px !important;
}

#quick-search form { float: none !important; display: flex !important; align-items: center !important; gap: var(--sp-1) !important; margin: 0 !important; position: relative !important; }

/* Search magnifier (injected by theme.js as first child of <form>).
   Absolutely positioned inside the input; input gets left padding. */
#quick-search .rm-search-icon {
  position: absolute !important;
  left: var(--sp-3) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--c-text-subtle) !important;
  pointer-events: none !important;
  display: inline-flex !important;
  z-index: 1 !important;
}

#quick-search #q,
#quick-search input[type=text] {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) calc(var(--sp-3) + 22px) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  outline: none !important;
  width: 160px !important;
  height: 28px !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), width var(--t) !important;
}

#quick-search form:focus-within .rm-search-icon { color: var(--c-primary) !important; }

/* Visually-hidden utility — kept in DOM for screen readers, not shown. */
.rm-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#quick-search #q:focus,
#quick-search input[type=text]:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
  background: var(--c-surface) !important;
  width: 180px !important;
}

#quick-search label { display: flex !important; align-items: center !important; margin: 0 !important; }
#quick-search label a {
  color: var(--c-text-muted) !important;
  font-size: var(--text-sm) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#quick-search label a:hover { color: var(--c-primary) !important; }

/* project jump box */
#project-jump { float: none !important; }
#project-jump .drdn-trigger {
  display: flex !important;
  align-items: center !important;
  padding: var(--sp-1) var(--sp-3) !important;
  height: 28px !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  font-size: var(--text-sm) !important;
  background: var(--c-surface-2) !important;
  color: var(--c-text-muted) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── PROJECT TABS ────────────────────────────────────────── */
/* Override Redmine's absolute bottom positioning with normal flow */
#main-menu {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--c-border) !important;
  background: var(--c-header-bg) !important;
  padding: 0 var(--sp-6) !important;
  width: auto !important;
}

/* top-level list only — NOT the .menu-children sub-list */
#main-menu > ul {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 5px 0 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Restore Redmine's hide-by-default on sub-menus */
#main-menu .menu-children {
  display: none !important;
  position: absolute !important;
  z-index: 200 !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-md) !important;
  min-width: 160px !important;
  padding: var(--sp-1) 0 !important;
}

#main-menu li:hover .menu-children,
#main-menu li .menu-children.visible {
  display: block !important;
}

#main-menu .menu-children li a {
  display: block !important;
  padding: var(--sp-2) var(--sp-4) !important;
  font-size: var(--text-sm) !important;
  color: var(--c-text) !important;
  background: var(--c-surface) !important; /* override hardcoded #fff per-item */
  white-space: nowrap !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

#main-menu .menu-children li a:hover {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border-bottom: none !important;
}

#main-menu ul li a,
#main-menu ul li span.selected {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
  white-space: nowrap !important;
}

#main-menu ul li a:hover {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary) !important;
  background: transparent !important;
}

/* ── "+ New object" button — circle icon in nav bar ─────── */
#main-menu a#new-object {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 41px !important;
  height: 41px !important;
  padding: 0 !important;
  margin: auto var(--sp-3) auto 0 !important;
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: var(--r-md) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background var(--t-fast), transform var(--t-fast) !important;
}

#main-menu a#new-object:hover {
  background: var(--c-primary-hover) !important;
  color: var(--c-on-primary) !important;
  border-bottom: none !important;
  transform: scale(1.08) !important;
}

#main-menu ul li a.selected,
#main-menu ul li span.selected {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary) !important;
  font-weight: 600 !important;
  background: transparent !important; /* override Redmine's hardcoded #fff */
}

.tabs-buttons { display: none !important; }

/* ── 6. LAYOUT ───────────────────────────────────────────── */
#wrapper { background: var(--c-bg) !important; min-height: 100vh !important; }

#main {
  display: flex !important;
  flex-direction: row !important;   /* sidebar LEFT, content RIGHT — override Redmine's row-reverse */
  align-items: flex-start !important;
  min-height: calc(100vh - var(--total-top)) !important;
  margin-top: var(--total-top) !important; /* JS updates this accurately */
}

/* ── 7. SIDEBAR ──────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w) !important;
  min-width: var(--sidebar-w) !important;
  background: var(--c-sidebar-bg) !important;
  border-right: 1px solid var(--c-border) !important;
  position: sticky !important;
  top: var(--total-top) !important;
  height: calc(100vh - var(--total-top)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-shrink: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--c-border) transparent !important;
  transition: width var(--t), min-width var(--t), opacity var(--t) !important;
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

#sidebar-wrapper { padding: var(--sp-5) var(--sp-2) !important; }

/* collapsed — do NOT use opacity:0, it also hides position:fixed children */
#main.collapsiblesidebar.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  border-right: none !important;
  overflow: hidden !important;
}
/* Clip floated/absolute children (e.g. #watchers .contextual > Add) that
   would otherwise escape width:0 + overflow:hidden. */
#main.collapsiblesidebar.sidebar-collapsed #sidebar > * {
  visibility: hidden !important;
}

/* hide Redmine's own sidebar toggle — replaced by our button */
#sidebar-switch-panel { display: none !important; }

/* sidebar content */
#sidebar h3 {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--c-text-subtle) !important;
  margin: 0 0 var(--sp-1) !important;
  padding-bottom: 0 !important;
}

#sidebar h3:first-child { margin-top: 0 !important; }

#sidebar ul { list-style: none !important; margin: 0 0 var(--sp-3) !important; padding: 0 !important; }

#sidebar ul li a {
  display: flex !important;
  align-items: center !important;
  padding: var(--sp-2) var(--sp-2) !important;
  font-size: var(--text-sm) !important;
  color: var(--c-text-muted) !important;
  border-radius: var(--r-sm) !important;
  text-decoration: none !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}

/* Watchers list — keep avatar, name, and delete icon on one row.
   Default #sidebar ul li a { display: flex } would otherwise make each
   <a> occupy a full row, stacking them 3 high. */
#watchers ul.watchers li {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: 2px 0 !important;
  margin: 0 !important;
}
#watchers ul.watchers li > .avatar { flex: 0 0 auto !important; }
#watchers ul.watchers li > a.user {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: var(--text-sm) !important;
}
#watchers ul.watchers li > a.delete {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
}

/* Don't flex links inside labels (e.g. activity filter links) */
#sidebar ul li label a {
  display: inline !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Activity filter form: Redmine sets form{display:inline} globally — override */
#activity_scope_form {
  display: block !important;
}

/* Activity filter list items: inline checkbox + label */
#activity_scope_form ul li {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-1) 0 !important;
}

/* Center the Apply button */
#activity_scope_form p:last-child {
  text-align: center !important;
  margin-top: var(--sp-3) !important;
}

#sidebar ul li a:hover,
#sidebar ul li.selected a {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}

/* sidebar toggle — fixed tab on the right edge of the sidebar */
#rm-sidebar-toggle {
  position: fixed !important;
  /* top is set by JS after measuring the header */
  top: calc(var(--total-top) + 20px) !important;
  left: calc(var(--sidebar-w) - 1px) !important;
  width: 16px !important;
  height: 40px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-left: none !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1002 !important;
  font-size: 10px !important;
  color: var(--c-text-subtle) !important;
  padding: 0 !important;
  box-shadow: 2px 0 6px rgb(0 0 0/.08) !important;
  transition: left var(--t), background var(--t-fast), color var(--t-fast) !important;
}

#rm-sidebar-toggle:hover {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary) !important;
}

body.sidebar-collapsed #rm-sidebar-toggle {
  left: 0 !important;
  border-left: 1px solid var(--c-border) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
}

/* ── HAMBURGER BUTTON (hidden on desktop) ─────────────────── */
#rm-hamburger {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--r);
  margin-right: auto;
  z-index: 1061;
}
#rm-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-topbar-text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Animate to X when open */
body.nav-open #rm-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open #rm-hamburger span:nth-child(2) { opacity: 0; }
body.nav-open #rm-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 8. CONTENT ──────────────────────────────────────────── */
#content {
  flex: 1 !important;
  padding: var(--sp-6) !important;
  min-width: 0 !important;
}

#main.nosidebar #content { padding-left: var(--sp-6) !important; }

/* ── Overview two-column layout ─────────────────────────── */
.splitcontent { align-items: flex-start !important; gap: var(--sp-4) !important; }
.splitcontentleft,
.splitcontentright {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) !important;
}

/* ── 9. CONTEXTUAL ACTIONS ───────────────────────────────── */
.contextual {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  flex-wrap: wrap !important;
  margin-bottom: var(--sp-3) !important;
}

/* ── 10. ISSUE LIST TABLE ────────────────────────────────── */
.autoscroll {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
  overflow-x: auto !important;
  margin-bottom: var(--sp-4) !important;
}

/* The table inside .autoscroll must not add its own outer border —
   the wrapper already provides one, and a second border-top creates a double line */
.autoscroll table { border-top: none !important; border-bottom: none !important; }

/* Wide issue lists scroll horizontally. Keep that scrollbar full-size and give it
   theme colours so it reads as part of the table rather than an OS artefact —
   deliberately NOT `scrollbar-width: thin`, since this bar is the only clue that
   there are more columns off to the right. */
.autoscroll { scrollbar-color: var(--c-border-2) var(--c-surface-2) !important; }
.autoscroll::-webkit-scrollbar { height: 12px !important; }
.autoscroll::-webkit-scrollbar-track {
  background: var(--c-surface-2) !important;
  border-top: 1px solid var(--c-border) !important;
}
.autoscroll::-webkit-scrollbar-thumb {
  background: var(--c-border-2) !important;
  border-radius: 5px !important;
  border: 2px solid var(--c-surface-2) !important;
}
.autoscroll::-webkit-scrollbar-thumb:hover { background: var(--c-text-subtle) !important; }

table.list {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--text-sm) !important;
}

table.list thead {
  background: var(--c-surface-2) !important;
  border-bottom: 2px solid var(--c-border) !important;
}

table.list thead th {
  padding: var(--sp-2) var(--sp-3) !important;
  font-weight: 600 !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--c-text-muted) !important;
  white-space: nowrap !important;
  border: none !important;
  text-align: left !important;
}

table.list thead th a { color: inherit !important; text-decoration: none !important; }
table.list thead th a:hover { color: var(--c-primary) !important; }

table.list tbody tr {
  border-bottom: 1px solid var(--c-border) !important;
  transition: background var(--t-fast) !important;
}

table.list tbody tr:last-child { border-bottom: none !important; }
table.list tbody tr.odd  { background: var(--c-surface) !important; }
table.list tbody tr.even { background: var(--c-surface-2) !important; }
table.list tbody tr:hover { background: var(--c-primary-light) !important; }

table.list tbody td {
  padding: var(--sp-2) var(--sp-3) !important;
  color: var(--c-text) !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Long-text columns are kept to a single line with an ellipsis. Without this the
   table squeezes them to their minimum content width and one long value wraps to
   four or five lines, so every row in the list inherits that height — a list with
   a long parent task subject went to 149px per row.

   Trade-off, measured: rows drop to 61px, but a wide issue list is now wider than
   the viewport and scrolls horizontally where it used to just fit. That is the
   intended call — a compact scannable list plus a scrollbar beats five-line rows. */
table.list td.subject {
  max-width: 320px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
table.list td.parent-subject,
table.list td.parent {
  max-width: 260px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

table.list tbody td a {
  color: var(--c-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color var(--t-fast) !important;
}

table.list tbody td a:hover {
  color: var(--c-primary-hover) !important;
  text-decoration: underline !important;
}

table.list tr.group td {
  background: var(--c-surface-2) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  font-weight: 700 !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--c-text-muted) !important;
  border-top: 2px solid var(--c-border) !important;
}

/* ── 11. ISSUE SHOW: DETAILS CARD ───────────────────────── */
.issue.details {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
  transition: box-shadow var(--t) !important;
}

.issue.details:hover { box-shadow: var(--shadow-sm) !important; }

.issue.details .subject {
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  /* margin-bottom: var(--sp-3) !important; */
  line-height: 1.4 !important;
}

.issue.details .author {
  font-size: var(--text-xs) !important;
  color: var(--c-text-subtle) !important;
  margin-bottom: var(--sp-4) !important;
}

.issue.details .author a { color: var(--c-text-muted) !important; font-weight: 500 !important; }

/* Attributes grid */
.attributes table { width: 100% !important; border-collapse: collapse !important; }

.attributes td.label {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--c-text-subtle) !important;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0 !important;
  white-space: nowrap !important;
  border: none !important;
  width: 38% !important;
}

.attributes td.value {
  font-size: var(--text-sm) !important;
  color: var(--c-text) !important;
  padding: var(--sp-2) 0 !important;
  border: none !important;
}

/* Description section */
.issue.details .description {
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-4) !important;
  border-top: 1px solid var(--c-border) !important;
}

.issue.details .description > p > strong,
.issue.details hr + p strong {
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--c-text-subtle) !important;
  display: block !important;
  margin-bottom: var(--sp-2) !important;
}

/* ── 12. HISTORY / JOURNALS CARD ─────────────────────────── */
#history {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: var(--sp-6) !important;
  margin-bottom: var(--sp-4) !important;
}

#history .tabs { border-bottom: 1px solid var(--c-border) !important; margin-bottom: var(--sp-4) !important; }

#history .tabs ul { display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }

#history .tabs ul li a {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}

#history .tabs ul li a:hover,
#history .tabs ul li.selected a {
  color: var(--c-primary) !important;
  border-bottom-color: var(--c-primary) !important;
}

.journal {
  border-bottom: 1px solid var(--c-border) !important;
  padding: var(--sp-4) var(--sp-2) !important;
  border-radius: var(--r) !important;
  transition: background var(--t-fast), padding var(--t-fast) !important;
}

.journal:last-child { border-bottom: none !important; }

.journal:hover {
  background: var(--c-surface-2) !important;
  padding-left: var(--sp-4) !important;
  padding-right: var(--sp-4) !important;
}

/* Redmine core hardcodes light colours on the journal header — #f6f7f8 for the
   strip, #DDEEFF for the one you jumped to via anchor, #666 for the timestamp.
   None of them react to dark mode, so the header stayed white on a dark page.
   Re-expressed as tokens, which already carry both palettes. */
.journals h4.journal-header {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  border-radius: var(--r-sm) !important;
}
.journals div:target h4.journal-header { background: var(--c-primary-light) !important; }
.journals h4.journal-header .update-info { color: var(--c-text-muted) !important; }

/* ── 13. SUBTASKS & RELATIONS CARDS ─────────────────────── */
#issue_tree, #relations {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin: var(--sp-4) 0 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── 14. BADGES ──────────────────────────────────────────── */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: .125rem var(--sp-2) !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.badge-private { background: rgba(239,68,68,.1) !important; color: var(--c-badge-private-text) !important; }

/* Icon-only anchors (delete-watcher, new-category, new-version, etc):
   hide label text, keep SVG, constrain to a small square button. Higher-
   specificity variants so this beats #sidebar ul li a and other context
   rules that set font-size / width on anchors. */
a.icon-only,
#sidebar a.icon-only,
#sidebar ul li a.icon-only,
#content a.icon-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: var(--r-sm) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}
a.icon-only:hover {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}

/* icon-only + icon-add (New category / New version next to form selects):
   give them a pale-cyan chip look so they don't read as orphaned glyphs. */
a.icon-only.icon-add,
#content a.icon-only.icon-add {
  background: var(--c-primary-light) !important;
  border: 1px solid rgba(8,145,178,.25) !important;
}
a.icon-only.icon-add:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
a.icon-only.icon-add:hover .icon-svg { stroke: var(--c-on-primary) !important; }
a.icon-only .icon-svg,
a.icon-only > svg,
#sidebar a.icon-only .icon-svg,
#sidebar a.icon-only > svg {
  font-size: initial !important;
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
}
a.icon-only .icon-label { display: none !important; }


.priority-low    { color: var(--c-text-muted) !important; }
.priority-normal { color: var(--c-info)    !important; }
.priority-high   { color: var(--c-warning) !important; font-weight: 600 !important; }
.priority-urgent,
.priority-immediate { color: var(--c-danger) !important; font-weight: 700 !important; }

/* ── 15. BUTTONS ─────────────────────────────────────────── */
a.icon.new-issue,
a.icon.icon-add,
.contextual a.icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--r) !important;
  text-decoration: none !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast) !important;
  white-space: nowrap !important;
}

a.icon.new-issue,
a.icon.icon-add {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border-color: rgba(8,145,178,.25) !important;
  font-weight: 600 !important;
}
/* Default state: icon stroke matches text (indigo) */
a.icon.new-issue .icon-svg,
a.icon.icon-add .icon-svg { stroke: var(--c-primary) !important; }

a.icon.new-issue:hover,
a.icon.icon-add:hover {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Hover state: icon stroke white (override Redmine's red) */
a.icon.new-issue:hover .icon-svg,
a.icon.icon-add:hover .icon-svg { stroke: var(--c-on-primary) !important; }

/* Core colours every icon #169 via svg.icon-svg; same specificity, no !important,
   so core's more specific icon colours (error, ok, readonly, flash) still win. */
svg.icon-svg { stroke: var(--c-icon); }
svg.icon-svg-filled { fill: var(--c-icon); stroke: none; }

/* All other icon links: use theme color instead of Redmine's red on hover */
.contextual a.icon:hover { background: var(--c-surface-2) !important; border-color: var(--c-border-2) !important; }
.contextual a.icon:hover .icon-svg { stroke: var(--c-primary) !important; }
a.icon:hover .icon-svg { stroke: var(--c-primary) !important; }

input[type=submit], button.button {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: 0 var(--sp-4) !important;
  height: 36px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast) !important;
  line-height: 1 !important;
}

/* Cancel / secondary action links adjacent to submit buttons */
input[type=submit] + a, button.button + a, .submit + a {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 var(--sp-4) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}
input[type=submit] + a:hover, button.button + a:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
}

/* input[type=button] kept as inline-block so value arrows (→ ← ⇈ ↑ ↓ ⇊) render correctly */
input[type=button] {
  display: inline-block !important;
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: var(--text-base) !important;
  font-family: inherit !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  transition: background var(--t-fast), border-color var(--t-fast) !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

input[type=submit] {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary) !important;
}

input[type=submit]:hover {
  background: var(--c-primary-hover) !important;
  border-color: var(--c-primary-hover) !important;
  box-shadow: var(--shadow-sm) !important;
}

input[type=button]:hover, button.button:hover {
  background: var(--c-border) !important;
}

/* ── 16. FORM INPUTS ─────────────────────────────────────── */
/* Shared border/color — keep height/padding compatible with Redmine's 24px default */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=url], input[type=date], textarea {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 4px var(--sp-3) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  outline: none !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}

/* Select: keep Redmine's original height:24px, just restyle border/colors */
select {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: 2px var(--sp-2) !important;
  font-size: var(--text-sm) !important;
  font-family: var(--font-sans) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  outline: none !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
  /* Do NOT set width:100% globally — breaks narrow operator selects */
}

textarea {
  height: auto !important;
  min-height: 80px !important;
  resize: vertical !important;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=search]:focus, input[type=url]:focus,
input[type=date]:focus, textarea:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
}

select:focus { border-color: var(--c-primary) !important; }

input[type=text]:hover:not(:focus),
input[type=email]:hover:not(:focus),
input[type=date]:hover:not(:focus),
select:hover:not(:focus) { border-color: var(--c-border-2) !important; }

/* Multi-select custom field editor (core's own .check_box_group) - core hardcodes a plain
   white background, gray border and no radius regardless of theme, so it stood out against
   every other themed input. Match the same border/radius/background/text color. */
.check_box_group {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
}

label { font-size: var(--text-sm) !important; font-weight: 500 !important; color: var(--c-text) !important; }

/* ── 17. FLASH MESSAGES ──────────────────────────────────── */
#flash_notice, #flash_error, #flash_warning, div.flash {
  padding: var(--sp-3) var(--sp-4) !important;
  border-radius: var(--r) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  margin-bottom: var(--sp-4) !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
}
/* …but a flash that Redmine or a plugin hid inline (jQuery .hide(), e.g. Agile's
   empty #agile-board-errors) must stay hidden — display:flex !important beat it. */
#flash_notice[style*="display: none"], #flash_error[style*="display: none"],
#flash_warning[style*="display: none"], div.flash[style*="display: none"],
div.flash[style*="display:none"] { display: none !important; }

#flash_notice, div.flash.notice {
  background: rgba(16,185,129,.1) !important;
  border-color: rgba(16,185,129,.3) !important;
  color: var(--c-flash-success-text) !important;
}

#flash_error, div.flash.error {
  background: rgba(239,68,68,.1) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: var(--c-flash-error-text) !important;
}

#flash_warning, div.flash.warning {
  background: rgba(245,158,11,.1) !important;
  border-color: rgba(245,158,11,.3) !important;
  color: var(--c-flash-warning-text) !important;
}

/* ── 18. PAGINATION ──────────────────────────────────────── */
.pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-1) !important;
  padding: var(--sp-4) 0 !important;
  flex-wrap: wrap !important;
}

.pagination a, .pagination span.current, .pagination em.current {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 var(--sp-2) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast) !important;
  background: var(--c-surface) !important;
}

.pagination a:hover {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}

.pagination span.current, .pagination em.current {
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary) !important;
}

/* ── 19. GLOBAL LINKS ────────────────────────────────────── */
a { color: var(--c-primary) !important; text-decoration: none !important; transition: color var(--t-fast) !important; }
a:hover { color: var(--c-primary-hover) !important; }

/* ── 20. WIKI CONTENT ────────────────────────────────────── */
.wiki { font-size: var(--text-sm) !important; line-height: 1.75 !important; color: var(--c-text) !important; }
.wiki p { margin: 0 0 var(--sp-3) !important; }

.wiki code, code {
  font-size: .8125rem !important;
  background: var(--c-surface-2) !important;
  padding: .1em .35em !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
}

.wiki pre {
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  padding: var(--sp-4) !important;
  overflow-x: auto !important;
  margin: var(--sp-3) 0 !important;
}

.wiki pre code { background: none !important; border: none !important; padding: 0 !important; }

/* ── 21. PROGRESS BAR ────────────────────────────────────── */
/* Preserve Redmine's original 80px float — .attributes table { width:100% } would override */
table.progress {
  width: 80px !important;
  float: left !important;
  height: 1em !important;
  border-collapse: collapse !important;
  margin: 1px 6px 1px 0 !important;
}
table.progress td { padding: 0 !important; height: 1em !important; }
table.progress td.todo  { background: var(--c-border) !important; }
table.progress td.done  { background: var(--c-success) !important; opacity: .5 !important; }
table.progress td.closed { background: var(--c-success) !important; }
p.percent { font-size: 86% !important; margin: 0 !important; }
.progress-bar { height: 8px !important; border-radius: 4px !important; overflow: hidden !important; }
.progress-bar-done { background: var(--c-primary) !important; border-radius: 4px !important; transition: width var(--t-slow) !important; }
.progress-bar-todo { background: var(--c-border) !important; }

/* ── 22. DARK MODE TOGGLE (injected) ─────────────────────── */
#rm-darkmode-toggle {
  position: fixed !important;
  bottom: var(--sp-6) !important;
  right: var(--sp-6) !important;
  width: 44px !important;
  height: 44px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 18px !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--c-text) !important;
}

#rm-darkmode-toggle:hover {
  transform: scale(1.1) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  border-color: var(--c-primary) !important;
}

/* ── 23. TOAST NOTIFICATIONS ─────────────────────────────── */
#rm-toast-container {
  position: fixed !important;
  bottom: var(--sp-8) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: var(--sp-2) !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  min-width: 280px !important;
  max-width: 420px !important;
}

.rm-toast {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: var(--text-sm) !important;
  color: var(--c-text) !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
  animation: rm-slide-in var(--t) forwards !important;
  line-height: 1.5 !important;
}

.rm-toast.rm-toast-out { animation: rm-slide-out var(--t) forwards !important; }
.rm-toast-icon { font-size: 15px !important; flex-shrink: 0 !important; margin-top: .1rem !important; }
.rm-toast-success .rm-toast-icon { color: var(--c-success) !important; }
.rm-toast-error   .rm-toast-icon { color: var(--c-danger)  !important; }
.rm-toast-warning .rm-toast-icon { color: var(--c-warning) !important; }
.rm-toast-info    .rm-toast-icon { color: var(--c-info)    !important; }

@keyframes rm-slide-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes rm-slide-out {
  from { opacity: 1; transform: translateY(0)    scale(1);   }
  to   { opacity: 0; transform: translateY(10px) scale(.96); }
}

/* ── 24. COLLAPSIBLE SECTIONS ────────────────────────────── */
.rm-collapsible-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  font: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: var(--sp-3) 0 !important;
  margin-bottom: var(--sp-3) !important;
  transition: color var(--t-fast) !important;
}

.rm-collapsible-header:hover { color: var(--c-primary) !important; }
.rm-collapsible-header:focus-visible {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 2px !important;
}

.rm-collapsible-toggle {
  font-size: 11px !important;
  color: var(--c-text-subtle) !important;
  transition: transform var(--t) !important;
  display: inline-block !important;
}

.rm-collapsible-header.is-collapsed .rm-collapsible-toggle { transform: rotate(-90deg) !important; }

.rm-collapsible-body {
  overflow: hidden !important;
  transition: max-height var(--t-slow) ease, opacity var(--t) !important;
  max-height: 5000px !important;
  opacity: 1 !important;
}

.rm-collapsible-body.is-collapsed { max-height: 0 !important; opacity: 0 !important; }

/* ── 25. TABS (settings, project settings, user tabs) ──────── */
/* Exclude .jstTabs (Edit/Preview wiki toolbar — keeps its own style) */
.tabs:not(.jstTabs) {
  overflow: visible !important;
  height: auto !important;
}
/* Allow #content to expand vertically when tabs wrap */
#content { overflow: visible !important; }
.tabs:not(.jstTabs) > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 2px var(--sp-1) !important;
  border-bottom: 2px solid var(--c-border) !important;
  list-style: none !important;
  margin: 0 0 var(--sp-5) !important;
  padding: 0 !important;
  position: static !important;
}
.tabs:not(.jstTabs) > ul li { margin: 0 !important; }
.tabs:not(.jstTabs) > ul li a {
  display: block !important;
  padding: var(--sp-2) var(--sp-3) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.tabs:not(.jstTabs) > ul li a:hover { color: var(--c-text) !important; border-bottom-color: var(--c-border) !important; }
.tabs:not(.jstTabs) > ul li a.selected { color: var(--c-primary) !important; border-bottom-color: var(--c-primary) !important; font-weight: 600 !important; }
/* Hide Redmine's overflow scroll buttons — we wrap instead */
.tabs-buttons { display: none !important; }

/* ── 26. TABULAR FORMS (settings, user edit, project settings) ── */
.tabular p {
  display: grid !important;
  grid-template-columns: 220px 1fr auto !important;
  align-items: baseline !important;
  gap: var(--sp-1) var(--sp-4) !important;
  padding: var(--sp-2) 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  margin: 0 !important;
}
.tabular p:last-of-type { border-bottom: none !important; }
.tabular p em.info, .tabular p span.description, .tabular p .description {
  grid-column: 2 !important;
  font-size: var(--text-xs) !important;
  color: var(--c-text-subtle) !important;
  font-style: normal !important;
  margin-top: 2px !important;
}
.tabular label {
  width: 100% !important;
  margin-left: 0 !important;
  text-align: right !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: var(--c-text-muted) !important;
  line-height: 1.5 !important;
  padding-right: var(--sp-1) !important;
}
/* Bare checkbox/radio labels (inside <p>, not .floating/.block) — left-align,
   shrink to content. Excluding .floating/.block so their explicit rules below
   win the width war (otherwise :has() specificity 0,3,1 beats 0,2,1). */
.tabular label:not(.floating):not(.block):has(input[type=checkbox]),
.tabular label:not(.floating):not(.block):has(input[type=radio]) {
  text-align: left !important;
  width: auto !important;
  padding-right: 0 !important;
  font-weight: normal !important;
}
/* Project modules + role permissions use <label class="floating"> for a
   horizontal checkbox grid. Restore Redmine's fixed-width inline-block
   layout so they don't stack one-per-row under our width:100% reset. */
.tabular label.floating {
  display: inline-block !important;
  width: 270px !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  font-weight: normal !important;
  vertical-align: top !important;
  float: none !important;
}
/* <label class="block"> (e.g. role member-management radio choices) — one per row */
.tabular label.block {
  display: block !important;
  width: auto !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  font-weight: normal !important;
  float: none !important;
}
.tabular input[type=text],
.tabular input[type=email],
.tabular input[type=password],
.tabular input[type=number],
.tabular input[type=url],
.tabular select {
  width: auto !important;
  min-width: 200px !important;
  max-width: 480px !important;
}
.tabular textarea { max-width: 600px !important; width: 100% !important; }
.tabular .description,
.tabular em { font-size: var(--text-xs) !important; color: var(--c-text-subtle) !important; }

/* ── 27. MISC ────────────────────────────────────────────── */
hr { border: none !important; border-top: 1px solid var(--c-border) !important; margin: var(--sp-4) 0 !important; }

.flyout-menu { display: none !important; }

#footer {
  text-align: center !important;
  padding: var(--sp-4) var(--sp-6) !important;
  font-size: var(--text-xs) !important;
  color: var(--c-text-subtle) !important;
  border-top: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  margin-top: var(--sp-8) !important;
}

#footer a { color: var(--c-text-muted) !important; }

#ajax-indicator {
  position: fixed !important;
  top: var(--topbar-h) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  border-radius: 0 0 var(--r) var(--r) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  z-index: 9999 !important;
  box-shadow: var(--shadow-md) !important;
}

.next-prev-links { font-size: var(--text-xs) !important; color: var(--c-text-subtle) !important; }
h2 { font-size: var(--text-xl) !important; font-weight: 700 !important; color: var(--c-text) !important; margin: 0 0 var(--sp-4) !important; }
h3 { font-size: var(--text-base) !important; font-weight: 600 !important; color: var(--c-text) !important; }

/* ── 26. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 899px) {
  /* Sidebar — slides in from left as overlay */
  #sidebar {
    display: block !important;
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    height: calc(100vh - 44px) !important;
    z-index: 1049 !important;
    transform: translateX(-100%) !important;
    transition: transform var(--t) !important;
    box-shadow: var(--shadow-lg) !important;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    overflow-y: auto !important;
    opacity: 1 !important;
  }
  body.sidebar-open #sidebar { transform: translateX(0) !important; }
  /* Redmine puts sidebar content in flyout on mobile — mirror it back to our sidebar */
  .flyout-menu { display: none !important; }

  /* Main content fills full width when sidebar is off-screen */
  #main { flex-direction: column !important; }
  #content {
    padding: var(--sp-3) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Show hamburger button on mobile */
  #rm-hamburger { display: flex !important; }

  /* Topbar — hamburger layout on mobile */
  #top-menu {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--sp-2) !important;
    height: 44px !important;
    min-height: 44px !important;
    overflow: visible !important;
  }
  /* Hide all top-menu children except the hamburger button */
  #top-menu > ul,
  #top-menu #account,
  #top-menu #loggedas {
    display: none !important;
  }
  /* Dropdown panel — shown when nav-open */
  body.nav-open #top-menu > ul,
  body.nav-open #top-menu #account,
  body.nav-open #top-menu #loggedas {
    display: block !important;
    position: absolute !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--c-topbar-bg) !important;
    z-index: 1060 !important;
    box-shadow: 0 4px 12px rgb(0 0 0 / .3) !important;
    padding: 0 !important;
    animation: navSlideDown .15s ease both !important;
  }
  /* Stack the three panels vertically */
  body.nav-open #top-menu > ul    { top: 44px !important; }
  body.nav-open #top-menu #account { top: 44px !important; border-top: 1px solid rgb(255 255 255 / .1) !important; }
  body.nav-open #top-menu #loggedas { top: 44px !important; }
  /* Actually use a wrapper approach via flex column on top-menu when open */
  body.nav-open #top-menu {
    flex-wrap: wrap !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  body.nav-open #top-menu > ul,
  body.nav-open #top-menu #account,
  body.nav-open #top-menu #loggedas {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
  }
  /* Dropdown wrapper gets the shadow */
  body.nav-open #top-menu {
    box-shadow: 0 6px 16px rgb(0 0 0 / .35) !important;
  }
  #top-menu ul li { width: 100% !important; }
  #top-menu li a {
    display: block !important;
    padding: var(--sp-2) var(--sp-4) !important;
    font-size: var(--text-sm) !important;
    border-radius: 0 !important;
  }
  #top-menu li a:hover { background: rgb(255 255 255 / .08) !important; }
  #top-menu #loggedas {
    padding: var(--sp-2) var(--sp-4) !important;
    font-size: var(--text-xs) !important;
    opacity: .7 !important;
    border-top: 1px solid rgb(255 255 255 / .1) !important;
  }
  #top-menu #account ul { padding: var(--sp-1) 0 !important; }
  #top-menu #account li a { padding: var(--sp-2) var(--sp-4) !important; }

  /* Keep #header visible so its #main-menu child can render, but hide
     the heavy bits (h1/title, quick-search) — they'd take too much room
     on narrow viewports. Users still see project context via the sticky
     issue header when drilling into an issue. */
  #header {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
  }
  #header h1,
  #header h1:has(.current-project),
  #header #quick-search,
  #header #project-jump { display: none !important; }

  /* Remove JS-calculated top margin/padding — not needed when header scrolls */
  #main { margin-top: 0 !important; padding-top: 0 !important; }
  #rm-sidebar-toggle { position: fixed !important; }

  /* Redmine's responsive.css offsets sticky-issue-header by 64px for its own flyout.
     Our theme doesn't use that flyout, so reset to 0. */
  div#sticky-issue-header { top: 0 !important; }
}

/* Sticky issue header (JS-inserted when scrolling past the original H1):
   takes over the topbar position — same height, same dark navy — so the
   user always sees "what issue am I on" in the same strip. */
div#sticky-issue-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--topbar-h) !important;
  padding: 0 var(--sp-4) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  background: var(--c-topbar-bg) !important;
  color: var(--c-topbar-text) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / .4) !important;
  z-index: 1001 !important;              /* above #top-menu (1000) */
  font-family: var(--font-sans) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translateY(-100%) !important;
  transition: transform var(--t) ease !important;
}
div#sticky-issue-header.is-visible {
  transform: translateY(0) !important;
}
div#sticky-issue-header .issue-heading {
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, .7) !important;
  letter-spacing: .02em !important;
  flex-shrink: 0 !important;
}
div#sticky-issue-header .subject {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: white !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

@media (max-width: 899px) {
  /* keep the mobile override explicit */
  /* placeholder to preserve CSS block structure */

  /* Nav tabs — static on mobile, scroll horizontally.
     Match Redmine's `#header #main-menu { display: none }` specificity
     (0,2,0) so we re-show it here. */
  #header #main-menu,
  #main-menu {
    display: block !important;
    position: static !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: var(--c-header-bg) !important;
    border-top: 1px solid var(--c-border) !important;
  }
  #main-menu::-webkit-scrollbar { display: none !important; }
  #main-menu ul {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: max-content !important;
  }
  #main-menu li a { padding: var(--sp-2) var(--sp-3) !important; font-size: var(--text-sm) !important; }

  /* New-object + button */
  #main-menu a#new-object {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Sidebar toggle — keep it visible and accessible */
  #rm-sidebar-toggle {
    left: 0 !important;
    border-radius: 0 var(--r) var(--r) 0 !important;
    z-index: 1048 !important;
  }

  /* Overview two-column → single column */
  .splitcontent { flex-direction: column !important; }
  .splitcontentleft,
  .splitcontentright { margin: 0 0 var(--sp-3) 0 !important; width: 100% !important; }

  /* Tables — allow horizontal scroll */
  .autoscroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Contextual actions — wrap */
  .contextual { flex-wrap: wrap !important; gap: var(--sp-2) !important; }

  /* Issue attributes grid — single column */
  .attributes table td { display: block !important; width: 100% !important; }

  /* Tabular forms — stack label above input so narrow viewports don't
     get forced into a 220px label column that overflows right. */
  .tabular p {
    grid-template-columns: 1fr !important;
    row-gap: var(--sp-1) !important;
    padding: var(--sp-3) 0 !important;
  }
  .tabular label {
    text-align: left !important;
    padding-right: 0 !important;
    color: var(--c-text-subtle) !important;
    font-weight: 500 !important;
  }
  .tabular input[type=text],
  .tabular input[type=email],
  .tabular input[type=password],
  .tabular input[type=number],
  .tabular input[type=url],
  .tabular select,
  form select,
  form input[type=text] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Larger tap targets for icon-only buttons (36x36 hits 32px min) */
  a.icon-only,
  #sidebar a.icon-only,
  #sidebar ul li a.icon-only,
  #content a.icon-only {
    width: 36px !important;
    height: 36px !important;
  }
  a.icon-only .icon-svg,
  a.icon-only > svg,
  #sidebar a.icon-only .icon-svg,
  #sidebar a.icon-only > svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Sidebar toggle — wider, taller */
  #rm-sidebar-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 48px !important;
    font-size: 20px !important;
  }

  /* JSToolbar — let buttons wrap instead of overflowing right.
     Redmine's jstoolbar sets display:inline-block + white-space:nowrap on
     <li class="tab-elements"> which forces a single-line toolbar. Flip the
     chain so buttons wrap into multiple rows on mobile. */
  .jstBlock .jstTabs.tabs ul {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .jstBlock .jstTabs.tabs li.tab-elements {
    max-width: 100% !important;
    white-space: normal !important;
  }
  .jstElements {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .jstElements button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  /* JSToolbar tabs (Edit / Preview) — taller for tap */
  .jstTabs a.tab-edit,
  .jstTabs a.tab-preview {
    min-height: 40px !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }

  /* Issue attributes word-wrap so long text doesn't push table wider */
  .attributes table td { word-break: break-word !important; overflow-wrap: break-word !important; }

  /* Sticky issue header — tighter padding + smaller text on narrow screens */
  div#sticky-issue-header {
    padding: 0 var(--sp-2) !important;
    gap: var(--sp-2) !important;
  }
  div#sticky-issue-header .issue-heading,
  div#sticky-issue-header .subject {
    font-size: var(--text-xs) !important;
  }

  /* Toast container — full width minus small margin */
  #rm-toast-container {
    left: var(--sp-3) !important;
    right: var(--sp-3) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Forms/box containers — reduce internal padding on small screens */
  .box, fieldset.box {
    padding: var(--sp-3) !important;
  }

  /* Contextual bar — stack on very narrow widths; buttons fill row */
  .contextual a.icon, .contextual a.icon.icon-add {
    padding: var(--sp-2) var(--sp-3) !important;
    min-height: 36px !important;
  }

  /* Issue history entries — reduce left indent so content has room */
  #history .journal { padding: var(--sp-3) !important; }

  /* Journal header (avatar + "Updated by X N days ago" + action icons).
     On desktop it's flex with info left + meta right. On narrow viewports
     meta steals horizontal space and the info text wraps into a stack.
     Stack them vertically so both get full width. */
  .journal-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-2) !important;
  }
  .journal-info { flex: 1 1 auto !important; min-width: 0 !important; }
  .journal-meta {
    align-self: flex-end !important;
    flex: 0 0 auto !important;
  }
  .journal-actions { flex-wrap: wrap !important; }

  /* History/Notes tabs wrap to multiple rows on narrow screens — keep
     them tight with smaller padding and no extra gaps. */
  #history > .tabs ul,
  #history .tabs ul {
    gap: 0 !important;
  }
  #history .tabs li a {
    padding: var(--sp-2) var(--sp-3) !important;
    font-size: var(--text-sm) !important;
  }

  /* File attachment links: bigger tap area */
  a.icon.icon-attachment { padding: var(--sp-1) 0 !important; min-height: 32px !important; display: inline-flex !important; align-items: center !important; }
}

/* ── DARK MODE: override Redmine's hardcoded white backgrounds ── */

/* Body & wrapper */
html.dark-mode body,
html.dark-mode #wrapper { background: var(--c-bg) !important; color: var(--c-text) !important; }

/* Header & topbar */
html.dark-mode #header { background: var(--c-header-bg) !important; }
html.dark-mode #header h1,
html.dark-mode #header h1 a { color: var(--c-text) !important; }
html.dark-mode #main-menu { background: var(--c-header-bg) !important; border-top-color: var(--c-border) !important; }

/* Content area */
html.dark-mode #content { background: transparent !important; }
html.dark-mode #sidebar  { background: var(--c-sidebar-bg) !important; border-right-color: var(--c-border) !important; }

/* Generic white boxes — Redmine uses .box, .splitcontentleft/right, fieldset etc. */
html.dark-mode .box,
html.dark-mode fieldset,
html.dark-mode .splitcontentleft,
html.dark-mode .splitcontentright,
html.dark-mode .tabular,
html.dark-mode #query_form_with_buttons,
html.dark-mode .query-totals { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }

/* Project list cards */
html.dark-mode ul.projects li div.root,
html.dark-mode ul.projects li div.child,
html.dark-mode ul.projects li div.leaf { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Tables */
html.dark-mode table,
html.dark-mode table.list,
html.dark-mode table.list thead,
html.dark-mode table.list tbody tr.odd,
html.dark-mode table.list tbody tr.even { background: var(--c-surface) !important; color: var(--c-text) !important; }
html.dark-mode table.list tbody tr.even { background: var(--c-surface-2) !important; }
html.dark-mode table.list thead { background: var(--c-surface-2) !important; }
html.dark-mode table td,
html.dark-mode table th { border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Autoscroll wrapper */
html.dark-mode .autoscroll { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Issue details card */
html.dark-mode .issue.details { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* History / journals */
html.dark-mode #history { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode .journal:hover { background: var(--c-surface-2) !important; }

/* Subtasks / relations */
html.dark-mode #issue_tree,
html.dark-mode #relations { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Form inputs */
html.dark-mode input[type=text],
html.dark-mode input[type=email],
html.dark-mode input[type=password],
html.dark-mode input[type=number],
html.dark-mode input[type=search],
html.dark-mode input[type=url],
html.dark-mode input[type=date],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .check_box_group { background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }

/* Query form */
html.dark-mode #query_form { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode #filters-table { background: transparent !important; color: var(--c-text) !important; }

/* Core hardcodes legend text and the sprite_icon() SVG stroke to fixed dark grays
   (--oc-gray-9/--oc-gray-8) meant for light backgrounds only - illegible in dark mode. Most
   visible on the "Filters"/"Options" collapsible fieldset headers. The icon rule is scoped to
   legends: a site-wide svg.icon-svg rule also greyed the accent-coloured icons on the issue
   page (Edit / Log time / Watch / Copy, reactions). */
html.dark-mode legend {
  color: var(--c-text-muted) !important;
}
html.dark-mode legend svg.icon-svg {
  stroke: var(--c-text-muted) !important;
}

/* Dropdowns / context menu */
html.dark-mode .drdn-content {
  background: var(--c-surface) !important;
  background-color: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
html.dark-mode .drdn-items > * {
  color: var(--c-text) !important;
  border-color: var(--c-surface) !important; /* override hardcoded white item-borders */
}
html.dark-mode .drdn-items > a { color: var(--c-text) !important; }
html.dark-mode .drdn-items > a:hover {
  background: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}
html.dark-mode .drdn-items > span { color: var(--c-text-muted) !important; }
html.dark-mode div + .drdn-items { border-top-color: var(--c-border) !important; }
html.dark-mode #context-menu { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Sidebar toggle button */
html.dark-mode #rm-sidebar-toggle { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text-subtle) !important; }

/* Wiki / descriptions */
html.dark-mode .wiki { color: var(--c-text) !important; }
html.dark-mode .wiki code, html.dark-mode code { background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
html.dark-mode .wiki pre { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }

/* Pagination */
html.dark-mode .pagination a,
html.dark-mode .pagination span.current { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text-muted) !important; }
html.dark-mode .pagination span.current { background: var(--c-primary) !important; color: var(--c-on-primary) !important; }

/* Flash messages — text color is driven by --c-flash-*-text tokens, redefined in html.dark-mode */

/* Footer */
html.dark-mode #footer { background: var(--c-surface) !important; border-top-color: var(--c-border) !important; }

/* Misc links & text — var(--c-primary) / var(--c-primary-hover) redefine in dark-mode block */
html.dark-mode h2, html.dark-mode h3 { color: var(--c-text) !important; }
/* Core: #content h1…h6 { color: #555 } — the wiki h1 read at 2.2:1 */
html.dark-mode #content h1, html.dark-mode #content h4,
html.dark-mode #content h5, html.dark-mode #content h6 { color: var(--c-text) !important; }
/* Core secondary text (#555 / #666 / #888 / #959595) is fine on white, ~2.2–2.9:1 on dark */
html.dark-mode div#activity dt .time,
html.dark-mode div#activity dd span.description,
html.dark-mode #search-results dd span.description,
html.dark-mode p.other-formats,
html.dark-mode .wiki-update-info,
html.dark-mode span.pagination,
html.dark-mode em.info,
html.dark-mode div.attachments span.author,
html.dark-mode ul.revision-info { color: var(--c-text-muted) !important; }
/* Core #959595 is 3.0:1 even on white */
.journals .journal-details { color: var(--c-text-muted) !important; }
/* Core paints the selected sidebar link #9DB9D5 (2.7:1 with muted text); dark mode
   and schemes already re-colour it, light Modern gets the theme's active style */
#sidebar a.selected { background-color: var(--c-primary-light) !important; color: var(--c-primary) !important; }
#sidebar a.selected svg.icon-svg { stroke: var(--c-primary) !important; }
html.dark-mode .badge-status-open { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }

/* Sidebar selected query link — overrides hardcoded #9DB9D5 */
html.dark-mode #sidebar a.selected {
  background-color: var(--c-primary) !important;
  color: var(--c-on-primary) !important;
}
html.dark-mode #sidebar a.selected svg.icon-svg { stroke: var(--c-on-primary) !important; }

/* Wiki toolbar buttons — overrides jstoolbar.css hardcoded #f7f7f7 */
html.dark-mode .jstElements button {
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
html.dark-mode .jstElements button:hover {
  background-color: var(--c-border) !important;
  border-color: var(--c-border-2) !important;
}
/* "pre" text label on the pre button */
html.dark-mode .jstb_pre::before { color: var(--c-text-muted) !important; }

/* Wiki editor (Edit / Preview + toolbar over the textarea). Core overlaps this row
   1px onto the textarea (margin-bottom: -1px) so the selected tab joins the field —
   which makes the field's focus ring and the row share pixels. Left to paint order,
   the buttons covered the ring and it showed only between them, as dashes.
   The layering is explicit instead:
   - the textarea (z 1) sits under the row (z 2); the row itself is transparent, so
     the ring shows through everywhere except under the tabs;
   - the selected tab has the field's colour, bottom border included, so it covers
     the ring exactly where tab and field join;
   - the toolbar buttons sit 4px above the edge (core: 2px), out of reach of the
     2px ring, so it never touches the icons. */
#content .jstTabs.tabs { position: relative !important; z-index: 2 !important; }
.jstEditor textarea { position: relative; z-index: 1; }
.jstTabs .jstElements { height: auto !important; padding-bottom: 4px !important; }  /* core: fixed 26px, border-box would eat the padding */
.jstEditor textarea:focus,
.jstEditor textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--c-primary-ring) !important;
}
#content .jstTabs.tabs li a { border-radius: var(--r-sm) var(--r-sm) 0 0 !important; }
#content .jstTabs.tabs li a.selected { border-bottom-color: var(--c-surface) !important; }
html.dark-mode #content .jstTabs.tabs li a.selected { border-bottom-color: var(--c-surface-2) !important; }

/* Dark mode: core toolbar icons are dark SVG backgrounds — invisible on the dark
   button. The button hides its own image and ::after redraws it inverted, so the
   button keeps its themed background and border. Plugin buttons (DMSF, macros…)
   bring their own icons and are left alone; .jstb_pre is a text label. */
html.dark-mode .jstElements :is(.jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_code,
  .jstb_h1, .jstb_h2, .jstb_h3, .jstb_ul, .jstb_ol, .jstb_tl, .jstb_bq, .jstb_unbq,
  .jstb_table, .jstb_precode, .jstb_link, .jstb_img, .jstb_help) {
  position: relative !important;
  background-size: 0 0 !important;
}
html.dark-mode .jstElements :is(.jstb_strong, .jstb_em, .jstb_ins, .jstb_del, .jstb_code,
  .jstb_h1, .jstb_h2, .jstb_h3, .jstb_ul, .jstb_ol, .jstb_tl, .jstb_bq, .jstb_unbq,
  .jstb_table, .jstb_precode, .jstb_link, .jstb_img, .jstb_help)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  filter: invert(1) !important;
  opacity: .85 !important;
  pointer-events: none !important;
}

/* Wiki preview area — overrides hardcoded #ffffff */
html.dark-mode .wiki-preview {
  background-color: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}

/* Settings / page tabs */
html.dark-mode .tabs:not(.jstTabs) > ul { border-bottom-color: var(--c-border) !important; }
html.dark-mode .tabs:not(.jstTabs) > ul li a { color: var(--c-text-subtle) !important; }
html.dark-mode .tabs:not(.jstTabs) > ul li a:hover { color: var(--c-text) !important; }
html.dark-mode .tabs:not(.jstTabs) > ul li a.selected { color: var(--c-primary-light, var(--c-primary)) !important; }

/* Tabular form dark mode */
html.dark-mode .tabular p { border-bottom-color: var(--c-border) !important; }
html.dark-mode .tabular label { color: var(--c-text-subtle) !important; }

/* Edit / Preview tab links in the wiki toolbar */
html.dark-mode #content .tabs ul li a,
html.dark-mode #content .jstTabs.tabs li a {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-muted) !important;
}
html.dark-mode #content .tabs ul li a.selected,
html.dark-mode #content .jstTabs.tabs li a.selected {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
  border-bottom-color: var(--c-surface-2) !important;
}

/* .box.tabular form container */
html.dark-mode .box.tabular {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
}
html.dark-mode .tabular label { color: var(--c-text-muted) !important; }

/* ── 27. JQUERY UI DIALOG (modal) ────────────────────────── */
/* Redmine calls showModal() which wraps content in ui-dialog with dialogClass:'modal' */
.ui-dialog.modal {
  padding: 0 !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--c-surface) !important;
  font-family: var(--font-sans) !important;
  overflow: hidden !important;
}

.ui-dialog.modal .ui-dialog-titlebar {
  background: var(--c-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-radius: 0 !important;
  padding: var(--sp-4) var(--sp-5) !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.ui-dialog.modal .ui-dialog-title {
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  float: none !important;
  margin: 0 !important;
}

.ui-dialog.modal .ui-dialog-titlebar-close {
  position: absolute !important;
  right: var(--sp-4) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--c-text-muted) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition: background var(--t-fast), border-color var(--t-fast) !important;
}

.ui-dialog.modal .ui-dialog-titlebar-close:hover {
  background: var(--c-surface-2) !important;
  border-color: var(--c-border-2) !important;
  color: var(--c-text) !important;
}

/* Show × close button: hide space+text, replace icon via ::before */
.ui-dialog.modal .ui-dialog-titlebar-close { font-size: 0 !important; }
.ui-dialog.modal .ui-dialog-titlebar-close .ui-button-icon-space { display: none !important; }
.ui-dialog.modal .ui-dialog-titlebar-close .ui-icon-closethick {
  background-image: none !important;
  width: 100% !important;
  height: 100% !important;
  text-indent: 0 !important;
  visibility: visible !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0px !important;
}
.ui-dialog.modal .ui-dialog-titlebar-close .ui-icon-closethick::before {
  content: '×' !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--c-text-muted) !important;
  font-family: var(--font-sans) !important;
}

.ui-dialog.modal .ui-dialog-content {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  padding: var(--sp-5) !important;
  border: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
}

/* Overlay + dialog stacking — must exceed fixed topbar (1000), fixed header
   (999), floating widgets (#rm-darkmode-toggle/toast at 9998-9999), and
   specificity-bomb plugin rules like redmine_contacts' `div.ui-dialog`. */
body div.ui-widget-overlay,
body > .ui-widget-overlay,
.ui-widget-overlay {
  background: rgb(0 0 0 / .45) !important;
  opacity: 1 !important;
  z-index: 10050 !important;
}
body div.ui-dialog,
body > .ui-dialog,
.ui-dialog {
  z-index: 10051 !important;
}

/* Watcher user list */
#users_for_watcher {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r) !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: var(--sp-1) var(--sp-2) !important;
  margin: var(--sp-2) 0 var(--sp-3) !important;
  background: var(--c-surface) !important;
  scrollbar-width: thin !important;
}

#users_for_watcher label {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  padding: var(--sp-1) var(--sp-2) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  color: var(--c-text) !important;
}

#users_for_watcher label:hover { background: var(--c-surface-2) !important; }

/* Modal footer buttons */
.ui-dialog.modal p.buttons {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  margin: var(--sp-4) 0 0 !important;
}

.ui-dialog.modal p.buttons a {
  font-size: var(--text-sm) !important;
  color: var(--c-text-muted) !important;
  text-decoration: none !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--c-border) !important;
  transition: background var(--t-fast) !important;
}

.ui-dialog.modal p.buttons a:hover {
  background: var(--c-surface-2) !important;
  color: var(--c-text) !important;
}

.ui-dialog.modal p.buttons input[type=submit] {
  height: 36px !important;
  padding: 0 var(--sp-5) !important;
  font-size: var(--text-sm) !important;
  min-width: 80px !important;
}

/* Dark mode for modal */
html.dark-mode .ui-dialog.modal,
html.dark-mode .ui-dialog.modal .ui-dialog-titlebar,
html.dark-mode .ui-dialog.modal .ui-dialog-content { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode .ui-dialog.modal .ui-dialog-title { color: var(--c-text) !important; }
html.dark-mode #users_for_watcher { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; }

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE — systematic hardcoded-color fixes
   ══════════════════════════════════════════════════════════ */

/* ── Table th cells (e.g. Issue tracking on overview) ── */
html.dark-mode table th,
html.dark-mode table.list th { background: var(--c-surface-2) !important; color: var(--c-text-muted) !important; border-color: var(--c-border) !important; }
html.dark-mode table.list td { border-color: var(--c-border) !important; }
html.dark-mode table.issue-report tr.total,
html.dark-mode table.issue-report-detailed tr.total { border-top-color: var(--c-border) !important; }

/* Group header rows (tr.group) */
html.dark-mode tr.group td,
html.dark-mode tr.group { background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }

/* Total/summary rows */
html.dark-mode table#time-report tbody tr.total { background: var(--c-surface-2) !important; }
/* Class-based odd/even (issue list with odd-even class) */
html.dark-mode table.list tbody tr.odd  { background: var(--c-surface) !important; }
html.dark-mode table.list tbody tr.even { background: var(--c-surface-2) !important; }
/* nth-child alternating rows (overview, most non-issue-list tables) */
html.dark-mode table.list:not(.odd-even) tbody tr:nth-child(odd),
html.dark-mode .odd { background-color: var(--c-surface) !important; }
html.dark-mode table.list:not(.odd-even) tbody tr:nth-child(even),
html.dark-mode .even { background-color: var(--c-surface-2) !important; }
html.dark-mode table.list:not(.odd-even) tbody tr:nth-child(odd):hover,
html.dark-mode table.list:not(.odd-even) tbody tr:nth-child(even):hover,
html.dark-mode .odd:hover,
html.dark-mode .even:hover { background-color: var(--c-primary-light) !important; }
/* #issue-changesets alternating (same pattern) */
html.dark-mode #issue-changesets div.changeset:nth-child(odd)  { background: var(--c-surface) !important; }
html.dark-mode #issue-changesets div.changeset:nth-child(even) { background: var(--c-surface-2) !important; }

/* ── Flash messages (backgrounds) ── */
html.dark-mode div.flash.error,
html.dark-mode #errorExplanation { background-color: rgba(239,68,68,.15) !important; border-color: rgba(239,68,68,.4) !important; color: #FCA5A5 !important; }
html.dark-mode div.flash.notice  { background-color: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.35) !important; color: #6EE7B7 !important; }
html.dark-mode div.flash.warning,
html.dark-mode .conflict          { background-color: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.35) !important; color: #FCD34D !important; }

/* ── Context menu (context_menu.css) ── */
html.dark-mode #context-menu ul  { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode #context-menu li  { border-color: var(--c-surface) !important; color: var(--c-text) !important; }
html.dark-mode #context-menu li a { color: var(--c-text) !important; }
html.dark-mode #context-menu li:hover { background: var(--c-primary-light) !important; border-color: var(--c-primary) !important; }
html.dark-mode #context-menu li:hover a { color: var(--c-primary) !important; }
html.dark-mode #context-menu li a.disabled { color: var(--c-text-subtle) !important; }

/* ── Calendar ── */
html.dark-mode .cal table { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode .cal .calhead,
html.dark-mode .cal .week-number { background: var(--c-surface-2) !important; color: var(--c-text-muted) !important; border-color: var(--c-border) !important; }
html.dark-mode .cal td,
html.dark-mode .cal .calbody { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
html.dark-mode .cal .calbody.other-month { background: var(--c-surface-2) !important; }
html.dark-mode .cal .calbody.nwday:not(.other-month) { background: rgba(8,145,178,.06) !important; }
html.dark-mode .cal .calbody.today { background: rgba(34,211,238,.12) !important; }
html.dark-mode .cal .calbody.other-month p.day-num { color: var(--c-text-subtle) !important; }

/* ── Diff highlighting ── */
html.dark-mode .diff_out { background: rgba(239,68,68,.15) !important; }
html.dark-mode .diff_out span { background: rgba(239,68,68,.3) !important; }
html.dark-mode .diff_in  { background: rgba(16,185,129,.12) !important; }
html.dark-mode .diff_in span  { background: rgba(16,185,129,.25) !important; }

/* ── Syntax / code highlighting ── */
html.dark-mode .syntaxhl { background: var(--c-surface-2) !important; color: var(--c-text) !important; }
html.dark-mode .syntaxhl .hll { background: rgba(245,158,11,.2) !important; }
html.dark-mode .syntaxhl .k,
html.dark-mode .syntaxhl .kd,
html.dark-mode .syntaxhl .kn { color: #93C5FD !important; }
html.dark-mode .syntaxhl .s,
html.dark-mode .syntaxhl .s1,
html.dark-mode .syntaxhl .s2 { color: #86EFAC !important; background: transparent !important; }
html.dark-mode .syntaxhl .c,
html.dark-mode .syntaxhl .cm,
html.dark-mode .syntaxhl .c1 { color: var(--c-text-subtle) !important; }
html.dark-mode .syntaxhl .n,
html.dark-mode .syntaxhl .na { color: var(--c-text) !important; }

/* ── Search/text highlight ── */
html.dark-mode .highlight { background: rgba(245,158,11,.3) !important; color: var(--c-text) !important; }
html.dark-mode .highlight.token-1 { background: rgba(239,68,68,.25) !important; }
html.dark-mode .highlight.token-2 { background: rgba(8,145,178,.25) !important; }

/* ── User mentions ── */
html.dark-mode a.user.user-mention { background: var(--c-primary-light) !important; color: var(--c-primary) !important; }

/* ── Progress bar cells (issue tracker) ── */
html.dark-mode table.progress td.todo   { background: var(--c-border) !important; }
html.dark-mode table.progress td.done   { background: rgba(16,185,129,.35) !important; }
html.dark-mode table.progress td.closed { background: rgba(16,185,129,.6) !important; }

/* ── Attachments / thumbnails ── */
html.dark-mode div.thumbnail { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* ── Permissions table ── */
html.dark-mode table.fields_permissions td.readonly { background: var(--c-surface-2) !important; }
html.dark-mode table.fields_permissions td.required { background: rgba(239,68,68,.2) !important; }

/* ── Roadmap version summary ── */
html.dark-mode div#version-summary,
html.dark-mode div#issue-changesets { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* ── Nodata / warning inline — remove yellow in all modes ── */
p.nodata, .nodata {
  background: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-muted) !important;
}

/* ── Login form ── */
html.dark-mode #login-form { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* ── Sidebar hr ── */
html.dark-mode #sidebar hr { background: var(--c-border) !important; border-color: var(--c-border) !important; }

/* ── Wiki target highlight ── */
html.dark-mode div.wiki a:target + h1,
html.dark-mode div.wiki a:target + h2,
html.dark-mode div.wiki a:target + h3 { background: var(--c-primary-light) !important; }

/* ── Gantt & SCM areas ── */
html.dark-mode div#gantt_area { background: var(--c-surface) !important; }
html.dark-mode .gantt_hdr { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text-muted) !important; }

/* ── Generic missing borders ── */
html.dark-mode .box,
html.dark-mode .box h3 { border-color: var(--c-border) !important; }
html.dark-mode hr { border-color: var(--c-border) !important; background: var(--c-border) !important; }

/* ── Project cards (#projects-index) ── */
html.dark-mode #projects-index ul.projects li.root,
html.dark-mode #projects-index ul.projects li.child { border-color: var(--c-border) !important; background: var(--c-surface) !important; }
html.dark-mode #projects-index li.root ul.projects { border-left-color: var(--c-border) !important; }
html.dark-mode #projects-index ul.projects div.root a.project { color: var(--c-primary) !important; }
html.dark-mode #projects-index ul.projects div.description { color: var(--c-text-muted) !important; }

/* ── Nav tabs active state — override Redmine's hardcoded #fff background ── */
html.dark-mode #main-menu li a.selected,
html.dark-mode #main-menu li a.selected:hover { background: transparent !important; color: var(--c-primary) !important; }

/* ── Activity page day headers ── */
html.dark-mode #activity h3 {
  background: var(--c-surface-2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}

/* ── Sidebar clear-query icon — ensure SVG renders ── */
a.icon-clear-query .icon-svg { display: block !important; }
a.icon-clear-query .icon-label { display: none !important; }
a.icon-clear-query {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* ── My page block drag areas ── */
html.dark-mode .mypage-box { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
html.dark-mode .block-receiver { border-color: var(--c-border) !important; }

/* ── Activity page user/filter inputs in sidebar ── */
html.dark-mode #sidebar input[type=text],
html.dark-mode #sidebar select { background: var(--c-surface-2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* ── Plugin compatibility (dark mode) ─────────────────────── */
/* Plugins hardcode light backgrounds that the dark palette then puts light text on.
   Selectors are deliberately more specific than the plugin's (and !important only
   where the plugin uses it), so a plugin's own inline colour coding still wins.
   Checked against redmine.inctime.com, 2026-10-29. */

/* RedmineUP Agile — cards #ffffdd, planning columns #f6f7f8/#eee, WIP limits.
   Colour-coded cards (.bk-*) keep their meaning as a left stripe. */
html.dark-mode .issue-card { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); }
html.dark-mode .issues-board td.issue-status-col.closed .issue-card,
html.dark-mode .planning-board .closed-issue { background-color: var(--c-surface); opacity: .8; }
html.dark-mode .planning-board .closed-issue p.name a,
html.dark-mode .planning-board .closed-issue p.issue-id { color: var(--c-text-muted) !important; }
html.dark-mode .issue-card p.project,
html.dark-mode .assignable-user.draggable-active { background-color: var(--c-surface); border-color: var(--c-border); }
html.dark-mode .issue-card[class*="bk-"] { border-left-width: 4px; }
html.dark-mode .issue-card.bk-red        { border-left-color: var(--c-danger); }
html.dark-mode .issue-card.bk-green,
html.dark-mode .issue-card.bk-lightgreen { border-left-color: var(--c-success); }
html.dark-mode .issue-card.bk-blue       { border-left-color: var(--c-info); }
html.dark-mode .issue-card.bk-turquoise  { border-left-color: var(--c-primary); }
html.dark-mode .issue-card.bk-yellow,
html.dark-mode .issue-card.bk-orange     { border-left-color: var(--c-warning); }
html.dark-mode .issue-card.bk-purple     { border-left-color: var(--c-border-2); }
html.dark-mode .issue-card.bk-gray       { border-left-color: var(--c-text-subtle); }
html.dark-mode table.issues-board td.issue-status-col.closed,
html.dark-mode table.issues-board tbody td.under_wp_limit,
html.dark-mode table.issues-board tbody td.over_wp_limit { background-color: transparent; }
html.dark-mode table.issues-board thead th.under_wp_limit { background-color: color-mix(in srgb, var(--c-success) 18%, var(--c-surface)); }
html.dark-mode table.issues-board thead th.over_wp_limit  { background-color: color-mix(in srgb, var(--c-danger) 18%, var(--c-surface)); }
html.dark-mode .issues-board .backlog-column-header,
html.dark-mode .issues-board .issue-backlog-col { background: var(--c-surface); }
html.dark-mode .planning-board .column-content { background-color: var(--c-surface); border-color: var(--c-border); }
html.dark-mode .planning-board .column-header { background-color: var(--c-surface-2); border-bottom-color: var(--c-border); }
html.dark-mode .planning-board .column-header .version-name,
html.dark-mode .planning-board .column-header .version-estimate { color: var(--c-text-muted); }
html.dark-mode.agile-board-fullscreen div.agile-board { background: var(--c-bg); }

/* Redmineflux Testcase Management — #eaf7ff !important sidebar on ~25 controllers,
   white activity panel and filters. Its chart (#testcase_graph_id) is left white on
   purpose: the canvas draws dark axis labels that would vanish on a dark card. */
html.dark-mode body:is([class*="controller-test"], [class*="controller-run"], .controller-requirements,
  .controller-traceability_rtms, .controller-issue_testcase) #sidebar {
  background: var(--c-sidebar-bg) !important; box-shadow: none !important;
}
html.dark-mode #main #sidebar_right,
html.dark-mode #main .activity_item,
html.dark-mode #main .parent_calendar { background-color: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
html.dark-mode #main #reset_filters_button { background-color: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); }
html.dark-mode #main .activity_detail_date { color: var(--c-text-muted); }
html.dark-mode #main .activity_date_heading { background-color: var(--c-surface-2); }
html.dark-mode #main .sidebar_right_header h5 span,
html.dark-mode #main .activity_date_heading .date_title { color: var(--c-text); }

/* Vault (Passwords) — search row: Find and Clear are two forms inside a flex h2 with
   no gap, the field is 24px next to 36px buttons, and Clear looked as primary as Find */
.controller-keys #content .keys-search-title { gap: var(--sp-2) !important; flex-wrap: wrap !important; }
.controller-keys #content .keys-search-form { display: flex !important; align-items: center !important; gap: var(--sp-2) !important; }
.controller-keys #content .keys-search-title input#query { height: 36px !important; }
.controller-keys #content .keys-search-title form.button_to input[type=submit] {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border-2) !important;
}
.controller-keys #content .keys-search-title form.button_to input[type=submit]:hover { background: var(--c-surface-2) !important; }

/* Vault — popular tags: the plugin's 3-column layout squeezes each tag into ~56px of
   sidebar and the theme's #sidebar link style (muted text, 8px padding) clipped the
   label. Pills instead; white text on the user-chosen colour, as the plugin intends,
   dark text on its default bisque (no inline colour). */
#tags-list:has(li.vault-tag) { column-count: auto !important; }
#tags-list ul:has(> li.vault-tag) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; }
#tags-list li.vault-tag { margin: 0 !important; padding: 0 !important; overflow: visible !important; border-radius: 999px !important; }
#sidebar #tags-list li.vault-tag a.vault-tag-link {
  display: inline-block !important;
  padding: 2px 10px !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  color: white !important;
  background: transparent !important;
  border-radius: inherit !important;
}
#sidebar #tags-list li.vault-tag:not([style*="background"]) a.vault-tag-link { color: var(--c-text) !important; }
#sidebar #tags-list li.vault-tag a.vault-tag-link:hover { text-decoration: underline !important; }

/* ── Colour schemes: hardcoded colours that would otherwise leak through ── */
/* Modern renders these values directly; a scheme re-expresses them from its
   tokens. Scoped to [data-scheme] so the default palette stays pixel-identical. */
@supports (color: color-mix(in srgb, red, white)) {
  /* Redmine core paints #content white; Modern light relies on that = --c-surface */
  html[data-scheme]:not(.dark-mode) #content { background-color: var(--c-surface) !important; }
  html[data-scheme] a.icon-only.icon-add,
  html[data-scheme] #content a.icon-only.icon-add,
  html[data-scheme] a.icon.new-issue,
  html[data-scheme] a.icon.icon-add { border-color: color-mix(in srgb, var(--c-primary) 25%, transparent) !important; }
  html[data-scheme].dark-mode .cal .calbody.nwday:not(.other-month) { background: color-mix(in srgb, var(--c-primary) 6%, transparent) !important; }
  html[data-scheme].dark-mode .cal .calbody.today { background: var(--c-primary-light) !important; }
  html[data-scheme].dark-mode .highlight.token-2 { background: color-mix(in srgb, var(--c-primary) 25%, transparent) !important; }

  /* Redmine core greys (#d0d7de, #ddd, #eee, #f7f7f7, #888, #666 …). Modern keeps
     them — they read as neutral next to its slate palette — but on a tinted scheme
     background they show up as cold grey patches, so map each to its token. */
  html[data-scheme] table.list,
  html[data-scheme] .table-list,
  html[data-scheme] table.list td,
  html[data-scheme] table.list th,
  html[data-scheme] .table-list-header,
  html[data-scheme] fieldset,
  html[data-scheme] .box,
  html[data-scheme] .mypage-box,
  html[data-scheme] #sidebar,
  html[data-scheme] #footer,
  html[data-scheme] ul.cal,
  html[data-scheme] .cal .calbody,
  html[data-scheme] div.issue,
  html[data-scheme] #projects-index ul.projects li.root,
  html[data-scheme] .filecontent.wiki,
  html[data-scheme] tr.group td,
  html[data-scheme] div#sticky-issue-header,
  html[data-scheme] ul.pages li,
  html[data-scheme] div#issue-changesets div.changeset { border-color: var(--c-border) !important; }
  html[data-scheme] table.list th,
  html[data-scheme] .table-list-header,
  html[data-scheme] .cal .calhead,
  html[data-scheme] .cal .week-number { background-color: var(--c-surface-2) !important; }
  html[data-scheme] legend { color: var(--c-text-muted) !important; }
  html[data-scheme] span.pagination,
  html[data-scheme] p.other-formats,
  html[data-scheme] .journals .journal-details,
  html[data-scheme] ul.revision-info,
  html[data-scheme] em.info,
  html[data-scheme] div.attachments span.author,
  html[data-scheme] .wiki-update-info,
  html[data-scheme] div#activity dd span.description,
  html[data-scheme] .cal .day-num,
  html[data-scheme] .task,
  html[data-scheme] div.issue div.subject p,
  html[data-scheme] div.issue .next-prev-links,
  html[data-scheme] .gantt_hdr.nwday { color: var(--c-text-muted) !important; }
  html[data-scheme] span.required { color: var(--c-danger) !important; }

  /* Current page, selected sidebar query, count badge — core #628DB6 / #9DB9D5 */
  html[data-scheme] ul.pages li.current,
  html[data-scheme] #sidebar a.selected,
  html[data-scheme] .badge-count {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-on-primary) !important;
  }
  html[data-scheme] #sidebar a.selected svg.icon-svg { stroke: var(--c-on-primary) !important; }
  html[data-scheme] .badge-status-open { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }

  /* Wiki toolbar (jstoolbar.css: #f7f7f7 / #ddd) */
  html[data-scheme] .jstElements button,
  html[data-scheme] .jstTabs.tabs ul li a { background-color: var(--c-surface-2) !important; border-color: var(--c-border) !important; }
  html[data-scheme]:not(.dark-mode) #content .jstTabs.tabs li a.selected {
    background-color: var(--c-surface) !important;
    border-bottom-color: var(--c-surface) !important;
  }

  /* Calendar and gantt */
  html[data-scheme] .cal .calbody.other-month { background-color: var(--c-bg) !important; }
  html[data-scheme] .cal .calbody.nwday:not(.other-month),
  html[data-scheme] .gantt_hdr.nwday { background-color: var(--c-surface-2) !important; }
  html[data-scheme] .cal .calbody.today { background-color: var(--c-primary-light) !important; }
  html[data-scheme] .gantt_hdr { border-color: var(--c-border-2) !important; background-color: var(--c-surface-2) !important; }
  html[data-scheme]:not(.dark-mode) table.list:not(.odd-even) tbody tr:nth-child(even),
  html[data-scheme]:not(.dark-mode) .even,
  html[data-scheme]:not(.dark-mode) div#activity h3 { background-color: var(--c-surface-2) !important; }

  /* Light schemes: core .box is #f9fafb, form controls are #fff */
  html[data-scheme]:not(.dark-mode) .box { background-color: var(--c-surface-2) !important; color: var(--c-text) !important; }
  html[data-scheme]:not(.dark-mode) input[type=text],
  html[data-scheme]:not(.dark-mode) input[type=email],
  html[data-scheme]:not(.dark-mode) input[type=password],
  html[data-scheme]:not(.dark-mode) input[type=number],
  html[data-scheme]:not(.dark-mode) input[type=search],
  html[data-scheme]:not(.dark-mode) input[type=url],
  html[data-scheme]:not(.dark-mode) input[type=date],
  html[data-scheme]:not(.dark-mode) select,
  html[data-scheme]:not(.dark-mode) textarea { background-color: var(--c-surface) !important; color: var(--c-text) !important; }

  /* Native checkboxes / radios / range follow the accent */
  html[data-scheme] input[type=checkbox],
  html[data-scheme] input[type=radio] { accent-color: var(--c-primary); }
}