/* ==========================================================================
   REDMINE 5.0.x — "DEEP SPACE" DARK THEME (inspired by betterstack.com)
   --------------------------------------------------------------------------
   Install:
     1. Copy this file to   <redmine>/public/themes/modern/stylesheets/application.css
     2. Administration → Settings → Display → Theme → "modern"
     3. Restart Redmine if you run in production mode (assets are cached).

   IMPORTANT: Redmine loads a theme's application.css INSTEAD of the core one,
   so the first rule below imports the core stylesheet. Everything after it
   only overrides what we want to change (no ERB / template edits needed).

   Structure
     01  Core import & tokens (CSS variables)
     02  Base: typography, links, focus
     03  Page layout (#wrapper, #main, #content)
     04  Top menu (#top-menu)
     05  Header, search & project selector (#header)
     06  Main navigation (#main-menu) and content tabs (.tabs)
     07  Sidebar (#sidebar)
     08  Cards, boxes, headings, flash messages
     09  Tables & issue lists (table.list)
     10  Priority / status indicators
     11  Forms
     12  Buttons
     13  Issue detail page
     14  Pagination, context menu, dialogs, wiki, misc
     15  Footer
     16  Small screens
     17  Dark-mode patches for core widgets (calendar, jQuery UI, menus)
   ========================================================================== */

@import url(../../../stylesheets/application.css);

/* Inter stands in for Better Stack's licensed "Helvetica Now". Remove this line
   to stay offline (the stack then falls back to system fonts), or self-host
   Helvetica Now with @font-face if you own a licence. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");


/* ==========================================================================
   01. DESIGN TOKENS — edit these to re-skin the whole theme
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Accent — one violet hue, used sparingly for links, focus and active states */
  --accent:        #98a4f7;
  --accent-hover:  #b4bdfa;
  --accent-soft:   rgba(152, 164, 247, 0.14);
  --accent-ring:   rgba(152, 164, 247, 0.35);
  --on-accent:     #0b0c12;
  --glow:          rgba(152, 164, 247, 0.16);   /* faint light at the top of the page */

  /* Surfaces: near-black canvas, slightly lighter layers on top */
  --bg:            #0b0c10;   /* page background            */
  --surface:       #121318;   /* cards, inputs, menus       */
  --surface-2:     #181a20;   /* table headers, code, boxes */
  --chrome:        #0e0f13;   /* top utility bar            */
  --row-alt:       #0f1014;   /* zebra rows                 */
  --hover:         #1a1c24;   /* row hover                  */
  --hover-strong:  rgba(255, 255, 255, 0.06);

  /* Borders: hairlines, barely lighter than the surface */
  --border:        #23252d;
  --border-subtle: #1b1d24;
  --border-strong: #353844;

  /* Text */
  --text:          #f2f3f5;
  --text-2:        #a1a5b0;
  --text-3:        #7b7f8c;

  /* Semantic colours — the only hues allowed besides the violet accent */
  --danger:        #f87171;  --danger-soft:  rgba(248, 113, 113, 0.12);  --danger-border:  rgba(248, 113, 113, 0.35);
  --warning:       #f5b94a;  --warning-soft: rgba(245, 185, 74, 0.12);   --warning-border: rgba(245, 185, 74, 0.35);
  --success:       #4ade80;  --success-soft: rgba(74, 222, 128, 0.12);   --success-border: rgba(74, 222, 128, 0.30);
  --neutral:       #a1a5b0;  --neutral-soft: rgba(255, 255, 255, 0.07);

  /* Typography (Helvetica Now first if installed/self-hosted, then Inter) */
  --font-sans: "Helvetica Now Text", Inter, ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Radii */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-pill: 999px;

  /* 4px / 8px spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* Shadows: on dark, hairlines do most of the work; shadows only lift overlays */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Page width: header and content share the same side gutter */
  --page-max: 1440px;
  --gutter:   max(24px, calc((100% - var(--page-max)) / 2));
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.01em;               /* compact, technical feel */
  color: var(--text);
  background: var(--bg) radial-gradient(ellipse 70% 360px at 50% -80px, var(--glow), transparent 70%) no-repeat;
  -webkit-font-smoothing: antialiased;
}

#wrapper, #main { background: transparent; }

#content, #sidebar, #top-menu, #header, #footer { font-family: var(--font-sans); }
#content, #sidebar { font-size: 14px; }

input, select, textarea, button { font-family: inherit; letter-spacing: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
#content h2 { font-size: 22px; font-weight: 600; margin: 0 0 var(--s4); padding: 0; color: var(--text); }
#content h3 { font-size: 16px; font-weight: 600; margin: var(--s5) 0 var(--s3); }
#content h4 {
  font-size: 14px; font-weight: 600;
  margin: var(--s5) 0 var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; }

/* Links */
a { color: var(--accent); text-decoration: none; transition: color .12s ease, background-color .12s ease; }
a:hover, a:active { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent-ring); }


/* ==========================================================================
   03. PAGE LAYOUT  (desktop only — core responsive.css handles small screens)
   DOM order is: #sidebar, then #content. We use row-reverse so the sidebar
   stays on the right, as in stock Redmine. Swap to "row" to put it on the left.
   ========================================================================== */
@media screen and (min-width: 900px) {
  #main {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--s5);
    padding: var(--s5) var(--gutter);
    background: transparent;
  }
  #main::before, #main::after { display: none; }   /* neutralise old clearfixes */

  #main #content {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
  }
  #main #sidebar {
    flex: 0 0 248px;
    float: none;
    width: 248px;
  }
}

/* The main content area is one soft card */
#content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
}
#main.nosidebar #content { border-right: 1px solid var(--border); }


/* ==========================================================================
   04. TOP MENU  (home / my page / projects / administration … account)
   ========================================================================== */
#top-menu {
  display: flex;
  align-items: center;
  min-height: 40px;
  height: auto;
  margin: 0;
  padding: 0 var(--gutter);
  font-size: 13px;
  color: var(--text-2);
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
}
#top-menu > ul {                        /* left-hand links */
  order: 1;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: 0;
  padding: 0;
}
#top-menu #loggedas {                   /* "Logged in as …" */
  order: 2;
  float: none;
  margin: 0 var(--s3) 0 var(--s4);
  font-weight: 400;
  color: var(--text-3);
}
#top-menu #loggedas a { color: var(--text); font-weight: 600; margin: 0; padding: 0; }
#top-menu #account { order: 3; float: none; }
#top-menu #account ul { display: flex; gap: var(--s1); margin: 0; padding: 0; }

#top-menu li { float: none; margin: 0; padding: 0; list-style: none; position: relative; }
#top-menu a {
  display: block;
  margin: 0;
  padding-top: 6px; padding-bottom: 6px;       /* vertical only → icon padding is preserved */
  padding-left: 10px; padding-right: 10px;
  color: var(--text-2);
  font-weight: 500;
  border-radius: var(--radius-sm);
}
#top-menu a:hover { background: var(--hover-strong); color: var(--text); text-decoration: none; }

/* Drop-down children (project menu, etc.) */
#top-menu .menu-children,
#main-menu .menu-children {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s1);
  min-width: 180px;
}


/* ==========================================================================
   05. HEADER — project title, quick search & project selector
   ========================================================================== */
#header {
  min-height: 0;
  margin: 0;
  padding: var(--s4) var(--gutter) 0;
  color: var(--text);
  background: transparent;               /* lets the top glow show through */
  border-bottom: 1px solid var(--border);
}
#header a { color: var(--text-2); }
#header a:hover { color: var(--text); }
#header::before, #header::after { display: none; }

#header h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
#header h1 a { color: var(--text); }
#header h1 .breadcrumbs, #header h1 .breadcrumbs a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}

/* Quick search + project jump */
#quick-search {
  float: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  color: var(--text-2);
}
#quick-search form { display: flex; align-items: center; gap: var(--s2); margin: 0; }
#quick-search label, #quick-search label a { font-size: 13px; color: var(--text-3); }
#quick-search #q { width: 180px; transition: width .2s ease, box-shadow .12s ease; }
#quick-search #q:focus { width: 260px; }

/* Project selector (.drdn = Redmine's dropdown widget) */
#project-jump { position: relative; display: inline-block; }
#project-jump .drdn-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 12px;
  color: var(--text);
  font-weight: 500;
  background-color: var(--surface);
  background-image: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
#project-jump .drdn-trigger::after {          /* chevron */
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
}
#project-jump .drdn-trigger:hover { background-color: var(--surface-2); }

#project-jump .drdn-content {
  left: auto; right: 0;
  margin-top: var(--s2);
  min-width: 300px;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}
#project-jump .drdn-content .quick-search { padding: 0 0 var(--s2); }
#project-jump .drdn-content .quick-search input { width: 100%; }
#project-jump .drdn-items { max-height: 340px; overflow-y: auto; }
#project-jump .drdn-items a {
  display: block;
  padding-top: 6px; padding-bottom: 6px; padding-right: 10px;
  color: var(--text);
  border-radius: var(--radius-sm);
}
#project-jump .drdn-items a:hover,
#project-jump .drdn-items a.selected {
  background: var(--accent-soft);
  color: var(--accent-hover);
  text-decoration: none;
}
#project-jump .drdn-items.all-projects { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--border-subtle); }

/* Header layout: title (left) · search (right) · menu (full width below) */
@media screen and (min-width: 900px) {
  #header { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); }
  #header h1             { order: 1; flex: 1 1 auto; min-width: 0; }
  #header #quick-search  { order: 2; }
  #header #main-menu     { order: 3; flex: 0 0 100%; position: static; width: auto; margin: var(--s3) 0 0; padding: 0; }
}


/* ==========================================================================
   06. NAVIGATION TABS
   ========================================================================== */

/* 06a. Main menu (#main-menu) — underline tabs */
#header #main-menu { background: transparent; border: 0; }
#header #main-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  width: auto;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  border: 0;
}
#header #main-menu li {
  float: none;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
#header #main-menu li a {
  display: block;
  margin: 0;
  padding: 10px 12px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  text-decoration: none;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
#header #main-menu li a:hover {
  color: var(--text);
  background: var(--hover-strong);
  border-bottom-color: var(--border-strong);
}
#header #main-menu li a.selected,
#header #main-menu li a.selected:hover {
  color: var(--accent);
  background: transparent;
  border-bottom-color: var(--accent);
}

/* 06b. Content tabs (.tabs: project settings, admin, user pages…) — pill tabs.
        :not(#main-menu) keeps the header menu above unaffected. */
div.tabs:not(#main-menu) {
  height: auto;
  overflow: visible;
  position: relative;
  margin: 0 0 var(--s5);
  padding: 0;
  border: 0;
}
div.tabs:not(#main-menu) ul {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
div.tabs:not(#main-menu) ul li { float: none; margin: 0; padding: 0; list-style: none; }
div.tabs:not(#main-menu) ul li a {
  display: block;
  margin: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
div.tabs:not(#main-menu) ul li a:hover {
  color: var(--text);
  background: var(--surface-2);
}
div.tabs:not(#main-menu) ul li a.selected,
div.tabs:not(#main-menu) ul li a.selected:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}
/* Wrapping replaces the old scroll arrows */
div.tabs .tabs-buttons { display: none !important; }


/* ==========================================================================
   07. SIDEBAR
   ========================================================================== */
#sidebar { padding: 0; margin: 0; color: var(--text-2); }
#sidebar h3 {
  margin: var(--s5) 0 var(--s2);
  padding: 0 var(--s2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border: 0;
}
#sidebar h3:first-child { margin-top: 0; }
#sidebar ul { margin: 0 0 var(--s2); padding: 0; list-style: none; }
#sidebar li { margin: 0; padding: 0; list-style: none; }

/* Plain links and saved queries */
#sidebar li > a:not(.icon),
#sidebar a.query {
  display: block;
  padding: 5px var(--s2);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Links with an icon: keep the icon, add left room for it */
#sidebar a.icon {
  display: block;
  padding-top: 5px; padding-bottom: 5px; padding-right: var(--s2);
  padding-left: 30px;
  background-position: 8px 50%;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}
#sidebar li > a:not(.icon):hover,
#sidebar a.query:hover,
#sidebar a.icon:hover {
  background: var(--hover-strong);
  color: var(--text);
  text-decoration: none;
}
#sidebar a.query.selected,
#sidebar a.selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
#sidebar p { margin: 0 0 var(--s2); padding: 0 var(--s2); }


/* ==========================================================================
   08. CARDS, BOXES, FLASH MESSAGES
   ========================================================================== */
.box, fieldset {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.box { padding: var(--s4); margin-bottom: var(--s4); line-height: 1.6; }
fieldset { background: transparent; }
fieldset legend { font-weight: 600; color: var(--text-2); }

.contextual { font-size: 13px; color: var(--text-3); }
.contextual a {
  padding-top: 2px; padding-bottom: 2px; padding-right: var(--s2);
  border-radius: var(--radius-sm);
}
.contextual a:hover { background: var(--hover-strong); text-decoration: none; }

/* Flash messages — only background-COLOR is set so Redmine's status icons stay. */
div.flash, #errorExplanation {
  margin: 0 0 var(--s4);
  padding-top: 10px; padding-bottom: 10px; padding-right: var(--s4);   /* left padding holds the icon */
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
div.flash.notice,  div.flash.success { background-color: var(--success-soft);  border-color: var(--success-border); color: var(--success); }
div.flash.warning                    { background-color: var(--warning-soft);  border-color: var(--warning-border); color: var(--warning); }
div.flash.error, #errorExplanation   { background-color: var(--danger-soft);   border-color: var(--danger-border);  color: var(--danger);  }
#errorExplanation ul { margin: var(--s2) 0 0; }
#errorExplanation h2 { display: none; }


/* ==========================================================================
   09. TABLES & ISSUE LISTS
   ========================================================================== */
table.list {
  width: 100%;
  font-size: 13px;
  border-collapse: separate;      /* allows rounded corners */
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table.list th {
  padding: 10px var(--s3);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid var(--border);
}
table.list th a { color: var(--text-2); }
table.list th a:hover { color: var(--text); text-decoration: none; }
table.list td {
  padding: 10px var(--s3);
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}
table.list tbody tr:last-child td { border-bottom: 0; }

/* Round the outer corners of the first/last cells */
table.list thead tr:first-child th:first-child { border-top-left-radius:  calc(var(--radius) - 1px); }
table.list thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--radius) - 1px); }
table.list tbody tr:last-child td:first-child  { border-bottom-left-radius:  calc(var(--radius) - 1px); }
table.list tbody tr:last-child td:last-child   { border-bottom-right-radius: calc(var(--radius) - 1px); }

/* Column alignment */
table.list td.id, table.list th.checkbox, table.list td.checkbox { text-align: center; }
table.list td.id { width: 1%; white-space: nowrap; }
table.list td.id a, table.list td.id { color: var(--text-3); }
table.list td.buttons { text-align: right; white-space: nowrap; }

/* Zebra + hover (order matters: hover must come after odd/even) */
table.list tbody tr.odd  { background: var(--row-alt); }
table.list tbody tr.even { background: var(--surface); }
table.list tbody tr:hover { background: var(--hover); }
table.list tbody tr.context-menu-selection,
table.list tbody tr.context-menu-selection td {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}
table.list tbody tr.context-menu-selection a { color: var(--accent) !important; }

/* Issue rows */
table.list.issues td.subject a, table.list tr.issue td.subject a { color: var(--text); font-weight: 500; }
table.list.issues td.subject a:hover, table.list tr.issue td.subject a:hover { color: var(--accent); }
table.list tr.issue.closed td { color: var(--text-3); }
table.list tr.issue.closed td.subject a { color: var(--text-2); font-weight: 400; }
table.list tr.issue.overdue td.due_date { color: var(--danger); font-weight: 600; }

/* Group headers */
table.list tbody tr.group td,
table.list tbody tr.group:hover td {
  padding-top: var(--s2); padding-bottom: var(--s2);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
table.list tr.group span.count,
table.list tr.group span.totals { font-weight: 400; color: var(--text-3); }

/* Scroll wrapper: horizontal scroll without extra borders */
.autoscroll { overflow-x: auto; border-radius: var(--radius); }

/* Progress bars (done ratio) */
table.progress { border-collapse: collapse; }
table.progress td.closed { background: var(--success); }
table.progress td.done   { background: var(--accent); }
table.progress td.todo   { background: var(--border); }


/* ==========================================================================
   10. PRIORITY & STATUS INDICATORS
   --------------------------------------------------------------------------
   Redmine puts classes like  priority-highest / priority-high4 / priority-high3
   / priority-default / priority-low2 / priority-lowest  on issue rows and on
   div.issue (the exact set depends on how many priorities you have enabled and
   which one is the default). Adjust the groups below to match your install.
   --------------------------------------------------------------------------
   Lists:       a coloured dot + tinted text (a table cell can't be a pill).
   Issue page:  real soft "pill" badges (section 13).
   ========================================================================== */
table.list td.priority { white-space: nowrap; color: var(--text-2); }
table.list td.priority::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: var(--s2);
  border-radius: 50%;
  background: var(--border-strong);          /* default / normal */
}

/* High / urgent → soft red */
table.list tr.priority-highest td.priority,
table.list tr.priority-high4   td.priority { color: var(--danger); font-weight: 600; }
table.list tr.priority-highest td.priority::before,
table.list tr.priority-high4   td.priority::before { background: var(--danger); }

/* Elevated → amber */
table.list tr.priority-high3 td.priority,
table.list tr.priority-high  td.priority { color: var(--warning); font-weight: 600; }
table.list tr.priority-high3 td.priority::before,
table.list tr.priority-high  td.priority::before { background: var(--warning); }

/* Low → soft grey */
table.list tr.priority-lowest td.priority,
table.list tr.priority-low2   td.priority,
table.list tr.priority-low    td.priority { color: var(--text-3); }
table.list tr.priority-lowest td.priority::before,
table.list tr.priority-low2   td.priority::before,
table.list tr.priority-low    td.priority::before { background: var(--border); }


/* ==========================================================================
   11. FORMS
   ========================================================================== */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
input:not([type]), select, textarea {
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { line-height: 1.6; padding: var(--s2) var(--s3); }

input::placeholder, textarea::placeholder { color: var(--text-3); }

input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover,
input[type="number"]:hover, input[type="search"]:hover, input[type="url"]:hover,
input[type="date"]:hover, select:hover, textarea:hover { border-color: var(--text-3); }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus,
input[type="tel"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="time"]:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  color: var(--text-3);
  background-color: var(--surface-2);
  cursor: not-allowed;
}

/* Single selects: custom chevron. Multi-selects keep the native look. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a94a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select[multiple], select[size] { padding: var(--s1); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Labels, hints, required marks */
label { color: var(--text); }
.tabular label { font-weight: 500; color: var(--text-2); }
em.info, p em.info { color: var(--text-3); font-size: 12px; }
abbr[title="Required"], span.required { color: var(--danger); }

/* Fields with validation errors */
.errorExplanation, div.fieldWithErrors input, div.fieldWithErrors select,
div.fieldWithErrors textarea, input.error { border-color: var(--danger); }


/* ==========================================================================
   12. BUTTONS
   --------------------------------------------------------------------------
   Secondary (outline) style for most controls, solid accent for form submits.
   Wiki toolbar buttons (.jstb_*) and icon-only buttons are left untouched
   because only class-less <button>s are targeted.
   ========================================================================== */
input[type="submit"], input[type="button"], input[type="reset"],
button:not([class]), a.button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 32px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover,
button:not([class]):hover, a.button:hover, .button:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--text-3);
  text-decoration: none;
}
input[type="submit"]:focus-visible, input[type="button"]:focus-visible,
button:not([class]):focus-visible, a.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Primary: Save / Create / Submit / Apply (but not "Create and continue") */
input[type="submit"]:not([name="continue"]), button[type="submit"]:not([class]),
a.button.primary, .button-primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
input[type="submit"]:not([name="continue"]):hover, button[type="submit"]:not([class]):hover,
a.button.primary:hover, .button-primary:hover {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Destructive outline button: add class "danger" to any a.button / .button */
a.button.danger, .button-danger { color: var(--danger); border-color: var(--danger-border); }
a.button.danger:hover, .button-danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }

input[type="submit"]:disabled, input[type="button"]:disabled, button:not([class]):disabled,
a.button.disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Native file picker button */
input[type="file"]::file-selector-button {
  margin-right: var(--s3);
  padding: 5px 12px;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }


/* ==========================================================================
   13. ISSUE DETAIL PAGE
   ========================================================================== */
div.issue {
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
div.issue .subject h3 { margin: 0 0 var(--s2); font-size: 20px; font-weight: 600; }
div.issue p.author, div.issue .author { color: var(--text-3); }
div.issue .attributes .label { color: var(--text-2); font-weight: 500; }

/* Soft pill badges. width:fit-content shrink-wraps without changing the layout. */
div.issue .status.attribute .value,
div.issue .priority.attribute .value {
  width: fit-content;
  padding: 1px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  border-radius: var(--radius-pill);
}
/* Status: open = accent tint, closed = green tint */
div.issue .status.attribute .value        { color: var(--accent);  background: var(--accent-soft); }
div.issue.closed .status.attribute .value { color: var(--success); background: var(--success-soft); }

/* Priority */
div.issue .priority.attribute .value                  { color: var(--neutral); background: var(--neutral-soft); }
div.issue.priority-highest .priority.attribute .value,
div.issue.priority-high4   .priority.attribute .value { color: var(--danger);  background: var(--danger-soft); }
div.issue.priority-high3   .priority.attribute .value,
div.issue.priority-high    .priority.attribute .value { color: var(--warning); background: var(--warning-soft); }
div.issue.priority-lowest  .priority.attribute .value,
div.issue.priority-low2    .priority.attribute .value,
div.issue.priority-low     .priority.attribute .value { color: var(--text-3);  background: var(--neutral-soft); }


/* ==========================================================================
   14. PAGINATION, CONTEXT MENU, DIALOGS, WIKI, MISC
   ========================================================================== */

/* Pagination */
ul.pages { display: inline-flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
ul.pages li { float: none; margin: 0; padding: 0; list-style: none; }
ul.pages li > a, ul.pages li.current {
  display: block;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
}
ul.pages li > a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
ul.pages li.current { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* Right-click context menu */
#context-menu ul {
  padding: var(--s1);
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
#context-menu li a { border-radius: var(--radius-sm); }
#context-menu a:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }

/* jQuery UI dialogs / autocomplete */
.ui-dialog, .ui-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.ui-widget-overlay { background: #000; opacity: .6; }

/* Wiki / rendered text */
div.wiki pre, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 5px; background: var(--surface-2); border-radius: 4px; }
pre code { padding: 0; background: transparent; }
blockquote { margin: var(--s3) 0; padding: var(--s1) var(--s4); color: var(--text-2); border-left: 3px solid var(--border-strong); background: transparent; }
div.wiki table { border-collapse: collapse; }
div.wiki table th, div.wiki table td { padding: 6px 10px; border: 1px solid var(--border); }
div.wiki table th { background: var(--surface-2); font-weight: 600; }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
#footer {
  padding: var(--s5) var(--gutter);
  font-size: 12px;
  color: var(--text-3);
  background: transparent;
  border: 0;
}
#footer a { color: var(--text-2); }


/* ==========================================================================
   16. SMALL SCREENS — layout is handled by Redmine's own responsive.css;
       we only tune spacing and colours here.
   ========================================================================== */
@media screen and (max-width: 899px) {
  #content { padding: var(--s4); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  #header  { padding-left: var(--s4); padding-right: var(--s4); }
  #top-menu { padding-left: var(--s4); padding-right: var(--s4); }
  #content h2 { font-size: 20px; }
  .mobile-toggle-button, .mobile-toggle-button:hover { color: var(--text-2); }
  #quick-search #q:focus { width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   17. DARK-MODE PATCHES FOR CORE WIDGETS
   Redmine's own stylesheets hard-code white/grey backgrounds in a few places
   that this theme does not restyle elsewhere. They are re-mapped here.
   ========================================================================== */

/* Calendar */
table.cal { border-color: var(--border); }
table.cal thead th, table.cal tbody th { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
table.cal td { background: var(--surface); border-color: var(--border); }
table.cal td.odd { background: var(--row-alt); }
table.cal td.today { background: var(--accent-soft); }
table.cal td p.day-num { color: var(--text-3); }

/* jQuery UI (date picker, autocomplete, dialogs) */
.ui-widget, .ui-widget-content { color: var(--text); background: var(--surface); border-color: var(--border); }
.ui-widget-header { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.ui-widget-content a { color: var(--accent); }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  color: var(--text); background: var(--surface-2); border-color: var(--border-strong);
}
.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus,
.ui-menu .ui-menu-item-wrapper:hover {
  color: var(--text); background: var(--hover-strong); border-color: var(--border-strong);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-state-highlight {
  color: var(--on-accent); background: var(--accent); border-color: var(--accent);
}
.ui-datepicker { padding: var(--s2); }
.ui-datepicker td span, .ui-datepicker td a { text-align: center; border-radius: var(--radius-sm); }

/* Context menu: remove Redmine's white item borders */
#context-menu a { color: var(--text); border: 1px solid transparent; background: transparent; }
#context-menu a.disabled, #context-menu a.disabled:hover { color: var(--text-3); background: transparent; }
#context-menu li ul, #context-menu .submenu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* Wiki editor tabs & misc */
.jstTabs a { color: var(--text-2); }
.jstTabs a.selected { color: var(--text); background: var(--surface); border-color: var(--border); }
.tooltip span.tip { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }