/**
 * admin-ui.css — MiddleSiggy Tools "Data-Dense Dashboard" skin
 *
 * The skill (ui-ux-pro-max) "Data-Dense Dashboard + Enterprise SaaS" vocabulary,
 * rendered in the fleet green palette. Layered ON TOP of theme.php (which supplies
 * the --primary-* color vars) + Bootstrap. Loaded by every admin page after
 * theme.php so it can consume those vars and override the per-page inline layout.
 *
 * Design authority: ui-ux-pro-max skill. Palette: fleet green (theme.php vars).
 * Fonts: self-hosted Space Grotesk (display) + Inter (body) — /assets/fonts/.
 *
 * Created 2026-07-03 — UI/UX Pro Max adoption pilot (tools only).
 * REVERT: stop loading this file (and revert theme.php) to restore the prior look.
 */

/* ============================================================ FONTS */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;              /* variable font, full weight range */
  font-display: swap;
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk-latin.woff2') format('woff2');
}

/* ============================================================ TOKENS */
:root {
  /* elevation scale — consistent, skill rule `elevation-consistent` */
  --au-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --au-shadow:    0 4px 16px rgba(var(--primary-color-rgb, 21,128,61), .06),
                  0 1px 3px rgba(15,23,42,.05);
  --au-shadow-lg: 0 10px 28px rgba(var(--primary-color-rgb, 21,128,61), .12),
                  0 2px 8px rgba(15,23,42,.06);

  --au-radius:    16px;   /* cards */
  --au-radius-sm: 10px;   /* inner elements, chips */
  --au-radius-pill: 999px;

  /* dense spacing scale (skill --density 8: 8-32px) */
  --au-s1: 4px;  --au-s2: 8px;  --au-s3: 12px; --au-s4: 16px;
  --au-s5: 20px; --au-s6: 24px; --au-s8: 32px;

  --au-line: #E5E9F0;
  --au-line-strong: #CBD5E1;
  --au-ink: #0F172A;
  --au-muted: #64748B;
  --au-paper: #F1F5F9;

  /* SEMANTIC status colors — separate from the green accent (skill rule
     `color-semantic` + `color-not-decorative-only`). Green here is "ok/success"
     and coincides with brand, but amber/red are independent. */
  --au-ok:   #15803D;  --au-ok-bg:   #DCFCE7;  --au-ok-ink:   #14532D;
  --au-warn: #B45309;  --au-warn-bg: #FEF3C7;  --au-warn-ink: #78350F;
  --au-bad:  #B91C1C;  --au-bad-bg:  #FEE2E2;  --au-bad-ink:  #7F1D1D;
  --au-info: #1D4ED8;  --au-info-bg: #DBEAFE;  --au-info-ink: #1E3A8A;

  --au-motion: 200ms;
  --au-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================ BASE TYPE */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--au-ink);
  background-color: var(--au-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display face on headings + the top-navbar title + numerals in KPIs.
   Skill rule `font-pairing` / `weight-hierarchy`. */
h1, h2, h3, h4, h5, h6,
.top-navbar h1,
.au-display {
  font-family: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Tabular figures where numbers line up (skill rule `number-tabular`). */
.stats-card h3, .au-kpi-value, .table td, .au-tabnum, .badge {
  font-variant-numeric: tabular-nums;
}

/* ============================================================ CARD SYSTEM
   Recolor + re-elevate the existing per-page card classes so all 19 pages
   pick up the new look with no per-page edit. */
.stats-card,
.quick-actions,
.recent-activity,
.card,
.au-card {
  border-radius: var(--au-radius) !important;
  border: 1px solid var(--au-line) !important;
  box-shadow: var(--au-shadow) !important;
  transition: transform var(--au-motion) var(--au-ease),
              box-shadow var(--au-motion) var(--au-ease) !important;
}
.stats-card:hover,
.au-card.is-hoverable:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--au-shadow-lg) !important;
}
.card-header {
  border-top-left-radius: var(--au-radius) !important;
  border-top-right-radius: var(--au-radius) !important;
}

/* KPI value emphasis */
.stats-card h3, .au-kpi-value {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600;
  letter-spacing: -.02em;
}

/* ============================================================ KPI SUMMARY ROW
   Optional new component (summary-first). Pages can use .au-kpis > .au-kpi. */
.au-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--au-s4);
  margin-bottom: var(--au-s6);
}
.au-kpi {
  background: #fff;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  box-shadow: var(--au-shadow);
  padding: var(--au-s5);
  position: relative;
  overflow: hidden;
  transition: transform var(--au-motion) var(--au-ease),
              box-shadow var(--au-motion) var(--au-ease);
}
.au-kpi:hover { transform: translateY(-2px); box-shadow: var(--au-shadow-lg); }
.au-kpi .au-kpi-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--au-muted);
  display: flex; align-items: center; gap: var(--au-s2);
}
.au-kpi .au-kpi-value {
  font-size: 32px; color: var(--au-ink); margin-top: var(--au-s2); line-height: 1.1;
}
.au-kpi .au-kpi-trend { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.au-kpi .au-kpi-trend.up { color: var(--au-ok); }
.au-kpi .au-kpi-trend.down { color: var(--au-bad); }
.au-kpi .au-kpi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color, #15803d); }

/* ============================================================ STATUS CHIPS
   Semantic, icon-or-text (not color alone). Use .au-chip.ok|warn|bad|info */
.au-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 11px; border-radius: var(--au-radius-pill);
}
.au-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.au-chip.ok   { background: var(--au-ok-bg);   color: var(--au-ok-ink); }
.au-chip.ok::before   { background: var(--au-ok);   box-shadow: 0 0 0 3px rgba(21,128,61,.16); }
.au-chip.warn { background: var(--au-warn-bg); color: var(--au-warn-ink); }
.au-chip.warn::before { background: var(--au-warn); box-shadow: 0 0 0 3px rgba(180,83,9,.16); }
.au-chip.bad  { background: var(--au-bad-bg);  color: var(--au-bad-ink); }
.au-chip.bad::before  { background: var(--au-bad);  box-shadow: 0 0 0 3px rgba(185,28,28,.16); }
.au-chip.info { background: var(--au-info-bg); color: var(--au-info-ink); }
.au-chip.info::before { background: var(--au-info); box-shadow: 0 0 0 3px rgba(29,78,216,.16); }

/* ============================================================ TABLES
   Row hover + softer headers, applied to the site's tables generically. */
.content-area .table thead th,
.au-card .table thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--au-muted); font-weight: 600;
  border-bottom: 1px solid var(--au-line);
}
.content-area .table > tbody > tr {
  transition: background var(--au-motion) var(--au-ease);
}

/* ============================================================ TOP NAVBAR */
.top-navbar {
  border-bottom: 1px solid var(--au-line);
  box-shadow: var(--au-shadow-sm) !important;
}
.top-navbar h1 { font-weight: 600; letter-spacing: -.02em; }

/* ============================================================ BUTTONS / MOTION
   Press feedback without layout shift (skill `state-clarity`, `scale-feedback`);
   theme.php already colors .btn-primary etc. */
.btn { transition: background var(--au-motion) var(--au-ease),
                   box-shadow var(--au-motion) var(--au-ease),
                   transform 120ms var(--au-ease) !important; }
.btn:active { transform: scale(.98); }
.btn-primary, .btn-save, .btn-login { border-radius: var(--au-radius-pill) !important; }

/* Quick-action list buttons: soften + green hover tint */
.btn-action {
  border-radius: var(--au-radius-sm) !important;
  border: 1px solid var(--au-line) !important;
}
.btn-action:hover {
  background-color: rgba(var(--primary-color-rgb, 21,128,61), .07) !important;
}

/* ============================================================ ACCESSIBILITY
   Visible focus rings everywhere (skill CRITICAL rule `focus-states`).
   44px min touch targets on interactive controls (`touch-target-size`). */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .nav-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
[tabindex]:focus-visible, .au-chip:focus-visible {
  outline: 2px solid var(--primary-color, #15803d) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
.btn, .nav-link, .btn-action { min-height: 40px; }  /* comfortable; icon-only get hitSlop below */
.btn-sm { min-height: 32px; }

/* ============================================================ SCROLLBAR polish */
.content-area ::-webkit-scrollbar { width: 10px; height: 10px; }
.content-area ::-webkit-scrollbar-thumb {
  background: var(--au-line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}

/* ============================================================ SIDEBAR — INVERTED HIGHLIGHTING (FLEET)
   GROUP HEADERS -> bubbled/lighter-green pill. MENU ITEMS -> flat (no pill).
   SELECTED item -> amber-gold left+right bars + slightly darker flat green + bold.
   Loaded LAST (admin-ui.css) on every site. Selectors are deliberately HIGH-
   SPECIFICITY (prefixed with .sidebar, and covering both `a.active` and
   `li a.active` + `.sidebar-group-items ...` variants) so they beat each site's
   own inline _sidebar.php rules regardless of that site's sidebar markup. */

.sidebar .sidebar-header h4 {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -.01em;
}

/* ---- GROUP HEADERS: the bubbled/highlighted element (lighter green pill) ---- */
.sidebar .sidebar-group-header,
.sidebar .sidebar-menu .sidebar-group-header,
.sidebar-menu-bottom .sidebar-group-header {
  border-radius: 10px !important;
  margin: 4px 10px 2px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  border-left: none !important;
  transition: background .2s cubic-bezier(.4,0,.2,1) !important;
}
.sidebar .sidebar-group-header:hover {
  background: rgba(255,255,255,0.24) !important;
  color: #fff !important;
}

/* ---- MENU ITEMS: flat, no pill (covers a, li a, flyout, grouped) ---- */
.sidebar .sidebar-menu a,
.sidebar .sidebar-menu li a,
.sidebar .admin-flyout a,
.sidebar .sidebar-group-items .sidebar-menu a,
.sidebar .sidebar-group-items .sidebar-menu li a {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  border-left: 3px solid transparent !important;
  border-right: 3px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .2s cubic-bezier(.4,0,.2,1),
              padding-left .2s cubic-bezier(.4,0,.2,1) !important;
}
.sidebar .sidebar-menu a:hover,
.sidebar .sidebar-menu li a:hover,
.sidebar .admin-flyout a:hover,
.sidebar .sidebar-group-items .sidebar-menu li a:hover {
  background: rgba(255,255,255,0.08) !important;
  padding-left: 20px !important;
}

/* ---- SELECTED ITEM: amber-gold L+R bars + darker flat green + bold ----
   High specificity chain to outrank `.sidebar-group-items .sidebar-menu li a.active`. */
.sidebar .sidebar-menu a.active,
.sidebar .sidebar-menu li a.active,
.sidebar .admin-flyout a.active,
.sidebar .sidebar-group-items .sidebar-menu a.active,
.sidebar .sidebar-group-items .sidebar-menu li a.active {
  border-radius: 0 !important;
  background: rgba(0,0,0,0.22) !important;
  border-left: 3px solid #F59E0B !important;
  border-right: 3px solid #F59E0B !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.sidebar .sidebar-menu a.active:hover,
.sidebar .sidebar-menu li a.active:hover,
.sidebar .admin-flyout a.active:hover,
.sidebar .sidebar-group-items .sidebar-menu li a.active:hover {
  background: rgba(0,0,0,0.28) !important;
}
.sidebar .sidebar-menu a.active i,
.sidebar .sidebar-menu li a.active i,
.sidebar .admin-flyout a.active i {
  color: #fff !important;
}

/* ============================================================ REDUCED MOTION
   skill CRITICAL rule `reduced-motion` */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .stats-card:hover, .au-kpi:hover, .au-card.is-hoverable:hover { transform: none !important; }
}


/* ============================================================ USERS PAGE — COMPACT SINGLE-ROW
   Tools-only override (injected via users.php stub, scoped under .user-table).
   Goal: EVERYTHING on one screen, NO horizontal scroll, Actions always reachable.
   Strategy: no forced min-width; slightly smaller type + tighter padding; merge
   Name under Username; email truncates; Actions pinned right and never clipped.
   ============================================================================== */

/* ---- Header: compact grid (unchanged concept, kept tidy) ---- */
.user-table .table-header {
  padding: 14px 20px !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title actions" "filters filters";
  gap: 10px 16px;
  align-items: center;
}
.user-table .table-header > div:first-child { grid-area: title; min-width: 0; display: contents; }
.user-table .table-header h5 {
  grid-area: title; font-family: 'Space Grotesk','Inter',sans-serif;
  font-size: 18px !important; letter-spacing: -.01em; align-self: center;
}
.user-table .table-header .mt-2 { grid-area: filters; margin-top: 0 !important; gap: 8px !important; }
.user-table .table-header > .d-flex.gap-2 { grid-area: actions; justify-self: end; align-self: center; gap: 8px !important; }

.user-table .table-header #userSearch,
.user-table .table-header .form-select {
  height: 34px; font-size: 13px; border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.55) !important; background: rgba(255,255,255,.97) !important; color: #1e293b;
}
.user-table .table-header #userSearch { width: 190px !important; }
.user-table .table-header #userSearch:focus,
.user-table .table-header .form-select:focus { border-color:#fff !important; box-shadow:0 0 0 3px rgba(255,255,255,.35) !important; }

.user-table .add-user-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px !important;
  font-size: 13px; font-weight: 600; white-space: nowrap; border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important; color: var(--primary-dark,#166534) !important;
  border: 1px solid rgba(255,255,255,.6) !important; box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s var(--au-ease,ease), box-shadow .15s;
}
.user-table .add-user-btn:hover { background:#fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* ---- THE FIX: table fills its container, NO min-width, NO horizontal scroll ---- */
.user-table .table-responsive { overflow-x: visible !important; }
.user-table #usersTable {
  min-width: 0 !important;                 /* was 900px — the cause of the scroll */
  width: 100%;
  table-layout: auto;
  font-size: 13px;                          /* slightly smaller = more fits */
}
.user-table #usersTable thead th {
  white-space: nowrap; padding: 11px 12px !important;
  font-size: 10.5px !important; letter-spacing: .04em;
}
.user-table #usersTable tbody td { padding: 10px 12px !important; font-size: 13px; vertical-align: middle; }

/* Username + Name: keep both, but compact (icon + tight). Name column narrow. */
.user-table #usersTable tbody td.username-cell { white-space: nowrap; font-weight: 600; }
.user-table #usersTable tbody td:nth-child(2) { white-space: nowrap; color: var(--muted,#64748b); }

/* Email: truncate long addresses so they never blow out the row */
.user-table #usersTable tbody td:nth-child(3) {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-table #usersTable tbody td:nth-child(3):hover { overflow: visible; }

/* Groups: let pills wrap but cap width so they don't dominate */
.user-table #usersTable tbody td:nth-child(4) { max-width: 220px; }
.user-table #usersTable .role-badge,
.user-table #usersTable td:nth-child(4) .badge { font-size: 10.5px !important; }

/* Last Login: one line, no min-width bloat */
.user-table #usersTable tbody td:nth-child(7) { white-space: nowrap; font-size: 12px; }

/* Auth + Status: compact */
.user-table #usersTable tbody td:nth-child(5) { white-space: nowrap; font-size: 12px; }
.user-table #usersTable .status-badge { font-size: 11px !important; padding: 3px 9px !important; }

/* Actions: STICKY to the right edge so they're ALWAYS visible + never clipped */
.user-table #usersTable thead th:last-child,
.user-table #usersTable tbody td:last-child {
  position: sticky; right: 0; z-index: 2;
  white-space: nowrap; text-align: right; width: 1%;
  background: #fff;                          /* opaque so rows don't show through */
  box-shadow: -8px 0 8px -8px rgba(15,23,42,.12);   /* subtle edge shadow when content is dense */
}
.user-table #usersTable thead th:last-child { background: #f8f9fa; }
.user-table #usersTable tbody tr:hover td:last-child { background: #f8faff; }

/* Action buttons: smaller square icons, tight but tappable (32px) */
.user-table .btn-action {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0 !important; margin: 0 0 0 5px !important;
  border-radius: 8px !important; vertical-align: middle;
  transition: transform .12s var(--au-ease,ease), filter .15s;
}
.user-table .btn-action:first-child { margin-left: 0 !important; }
.user-table .btn-action:hover { transform: translateY(-1px); filter: brightness(1.05); }
.user-table .btn-action i { font-size: 12px; }

/* On genuinely narrow screens (<1100px) fall back to a horizontal scroll rather than
   crushing content — but the sticky Actions column stays reachable. */
@media (max-width: 1100px) {
  .user-table .table-responsive { overflow-x: auto !important; }
  .user-table #usersTable { min-width: 760px !important; }
}

/* ============================================================ GENERAL COMPACT WIDE-TABLE PATTERN
   Opt-in helper for OTHER tools tables (Site Dashboard, Task Board, etc.):
   add class "au-compact-table" to a <table> (or wrap in .au-fit) to get the same
   no-scroll, sticky-last-column treatment without bespoke per-page CSS.
   ============================================================================== */
.au-compact-table { width: 100%; table-layout: auto; font-size: 13px; }
.au-compact-table thead th { white-space: nowrap; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.au-compact-table tbody td { padding: 9px 12px; vertical-align: middle; }
.au-compact-table td.au-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-compact-table td.au-nowrap, .au-compact-table th.au-nowrap { white-space: nowrap; }
/* sticky action column: mark the last th/td with .au-actions */
.au-compact-table th.au-actions, .au-compact-table td.au-actions {
  position: sticky; right: 0; z-index: 2; text-align: right; width: 1%; white-space: nowrap;
  background: #fff; box-shadow: -8px 0 8px -8px rgba(15,23,42,.12);
}
.au-compact-table thead th.au-actions { background: #f8f9fa; }
.au-compact-table tbody tr:hover td.au-actions { background: #f8faff; }

/* ============================================================ FLEET COMPACT — GENERIC (all admin pages)
   Applies the "fit on one screen, no horizontal scroll, actions reachable" rules
   generically across every framework admin page — conservatively, so it improves
   density without breaking bespoke per-site layouts.
   Loaded LAST (after theme.php + inline styles) on all framework pages, all sites.
   ============================================================================== */

/* Any admin data table inside the content area: allow it to fit and scroll-with-
   sticky-actions rather than overflow the viewport. We DON'T force min-width. */
.content-area .table-responsive,
.main-content .table-responsive { overflow-x: auto; }

/* Gentle density on standard admin tables (skip tables that opt out with .table-roomy) */
.content-area table.table:not(.table-roomy) thead th { padding: 11px 14px; white-space: nowrap; }
.content-area table.table:not(.table-roomy) tbody td { padding: 10px 14px; vertical-align: middle; }

/* Long cells that carry emails / urls / ids: mark with .au-truncate to keep rows tidy */
.content-area .au-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sticky right-pinned action column when a table marks its last col .au-actions or
   a page uses the common right-aligned actions cell. Kept opaque + shadowed so the
   buttons are ALWAYS reachable without scrolling to them. */
.content-area table .au-actions,
.content-area table td.actions-cell,
.content-area table th.actions-cell {
  position: sticky; right: 0; z-index: 2; text-align: right; width: 1%; white-space: nowrap;
  background: #fff; box-shadow: -8px 0 8px -8px rgba(15,23,42,.12);
}
.content-area table thead .au-actions,
.content-area table thead th.actions-cell { background: #f8f9fa; }

/* ============================================================ AUTH / SIGNUP / PASSWORD PAGES
   The login, signup, forgot/reset/change-password, MFA, and validate-email pages
   use a centered card. Give them the same type + card polish; keep them compact so
   the whole form fits without scroll. Scoped to the auth card containers only. */
.auth-container, .login-container, .signup-container,
.auth-card, .login-card, .password-card, .mfa-card {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
.auth-card, .login-card, .password-card, .mfa-card,
.auth-container .card, .login-container .card {
  border-radius: 16px !important;
  border: 1px solid var(--au-line, #E5E9F0) !important;
  box-shadow: var(--au-shadow-lg, 0 10px 28px rgba(15,23,42,.12)) !important;
}
.auth-card h1, .auth-card h2, .auth-card h3,
.login-card h1, .login-card h2, .login-card h3,
.password-card h1, .password-card h2, .password-card h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.01em;
}
/* auth form controls: consistent, tappable, focus-ring */
.auth-card .form-control, .login-card .form-control,
.password-card .form-control, .mfa-card .form-control {
  min-height: 44px; border-radius: 10px;
}
.auth-card .btn-primary, .login-card .btn-primary,
.password-card .btn-primary, .mfa-card .btn-primary,
.auth-card .btn-login, .login-card .btn-login {
  min-height: 44px; border-radius: 999px; font-weight: 600;
}

/* ============================================================ GLOBAL SAFETY: no page-level sideways scroll */
html, body { max-width: 100%; }
.main-content { overflow-x: hidden; }
.content-area { max-width: 100%; }