/* =================================================================
   VanillaCore theme — muted gold.
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Source+Code+Pro:wght@400;600&display=swap');
@import url("/assets/application-6dc0ec44.css");

:root {
  --vc-primary:        #f4a024;
  --vc-primary-light:  #f6b24d;
  --vc-primary-dark:   #ab7019;
  --vc-link:           #ffffff;       /* links = white */
  --vc-link-hover:     #f4a024;       /* hover = amber (the one accent) */
  --vc-bg-top:         #000000;       /* page bg gradient: pure black */
  --vc-bg-bot:         #1f2937;       /*                   to gray-800 */
  --vc-bg-soft:        #111827;       /* content/sidebar panels */
  --vc-panel:          #1f2937;       /* dropdowns / elevated panels */
  --vc-border:         #374151;
  --vc-text:           #ffffff;
  --vc-text-muted:     #9ca3af;
}

/* ---------- Typography: Open Sans Light body, Regular headlines,
                           Source Code Pro for code ---------- */
:root { --fonts-main: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

html, body, input, textarea, select, button, .ui-widget {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 300;
  font-stretch: normal;
}
b, strong                    { font-weight: 600; }
h1, h2, h3, h4, h5, h6,
legend, #sidebar h3,
#header h1, #main-menu li a  { font-weight: 400; }
#main-menu li a.selected,
#main-menu li a.selected:hover,
.pagination .current         { font-weight: 600; }
input[type=submit],
button[type=submit]          { font-weight: 600; }

code, pre, tt, kbd, samp, var,
.filename, .monospace,
.ui-autocomplete .filename   {
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
}

/* ---------- Global surfaces: black -> dark-gray gradient ---------- */
html, body {
  background: linear-gradient(180deg, var(--vc-bg-top) 0%, var(--vc-bg-bot) 100%) fixed;
  color: var(--vc-text);
}
#wrapper, #wrapper2,
#wrapper3, #main     { background: transparent; }

/* ---------- Links: white, amber on hover. Orange is ACCENT only. ---------- */
a, a:link, a:visited        { color: var(--vc-link); text-decoration: none; }
a:hover, a:active           { color: var(--vc-link-hover); text-decoration: underline; }

/* ---------- Top menu ---------- */
#top-menu {
  background: rgba(0, 0, 0, 0.55);
  color: var(--vc-text-muted);
  border-bottom: 1px solid var(--vc-border);
}
#top-menu a, #top-menu a:link, #top-menu a:visited {
  color: var(--vc-text-muted);
  font-weight: normal;
}
#top-menu a:hover, #top-menu a.selected {
  color: var(--vc-text);
  text-decoration: none;
}
#top-menu #loggedas       { color: var(--vc-text-muted); }
#top-menu #loggedas a,
#top-menu #loggedas a:link,
#top-menu #loggedas a:visited { color: var(--vc-link); }

/* ---------- Header — app title + logo ----------
   Brand-inspired header (https://vanillacore.net reference):
     - Generous breathing room around logo + title
     - Logo taller than 72px; sits flush to the left/top
     - "VANILLACORE TICKETS" rendered uppercase + letter-spaced
       (HTML still says "VanillaCore Tickets" — rendered-only)
     - Search right-aligned, all three vertically centered */
#header {
  background: transparent;
  color: var(--vc-text);
  border-bottom: 1px solid var(--vc-border);
  padding: 16px 24px 16px 110px;   /* top == bottom; 84px logo + 10px edge + 16px gap */
  position: relative;
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}
#header::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);     /* logo vertically centered → title + search align to it */
  width: 84px;
  height: 84px;
  background: url("/vanillacore-logo.png") no-repeat center/contain;
}

#header > *             { order: 2; }        /* default lane for any extras */
#header > h1            {
  order: 1;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-primary);
  line-height: 1.1;
}
#header > h1 a,
#header > h1 a:link,
#header > h1 a:visited  { color: var(--vc-primary); }
#header > #quick-search {
  order: 3;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
#header h1, #header h1 a, #header h1 a:link, #header h1 a:visited {
  color: var(--vc-primary);          /* headline in gold */
  font-weight: 400;                  /* Open Sans Regular, not Bold */
}
#header a, #header a:link, #header a:visited { color: var(--vc-text-muted); }
#quick-search label { color: var(--vc-text-muted); }
#quick-search input[type=text] {
  background: var(--vc-bg);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
}
select#project_quick_jump_box {
  background: var(--vc-bg);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
}

/* ---------- Main menu tabs ---------- */
#main-menu {
  background: rgba(17, 24, 39, 0.55);
  border-bottom: 1px solid var(--vc-border);
}
#main-menu li a, #main-menu li a:link, #main-menu li a:visited {
  color: var(--vc-text);
  background: transparent;
  border: none;
  font-weight: 500;
}
#main-menu li a:hover {
  color: var(--vc-text);
  background: #1f2937;
}
#main-menu li a.selected,
#main-menu li a.selected:hover {
  color: var(--vc-primary);          /* selected tab: amber accent */
  background: transparent;
  font-weight: 600;
  border-bottom: 2px solid var(--vc-primary);
}
#main-menu .menu-children,
#main-menu .menu-children li a,
#main-menu .menu-children li a:link,
#main-menu .menu-children li a:visited {
  background-color: var(--vc-panel);
  color: var(--vc-text);
}
#main-menu .menu-children li a:hover {
  background-color: var(--vc-primary-dark);
  color: #1a0f00;
}

/* ---------- Content + sidebar panels — breathing room ---------- */
#content, #sidebar {
  background: rgba(17, 24, 39, 0.55);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  border-radius: 10px;
  padding: 24px 28px;
  margin: 6px 18px 18px 18px;
}
#sidebar { padding: 18px 20px; }
#sidebar h3           { color: var(--vc-primary); }   /* sidebar headline gold */
#sidebar a.selected   {
  background: transparent;
  color: var(--vc-primary);
  border-left: 3px solid var(--vc-primary);
  padding-left: 6px;
}

/* ---------- Admin sidebar: white links, gold selected text ----------
   No gold fill — "selected" is conveyed by gold text + a gold
   left-border marker, matching the headline accent. */
#admin-menu a,
#admin-menu a:link,
#admin-menu a:visited { color: var(--vc-text); }
#admin-menu a:hover   { color: var(--vc-primary); background: rgba(244,160,36,0.06); }
#admin-menu a.selected,
#admin-menu a.selected:hover {
  background: transparent;
  color: var(--vc-primary);
  border-left: 3px solid var(--vc-primary);
  padding-left: 6px;
}
/* Icon on selected: explicit override (don't rely on currentColor —
   some sprites ignore it) */
#admin-menu a.selected .icon-svg,
#admin-menu a.selected:hover .icon-svg         { stroke: var(--vc-primary); fill: none; }
#admin-menu a.selected .icon-svg-filled,
#admin-menu a.selected:hover .icon-svg-filled  { fill: var(--vc-primary); stroke: none; }
#sidebar a.selected .icon-svg                  { stroke: var(--vc-primary); fill: none; }
#sidebar a.selected .icon-svg-filled           { fill: var(--vc-primary); stroke: none; }

/* ---------- HEADLINES — all gold (this is the whole policy) ---------- */
h1, h2, h3, h4, h5, h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
fieldset > legend,
legend {
  color: var(--vc-primary);
  border-color: var(--vc-border);
}

/* ---------- Tables ---------- */
table.list                           { background: var(--vc-bg-soft); }
table.list th                        {
  background: #0b0f14;
  color: var(--vc-text);
  border-bottom: 1px solid var(--vc-border);
}
table.list td                        { border-bottom: 1px solid var(--vc-border); color: var(--vc-text); }
table.list tr.odd td, table.list tr.odd   { background: transparent; }
table.list tr.even td, table.list tr.even { background: rgba(255,255,255,0.025); }
table.list tr:hover td               { background: rgba(244,160,36,0.06); }

/* ---------- .box panels (My account / Settings / Search form / etc.) ----------
   Redmine wraps form groups in div.box which defaults to near-white;
   that was the reason forms rendered white-on-white. */
.box,
fieldset,
fieldset.box,
div.modal {
  background: rgba(17, 24, 39, 0.55);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  border-radius: 8px;
}
.box label, .box p, .box span, .box li, .box dt, .box dd,
fieldset label, fieldset p, fieldset span, fieldset li {
  color: var(--vc-text);
}
.box h3, .box h4, fieldset h3, fieldset h4 { color: var(--vc-primary); }

/* Tables INSIDE panels default to white rows — reset to panel dark. */
.box table, .box table td, .box table th,
fieldset table, fieldset table td, fieldset table th,
table.list:not(.odd-even) tbody tr:nth-child(odd),
table.list:not(.odd-even) tbody tr:nth-child(even),
.odd, .even,
tr.group td {
  background-color: transparent !important;
  color: var(--vc-text);
}
table.list:not(.odd-even) tbody tr:nth-child(even),
.even {
  background-color: rgba(255,255,255,0.03) !important;
}
table.list tr:hover td {
  background-color: rgba(244,160,36,0.08) !important;
}

/* Modals + dropdowns should also read as dark. */
div.modal { background: var(--vc-bg-soft); }

/* ---------- Form fields ---------- */
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=url],
input[type=number],
input[type=tel],
input[type=date],
textarea, select {
  background: var(--vc-bg);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 3px rgba(244,160,36,0.18);
}
label { color: var(--vc-text); }

/* ---------- Primary buttons (submits only) ---------- */
input[type=submit], button[type=submit] {
  background: var(--vc-primary);
  color: #1a0f00;
  border: 1px solid var(--vc-primary-dark);
  font-weight: 600;
}
input[type=submit]:hover, button[type=submit]:hover {
  background: var(--vc-primary-light);
  color: #1a0f00;
}

/* ---------- Flash / nodata / info blocks ---------- */
div.flash.notice, p.nodata {
  background: rgba(244,160,36,0.08);
  border: 1px solid var(--vc-border);
  color: var(--vc-text);
}
div.flash.error {
  background: rgba(239,68,68,0.14);
  border: 1px solid #ef4444;
  color: var(--vc-text);
}
div.flash.warning {
  background: rgba(245,158,11,0.14);
  border: 1px solid #f59e0b;
  color: var(--vc-text);
}

/* ---------- Login form ---------- */
#login-form {
  background: var(--vc-bg-soft);
  border: 1px solid var(--vc-border);
  color: var(--vc-text);
  border-radius: 8px;
}

/* ---------- Contextual actions (Apply / Clear / Save) ---------- */
.contextual a, .contextual a:link, .contextual a:visited,
.icon, .icon:link, .icon:visited {
  color: var(--vc-link);
}
.contextual a:hover, .icon:hover { color: var(--vc-link-hover); }

/* ---------- SVG icons — follow text color (currentColor) ----------
   Each icon picks up the color of its parent link/element, so text
   and icon never clash (no more orange-icons-next-to-blue-text). */
a.icon .icon-svg,
a.icon-only .icon-svg,
span.icon-actions .icon-svg,
.contextual .icon-svg,
#admin-menu a .icon-svg,
div.flash svg.icon-svg {
  stroke: currentColor;
  fill: none;
}
a.icon .icon-svg-filled,
a.icon-only .icon-svg-filled,
.contextual .icon-svg-filled,
#admin-menu a .icon-svg-filled {
  stroke: none;
  fill: currentColor;
}
/* Admin selected row: currentColor becomes dark (text flipped to
   dark by .selected rule above), so icons auto-read as dark too. */

/* ---------- Tabs on issue/wiki/project pages ---------- */
div.tabs ul li a,
div.tabs ul li a:link,
div.tabs ul li a:visited {
  color: var(--vc-text-muted);
  background: var(--vc-panel);
  border-color: var(--vc-border);
}
div.tabs ul li a.selected,
div.tabs ul li a.selected:hover {
  background: var(--vc-bg-soft);
  color: var(--vc-primary);
  border-bottom-color: var(--vc-bg-soft);
}

/* ---------- Dropdowns (Jump to project, user menu, …) ---------- */
.drdn-content {
  background: var(--vc-bg-soft);
  border: 1px solid var(--vc-border);
  color: var(--vc-text);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.drdn-trigger            { color: var(--vc-text); background: var(--vc-bg); border-color: var(--vc-border); }
.drdn-content .quick-search input,
.drdn-content input.autocomplete {
  background: var(--vc-bg);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
}
.drdn-content .quick-search svg { stroke: var(--vc-text-muted); }
.drdn-items                     { background: transparent; }
.drdn-items>a,
.drdn-items>a:link,
.drdn-items>a:visited           { color: var(--vc-link); background: transparent; }
.drdn-items>a:hover             { color: var(--vc-link-hover); background: var(--vc-panel); }
.drdn-items>a.selected,
.drdn-items>a.selected:hover    { color: var(--vc-primary); background: var(--vc-panel); }
.drdn-items>span                { color: var(--vc-text-muted); }

/* ---------- Pagination ---------- */
.pagination a, .pagination a:link, .pagination a:visited { color: var(--vc-link); }
.pagination .current                                     { color: var(--vc-primary); font-weight: 700; }

/* ---------- Footer ---------- */
#footer {
  background: transparent;
  color: var(--vc-text-muted);
  border-top: 1px solid var(--vc-border);
}
#footer a, #footer a:link, #footer a:visited { color: var(--vc-text-muted); }
#footer a:hover { color: var(--vc-primary); }

/* ---------- Issue details + journal notes — dark-panel treatment.
   Redmine 6.1 ships div.issue with a pastel-yellow panel and dark
   labels. With our global light-text rule, those labels and the
   description body rendered invisible. Same pattern as .box:
   flip the panel to dark, ensure all inner text is light. */
div.issue,
div.issue.details,
div.journal {
  background: rgba(17, 24, 39, 0.55);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  border-radius: 6px;
}
div.issue hr,
div.journal hr { border-color: var(--vc-border); }

/* Attribute grid: left-column labels muted, values full light. */
div.issue table.attributes th,
div.issue .attributes th {
  color: var(--vc-text-muted);
  background: transparent;
}
div.issue table.attributes td,
div.issue .attributes td {
  color: var(--vc-text);
  background: transparent;
}

/* Description body (wiki-rendered markdown inside the issue). */
div.issue .description,
div.issue .description p,
div.issue .description li,
div.issue .description dt,
div.issue .description dd,
div.issue .description td,
div.issue .description th,
div.issue .wiki,
div.journal .wiki,
div.journal .wiki p,
div.journal .wiki li {
  color: var(--vc-text);
}

/* Inline code / backtick spans inside issue and journal bodies. */
div.issue .wiki code,
div.issue .wiki tt,
div.journal .wiki code,
div.journal .wiki tt {
  background: rgba(255,255,255,0.06);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  padding: 0 3px;
  border-radius: 3px;
}

/* Journal headers (#note-N / author / timestamp / contextual). */
div.journal h4 {
  color: var(--vc-text-muted);
  background: transparent;
  border-bottom-color: var(--vc-border);
}
div.journal h4 a,
div.journal h4 a:link,
div.journal h4 a:visited { color: var(--vc-link); }
div.journal h4 a:hover   { color: var(--vc-link-hover); }

/* ---------- Sticky issue header (scroll-triggered summary bar).
   Redmine's default rule is ID-scoped and hard-sets a white
   background with a light border and drop-shadow, which beats
   our .issue class rule. Because this element is position:fixed
   and floats over arbitrary scroll positions, it needs an
   opaque dark background (not the semi-transparent one used on
   the in-flow .issue panel). */
div#sticky-issue-header {
  background-color: var(--vc-bg-soft);
  border-bottom: 1px solid var(--vc-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  color: var(--vc-text);
}
div#sticky-issue-header .issue-heading,
div#sticky-issue-header .subject { color: var(--vc-text); }
div#sticky-issue-header a,
div#sticky-issue-header a:link,
div#sticky-issue-header a:visited { color: var(--vc-link); }
div#sticky-issue-header a:hover   { color: var(--vc-link-hover); }