/*
 * YouTrack — a Redmine 7 theme inspired by JetBrains YouTrack / Ring UI.
 *
 * Light and dark color schemes. The scheme is chosen per browser by
 * javascripts/theme.js (left navigation → "Оформление") and stored in
 * localStorage; it sets <html data-theme="light|dark"> before the page renders.
 *
 * Built file: edit the sources and run build.py (it inlines the icons and
 * generates the dark Open Color palette).
 */

@import url("/assets/application-c183e617.css");

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --yt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --yt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* JetBrains Int UI light palette, as used by YouTrack */
  --yt-accent: #3369d6;
  --yt-accent-hover: #315fbd;
  --yt-accent-rgb: 51, 105, 214;
  --yt-on-accent: #ffffff;
  --yt-link: #315fbd;
  --yt-link-hover: #ff008c; /* YouTrack: links turn pink on hover */

  --yt-text: #27282e;
  --yt-text-secondary: #6c707e;
  --yt-text-muted: #818594;

  --yt-bg: #ffffff;
  --yt-bg-secondary: #f7f8fa;
  --yt-bg-tertiary: #ebecf0;
  --yt-bg-hover: #edf3ff;
  --yt-bg-selected: #d4e2ff;
  --yt-line: #dfe1e5;
  --yt-border: #d3d5db;
  --yt-border-hover: #a8adbd;
  --yt-code-bg: #f7f8fa;
  --yt-divider: var(--yt-line);
  --yt-card-border: var(--yt-line);

  --yt-nav-bg: #f7f8fa;
  --yt-nav-border: var(--yt-line);
  --yt-nav-text: #27282e;
  --yt-nav-hover: rgba(0, 0, 0, 0.05);
  --yt-nav-active-bg: #d4e2ff;
  --yt-nav-active-text: #27282e;
  --yt-header-bg: #ffffff;

  --yt-success: #208a3c;
  --yt-success-bg: #e8f5eb;
  --yt-success-border: #b5ddc0;
  --yt-error: #c7222d;
  --yt-error-bg: #fdeded;
  --yt-error-border: #f2c3c5;
  --yt-warning: #8f5b00;
  --yt-warning-bg: #fff6e0;
  --yt-warning-border: #f0d89c;

  --yt-prio-lowest: #8fa3b5;
  --yt-prio-default: #59b36b;
  --yt-prio-3: #f2a33a;
  --yt-prio-4: #ec6a2c;
  --yt-prio-highest: #e0383b;

  --yt-shadow-popup: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px #dfe1e5;
  --yt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --yt-focus-ring: 0 0 0 2px rgba(var(--yt-accent-rgb), 0.25);
  --yt-tooltip-bg: #27282e;
  --yt-tooltip-text: #ffffff;
  --yt-radius: 4px;
  --yt-radius-lg: 8px;

  --yt-nav-w: 232px;
  --yt-nav-w-collapsed: 60px;

  /* Redmine's own variables */
  --fonts-main: var(--yt-font);
  --color-current-marker: var(--yt-accent);
  --color-top-menu-background: var(--yt-nav-bg);
  --color-header-background: var(--yt-header-bg);

  color-scheme: light;

  --yt-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6'/%3E%3C/svg%3E");
  --yt-i-my-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1'/%3E%3Cpath d='M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1'/%3E%3Cpath d='M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1'/%3E%3Cpath d='M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1'/%3E%3C/svg%3E");
  --yt-i-projects: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3l0 -5.5'/%3E%3Cpath d='M2 13.5v5.5l5 3'/%3E%3Cpath d='M7 16.545l5 -3.03'/%3E%3Cpath d='M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3l0 -5.5'/%3E%3Cpath d='M12 19l5 3'/%3E%3Cpath d='M17 16.5l5 -3'/%3E%3Cpath d='M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5'/%3E%3Cpath d='M7 5.03v5.455'/%3E%3Cpath d='M12 8l5 -3'/%3E%3C/svg%3E");
  --yt-i-administration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3C/svg%3E");
  --yt-i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
  --yt-i-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2'/%3E%3Cpath d='M21 12h-13l3 -3'/%3E%3Cpath d='M11 15l-3 -3'/%3E%3C/svg%3E");
  --yt-i-register: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M16 19h6'/%3E%3Cpath d='M19 16v6'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4'/%3E%3C/svg%3E");
  --yt-i-generic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4'/%3E%3Cpath d='M14 7l6 0'/%3E%3Cpath d='M17 4l0 6'/%3E%3C/svg%3E");
  --yt-i-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  --yt-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  --yt-i-search-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
  --yt-i-search-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239da0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'/%3E%3Cpath d='M21 21l-6 -6'/%3E%3C/svg%3E");
}

html.yt-nav-collapsed { --yt-nav-w: var(--yt-nav-w-collapsed); }

@media screen {
  html[data-theme="dark"] {
    /* JetBrains Int UI dark palette, as used by YouTrack */
    --yt-accent: #366acf;
    --yt-accent-hover: #3f78e3;
    --yt-accent-rgb: 54, 106, 207;
    --yt-on-accent: #ffffff;
    --yt-link: #99bbff;       /* YouTrack dark: links are light blue, */
    --yt-link-hover: #da74b7; /* and turn pink on hover */

    --yt-text: #dfe1e5;
    --yt-text-secondary: #9da0a8;
    --yt-text-muted: #6f737a;

    --yt-bg: #1e1f22;
    --yt-bg-secondary: #2b2d30;
    --yt-bg-tertiary: #393b40;
    --yt-bg-hover: #2d2f34;
    --yt-bg-selected: #2e436e;
    --yt-line: #393b40;
    --yt-divider: #43454a;
    --yt-card-border: #43454a;
    --yt-border: #6f737a;
    --yt-border-hover: #868a91;
    --yt-code-bg: #2b2d30;

    --yt-nav-bg: #18191b;
    --yt-nav-border: #4e5157;
    --yt-nav-text: #dfe1e5;
    --yt-nav-icon: #8496ad;
    --yt-nav-hover: rgba(255, 255, 255, 0.06);
    --yt-nav-active-bg: #31415e;
    --yt-nav-active-text: #ffffff;
    --yt-header-bg: #1e1f22;

    --yt-success: #5fb865;
    --yt-success-bg: #213025;
    --yt-success-border: #36513b;
    --yt-error: #f0716f;
    --yt-error-bg: #392223;
    --yt-error-border: #6b3436;
    --yt-warning: #e0b75e;
    --yt-warning-bg: #352e1e;
    --yt-warning-border: #63542c;

    --yt-prio-lowest: #7a8ca0;
    --yt-prio-default: #57a65f;
    --yt-prio-3: #e0962f;
    --yt-prio-4: #e2652a;
    --yt-prio-highest: #e5484b;

    --yt-shadow-popup: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 0 1px #43454a;
    --yt-shadow-card: none;
    --yt-focus-ring: 0 0 0 2px rgba(var(--yt-accent-rgb), 0.45);
    --yt-tooltip-bg: #393b40;
    --yt-tooltip-text: #dfe1e5;

    color-scheme: dark;

    /* Open Color, remapped for dark backgrounds: light tints become dark
       tints and dark shades become light ones (see gen_dark_palette.py).
       The *-rgb variants of grays stay dark so that shadows stay shadows. */
    --oc-white: #1e1f22;
  --oc-white-rgb: 30, 31, 34;
  --oc-black: #f0f1f2;
  --oc-gray-0: #2b2d30;
  --oc-gray-1: #313337;
  --oc-gray-2: #393b40;
  --oc-gray-3: #43454a;
  --oc-gray-4: #4e5157;
  --oc-gray-5: #6f737a;
  --oc-gray-6: #8b8f96;
  --oc-gray-7: #b4b8bf;
  --oc-gray-8: #ced0d6;
  --oc-gray-9: #dfe1e5;
  --oc-blue-0: #192b37; --oc-blue-0-rgb: 25, 43, 55;
  --oc-blue-1: #153448; --oc-blue-1-rgb: 21, 52, 72;
  --oc-blue-2: #0a3e5e; --oc-blue-2-rgb: 10, 62, 94;
  --oc-blue-3: #105481; --oc-blue-3-rgb: 16, 84, 129;
  --oc-blue-4: #216ba3; --oc-blue-4-rgb: 33, 107, 163;
  --oc-blue-5: #2f82c8; --oc-blue-5-rgb: 47, 130, 200;
  --oc-blue-6: #4796e4; --oc-blue-6-rgb: 71, 150, 228;
  --oc-blue-7: #65a9f2; --oc-blue-7-rgb: 101, 169, 242;
  --oc-blue-8: #7eb9f9; --oc-blue-8-rgb: 126, 185, 249;
  --oc-blue-9: #a1cbfa; --oc-blue-9-rgb: 161, 203, 250;
  --oc-cyan-0: #0d2e31; --oc-cyan-0-rgb: 13, 46, 49;
  --oc-cyan-1: #03383c; --oc-cyan-1-rgb: 3, 56, 60;
  --oc-cyan-2: #014349; --oc-cyan-2-rgb: 1, 67, 73;
  --oc-cyan-3: #065b64; --oc-cyan-3-rgb: 6, 91, 100;
  --oc-cyan-4: #037480; --oc-cyan-4-rgb: 3, 116, 128;
  --oc-cyan-5: #078d9f; --oc-cyan-5-rgb: 7, 141, 159;
  --oc-cyan-6: #38a2b4; --oc-cyan-6-rgb: 56, 162, 180;
  --oc-cyan-7: #5fb3c4; --oc-cyan-7-rgb: 95, 179, 196;
  --oc-cyan-8: #7cc1d0; --oc-cyan-8-rgb: 124, 193, 208;
  --oc-cyan-9: #a1d1dd; --oc-cyan-9-rgb: 161, 209, 221;
  --oc-grape-0: #2e2533; --oc-grape-0-rgb: 46, 37, 51;
  --oc-grape-1: #3f2446; --oc-grape-1-rgb: 63, 36, 70;
  --oc-grape-2: #502759; --oc-grape-2-rgb: 80, 39, 89;
  --oc-grape-3: #6d337b; --oc-grape-3-rgb: 109, 51, 123;
  --oc-grape-4: #8c419d; --oc-grape-4-rgb: 140, 65, 157;
  --oc-grape-5: #ab50c2; --oc-grape-5-rgb: 171, 80, 194;
  --oc-grape-6: #c264db; --oc-grape-6-rgb: 194, 100, 219;
  --oc-grape-7: #d37ce9; --oc-grape-7-rgb: 211, 124, 233;
  --oc-grape-8: #dd93f1; --oc-grape-8-rgb: 221, 147, 241;
  --oc-grape-9: #e6b1f5; --oc-grape-9-rgb: 230, 177, 245;
  --oc-green-0: #1a2e1f; --oc-green-0-rgb: 26, 46, 31;
  --oc-green-1: #0c3b19; --oc-green-1-rgb: 12, 59, 25;
  --oc-green-2: #02481a; --oc-green-2-rgb: 2, 72, 26;
  --oc-green-3: #0a6125; --oc-green-3-rgb: 10, 97, 37;
  --oc-green-4: #1e7a34; --oc-green-4-rgb: 30, 122, 52;
  --oc-green-5: #2a9540; --oc-green-5-rgb: 42, 149, 64;
  --oc-green-6: #45ab54; --oc-green-6-rgb: 69, 171, 84;
  --oc-green-7: #63bc6d; --oc-green-7-rgb: 99, 188, 109;
  --oc-green-8: #7ec985; --oc-green-8-rgb: 126, 201, 133;
  --oc-green-9: #a3d7a7; --oc-green-9-rgb: 163, 215, 167;
  --oc-indigo-0: #232838; --oc-indigo-0-rgb: 35, 40, 56;
  --oc-indigo-1: #272f49; --oc-indigo-1-rgb: 39, 47, 73;
  --oc-indigo-2: #2e3663; --oc-indigo-2-rgb: 46, 54, 99;
  --oc-indigo-3: #3c498c; --oc-indigo-3-rgb: 60, 73, 140;
  --oc-indigo-4: #4b5fb0; --oc-indigo-4-rgb: 75, 95, 176;
  --oc-indigo-5: #5874dd; --oc-indigo-5-rgb: 88, 116, 221;
  --oc-indigo-6: #6689fc; --oc-indigo-6-rgb: 102, 137, 252;
  --oc-indigo-7: #7e9fff; --oc-indigo-7-rgb: 126, 159, 255;
  --oc-indigo-8: #95b1fe; --oc-indigo-8-rgb: 149, 177, 254;
  --oc-indigo-9: #b1c6fe; --oc-indigo-9-rgb: 177, 198, 254;
  --oc-lime-0: #252d0b; --oc-lime-0-rgb: 37, 45, 11;
  --oc-lime-1: #293600; --oc-lime-1-rgb: 41, 54, 0;
  --oc-lime-2: #314200; --oc-lime-2-rgb: 49, 66, 0;
  --oc-lime-3: #415a01; --oc-lime-3-rgb: 65, 90, 1;
  --oc-lime-4: #507302; --oc-lime-4-rgb: 80, 115, 2;
  --oc-lime-5: #5d8e02; --oc-lime-5-rgb: 93, 142, 2;
  --oc-lime-6: #6ca61e; --oc-lime-6-rgb: 108, 166, 30;
  --oc-lime-7: #81b84b; --oc-lime-7-rgb: 129, 184, 75;
  --oc-lime-8: #93c668; --oc-lime-8-rgb: 147, 198, 104;
  --oc-lime-9: #b0d592; --oc-lime-9-rgb: 176, 213, 146;
  --oc-orange-0: #332615; --oc-orange-0-rgb: 51, 38, 21;
  --oc-orange-1: #422b09; --oc-orange-1-rgb: 66, 43, 9;
  --oc-orange-2: #523301; --oc-orange-2-rgb: 82, 51, 1;
  --oc-orange-3: #704500; --oc-orange-3-rgb: 112, 69, 0;
  --oc-orange-4: #925605; --oc-orange-4-rgb: 146, 86, 5;
  --oc-orange-5: #ba6401; --oc-orange-5-rgb: 186, 100, 1;
  --oc-orange-6: #da7125; --oc-orange-6-rgb: 218, 113, 37;
  --oc-orange-7: #f3804a; --oc-orange-7-rgb: 243, 128, 74;
  --oc-orange-8: #ff9369; --oc-orange-8-rgb: 255, 147, 105;
  --oc-orange-9: #ffb29a; --oc-orange-9-rgb: 255, 178, 154;
  --oc-pink-0: #34232b; --oc-pink-0-rgb: 52, 35, 43;
  --oc-pink-1: #442533; --oc-pink-1-rgb: 68, 37, 51;
  --oc-pink-2: #57293c; --oc-pink-2-rgb: 87, 41, 60;
  --oc-pink-3: #773750; --oc-pink-3-rgb: 119, 55, 80;
  --oc-pink-4: #9a4565; --oc-pink-4-rgb: 154, 69, 101;
  --oc-pink-5: #c25077; --oc-pink-5-rgb: 194, 80, 119;
  --oc-pink-6: #e25f88; --oc-pink-6-rgb: 226, 95, 136;
  --oc-pink-7: #f57497; --oc-pink-7-rgb: 245, 116, 151;
  --oc-pink-8: #fe8ca6; --oc-pink-8-rgb: 254, 140, 166;
  --oc-pink-9: #feadbd; --oc-pink-9-rgb: 254, 173, 189;
  --oc-red-0: #312626; --oc-red-0-rgb: 49, 38, 38;
  --oc-red-1: #422829; --oc-red-1-rgb: 66, 40, 41;
  --oc-red-2: #562c2e; --oc-red-2-rgb: 86, 44, 46;
  --oc-red-3: #793a3c; --oc-red-3-rgb: 121, 58, 60;
  --oc-red-4: #9e4748; --oc-red-4-rgb: 158, 71, 72;
  --oc-red-5: #c85051; --oc-red-5-rgb: 200, 80, 81;
  --oc-red-6: #e95e5a; --oc-red-6-rgb: 233, 94, 90;
  --oc-red-7: #fe736a; --oc-red-7-rgb: 254, 115, 106;
  --oc-red-8: #fe9186; --oc-red-8-rgb: 254, 145, 134;
  --oc-red-9: #feb0a7; --oc-red-9-rgb: 254, 176, 167;
  --oc-teal-0: #102f28; --oc-teal-0-rgb: 16, 47, 40;
  --oc-teal-1: #013a2d; --oc-teal-1-rgb: 1, 58, 45;
  --oc-teal-2: #014537; --oc-teal-2-rgb: 1, 69, 55;
  --oc-teal-3: #025e49; --oc-teal-3-rgb: 2, 94, 73;
  --oc-teal-4: #06785b; --oc-teal-4-rgb: 6, 120, 91;
  --oc-teal-5: #00946d; --oc-teal-5-rgb: 0, 148, 109;
  --oc-teal-6: #33a97f; --oc-teal-6-rgb: 51, 169, 127;
  --oc-teal-7: #5cba93; --oc-teal-7-rgb: 92, 186, 147;
  --oc-teal-8: #7ac7a5; --oc-teal-8-rgb: 122, 199, 165;
  --oc-teal-9: #a0d5bc; --oc-teal-9-rgb: 160, 213, 188;
  --oc-violet-0: #2a2637; --oc-violet-0-rgb: 42, 38, 55;
  --oc-violet-1: #35284c; --oc-violet-1-rgb: 53, 40, 76;
  --oc-violet-2: #402e63; --oc-violet-2-rgb: 64, 46, 99;
  --oc-violet-3: #553e8b; --oc-violet-3-rgb: 85, 62, 139;
  --oc-violet-4: #6a50b4; --oc-violet-4-rgb: 106, 80, 180;
  --oc-violet-5: #7f63e1; --oc-violet-5-rgb: 127, 99, 225;
  --oc-violet-6: #9178ff; --oc-violet-6-rgb: 145, 120, 255;
  --oc-violet-7: #a193fe; --oc-violet-7-rgb: 161, 147, 254;
  --oc-violet-8: #b0a7ff; --oc-violet-8-rgb: 176, 167, 255;
  --oc-violet-9: #c4bffe; --oc-violet-9-rgb: 196, 191, 254;
  --oc-yellow-0: #312900; --oc-yellow-0-rgb: 49, 41, 0;
  --oc-yellow-1: #393002; --oc-yellow-1-rgb: 57, 48, 2;
  --oc-yellow-2: #453a02; --oc-yellow-2-rgb: 69, 58, 2;
  --oc-yellow-3: #5f4f04; --oc-yellow-3-rgb: 95, 79, 4;
  --oc-yellow-4: #7b6301; --oc-yellow-4-rgb: 123, 99, 1;
  --oc-yellow-5: #9c7703; --oc-yellow-5-rgb: 156, 119, 3;
  --oc-yellow-6: #bf8606; --oc-yellow-6-rgb: 191, 134, 6;
  --oc-yellow-7: #d89538; --oc-yellow-7-rgb: 216, 149, 56;
  --oc-yellow-8: #eda15a; --oc-yellow-8-rgb: 237, 161, 90;
  --oc-yellow-9: #fbb687; --oc-yellow-9-rgb: 251, 182, 135;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html, body { background-color: var(--yt-bg); }
body {
  color: var(--yt-text);
  font-family: var(--yt-font);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input, select, textarea, button { font-family: inherit; }
pre, code, kbd, samp, tt { font-family: var(--yt-font-mono); }

h1, h2, h3, h4, h5, h6 { color: var(--yt-text); }
#content h1 { color: var(--yt-text); }
h2, .wiki h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h3, .wiki h2 { font-size: 1.125rem; font-weight: 600; }
h4 { border-block-end-color: var(--yt-line); }
.wiki h3 { font-size: 1rem; }
.wiki h6 { color: var(--yt-text-secondary); }

a, a:link, a:visited { color: var(--yt-link); }
a:hover, a:active { color: var(--yt-link-hover); text-decoration: none; } /* YouTrack: color only, no underline */
a.issue.closed, a.issue.closed:link, a.issue.closed:visited,
a.project.closed, a.project.closed:link, a.project.closed:visited,
a.user.locked, a.user.locked:link, a.user.locked:visited { color: var(--yt-text-muted); }
a.user.user-mention { background-color: rgba(var(--yt-accent-rgb), 0.12); border-radius: 3px; padding: 0 0.2em; }

hr, #sidebar hr { background: var(--yt-line); }
abbr[title], span.field-description[title] { border-block-end-color: var(--yt-text-muted); }

#wrapper { background: var(--yt-bg); }
#main { background: var(--yt-bg); }
#content {
  background-color: var(--yt-bg);
  padding-block: 20px 24px;
  padding-inline: 28px;
}

#footer {
  background: var(--yt-bg);
  border-block-start: 1px solid var(--yt-line);
  color: var(--yt-text-muted);
  font-size: 0.75rem;
  padding: 10px;
}
#footer a { color: var(--yt-text-secondary); }

svg.icon-svg { stroke: var(--yt-text-secondary); }
svg.icon-svg-filled { fill: var(--yt-text-secondary); }
a.icon .icon-svg, a.icon-only .icon-svg, span.icon-actions .icon-svg { stroke: var(--yt-link); }
a.icon:hover .icon-svg, a.icon-only:hover .icon-svg, span.icon-actions:hover .icon-svg { stroke: var(--yt-link-hover); }
a.icon .icon-svg-filled, a.icon-only .icon-svg-filled { fill: var(--yt-link); stroke: none; }
a.icon:hover .icon-svg-filled, a.icon-only:hover .icon-svg-filled { fill: var(--yt-link-hover); }
.icon-ok svg.icon-svg, span.icon-checked:has(:not(a svg.icon-svg)) svg.icon-svg { stroke: var(--yt-success); }
.icon-error svg.icon-svg { stroke: var(--yt-error); }
.icon-warning svg.icon-svg { stroke: var(--yt-warning); }

.avatar { border-radius: 50%; }
div.avatar-with-child > .avatar:nth-child(2) { border-radius: 50%; border-color: var(--yt-bg); }

/* ==========================================================================
   3. Left navigation (desktop) — built from Redmine's #top-menu
   ========================================================================== */

@media screen and (min-width: 900px) {
  #wrapper { margin-inline-start: var(--yt-nav-w); }

  nav.top-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    box-sizing: border-box;
    inline-size: var(--yt-nav-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding-block: 12px;
    padding-inline: 10px;
    background: var(--yt-nav-bg);
    border-inline-end: 1px solid var(--yt-nav-border);
    color: var(--yt-nav-text);
    font-size: 0.875rem;
  }
  nav.top-menu > .yt-brand { order: 0; }
  nav.top-menu > .general-menu { order: 1; flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overflow-x: hidden; }
  nav.top-menu > .yt-nav-tools { order: 2; }
  nav.top-menu > .profile-menu { order: 3; }

  nav.top-menu .top-menu__links ul { flex-direction: column; gap: 2px; }

  nav.top-menu .top-menu__links a,
  nav.top-menu .top-menu__links a:link,
  nav.top-menu .top-menu__links a:visited,
  nav.top-menu .yt-nav-item,
  nav.top-menu #account .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 36px;
    padding-block: 6px;
    padding-inline: 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--yt-nav-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 20px;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
  }
  nav.top-menu .top-menu__links a:hover,
  nav.top-menu .yt-nav-item:hover,
  nav.top-menu .yt-nav-item[aria-expanded="true"],
  nav.top-menu #account .dropdown-trigger:hover {
    background-color: var(--yt-nav-hover);
    color: var(--yt-text);
    text-decoration: none;
    border-radius: 6px;
  }
  nav.top-menu .top-menu__links a.yt-active,
  nav.top-menu .top-menu__links a.selected {
    background-color: var(--yt-nav-active-bg);
    color: var(--yt-nav-active-text);
    font-weight: 600;
  }
  nav.top-menu .top-menu__links a.yt-active::before,
  nav.top-menu .top-menu__links a.selected::before { background-color: currentColor; }

  /* menu icons (CSS masks, so they appear before any script runs) */
  nav.top-menu .top-menu__links a::before {
    content: "";
    flex: 0 0 20px;
    block-size: 20px;
    background-color: var(--yt-nav-icon, currentColor);
    -webkit-mask: var(--yt-icon, var(--yt-i-generic)) center / 20px 20px no-repeat;
    mask: var(--yt-icon, var(--yt-i-generic)) center / 20px 20px no-repeat;
    opacity: 0.9;
  }
  nav.top-menu a.home { --yt-icon: var(--yt-i-home); }
  nav.top-menu a.my-page { --yt-icon: var(--yt-i-my-page); }
  nav.top-menu a.projects { --yt-icon: var(--yt-i-projects); }
  nav.top-menu a.administration { --yt-icon: var(--yt-i-administration); }
  nav.top-menu a.help { --yt-icon: var(--yt-i-help); }
  nav.top-menu a.spent-time { --yt-icon: var(--yt-i-time); }
  nav.top-menu a.login { --yt-icon: var(--yt-i-login); }
  nav.top-menu a.register { --yt-icon: var(--yt-i-register); }

  nav.top-menu .yt-nav-item svg, nav.top-menu .yt-brand svg { flex: 0 0 20px; }

  /* account (avatar) at the bottom; its dropdown opens upwards */
  nav.top-menu .profile-menu { display: block; min-block-size: 0; border-block-start: 1px solid var(--yt-nav-border); padding-block-start: 6px; }
  nav.top-menu #account.dropdown { display: block; position: relative; }
  nav.top-menu #account .dropdown-trigger { gap: 10px; padding-inline: 8px; }
  nav.top-menu #account .dropdown-trigger .avatar { flex: 0 0 auto; inline-size: 24px; block-size: 24px; }
  nav.top-menu #account .dropdown-trigger .yt-user-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
  nav.top-menu #account .dropdown-trigger > svg { flex: 0 0 auto; transform: rotate(180deg); }
  nav.top-menu #account .dropdown-trigger .icon-svg { stroke: var(--yt-text-secondary); }
  nav.top-menu #account .dropdown-content {
    inset-block: auto calc(100% + 6px);
    inset-inline: 0 auto;
    min-inline-size: 220px;
    margin: 0;
  }

  /* collapsed navigation: icons only */
  html.yt-nav-collapsed nav.top-menu { padding-inline: 8px; }
  html.yt-nav-collapsed nav.top-menu .top-menu__links a,
  html.yt-nav-collapsed nav.top-menu .yt-nav-item,
  html.yt-nav-collapsed nav.top-menu #account .dropdown-trigger,
  html.yt-nav-collapsed nav.top-menu .yt-brand {
    justify-content: center;
    gap: 0;
    padding-inline: 0;
    font-size: 0;
  }
  html.yt-nav-collapsed nav.top-menu .yt-label,
  html.yt-nav-collapsed nav.top-menu .yt-user-name,
  html.yt-nav-collapsed nav.top-menu #account .dropdown-trigger > svg { display: none; }

  /* dark scheme: glow under the selected item (colors sampled from YouTrack);
     theme.js sets --yt-glow-y to the item's vertical center */
  html[data-theme="dark"] nav.top-menu.yt-has-active {
    background:
      radial-gradient(circle 230px at 0 var(--yt-glow-y),
        #102356 0%, #102352 35%, #11224c 50%, #141e36 67%, #171a22 87%, #18191b 100%)
      var(--yt-nav-bg);
  }

  /* fixed issue header must not slide under the navigation */
  div#sticky-issue-header { inset-inline-start: var(--yt-nav-w); }

  .yt-mobile-only { display: none !important; }
}

/* brand */
.yt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 40px;
  padding-inline: 8px;
  margin-block-end: 6px;
  border-radius: 6px;
  color: var(--yt-text) !important;
  font-size: 0.875rem; /* "Goodwin Bug Tracker" fits the expanded panel */
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
}
/* logo: images/logo.png (replace the file and restart Redmine to change it);
   the letter theme.js puts inside is hidden */
.yt-brand .yt-logo {
  flex: 0 0 28px;
  block-size: 28px;
  background: url("/assets/themes/youtrack/logo-d53158d4.png") center / contain no-repeat;
  color: transparent;
  font-size: 0;
}
.yt-brand .yt-label { overflow: hidden; text-overflow: ellipsis; }

/* tools: theme switcher, collapse button */
.yt-nav-tools { display: flex; flex-direction: column; gap: 2px; position: relative; }
.yt-nav-item .yt-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.yt-nav-item svg, .yt-popover svg, .yt-mobile-theme-btn svg {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the theme button wraps its icon in a span: center it instead of sitting on the text baseline */
.yt-icon { display: inline-flex; align-items: center; justify-content: center; }
.yt-icon svg { display: block; }
.yt-nav-item .yt-icon { flex: 0 0 20px; block-size: 20px; }

.yt-popover {
  position: absolute;
  z-index: 1100;
  min-inline-size: 210px;
  padding: 4px;
  background: var(--yt-bg);
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-popup);
  color: var(--yt-text);
  font-size: 0.875rem;
}
.yt-popover[hidden] { display: none; }
.yt-popover .yt-popover-title {
  padding-block: 6px 4px;
  padding-inline: 10px;
  color: var(--yt-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.yt-popover button {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 34px;
  margin: 0;
  padding-block: 6px;
  padding-inline: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--yt-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.yt-popover button:hover, .yt-popover button:focus-visible { background: var(--yt-bg-hover); outline: none; }
.yt-popover button .yt-check { margin-inline-start: auto; visibility: hidden; color: var(--yt-accent); }
.yt-popover button[aria-checked="true"] { font-weight: 600; }
.yt-popover button[aria-checked="true"] .yt-check { visibility: visible; }
nav.top-menu .yt-popover { inset-inline-start: calc(100% + 12px); inset-block-end: 0; }

/* ==========================================================================
   4. Header & project menu
   ========================================================================== */

#header {
  background: var(--yt-header-bg);
  color: var(--yt-text);
  padding-block: 14px 0;
  padding-inline: 28px;
  border-block-end: 1px solid var(--yt-divider);
}
body.has-main-menu #header { padding-block-end: 0; }
body:not(.has-main-menu) #header { padding-block-end: 12px; }
#header a, #header a:link, #header a:visited { color: var(--yt-text-secondary); }
#header a:hover { color: var(--yt-link); text-decoration: none; }
#header h1 {
  color: var(--yt-text);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-block-size: 2.25rem;
}
#header h1 .breadcrumbs { font-size: 0.75rem; letter-spacing: 0; margin-block-end: 2px; color: var(--yt-text-secondary); }
#header h1 .breadcrumbs a { color: var(--yt-text-secondary); }

#quick-search { min-block-size: 2.25rem; gap: 8px; }
#quick-search form label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#quick-search #q {
  inline-size: 220px;
  block-size: 32px;
  padding-inline: 32px 10px;
  border: 1px solid var(--yt-border);
  border-radius: 6px;
  background: var(--yt-bg) var(--yt-i-search-light) no-repeat 9px 50% / 16px 16px;
  color: var(--yt-text);
  transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s;
}
#quick-search #q:hover { border-color: var(--yt-border-hover); }
#quick-search #q:focus { background-color: var(--yt-bg); border-color: var(--yt-accent); box-shadow: var(--yt-focus-ring); }

#project-jump.drdn { inline-size: 220px; }
#project-jump .drdn-trigger {
  block-size: 32px;
  padding-block: 0;
  padding-inline: 10px 28px;
  line-height: 30px;
  border: 1px solid var(--yt-border);
  border-radius: 6px;
  color: var(--yt-text);
  background: var(--yt-bg) url("/assets/chevron-down-f08c7c57.svg") no-repeat calc(100% - 6px) 50%;
}
#project-jump .drdn-trigger:hover { border-color: var(--yt-border-hover); }
#project-jump.expanded .drdn-trigger { border-color: var(--yt-accent); background-color: var(--yt-bg); background-image: url("/assets/chevron-down-f08c7c57.svg"); }

#main-menu {
  position: relative;
  inset: auto;
  overflow-x: clip;
  overflow-y: visible;
  margin-block: 6px 0;
  margin-inline: -10px;
  padding: 0;
  background: transparent;
}
#main-menu ul { min-block-size: 40px; gap: 2px; }
#main-menu li a {
  padding-block: 10px;
  padding-inline: 10px;
  color: var(--yt-text-secondary);
  font-size: 0.875rem;
  line-height: 20px;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.12s ease, box-shadow 0.12s ease;
}
#main-menu li a:hover {
  background-color: transparent;
  color: var(--yt-text);
  box-shadow: inset 0 -2px 0 var(--yt-line);
  text-decoration: none;
}
#main-menu li a.selected, #main-menu li a.selected:hover {
  background-color: transparent;
  color: var(--yt-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--yt-accent);
}
#main-menu li:has(a#new-object) { padding-inline-end: 6px; }
#main-menu li a.new-object, #main-menu li a.new-object:hover {
  min-inline-size: 28px;
  box-sizing: border-box;
  padding-block: 4px;
  padding-inline: 8px;
  margin-block: 0;
  border: 0;
  border-radius: var(--yt-radius);
  background-color: var(--yt-accent);
  color: var(--yt-on-accent) !important;
  font-weight: 700;
  text-align: center;
  box-shadow: none;
}
#main-menu li a.new-object:hover { background-color: var(--yt-accent-hover); }
#main-menu .menu-children {
  background-color: var(--yt-bg);
  border: 0;
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-popup);
  padding: 4px;
  min-inline-size: 180px;
}
#main-menu .menu-children li a, #main-menu .menu-children li a:hover {
  background-color: transparent;
  color: var(--yt-text) !important;
  border-radius: 6px;
  padding-block: 6px;
  padding-inline: 10px;
  box-shadow: none;
}
#main-menu .menu-children li a:hover { background-color: var(--yt-bg-hover); }
#main-menu .tabs-buttons {
  inset-inline-end: 0;
  block-size: 100%;
  inline-size: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-inline: 12px 10px;
  background: linear-gradient(to right, transparent, var(--yt-header-bg) 14px);
  border: 0;
}
[dir="rtl"] #main-menu .tabs-buttons { background: linear-gradient(to left, transparent, var(--yt-header-bg) 14px); }
#main-menu .tabs-buttons button { position: static; inline-size: 24px; block-size: 24px; background: var(--yt-bg); border: 1px solid var(--yt-line); border-radius: var(--yt-radius); }
#main-menu .tabs-buttons button:hover { background: var(--yt-bg-hover); }

/* ==========================================================================
   5. Sidebar
   ========================================================================== */

#sidebar {
  background: var(--yt-bg-secondary);
  border-inline-start: 1px solid var(--yt-line);
  color: var(--yt-text);
  padding-block: 12px 16px;
  padding-inline: 20px 14px;
}
#sidebar h3 {
  margin-block: 20px 6px;
  color: var(--yt-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#sidebar h3:first-child, #sidebar-wrapper > h3:first-child { margin-block-start: 6px; }
#sidebar ul li { line-height: 1.6; }
#sidebar a.selected, #sidebar a.selected:hover {
  display: inline-block;
  line-height: 1.6;
  padding-block: 1px;
  padding-inline: 8px;
  margin-inline-start: -8px;
  border-radius: var(--yt-radius);
  background-color: var(--yt-bg-selected);
  color: var(--yt-nav-active-text);
  box-shadow: none;
  font-weight: 600;
}
#sidebar a.selected svg.icon-svg { stroke: var(--yt-nav-active-text) !important; }
#sidebar-switch-button svg { stroke: var(--yt-text-secondary); }
#sidebar-switch-button:hover { background-color: var(--yt-bg-tertiary); border-radius: var(--yt-radius); }
#sidebar .contextual a { color: var(--yt-link); }

/* ==========================================================================
   6. Forms & buttons
   ========================================================================== */

input, select, textarea, button {
  color: var(--yt-text);
  background-color: var(--yt-bg);
  border-color: var(--yt-border);
  border-radius: var(--yt-radius);
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="tel"],
input:not([type]), select, textarea {
  border: 1px solid var(--yt-border);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="tel"],
input:not([type]), select { min-block-size: 28px; }
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="url"]:hover,
input[type="number"]:hover, input[type="date"]:hover, input[type="search"]:hover,
input:not([type]):hover, select:hover, textarea:hover { border-color: var(--yt-border-hover); }

input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="date"]:focus, input[type="date"]:active,
input[type="number"]:focus, input[type="number"]:active,
input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input:not([type]):focus,
select:focus, select:active,
textarea:focus, textarea:active {
  border: 1px solid var(--yt-accent);
  box-shadow: var(--yt-focus-ring);
  outline: none;
}
select { background-color: var(--yt-bg); padding-inline-end: 24px; background-position: calc(100% - 4px) 50%; }
[dir="rtl"] select { background-position: 4px 50%; }
select[multiple=multiple], select[multiple] { background: var(--yt-bg); padding-inline-end: 4px; }
textarea { line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--yt-accent); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--yt-bg-tertiary); color: var(--yt-text-muted); }
::placeholder { color: var(--yt-text-muted); opacity: 1; }
input.autocomplete { background-color: var(--yt-bg); }

/* primary buttons */
input[type="submit"], button[type="submit"] {
  block-size: 28px;
  padding-block: 0;
  padding-inline: 14px;
  border: 1px solid var(--yt-accent);
  border-radius: var(--yt-radius);
  background-color: var(--yt-accent);
  color: var(--yt-on-accent);
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--yt-accent-hover); border-color: var(--yt-accent-hover); }
input[type="submit"]:focus-visible, button[type="submit"]:focus-visible { outline: none; box-shadow: var(--yt-focus-ring); }

/* secondary buttons (also every submit after the first one in a row) */
input[type="button"], input[type="reset"], button[type="button"]:where(:not([class*="jstb_"], [class*="yt-"], .ui-button, .tab-left, .tab-right)),
input[type="submit"] ~ input[type="submit"], #list-definition .buttons button {
  block-size: 28px;
  padding-block: 0;
  padding-inline: 14px;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius);
  background-color: var(--yt-bg);
  color: var(--yt-text);
  font-weight: 500;
  cursor: pointer;
}
input[type="button"]:hover, input[type="reset"]:hover, button[type="button"]:where(:not([class*="jstb_"], [class*="yt-"], .ui-button, .tab-left, .tab-right)):hover,
input[type="submit"] ~ input[type="submit"]:hover, #list-definition .buttons button:hover {
  background-color: var(--yt-bg-hover);
  border-color: var(--yt-border-hover);
}
#list-definition .buttons button { inline-size: 35px; padding-inline: 0; }
input[type="file"]::file-selector-button {
  block-size: 28px;
  margin-inline-end: 10px;
  padding-inline: 12px;
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius);
  background: var(--yt-bg);
  color: var(--yt-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--yt-bg-hover); border-color: var(--yt-border-hover); }
input[type="file"] { color: var(--yt-text-secondary); }

fieldset {
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
}
fieldset.collapsible { border-width: 1px 0 0; border-radius: 0; }
legend { color: var(--yt-text); font-weight: 600; padding-inline: 4px; }
fieldset.collapsible > legend { padding-inline-start: 0; color: var(--yt-text-secondary); }
fieldset.collapsible > legend:hover { color: var(--yt-text); }

.tabular label { color: var(--yt-text); font-weight: 500; }
.tabular label.error { color: var(--yt-error); }
span.required { color: var(--yt-error); }
em.info { color: var(--yt-text-secondary); }

.check_box_group { background: var(--yt-bg); border-color: var(--yt-border); }
.attachments_fields input.filename, #existing-attachments .filename { color: var(--yt-text-secondary); }

/* ==========================================================================
   7. Tables
   ========================================================================== */

table.list, .table-list {
  font-size: 0.8125rem;
  border-block: 0;
}
table.list th, .table-list-header {
  background-color: var(--yt-bg);
  color: var(--yt-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding-block: 8px;
  padding-inline: 8px;
  border-block-end: 1px solid var(--yt-line);
}
table.list th a, table.list th a:link, table.list th a:visited { color: var(--yt-text-secondary); }
table.list th a:hover { color: var(--yt-text); text-decoration: none; }
table.list td {
  padding-block: 7px;
  padding-inline: 8px;
  border-block-start: 1px solid var(--yt-line);
}
table.list tbody tr:last-child td { border-block-end: 1px solid var(--yt-line); }
table.list td.checkbox { padding-inline: 8px 0; }

/* no zebra stripes; hover highlights the row */
.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even,
table.list:not(.odd-even) tbody tr:nth-child(odd), .odd,
table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: transparent; }
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color: var(--yt-bg-hover); }
table.list tbody tr.group:hover { background-color: transparent; }

tr.group td {
  padding-block: 16px 6px;
  border-block-end: 1px solid var(--yt-line);
  background-color: transparent;
  font-size: 0.875rem;
}
tr.group span.name { font-weight: 600; }
tr.group span.totals, tr.group a.toggle-all { color: var(--yt-text-muted); }
tr.group span.totals .value { color: var(--yt-text-secondary); }

/* issue lists: left-aligned like YouTrack */
table.list.issues td, table.list.issues th,
table.list.time-entries td, table.list.time-entries th { text-align: start; }
table.list.issues td.checkbox, table.list.issues td.buttons { text-align: center; }
table.list.issues td.estimated_hours, table.list.issues td.total_estimated_hours,
table.list.issues td.estimated_remaining_hours, table.list.issues td.spent_hours,
table.list.issues td.total_spent_hours, table.list.time-entries td.hours { text-align: right; }
table.list.issues td.done_ratio table.progress { margin-inline-start: 0; }
table.list.issues td.id { inline-size: 1%; white-space: nowrap; }
table.list.issues td.id a { font-weight: 500; }
table.list.issues td.subject a, table.list.issues td.subject a:link, table.list.issues td.subject a:visited { color: var(--yt-text); }
table.list.issues td.subject a:hover { color: var(--yt-link); }
table.list.issues tr.closed td.id a { text-decoration: line-through; color: var(--yt-text-muted); }
table.list.issues tr.closed td.subject a { color: var(--yt-text-secondary); }
table.list.issues td.status, table.list.issues td.tracker, table.list.issues td.updated_on,
table.list.issues td.created_on, table.list.issues td.start_date { color: var(--yt-text-secondary); }
table.list tr.overdue:not(.context-menu-selection) td.due_date { color: var(--yt-error); font-weight: 500; }
table.issues td.block_column { color: var(--yt-text-secondary); }

/* priority: colored stripe on the first cell and a dot before the name.
   Redmine marks issues with priority-<position name>: lowest, low2.., default,
   ..high3, high2, highest (high2 is the second highest). */
.issue { --yt-prio: transparent; }
.issue[class*="priority-low"] { --yt-prio: var(--yt-prio-lowest); }
.issue.priority-default { --yt-prio: var(--yt-prio-default); }
.issue[class*="priority-high"] { --yt-prio: var(--yt-prio-3); }
.issue.priority-high2 { --yt-prio: var(--yt-prio-4); }
.issue.priority-highest { --yt-prio: var(--yt-prio-highest); }
table.list.issues tr.issue > td:first-child { box-shadow: inset 3px 0 0 var(--yt-prio); }
table.list.issues td.priority { white-space: nowrap; }
table.list.issues td.priority::before {
  content: "";
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 7px;
  border-radius: 2px;
  background: var(--yt-prio);
  vertical-align: 1px;
}

tr.project.closed, tr.project.archived, tr.project.closed a, tr.project.archived a,
tr.user.locked, tr.user.registered, tr.user.locked a, tr.user.registered a,
tr.version.closed, tr.version.closed a { color: var(--yt-text-muted); }
table#time-report tbody tr.total, table.issue-report tr.total { background-color: var(--yt-bg-secondary); border-block-start-color: var(--yt-line); }

/* selection from the context menu: light blue, text keeps its color */
html .context-menu-selection, html .context-menu-selection:hover {
  background-color: var(--yt-bg-selected) !important;
  color: var(--yt-text) !important;
}
html .context-menu-selection a, html .context-menu-selection a:hover { color: var(--yt-link) !important; }
html table.list.issues tr.context-menu-selection td.subject a { color: var(--yt-text) !important; }
html .context-menu-selection svg.icon-svg { stroke: var(--yt-link) !important; }

/* pagination */
.pagination ul.pages li {
  border: 0;
  border-radius: var(--yt-radius);
  margin-inline-end: 2px;
  line-height: 28px;
}
.pagination ul.pages li:first-child, .pagination ul.pages li:last-child { border-radius: var(--yt-radius); }
.pagination ul.pages li a, .pagination ul.pages li span { display: inline-block; padding-block: 0; padding-inline: 10px; border-radius: var(--yt-radius); }
.pagination ul.pages li.page:hover { background-color: var(--yt-bg-hover); }
.pagination ul.pages li.current { background-color: var(--yt-accent); color: var(--yt-on-accent); font-weight: 600; }
span.pagination { color: var(--yt-text-secondary); }

/* progress bars */
table.progress td { block-size: 6px; }
table.list table.progress td, table.list table.progress td:first-child { padding: 0; border: 0; }
table.progress td.closed { background: var(--yt-success); }
table.progress td.done { background: color-mix(in srgb, var(--yt-success) 55%, var(--yt-bg)); }
table.progress td.todo { background: var(--yt-bg-tertiary); }
table.progress td:first-child { border-start-start-radius: 3px; border-end-start-radius: 3px; }
table.progress td:last-child { border-start-end-radius: 3px; border-end-end-radius: 3px; }
.version-overview table.progress td { block-size: 8px; }
p.percent, p.progress-info { color: var(--yt-text-secondary); }

/* ==========================================================================
   8. Issue page
   ========================================================================== */

.controller-issues.action-show #content > h2 {
  color: var(--yt-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-block-end: 6px;
}
div.issue {
  background: transparent;
  padding: 0;
  margin-block-end: 16px;
  border-radius: 0;
}
div.issue .subject h3 {
  color: var(--yt-text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
div.issue div.subject p, div.issue p.author { color: var(--yt-text-secondary); }
div.issue .next-prev-links { color: var(--yt-text-secondary); }
div.issue .attributes {
  margin-block-start: 16px;
  padding-block: 12px;
  padding-inline: 16px;
  background: var(--yt-bg-secondary);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
}
div.issue .attributes .attribute { min-block-size: 1.9em; }
div.issue .attributes .attribute .label { color: var(--yt-text-secondary); font-weight: 400; }
div.issue .attributes .attribute .value { color: var(--yt-text); }
div.issue.details > hr { margin-block: 18px; }
div.issue .description > .contextual + p strong, div.issue p strong:only-child { color: var(--yt-text); }
div.issue.overdue .due-date .value { color: var(--yt-error); }
div.issue.details .attribute.priority .value::before {
  content: "";
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-end: 7px;
  border-radius: 2px;
  background: var(--yt-prio);
  vertical-align: 1px;
}
div#sticky-issue-header {
  background-color: var(--yt-bg);
  border-block-end: 1px solid var(--yt-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding-block: 10px;
  padding-inline: 28px;
}

#history > h3, #issue_tree > p strong, #relations > p strong { color: var(--yt-text); }
.journals h4.journal-header {
  background-color: transparent;
  border-block-start: 1px solid var(--yt-line);
  padding-block: 12px 6px;
  padding-inline: 0;
  font-size: 0.8125rem;
  font-weight: 400;
}
.journals h4.journal-header a.user, .journals h4.journal-header .journal-meta > a.user { color: var(--yt-text); font-weight: 600; }
.journals h4.journal-header .update-info { color: var(--yt-text-secondary); }
.journals .journal-meta .journal-link { color: var(--yt-text-muted); }
.journals div:target h4.journal-header { background-color: var(--yt-bg-hover); border-radius: var(--yt-radius); padding-inline: 8px; }
.journals .journal-content { padding-inline-start: 34px; }
.journals .journal-details, ul.revision-info { color: var(--yt-text-secondary); font-size: 0.8125rem; }
.journals .journal-details a, ul.revision-info a { color: var(--yt-link); }
.journals .private-notes { border-inline-start-color: var(--yt-error); }

.badge { border-radius: 3px; font-weight: 600; letter-spacing: 0.02em; }
.badge-count { background: var(--yt-accent); color: var(--yt-on-accent); }
.badge-issues-count { background: var(--yt-bg-tertiary); color: var(--yt-text-secondary); }
.badge-status-open { color: var(--yt-link); border-color: currentColor; }
.badge-status-closed { color: var(--yt-success); border-color: currentColor; }
.badge-status-locked { color: var(--yt-text-secondary); border-color: currentColor; }

/* ==========================================================================
   9. Tabs, boxes, messages
   ========================================================================== */

#content .tabs ul { border-block-end: 1px solid var(--yt-line); padding-inline-start: 0; }
#content .tabs ul li { margin-inline-end: 2px; }
#content .tabs ul li a, #content .tabs ul li a:hover {
  padding-block: 8px;
  padding-inline: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yt-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}
#content .tabs ul li a:hover { color: var(--yt-text); box-shadow: inset 0 -2px 0 var(--yt-line); }
#content .tabs ul li a.selected, #content .tabs ul li a.selected:hover {
  border: 0;
  background: transparent;
  color: var(--yt-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--yt-accent);
}
div.tabs-buttons { background: var(--yt-bg); border-block-end-color: var(--yt-line); }
button.tab-left, button.tab-right { background-color: var(--yt-bg); border-color: var(--yt-line); }
button.tab-left:hover, button.tab-right:hover { background-color: var(--yt-bg-hover); }
button.tab-left.disabled, button.tab-right.disabled { background-color: var(--yt-bg-tertiary); }

.box {
  background-color: var(--yt-bg-secondary);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  color: var(--yt-text);
  padding-block: 12px;
  padding-inline: 16px;
}

#errorExplanation, div.flash, .nodata, .warning, .conflict {
  border-radius: var(--yt-radius-lg);
  font-size: 0.875rem;
  padding-block: 10px;
  padding-inline: 38px 14px;
}
div.flash.notice { background-color: var(--yt-success-bg); border-color: var(--yt-success-border); color: var(--yt-text); }
div.flash.notice svg.icon-svg { stroke: var(--yt-success); }
div.flash.error, #errorExplanation { background-color: var(--yt-error-bg); border-color: var(--yt-error-border); color: var(--yt-text); }
div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg { stroke: var(--yt-error); }
div.flash.warning, .conflict, .warning { background-color: var(--yt-warning-bg); border-color: var(--yt-warning-border); color: var(--yt-text); }
div.flash.warning svg.icon-svg, .conflict svg.icon-svg { stroke: var(--yt-warning); }
.nodata {
  padding-inline: 14px;
  background-color: var(--yt-bg-secondary);
  border-color: var(--yt-line);
  color: var(--yt-text-secondary);
}

.contextual { line-height: 1.6; }
p.other-formats, .wiki-update-info, ul.properties, div.attachments span.author { color: var(--yt-text-secondary); }

/* ==========================================================================
   10. Popups: dropdowns, context menu, autocomplete, dialogs, tooltips
   ========================================================================== */

html .drdn-content, html .dropdown-content, html #context-menu ul,
.ui-autocomplete, .ui-menu, html .tribute-container ul {
  background-color: var(--yt-bg);
  border: 0;
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-popup);
  color: var(--yt-text);
}
html .drdn-content { overflow: hidden; }
div + .drdn-items { border-block-start-color: var(--yt-line); }
.drdn-items > * { border-color: transparent; }
.drdn-items > a, .drdn-items > a:link, .drdn-items > a:visited { color: var(--yt-text); }
.drdn-items > a:hover, .drdn-items > *:focus { background-color: var(--yt-bg-hover); border-color: transparent; text-decoration: none; }
.drdn-items > span { color: var(--yt-text-muted); }
html #project-jump .drdn-items > * { color: var(--yt-text) !important; }
html #project-jump .drdn-items > a:hover { background-color: var(--yt-bg-hover); color: var(--yt-text) !important; }
html .contextual .drdn-items > a:hover, html .journal-actions .drdn-items > a:hover {
  color: var(--yt-text);
  border-color: transparent;
  background-color: var(--yt-bg-hover);
  border-radius: 6px;
}
.drdn-content .quick-search input.autocomplete { background: none; }

html .dropdown-content { padding: 4px; }
html .dropdown-content li a, html .dropdown-content .dropdown-items a { border-radius: 6px; padding-block: 7px; padding-inline: 10px; color: var(--yt-text); }
html .dropdown-content li a:hover, html .dropdown-content .dropdown-items a:hover { background-color: var(--yt-bg-hover); color: var(--yt-text); }
html .dropdown-divider, #account .dropdown-content .logout { border-block-start-color: var(--yt-line); }
#account .dropdown-content .user-info { color: var(--yt-text); padding-inline: 10px; }
#account .dropdown-content .user-info .user-login { color: var(--yt-text-secondary); }

html #context-menu ul { padding: 4px; }
html #context-menu li { border: 1px solid transparent; border-radius: 6px; }
html #context-menu li:hover { border-color: transparent; background-color: var(--yt-bg-hover); border-radius: 6px; }
html #context-menu a { color: var(--yt-text); padding-block: 4px; padding-inline: 8px; }
html #context-menu a:hover { color: var(--yt-text); }
html #context-menu a.disabled, html #context-menu a.disabled:hover { color: var(--yt-text-muted); }

.ui-autocomplete, .ui-menu { padding: 4px; }
.ui-autocomplete .ui-menu-item > div, .ui-menu .ui-menu-item > div { border-radius: 6px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
.ui-menu .ui-menu-item .ui-state-active {
  border-color: var(--yt-accent);
  background: var(--yt-accent);
  color: var(--yt-on-accent);
}
html .tribute-container ul { padding: 4px; }
html .tribute-container li { border-radius: 6px; }
html .tribute-container li.highlight { background-color: var(--yt-bg-hover); color: var(--yt-text); }

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--yt-font); }
.ui-widget-content { background: var(--yt-bg); color: var(--yt-text); border-color: var(--yt-line); }
.ui-widget-content a { color: var(--yt-link); }
.ui-widget-header { background: var(--yt-bg-secondary); border-color: var(--yt-line); color: var(--yt-text); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: var(--yt-bg-secondary);
  border-color: var(--yt-line);
  color: var(--yt-text);
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background: var(--yt-bg-hover);
  border-color: var(--yt-border);
  color: var(--yt-text);
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  background: var(--yt-bg-selected);
  border-color: var(--yt-accent);
  color: var(--yt-text);
}
.ui-dialog {
  padding: 0;
  border: 0 !important;
  border-radius: 10px;
  box-shadow: var(--yt-shadow-popup);
  overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
  padding-block: 12px;
  padding-inline: 16px;
  border: 0;
  border-block-end: 1px solid var(--yt-line);
  border-radius: 0;
  background: var(--yt-bg);
  font-size: 1rem;
  font-weight: 600;
}
.ui-dialog .ui-dialog-content { padding: 16px; }
.ui-button, html .ui-button.ui-state-disabled:hover {
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius);
  background: var(--yt-bg);
  color: var(--yt-text);
}
.ui-button:hover, .ui-button:focus { background: var(--yt-bg-hover); border-color: var(--yt-border-hover); color: var(--yt-text); }
.ui-dialog .ui-dialog-titlebar-close { border: 0; background: transparent; border-radius: var(--yt-radius); }
.ui-dialog .ui-dialog-titlebar-close:hover { background: var(--yt-bg-hover); }
.ui-dialog .ui-dialog-buttonpane { border-color: var(--yt-line); background: var(--yt-bg); }
.ui-widget-overlay { background: #000; opacity: 0.45; }
.ui-datepicker { padding: 8px; border: 0 !important; border-radius: 10px; box-shadow: var(--yt-shadow-popup); }
.ui-datepicker .ui-datepicker-header { background: transparent; border: 0; }
.ui-datepicker th { color: var(--yt-text-secondary); font-weight: 500; }
.ui-datepicker td a, .ui-datepicker td span { text-align: center; border-radius: 6px; }
.ui-datepicker .ui-state-default { background: transparent; border-color: transparent; }
.ui-datepicker .ui-state-hover { background: var(--yt-bg-hover); }
.ui-datepicker .ui-state-highlight { border-color: var(--yt-accent); background: transparent; }
.ui-datepicker .ui-state-active { background: var(--yt-accent); border-color: var(--yt-accent); color: var(--yt-on-accent); }
.ui-progressbar { background: var(--yt-bg-tertiary); border-color: var(--yt-line); }
.ui-progressbar .ui-progressbar-value { background: var(--yt-accent); border-color: var(--yt-accent); }

.ui-tooltip {
  padding-block: 5px;
  padding-inline: 8px;
  border-radius: var(--yt-radius);
  background: var(--yt-tooltip-bg);
  color: var(--yt-tooltip-text);
  font-size: 0.75rem;
  box-shadow: var(--yt-shadow-popup);
}
div.tooltip:hover span.tip {
  border: 0;
  border-radius: var(--yt-radius-lg);
  background-color: var(--yt-bg);
  color: var(--yt-text);
  box-shadow: var(--yt-shadow-popup);
  padding: 8px 10px;
}

#ajax-indicator {
  inline-size: auto;
  padding-block: 10px;
  padding-inline: 18px;
  background-color: var(--yt-bg);
  border: 0;
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-popup);
  color: var(--yt-text);
  font-weight: 500;
  opacity: 1;
}

/* ==========================================================================
   11. Wiki & code
   ========================================================================== */

div.wiki { line-height: 1.6; }
div.wiki pre {
  margin-inline: 0;
  padding-block: 12px;
  padding-inline: 14px;
  background-color: var(--yt-code-bg);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  font-size: 0.8125rem;
  line-height: 1.5;
}
div.wiki pre .syntaxhl, .syntaxhl { background: transparent; }
div.wiki *:not(pre) > code, div.wiki > code {
  background: var(--yt-bg-tertiary);
  border-radius: var(--yt-radius);
  padding-block: 0.1em;
  padding-inline: 0.35em;
  font-size: 0.875em;
}
div.wiki table, div.wiki td, div.wiki th { border-color: var(--yt-line); }
div.wiki th { background-color: var(--yt-bg-secondary); }
div.wiki td, div.wiki th { padding-block: 6px; padding-inline: 10px; }
div.wiki a.new { color: var(--yt-error); }
div.wiki ul.toc {
  background-color: var(--yt-bg-secondary);
  border-color: var(--yt-line);
  border-radius: var(--yt-radius-lg);
  padding-block: 10px;
  padding-inline: 14px;
}
div.wiki ul.toc a, div.wiki ul.toc > li:first-child { color: var(--yt-text-secondary); }
div.wiki ul.toc a:hover { color: var(--yt-link); text-decoration: none; }
div.wiki a:target + h1, div.wiki a:target + h2, div.wiki a:target + h3,
div.wiki a:target + h4, div.wiki a:target + h5, div.wiki a:target + h6 { background-color: var(--yt-bg-hover); }
blockquote {
  border-inline-start: 3px solid var(--yt-line);
  color: var(--yt-text-secondary);
  font-style: normal;
  padding-inline-start: 12px;
}
div.pre-wrapper a.copy-pre-content-link { background: var(--yt-bg); border-color: var(--yt-line); }
.wiki-preview, html .wiki-preview { background-color: var(--yt-bg); border-color: var(--yt-border); color: var(--yt-text); border-radius: var(--yt-radius); }
html .jstBlock .wiki-preview { padding-block: 10px; padding-inline: 14px; }
.text-diff { background-color: var(--yt-code-bg); border-color: var(--yt-line); color: var(--yt-text); border-radius: var(--yt-radius-lg); }
.filecontent.wiki { border-color: var(--yt-line); border-radius: var(--yt-radius-lg); }
.markdown-alert { border-radius: 2px; }

/* editor toolbar */
html .jstElements button {
  border-color: transparent;
  border-radius: var(--yt-radius);
  background-color: transparent;
  opacity: 0.75;
}
html .jstElements button:hover { border-color: var(--yt-line); background-color: var(--yt-bg-hover); opacity: 1; }
html .table-generator td { background-color: var(--yt-bg); border-color: var(--yt-border); }
html .table-generator td.selected-cell, html .table-generator td:hover { background-color: var(--yt-bg-selected); }

/* ==========================================================================
   12. Pages
   ========================================================================== */

/* login & account forms */
body.controller-account #main, body.controller-account #content,
body.controller-twofa #main, body.controller-twofa #content { background: var(--yt-bg-secondary); }
#login-form {
  margin-block: 8vh 2em;
  inline-size: 360px;
  padding: 32px;
  background-color: var(--yt-bg);
  border: 1px solid var(--yt-line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 28, 54, 0.1);
}
#login-form label { font-weight: 500; }
#login-form input { block-size: 36px; }
#login-form input[type=checkbox] { block-size: auto; }
#login-form input[type=submit] { margin-block-start: 6px; font-size: 0.9375rem; }
#login-form h3 { font-size: 1.25rem; margin-block-end: 18px; }

/* projects */
#projects-index ul.projects li.root {
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-card);
  background: var(--yt-bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#projects-index ul.projects li.root:hover { border-color: var(--yt-border); box-shadow: 0 4px 14px rgba(0, 28, 54, 0.08); }
#projects-index li.root ul.projects { border-inline-start-color: var(--yt-line); }
#projects-index ul.projects div.root a.project { color: var(--yt-text); font-size: 1.0625rem; font-weight: 600; }
#projects-index ul.projects div.root a.project:hover { color: var(--yt-link); }
ul.projects li.root div.archived, ul.projects li.child div.archived { color: var(--yt-text-muted); }

/* my page */
.mypage-box {
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-card);
  color: var(--yt-text);
  padding-block: 12px;
  padding-inline: 16px;
}
.mypage-box h3 { font-size: 1rem; }
.block-receiver { border-color: transparent; }
.dragging .block-receiver { border-color: var(--yt-border); }

/* activity & search */
div#activity h3 {
  padding-block: 6px;
  padding-inline: 0;
  background-color: transparent;
  border-block-end: 1px solid var(--yt-line);
  font-size: 0.9375rem;
}
div#activity dt { border-block-start-color: var(--yt-line); }
div#activity dt .time { color: var(--yt-text-secondary); }
div#activity dd span.description, #search-results dd span.description { color: var(--yt-text-secondary); }

/* documents, news, roadmap */
#document-list .document-group h3 { background-color: transparent; border-block-end: 1px solid var(--yt-line); padding-inline: 0; }
#document-list .document-item .updated_on, #news-list article.news-article header p.author { color: var(--yt-text-secondary); }
div#roadmap header:target { background-color: var(--yt-bg-hover); }
div#version-summary { background-color: var(--yt-bg); }

/* calendar */
ul.cal { grid-template-columns: 2rem repeat(7, minmax(0, 1fr)); border-color: var(--yt-line); border-radius: var(--yt-radius-lg); overflow: hidden; box-shadow: none; }
.cal .calhead, .cal .week-number { background-color: var(--yt-bg-secondary); color: var(--yt-text-secondary); font-weight: 600; }
.cal .calbody { border-color: var(--yt-line); box-shadow: none; overflow-wrap: break-word; min-inline-size: 0; }
.cal .calbody span.icon { display: inline; }
.cal .calbody div.issue {
  margin-block: 4px;
  padding-block: 3px;
  padding-inline: 6px;
  background: var(--yt-bg-secondary);
  border: 1px solid var(--yt-card-border);
  border-inline-start: 3px solid var(--yt-prio, var(--yt-line));
  border-radius: var(--yt-radius);
  font-size: 0.75rem;
  line-height: 1.35;
}
.cal .calbody div.issue:hover { border-color: var(--yt-border); border-inline-start-color: var(--yt-prio, var(--yt-border)); }
.cal .calbody.this-month { background-color: var(--yt-bg); }
.cal .calbody.other-month, .cal .calbody.nwday:not(.other-month) { background-color: var(--yt-bg-secondary); }
.cal .calbody.other-month p.day-num { color: var(--yt-text-muted); }

/* misc */
.diff_out { background: var(--yt-error-bg); }
.diff_in { background: var(--yt-success-bg); }
.sample-data, .sample-data td { border-color: var(--yt-line); background-color: var(--yt-bg); }
table.transitions td.enabled { background: var(--yt-success-bg); }
.highlight { background-color: rgba(255, 200, 0, 0.35); }

/* ==========================================================================
   13. Mobile (< 900px): Redmine's responsive header and flyout menu
   ========================================================================== */

.yt-mobile-theme-btn { display: none; }

@media screen and (max-width: 899px) {
  html body #header {
    background-color: var(--yt-header-bg);
    border-block-end: 1px solid var(--yt-line);
  }
  html #header a.mobile-toggle-button { color: var(--yt-text); border-inline-start-color: var(--yt-line); }
  html #project-jump .drdn-trigger { color: var(--yt-text); background: transparent; border: 0; block-size: 50px; line-height: 40px; }
  html #project-jump.drdn { padding-inline-end: 124px; }

  html .flyout-menu { background-color: var(--yt-nav-bg); color: var(--yt-nav-text); border-inline-start: 1px solid var(--yt-line); }
  html .flyout-menu h3 {
    background-color: var(--yt-bg-tertiary);
    border-block-color: var(--yt-line);
    color: var(--yt-text-secondary);
  }
  html .flyout-menu h4 { color: var(--yt-text); }
  html .flyout-menu a, html .flyout-menu__avatar a { color: var(--yt-nav-text); }
  html .flyout-menu ul li a, html .flyout-menu__avatar,
  html .flyout-menu__sidebar form > ul li,
  html .flyout-menu #watchers ul li, html .flyout-menu ul.queries li { border-block-start-color: var(--yt-line); }
  html .flyout-menu .icon svg, html .flyout-menu .icon-only svg { stroke: var(--yt-nav-text); }
  html .flyout-menu__search input[type='text'] { background-color: var(--yt-bg); border: 1px solid var(--yt-line); }
  html .flyout-menu a.selected { color: var(--yt-nav-active-text); }

  .yt-mobile-theme-btn {
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 60px;
    z-index: 11;
    inline-size: 56px;
    block-size: 64px;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--yt-line);
    border-radius: 0;
    background: transparent;
    color: var(--yt-text);
    cursor: pointer;
  }
  .yt-mobile-theme-btn svg { inline-size: 24px; block-size: 24px; }
  #header .yt-popover { inset-block-start: 60px; inset-inline-end: 8px; }

  nav.top-menu .yt-brand, nav.top-menu .yt-nav-tools { display: none; }
  html.yt-nav-collapsed { --yt-nav-w: 0px; }
}

/* ==========================================================================
   14. Dark scheme: things that are not driven by color variables
   ========================================================================== */

@media screen {
  html[data-theme="dark"] #quick-search #q { background-image: var(--yt-i-search-dark); }
  html[data-theme="dark"] input.autocomplete:not(.ajax-loading) { background-image: var(--yt-i-search-dark); background-size: 16px 16px; }
  html[data-theme="dark"] .drdn-content .quick-search input.autocomplete { background-image: none; }
  html[data-theme="dark"] .drdn-content .quick-search svg.icon-svg { stroke: var(--yt-text-secondary); }

  /* toolbar icons are black SVG backgrounds: invert the button, then pre-invert its colors */
  html[data-theme="dark"] .jstElements button {
    filter: invert(1) hue-rotate(180deg);
    background-color: transparent;
    opacity: 0.8;
  }
  html[data-theme="dark"] .jstElements button:hover { background-color: #d2d0cb; border-color: #c6c4bf; opacity: 1; } /* inverted #2d2f34 / #393b40 */
  html[data-theme="dark"] .jstb_pre::before { color: #1f2326; }
  html[data-theme="dark"] .jstElements .help a { filter: invert(0.85); }

  html[data-theme="dark"] .ui-icon, html[data-theme="dark"] .ui-widget-content .ui-icon,
  html[data-theme="dark"] .ui-widget-header .ui-icon { filter: invert(0.88); }
  html[data-theme="dark"] .ui-state-active .ui-icon { filter: none; }

  html[data-theme="dark"] img.filecontent.image { background-color: #fff; }
  html[data-theme="dark"] .gantt_hdr { background-color: var(--yt-bg-secondary); }
  html[data-theme="dark"] #gantt_area .gantt_hdr.nwday, html[data-theme="dark"] .gantt_hdr.nwday { background-color: var(--yt-bg-tertiary); }
  html[data-theme="dark"] .task_todo { background-color: #5a5d63; border-color: #5a5d63; }

  html[data-theme="dark"] ::-webkit-scrollbar-corner { background: transparent; }

  /* syntax highlighting (Rouge), GitHub-dark-like */
  html[data-theme="dark"] .syntaxhl { color: #d7dce1; }
  html[data-theme="dark"] .syntaxhl .hll { background-color: rgba(255, 255, 255, 0.08); }
  html[data-theme="dark"] .syntaxhl :is(.c, .ch, .cm, .cpf, .c1, .go, .w) { color: #8b949e; }
  html[data-theme="dark"] .syntaxhl :is(.cs, .k, .kc, .kd, .kn, .kr, .ow, .nn) { color: #ff7b72; }
  html[data-theme="dark"] .syntaxhl :is(.cp, .kp, .na, .no, .nl, .bp, .m, .mb, .mf, .mh, .mi, .mo, .il, .sc, .se) { color: #79c0ff; }
  html[data-theme="dark"] .syntaxhl :is(.kt, .nb, .ni, .nv, .vm, .vc, .vg, .vi, .si, .gp) { color: #ffa657; }
  html[data-theme="dark"] .syntaxhl :is(.s, .sa, .sb, .dl, .s2, .sh, .s1, .sx, .sd, .ss) { color: #a5d6ff; background-color: transparent; }
  html[data-theme="dark"] .syntaxhl :is(.nc, .ne) { color: #f0883e; }
  html[data-theme="dark"] .syntaxhl :is(.nd, .nf, .fm, .gu) { color: #d2a8ff; }
  html[data-theme="dark"] .syntaxhl :is(.nt, .sr, .gi) { color: #7ee787; background-color: transparent; }
  html[data-theme="dark"] .syntaxhl :is(.o) { color: #d7dce1; }
  html[data-theme="dark"] .syntaxhl :is(.gd, .gr, .gt, .err) { color: #ffa198; background-color: transparent; }
  html[data-theme="dark"] .syntaxhl .gh { color: #79c0ff; }
  html[data-theme="dark"] .syntaxhl .si { background-color: transparent; }
}

/* ==========================================================================
   15. Plugins
   ========================================================================== */

/* redmine_dashboard (jgraichen). Its stylesheets load after the theme,
   hence the extra "html body" specificity. */
html > body #content:has(> #rdb) { background-color: var(--yt-bg-secondary) !important; }
html body #rdb { background-color: var(--yt-bg-secondary); color: var(--yt-text); }
html body #rdb-header { background-color: var(--yt-bg); border-block-end-color: var(--yt-line); padding-inline-start: 22px; }
html body #rdb-header .rdb-board h2 { font-size: 1.25rem; font-weight: 600; }
html body #rdb-board { background-color: var(--yt-bg-secondary); border-color: var(--yt-line); border-radius: var(--yt-radius-lg); margin-inline: 22px; }
html body .rdb-headers .rdb-column { border-block-end-color: var(--yt-line); }
html body .rdb-headers .rdb-column h3 { color: var(--yt-text); font-size: 0.875rem; }
html body .rdb-headers .rdb-column span, html body .rdb-column-head, html body .rdb-group-header span,
html body #rdb-copyright, html body .rdb-property.rdb-disabled,
html body .rdb-compact-header .rdb-property, html body .rdb-compact-property { color: var(--yt-text-muted); }
html body .rdb-columns .rdb-column { border-inline-start-color: var(--yt-line); }
html body .rdb-column-drop-active { background-color: var(--yt-bg-hover); }
html body .rdb-column-drop-hover { background-color: var(--yt-success-bg); }
html body .rdb-group-header { background-color: var(--yt-bg-secondary); border-color: var(--yt-line); border-radius: var(--yt-radius); }
html body .rdb-card, html body .rdb-compact {
  background: var(--yt-bg);
  border-color: var(--yt-card-border);
  border-radius: 6px;
  box-shadow: var(--yt-shadow-card);
}
html body .rdb-card:hover, html body .rdb-compact:hover { border-color: var(--yt-border-hover); }
html body .rdb-overdue .rdb-card, html body .rdb-overdue .rdb-compact { border-color: var(--yt-error); }
html body .rdb-card-title a.rdb-menu-link, html body .rdb-card-title > a { border-inline-end-color: var(--yt-line); }
html body .rdb-card-title a.rdb-menu-link:hover, html body .rdb-card-title > a:hover,
html body .rdb-menu a.rdb-menu-link:hover, html body .rdb-menu-active a.rdb-menu-link,
html body .rdb-list > ul > li > a:hover, html body .rdb-list .rdb-multicheck a:hover,
html body .rdb-list .rdb-multicheck a.rdb-checkbox-link:hover ~ a,
html body .rdb-card-dialog-box ul li a:hover, html body .rdb-issue-menu-progress li a:hover,
html body .rdb-group-header a:hover, html body a#rdb-refresh:hover, html body a#rdb-refresh:active {
  background-color: var(--yt-bg-hover);
  border-color: var(--yt-line);
  box-shadow: none;
}
html body a#rdb-refresh { border-color: transparent; }
html body .rdb-container {
  background-color: var(--yt-bg);
  border-color: var(--yt-line);
  border-radius: var(--yt-radius-lg);
  box-shadow: var(--yt-shadow-popup);
  color: var(--yt-text);
}
html body .rdb-container::after { border-block-end-color: var(--yt-bg); }
html body .rdb-container .rdb-list { border-block-end-color: var(--yt-line); }
html body .rdb-container-wrapper::-webkit-scrollbar { background-color: var(--yt-bg-secondary); }
html body .rdb-container-wrapper::-webkit-scrollbar-thumb { background-color: var(--yt-border); }
html body .rdb-card-progress, html body .rdb-compact-progress { background-color: var(--yt-bg-tertiary); }
html body .rdb-card-progress-bar, html body .rdb-compact-progress-bar { background-color: var(--yt-success); }
html body .rdb-card-dialog-box { background-color: var(--yt-bg); border-color: var(--yt-line); border-radius: 6px; }
html body #rdb-errors .rdb-error {
  background-color: var(--yt-error-bg);
  border-color: var(--yt-error-border);
  color: var(--yt-text);
  text-shadow: none;
  border-radius: 6px;
}
html body .rdb-priority { border-inline-start-width: 4px; }
html body .rdb-priority-1 { border-inline-start-color: var(--yt-prio-lowest); }
html body .rdb-priority-2 { border-inline-start-color: var(--yt-prio-default); }
html body .rdb-priority-3 { border-inline-start-color: var(--yt-prio-3); }
html body .rdb-priority-4 { border-inline-start-color: var(--yt-prio-4); }
html body .rdb-priority-5 { border-inline-start-color: var(--yt-prio-highest); }
html body #rdb-legend .rdb-priority { border-inline-start-width: 6px; border-radius: 1px; }
html body .rdb-overall-progress { border-radius: 4px; }

/* redmine_expert_agile (expertZentrale). Its stylesheet also loads after the
   theme, hence "html body". Colours map to theme tokens so both schemes follow
   the palette: lanes and board cells are the recessed surface, cards sit on top.
   The per-card tint (--ea-tint, inline from the server) is always a light
   colour, so the dark scheme mixes the card's accent into the panel instead. */
html body { --yt-ea-lane: var(--yt-bg-secondary); --yt-ea-lane-head: var(--yt-bg-secondary); --yt-ea-card: var(--yt-bg); }
@media screen {
  html[data-theme="dark"] body { --yt-ea-lane: var(--yt-bg); --yt-ea-lane-head: var(--yt-bg-secondary); --yt-ea-card: var(--yt-bg-secondary); }
}
html body .ea-pinned-head { background: var(--yt-bg); }
html body .ea-column-header { background: var(--yt-ea-lane-head); border-color: var(--yt-line); color: var(--yt-text); }
html body .ea-column-count, html body .ea-lane-count, html body .ea-swimlane-count {
  background: var(--yt-ea-card); border-color: var(--yt-border); color: var(--yt-text-secondary);
}
html body .ea-card-story-points, html body .ea-lane-points, html body .ea-swimlane-points {
  background: rgba(var(--yt-accent-rgb), 0.14); border-color: rgba(var(--yt-accent-rgb), 0.35); color: var(--yt-link);
}
html body .ea-column-header.ea-wip-over { background: var(--yt-error-bg); border-color: var(--yt-error-border); }
html body .ea-column-header.ea-wip-over .ea-column-count { background: var(--yt-error-bg); border-color: var(--yt-error-border); color: var(--yt-error); }
html body .ea-column-header.ea-wip-under { background: var(--yt-warning-bg); border-color: var(--yt-warning-border); }
html body .ea-column-header.ea-status-colored { border-bottom-color: var(--ea-accent); }
html body .ea-cell { background: var(--yt-ea-lane); border-color: var(--yt-line); }
html body .ea-cell.ea-cell-hover, html body .ea-backlog-drop.ea-cell-hover {
  background: var(--yt-bg-hover); box-shadow: inset 0 0 0 2px rgba(var(--yt-accent-rgb), 0.55);
}
html body .ea-drag-active .ea-cell.ea-drop-allowed { background: var(--yt-success-bg); box-shadow: inset 0 0 0 2px var(--yt-success-border); }
html body .ea-drag-active .ea-cell.ea-drop-allowed.ea-cell-hover { background: var(--yt-success-bg); box-shadow: inset 0 0 0 3px var(--yt-success); }
html body .ea-drag-active .ea-cell.ea-drop-origin { background: var(--yt-ea-lane); box-shadow: inset 0 0 0 2px var(--yt-border); }
html body .ea-drag-active .ea-cell.ea-drop-blocked { background-color: color-mix(in srgb, var(--yt-error) 7%, var(--yt-ea-lane)); }
html body .ea-drag-active .ea-column-header.ea-drop-allowed { box-shadow: inset 0 -3px 0 var(--yt-success); }
html body .ea-drag-active .ea-column-header.ea-drop-origin { box-shadow: inset 0 -3px 0 var(--yt-border-hover); }
html body .ea-card {
  background: var(--yt-ea-card); border-color: var(--yt-card-border); box-shadow: var(--yt-shadow-card); color: var(--yt-text);
}
html body .ea-card:hover { border-color: var(--yt-border-hover); }
html body .ea-card.ea-colored { border-left-color: var(--ea-accent); }
html body .ea-card.ea-card-overdue { border-left-color: var(--yt-error); }
html body .ea-card-subject a { color: var(--yt-text); }
html body .ea-card-header, html body .ea-card-id a, html body .ea-card-story a, html body .ea-card-footer,
html body .ea-card-description, html body .ea-card-subtasks summary, html body .ea-options-panel h4,
html body .ea-options-row label, html body .ea-backlog-lane-meta, html body .ea-column-wip, html body .ea-hint,
html body .ea-card-fields dt, html body .ea-status-grid-head, html body .ea-epic-progress,
html body .expert-agile-epic-progress-detail, html body .ea-epic-counts, html body td.ea-row-subtasks,
html body .ea-sprint-complete-status, html body .ea-backlog-empty-hint { color: var(--yt-text-secondary); }
html body .ea-sidebar-nav a.ea-sprint-closed, html body .ea-status-name.ea-status-closed, html body .ea-subtask-closed a,
html body .ea-epic-row.ea-row-closed td, html body .ea-epic-empty,
html body .ea-epic-row.ea-depth-1 td.subject::before, html body .ea-epic-row.ea-depth-2 td.subject::before,
html body .ea-epic-row.ea-depth-3 td.subject::before { color: var(--yt-text-muted); }
/* chips on a card are recessed like the lane; the sprint status chip sits on the lane header */
html body .ea-card-tracker, html body .ea-card-hours, html body .ea-card-status { background: var(--yt-ea-lane); color: var(--yt-text-secondary); }
html body .ea-backlog-status, html body .ea-backlog-status.ea-sprint-closed {
  background: var(--yt-ea-card); box-shadow: inset 0 0 0 1px var(--yt-line); color: var(--yt-text-secondary);
}
/* success green on its tint is below 4.5:1 in the light scheme; pulling it toward the text colour fixes both schemes */
html body .ea-card-done, html body .ea-backlog-status.ea-sprint-active {
  background: var(--yt-success-bg); box-shadow: none; color: color-mix(in srgb, var(--yt-success) 75%, var(--yt-text));
}
html body .ea-swimlane-title th { background: var(--yt-ea-lane-head); border-color: var(--yt-line); color: var(--yt-text); }
html body .ea-swimlane-title.ea-lane-colored th { border-left-color: var(--ea-accent); }
html body .ea-backlog-lane, html body .ea-backlog-lane.ea-backlog-source { background: var(--yt-ea-lane); border-color: var(--yt-line); }
html body .ea-backlog-lane-header { background: var(--yt-ea-lane-head); border-bottom: 1px solid var(--yt-line); color: var(--yt-text); }
html body .ea-backlog-lane.ea-lane-colored .ea-backlog-lane-header { border-left-color: var(--ea-accent); }
html body .ea-backlog-empty-hint { border-color: var(--yt-border); }
html body .ea-backlog-empty { background: var(--yt-ea-card); border-color: var(--yt-border); color: var(--yt-text-secondary); }
html body .ea-backlog-switch { border-color: var(--yt-border); }
html body .ea-backlog-switch a { background: var(--yt-ea-card); color: var(--yt-text-secondary); }
html body .ea-backlog-switch a:hover { background: var(--yt-bg-hover); color: var(--yt-text); }
html body .ea-backlog-switch a.selected { background: var(--yt-accent); color: var(--yt-on-accent); }
html body .ea-epic-progress-bar, html body .ea-subtasks-bar { background: var(--yt-bg-tertiary); }
html body .ea-subtasks-bar::after, html body .ea-subtask-closed .ea-subtask-dot { background: var(--yt-success); }
html body .ea-subtask-dot { background: var(--yt-border); }
html body .ea-epic-block { background: var(--yt-ea-card); border-color: var(--yt-line); }
html body .ea-epic-status { background: var(--yt-ea-card); color: var(--yt-text-secondary); }
@media screen {
  html[data-theme="dark"] body .ea-card.ea-colored { background: color-mix(in srgb, var(--ea-accent) 12%, var(--yt-ea-card)); }
  html[data-theme="dark"] body .ea-swimlane-title.ea-lane-colored th,
  html[data-theme="dark"] body .ea-epic-summary,
  html[data-theme="dark"] body .ea-card-epic { background: color-mix(in srgb, var(--ea-accent, #6f737a) 18%, var(--yt-ea-card)); }
}