/* Vector-C2 themes. public/js/theme.js sets <html data-theme="...">; each user picks one.
   - tactical  (default) light: white panels, a black command rail, olive and gold, Chakra Petch.
   - nightops  dark: charcoal and near-black, orange, Lato headings and Hind text.
   Both use square corners, uppercase italic page titles and letter-spaced labels, in the
   style of tactical equipment brands. app.css holds the layout; this file only restyles it. */

/* ======================================================================= Tactical (light) */
html[data-theme="tactical"] {
  color-scheme: light;
  --bg: #f4f4f1;
  --panel: #ffffff;
  --panel-2: #f0efe8;
  --line: #dddbd0;
  --ink: #141414;
  --ink-2: #3b3b37;
  --muted: #6b6a62;
  --accent: #8e8b5e;          /* olive */
  --accent-hover: #7f7d54;
  --accent-text: #5f5d39;     /* olive dark enough for text and links on white */
  --accent-ink: #000;
  --second: #dfb62a;          /* gold */
  --good: #2f7d4f;
  --warn: #a8840f;
  --serious: #c25e14;
  --critical: #c62828;
  --info: #3d6e8f;
  --bar: #8e8b5e;
  --radius: 2px; --radius-sm: 2px; --radius-xs: 1px;
  --font: "Chakra Petch", system-ui, "Segoe UI", sans-serif;
  --font-head: "Chakra Petch", system-ui, "Segoe UI", sans-serif;
  /* the left rail: black, like the brand's hero panels */
  --rail: #141414; --rail-2: #1f1f1c; --rail-line: #2c2c28; --rail-ink: #ecebe4; --rail-muted: #a3a296;
}

/* ===================================================================== Night Ops (dark) */
html[data-theme="nightops"] {
  color-scheme: dark;
  --bg: #121215;
  --panel: #1d1e23;
  --panel-2: #25262c;
  --line: #34353c;
  --ink: #f4f4f4;
  --ink-2: #c8c8c8;
  --muted: #8f8f95;
  --accent: #fea526;          /* orange */
  --accent-hover: #ffb547;
  --accent-text: #fea526;
  --accent-ink: #121215;
  --second: #fea526;
  --good: #4caf7a;
  --warn: #f0c24b;
  --serious: #f07c2c;
  --critical: #ef5b52;
  --info: #5aa9e6;
  --bar: #fea526;
  --radius: 2px; --radius-sm: 2px; --radius-xs: 1px;
  --font: "Hind", system-ui, "Segoe UI", sans-serif;
  --font-head: "Lato", system-ui, "Segoe UI", sans-serif;
  --rail: #18191d; --rail-2: #232429; --rail-line: #2e2f35; --rail-ink: #f0f0f0; --rail-muted: #9a9aa0;
}

/* ============================================================== shared by both themes */
html[data-theme] body { font-size: 14.5px; }
/* :where keeps this weaker than component rules (tabs, list rows), which set their own colours. */
:where(html[data-theme]) a { color: var(--accent-text); }

/* Page titles: bold italic capitals with a short accent mark beneath. */
html[data-theme] h1, html[data-theme] .page-head h1 {
  font-family: var(--font-head); font-weight: 700; font-style: italic; text-transform: uppercase;
  letter-spacing: .01em; font-size: 1.75rem; line-height: 1.1;
}
html[data-theme] .page-head h1::after { content: ""; display: block; width: 46px; height: 4px; margin-top: .45rem; background: var(--second); }
html[data-theme="nightops"] .page-head h1::after { content: "//"; width: auto; height: auto; background: none; color: var(--accent); font-size: 1rem; letter-spacing: .05em; margin-top: .2rem; }
html[data-theme] h2 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em; }

/* Section headers: small, bold, spaced capitals. */
html[data-theme] .card > h3, html[data-theme] .card > h2, html[data-theme] .modal header h2 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem;
}
html[data-theme="tactical"] .card > h3 { padding-bottom: .55rem; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
html[data-theme="nightops"] .card > h3 { border-left: 3px solid var(--accent); padding-left: .6rem; margin-bottom: .75rem; }
html[data-theme] .card { box-shadow: none; }
html[data-theme="tactical"] .card, html[data-theme="tactical"] .tile { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }

/* Buttons: square, bold, spaced capitals; the main action in the accent colour. */
html[data-theme] button, html[data-theme] .btn {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem;
  padding: .5rem .9rem;
}
html[data-theme] button.small, html[data-theme] .btn.small { font-size: .7rem; padding: .28rem .6rem; }
html[data-theme] button.big { font-size: .95rem; text-transform: uppercase; }
html[data-theme] button.primary, html[data-theme] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-theme] button.primary:hover, html[data-theme] .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
html[data-theme] button.link { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; color: var(--accent-text); }
html[data-theme] .icon-btn { text-transform: none; letter-spacing: 0; }
html[data-theme="tactical"] button:not(.primary):not(.danger):not(.link):not(.icon-btn), html[data-theme="tactical"] .btn:not(.primary) { background: #fff; border-color: #c9c7ba; color: #141414; }
html[data-theme="tactical"] button:not(.primary):not(.danger):not(.link):not(.icon-btn):hover { border-color: #141414; }

/* Labels, tabs, badges, tables. */
html[data-theme] label { font-weight: 600; }
html[data-theme] .tabs a { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; border-bottom-width: 3px; }
html[data-theme] .tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }
html[data-theme] .badge { text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; font-weight: 700; border-radius: var(--radius-xs); padding: .1rem .45rem; }
html[data-theme] th { font-family: var(--font-head); letter-spacing: .08em; font-size: .72rem; }
html[data-theme] .tile .label, html[data-theme] .tile > small:first-child { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
html[data-theme] .tile .value, html[data-theme] .tile strong { font-family: var(--font-head); }
/* Tiles written as <small>label</small><strong>value</strong><small>note</small> stack like the dashboard's. */
html[data-theme] .tile > small, html[data-theme] .tile > strong { display: block; }
html[data-theme] .tile > strong { font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
html[data-theme="tactical"] .tile { border-top: 3px solid var(--accent); }
html[data-theme="nightops"] .tile { border-top: 3px solid var(--accent); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea { border-radius: var(--radius-sm); }
html[data-theme="tactical"] input, html[data-theme="tactical"] select, html[data-theme="tactical"] textarea { background: #fff; border-color: #cfcdc1; }
html[data-theme] :focus-visible { outline-color: var(--second); }

/* ------------------------------------------------------------------- the left rail */
html[data-theme] .sidebar { background: var(--rail); border-right: 1px solid var(--rail-line); color: var(--rail-ink); }
html[data-theme] .sidebar .brand { border-bottom-color: var(--rail-line); }
html[data-theme] .brand strong { font-family: var(--font-head); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
html[data-theme] .brand small { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; }
html[data-theme] .sidebar .brand small, html[data-theme] .sidebar small { color: var(--rail-muted); }
html[data-theme] .brand-mark { border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); }
html[data-theme] #nav a { color: var(--rail-ink); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; font-weight: 600; border-radius: 0; padding: .6rem .75rem; }
html[data-theme] #nav a:hover { background: var(--rail-2); color: #fff; }
html[data-theme] #nav a.active { background: var(--rail-2); color: #fff; box-shadow: inset 4px 0 0 var(--accent); }
html[data-theme="nightops"] #nav a.active { color: var(--accent); }
html[data-theme] .nav-icon { color: var(--rail-muted); }
html[data-theme] #nav a.active .nav-icon { color: var(--accent); }
html[data-theme] .sidebar-foot { border-top-color: var(--rail-line); }
html[data-theme] .sidebar .conn { color: var(--rail-muted); }
html[data-theme] .sidebar button.link { color: var(--second); }
html[data-theme] .demo-banner { background: var(--second); color: #141414; border-radius: var(--radius-sm); }
html[data-theme] .demo-banner a, html[data-theme] .demo-banner small { color: #141414; }
html[data-theme] .guest-banner { border-radius: var(--radius-sm); }
.theme-pick { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rail-muted, var(--muted)); }
html[data-theme] .sidebar .theme-pick select, .theme-pick select { width: auto; padding: .2rem .35rem; font-size: .78rem; background: var(--rail-2, var(--panel-2)); color: var(--rail-ink, var(--ink)); border-color: var(--rail-line, var(--line)); }

/* ------------------------------------------------------------------- sign-in */
html[data-theme] .login { min-height: 100vh; }
html[data-theme="tactical"] body:has(.login) {
  background: #141414 repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px);
}
html[data-theme="nightops"] body:has(.login) {
  background: #121215 repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 14px);
}
html[data-theme] .login-card { border-radius: var(--radius); border: 0; border-top: 4px solid var(--accent); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
html[data-theme] .login-card .brand strong { font-size: 1.4rem; }
html[data-theme] .login-card h2 { font-family: var(--font-head); font-style: italic; text-transform: uppercase; font-size: 1.35rem; }

/* ------------------------------------------------------------------- field mode */
html[data-theme] .field-head strong { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
html[data-theme] body.field .card > h3 { font-size: .78rem; }
html[data-theme="tactical"] body.field { background: var(--bg); }

/* ------------------------------------------------------------------- odds and ends */
html[data-theme] .toast { border-radius: var(--radius-sm); }
html[data-theme] .modal { border-radius: var(--radius); border-top: 3px solid var(--accent); }
html[data-theme] .banner { border-radius: var(--radius-sm); }
html[data-theme] .msg { border-radius: var(--radius-sm); }
html[data-theme="tactical"] .msg.mine { background: #eeedd9; border-color: #cfcca5; }
html[data-theme] .demo-role { border-left: 3px solid var(--accent); }
html[data-theme] .demo-role strong { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
/* Buttons that hold sentences (role cards, roster lists) keep normal text inside. */
html[data-theme] .demo-role small, html[data-theme] .demo-role span, html[data-theme] .login-list button small {
  text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: .82rem;
}
html[data-theme] .demo-role span { font-weight: 400; }
html[data-theme] .login-list button { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: .9rem; font-weight: 600; }
html[data-theme] .live-dot { background: var(--critical); }