/* ============================================================
   ATOM INVENTORY — Mica / Frosted Glass Design System
   Windows 10 Mica + AMOLED Dark + Ultra-compact mode
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  /* Ink scale */
  --ink-950: #0a0f1a;
  --ink-900: #111827;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50: #f8fafc;
  /* Accent — Teal */
  --accent-700: #0b6e6d;
  --accent-600: #0d9488;
  --accent-500: #14b8a6;
  --accent-400: #2dd4bf;
  --accent-300: #5eead4;
  /* Semantic */
  --danger-600: #dc2626;
  --danger-500: #ef4444;
  --success-600: #16a34a;
  --success-500: #22c55e;
  /* Surfaces */
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  /* Glass */
  --glass-blur: 20px;
  --glass-border: rgba(148, 163, 184, 0.18);
  /* Sticky table columns — fully opaque so scrolled-past columns can't bleed through */
  --sticky-cell-bg: #fbfcfd;
  --sticky-cell-hover-bg: #edf7f5;
  --sticky-head-bg: #f3f6fa;
  --scrollbar-thumb: rgba(100, 116, 139, 0.35);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.6);
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.10), 0 8px 10px -6px rgba(15,23,42,0.04);
  /* Radii */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  /* Sidebar */
  --sidebar-w: 260px;
  --sidebar-w-compact: 62px;
  /* Compact row padding */
  --row-py: 0.62rem;
  --row-py-compact: 0.15rem;
  --row-font: 0.88rem;
  --row-font-compact: 0.78rem;
  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
}

* { box-sizing: border-box; }

/* Reserve the vertical scrollbar track so content doesn't shift ~15px sideways
   when navigating between short and tall pages. */
html { scrollbar-gutter: stable; }

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}
.btn-ghost:focus-visible,
.btn-icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(20,184,166,0.35) !important;
  outline: none;
}
.sidebar-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-400);
}

/* ---- Body ---- */
body {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(20,184,166,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(99,102,241,0.04) 0%, transparent 50%),
    linear-gradient(135deg, #f0f4f8, #f8fafc 30%, #f0f2f9 60%, #eef2f7);
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6,.topbar-heading,.brand-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur) var(--ease);
}
body.sidebar-compact .app-shell {
  grid-template-columns: var(--sidebar-w-compact) 1fr;
}

/* ============================================================
   SIDEBAR — Mica dark glass
   ============================================================ */
.sidebar {
  background: rgba(8, 13, 24, 0.96);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  color: var(--ink-300);
  padding: 1.25rem 0.85rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-right: 1px solid rgba(255,255,255,0.05);
  overflow-y: auto;
  overflow-x: hidden;
  width: var(--sidebar-w);
  transition: width var(--dur) var(--ease), padding var(--dur) var(--ease);
}
body.sidebar-compact .sidebar {
  width: var(--sidebar-w-compact);
  padding: 1.25rem 0.45rem 1rem;
  align-items: center;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.2rem 0.35rem;
  min-height: 42px;
  overflow: hidden;
  white-space: nowrap;
}
.brand-mark {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  box-shadow: 0 0 12px rgba(20,184,166,0.25);
}
.brand-text { transition: opacity var(--dur) var(--ease); }
body.sidebar-compact .brand-text { opacity: 0; width: 0; overflow: hidden; }
/* Right-aligned in the expanded brand row (replaces Bootstrap's `ms-auto`,
   which is !important and couldn't be reset for the compact rail). */
.sidebar-brand .sidebar-toggle { margin-left: auto; }
/* Compact rail: stack the mark above the toggle so both stay centred and
   clickable inside the 62px rail. Laid out as a row they total ~94px, which
   pushed the logo 12px off the left edge and clipped the toggle. */
body.sidebar-compact .sidebar-brand {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  width: 100%;
}
body.sidebar-compact .sidebar-brand .sidebar-toggle { margin-left: 0; }
.brand-title { font-size: 0.95rem; color: var(--ink-50); line-height: 1.2; }
.brand-subtitle { font-size: 0.65rem; color: var(--ink-500); letter-spacing: 0.03em; font-family: "Space Grotesk", system-ui, sans-serif; }

/* Nav */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.sidebar-link {
  color: var(--ink-400);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
  font-size: 0.82rem;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-link i {
  font-size: 1rem;
  width: 20px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-link-text { transition: opacity var(--dur) var(--ease); }
body.sidebar-compact .sidebar-link-text { opacity: 0; width: 0; overflow: hidden; }
body.sidebar-compact .sidebar-link { justify-content: center; padding: 0.55rem; }

.sidebar-link:hover {
  color: var(--ink-100);
  background: rgba(255,255,255,0.06);
}
.sidebar-link.is-active {
  color: var(--accent-300);
  background: rgba(20,184,166,0.1);
}
.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  background: linear-gradient(180deg, var(--accent-400), var(--accent-600));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(20,184,166,0.35);
}

/* Tooltip for compact mode */
body.sidebar-compact .sidebar-link {
  position: relative;
}
body.sidebar-compact .sidebar-link::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-900);
  color: var(--ink-100);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
body.sidebar-compact .sidebar-link:hover::after {
  opacity: 1;
}

/* Sidebar footer */
.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--ink-400);
  padding: 0.4rem 0.35rem;
  overflow: hidden;
  white-space: nowrap;
}
.user-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--accent-400);
  box-shadow: 0 0 6px rgba(20,184,166,0.4);
}
.sidebar-user-text { transition: opacity var(--dur) var(--ease); }
body.sidebar-compact .sidebar-user-text { opacity: 0; width: 0; overflow: hidden; }

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--ink-500);
  font-size: 0.78rem;
  padding: 0.4rem 0.35rem;
  border-radius: var(--radius-sm);
  transition: all 150ms;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar-logout:hover { color: var(--ink-200); background: rgba(255,255,255,0.04); }
.sidebar-logout-text { transition: opacity var(--dur) var(--ease); }
body.sidebar-compact .sidebar-logout-text { opacity: 0; width: 0; overflow: hidden; }
body.sidebar-compact .sidebar-logout { justify-content: center; }

/* Sidebar toggle button */
.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--ink-400);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: var(--ink-200);
}
.sidebar-toggle i { transition: transform var(--dur) var(--ease); }

/* ============================================================
   TOGGLE ICONS — chosen by CSS, not JS
   The state classes/attributes below are applied before first paint by the
   inline script in base.html. Driving the glyphs from CSS (instead of swapping
   icon classes in app.js, which runs at the end of <body>) means a toggle never
   renders the wrong glyph for a frame after a navigation.
   ============================================================ */
/* Sidebar chevron: one glyph, flipped when the rail is collapsed */
body.sidebar-compact .sidebar-toggle i { transform: rotate(180deg); }

/* Row-density toggle */
[data-compact-toggle] .bi-layout-text-window { display: none; }
body.compact-mode [data-compact-toggle] .bi-layout-split { display: none; }
body.compact-mode [data-compact-toggle] .bi-layout-text-window { display: inline-block; }

/* Theme toggle */
#themeToggle .bi-sun { display: none; }
:root[data-theme="dark"] #themeToggle .bi-moon-stars { display: none; }
:root[data-theme="dark"] #themeToggle .bi-sun { display: inline-block; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Topbar — Mica glass */
/* Two columns on desktop (title + search); the sidebar keeps its own chevron
   toggle there, so the topbar hamburger is hidden and must not leave a gap. */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title   search"
    "actions actions";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.8rem;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(248,250,252,0.78);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border-bottom: 1px solid var(--glass-border);
}
/* Only shown on mobile, where the sidebar is an off-canvas drawer and this
   button is the only way to open it. Scoped under .topbar so it beats the
   later `.btn-icon { display: inline-flex }` rule. */
.topbar .topbar-sidebar-toggle { display: none; }
.topbar-title { grid-area: title; min-width: 0; }
.topbar-search { grid-area: search; }
.topbar-actions { grid-area: actions; }
.topbar-eyebrow {
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent-600);
  font-weight: 600;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.topbar-heading {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  color: var(--ink-950);
  line-height: 1.2;
}
.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-600);
  transition: all 150ms var(--ease);
  cursor: pointer;
}
.btn-icon:hover { background: var(--ink-100); color: var(--ink-800); }
.topbar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--ink-400);
  pointer-events: none;
  font-size: 0.85rem;
}
.topbar-search .form-control {
  padding-left: 2.2rem;
  width: 220px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  font-size: 0.85rem;
  transition: all var(--dur) var(--ease);
}
.topbar-search .form-control:focus { width: 280px; border-color: var(--accent-400); box-shadow: 0 0 0 3px rgba(20,184,166,0.08); }

/* ============================================================
   CARDS — Frosted glass
   ============================================================ */
.card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--dur) var(--ease);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-title { margin-bottom: 0.1rem; font-size: 1rem; font-weight: 600; }
.card-body { padding: clamp(0.85rem, 2vw, 1.25rem); }
.table-card .card-body { padding: 0; }
/* The table card body is padding-free so rows run full-bleed. Give the
   DataTables chrome (length / search / info / pagination) its own gutter that
   lines up with the table's cell padding, and cancel Bootstrap's row overhang. */
.table-card .dataTables_wrapper > .row:first-child,
.table-card .dataTables_wrapper > .row:last-child {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.table-card .dataTables_wrapper > .row:first-child { padding-top: 0.9rem; }
.table-card .dataTables_wrapper > .row:last-child { padding-bottom: 0.9rem; }
.table-card .dataTables_wrapper > .row:first-child > [class*="col-"],
.table-card .dataTables_wrapper > .row:last-child > [class*="col-"] { padding-left: 0; padding-right: 0; }
.table-meta { display: flex; gap: 0.4rem; }
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--ink-100);
  font-size: 0.7rem;
  color: var(--ink-500);
  font-weight: 500;
}
.filter-card .card-body { padding: 1rem 1.25rem 1.25rem; }
.filter-card .card-header { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.filter-desc { margin: 0; font-size: 0.75rem; line-height: 1.35; }
.filter-stack { display: grid; gap: 0.85rem; }

/* ============================================================
   TABLES — Ultra-compact rows
   ============================================================ */
.table-responsive { overflow-x: auto; }
/* Slim, themed scrollbar for horizontally scrolling tables */
.table-responsive::-webkit-scrollbar { height: 10px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.table-themed thead th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  font-weight: 600;
  font-family: "Space Grotesk", system-ui, sans-serif;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(248,250,252,0.5);
  padding: 0.6rem 0.85rem;
}
/* Fixed layout: the widths stamped on the headers by app.js are authoritative,
   so a single long value can no longer widen its column and shove the rest of
   the grid around. The table tracks the container (100%) and the one column
   with no declared width takes up the slack; app.js adds a min-width so
   content can never drive the table wider, only the container can scroll. */
.table-themed {
  table-layout: fixed;
  width: 100%;
}
/* Clip instead of expand; the cell gets a `title` so the text stays readable. */
.table-responsive .table-themed th,
.table-responsive .table-themed td {
  overflow: hidden;
  text-overflow: ellipsis;
  /* DataTables ships `box-sizing: content-box` for its cells (it needs that for
     its own width maths) at a specificity that beats a plain class selector.
     Left alone it adds ~36px of cell padding on top of every width we declare,
     so 90px renders as 126px. Border-box makes the declared width the width you
     actually get. */
  box-sizing: border-box;
}
/* DataTables also reserves ~26px of right padding on sortable headers for its
   sort arrows. Trim it to what the arrow actually needs so the label and the
   filter funnel fit inside the declared width. Headers are allowed to wrap to a
   second line — that is what lets 14 columns share a laptop-width table without
   clipping a label. */
.table-responsive .table-themed thead th {
  padding: 0.5rem 1.2rem 0.5rem 0.4rem;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
/* The actions column is always last and holds only a compact "⋯" button, so it
   does not need the extra right padding DataTables reserves for sort arrows. */
.table-responsive .table-themed thead th:last-child {
  padding-right: 0.4rem;
}
.table-responsive .table-themed tbody td {
  padding: var(--row-py) 0.6rem;
}
.table-themed tbody tr {
  transition: background 150ms;
  border-bottom: 1px solid rgba(148,163,184,0.06);
}
.table-themed tbody tr:hover { background: rgba(20,184,166,0.03); }
.table-themed tbody tr:last-child { border-bottom: none; }
.table-themed td,
.table-themed th {
  padding: var(--row-py) 0.85rem;
  font-size: var(--row-font);
  transition: padding var(--dur) var(--ease), font-size var(--dur) var(--ease);
}
/* Single-line cells — avoids ragged 2-line wraps and inconsistent row heights */
.table-themed th,
.table-themed td { white-space: nowrap; }
.table-themed td { vertical-align: middle; }

/* Clamped cell text (long values) — keeps one outlier from stretching a column */
.cell-clamp {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

/* Sticky first column (row select) so bulk-select stays usable when a wide
   table scrolls horizontally. Only the FIRST column is frozen: freezing the
   last one would overlay whatever columns sit under it at rest.
   NOTE: `!important` is required because the theme blocks below set a generic
   background on every `.table-themed thead th`; without it the frozen cells
   render translucent and the columns scrolling underneath bleed through. */
.table-themed thead th:first-child,
.table-themed tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--sticky-cell-bg) !important;
}
.table-themed thead th:first-child {
  z-index: 4;
  background: var(--sticky-head-bg) !important;
}
.table-themed tbody tr:hover td:first-child {
  background: var(--sticky-cell-hover-bg) !important;
}

/* Compact mode rows */
body.compact-mode .table-themed td,
body.compact-mode .table-themed th {
  padding: var(--row-py-compact) 0.65rem;
  font-size: var(--row-font-compact);
}
body.compact-mode .table-themed thead th {
  padding: 0.35rem 0.65rem;
}
body.compact-mode .stat-card { padding: 0.6rem 0.85rem; }
body.compact-mode .stat-value { font-size: 1.15rem; }
body.compact-mode .stat-icon { width: 32px; height: 32px; font-size: 0.9rem; }
body.compact-mode .card-body { padding: clamp(0.5rem, 1vw, 0.75rem); }
body.compact-mode .card-header { padding: 0.7rem 0.85rem; }

/* Pagination — accent-coloured, replaces Bootstrap's default blue */
.dataTables_wrapper .pagination { gap: 0.2rem; margin-bottom: 0; }
.dataTables_wrapper .pagination .page-link {
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  background: var(--surface);
  border-color: var(--glass-border);
  font-size: 0.8rem;
  padding: 0.3rem 0.62rem;
}
.dataTables_wrapper .pagination .page-link:hover {
  color: var(--accent-700);
  background: var(--ink-100);
  border-color: var(--accent-300);
}
.dataTables_wrapper .pagination .page-link:focus { box-shadow: 0 0 0 3px rgba(20,184,166,0.15); }
.dataTables_wrapper .pagination .active .page-link,
.dataTables_wrapper .pagination .active .page-link:hover {
  color: #fff;
  background: var(--accent-600);
  border-color: var(--accent-600);
}
.dataTables_wrapper .pagination .disabled .page-link {
  color: var(--ink-400);
  background: transparent;
  border-color: var(--glass-border);
  opacity: 0.55;
}

/* ============================================================
   EXCEL-STYLE COLUMN FILTERS
   ============================================================ */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  vertical-align: middle;
  font-size: 0.7rem;
  transition: all 150ms;
}
.cf-btn:hover { background: var(--ink-100); color: var(--ink-700); }
.cf-btn.is-active { color: var(--accent-600); border-color: var(--accent-400); background: rgba(20,184,166,0.08); }
:root[data-theme="dark"] .cf-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink-200); }
:root[data-theme="dark"] .cf-btn.is-active { color: var(--accent-300); border-color: var(--accent-500); background: rgba(20,184,166,0.14); }

.cf-panel {
  position: absolute;
  z-index: 2000;
  width: 300px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-size: 0.82rem;
}
:root[data-theme="dark"] .cf-panel { background: #111827; border-color: rgba(255,255,255,0.1); }

.cf-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  background: var(--surface-alt);
}
.cf-title { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-back, .cf-close {
  border: none;
  background: transparent;
  color: var(--ink-500);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cf-back:hover, .cf-close:hover { background: var(--ink-100); color: var(--ink-800); }
:root[data-theme="dark"] .cf-back:hover, :root[data-theme="dark"] .cf-close:hover { background: rgba(255,255,255,0.08); color: var(--ink-100); }

.cf-sort { display: grid; gap: 0.25rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--glass-border); }
.cf-sort button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
  font-size: 0.82rem;
}
.cf-sort button:hover { background: var(--ink-100); color: var(--ink-900); }
:root[data-theme="dark"] .cf-sort button { color: var(--ink-300); }
:root[data-theme="dark"] .cf-sort button:hover { background: rgba(255,255,255,0.08); color: #fff; }

.cf-subwrap { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--glass-border); }
.cf-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  font-size: 0.82rem;
}
.cf-sub:hover { background: var(--ink-100); color: var(--ink-900); }
:root[data-theme="dark"] .cf-sub { color: var(--ink-300); }
:root[data-theme="dark"] .cf-sub:hover { background: rgba(255,255,255,0.08); color: #fff; }

.cf-search { padding: 0.5rem 0.6rem 0.25rem; }
.cf-search input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 0.82rem;
}
:root[data-theme="dark"] .cf-search input { background: rgba(255,255,255,0.04); color: var(--ink-100); }

.cf-list { flex: 1; overflow-y: auto; padding: 0.25rem 0.4rem 0.4rem; min-height: 120px; max-height: 260px; }
.cf-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}
.cf-item:hover { background: var(--ink-100); }
:root[data-theme="dark"] .cf-item:hover { background: rgba(255,255,255,0.06); }
.cf-item input { flex-shrink: 0; }
.cf-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-all { font-weight: 600; border-bottom: 1px solid var(--glass-border); border-radius: 0; margin-bottom: 0.15rem; }
.cf-blank { font-style: italic; color: var(--ink-500); }
.cf-empty { padding: 1rem; text-align: center; color: var(--ink-500); }
.cf-note { padding: 0.4rem; font-size: 0.7rem; color: var(--ink-500); }

.cf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--glass-border);
}
.cf-clear {
  border: none;
  background: transparent;
  color: var(--danger-600);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
}
.cf-clear:hover { background: rgba(239,68,68,0.08); }
:root[data-theme="dark"] .cf-clear { color: #f87171; }

.cf-menu { padding: 0.4rem; overflow-y: auto; max-height: 420px; }
.cf-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  font-size: 0.82rem;
}
.cf-menu-item:hover { background: var(--ink-100); color: var(--ink-900); }
:root[data-theme="dark"] .cf-menu-item { color: var(--ink-300); }
:root[data-theme="dark"] .cf-menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cf-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--glass-border); }

.cf-prompt, .cf-custom { padding: 0.75rem; display: grid; gap: 0.6rem; }
.cf-field { display: grid; gap: 0.25rem; }
.cf-field span { font-size: 0.72rem; color: var(--ink-500); font-weight: 600; }
.cf-field input {
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 0.85rem;
}
:root[data-theme="dark"] .cf-field input { background: rgba(255,255,255,0.04); color: var(--ink-100); }
.cf-hint { margin: 0; font-size: 0.75rem; color: var(--ink-500); }
.cf-cond { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.cf-cond select, .cf-cond input {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 0.8rem;
}
:root[data-theme="dark"] .cf-cond select, :root[data-theme="dark"] .cf-cond input { background: rgba(255,255,255,0.04); color: var(--ink-100); }
.cf-logic { display: flex; gap: 1rem; align-items: center; font-size: 0.8rem; color: var(--ink-700); }
.cf-logic label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* Drag handle for resizing a column. Sits in the header's right padding so it
   does not overlap the label, the filter funnel or the sort arrow. */
.table-themed thead th { position: relative; }
.col-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  border-right: 2px solid transparent;
  transition: border-color 120ms;
}
.col-resize:hover,
.col-resize.is-dragging { border-right-color: var(--accent-500); }

.meta-pill-btn {
  border: 1px solid var(--accent-400);
  color: var(--accent-700);
  background: rgba(20,184,166,0.08);
  cursor: pointer;
}
.meta-pill-btn:hover { background: rgba(20,184,166,0.16); }
.cf-reset-pill { margin-bottom: 0.6rem; }
:root[data-theme="dark"] .meta-pill-btn { color: var(--accent-300); border-color: var(--accent-500); }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  transition: all var(--dur) var(--ease);
  background: var(--surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent-400);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.08);
  background: #fff;
}
.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-600);
  margin-bottom: 0.25rem;
}
.input-group .btn { border-radius: var(--radius-sm); }

/* Tab pills */
.tab-pill .nav-link {
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-500);
  padding: 0.4rem 0.85rem;
  transition: all var(--dur) var(--ease);
}
.tab-pill .nav-link:hover { color: var(--ink-700); background: var(--ink-100); }
.tab-pill .nav-link.active {
  background: rgba(20,184,166,0.08);
  color: var(--accent-700);
  border-color: rgba(20,184,166,0.2);
  font-weight: 600;
}
.form-section {
  padding: 1rem;
  border-radius: var(--radius-md);
  background: rgba(248,250,252,0.6);
  border: 1px solid var(--glass-border);
}
.section-title {
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  color: var(--ink-700);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-pill {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.4rem 0.95rem;
  transition: all var(--dur) var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
  border: none;
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-700), var(--accent-600));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 0 12px rgba(20,184,166,0.2);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  border: 1px solid var(--glass-border);
  background: var(--surface);
  color: var(--ink-600);
}
.btn-ghost:hover { border-color: var(--accent-300); color: var(--accent-700); background: rgba(20,184,166,0.03); }
.btn-danger {
  background: linear-gradient(135deg, var(--danger-600), var(--danger-500));
  border: none;
  color: #fff;
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 12px rgba(239,68,68,0.2); }
.btn-light { background: var(--surface); border: 1px solid var(--glass-border); color: var(--ink-600); }
.btn-light:hover { background: var(--ink-100); color: var(--ink-800); }

/* Copy button */
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-500);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 150ms;
  opacity: 0;
}
.table-themed td:hover .btn-copy,
.btn-copy:focus { opacity: 1; }
.btn-copy:hover { background: var(--ink-100); color: var(--accent-600); border-color: var(--accent-400); }
.btn-copy.copied { color: var(--success-500); border-color: var(--success-500); opacity: 1; }

/* Row-level copy button — styled by .btn-action (monochrome) */
.btn-copy-row { cursor: pointer; }

/* ============================================================
   FLASH / TOAST / ALERTS
   ============================================================ */
.flash-stack {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1050;
  display: grid;
  gap: 0.5rem;
  max-width: 320px;
}
.alert {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: none;
  font-size: 0.85rem;
  padding: 0.85rem 1rem;
  backdrop-filter: blur(12px);
}
.alert-success { background: rgba(220,252,231,0.92); color: #166534; }
.alert-danger { background: rgba(254,226,226,0.92); color: #991b1b; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(15,23,42,0.18);
}
.modal-title-block { display: grid; gap: 0.2rem; }
.modal-eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-600);
  font-weight: 600;
}

/* ============================================================
   STATUS PILLS
   ============================================================ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.status-pill.active, .status-pill.Active, .status-pill.Production, .status-pill.Ready {
  background: rgba(22,163,74,0.1);
  color: var(--success-600);
}
.status-pill.decommissioned, .status-pill.Decommissioned, .status-pill.Inactive {
  background: var(--ink-100);
  color: var(--ink-500);
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
}
.stat-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
}
a.stat-card { text-decoration: none; color: inherit; }
a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(20,184,166,0.2); }
.stat-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgba(20,184,166,0.08);
  color: var(--accent-600);
  font-size: 1.05rem;
  border: 1px solid rgba(20,184,166,0.08);
}
.stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  font-weight: 600;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.stat-value { font-size: 1.4rem; font-weight: 700; color: var(--ink-950); line-height: 1.2; }

/* ============================================================
   DETAIL / INFO
   ============================================================ */
.detail-card { border-radius: var(--radius-md); }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem 1.25rem;
}
.detail-grid.three-col { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.info-row { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.88rem; }
[data-password] { font-family: "SF Mono","Fira Code","Courier New", monospace; letter-spacing: 1px; font-size: 0.82rem; }

/* ============================================================
   AUTH PAGE
   ============================================================ */
.auth-body {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(20,184,166,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 50%),
    linear-gradient(135deg, #f0f4f8, #f8fafc 50%, #f0f2f9);
}
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 400px);
  gap: 0;
  width: min(920px, 100%);
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(15,23,42,0.18);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.auth-panel {
  padding: 2.5rem;
  background: linear-gradient(160deg, #080d18, #0f1a2e 60%, #162036);
  color: var(--ink-300);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}
.auth-panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.auth-panel h1 { color: var(--ink-50); font-size: 1.65rem; line-height: 1.3; }
.auth-panel p { color: var(--ink-400); font-size: 0.88rem; line-height: 1.6; }
.auth-brand { display: flex; align-items: center; gap: 0.65rem; }
.auth-highlights { display: grid; gap: 0.6rem; }
.highlight { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-400); }
.highlight i { color: var(--accent-400); }
.auth-card { padding: 2.5rem; display: flex; align-items: center; justify-content: center; }
.auth-card-inner { width: 100%; }
.auth-card-inner h2 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.auth-footer { font-size: 0.72rem; color: var(--ink-400); margin-top: 1.25rem; }
.auth-divider { display: flex; align-items: center; text-align: center; margin: 1rem 0; color: var(--ink-400); font-size: 0.75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--ink-200, #dee2e6); }
.auth-divider span { padding: 0 0.75rem; }

/* ============================================================
   MOBILE SIDEBAR
   ============================================================ */
.sidebar-backdrop { display: none; }
@media (max-width: 992px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    width: 260px;
    z-index: 1040;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10,15,26,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 1030;
    transition: opacity 0.3s;
    border: none;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  /* Mobile: sidebar is off-canvas, so restore the hamburger + its grid column. */
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "toggle title   search"
      "actions actions actions";
    padding: 1rem 1.25rem;
  }
  .topbar .topbar-sidebar-toggle { display: inline-flex; grid-area: toggle; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-panel { display: none; }
}

/* ============================================================
   TEXT SIZE TOGGLE
   ============================================================ */
:root[data-text-size="large"] { font-size: 112.5%; }

/* ============================================================
   AMOLED DARK MODE — Total revamp
   ============================================================ */
:root[data-theme="dark"] {
  /* Ink scale — light text on pure black */
  --ink-950: #f8fafc;
  --ink-900: #f1f5f9;
  --ink-800: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-600: #94a3b8;
  --ink-500: #64748b;
  --ink-400: #475569;
  --ink-300: #334155;
  --ink-200: #1e293b;
  --ink-100: rgba(255,255,255,0.04);
  --ink-50: rgba(255,255,255,0.02);
  --surface: rgba(255,255,255,0.04);
  --surface-alt: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.08);
  --sticky-cell-bg: #0b0b0b;
  --sticky-cell-hover-bg: #10201e;
  --sticky-head-bg: #060606;
  --scrollbar-thumb: rgba(255, 255, 255, 0.16);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.45);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);

  /* ── Bootstrap core overrides (cascade to all components) ── */
  --bs-body-color: #f1f5f9;
  --bs-body-bg: #000000;
  --bs-secondary-color: rgba(241,245,249,0.7);
  --bs-secondary-bg: rgba(255,255,255,0.04);
  --bs-tertiary-color: rgba(241,245,249,0.5);
  --bs-tertiary-bg: rgba(255,255,255,0.02);
  --bs-emphasis-color: #ffffff;
  --bs-border-color: rgba(255,255,255,0.08);
  --bs-border-color-translucent: rgba(255,255,255,0.08);
  --bs-link-color: #2dd4bf;
  --bs-link-hover-color: #5eead4;
  --bs-link-color-rgb: 45,212,191;
  --bs-link-hover-color-rgb: 94,234,212;

  /* ── Table ── */
  --bs-table-color: #f1f5f9;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,0.06);
  --bs-table-striped-color: #f1f5f9;
  --bs-table-striped-bg: rgba(255,255,255,0.02);
  --bs-table-active-color: #f1f5f9;
  --bs-table-active-bg: rgba(20,184,166,0.06);
  --bs-table-hover-color: #f1f5f9;
  --bs-table-hover-bg: rgba(20,184,166,0.04);

  /* ── Card ── */
  --bs-card-color: #f1f5f9;
  --bs-card-bg: rgba(255,255,255,0.03);
  --bs-card-border-color: rgba(255,255,255,0.06);
  --bs-card-cap-color: #f1f5f9;
  --bs-card-cap-bg: rgba(255,255,255,0.02);

  /* ── Modal ── */
  --bs-modal-bg: rgba(15,15,15,0.98);
  --bs-modal-color: #f1f5f9;
  --bs-modal-border-color: rgba(255,255,255,0.08);

  /* ── Dropdown ── */
  --bs-dropdown-bg: #111827;
  --bs-dropdown-color: #f1f5f9;
  --bs-dropdown-border-color: rgba(255,255,255,0.08);
  --bs-dropdown-link-color: #f1f5f9;
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: #0d9488;
  --bs-dropdown-header-color: #94a3b8;

  /* ── Pagination ── */
  --bs-pagination-color: #cbd5e1;
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: rgba(255,255,255,0.06);
  --bs-pagination-hover-color: #2dd4bf;
  --bs-pagination-hover-bg: rgba(255,255,255,0.06);
  --bs-pagination-hover-border-color: rgba(255,255,255,0.1);
  --bs-pagination-focus-color: #2dd4bf;
  --bs-pagination-focus-bg: rgba(255,255,255,0.06);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(20,184,166,0.25);
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: #0d9488;
  --bs-pagination-active-border-color: #0d9488;
  --bs-pagination-disabled-color: #475569;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: rgba(255,255,255,0.04);

  /* ── Forms ── */
  --bs-form-control-bg: rgba(255,255,255,0.04);
  --bs-form-control-disabled-bg: rgba(255,255,255,0.02);
  --bs-form-control-color: #f1f5f9;
  --bs-form-select-bg: rgba(255,255,255,0.04);
  --bs-form-select-color: #f1f5f9;
  --bs-form-select-disabled-bg: rgba(255,255,255,0.02);
  --bs-form-select-disabled-color: #64748b;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-form-check-bg: rgba(255,255,255,0.04);
  --bs-form-check-input-bg: rgba(255,255,255,0.04);
  --bs-form-check-input-border: 1px solid rgba(255,255,255,0.2);
  --bs-form-check-input-checked-bg-color: #0d9488;
  --bs-form-check-input-checked-border-color: #0d9488;
  --bs-form-check-input-focus-border: #2dd4bf;
  --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(20,184,166,0.25);
}

/* ── Body & shell ── */
:root[data-theme="dark"] body {
  background: #000000;
  color: var(--ink-900);
}

/* ── Cards ── */
:root[data-theme="dark"] .card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  color: var(--ink-900);
}
:root[data-theme="dark"] .card-header { border-color: rgba(255,255,255,0.06); color: var(--ink-900); }
:root[data-theme="dark"] .card-title { color: var(--ink-950); }
:root[data-theme="dark"] .card-body { color: var(--ink-900); }

/* ── Topbar ── */
:root[data-theme="dark"] .topbar {
  background: rgba(0,0,0,0.75);
  border-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(1.1);
}
:root[data-theme="dark"] .topbar-heading { color: var(--ink-950); }
:root[data-theme="dark"] .topbar-search .form-control {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-900);
}

/* ── Buttons ── */
:root[data-theme="dark"] .btn-icon {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-600);
}
:root[data-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,0.08); color: var(--ink-900); }
:root[data-theme="dark"] .btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-700);
}
:root[data-theme="dark"] .btn-ghost:hover { border-color: var(--accent-500); color: var(--accent-400); }
:root[data-theme="dark"] .btn-light {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-700);
}
:root[data-theme="dark"] .btn-light:hover { background: rgba(255,255,255,0.08); color: var(--ink-900); }

/* ── Row actions "⋯" menu ── */
.btn-action-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.btn-action-toggle,
.btn-action-view {
  --bs-btn-padding-x: 0.3rem;
  --bs-btn-padding-y: 0.15rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-line-height: 1.2;
  --bs-btn-border-radius: 0.375rem;
  --bs-btn-border-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --bs-btn-color: var(--ink-600);
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-hover-bg: var(--ink-100);
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-active-bg: var(--ink-200);
  --bs-btn-disabled-color: var(--ink-400);
}
:root[data-theme="dark"] .btn-action-toggle,
:root[data-theme="dark"] .btn-action-view {
  --bs-btn-color: var(--ink-700);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(255,255,255,0.08);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--ink-600);
  --bs-btn-disabled-color: var(--ink-500);
}
.row-actions-menu {
  position: fixed;
  z-index: 1050;
  min-width: 11rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
}
.row-actions-menu[hidden] { display: none; }
.row-actions-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--ink-700);
  font-size: 0.8125rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.row-actions-item:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}
.row-actions-item i { font-size: 0.9rem; }
:root[data-theme="dark"] .row-actions-menu {
  background: #111827;
  border-color: rgba(255,255,255,0.1);
}
:root[data-theme="dark"] .row-actions-item { color: var(--ink-800); }
:root[data-theme="dark"] .row-actions-item:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

/* ── Forms ── */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-900);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent-400);
  color: var(--ink-950);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--ink-500); }
:root[data-theme="dark"] .form-label { color: var(--ink-600); }
:root[data-theme="dark"] .form-text { color: var(--ink-500); }
:root[data-theme="dark"] .form-check-input {
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
}
:root[data-theme="dark"] .form-check-input:checked {
  background-color: #0d9488;
  border-color: #0d9488;
}
:root[data-theme="dark"] .form-check-input:focus {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 0.25rem rgba(20,184,166,0.25);
}

/* ── Tables (fixes blinding-white Bootstrap cells) ── */
:root[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-900);
  --bs-table-border-color: rgba(255,255,255,0.06);
  color: var(--ink-900);
}
:root[data-theme="dark"] .table-hover > tbody > tr:hover {
  --bs-table-hover-bg: rgba(20,184,166,0.04);
  --bs-table-hover-color: var(--ink-950);
}
:root[data-theme="dark"] .table-themed thead th {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.06);
  color: var(--ink-500);
}
:root[data-theme="dark"] .table-themed tbody tr { border-color: rgba(255,255,255,0.03); }
:root[data-theme="dark"] .table-themed tbody tr:hover { background: rgba(20,184,166,0.04); }
:root[data-theme="dark"] .table-themed td,
:root[data-theme="dark"] .table-themed th { color: var(--ink-900); }

/* ── Misc surfaces ── */
:root[data-theme="dark"] .form-section { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .stat-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .stat-value { color: var(--ink-950); }
:root[data-theme="dark"] .auth-grid { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .modal-content { background: rgba(15,15,15,0.98); border-color: rgba(255,255,255,0.08); color: var(--ink-900); }
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .modal-title { color: var(--ink-950); }
:root[data-theme="dark"] .alert { backdrop-filter: blur(12px); }
:root[data-theme="dark"] .meta-pill { background: rgba(255,255,255,0.04); }
:root[data-theme="dark"] .tab-pill .nav-link { color: var(--ink-500); }
:root[data-theme="dark"] .tab-pill .nav-link:hover { color: var(--ink-700); background: rgba(255,255,255,0.04); }
:root[data-theme="dark"] .tab-pill .nav-link.active { background: rgba(20,184,166,0.1); color: var(--accent-400); }
:root[data-theme="dark"] .sidebar-link.is-active { color: var(--accent-300); background: rgba(20,184,166,0.1); }

/* ── DataTables ── */
:root[data-theme="dark"] .dataTables_wrapper .pagination .page-link {
  color: var(--ink-600);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .dataTables_wrapper .pagination .page-link:hover {
  color: var(--accent-300);
  background: rgba(255,255,255,0.08);
  border-color: var(--accent-500);
}
:root[data-theme="dark"] .dataTables_wrapper .pagination .active .page-link,
:root[data-theme="dark"] .dataTables_wrapper .pagination .active .page-link:hover {
  color: #ffffff;
  background: var(--accent-600);
  border-color: var(--accent-600);
}
:root[data-theme="dark"] .dataTables_wrapper .pagination .disabled .page-link {
  color: var(--ink-400);
  background: transparent;
  border-color: rgba(255,255,255,0.05);
}
:root[data-theme="dark"] .dataTables_info { color: var(--ink-600); }
:root[data-theme="dark"] .dataTables_length, :root[data-theme="dark"] .dataTables_filter { color: var(--ink-600); }

/* ── Text helpers ── */
:root[data-theme="dark"] .text-muted { color: var(--ink-500) !important; }
:root[data-theme="dark"] .text-secondary { color: var(--ink-500) !important; }
:root[data-theme="dark"] .text-body { color: var(--ink-900) !important; }
:root[data-theme="dark"] .text-body-secondary { color: var(--ink-600) !important; }
:root[data-theme="dark"] a:not(.btn):not(.sidebar-link):not(.sidebar-logout):not(.page-link):not(.dropdown-item) { color: var(--accent-400); }
:root[data-theme="dark"] a:not(.btn):not(.sidebar-link):not(.sidebar-logout):not(.page-link):not(.dropdown-item):hover { color: var(--accent-300); }

/* ── Close button (modal X) ── */
:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Auth & misc ── */
:root[data-theme="dark"] .auth-body { background: #000000; }
:root[data-theme="dark"] .btn-copy { color: var(--ink-500); border-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .btn-copy:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .highlight { color: var(--ink-400); }
:root[data-theme="dark"] .auth-footer { color: var(--ink-500); }
:root[data-theme="dark"] .sidebar-toggle { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
:root[data-theme="dark"] .sidebar-toggle:hover { background: rgba(255,255,255,0.1); }

/* AMOLED: Pure black backgrounds with accent glow */
:root[data-theme="dark"] .sidebar {
  background: rgba(0,0,0,0.98);
  border-right-color: rgba(255,255,255,0.04);
  color: var(--ink-600);
}
:root[data-theme="dark"] .sidebar-link.is-active::before {
  box-shadow: 0 0 10px rgba(20,184,166,0.5);
}

/* Sidebar is always dark — keep text readable despite ink inversion */
:root[data-theme="dark"] .sidebar-link { color: var(--ink-600); }
:root[data-theme="dark"] .sidebar-link:hover { color: var(--ink-900); background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .brand-title { color: var(--ink-950); }
:root[data-theme="dark"] .sidebar-user { color: var(--ink-600); }
:root[data-theme="dark"] .sidebar-logout { color: var(--ink-500); }
:root[data-theme="dark"] .sidebar-logout:hover { color: var(--ink-900); background: rgba(255,255,255,0.06); }
:root[data-theme="dark"] body.sidebar-compact .sidebar-link::after {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   TOUCH TARGETS
   ============================================================ */
.btn, .form-select, .form-control, .btn-icon, .nav-link { min-height: 36px; }
body.compact-mode .btn, body.compact-mode .form-select,
body.compact-mode .form-control, body.compact-mode .btn-icon { min-height: 30px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Page gutter — must match the topbar's horizontal padding so cards line up
   with the header, and must absorb Bootstrap's negative .row gutters. */
.page-content {
  padding: 1.25rem 2rem 2rem;
  animation: fadeInUp 0.35s var(--ease);
}
.stat-grid .stat-card { animation: fadeInUp 0.35s var(--ease) both; }
.stat-grid .stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 0.16s; }
.stat-grid .stat-card:nth-child(5) { animation-delay: 0.20s; }
.stat-grid .stat-card:nth-child(6) { animation-delay: 0.24s; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVE — Small screens
   ============================================================ */
@media (max-width: 400px) {
  /* Collapsed search becomes a 36px icon button so the absolutely-positioned
     magnifier can't spill past the viewport edge. */
  .topbar-search:not(.is-expanded) { width: 36px; height: 36px; justify-content: center; }
  .topbar-search:not(.is-expanded) .form-control { width: 0; padding: 0; border: none; overflow: hidden; }
  .topbar-search:not(.is-expanded) .topbar-search-icon {
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
    color: var(--ink-600);
  }
}
@media (max-width: 600px) {
  .topbar {
    grid-template-areas:
      "toggle title   search"
      "actions actions actions";
    padding: 0.85rem 1rem;
    column-gap: 0.6rem;
    row-gap: 0.7rem;
  }
  .topbar-heading { font-size: 1.2rem; }
  .topbar-search .form-control { width: 150px; }
  .topbar-search .form-control:focus { width: 190px; }
  .topbar-actions { justify-content: flex-start; }
  .page-content { padding: 1rem 1rem 1.5rem; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ============================================================
   AUTO-COMPACT on narrow viewports
   ============================================================ */
/* Only between 993px and 1200px: below 993px the sidebar becomes an off-canvas
   overlay and the shell collapses to a single column, so the 62px sidebar track
   must not come back (it would squeeze .app-main into it). */
@media (max-width: 1200px) and (min-width: 993px) {
  body:not(.sidebar-compact):not(.sidebar-open) .app-shell {
    grid-template-columns: var(--sidebar-w-compact) 1fr;
  }
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar {
    width: var(--sidebar-w-compact);
    padding: 1.25rem 0.45rem 1rem;
    align-items: center;
  }
  body:not(.sidebar-compact):not(.sidebar-open) .brand-text,
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar-link-text,
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar-user-text,
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar-logout-text { opacity: 0; width: 0; overflow: hidden; }
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar-link { justify-content: center; padding: 0.55rem; }
  body:not(.sidebar-compact):not(.sidebar-open) .sidebar-logout { justify-content: center; }
}