/* ================================================================
   Nami Security Admin — styles
   Standalone stylesheet. Does NOT touch /style.css from the main app.
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #09090f;
  color: #f3f4f6;
  min-height: 100vh;
  line-height: 1.5;
}

/* Dark scrollbar to match the main Nami app. Applies to anything that
   scrolls on this page — the sidebar, panels, search results, drawers. */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.hidden { display: none !important; }

/* ---- Loading & denied screens ---- */
.loading-screen, .denied-screen {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: #09090f;
  z-index: 100;
}
.loading-card, .denied-card {
  background: #14142b;
  border: 1px solid #1f1f3a;
  border-radius: 14px;
  padding: 36px 40px;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.loading-orb {
  font-size: 32px; color: #818cf8;
  margin-bottom: 12px;
}
.loading-card h2, .denied-card h2 {
  font-size: 18px; font-weight: 600;
  margin-bottom: 8px;
}
.loading-card p, .denied-card p {
  color: #9ca3af; font-size: 13px; margin-bottom: 8px;
}
.denied-card a {
  display: inline-block; margin-top: 14px;
  text-decoration: none;
}

/* ---- Shell ---- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  /* Matches the gradient recipe used on .kpi and .card so left and right
     sides of the page feel like one design system. Subtle vertical fade
     from a hair brighter at the top to deeper dark below. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)),
    rgba(10,10,18,0.96);
  border-right: 1px solid rgba(255,255,255,0.10);
  padding: 18px 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  /* Sticky to viewport so the back link is always visible — no matter
     how tall the content area scrolls or how many nav items get added. */
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -6px; /* let scrollbar sit at the edge */
  padding: 0 6px;
}
/* Brand row.
   Sized to exactly match the topbar's vertical footprint so the brand
   block (wordmark + "Security Admin") and the topbar block (h1 + small)
   share the same vertical center across the gap. We cancel the sidebar's
   top padding with a negative margin and add bottom-border styling
   matching the topbar so the two read as a single horizontal band. */
.sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 42px 0 20px;
  margin: -18px -14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.18s ease;
  height: 82px;
}
.sidebar-brand:hover {
  background: rgba(124, 58, 237, 0.08);
}
.sidebar-brand-mark {
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  border-radius: 7px;
  display: none;        /* hidden by default — only shown when sidebar collapses */
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.sidebar-brand-mark svg {
  width: 100%; height: 100%;
  display: block;
}
.sidebar-brand-mark:hover { transform: scale(1.05); }
.sidebar-brand-text {
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left-align to match index.html */
  gap: 0;
}
.sidebar-brand-text:hover .brand-wordmark { opacity: 0.85; }
.sidebar-brand-text .brand-wordmark {
  /* Bigger wordmark — sits at the top of the visual hierarchy.
     The SVG viewBox is 444×200 but glyphs only occupy ~40% vertical
     space, so a generous height is needed for the actual letters
     to read as a real wordmark. Negative bottom margin pulls the
     subtitle up against the bottom of the visible glyphs (the SVG
     has ~15px of dead vertical space below the letters at this size). */
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: -14px;
  transition: opacity 0.15s ease;
}
.sidebar-brand-text span {
  display: block;
  font-size: 11px;
  color: #8b8ba3;
  /* padding-left aligns with the visible "L" inside the SVG viewBox
     (the L glyph starts at viewBox x=57, which at this render width
     translates to ~12.5px from the SVG's left edge). */
  padding-left: 12px;
  margin-top: 0;
}

/* Nav-item label needs to be a real element so it can be hidden when collapsed.
   The icon stays visible; only the text disappears. */
.nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapse toggle — small chevron at the right edge of the brand row.
   Same recipe as the one in the main Nami app for visual consistency. */
.sidebar-collapse-btn {
  position: absolute;
  right: 4px; top: calc(50% - 9px); /* slight upward bias to align with brand center, not full row */
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover {
  background: rgba(139,92,246,0.22);
  color: #fff;
}

.sidebar-section {
  font-size: 10px; color: #6b7280;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 16px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  color: #d1d5db;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.nav-item.active {
  /* Same accent-stripe + soft fill recipe as the KPI cards — keeps the
     visual language consistent across the page. */
  background: linear-gradient(135deg, rgba(139,92,246,0.20), rgba(217,70,239,0.10));
  color: #fff;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #8b5cf6, #d946ef);
}
.nav-item .nav-ico { width: 16px; text-align: center; opacity: 0.85; font-size: 13px; }
.nav-item.active .nav-ico { opacity: 1; }

.sidebar-back {
  flex-shrink: 0;
  padding: 12px 11px 4px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-back a {
  color: #c4b5fd;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
}
.sidebar-back a:hover { color: #fff; }

/* ---- Main column ----
   Background mirrors index's .chat-main — violet radial glow at top-right
   over a near-black base — so the right pane has the same warmth as the
   chat app instead of a flat dark slab. */
.main {
  flex: 1;
  overflow-x: hidden;
  min-width: 0;
  background:
    radial-gradient(circle at 70% 10%, rgba(124,58,237,0.12), transparent 28%),
    #0d0d16;
}

/* ---- Topbar (slim, single row) ----
   82px tall to match the sidebar brand row height — so the brand block
   (wordmark + small subtitle) and the topbar block (h1 + small) share
   the exact same vertical center across the gap. */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 82px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  position: relative;
  z-index: 5;
}
.topbar-title {
  flex: 1;
  min-width: 0;
}
.topbar-title h1 {
  font-size: 18px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title small {
  font-size: 13px; color: #8b8ba3;
  display: block; margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.topbar-meta {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.pill {
  background: #1c1c33;
  border: 1px solid #2a2a55;
  color: #c4b5fd;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.pill-warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* ---- Compact search button (matches index.html style) ---- */
.global-search-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 0 10px 0 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(139,92,246,0.10));
  color: #f3f4f6;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
.global-search-btn:hover {
  border-color: rgba(196,181,253,0.32);
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(192,38,211,0.12));
}
.global-search-btn strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #f3f4f6;
}
.global-search-btn kbd {
  font: inherit;
  font-size: 10.5px;
  color: #c4b5fd;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Topbar back button ----
   Sits next to the search button. Same height + radius + visual
   weight so the two buttons read as a pair. Hidden by default;
   setTopbar({back:{...}}) reveals it on detail pages. */
.topbar-back-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 0 14px 0 12px;
  background: rgba(255,255,255,0.04);
  color: #f3f4f6;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.topbar-back-btn:hover {
  border-color: rgba(196,181,253,0.32);
  background: rgba(139,92,246,0.10);
  transform: translateX(-1px);
}
.topbar-back-btn span {
  font-size: 14px;
  line-height: 1;
}
.topbar-back-btn strong {
  font-size: 12.5px;
  font-weight: 600;
  color: #f3f4f6;
}

/* ---- Search overlay modal ---- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: start center;
  padding: min(9vh, 80px) 18px 18px;
  background: rgba(3, 3, 10, 0.68);
  backdrop-filter: blur(8px);
}
.search-overlay.hidden { display: none; }

.search-modal {
  width: min(720px, 100%);
  max-height: min(720px, 84vh);
  overflow: hidden;
  background: #14142b;
  border: 1px solid #2a2a40;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
.search-modal-head {
  padding: 18px 22px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #1f1f3a;
}
.search-modal-head h3 {
  font-size: 15px; font-weight: 600; margin-bottom: 2px;
}
.search-modal-head p {
  font-size: 12px; color: #9ca3af; line-height: 1.4;
}
.search-close-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 22px;
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 6px;
  font-family: inherit;
  line-height: 1;
}
.search-close-btn:hover { background: #1f1f3a; color: #f3f4f6; }

.search-input-wrap {
  position: relative;
  padding: 14px 22px 12px;
  border-bottom: 1px solid #1f1f3a;
}
.search-input-wrap span {
  position: absolute;
  left: 36px; top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
}
.search-input-wrap input {
  width: 100%;
  background: #0e0e22;
  border: 1px solid #2a2a40;
  color: #f3f4f6;
  padding: 11px 14px 11px 38px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.search-input-wrap input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.search-empty {
  padding: 32px 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

/* ---- Mobile burger (only visible <700px) ---- */
.topbar-burger {
  display: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #f3f4f6;
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.topbar-burger:hover { background: rgba(139,92,246,0.18); }

/* ---- Sidebar backdrop (mobile only) ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 3, 10, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (max-width: 700px) {
  .topbar-burger { display: grid; place-items: center; }
  .topbar { padding: 10px 14px; gap: 10px; height: auto; }
  .topbar-meta { display: none; }
  .global-search-btn kbd { display: none; }
  .global-search-btn strong { display: none; }
  .global-search-btn { min-width: 36px; padding: 0 10px; }

  /* Sidebar becomes a drawer, slides in from the left when body is .sidebar-open */
  .sidebar {
    display: flex; /* override the original mobile `display:none` */
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    z-index: 9400;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,0.35);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---- Search result rows (used inside modal .search-results) ---- */
.ac-section {
  padding: 10px 10px 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ac-section-count {
  background: #1f1f3a;
  color: #c4b5fd;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
}
.ac-row {
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s;
}
.ac-row:hover { background: #1f1f3a; }
.ac-row .avatar { width: 26px; height: 26px; font-size: 10.5px; flex-shrink: 0; }
.ac-row-content { flex: 1; min-width: 0; }
.ac-row-title { font-size: 13px; font-weight: 500; }
.ac-row-sub {
  font-size: 11.5px; color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}
.ac-row-meta {
  font-size: 11px; color: #6b7280;
  flex-shrink: 0;
}
.ac-row-icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: #1f1f3a;
  border-radius: 6px;
  flex-shrink: 0;
  font-size: 12px;
}
.ac-divider { height: 1px; background: #1f1f3a; margin: 6px 8px; }
.ac-empty { padding: 14px; text-align: center; color: #9ca3af; font-size: 12.5px; }
.match {
  background: rgba(250, 204, 21, 0.22);
  color: #fde68a;
  padding: 0 1px;
  border-radius: 2px;
}

/* ---- Recent searches ---- */
.recents-head { display: flex; justify-content: space-between; align-items: center; }
.recents-clear {
  background: transparent;
  border: none;
  color: #818cf8;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.recents-clear:hover { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; }
.recents-row {
  padding: 6px 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recent-chip {
  background: #1c1c33;
  border: 1px solid #2a2a55;
  color: #c4b5fd;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.recent-chip:hover {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.5);
  color: #fff;
}

/* ---- Content ---- */
.content { padding: 18px 28px 60px; }
.panel { display: none; }
.panel.active { display: block; }

.loading-row, .empty-row, .error-row {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.error-row { color: #fca5a5; }

/* ---- Page heading (used inside detail views still) ---- */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head-left h2 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.page-head-left p { font-size: 12px; color: #9ca3af; }
.page-head-left strong { color: #d1d5db; font-weight: 600; }

/* ---- Action row (replaces page-head when topbar already shows the title) ---- */
.action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

/* Users page action row: search fills available space, button stays on the right.
   On narrow viewports the search wraps to full width, button stays visible. */
.users-action-row {
  justify-content: space-between;
  align-items: center;
}
.users-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 360px;
}
.users-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6b6776;
  pointer-events: none;
}
.users-search-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 14px 9px 36px;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  box-sizing: border-box;
}
.users-search-input::placeholder { color: #6b6776; }
.users-search-input:focus {
  border-color: rgba(139,92,246,.55);
  background: rgba(139,92,246,.06);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* Ensure Add button never collapses — fixed size, no shrink */
.primary-action-btn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.primary-action-btn:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

/* Responsive: on small/zoomed viewports let search go full width
   and button sits below it, both still fully visible. */
@media (max-width: 600px) {
  .users-action-row { flex-direction: column; align-items: stretch; }
  .users-search-wrap { max-width: none; }
}
.action-row-tight {
  /* Used on Overview / Audit — sits the range pills on the right
     so they read as a control next to the topbar heading, matching
     the marketing-site dashboard mockup. */
  justify-content: flex-end;
  margin-bottom: 18px;
  gap: 12px;
}
.action-row-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: auto;        /* pushes label left, pills right */
}

/* ---- Dense table variant: smaller padding, tighter rows ---- */
table.dense th { padding: 8px 16px; }
table.dense td { padding: 8px 16px; }
table.dense tr.user-row td { padding: 9px 16px; }

/* ---- Drawer (right-slide panel, used by Add User) ---- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 460px; max-width: 92vw;
  background: #0e0e22;
  border-left: 1px solid #1f1f3a;
  box-shadow: -16px 0 48px rgba(0,0,0,0.55);
  z-index: 9001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid #1f1f3a;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.drawer-head h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.drawer-head p { font-size: 12.5px; color: #9ca3af; line-height: 1.45; }
.drawer-close {
  background: transparent; border: none;
  color: #9ca3af; font-size: 22px;
  cursor: pointer; line-height: 1;
  width: 28px; height: 28px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.drawer-close:hover { background: #1f1f3a; color: #f3f4f6; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-field { margin-bottom: 18px; }
.drawer-field > label {
  display: block;
  font-size: 12px; font-weight: 500;
  color: #d1d5db; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.drawer-field input[type="email"],
.drawer-field input[type="text"],
.drawer-field input[type="url"],
.drawer-field input[type="password"] {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);
  color: #f3f4f6;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.drawer-field input:hover { border-color: rgba(255,255,255,0.32); }
.drawer-field input:focus { outline: none; border-color: #7c3aed; background: rgba(255,255,255,0.06); }
.drawer-field input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
}
.drawer-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
}
.drawer-checkbox input[type=checkbox] {
  width: auto !important;
  margin-top: 3px;
  accent-color: #7c3aed;
  flex-shrink: 0;
}
.drawer-checkbox span { flex: 1; }
.drawer-checkbox strong {
  font-size: 13px; font-weight: 600;
  color: #f3f4f6; display: block; margin-bottom: 2px;
}
.drawer-checkbox small {
  font-size: 11.5px; color: #9ca3af;
  line-height: 1.45; display: block;
}
.drawer-info {
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
}
.drawer-info strong {
  font-size: 12px; color: #c4b5fd;
  display: block; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.drawer-info ul {
  margin: 0; padding-left: 18px;
  font-size: 12.5px; color: #9ca3af;
  line-height: 1.6;
}
.drawer-msg {
  margin-top: 12px;
  font-size: 12.5px;
  min-height: 18px;
}
.drawer-msg.error { color: #fca5a5; }
.drawer-msg.success { color: #6ee7b7; }
.drawer-foot {
  padding: 16px 24px 20px;
  border-top: 1px solid #1f1f3a;
  display: flex; gap: 10px; justify-content: flex-end;
}
.drawer-secondary {
  background: transparent;
  border: 1px solid #2a2a40;
  color: #d1d5db;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.drawer-secondary:hover { background: #1c1c33; border-color: #3b3b5a; }
.drawer-primary {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.drawer-primary:hover:not(:disabled) { filter: brightness(1.08); }
.drawer-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Time range — segmented pill bar ---- */
.range-bar {
  display: inline-flex;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.range-btn {
  background: transparent;
  border: none;
  color: #8b8794;
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.range-btn:hover { color: #e5e3eb; }
.range-btn.active {
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* ---- KPI ----
   Editorial dashboard cards. Each card has a colored accent stripe
   on the left (cycled through 4 hues), a small uppercase label, a
   big serif numeral, and an optional delta line in mono.
   Cycle: violet → peach → green → rose, matched to the marketing
   site mockup so the product feels continuous with the sales page. */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 18px 20px 16px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kpi-accent, #8b5cf6);
}
/* Color cycle on the strip — purely positional so the JS doesn't
   need to know about it. Add a 5th rule if you ever go to 5 cards. */
.kpi-row .kpi:nth-child(1) { --kpi-accent: #8b5cf6; }   /* violet  */
.kpi-row .kpi:nth-child(2) { --kpi-accent: #fb923c; }   /* peach   */
.kpi-row .kpi:nth-child(3) { --kpi-accent: #34d399; }   /* green   */
.kpi-row .kpi:nth-child(4) { --kpi-accent: #f472b6; }   /* rose    */

.kpi-label {
  font-size: 10.5px;
  color: #8b8794;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  font-weight: 500;
}
.kpi-value {
  /* Bigger numerals than before for better visual hierarchy on the
     Overview page. Stays in the system font — same as everywhere else. */
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.kpi-value.cost {
  color: #fff;
}
/* Delta line below the big number — colored sub-stat (e.g. "↑ 31% vs
   last month"). Mono so the percent sign and arrow line up. Color
   inherited from the accent stripe. */
.kpi-delta {
  margin-top: 8px;
  font-family: "Geist Mono", ui-monospace, "SF Mono", monospace;
  font-size: 11.5px;
  color: var(--kpi-accent, #8b5cf6);
  letter-spacing: 0.01em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-delta.muted {
  /* For neutral subline like "this period" — no positive/negative spin */
  color: #8b8794;
}

/* ---- Overview row: chart on the left, model usage on the right ----
   Two-column layout matching the marketing-site dashboard mockup.
   Chart card is wider (1.4fr) so the line has room to breathe; model
   bars are narrower (1fr) and dense. Stacks at narrower widths. */
.overview-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.overview-chart-card,
.overview-models-card { margin-bottom: 0; }

@media (max-width: 1024px) {
  .overview-row { grid-template-columns: 1fr; }
}

/* ---- Daily activity sparkline ----
   Violet stroke + soft area gradient. Fixed viewBox 400×110, scaled
   to the card width via preserveAspectRatio="none". The wrapper sets
   the visible height; the SVG fills it. */
.sparkline-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sparkline {
  width: 100%;
  height: 110px;
  display: block;
  /* Subtle baseline grid behind the chart so even a sparse line has
     visual context — not full gridlines (too busy), just a faint
     dotted baseline. */
  background-image: linear-gradient(to top, rgba(255,255,255,.03) 1px, transparent 1px);
  background-position: 0 100%;
  background-size: 100% 33.33%;
  background-repeat: repeat-y;
  border-radius: 6px;
}
.sparkline-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #8b8794;
  font-family: "Geist Mono", ui-monospace, monospace;
}
.sparkline-meta strong {
  color: #fff;
  font-weight: 600;
}

/* ---- Model usage bars (Overview card) ----
   Replaces the old plain-table model mix with a visual bar chart,
   matching the marketing-site dashboard mockup. Each row: colored
   dot + name on the left, fill bar in the middle, percentage right.
   Tighter name column (140px) since the bars now sit in the narrower
   right column of the overview-row 2-up layout. */
.model-bars { display: flex; flex-direction: column; gap: 12px; }
.model-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 150px) 1fr 40px;
  gap: 12px;
  align-items: center;
}
.model-bar-name {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.model-bar-track {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.model-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.model-bar-pct {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: #8b8794;
  text-align: right;
}
@media (max-width: 700px) {
  .model-bar-row { grid-template-columns: 120px 1fr 36px; gap: 10px; }
  .model-bar-name { font-size: 12px; }
}

/* ---- Card ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.card-head h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.card-head small { font-size: 11.5px; color: #8b8794; font-family: "Geist Mono", ui-monospace, monospace; }
.card-body { padding: 4px 0; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  font-weight: 500;
  padding: 10px 18px;
  border-bottom: 1px solid #1f1f3a;
  background: #10102a;
}
td { padding: 12px 18px; border-bottom: 1px solid #1a1a35; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.user-row { cursor: pointer; transition: background 0.1s; }
tr.user-row:hover { background: #16162e; }
tr.user-row.inactive { opacity: 0.55; }

.user-cell { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #7c3aed);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
  color: #fff;
}
.avatar.large { width: 48px; height: 48px; font-size: 18px; }
.user-name { font-weight: 500; }
.user-email { font-size: 11.5px; color: #9ca3af; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.cost { color: #fbbf24; font-weight: 500; }

/* ---- Tags ---- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
}
.tag-ok    { background: rgba(34, 197, 94, 0.12); color: #6ee7b7; }
.tag-info  { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; }
.tag-flag  { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.tag-muted { background: rgba(156, 163, 175, 0.18); color: #d1d5db; }

/* ---- User detail / thread ---- */
.detail-head {
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 18px;
}
.detail-head h2 {
  font-size: 18px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.detail-head .user-email { font-size: 13px; }
.back-link {
  color: #c4b5fd;
  font-size: 12.5px;
  cursor: pointer;
  margin-bottom: 12px;
  display: inline-block;
}
.back-link:hover { color: #c4b5fd; }

.chat-list-item {
  padding: 13px 18px;
  border-bottom: 1px solid #1a1a35;
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.chat-list-item:hover { background: #16162e; }
.chat-list-item:last-child { border-bottom: none; }
.chat-list-main { flex: 1; min-width: 0; }
.chat-title { font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.chat-preview {
  font-size: 12px; color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-meta { font-size: 11px; color: #6b7280; text-align: right; flex-shrink: 0; }
.chat-meta .num { display: block; font-weight: 500; color: #d1d5db; text-align: right; }

.thread-title { font-size: 17px; margin-bottom: 4px; }
.thread-meta { color: #9ca3af; font-size: 12px; margin-bottom: 18px; }
.thread {
  background: #10102a;
  border-radius: 8px;
  padding: 8px 16px 16px;
}

/* Each message is a full-width row with a fat colored rail down the left.
   The role badge sits ON the rail so the eye locks onto a column of
   colored "USER" / "ASSISTANT" labels when scrolling — no zigzag. */
.msg {
  position: relative;
  margin: 14px 0;
  padding: 10px 14px 14px 22px; /* extra left padding to clear the rail */
  border-radius: 0 8px 8px 0;
}
.msg::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 3px;
}

/* USER: cool slate rail, faint backdrop. Role badge sits above the rail
   in slate so user messages clearly read as "input from a person." */
.msg-user {
  background: rgba(148, 163, 184, 0.05);
}
.msg-user::before { background: #64748b; }
.msg-user .msg-role {
  background: #475569;
  color: #f3f4f6;
}

/* ASSISTANT: indigo rail + tinted backdrop. Stands out against user messages
   without overwhelming long code blocks below. */
.msg-assistant {
  background: rgba(124, 58, 237, 0.07);
}
.msg-assistant::before { background: #818cf8; }
.msg-assistant .msg-role {
  background: #7c3aed;
  color: #fff;
}

.msg-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #9ca3af;
}
.msg-role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  /* Role-specific bg/color set in .msg-user / .msg-assistant rules above. */
}
.msg-body { font-size: 13px; line-height: 1.55; color: #e5e7eb; }
.msg-body p { margin-bottom: 8px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body code {
  background: #1f1f3a;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.msg-body pre {
  background: #0a0a1c;
  border: 1px solid #1f1f3a;
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 10px 0;
}
.msg-body pre code {
  background: transparent;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}
.msg-body ul, .msg-body ol { padding-left: 22px; margin: 8px 0; }
.msg-body li { margin: 3px 0; }

/* ---- Audit ---- */
.audit-row {
  padding: 10px 18px;
  border-bottom: 1px solid #1a1a35;
  font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 16px;
}
.audit-row:last-child { border-bottom: none; }
.audit-meta { color: #9ca3af; font-size: 11.5px; }

/* ---- Pricing ---- */
.pricing-table .price-input {
  background: #14142b;
  border: 1px solid #2a2a40;
  color: #f3f4f6;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.pricing-table .price-input:focus {
  outline: none;
  border-color: #7c3aed;
}
.row-save {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.row-save:hover:not(:disabled) { filter: brightness(1.08); }
.row-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Note ---- */
.note {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: #c4b5fd;
  margin-bottom: 18px;
}
.note strong { color: #fff; }
.note code {
  background: #1f1f3a;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ---- Action button ---- */
/* ---- Toasts ----
   Same design language as the main app — accent bar, progress bar,
   no emoji. See style.css for the full design notes. */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px 13px 22px;
  border-radius: 12px;
  background: rgba(18, 18, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f3f4f6;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  pointer-events: auto;
  overflow: hidden;
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.65),
    0 4px 12px -4px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  transform-origin: 100% 50%;
  animation: toastSlideIn 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.toast:hover {
  transform: translateY(-1px);
  box-shadow:
    0 22px 50px -12px rgba(0, 0, 0, 0.75),
    0 6px 16px -4px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.06) inset;
}
.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  opacity: 0.95;
}
.toast::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: toastProgress var(--toast-life, 2800ms) linear forwards;
}
.toast:hover::after { animation-play-state: paused; }

.toast-msg { flex: 1; color: #f4f4f5; }

.toast-success { color: #34d399; }
.toast-error   { color: #f87171; }
.toast-info    { color: #a78bfa; }
.toast-warn    { color: #fbbf24; }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(28px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-leaving {
  animation: toastSlideOut 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes toastSlideOut {
  to { opacity: 0; transform: translateX(40px) scale(0.92); }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 560px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* ---- Sidebar collapsed state ----
   Toggled by chevron OR by clicking the brand mark. Persisted in localStorage.
   Disabled below 800px (mobile uses burger pattern). */
@media (min-width: 801px) {
  .sidebar { transition: width 0.2s ease, padding 0.2s ease; }

  .shell.sidebar-collapsed .sidebar {
    width: 64px;
    padding: 16px 8px;
  }

  /* Brand: only the small Lociro mark shows, centered. The wordmark
     and chevron hide. Clicking the mark expands the sidebar back. */
  .shell.sidebar-collapsed .sidebar-brand {
    padding: 6px 0 14px;
    justify-content: center;
    gap: 0;
    height: auto;
    margin: 0 0 8px;
    border-bottom: none;
  }
  .shell.sidebar-collapsed .sidebar-brand-text { display: none; }
  .shell.sidebar-collapsed .sidebar-collapse-btn { display: none; }
  /* Show the brand mark only when collapsed — flips display:none to grid */
  .shell.sidebar-collapsed .sidebar-brand-mark { display: grid; }

  /* Section headings hidden so the icons line up evenly. */
  .shell.sidebar-collapsed .sidebar-section { display: none; }

  /* Nav items: icon only, centered. Label hidden via the .nav-label class. */
  .shell.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
  }
  .shell.sidebar-collapsed .nav-label { display: none; }
  .shell.sidebar-collapsed .nav-ico { font-size: 17px; width: auto; }

  /* Back link becomes just the arrow, centered. */
  .shell.sidebar-collapsed .sidebar-back {
    padding: 12px 0 4px;
    text-align: center;
  }
  .shell.sidebar-collapsed .back-label { display: none; }
  .shell.sidebar-collapsed .back-arrow { font-size: 18px; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .sidebar { width: 200px; }
  .kpi-value { font-size: 28px; }
}
@media (max-width: 700px) {
  .content { padding: 18px 16px 60px; }
  .kpi-value { font-size: 24px; }
}
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* ---- Model admin: wider drawer + grid form ----
   The model edit drawer needs more horizontal room than the user drawer
   (10+ fields vs. 1). We override the .drawer width when .drawer-wide
   is present, and use a 2-column grid that collapses on narrow screens. */
.drawer.drawer-wide { width: 720px; max-width: 96vw; }

.model-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.model-form-grid .drawer-field { margin-bottom: 0; }
.model-form-grid .drawer-field.full { grid-column: 1 / -1; }

.model-form-grid .drawer-field input[type="number"],
.model-form-grid .drawer-field select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);
  color: #f3f4f6;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.model-form-grid .drawer-field input[type="number"]:hover,
.model-form-grid .drawer-field select:hover {
  border-color: rgba(255,255,255,0.32);
}
.model-form-grid .drawer-field input:focus,
.model-form-grid .drawer-field select:focus {
  outline: none;
  border-color: #7c3aed;
  background: rgba(255,255,255,0.06);
}
.model-form-grid .drawer-field label small {
  font-weight: 400;
  color: #6b7280;
  margin-left: 4px;
}
.model-form-grid .drawer-field .req { color: #f87171; }

/* Toggles row — three checkboxes laid out horizontally */
.toggles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: 14px 16px;
  border: 1px solid #1f1f3a;
  border-radius: 10px;
  background: #0a0a1c;
}
.toggle-label {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: #e5e7eb;
  cursor: pointer;
  flex: 1; min-width: 180px;
}
.toggle-label input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
}
.toggle-label span { font-weight: 600; display: block; }
.toggle-label small {
  display: block;
  color: #9ca3af;
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 2px;
  width: 100%;
}

/* Pricing/Models table action buttons — extra column for Edit/Archive */
.pricing-table .row-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}
.pricing-table .row-actions button {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: #1f1f3a;
  border: 1px solid #2a2a4a;
  color: #e5e7eb;
  cursor: pointer;
}
.pricing-table .row-actions button:hover { background: #2a2a4a; }
.pricing-table .row-actions .danger { color: #fca5a5; }
.pricing-table .row-actions .danger:hover { background: #3a1a1a; }
.pricing-table .archived-row td { opacity: 0.55; }

.tag-vision {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #1e293b;
  color: #93c5fd;
  margin-left: 6px;
  vertical-align: middle;
}

@media (max-width: 700px) {
  .model-form-grid { grid-template-columns: 1fr; }
}

/* Brief green pulse on a row right after an in-place save/archive/restore.
   Subtle visual ack alongside the toast — the row tells you "yes, that
   was me you just saved" without forcing a full table reload. */
.pricing-table tr.row-just-saved,
.companies-table tr.row-just-saved {
  background: linear-gradient(90deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06));
  transition: background 0.45s ease;
}
.pricing-table tr,
.companies-table tr {
  transition: background 0.45s ease;
}
/* ============================================================
 * STANDARDS PAGE
 * ============================================================
 * Two-card page (Company Standards textarea on top, Flag Rules
 * grid below) with a popup rule editor modal. Reuses the .card
 * recipe from elsewhere, so headings, gradient backgrounds,
 * and borders match the rest of the admin.
 * ============================================================ */
.standards-page { display: flex; flex-direction: column; gap: 16px; }

/* ---- Standards textarea card ---- */
.std-lead {
  font-size: 13.5px;
  color: #cbc7d6;
  line-height: 1.55;
  margin-bottom: 14px;
}
.std-lead em { color: #fb923c; font-style: italic; }
.std-lead strong { color: #fff; font-weight: 500; }

.std-textarea {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: #fff;
  font-family: ui-monospace, "Geist Mono", "SF Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.std-textarea:focus {
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,.10);
}
.std-textarea::placeholder { color: #6b6776; }

.std-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.std-counter {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: #8b8794;
}
.std-counter span { color: #fff; font-weight: 600; }
.std-actions { display: flex; gap: 8px; }

/* ---- Flag rules section ---- */
.rules-cat {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rules-cat:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

.rules-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rules-cat-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rules-cat-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}
.rules-cat-head small {
  display: block;
  font-size: 11.5px;
  color: #8b8794;
  margin-top: 2px;
}
.rules-add-btn { margin-left: auto; flex-shrink: 0; }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .rules-grid { grid-template-columns: 1fr; }
}

.rules-empty {
  grid-column: 1 / -1;
  padding: 18px;
  text-align: center;
  font-size: 12.5px;
  color: #8b8794;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 10px;
}

/* ---- Single rule card ---- */
.rule-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.rule-card:hover { border-color: rgba(255,255,255,.14); }
.rule-card.active {
  background: linear-gradient(180deg, rgba(139,92,246,.06), rgba(139,92,246,.015));
  border-color: rgba(139,92,246,.30);
}

.rule-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: flex-start;
}
.rule-card-text strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.rule-card-text small {
  display: block;
  font-size: 11.5px;
  color: #8b8794;
  line-height: 1.4;
  margin-top: 2px;
}
.rule-type-tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: #8b8794;
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.rule-card.active .rule-type-tag {
  background: rgba(139,92,246,.10);
  color: #c4b5fd;
  border-color: rgba(139,92,246,.30);
}

.rule-card-actions {
  display: flex;
  gap: 4px;
  margin-left: 50px;     /* line up under the rule text, past the toggle */
}
.rule-action-btn {
  background: transparent;
  border: none;
  color: #8b8794;
  font-family: inherit;
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.rule-action-btn:hover { color: #fff; background: rgba(255,255,255,.04); }
.rule-action-danger:hover { color: #f87171; background: rgba(248,113,113,.05); }

/* ---- iOS-style toggle ---- */
.rule-toggle {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  padding: 2px 0;
}
.rule-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rule-toggle-track {
  display: inline-block;
  width: 36px; height: 20px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s;
}
.rule-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform 0.18s;
}
.rule-toggle input:checked + .rule-toggle-track {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
}
.rule-toggle input:checked + .rule-toggle-track .rule-toggle-knob {
  transform: translateX(16px);
}

/* ---- Rule editor modal ---- */
.rule-editor-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  animation: ruleEditorFadeIn 0.18s ease;
}
@keyframes ruleEditorFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rule-editor {
  width: 100%;
  max-width: 640px;
  /* No max-height here — let the overlay scroll instead.
     The modal grows naturally; overlay padding keeps it from
     touching the edges at any zoom level. */
  background: linear-gradient(180deg, rgba(20,12,32,.98), rgba(15,8,24,.98));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  /* Don't clip the body — let it expand fully */
  overflow: visible;
  /* Ensure the modal itself doesn't grow beyond the viewport */
  max-height: calc(100vh - 32px);
}
.rule-editor-head {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.rule-editor-head h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rule-editor-close {
  background: transparent;
  border: none;
  color: #8b8794;
  font-size: 22px;
  cursor: pointer;
  padding: 0; line-height: 1;
  width: 28px; height: 28px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.rule-editor-close:hover { background: rgba(255,255,255,.06); color: #fff; }

.rule-editor-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;          /* fills remaining height between head and foot */
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Rounded corners on the scrolling body need clip */
  border-radius: 0 0 16px 16px;
}
.rule-editor-foot {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;   /* foot never squishes */
  border-radius: 0 0 16px 16px;
}

.rule-editor-info {
  font-size: 12.5px;
  color: #fed7aa;
  background: rgba(251,146,60,.08);
  border: 1px solid rgba(251,146,60,.22);
  padding: 10px 12px;
  border-radius: 8px;
}

/* Match-type radio cards */
.rule-type-options { display: flex; flex-direction: column; gap: 6px; }
.rule-type-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rule-type-opt:hover { border-color: rgba(255,255,255,.14); }
.rule-type-opt input { margin-top: 3px; accent-color: #8b5cf6; }
.rule-type-opt input:checked ~ span strong { color: #c4b5fd; }
.rule-type-opt:has(input:checked) {
  background: rgba(139,92,246,.06);
  border-color: rgba(139,92,246,.30);
}
.rule-type-opt strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.rule-type-opt small { display: block; font-size: 11.5px; color: #8b8794; margin-top: 2px; line-height: 1.4; }

/* Test-pattern result block */
.rule-test-result {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  color: #cbc7d6;
  display: none;
}
.rule-test-result:not(:empty) { display: block; }
.rule-test-result code {
  background: rgba(0,0,0,.30);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.rule-test-hit {
  background: rgba(52,211,153,.06);
  border-color: rgba(52,211,153,.32);
  color: #a7f3d0;
}
.rule-test-miss {
  background: rgba(255,255,255,.025);
  color: #8b8794;
}
.rule-test-error {
  background: rgba(248,113,113,.06);
  border-color: rgba(248,113,113,.32);
  color: #fca5a5;
}

.rule-editor-foot {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
 * FLAGS PAGE
 * ============================================================
 * List-first design. Three regions:
 *   1. Topbar stat line + range pills (.flags-stats)
 *   2. Conditional alert ribbons (.flags-alert-ribbon) — only render
 *      when a user has 5+ flags in the period
 *   3. Day-grouped event list (.flags-day-group)
 * Plus the highlighted-message treatment used by the thread viewer.
 * ============================================================ */
.flags-page { display: flex; flex-direction: column; gap: 14px; }

/* ---- Stat line ---- */
.flags-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #8b8794;
  margin-right: auto;
}
.flags-stat strong {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: #fff;
  font-weight: 600;
  margin-right: 4px;
}
.flags-stat-alert strong { color: #fb923c; }
.flags-stat-sep { color: #4a4658; }

/* ---- Conditional alert ribbon ---- */
.flags-alerts { display: flex; flex-direction: column; gap: 8px; }

.flags-alert-ribbon {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251,146,60,.10), rgba(251,146,60,.04));
  border: 1px solid rgba(251,146,60,.32);
}
.flags-alert-ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(251,146,60,.14);
  border: 1px solid rgba(251,146,60,.36);
  display: grid; place-items: center;
  color: #fb923c; font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.flags-alert-body {
  font-size: 13.5px;
  color: #fff;
  line-height: 1.5;
}
.flags-alert-body strong { color: #fff; font-weight: 600; }
.flags-alert-body small {
  display: block;
  font-size: 11.5px;
  color: #cbc7d6;
  margin-top: 4px;
}
.flags-alert-action {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.flags-alert-action:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}

/* ---- Events card ---- */
.flags-events-card { margin-bottom: 0; }

.flags-day-group:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.flags-day-label {
  padding: 12px 20px 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b6776;
}
.flags-day-events { display: flex; flex-direction: column; }

/* ---- Event row ---- */
.flag-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1.6fr 2fr 24px;
  gap: 16px;
  align-items: center;
  padding: 11px 20px;
  border-left: 3px solid var(--flag-cat-color, #8b5cf6);
  margin-left: -3px;     /* let the colored stripe sit flush against the panel edge */
  background: transparent;
  transition: background 0.12s;
  cursor: pointer;
  user-select: none;
}
.flag-row[role="button"]:hover {
  background: rgba(255,255,255,.025);
}
.flag-row[role="button"]:focus {
  outline: none;
  background: rgba(139,92,246,.06);
}
.flag-row:not([role="button"]) {
  cursor: default;
  opacity: 0.65;
}
.flag-row + .flag-row { border-top: 1px solid rgba(255,255,255,.04); }
.flag-row-reviewed { opacity: 0.55; }
.flag-row-reviewed::after {
  /* small "✓" check we can wire later when we add review actions */
}

.flag-time {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: #8b8794;
  white-space: nowrap;
}

.flag-user {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.flag-user-email {
  font-size: 12.5px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flag-repeat-badge {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #fed7aa;
  background: rgba(251,146,60,.14);
  border: 1px solid rgba(251,146,60,.30);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.flag-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.flag-rule-icon { font-size: 14px; flex-shrink: 0; }
.flag-rule-label {
  font-size: 12.5px;
  color: #cbc7d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flag-snippet {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flag-snippet code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px 7px;
  border-radius: 5px;
}
.flag-snippet-empty {
  font-size: 11px;
  color: #6b6776;
  font-style: italic;
}

.flag-go {
  font-size: 16px;
  color: #6b6776;
  text-align: center;
  transition: color 0.12s, transform 0.12s;
}
.flag-row[role="button"]:hover .flag-go {
  color: #c4b5fd;
  transform: translateX(2px);
}

/* Narrow viewports — collapse less-critical columns */
@media (max-width: 1100px) {
  .flag-row { grid-template-columns: 70px 1fr 1.4fr 24px; }
  .flag-snippet { display: none; }
}
@media (max-width: 720px) {
  .flag-row { grid-template-columns: 60px 1fr 24px; gap: 10px; padding: 11px 16px; }
  .flag-rule { display: none; }
}

/* ---- Highlighted message in thread viewer ---- */
.msg-flagged {
  position: relative;
  border-left: 3px solid #fb923c !important;
  background: linear-gradient(90deg, rgba(251,146,60,.08), transparent 60%) !important;
  padding-left: 14px;
}
.msg-flag-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fed7aa;
  background: rgba(251,146,60,.16);
  border: 1px solid rgba(251,146,60,.32);
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 8px;
}
.msg-flagged-pulse {
  animation: msgFlagPulse 1.4s ease-out 1;
}
@keyframes msgFlagPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251,146,60,.40); }
  100% { box-shadow: 0 0 0 14px rgba(251,146,60,0); }
}

/* Empty-state link */
.flags-empty-link {
  color: #c4b5fd;
  border-bottom: 1px solid rgba(196,181,253,.4);
  padding-bottom: 1px;
  margin-left: 4px;
}
.flags-empty-link:hover { color: #fff; border-bottom-color: #fff; }

/* ---- KPI alert state ----
   When the Flagged KPI on the Overview has events to review, swap to
   peach accents and show a "Needs review" badge inline with the label.
   Adding .kpi-clickable makes the entire card a clickable link to the
   Flags page (the next-step the admin needs to take). */
.kpi.kpi-alert {
  --kpi-accent: #fb923c;
  background: linear-gradient(180deg, rgba(251,146,60,.10), rgba(251,146,60,.02));
  border-color: rgba(251,146,60,.32);
}
.kpi.kpi-alert .kpi-value { color: #fff; }

.kpi-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(251,146,60,.14);
  color: #fed7aa;
  border: 1px solid rgba(251,146,60,.32);
  margin-left: 6px;
  vertical-align: 1px;
}

.kpi.kpi-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.kpi.kpi-clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(251,146,60,.55);
}
.kpi.kpi-clickable::after {
  content: "→";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 14px;
  color: #fed7aa;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.18s;
}
.kpi.kpi-clickable:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
 * ACCESS CONTROL PAGE
 * ============================================================ */
.access-page { display: flex; flex-direction: column; gap: 16px; }

.access-status-badge {
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: 7px; white-space: nowrap; flex-shrink: 0;
}
.access-status-badge.on  { background: rgba(52,211,153,.10); color: #34d399; border: 1px solid rgba(52,211,153,.25); }
.access-status-badge.off { background: rgba(255,255,255,.05); color: #8b8794; border: 1px solid rgba(255,255,255,.10); }

.access-self-warn {
  background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.28);
  border-radius: 9px; padding: 10px 13px; font-size: 12.5px; color: #fed7aa;
  margin-bottom: 12px; line-height: 1.5;
}
.access-self-warn code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }

.access-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }

.access-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; padding: 5px 10px;
}
.access-chip code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; color: #fff; }
.access-chip-label { font-size: 11px; color: #8b8794; }
.access-chip-x {
  background: transparent; border: none; color: #6b6776;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: color .12s;
}
.access-chip-x:hover { color: #f87171; }
.access-chip-add {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px dashed rgba(255,255,255,.16);
  border-radius: 7px; padding: 5px 11px; font-family: inherit;
  font-size: 12.5px; color: #8b8794; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.access-chip-add:hover { border-color: rgba(196,181,253,.40); color: #c4b5fd; }
.access-hint { font-size: 12px; color: #6b6776; margin-top: 6px; }
.access-hint code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: #a1a1aa; }
.access-hint-ok { color: #34d399; margin-left: 6px; }

/* Override table */
.access-override-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.access-override-table th {
  padding: 9px 16px; text-align: left; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #6b6776;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.access-override-table td {
  padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle;
}
.access-override-table tr:last-child td { border-bottom: none; }
.access-override-table tr:hover td { background: rgba(255,255,255,.02); }
.access-user-email { font-weight: 500; color: #fff; font-size: 13px; }
.access-row-actions { display: flex; gap: 4px; justify-content: flex-end; }

.access-cidr { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; }
.access-cidr.allowed  { background: rgba(52,211,153,.10); color: #34d399; border: 1px solid rgba(52,211,153,.22); border-radius: 4px; padding: 1px 6px; }
.access-cidr.restricted { background: rgba(248,113,113,.10); color: #f87171; border: 1px solid rgba(248,113,113,.22); border-radius: 4px; padding: 1px 6px; }
.access-cidr-default { font-size: 12px; color: #6b6776; font-style: italic; }
.access-cidr-none { color: #4a4658; }

/* Override modal sections */
.access-override-section {
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
}
.access-override-section-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.access-override-section.allowed  .access-override-section-head { background: rgba(52,211,153,.06); }
.access-override-section.restricted .access-override-section-head { background: rgba(248,113,113,.06); }
.access-override-icon { font-size: 14px; font-weight: 700; color: #34d399; margin-top: 1px; flex-shrink: 0; }
.access-override-icon.restricted { color: #f87171; }
.access-override-section-head strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.access-override-section-head small { font-size: 12px; color: #8b8794; margin-top: 2px; display: block; line-height: 1.4; }
.access-override-section-head small code { font-family: "Geist Mono", ui-monospace, monospace; background: rgba(0,0,0,.25); padding: 0 4px; border-radius: 3px; }
.access-override-chips { padding: 10px 14px 4px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
.access-chips-empty { font-size: 12px; color: #6b6776; font-style: italic; align-self: center; }
.access-modal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 6px; padding: 3px 8px;
}
.access-modal-chip.allowed    { background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.25); }
.access-modal-chip.restricted { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.25); }
.access-modal-chip code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #fff; }
.access-override-add-row {
  display: flex;
  gap: 8px;
  padding: 8px 14px 12px;
  align-items: center;
  min-width: 0;
}
.access-override-input {
  flex: 1;
  min-width: 0;          /* critical — prevents flex child from overflowing */
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  color: #fff;
  padding: 7px 11px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  outline: none;
  transition: border-color .12s;
  box-sizing: border-box;
  width: 0;              /* override browser default so flex does the sizing */
}
.access-override-input:focus { border-color: rgba(139,92,246,.50); }
.access-override-input::placeholder { color: #4a4658; }
.access-override-add-row .drawer-secondary {
  flex-shrink: 0;        /* button never compresses */
  white-space: nowrap;
}

/* User-detail IP one-liner */
.user-ip-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-top: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}
.user-ip-label { font-size: 12px; color: #6b6776; min-width: 70px; flex-shrink: 0; }
.user-ip-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-ip-detail { font-size: 12px; font-family: "Geist Mono", ui-monospace, monospace; color: #8b8794; }

/* ---- Searchable user picker inside override modal ---- */
.ov-user-picker {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
}
.ov-user-picker.hidden { display: none; }

.ov-user-search-wrap {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ov-user-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #6b6776; pointer-events: none;
}
.ov-user-search-input {
  width: 100%; background: rgba(255,255,255,.04); border: none;
  color: #fff; font-family: inherit; font-size: 13.5px;
  padding: 10px 14px 10px 35px; outline: none; box-sizing: border-box;
}
.ov-user-search-input::placeholder { color: #6b6776; }
.ov-user-search-input:focus { background: rgba(139,92,246,.06); }

.ov-user-list {
  max-height: 180px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.10) transparent;
}
.ov-user-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: transparent; border: none;
  padding: 9px 14px; font-family: inherit; font-size: 13px;
  text-align: left; color: #e7e5ec; cursor: pointer;
  transition: background .10s;
}
.ov-user-option:hover { background: rgba(139,92,246,.12); color: #fff; }
.ov-user-initials {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(139,92,246,.20); color: #c4b5fd;
  font-size: 11px; font-weight: 600; display: grid;
  place-items: center; flex-shrink: 0;
}
.ov-user-email { font-size: 13px; }

.ov-user-selected {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.28); border-radius: 10px;
  font-size: 13.5px; color: #fff; margin-top: 0;
}
.ov-user-selected.hidden { display: none; }
.ov-user-clear {
  background: transparent; border: none; color: #8b8794;
  font-family: inherit; font-size: 12px; cursor: pointer;
  padding: 2px 6px; border-radius: 4px; transition: color .12s;
}
.ov-user-clear:hover { color: #c4b5fd; }

/* ============================================================
 * Token quota / usage bars — user detail panel
 * (mirrors ud-* classes from style.css for the admin context)
 * ============================================================ */
.ud-section {
  padding: 4px 0 16px;
}
.ud-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ud-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ddd6fe;
}
.ud-section-icon { font-size: 16px; }
.ud-section-reset {
  font-size: 11px;
  color: #6b6776;
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
}
.ud-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ud-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.ud-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.ud-fill-ok      { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.ud-fill-warning { background: linear-gradient(90deg, #d97706, #fbbf24); }
.ud-fill-blocked { background: linear-gradient(90deg, #dc2626, #f87171); }
.ud-bar-pct {
  font-size: 13px;
  font-weight: 700;
  color: #a78bfa;
  min-width: 36px;
  text-align: right;
}
.ud-bar-pct.pct-warning { color: #fbbf24; }
.ud-bar-pct.pct-blocked { color: #f87171; }
.ud-models {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ud-models-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6776;
  margin-bottom: 2px;
}
.ud-models-empty {
  font-size: 12px;
  color: #4b4563;
  text-align: center;
  padding: 10px 0;
}
.ud-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ud-model-name {
  font-size: 12px;
  font-weight: 500;
  color: #cbc7d6;
  width: 130px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ud-model-bar-wrap { flex: 1; }
.ud-model-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.ud-model-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
  opacity: 0.85;
}
.ud-model-pct {
  font-size: 11px;
  font-weight: 600;
  color: #6b6776;
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}
.ud-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 0 20px;
}


/* ============================================================
 * Token quota two-column layout (uq-*)
 * ============================================================ */
.uq-row {
  display: flex;
  gap: 0;
  padding: 16px 20px;
  align-items: flex-start;
}
.uq-col {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
}
.uq-col:first-child { padding-left: 0; }
.uq-col:last-child  { padding-right: 0; }
.uq-col-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.uq-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #ddd6fe;
  margin-bottom: 10px;
}
.uq-reset {
  font-size: 11px;
  font-weight: 400;
  color: #6b6776;
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.07);
}
.uq-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.uq-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.uq-models {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.uq-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uq-model-name {
  font-size: 11px;
  color: #8b8794;
  width: 110px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uq-model-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.uq-model-bar-fill {
  height: 100%;
  border-radius: 99px;
  opacity: 0.85;
}
.uq-model-pct {
  font-size: 11px;
  color: #6b6776;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}


/* ============================================================
 * Provider page + cURL parser
 * ============================================================ */
.curl-parser-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.curl-parser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #cbc7d6;
}
.curl-parse-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  cursor: pointer;
  transition: background .15s;
}
.curl-parse-btn:hover { background: rgba(139,92,246,0.28); }
.curl-textarea {
  width: 100%;
  min-height: 90px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  color: #cbc7d6;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  box-sizing: border-box;
}
.curl-textarea:focus {
  outline: none;
  border-color: rgba(139,92,246,0.5);
}
.drawer-msg.success { color: #86efac; }
/* ============================================================
   Flag-rule severity badge — shown in the main rules list next
   to the match-type tag. Same shape, different colors per action.
   Matches the warning-chip palette so a 'Warn' tag in the list
   matches the chip the user eventually sees.
   ============================================================ */
.rule-sev-tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  margin-right: 6px;
  border: 1px solid transparent;
}
.rule-sev-audit {
  background: rgba(255,255,255,.04);
  color: #8b8794;
  border-color: rgba(255,255,255,.08);
}
.rule-sev-warn {
  background: rgba(251,146,60,.12);
  color: #fdba74;
  border-color: rgba(251,146,60,.22);
}
.rule-sev-mask {
  background: rgba(167,139,250,.12);
  color: #c4b5fd;
  border-color: rgba(167,139,250,.22);
}
.rule-sev-block {
  background: rgba(244,114,182,.12);
  color: #fda4c5;
  border-color: rgba(244,114,182,.22);
}

/* Disabled radio options in the rule editor for 'mask' and 'block'
   until those runtimes ship. Visible so admins see the roadmap,
   but visually muted and non-selectable. */
.rule-type-opt-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rule-type-opt-disabled input { cursor: not-allowed; }
.rule-soon-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b8794;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  font-style: normal;
  vertical-align: middle;
}

/* ============================================================
   Model Pools admin page — additive styles for the Pools drawer
   (member rows, available rows, field row for inline checkboxes)
   and a few small tweaks to make textareas / number inputs look
   consistent with the rest of the drawer fields.
   ============================================================ */

/* Inline row of 2-3 checkboxes inside the pool drawer (is_video,
   is_default, is_active). Wraps gracefully on narrow widths. */
.drawer-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 18px;
}
.drawer-field-row .drawer-checkbox {
  margin-bottom: 0;
  flex: 1 1 200px;
}

/* Textareas and number inputs in the drawer — match the input field
   styling that already exists for text/url/password inputs. */
.drawer-field textarea,
.drawer-field input[type="number"] {
  width: 100%;
  padding: 9px 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.drawer-field textarea:focus,
.drawer-field input[type="number"]:focus {
  outline: none;
  border-color: #7c3aed;
}
.drawer-field input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Member row in pool drawer — listed under "Backends in this pool"
   and "Available models". Same layout for both, distinguished only
   by the action button (Remove vs + Add) and a subtle background. */
.pool-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.pool-member-row:last-child { margin-bottom: 0; }

/* Available list rows are slightly more subdued — they're not yet
   in the pool, just candidates. */
.pool-member-available {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
}

.pool-member-info {
  flex: 1;
  min-width: 0;  /* allow code element to truncate cleanly */
}
.pool-member-info code {
  font-size: 11px;
  color: #8b8794;
  word-break: break-all;
}

/* Weight controls inside a pool member row.
   Sits between the model info and the Remove button:
   [ info ............ ] [ Weight  [ 50 ]  62.5% ] [ Remove ] */
.pool-member-weight {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pool-member-weight label {
  font-size: 11px;
  color: #8b8794;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pool-member-weight input[type="number"] {
  width: 64px;
  padding: 4px 6px;
  font-size: 13px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: #e6e4ec;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pool-member-weight input[type="number"]:focus {
  outline: none;
  border-color: rgba(167,139,250,0.55);
  background: rgba(0,0,0,0.40);
}
.pool-member-weight input.weight-just-saved {
  border-color: rgba(134,239,172,0.55);
  background: rgba(134,239,172,0.06);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.pool-member-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
  color: #86efac;
}

/* Footer line under the member list — shows running total weight. */
.pool-weight-footer {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-top: 4px;
  font-size: 12px;
  color: #cbc7d6;
  border-top: 1px dashed rgba(255,255,255,0.08);
}

/* Two-step inline confirm — used by pool delete and remove-member
   buttons in place of the native confirm() popup. First click arms
   the button (peach background, "Click again to confirm" label),
   second click within 3s commits. Outside click or timeout disarms. */
.rule-action-btn.confirm-armed {
  background: rgba(251,146,60,0.18);
  color: #fdba74;
  border-color: rgba(251,146,60,0.40);
  animation: confirm-pulse 0.4s ease-out;
}
@keyframes confirm-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================================
   Policy editor — Quill 2.x dark-theme overrides + drawer sizing
   ============================================================
   Quill's "snow" theme ships a light palette. We override colors
   so the toolbar, picker dropdowns, and editor area match the
   rest of the admin app (the dark purple/zinc palette).

   Body of the policy drawer is taller than other drawers because
   policies are long-form content. We set a min-height on the
   editor container so the typing area doesn't feel cramped.
   ============================================================ */

/* The drawer wraps a flex column; the body needs to grow so the
   editor below has somewhere to live. */
.drawer-body-policy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* The editor container itself. Quill mounts inside this div, then
   structures itself into .ql-toolbar (top) and .ql-container (the
   typing area). We give the container a generous min-height and
   max-height so it doesn't push the drawer footer off-screen. */
.policy-editor {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  max-height: 65vh;
  border-radius: 10px;
  overflow: hidden;
  /* Override Quill's default border so our themed border wins. */
}

/* Toolbar — match other admin chrome. */
.policy-editor .ql-toolbar.ql-snow {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none;
}
.policy-editor .ql-toolbar.ql-snow .ql-stroke {
  stroke: #cbc7d6;
}
.policy-editor .ql-toolbar.ql-snow .ql-fill {
  fill: #cbc7d6;
}
.policy-editor .ql-toolbar.ql-snow .ql-picker,
.policy-editor .ql-toolbar.ql-snow .ql-picker-label {
  color: #cbc7d6;
}
.policy-editor .ql-toolbar.ql-snow button:hover .ql-stroke,
.policy-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: #c4b5fd;
}
.policy-editor .ql-toolbar.ql-snow button:hover .ql-fill,
.policy-editor .ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: #c4b5fd;
}

/* Picker dropdowns (headings menu). Quill renders these as
   absolutely positioned divs — they default to white. */
.policy-editor .ql-toolbar.ql-snow .ql-picker-options {
  background: #1f1d27;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f4f4f5;
}

/* Editor area — where the user types. */
.policy-editor .ql-container.ql-snow {
  flex: 1;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #f4f4f5;
  font: inherit;
  font-size: 14px;
  overflow-y: auto;
}
.policy-editor .ql-editor {
  min-height: 320px;
  line-height: 1.55;
}
.policy-editor .ql-editor.ql-blank::before {
  color: #6b6776;
  font-style: normal;
}
.policy-editor .ql-editor h1,
.policy-editor .ql-editor h2,
.policy-editor .ql-editor h3 {
  color: #f4f4f5;
  margin-top: 1em;
  margin-bottom: 0.4em;
}
.policy-editor .ql-editor a {
  color: #c4b5fd;
  text-decoration: underline;
}
.policy-editor .ql-editor blockquote {
  border-left: 3px solid rgba(196,181,253,0.4);
  color: #cbc7d6;
}
.policy-editor .ql-editor pre.ql-syntax {
  background: rgba(0,0,0,0.30);
  color: #fbcfe8;
}

/* Read-only mode: hide toolbar gracefully and let the editor
   take the full container height. */
.policy-editor:not(:has(.ql-toolbar)) .ql-container.ql-snow {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* ============================================================
   Sortable table headers — used by AdminAPI.makeTableSortable.
   Clickable <th> cells with a small arrow indicating current
   sort. The arrow span is injected/removed by the helper; we
   just style hover + the active state here.
   ============================================================ */
.sortable-th {
  user-select: none;
  position: relative;
  transition: color 0.12s, background 0.12s;
}
.sortable-th:hover {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.06);
}
.sortable-th.sort-asc,
.sortable-th.sort-desc {
  color: #c4b5fd;
}
.sortable-th .sort-arrow {
  display: inline-block;
  font-size: 11px;
  margin-left: 2px;
  opacity: 0.85;
}

/* ============================================================
   Native <select> dropdown — dark theme
   ============================================================
   Browser support is uneven for <option>: Chrome/Edge respect
   background/color; Firefox partial; Safari ignores entirely
   (renders OS-native popup). This is the most we can do without
   building a custom dropdown widget.
   ============================================================ */
.drawer-field select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);
  color: #f3f4f6;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  /* Custom caret since we removed the native one with appearance:none */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23cbc7d6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
  transition: border-color 0.15s, background-color 0.15s;
}
.drawer-field select:hover {
  border-color: rgba(255,255,255,0.32);
}
.drawer-field select:focus {
  outline: none;
  border-color: #7c3aed;
  background-color: rgba(255,255,255,0.06);
}
/* The opened option list. Chrome/Edge respect these; Firefox partial.
   Safari renders the OS popup and ignores — there's no CSS workaround. */
.drawer-field select option,
.model-form-grid .drawer-field select option {
  background-color: #1a1830;
  color: #f3f4f6;
}
.drawer-field select option:disabled,
.model-form-grid .drawer-field select option:disabled {
  color: #6b6776;
}

/* ============================================================
   Pricing/Models page — Provider + Status filter selects
   ============================================================
   Mirrors the .drawer-field select dark-theme pattern, but
   sized for an inline filter bar (auto width, smaller padding).
   Chrome/Edge respect <option> background+color; Firefox is
   partial; Safari renders the OS popup and ignores. There's no
   pure-CSS workaround short of building a custom dropdown.
   ============================================================ */
.pricing-filter-select {
  width: auto;
  min-width: 140px;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);
  color: #f3f4f6;
  padding: 7px 32px 7px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23cbc7d6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.pricing-filter-select:hover {
  border-color: rgba(255,255,255,0.32);
}
.pricing-filter-select:focus {
  outline: none;
  border-color: #7c3aed;
  background-color: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
/* Opened dropdown list — has to be set on <option> directly.
   color-scheme:dark on the <select> also nudges Chromium to render
   the popup with a dark scrollbar/highlight. */
.pricing-filter-select {
  color-scheme: dark;
}
.pricing-filter-select option {
  background-color: #1a1830;
  color: #f3f4f6;
}
.pricing-filter-select option:checked,
.pricing-filter-select option:hover {
  background-color: #2a2550;
  color: #fff;
}

/* ============================================================
 * Auto-Routing admin page
 * ============================================================ */
.routing-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.routing-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.15);
  margin-bottom: 4px;
}
.routing-tab {
  background: transparent;
  border: none;
  color: #8b8794;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.routing-tab:hover {
  color: #cbc7d6;
}
.routing-tab.active {
  color: #c4b5fd;
  border-bottom-color: #a78bfa;
}
.routing-tab-sub {
  font-size: 11px;
  font-weight: 400;
  color: #5d5870;
  margin-left: 4px;
}
.routing-tab.active .routing-tab-sub {
  color: #8b8794;
}

/* Reuse companies-table styling but add a hover tint on routing rows
   since they're clickable-ish via the Edit button. */
#panel-routing .companies-table tr {
  transition: background 0.1s;
}

/* ============================================================
 * Auto-Routing — classifier pool card (page top)
 * ============================================================ */
.classifier-card {
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: linear-gradient(180deg, rgba(167,139,250,0.06), rgba(167,139,250,0.02));
}
.classifier-card .card-head h3 {
  color: #c4b5fd;
}
.classifier-card-body {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 20px !important;
}
.classifier-current {
  flex: 1;
  min-width: 0;
}
.classifier-current-label {
  font-size: 11px;
  color: #8b8794;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.classifier-current-value {
  font-size: 16px;
  color: #fff;
  margin-bottom: 6px;
}
.classifier-current-value strong {
  color: #fff;
}
.classifier-current-hint {
  font-size: 12px;
  color: #8b8794;
  line-height: 1.4;
}
.classifier-card-body .drawer-primary {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hide the category-only fields when the drawer is in classifier mode.
   The drawer reuses the same DOM but only the primary pool dropdown
   is relevant for classifier — fallback / produces_files / is_active
   are category-only fields. */
.drawer.drawer-mode-classifier label.drawer-field:has(#routingField_fallback_pool),
.drawer.drawer-mode-classifier label.drawer-field:has(#routingField_produces_files),
.drawer.drawer-mode-classifier label.drawer-field:has(#routingField_is_active),
.drawer.drawer-mode-classifier #routingV2Section,
.drawer.drawer-mode-classifier .routing-section:has(#routingField_pool_low),
.drawer.drawer-mode-classifier .routing-section:has(#routingField_temperature),
.drawer.drawer-mode-classifier .routing-resolve-note {
  display: none;
}

/* ----------------------------------------------------------------
   Routing drawer — label/hint typography.
   The routing drawer uses <span class="drawer-field-label"> and
   <span class="drawer-field-hint"> (not the generic <label> the rest
   of the admin uses). Without these rules they render INLINE, which
   is why "Primary pool Used when..." ran together on one line.
   These rules make the label its own bold line and the hint a smaller
   muted line beneath it. ---------------------------------------------- */
.drawer-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #e7e3f0;
  margin-bottom: 3px;
  letter-spacing: 0.2px;
}
.drawer-field-hint {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: #8b8794;
  line-height: 1.45;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.drawer-field-label + .drawer-field-hint { margin-top: 0; }

/* The routing drawer's selects/number inputs sit directly under the
   spans — give them a little top gap and consistent sizing. */
#routingDrawer .drawer-field select,
#routingDrawer .drawer-field input[type="number"] {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.20);
  color: #f3f4f6;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}

/* ----------------------------------------------------------------
   Routing drawer — section grouping (Confidence / Complexity / Sampling)
   so the two axes read as distinct blocks rather than a flat list. ---- */
.routing-section {
  border: 1px solid rgba(167,139,250,0.16);
  border-radius: 10px;
  padding: 14px 14px 4px;
  margin-bottom: 16px;
  background: rgba(167,139,250,0.035);
}
.routing-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #b9b2d6;
  margin-bottom: 2px;
}
.routing-section-sub {
  font-size: 11.5px;
  color: #8b8794;
  line-height: 1.45;
  margin-bottom: 12px;
}
.routing-section-badge {
  font-size: 10px;
  font-weight: 600;
  color: #8b8794;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}

/* The "how this resolves" ladder note at the top of the routing fields. */
.routing-resolve-note {
  font-size: 11.5px;
  color: #a9a3c0;
  line-height: 1.5;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.routing-resolve-note strong { color: #cbe8fb; }
.routing-resolve-note ol { margin: 6px 0 0; padding-left: 18px; }
.routing-resolve-note li { margin-bottom: 2px; }

/* A compact three-across row for the complexity pools and max tokens. */
.routing-triple {
  display: flex;
  gap: 8px;
}
.routing-triple > div { flex: 1; min-width: 0; }
.routing-triple label { display:block; font-size: 11px; color:#8b8794; margin-bottom: 3px; }

/* ----------------------------------------------------------------
   Widen the routing drawer specifically — it carries more fields than
   the other drawers, so it gets more room. Other drawers keep 460px. */
#routingDrawer { width: 560px; }