/*
 * Hubblegate Dark Theme for Redmine
 * Matches hubblegate.com design language
 * Colors: #000 bg, #f8f9ff fg, #c7f854 accent, #d3d2ef muted
 * Fonts: Unbounded (headings), Inter (body)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Unbounded:wght@400;500;700&display=swap');

/* ===== CSS Variables ===== */
:root {
  --hg-bg: #000000;
  --hg-bg-elevated: #0a0a0f;
  --hg-bg-card: #111118;
  --hg-bg-input: rgba(248, 249, 255, 0.05);
  --hg-fg: #f8f9ff;
  --hg-fg-muted: #d3d2ef;
  --hg-fg-subtle: #8a89a8;
  --hg-accent: #c7f854;
  --hg-accent-hover: #d4ff6b;
  --hg-accent-dark: #14181c;
  --hg-border: rgba(248, 249, 255, 0.1);
  --hg-border-strong: rgba(248, 249, 255, 0.2);
  --hg-danger: #ff6b6b;
  --hg-warning: #ffd93d;
  --hg-success: #c7f854;
  --hg-info: #74b9ff;
  --hg-radius: 12px;
  --hg-radius-lg: 16px;
  --hg-radius-sm: 8px;
  --fonts-main: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonts-display: 'Unbounded', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Global Reset ===== */
html { overflow-y: scroll; }
body {
  font-family: var(--fonts-main) !important;
  color: var(--hg-fg) !important;
  background: var(--hg-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--hg-accent);
  color: var(--hg-accent-dark);
}

a { color: var(--hg-accent); transition: color 0.2s ease; }
a:hover { color: var(--hg-accent-hover); }

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonts-display) !important;
  color: var(--hg-fg) !important;
}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  color: var(--hg-fg) !important;
}
h4 { border-bottom-color: var(--hg-border) !important; }

/* ===== Layout Wrapper ===== */
#wrapper {
  background: var(--hg-bg) !important;
}

/* ===== Top Menu Bar ===== */
#top-menu {
  background: var(--hg-bg) !important;
  border-bottom: 1px solid var(--hg-border);
  padding: 6px 16px !important;
}
#top-menu a {
  color: var(--hg-fg-muted) !important;
  font-weight: 500 !important;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}
#top-menu a:hover { color: var(--hg-accent) !important; }
#top-menu #loggedas { color: var(--hg-fg-subtle) !important; }

/* ===== Header ===== */
#header {
  background: linear-gradient(180deg, #0a0a14 0%, #000000 100%) !important;
  border-bottom: 1px solid var(--hg-border);
  color: var(--hg-fg) !important;
  padding: 12px 20px 20px 20px !important;
}
#header a { color: var(--hg-fg) !important; }
#header h1 {
  font-family: var(--fonts-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* ===== Quick Search ===== */
#quick-search #q {
  background: var(--hg-bg-input) !important;
  border: 1px solid var(--hg-border) !important;
  color: var(--hg-fg) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 4px 10px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#quick-search #q:focus {
  border-color: var(--hg-accent) !important;
  box-shadow: 0 0 0 3px rgba(199, 248, 84, 0.1), 0 0 20px rgba(199, 248, 84, 0.15) !important;
  outline: none;
}

/* ===== Main Menu ===== */
#main-menu li a {
  color: var(--hg-fg-muted) !important;
  font-family: var(--fonts-main) !important;
  font-weight: 500;
  border-radius: var(--hg-radius-sm) var(--hg-radius-sm) 0 0 !important;
  transition: background 0.2s ease, color 0.2s ease;
  padding: 6px 14px !important;
}
#main-menu li a:hover {
  background: rgba(199, 248, 84, 0.1) !important;
  color: var(--hg-accent) !important;
}
#main-menu li a.selected,
#main-menu li a.selected:hover {
  background: var(--hg-accent) !important;
  color: var(--hg-accent-dark) !important;
  font-weight: 600 !important;
}
#main-menu li a.new-object {
  background-color: rgba(199, 248, 84, 0.15) !important;
  color: var(--hg-accent) !important;
}
#main-menu .menu-children {
  background-color: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: 0 0 var(--hg-radius-sm) var(--hg-radius-sm);
}
#main-menu .menu-children li a {
  color: var(--hg-fg-muted) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
#main-menu .menu-children li a:hover {
  color: var(--hg-accent) !important;
  background-color: rgba(199, 248, 84, 0.1) !important;
}

/* ===== Content Area ===== */
#content {
  color: var(--hg-fg);
  padding: 16px 20px;
}
#content a { color: var(--hg-accent); }
#content a:hover { color: var(--hg-accent-hover); }

/* ===== Sidebar ===== */
#sidebar {
  background: var(--hg-bg-elevated) !important;
  border-left: 1px solid var(--hg-border) !important;
  color: var(--hg-fg-muted);
}
#sidebar h3 { color: var(--hg-fg) !important; font-family: var(--fonts-display) !important; font-size: 0.85rem !important; }
#sidebar hr { background: var(--hg-border) !important; }
#sidebar a { color: var(--hg-accent) !important; }
#sidebar a:hover { color: var(--hg-accent-hover) !important; }

/* ===== Tables ===== */
table.list {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius);
  overflow: hidden;
}
table.list thead th {
  background: var(--hg-bg-elevated) !important;
  color: var(--hg-fg) !important;
  border-bottom: 1px solid var(--hg-border) !important;
  font-family: var(--fonts-display) !important;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px !important;
}
table.list thead th a { color: var(--hg-fg) !important; }
table.list thead th a:hover { color: var(--hg-accent) !important; }
table.list tbody td {
  color: var(--hg-fg) !important;
  border-bottom: 1px solid var(--hg-border) !important;
  padding: 8px 12px !important;
}
table.list tbody tr {
  background: var(--hg-bg) !important;
  transition: background 0.15s ease;
}
table.list tbody tr:hover {
  background: rgba(199, 248, 84, 0.03) !important;
}
table.list tbody tr.odd { background: var(--hg-bg) !important; }
table.list tbody tr.even { background: rgba(248, 249, 255, 0.02) !important; }
table.list tbody tr.odd:hover,
table.list tbody tr.even:hover { background: rgba(199, 248, 84, 0.03) !important; }
table.list tbody td a { color: var(--hg-accent) !important; }
table.list tbody td.checkbox { border-right: none !important; }

/* Generic tables */
table td, table th { color: var(--hg-fg); }
table.attributes th { color: var(--hg-fg-muted) !important; }

/* ===== Buttons ===== */
input[type=submit],
input[type=button],
button:not(.ui-datepicker-trigger),
a.button {
  background: var(--hg-accent) !important;
  color: var(--hg-accent-dark) !important;
  border: none !important;
  border-radius: var(--hg-radius) !important;
  font-family: var(--fonts-display) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  padding: 8px 20px !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
input[type=submit]:hover,
input[type=button]:hover,
button:not(.ui-datepicker-trigger):hover,
a.button:hover {
  background: var(--hg-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(199, 248, 84, 0.3);
}
input[type=submit]:active,
input[type=button]:active,
button:not(.ui-datepicker-trigger):active,
a.button:active {
  transform: translateY(0);
}

/* Danger / delete buttons */
a.icon-del, a.icon-remove {
  color: var(--hg-danger) !important;
}

/* ===== Form Inputs ===== */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=url],
input[type=tel],
textarea,
select {
  background: var(--hg-bg-input) !important;
  border: 1px solid var(--hg-border) !important;
  color: var(--hg-fg) !important;
  border-radius: var(--hg-radius-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--fonts-main) !important;
  font-size: 0.875rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
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,
textarea:focus,
select:focus {
  border-color: var(--hg-accent) !important;
  box-shadow: 0 0 0 3px rgba(199, 248, 84, 0.1), 0 0 20px rgba(199, 248, 84, 0.15) !important;
  outline: none !important;
  background: rgba(248, 249, 255, 0.08) !important;
}
select {
  appearance: auto;
}
option {
  background: var(--hg-bg-card) !important;
  color: var(--hg-fg) !important;
}
::placeholder {
  color: var(--hg-fg-subtle) !important;
  opacity: 0.6;
}
label { color: var(--hg-fg-muted); }

/* ===== Fieldsets / Boxes ===== */
fieldset {
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius) !important;
  background: transparent;
}
fieldset legend {
  color: var(--hg-fg) !important;
  font-family: var(--fonts-display) !important;
  font-weight: 500;
  font-size: 0.9rem;
}
.box {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius) !important;
  color: var(--hg-fg);
  padding: 16px !important;
}

/* ===== Tabs ===== */
div.tabs ul {
  border-bottom: 1px solid var(--hg-border) !important;
}
div.tabs ul li a {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  color: var(--hg-fg-muted) !important;
  border-radius: var(--hg-radius-sm) var(--hg-radius-sm) 0 0 !important;
  font-family: var(--fonts-main) !important;
  font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
}
div.tabs ul li a:hover {
  color: var(--hg-accent) !important;
  background: rgba(199, 248, 84, 0.05) !important;
}
div.tabs ul li a.selected {
  background: var(--hg-bg-card) !important;
  color: var(--hg-accent) !important;
  border-color: var(--hg-border) !important;
  border-bottom-color: var(--hg-bg-card) !important;
}

/* ===== Flash Messages ===== */
#flash_notice, .flash.notice,
div.flash.notice {
  background: rgba(199, 248, 84, 0.1) !important;
  border: 1px solid rgba(199, 248, 84, 0.3) !important;
  color: var(--hg-accent) !important;
  border-radius: var(--hg-radius) !important;
  padding: 12px 16px !important;
}
#flash_error, .flash.error,
div.flash.error {
  background: rgba(255, 107, 107, 0.1) !important;
  border: 1px solid rgba(255, 107, 107, 0.3) !important;
  color: var(--hg-danger) !important;
  border-radius: var(--hg-radius) !important;
  padding: 12px 16px !important;
}
#flash_warning, .flash.warning,
div.flash.warning {
  background: rgba(255, 217, 61, 0.1) !important;
  border: 1px solid rgba(255, 217, 61, 0.3) !important;
  color: var(--hg-warning) !important;
  border-radius: var(--hg-radius) !important;
  padding: 12px 16px !important;
}

/* ===== Issue Priorities ===== */
table.list tr.priority-highest td,
tr.priority-5 td { color: var(--hg-danger) !important; }
table.list tr.priority-high td,
tr.priority-4 td { color: #ffa07a !important; }

/* ===== Issue Status Colors ===== */
.closed { color: var(--hg-fg-subtle) !important; text-decoration: line-through; }

/* ===== Pagination ===== */
p.pagination {
  color: var(--hg-fg-muted);
}
p.pagination a {
  color: var(--hg-fg-muted) !important;
  border-radius: var(--hg-radius-sm);
  padding: 4px 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
p.pagination a:hover {
  background: rgba(199, 248, 84, 0.1);
  color: var(--hg-accent) !important;
}
p.pagination span.current {
  background: var(--hg-accent) !important;
  color: var(--hg-accent-dark) !important;
  border-radius: var(--hg-radius-sm);
  padding: 4px 10px;
  font-weight: 600;
}

/* ===== Context Menu ===== */
#context-menu {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#context-menu li a {
  color: var(--hg-fg) !important;
  transition: background 0.15s ease;
}
#context-menu li a:hover {
  background: rgba(199, 248, 84, 0.1) !important;
  color: var(--hg-accent) !important;
}
#context-menu li.folder > a {
  font-weight: 600;
  color: var(--hg-fg) !important;
}

/* ===== Tooltips ===== */
div.tooltip {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  color: var(--hg-fg) !important;
  border-radius: var(--hg-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ===== Progress Bars ===== */
table.progress {
  border-radius: 20px !important;
  overflow: hidden;
  background: rgba(248, 249, 255, 0.1) !important;
}
table.progress td {
  border: none !important;
}
table.progress td.closed {
  background: var(--hg-accent) !important;
  text-decoration: none !important;
}
table.progress td.done {
  background: rgba(199, 248, 84, 0.5) !important;
}
table.progress td.todo {
  background: rgba(248, 249, 255, 0.08) !important;
}
p.percent { color: var(--hg-fg-muted) !important; }
p.progress-info { color: var(--hg-fg-muted) !important; }

/* ===== Calendar / Date Picker ===== */
.ui-datepicker {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius) !important;
}
.ui-datepicker .ui-datepicker-header {
  background: var(--hg-bg-elevated) !important;
  color: var(--hg-fg) !important;
  border: none !important;
}
.ui-datepicker td a {
  color: var(--hg-fg) !important;
  background: transparent !important;
}
.ui-datepicker td a:hover {
  background: rgba(199, 248, 84, 0.1) !important;
  color: var(--hg-accent) !important;
}
.ui-datepicker td a.ui-state-active {
  background: var(--hg-accent) !important;
  color: var(--hg-accent-dark) !important;
}

/* ===== Wiki ===== */
div.wiki {
  color: var(--hg-fg);
}
div.wiki a { color: var(--hg-accent); }
div.wiki a.new { color: var(--hg-danger); }
div.wiki code, div.wiki pre {
  background: var(--hg-bg-elevated) !important;
  border: 1px solid var(--hg-border) !important;
  color: var(--hg-fg) !important;
  border-radius: var(--hg-radius-sm) !important;
}
div.wiki pre {
  padding: 12px 16px !important;
}
div.wiki blockquote {
  border-left: 3px solid var(--hg-accent) !important;
  background: rgba(199, 248, 84, 0.03) !important;
  color: var(--hg-fg-muted) !important;
  padding: 8px 16px;
  border-radius: 0 var(--hg-radius-sm) var(--hg-radius-sm) 0;
}
div.wiki table {
  border: 1px solid var(--hg-border);
}
div.wiki table th {
  background: var(--hg-bg-elevated);
  color: var(--hg-fg);
  border: 1px solid var(--hg-border);
}
div.wiki table td {
  border: 1px solid var(--hg-border);
  color: var(--hg-fg);
}

/* ===== Issue Detail ===== */
div.issue {
  background: var(--hg-bg-card);
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  padding: 16px;
}
div.issue .subject h3 {
  color: var(--hg-fg) !important;
  font-family: var(--fonts-display) !important;
}
.attributes-group {
  border-bottom: 1px solid var(--hg-border);
}

/* ===== Journals / History ===== */
div.journal {
  border-bottom: 1px solid var(--hg-border);
}
div.journal h4 { 
  color: var(--hg-fg-muted) !important; 
  font-family: var(--fonts-main) !important;
}
div.journal .details { color: var(--hg-fg-subtle); }
div.journal .wiki { color: var(--hg-fg); }

/* ===== My Page Blocks ===== */
.mypage-box {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-lg) !important;
}

/* ===== Projects List ===== */
ul.projects li a.project {
  color: var(--hg-fg) !important;
  font-family: var(--fonts-display) !important;
  font-weight: 500;
}
ul.projects li a.project:hover {
  color: var(--hg-accent) !important;
}

/* ===== Gantt Chart ===== */
.gantt_hdr { color: var(--hg-fg-muted) !important; }

/* ===== Contextual Links ===== */
.contextual a {
  color: var(--hg-fg-subtle) !important;
}
.contextual a:hover {
  color: var(--hg-accent) !important;
}

/* ===== Icons / SVG ===== */
svg { fill: currentColor; }
a svg, .icon svg { opacity: 0.7; }
a:hover svg, .icon:hover svg { opacity: 1; }

/* ===== Login Page ===== */
#login-form {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
#login-form label {
  color: var(--hg-fg) !important;
  font-family: var(--fonts-display) !important;
  font-weight: 400;
  font-size: 0.85rem;
}
#login-form input[type=text],
#login-form input[type=password] {
  border-radius: var(--hg-radius) !important;
  padding: 12px 16px !important;
}

/* ===== Toolbar / Actions Bar ===== */
.query-columns {
  color: var(--hg-fg);
}
.query-columns label { color: var(--hg-fg-muted); }

/* ===== Footer ===== */
#footer {
  background: var(--hg-bg) !important;
  border-top: 1px solid var(--hg-border) !important;
  color: var(--hg-fg-subtle) !important;
  font-size: 0.75rem;
  padding: 12px 20px;
}
#footer a {
  color: var(--hg-fg-subtle) !important;
}
#footer a:hover {
  color: var(--hg-accent) !important;
}

/* ===== Misc Overrides ===== */
hr {
  border: none;
  border-top: 1px solid var(--hg-border);
}
.splitcontent { border: none; }
.splitcontentleft { border: none; }
.splitcontentright { border: none; }
p.info { color: var(--hg-fg-subtle); }
em.info { color: var(--hg-fg-subtle); font-style: italic; }

/* Diff */
.diff_in { background: rgba(199, 248, 84, 0.1) !important; }
.diff_out { background: rgba(255, 107, 107, 0.1) !important; }

/* Text formatting toolbar */
.jstEditor textarea { 
  background: var(--hg-bg-input) !important; 
  color: var(--hg-fg) !important; 
  border: 1px solid var(--hg-border) !important;
  border-radius: 0 0 var(--hg-radius-sm) var(--hg-radius-sm) !important;
}
.jstBlock .jstTabs ul li span {
  background: var(--hg-bg-elevated) !important;
  color: var(--hg-fg-muted) !important;
  border-color: var(--hg-border) !important;
}
.jstBlock .jstTabs ul li span.jstTabActive {
  background: var(--hg-bg-card) !important;
  color: var(--hg-accent) !important;
}

/* Autocomplete */
div.autocomplete {
  background: var(--hg-bg-card) !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-sm) !important;
  color: var(--hg-fg) !important;
}
div.autocomplete ul li {
  color: var(--hg-fg) !important;
}
div.autocomplete ul li.selected {
  background: rgba(199, 248, 84, 0.15) !important;
  color: var(--hg-accent) !important;
}

/* Error messages on forms */
#errorExplanation {
  background: rgba(255, 107, 107, 0.05) !important;
  border: 1px solid rgba(255, 107, 107, 0.2) !important;
  border-radius: var(--hg-radius) !important;
  color: var(--hg-danger) !important;
}
#errorExplanation h2, #errorExplanation p { color: var(--hg-danger) !important; }

/* Admin menu */
#admin-menu a {
  color: var(--hg-fg-muted) !important;
  transition: color 0.2s ease;
}
#admin-menu a:hover, #admin-menu a.selected {
  color: var(--hg-accent) !important;
}

/* Treeview */
.treeview .tree-root .tree-folder-header {
  color: var(--hg-fg);
}

/* Optgroups in selects */
optgroup {
  background: var(--hg-bg-card) !important;
  color: var(--hg-fg) !important;
}

/* Checkboxes focus */
input[type=checkbox]:focus,
input[type=radio]:focus {
  outline: 2px solid var(--hg-accent);
  outline-offset: 2px;
}

/* ===== Welcome Page ===== */
.controller-welcome #content .splitcontentleft,
.controller-welcome #content .splitcontentright {
  color: var(--hg-fg);
}