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

:root {
  --bg-primary: #0f1923;
  --bg-secondary: #1a2733;
  --bg-tertiary: #243447;
  --bg-card: #1e2d3d;
  --text-primary: #e8edf2;
  --text-secondary: #8899aa;
  --text-muted: #5a6d7e;
  /* Accent = teal/cyan, near-monochrome (12 Jul 2026, revised from the
     dandelion-macro reference: moody teal on near-black, magenta pulled
     way back to just a faint whisper, not a competing hue). */
  --accent: #35b8c4;            /* teal/cyan (primary) */
  --accent-hover: #4ecbd6;
  --accent-dim: rgba(53, 184, 196, 0.15);
  --accent-2: #8a6fa8;          /* muted whisper-violet, used very sparingly */
  --accent-2-dim: rgba(138, 111, 168, 0.10);
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --border: #2a3a4a;
  --sidebar-width: 240px;
  --topbar-height: 56px;

  /* Aliases for FY26 dashboard + partials (added 24 May 2026 17:13 UTC,
     revised 18:15 UTC to fix CD-block over-darkening).
     The FY26 partials reference --text/--text-bright/--text-dim/--card/--card-bg/etc.
     which weren't defined. Map them to existing dark-theme vars where it works,
     and to subtle alpha overlays where the partial expected a near-transparent wash. */
  --text: var(--text-primary);
  --text-bright: #ffffff;
  --text-dim: var(--text-muted);
  --card: var(--bg-card);
  --card-bg: var(--bg-card);
  /* --card-bg-alt: subtle wash, not a solid dark slate. CD-roster cells, generators-recent-rows,
     historical/audit blocks all use this expecting a near-transparent overlay on the card. */
  --card-bg-alt: rgba(255, 255, 255, 0.03);
  --card-border: var(--border);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.25);
  --bg: var(--bg-primary);
  --green: var(--success);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Layout */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s;
}

.sidebar-brand {
  padding: 20px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-brand svg { flex-shrink: 0; }

.sidebar-brand h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.sidebar-brand span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-section {
  padding: 8px 20px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}

.nav-link:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}

.nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Sub-link: nested under a section header (AI → Agents → Skills) */
.nav-link.nav-sublink {
  padding-left: 36px;
  font-size: 13px;
  position: relative;
}
/* Sub-link dash marker removed per Mike, 25 Jul 2026 -- indent kept, no ::before line. */
.nav-link.nav-sublink svg {
  width: 16px;
  height: 16px;
}

/* Main content */
.main-content {
  flex: 1;
  /* min-width: 0 is critical — default min-width:auto on flex items lets content
   * push the flex item wider than the available space, causing horizontal page
   * scroll. min-width:0 forces the flex item to respect parent width and lets
   * inner overflow:auto containers (e.g., .table-scroll) handle internal scroll. */
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Top bar */
.topbar {
  height: var(--topbar-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; color: white; }
.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-tertiary); }

/* Content area */
.content {
  flex: 1;
  min-width: 0;        /* same flex-shrink fix as .main-content */
  padding: 24px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;  /* hard guarantee: never let inner content push the page horizontally */
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 22px;
  font-weight: 700;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue { background: rgba(59,130,246,0.15); color: var(--accent); }
.stat-icon.green { background: rgba(34,197,94,0.15); color: var(--success); }
.stat-icon.amber { background: rgba(245,158,11,0.15); color: var(--warning); }
.stat-icon.red { background: rgba(239,68,68,0.15); color: var(--danger); }

.stat-info h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.stat-info p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Table */
.table-wrap {
  overflow-x: auto;
}
/* Bounded scroll viewport so the HORIZONTAL scrollbar is always reachable
   without scrolling to the bottom of a tall table, with a sticky header that
   stays visible while you scroll. Added 14 Jun 2026. Opt-in via .table-wrap--sticky
   so short tables elsewhere are unaffected. */
.table-wrap--sticky {
  overflow: auto;
  max-height: calc(100vh - 320px);
  min-height: 280px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.table-wrap--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card, #1e2d3d);
}
/* keep the horizontal scrollbar comfortably visible on dark theme */
.table-wrap--sticky::-webkit-scrollbar { height: 12px; width: 12px; }
.table-wrap--sticky::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }
.table-wrap--sticky::-webkit-scrollbar-track { background: #1e293b; }

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

td { color: var(--text-secondary); }

tr:hover td { background: rgba(255,255,255,0.02); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-admin { background: rgba(59,130,246,0.2); color: var(--accent); }
.badge-member { background: rgba(34,197,94,0.2); color: var(--success); }

/* Forms */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.15s;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238899aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}

.alert-error { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }
.alert-success { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }

/* Chat */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 48px);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-message.user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-message.assistant {
  align-self: flex-start;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.chat-message.system {
  align-self: center;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 8px;
  white-space: pre-line;
}

.chat-message.thinking {
  color: var(--text-muted);
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.chat-input-area {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.chat-input-area input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
}

.chat-input-area input:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-input-area button {
  padding: 12px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-input-area button:hover { background: var(--accent-hover); }
.chat-input-area button:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-status {
  text-align: center;
  padding: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.chat-status.connected { color: var(--success); }
.chat-status.error { color: var(--danger); }

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 40px;
}

.login-box .brand {
  text-align: center;
  margin-bottom: 32px;
}

.login-box .brand h1 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 12px;
}

.login-box .brand p {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}

/* Placeholder page styling */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  color: var(--text-muted);
}

.placeholder-content svg { margin-bottom: 16px; opacity: 0.5; }
.placeholder-content h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-secondary); }
.placeholder-content p { font-size: 14px; }

/* File size display */
.file-size {
  color: var(--text-muted);
  font-size: 12px;
}

/* Responsive */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .menu-toggle {
    display: block;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .chat-message {
    max-width: 95%;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  width: 90%;
  max-width: 440px;
}

.modal h3 { margin-bottom: 16px; }


/* ============================================================
   SuperDesign GLASSMORPHISM refresh (25 May 2026, scoped 19:08 UTC)
   Scope: ONLY pages whose <body> has class="glass-dashboard"
   (currently just dashboard.ejs). Other pages keep their original
   styling so dark-on-light budget tables remain readable.
   Rollback: delete this block; backup in
   /root/trantracker/backups/superdesign-glass-20260525/.
   ============================================================ */
:root {
  --gl-bg-base:   #0a1320;
  --gl-bg-glow-a: oklch(0.55 0.18 250);
  --gl-bg-glow-b: oklch(0.55 0.20 295);
  --gl-bg-glow-c: oklch(0.55 0.18 200);
  /* Dark-abstract theme base (12 Jul 2026): deeper near-black void */
  --gl-bg-base: #081726;
  --gl-glass:     rgba(255, 255, 255, 0.06);
  --gl-glass-hi:  rgba(255, 255, 255, 0.10);
  --gl-border:    rgba(255, 255, 255, 0.12);
  --gl-border-hi: rgba(255, 255, 255, 0.20);
  --gl-text:      #f1f5fa;
  --gl-text-dim:  rgba(241, 245, 250, 0.66);
  --gl-blur:      18px;
  --gl-radius:    16px;
  --gl-radius-sm: 10px;
  --gl-shadow:    0 8px 32px rgba(0, 0, 0, 0.35),
                  inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --gl-shadow-hi: 0 14px 40px rgba(0, 0, 0, 0.45),
                  inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --gl-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.glass-dashboard {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--gl-text);
  background: var(--gl-bg-base);
  position: relative;
  min-height: 100vh;
}

/* ---- DARK ABSTRACT THEME (12 Jul 2026, from Mike's uploaded dot-matrix
   duotone reference photo). Deep near-black void with an off-center
   teal->magenta light field on the left and a cool white glow top-right,
   over a masked dot-matrix grille + fine grain. Big negative space keeps
   cards/text legible on the dark right side. ---- */
body.glass-dashboard::before {
  /* Circuit-board tech theme v2 (12 Jul 2026, per Mike: brighter, LESS soft
     glow, MORE transparent, and actual circuit-trace LINES rather than blurry
     blobs -- "futuristic" crisp-line read instead of a diffuse light field). */
  background:
    /* faint wide glow kept minimal, just enough to add depth */
    radial-gradient(ellipse 50% 40% at 60% 20%, rgba(70,200,235,0.14) 0%, transparent 68%),
    radial-gradient(ellipse 34% 28% at 85% 55%, rgba(230,160,80,0.09) 0%, transparent 65%),
    /* brighter navy base -- less black, more "lit board" */
    radial-gradient(ellipse 100% 90% at 50% 25%, #123049 0%, #0d2338 50%, #081726 100%);
  filter: saturate(1.1);
  opacity: 0.7;
  animation: gl-drift 28s ease-in-out infinite alternate;
}
/* Circuit-trace LINE pattern (crisp lines, not soft glow) -- the part of the
   reference Mike called out specifically ("I like the circuit board lines,
   looks futuristic"). Two thin repeating-linear-gradient layers at right
   angles simulate a PCB trace grid; a third diagonal layer breaks the
   uniformity so it doesn't read as a plain grid. Masked to fade out toward
   the edges/bottom so content stays the visual priority. */
body.glass-dashboard::after {
  content: '';
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,210,240,0.10) 0px, rgba(90,210,240,0.10) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(90,210,240,0.07) 0px, rgba(90,210,240,0.07) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(45deg, rgba(230,160,80,0.045) 0px, rgba(230,160,80,0.045) 1px, transparent 1px, transparent 160px),
    radial-gradient(rgba(120,210,240,0.12) 1px, transparent 1.6px);
  background-size: 64px 96px, 64px 96px, 160px 160px, 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 55% 30%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 65% at 55% 30%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 85%);
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* Actual reference photo as a subtle fixed hero wash behind everything
   (slightly less dark overlay so the duotone reads more) */
/* More transparent overall per Mike ("more transparent") -- lighter overlay
   so the trace-line texture and glow read through more, content still clear
   since cards sit on their own opaque/glass surfaces on top. */
body.glass-dashboard {
  background-image:
    linear-gradient(180deg, rgba(8,17,26,0.72), rgba(8,17,26,0.85)),
    url('/img/tt-bg-hero.jpg');
  background-size: cover, cover;
  background-position: center, left top;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
@keyframes gl-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 1%) scale(1.04); }
  100% { transform: translate(2%, -1%) scale(1); }
}

/* --- GLOBAL chrome (sidebar + topbar) glass — promoted from
   body.glass-dashboard to all pages on 25 May 2026 20:36 UTC.
   Content cards on non-glass pages keep their original styling. --- */
.sidebar {
  background: rgba(15, 25, 40, 0.55) !important;
  backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  border-right: 1px solid var(--gl-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}

.topbar {
  background: rgba(15, 25, 40, 0.45) !important;
  backdrop-filter: blur(var(--gl-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(140%);
  border-bottom: 1px solid var(--gl-border) !important;
}

/* Subtle ambient page-bg gradient on EVERY page, behind the chrome.
   Much dimmer than the main dashboard's glow so content stays primary. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(40% 50% at 15% 15%, var(--gl-bg-glow-a) 0%, transparent 60%),
    radial-gradient(40% 50% at 85% 25%, var(--gl-bg-glow-b) 0%, transparent 60%),
    var(--gl-bg-base);
  opacity: 0.18;
  pointer-events: none;
}
/* Override: main dashboard's ::before is brighter + animated (gated rule below) */

body.glass-dashboard .card {
  background: var(--gl-glass) !important;
  backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  box-shadow: var(--gl-shadow);
  transition: border-color 220ms var(--gl-ease),
              box-shadow 220ms var(--gl-ease),
              transform 220ms var(--gl-ease);
}
body.glass-dashboard .card:hover {
  border-color: var(--gl-border-hi) !important;
  box-shadow: var(--gl-shadow-hi);
}
body.glass-dashboard .card-header {
  border-bottom: 1px solid var(--gl-border) !important;
}
body.glass-dashboard .card-header h3 { letter-spacing: -0.01em; }

body.glass-dashboard .stats-grid { gap: 18px; }
body.glass-dashboard .stat-card {
  background: var(--gl-glass) !important;
  backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(160%);
  border: 1px solid var(--gl-border) !important;
  border-radius: var(--gl-radius) !important;
  box-shadow: var(--gl-shadow);
  transition: transform 220ms var(--gl-ease),
              border-color 220ms var(--gl-ease),
              box-shadow 220ms var(--gl-ease);
  position: relative;
  overflow: hidden;
}
body.glass-dashboard .stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.10) 0%,
              rgba(255,255,255,0) 35%,
              rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: inherit;
}
body.glass-dashboard .stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--gl-border-hi) !important;
  box-shadow: var(--gl-shadow-hi),
              0 0 0 1px rgba(53,184,196,0.26),
              0 0 24px rgba(53,184,196,0.15);
}
body.glass-dashboard .stat-card .stat-info h4 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gl-text);
  text-shadow: 0 1px 1px rgba(0,0,0,0.20);
}
body.glass-dashboard .stat-card .stat-info p {
  color: var(--gl-text-dim);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
}
body.glass-dashboard .stat-icon {
  border-radius: var(--gl-radius-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10),
              0 0 18px rgba(0,0,0,0.20);
  backdrop-filter: blur(6px);
}

body.glass-dashboard .page-header h2 {
  letter-spacing: -0.02em;
  font-weight: 650;
  color: var(--gl-text);
}
body.glass-dashboard .page-header p {
  color: var(--gl-text-dim);
  font-size: 14px;
}

body.glass-dashboard .task-stat-chip {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10) !important;
  transition: transform 150ms var(--gl-ease),
              filter 150ms var(--gl-ease),
              border-color 150ms var(--gl-ease);
}
body.glass-dashboard .task-stat-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.20);
  border-color: rgba(255,255,255,0.22) !important;
}

body.glass-dashboard .task-row {
  transition: background 180ms var(--gl-ease);
}
body.glass-dashboard .task-row:hover {
  background: rgba(255,255,255,0.04) !important;
}

body.glass-dashboard .btn,
body.glass-dashboard button {
  transition: transform 100ms var(--gl-ease),
              background 150ms var(--gl-ease),
              box-shadow 150ms var(--gl-ease);
}
body.glass-dashboard .btn:active,
body.glass-dashboard button:active { transform: scale(0.97); }
body.glass-dashboard .btn-primary {
  /* near-monochrome teal gradient, matches the moody dandelion reference */
  background: linear-gradient(135deg, #2aa8b4 0%, #1c8f9c 100%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #05161a !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(53, 184, 196, 0.30),
              inset 0 1px 0 rgba(255,255,255,0.24);
}
body.glass-dashboard .btn-primary:hover {
  filter: brightness(1.12) saturate(1.05);
  box-shadow: 0 6px 22px rgba(53, 184, 196, 0.42),
              inset 0 1px 0 rgba(255,255,255,0.28);
}

body.glass-dashboard input,
body.glass-dashboard select,
body.glass-dashboard textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--gl-text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 150ms var(--gl-ease), box-shadow 150ms var(--gl-ease);
}
body.glass-dashboard input::placeholder,
body.glass-dashboard textarea::placeholder { color: rgba(241,245,250,0.40); }
/* Fix white-on-white dropdown: the open <option> list is rendered by the OS and does
   NOT inherit the translucent glass background, so options need an explicit solid dark
   fill + light text. Applies to every glass-dashboard select across all dashboards. */
body.glass-dashboard select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
body.glass-dashboard select option:checked,
body.glass-dashboard select option:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}
/* Also cover any selects on non-glass views that still sit on a dark surface */
select option { background-color: #1e293b; color: #f1f5f9; }
body.glass-dashboard input:focus,
body.glass-dashboard select:focus,
body.glass-dashboard textarea:focus {
  outline: none;
  border-color: rgba(53,184,196,0.60) !important;
  box-shadow: 0 0 0 3px rgba(53,184,196,0.15),
              0 0 18px rgba(53,184,196,0.18);
}

body.glass-dashboard table,
body.glass-dashboard thead,
body.glass-dashboard tbody,
body.glass-dashboard tr,
body.glass-dashboard th,
body.glass-dashboard td {
  background: transparent !important;
}
body.glass-dashboard th { color: var(--gl-text-dim) !important; border-bottom-color: var(--gl-border) !important; }
body.glass-dashboard td { color: var(--gl-text) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }

@keyframes gl-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.glass-dashboard .page-header { animation: gl-fade-up 500ms var(--gl-ease) both; }
body.glass-dashboard .stats-grid  { animation: gl-fade-up 550ms 80ms var(--gl-ease) both; }
body.glass-dashboard .content > .card { animation: gl-fade-up 600ms 160ms var(--gl-ease) both; }

@media (prefers-reduced-motion: reduce) {
  body.glass-dashboard::before { animation: none; }
  body.glass-dashboard .stat-card,
  body.glass-dashboard .card,
  body.glass-dashboard .task-stat-chip,
  body.glass-dashboard .task-row,
  body.glass-dashboard .btn,
  body.glass-dashboard button,
  body.glass-dashboard .page-header,
  body.glass-dashboard .stats-grid,
  body.glass-dashboard .content > .card {
    transition: none !important;
    animation: none !important;
  }
  body.glass-dashboard .stat-card:hover { transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.glass-dashboard .sidebar,
  body.glass-dashboard .topbar,
  body.glass-dashboard .card,
  body.glass-dashboard .stat-card,
  body.glass-dashboard .task-stat-chip,
  body.glass-dashboard input,
  body.glass-dashboard select,
  body.glass-dashboard textarea {
    background: rgba(20, 30, 48, 0.82) !important;
  }
}
/* ============================================================
   FY26 dashboard glass compatibility layer (25 May 2026 21:10 UTC).
   The FY26 partials hard-code many dark-on-light colors via
   inline style="color:#XXXXXX". Inline styles beat normal CSS,
   so we use [style*="..."] attribute selectors + !important to
   re-map every dark text color into a bright glass-safe equivalent
   when the page runs in glass mode (body.glass-dashboard).
   Backup at /root/trantracker/backups/glass-fy26-20260525/.
   ============================================================ */

/* Greens — obligated / enacted / committed money */
body.glass-dashboard [style*="color:#047857"],
body.glass-dashboard [style*="color: #047857"],
body.glass-dashboard [style*="color:#065f46"],
body.glass-dashboard [style*="color: #065f46"],
body.glass-dashboard [style*="color:#064e3b"],
body.glass-dashboard [style*="color:#059669"],
body.glass-dashboard [style*="color:#0f766e"],
body.glass-dashboard [style*="color:#16a34a"],
body.glass-dashboard [style*="color:#10b981"] {
  color: #34d399 !important;  /* emerald-400 */
}

/* Cyans / teals */
body.glass-dashboard [style*="color:#0891b2"],
body.glass-dashboard [style*="color:#0e7490"],
body.glass-dashboard [style*="color: #155e75"],
body.glass-dashboard [style*="color:#155e75"] {
  color: #67e8f9 !important;  /* cyan-300 */
}

/* Ambers / oranges — committed / pending / pre-tax */
body.glass-dashboard [style*="color:#b45309"],
body.glass-dashboard [style*="color:#c2410c"],
body.glass-dashboard [style*="color: #92400e"],
body.glass-dashboard [style*="color:#92400e"],
body.glass-dashboard [style*="color:#713f12"],
body.glass-dashboard [style*="color:#d97706"],
body.glass-dashboard [style*="color:#f59e0b"],
body.glass-dashboard [style*="color: #fbbf24"],
body.glass-dashboard [style*="color:#fbbf24"] {
  color: #fbbf24 !important;  /* amber-400 */
}

/* Reds — alerts / shortfalls */
body.glass-dashboard [style*="color:#dc2626"],
body.glass-dashboard [style*="color:#b91c1c"] {
  color: #fca5a5 !important;  /* red-300 */
}

/* Purples — POM / shaping / FY28 */
body.glass-dashboard [style*="color:#7c3aed"],
body.glass-dashboard [style*="color:#581c87"],
body.glass-dashboard [style*="color:#5b21b6"],
body.glass-dashboard [style*="color: #5b21b6"],
body.glass-dashboard [style*="color:#8b5cf6"] {
  color: #c4b5fd !important;  /* violet-300 */
}

/* Blues — enacted base / RPP */
body.glass-dashboard [style*="color:#1d4ed8"],
body.glass-dashboard [style*="color: #1e3a8a"],
body.glass-dashboard [style*="color:#1e3a8a"],
body.glass-dashboard [style*="color: #1e40af"],
body.glass-dashboard [style*="color:#1e40af"],
body.glass-dashboard [style*="color:#2563eb"] {
  color: #93c5fd !important;  /* sky-300 */
}

/* Light blues that exist on light bg — keep them bright on glass too */
body.glass-dashboard [style*="color:#bfdbfe"],
body.glass-dashboard [style*="color: #93c5fd"] {
  color: #bfdbfe !important;  /* blue-200 */
}

/* Slates / dark grays — secondary labels */
body.glass-dashboard [style*="color:#0f172a"],
body.glass-dashboard [style*="color: #334155"],
body.glass-dashboard [style*="color:#334155"],
body.glass-dashboard [style*="color:#64748b"],
body.glass-dashboard [style*="color:#6b7280"],
body.glass-dashboard [style*="color:#94a3b8"] {
  color: rgba(241, 245, 250, 0.78) !important;  /* glass text-dim */
}

/* Light tints that were designed for dark bg — keep readable on glass */
body.glass-dashboard [style*="color:#bbf7d0"],
body.glass-dashboard [style*="color:#a7f3d0"],
body.glass-dashboard [style*="color:#fed7aa"],
body.glass-dashboard [style*="color:#ffedd5"],
body.glass-dashboard [style*="color:#fde68a"] {
  /* These are already light — leave as-is, they look fine on glass.
     Listed here so we know they're audited. */
}

/* ---- LIGHT BACKGROUND TILES — the white/very-light-gray cards
   used inside the FY26 partials become a thin frosted-dark panel
   on glass so they don't look like floating white boxes.       ---- */
body.glass-dashboard [style*="background:#f8fafc"],
body.glass-dashboard [style*="background: #f8fafc"],
body.glass-dashboard [style*="background:#f1f5f9"],
body.glass-dashboard [style*="background: #f1f5f9"],
body.glass-dashboard [style*="background:#e2e8f0"],
body.glass-dashboard [style*="background:#cbd5e1"],
body.glass-dashboard [style*="background:#ecfdf5"],
body.glass-dashboard [style*="background:#faf5ff"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
}

/* The dark-blue panels (#1e3a5f / #0f172a / #94a3b8 backgrounds used as
   contrast cells) look great on glass already — just soften the border. */
body.glass-dashboard [style*="background:#1e3a5f"],
body.glass-dashboard [style*="background:#0f172a"] {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Header badges + section headings inside FY26 — some sit on white
   backgrounds and use dark text. With backgrounds now translucent dark,
   the text needs to be light. Cover any uncategorized dark inline color
   by promoting all unmatched inline colors to a sensible light default.

   Safety net: when an element has inline color AND its closest container
   is a card, force light text on inline gray/dark inline color tones. */
body.glass-dashboard .card [style*="font-weight:800"],
body.glass-dashboard .card [style*="font-weight: 800"],
body.glass-dashboard .card [style*="font-weight:700"][style*="color:#"] {
  /* large-number tiles — ensure crisp light foreground. Already handled
     by the color remaps above; no-op here but reserved for future tuning. */
}

/* ============================================================
   FY26 partial-level readability fixes (25 May 2026 21:35 UTC).
   Some FY26 partials build tables on EXPLICIT white wrappers with
   dark text. The global glass td color (var(--gl-text)=white) wipes
   those out. Force dark text back on white-wrapper tables.
   ============================================================ */
/* By Category card — wrapper switches to dark-navy glass to match the page,
   header bar stays dark navy with white text, cell text becomes light. */
body.glass-dashboard .card > div[style*="background:#ffffff"]:has(.by-cat-table),
body.glass-dashboard .card > div[style*="background:#fff"]:has(.by-cat-table) {
  background: rgba(15, 35, 60, 0.55) !important;  /* dark navy glass */
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* The "By Category" heading text inside that wrapper */
body.glass-dashboard .card > div:has(.by-cat-table) > div[style*="color:#0f172a"] {
  color: #ffffff !important;
}
body.glass-dashboard .by-cat-table {
  border-color: rgba(255,255,255,0.12) !important;
}
body.glass-dashboard .by-cat-table thead th {
  color: #ffffff !important;
  background: #1e3a5f !important;       /* keep the dark-navy header bar */
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}
body.glass-dashboard .by-cat-table tbody td {
  color: #f1f5fa !important;            /* light text on dark navy glass */
  border-bottom-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
body.glass-dashboard .by-cat-table tbody tr { background: transparent !important; }
body.glass-dashboard .by-cat-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.025) !important; }
body.glass-dashboard .by-cat-table tbody tr:hover { background: rgba(99,180,255,0.10) !important; }
/* Progress-bar track — lighter on dark glass */
body.glass-dashboard .by-cat-table tbody td div[style*="background:#e2e8f0"] {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Spend Plan portfolio rollup strip (white-wrapper) — keep dark text */
body.glass-dashboard .card [style*="background:#f1f5f9"] {
  color: #1e293b !important;
}
/* If a partial has explicit color via inline style + a light wrapper bg, that's
   intentional and should win. The earlier inline-color remap already promotes
   most of those to bright glass-safe colors; this is the safety net for raw
   var(--text) cells inside a white-bg widget. */

/* ============================================================
   FY26 IA REBUILD — hero KPI strip + 4-tab nav (25 May 2026 21:30 UTC).
   Activates only inside body.glass-dashboard for the FY26 page;
   harmless elsewhere because selectors are namespaced .fy26-*.
   ============================================================ */

/* HERO KPI strip — 4 large tiles, fully visible above the tabs */
body.glass-dashboard .fy26-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 8px 0 24px;
}
@media (max-width: 1100px) {
  body.glass-dashboard .fy26-hero { grid-template-columns: repeat(2, 1fr); }
}
body.glass-dashboard .fy26-hero-tile {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1),
              border-color 220ms cubic-bezier(0.4,0,0.2,1),
              box-shadow 220ms cubic-bezier(0.4,0,0.2,1);
}
body.glass-dashboard .fy26-hero-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
  border-radius: inherit;
}
body.glass-dashboard .fy26-hero-tile::after {
  /* accent strip on left edge — differentiates the 4 tiles */
  content: '';
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.85;
}
body.glass-dashboard .fy26-hero-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 14px 40px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.14);
}
body.glass-dashboard .fy26-hero-enacted   { color: #93c5fd; }  /* sky-300 */
body.glass-dashboard .fy26-hero-obligated { color: #34d399; }  /* emerald-400 */
body.glass-dashboard .fy26-hero-committed { color: #fbbf24; }  /* amber-400 */
body.glass-dashboard .fy26-hero-available { color: #c4b5fd; }  /* violet-300 */

body.glass-dashboard .fy26-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.92;
  margin-bottom: 10px;
}
body.glass-dashboard .fy26-hero-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
  line-height: 1.05;
}
body.glass-dashboard .fy26-hero-sub {
  font-size: 12px;
  color: rgba(241,245,250,0.66);
  margin-top: 8px;
  font-weight: 500;
}

/* 4-TAB NAV — frosted pill row */
body.glass-dashboard .fy26-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 24px;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
@media (max-width: 760px) {
  body.glass-dashboard .fy26-tabs { grid-template-columns: repeat(2, 1fr); }
}
body.glass-dashboard .fy26-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(241,245,250,0.72);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 180ms cubic-bezier(0.4,0,0.2,1),
              color 180ms cubic-bezier(0.4,0,0.2,1),
              border-color 180ms cubic-bezier(0.4,0,0.2,1),
              transform 180ms cubic-bezier(0.4,0,0.2,1);
}
body.glass-dashboard .fy26-tab:hover {
  background: rgba(255,255,255,0.05);
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
}
body.glass-dashboard .fy26-tab.is-active {
  background: linear-gradient(135deg, rgba(99,180,255,0.20), rgba(180,140,255,0.18));
  border-color: rgba(99,180,255,0.40);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(99,180,255,0.18),
              inset 0 1px 0 rgba(255,255,255,0.14);
}
body.glass-dashboard .fy26-tab-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
body.glass-dashboard .fy26-tab-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.glass-dashboard .fy26-tab-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* Tab panels */
body.glass-dashboard .fy26-tabpanel {
  animation: gl-fade-up 350ms cubic-bezier(0.4,0,0.2,1) both;
}
body.glass-dashboard .fy26-tabpanel[hidden] { display: none; }

/* RPP / DIA sub-tab toggle (inside Execution tab).
   Each tier table is too wide to be side-by-side, so we toggle. */
body.glass-dashboard .fy26-subtabs {
  display: inline-flex;
  gap: 6px;
  margin: 24px 0 12px;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.glass-dashboard .fy26-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: rgba(241,245,250,0.78);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.4,0,0.2,1),
              color 150ms cubic-bezier(0.4,0,0.2,1),
              border-color 150ms cubic-bezier(0.4,0,0.2,1);
}
body.glass-dashboard .fy26-subtab:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.04);
}
body.glass-dashboard .fy26-subtab.is-active {
  color: #ffffff;
  background: rgba(99,180,255,0.16);
  border-color: rgba(99,180,255,0.35);
}
body.glass-dashboard .fy26-subtab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}
body.glass-dashboard .fy26-subtab-meta {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
body.glass-dashboard .fy26-subpanel { animation: gl-fade-up 280ms cubic-bezier(0.4,0,0.2,1) both; }
body.glass-dashboard .fy26-subpanel[hidden] { display: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.glass-dashboard .fy26-hero-tile,
  body.glass-dashboard .fy26-tab,
  body.glass-dashboard .fy26-tabpanel {
    transition: none !important;
    animation: none !important;
  }
  body.glass-dashboard .fy26-hero-tile:hover { transform: none; }
}
/* ============================================================
   End SuperDesign glassmorphism block
   ============================================================ */

/* ============================================================
   Global dark-theme date-picker icon fix (added 14 Jun 2026)
   The native <input type="date"> calendar indicator renders as a
   dark glyph -> invisible on TT's dark inputs. Recolor it to a
   light, clearly-visible icon app-wide WITHOUT changing the native
   click-to-open picker behavior Mike likes. Also make the popup
   render dark via color-scheme.
   ============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  color-scheme: dark;
}
/* Replace the native dark glyph with our own light calendar SVG (data URI).
   Using background-image (not filter) so it can't be ignored or out-specified.
   White-stroke calendar on transparent ground; sized to the indicator box. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
  opacity: 1 !important;
  border-radius: 3px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e8edf2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') !important;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(59,130,246,0.25);
}

/* --- Topbar weather widget (added 15 Jun 2026) --- */
.tt-weather {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: default;
  user-select: none;
  line-height: 1;
}
.tt-weather-icon { font-size: 16px; }
.tt-weather-temp { font-weight: 600; color: var(--text-primary, var(--text-secondary)); }
@media (max-width: 600px) {
  .tt-weather-temp { display: none; }
}

/* --- Weather widget: location label + inline editor (added 15 Jun 2026) --- */
.tt-weather { cursor: pointer; }
.tt-weather:hover { border-color: var(--accent); }
.tt-weather-loc {
  font-size: 11px;
  color: var(--text-dim, #7a8a99);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-weather-edit {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-weather-edit input {
  width: 130px;
  padding: 5px 9px;
  border-radius: 14px 0 0 14px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-primary, #e6edf3);
  font-size: 13px;
  outline: none;
}
.tt-weather-edit input:focus { border-color: var(--accent); }
.tt-weather-edit button {
  padding: 5px 10px;
  border-radius: 0 14px 14px 0;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
@media (max-width: 700px) {
  .tt-weather-loc { display: none; }
}

/* --- Weather widget glass-mode visibility (added 15 Jun 2026) --- */
body.glass-dashboard .tt-weather {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #e6edf3 !important;
}
body.glass-dashboard .tt-weather-temp { color: #ffffff !important; }
body.glass-dashboard .tt-weather-loc { color: #c7d3e2 !important; }
/* ensure the pill is always at least faintly visible even off-glass */
.tt-weather { background: rgba(255,255,255,0.07); }

/* ============================================================
   SITEWIDE PREMIUM REFRESH (12 Jul 2026, redesign-existing-projects
   skill). Extends the glass-dashboard system already in place with
   the same upgrades applied to the home dashboard: characterful
   display font + tabular figures on numbers, a single considered
   accent used consistently, real hover/active/focus states, and
   sentence-case labels. Cascades automatically to every page that
   uses the shared .stat-card / .card / .page-header / button /
   input classes (Projects, FY26 Budget, AI Agents, Tasks, etc.) —
   no per-page markup rewrite needed. Additive on top of the
   existing glass rules above; does not remove them.
   ============================================================ */

/* Display font for headlines + all numeric stat values */
.page-header h2,
.stat-info h4,
.stat-card .stat-info h4,
.card-header h3 {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}
.stat-info h4, .stat-card .stat-info h4 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Sentence case for stat labels (was uppercase tracked labels site-wide) */
body.glass-dashboard .stat-card .stat-info p,
.stat-info p {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
}

/* Stat tiles: replace the plain border+shadow look with an accent rail,
   matching the home-dashboard tiles. Auto-detects the icon color class
   already present (blue/green/amber/red) and rails the card with it. */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: 0.85; z-index: 1;
}
.stat-card:has(.stat-icon.green)::after { background: var(--success); }
.stat-card:has(.stat-icon.amber)::after { background: var(--warning); }
.stat-card:has(.stat-icon.red)::after   { background: var(--danger); }
.stat-card:has(.stat-icon.blue)::after  { background: var(--accent); }
.stat-card:hover { transform: translateY(-2px); }

/* Real focus rings site-wide (accessibility gap the redesign audit flags) */
button:focus-visible, .btn:focus-visible, a.hd-link:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 143, 247, 0.35) !important;
}

/* Press feedback on all buttons/links styled as buttons */
.btn:active, button:active { transform: scale(0.97); }

/* Table numeric columns: tabular figures for cleaner alignment
   (budget/$ columns, counts) without touching table layout. */
td.num, td[data-num], .tnum { font-variant-numeric: tabular-nums; }