/* ══════════════════════════════════════════════════════════
   TTG Duo Dashboard — Design System
   ══════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-bg: #18181b;
  --sidebar-text: #e7e7e7;
  --sidebar-muted: rgba(231, 231, 231, 0.50);
  --sidebar-active-bg: rgba(158, 197, 85, 0.14);
  --sidebar-active-text: #b8e06a;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --accent: #9EC555;
  --accent-hover: #8bb544;
  --accent-light: rgba(158, 197, 85, 0.12);
  --topbar-height: 52px;
  --body-bg: #f8f8f8;
  --card-bg: #ffffff;
  --card-radius: 6px;
  --card-shadow: none;
  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --border-color: #e4e4e7;
  --border-light: #f4f4f5;

  /* Font stacks: Inter for UI, JetBrains Mono for tabular data */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type Scale ── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */

  /* ── Semantic Colors ── */
  --color-success:    #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning:    #d97706;
  --color-warning-bg: #fef9c3;
  --color-danger:     #dc2626;
  --color-danger-bg:  #fee2e2;
  --color-info:       #2563eb;

  /* ── Line Height ── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { touch-action: manipulation; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';  /* Inter stylistic sets for sharper glyphs */
}

/* Tabular numbers for any numeric/data context */
.font-mono, code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Apply tabular nums to common data contexts */
.stat-mini-value,
.fleet-stat-value,
.badge,
.table td {
  font-variant-numeric: tabular-nums;
}

/* ── Shell Layout ──────────────────────────────────────── */
.shell-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; color: var(--sidebar-text); }
.sidebar-brand .brand-icon { color: var(--accent); font-size: var(--text-lg); flex-shrink: 0; }

.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-muted);
  padding: 20px 16px 5px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sidebar-muted);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 5px;
  margin: 1px 8px;
  font-size: var(--text-base);
  transition: background 0.13s, color 0.13s;
}
.sidebar-nav a i { font-size: var(--text-md); flex-shrink: 0; }
.sidebar-nav a:hover {
  background: rgba(255,255,255,0.07);
  color: var(--sidebar-text);
  text-decoration: none;
}
.sidebar-nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}
.sidebar-nav a.active i { color: var(--accent); }

.sidebar-spacer { flex: 1; }

.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar-footer-label {
  font-size: var(--text-sm);
  color: rgba(231,231,231,0.35);
  padding: 0 8px 3px;
}
.sidebar-footer-user {
  font-size: var(--text-sm);
  color: rgba(231,231,231,0.6);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Shell Main ─────────────────────────────────────────── */
.shell-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.topbar {
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 12px;
}
.topbar-left  { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.topbar-username {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.topbar-signout {
  font-size: var(--text-sm);
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s;
  font-family: inherit;
  line-height: 1.4;
}
.topbar-signout:hover { border-color: var(--accent); color: var(--accent); }

/* Mobile hamburger */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-secondary);
  position: relative;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-secondary);
  position: absolute;
  left: 0;
}
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after  { top: 5px; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

.shell-main {
  flex: 1;
  overflow-y: auto;
  background: var(--body-bg);
}

.page-content {
  padding: 24px;
  animation: fadeIn 0.2s ease-out;
  max-width: 1280px;
}

/* ── Page Header ───────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.page-header h1, .page-header h2 {
  margin: 0 0 3px;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
}
.page-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Health Badge Colors ───────────────────────────────── */
.badge-health-green   { background-color: #dcfce7; color: #15803d; }
.badge-health-amber   { background-color: #fef9c3; color: #92400e; }
.badge-health-red     { background-color: #fee2e2; color: #b91c1c; }
.badge-health-unknown { background-color: #f1f5f9; color: #64748b; }

/* ── Enrollment Progress Bar ────────────────────────────── */
.enrollment-bar .progress {
  height: 0.875rem;
  border-radius: 4px;
  background: var(--border-light);
}
.enrollment-bar .progress-bar { background-color: var(--accent) !important; }

/* ── Scrollable user lists in detail modal ─────────────── */
.collapse-panel.open.user-list-scroll { max-height: 15rem; overflow-y: auto; padding-right: 0.5rem; }

/* ── Customer Table ─────────────────────────────────────── */
.customer-table td, .customer-table th { vertical-align: middle; }
.customer-table tbody tr.clickable-row { cursor: pointer; }
.customer-table a { color: var(--text-primary); }
.customer-table a:hover { color: var(--accent); }

/* Refresh-all: spinning button icon */
@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-icon {
  animation: spin-cw 0.7s linear infinite;
  display: inline-block;
}

/* Per-row sync state */
.row-syncing td {
  opacity: 0.4;
  transition: opacity 0.3s;
}
.row-synced td {
  background-color: var(--accent-light) !important;
  transition: background-color 0.3s;
}

/* ── Stat Mini-Cards (auth activity) ───────────────────── */
.stat-mini {
  background: var(--border-light);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}
.stat-mini-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.stat-mini-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 3px;
}
.stat-mini-value.success { color: var(--color-success); }
.stat-mini-value.danger  { color: var(--color-danger); }
.stat-mini-value.warning { color: var(--color-warning); }

/* Clickable stat-mini tile (used for drill-down affordance) */
.stat-mini-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.stat-mini-clickable:hover {
  box-shadow: 0 0 0 2px var(--accent);
}
.stat-mini-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stat-mini-clickable[aria-expanded="true"] .collapse-chevron-icon {
  transform: rotate(180deg);
}

/* ── Clickable Row Focus ────────────────────────────────── */
.clickable-row:focus-visible {
  outline: none;
  background-color: rgba(158, 197, 85, 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Fleet Summary Strip ───────────────────────────────── */
.fleet-summary {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.fleet-stat { display: flex; align-items: baseline; gap: 6px; }
.fleet-stat-value { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); }
.fleet-stat-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.text-health-green { color: #15803d; }
.text-health-amber { color: #92400e; }
.text-health-red   { color: #b91c1c; }

/* ── Empty States ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
}
.empty-state-icon { font-size: 2rem; color: var(--text-muted); margin-bottom: 12px; }
.empty-state-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state-desc { font-size: var(--text-base); color: var(--text-muted); }
.empty-state-desc a { color: var(--accent); }
.btn-link-inline {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.btn-link-inline:hover { color: var(--accent-hover); }

.empty-state-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--text-muted);
}
.empty-state-inline-icon { font-size: var(--text-xl); opacity: 0.4; flex-shrink: 0; }

/* ── Collapse panel animation ──────────────────────────── */
.collapse-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.collapse-panel.open {
  max-height: 600px;
  transition: max-height 0.3s ease-in;
}

/* ── Collapse chevron (touch-friendly) ─────────────────── */
a[data-collapse-target] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.collapse-chevron-icon { font-size: 0.75rem; transition: transform 0.2s ease; }

/* ── Exclude (funnel) button ────────────────────────────── */
.btn-exclude {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.btn-exclude:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
  color: var(--color-success);
}

/* ── Stale timestamp ────────────────────────────────────── */
.text-stale { color: var(--color-danger); }

/* ── HTMX spinner ───────────────────────────────────────── */
.htmx-request .spinner-border { display: inline-block !important; }
.htmx-request .btn-text       { display: none !important; }

/* ── Entrance animation ─────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Password toggle ──────────────────────────────────── */
.password-toggle { cursor: pointer; }
.password-toggle:hover { color: var(--text-primary); }

/* ── Login page ─────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-bg);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.login-brand-icon {
  width: 52px;
  height: 52px;
  background: var(--accent-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--accent);
  margin: 0 auto 16px;
}
.login-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.login-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0 0 28px;
}
.login-submit {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s;
  font-family: inherit;
}
.login-submit:hover { background: var(--accent-hover); }

.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.login-divider span {
  padding: 0 12px;
}
.login-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.13s, color 0.13s;
  font-family: inherit;
}
.login-sso-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Tile Dashboard Controls ────────────────────────────── */
.tile-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.tile-controls-left,
.tile-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tile-controls-divider {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  flex-shrink: 0;
}

/* Search input */
.tile-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--text-muted);
  transition: border-color 0.13s;
}
.tile-search-wrap:focus-within { border-color: var(--accent); }
.tile-search-wrap i { font-size: var(--text-sm); flex-shrink: 0; }
.tile-search-input {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  width: 140px;
  outline: none;
  padding: 0;
}
.tile-search-input::placeholder { color: var(--text-muted); }
.tile-search-clear {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}
.tile-search-clear:hover { color: var(--text-primary); }
.tile-search-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Refresh indicator */
.tile-refresh-indicator {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Auto-refresh select */
.auto-refresh-select {
  font-size: var(--text-xs);
  font-family: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.auto-refresh-select:focus { border-color: var(--accent); outline: 0; }

/* Size slider */
.tile-size-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.tile-size-slider {
  width: 90px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}

/* Metric toggle chips */
.tile-metric-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: var(--text-sm);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.13s;
  font-family: inherit;
}
.tile-metric-btn i { font-size: var(--text-sm); }
.tile-metric-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #3d5a0e;
}
.tile-metric-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--text-secondary);
}

/* Health filter chips */
.tile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  min-height: 36px;
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.13s;
  font-family: inherit;
  white-space: nowrap;
}
.tile-filter-btn.active { background: var(--accent-light); border-color: var(--accent); color: #3d5a0e; }
.tile-filter-btn:hover:not(.active) { border-color: var(--accent); }

.tile-filter-btn.filter-green                      { border-color: #bbf7d0; }
.tile-filter-btn.filter-green.active               { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.tile-filter-btn.filter-green:hover:not(.active)   { background: #f0fdf4; border-color: #22c55e; }

.tile-filter-btn.filter-amber                      { border-color: #fde68a; }
.tile-filter-btn.filter-amber.active               { background: #fef9c3; border-color: #f59e0b; color: #92400e; }
.tile-filter-btn.filter-amber:hover:not(.active)   { background: #fffbeb; border-color: #f59e0b; }

.tile-filter-btn.filter-red                        { border-color: #fecaca; }
.tile-filter-btn.filter-red.active                 { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.tile-filter-btn.filter-red:hover:not(.active)     { background: #fff1f2; border-color: #ef4444; }

.tile-filter-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.tile-filter-dot.dot-green  { background: #22c55e; }
.tile-filter-dot.dot-amber  { background: #f59e0b; }
.tile-filter-dot.dot-red    { background: #ef4444; }

/* ── Tile Grid ──────────────────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-width, 200px), 1fr));
  gap: 12px;
}

/* ── Customer Tile ──────────────────────────────────────── */
.customer-tile {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.customer-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
}
.customer-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  text-decoration: none;
  color: inherit;
}

/* Status color bar */
.tile-status-bar { height: 5px; flex-shrink: 0; }
.tile-status-bar.health-green   { background: #22c55e; }
.tile-status-bar.health-amber   { background: #f59e0b; }
.tile-status-bar.health-red     { background: #ef4444; }
.tile-status-bar.health-unknown { background: var(--border-color); }

/* Tile body */
.tile-body {
  padding: 11px 13px 11px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Name + badge row */
.tile-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-edition {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

/* Badge small variant for tiles */
.badge-tile {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

/* SVG ring gauge — enrollment % */
.tile-gauge-section {
  display: none;
  align-items: center;
  gap: 10px;
}
.tile-grid.show-enrollment .tile-gauge-section { display: flex; }

.ring-gauge-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.ring-gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring-gauge-pct {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.ring-gauge-meta { min-width: 0; }
.ring-gauge-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.2;
}
.ring-gauge-detail {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ring-gauge-none {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
}

/* Auth activity section */
.tile-auth-section {
  display: none;
  gap: 4px;
}
.tile-grid.show-auth .tile-auth-section { display: flex; }

.tile-stat {
  flex: 1 1 60px;  /* grow, shrink, 60px basis so 4+ items wrap cleanly */
  background: var(--border-light);
  border-radius: 4px;
  padding: 5px 4px;
  text-align: center;
  min-width: 0;
}
.tile-stat-value {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-stat-value.success { color: var(--color-success); }
.tile-stat-value.danger  { color: var(--color-danger); }
.tile-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ConnectWise match indicator */
.tile-cw-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

/* M365 status section */
.tile-m365-section {
  display: none;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-sm);
}
.tile-grid.show-m365 .tile-m365-section { display: flex; }

.tile-m365-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tile-m365-type {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--body-bg);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.5;
}

.tile-m365-issue-row {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #b91c1c;
  font-size: var(--text-xs);
  padding-left: 17px;
}

.tile-m365-issue-row i {
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* Device stats section */
.tile-devices-section { display: none; gap: 4px; flex-wrap: wrap; }
.tile-grid.show-devices .tile-devices-section { display: flex; }

/* Trend sparkline section */
.tile-trend-section { display: none; }
.tile-grid.show-trend .tile-trend-section { display: block; }
.tile-sparkline { width: 100%; height: 28px; }
.tile-sparkline polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tile sync footer */
.tile-sync-footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  padding: 5px 13px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-sync-footer.text-stale { color: var(--color-danger); }

/* Hide tile when filtered out */
.customer-tile.tile-hidden { display: none; }
.customer-tile.tile-search-hidden { display: none; }

/* Hide table row when filtered out */
.dashboard-table-row.row-hidden { display: none; }
.dashboard-table-row.row-search-hidden { display: none; }

/* ── View Mode Toggle ──────────────────────────────────── */
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.13s;
  font-size: var(--text-base);
}
.view-toggle-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--text-secondary);
}
.view-toggle-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: #3d5a0e;
}

/* ── View Mode Show/Hide ──────────────────────────────── */
/* Default: tiles visible, table hidden */
#tileGrid   { display: grid; }
#tableView  { display: none; }
.tile-size-wrap { display: flex; }
.tile-metric-wrap { display: flex; }

/* Table view active */
.view-container.view-table #tileGrid   { display: none; }
.view-container.view-table #tableView  { display: block; }
.view-container.view-table .tile-size-wrap { display: none; }
.view-container.view-table .tile-metric-wrap { display: none; }
/* Hide the dividers adjacent to hidden controls in table mode */
.view-container.view-table .tile-controls-divider.tile-only { display: none; }

/* ── Dashboard Table ──────────────────────────────────── */
.dashboard-table {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.dashboard-table .table { margin-bottom: 0; }
.dashboard-table-row { cursor: pointer; }
.dashboard-table-row:hover td {
  background-color: rgba(158, 197, 85, 0.05);
}
.dashboard-table-row .customer-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}
.dashboard-table-row:hover .customer-link {
  color: var(--accent);
}

/* ── Focus Mode (browser-fill) ─────────────────────────── */
.shell-layout.focus-mode .sidebar,
.shell-layout.focus-mode .sidebar-backdrop {
  display: none;
}
.shell-layout.focus-mode .topbar {
  display: none;
}

/* ── Text Utilities ────────────────────────────────────── */
.u-text-xs   { font-size: var(--text-xs) !important; }
.u-text-sm   { font-size: var(--text-sm) !important; }
.u-text-base { font-size: var(--text-base) !important; }
.u-text-md   { font-size: var(--text-md) !important; }
.u-text-lg   { font-size: var(--text-lg) !important; }
.u-text-xl   { font-size: var(--text-xl) !important; }
.u-text-2xl  { font-size: var(--text-2xl) !important; }

/* ── Skip Link (a11y) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Desktop: size slider + metric toggles sit inline in controls bar */

/* Tablet */
@media (max-width: 1024px) {
  .tile-controls { flex-wrap: wrap; }
  .tile-controls-left,
  .tile-controls-right { flex-wrap: wrap; }
  .page-header { flex-direction: column; gap: 8px; }
  .page-header-actions { flex-wrap: wrap; }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop.backdrop-open { display: block; }
  .menu-toggle { display: flex; }
  .page-content { padding: 16px; }
  .modal-dialog.modal-xl { margin: 0.5rem; }
  .modal-body { max-height: 70vh; max-height: 70dvh; overflow-y: auto; }

  /* Touch targets: bump to 44px on mobile */
  .tile-metric-btn,
  .tile-filter-btn,
  .view-toggle-btn { min-height: 44px; }
  .tile-metric-btn { width: 44px; height: 44px; }
  .view-toggle-btn { width: 44px; height: 44px; }
  .tile-search-clear { min-width: 44px; min-height: 44px; }

  /* Hide size slider + metric toggles on mobile (too dense) */
  .tile-size-wrap,
  .tile-metric-wrap { display: none !important; }
  .tile-controls-left .tile-controls-divider.tile-only { display: none; }
}

/* Large desktop */
@media (min-width: 1440px) {
  .page-content { max-width: 1400px; }
}

/* ── Content readability ───────────────────────────────── */
.card-body p,
.form-text { max-width: 65ch; }

/* ══════════════════════════════════════════════════════════
   Dark Mode — Monitoring Console
   Activated via data-theme="dark" on <html>.
   A <head> script sets this from localStorage or OS pref.
   ══════════════════════════════════════════════════════════ */

/* Shorthand: D = html[data-theme="dark"] */

/* ── Token overrides ─────────────────────────────────── */
html[data-theme="dark"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --body-bg:       #09090b;
  --card-bg:       #18181b;
  --card-shadow:   none;
  --text-primary:  #fafafa;
  --text-secondary:#a1a1aa;
  --text-muted:    #71717a;
  --border-color:  #27272a;
  --border-light:  #1f1f22;
  --accent-light:  rgba(158, 197, 85, 0.15);

  --color-success:    #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.12);
  --color-warning:    #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.12);
  --color-danger:     #f87171;
  --color-danger-bg:  rgba(248, 113, 113, 0.12);
  --color-info:       #60a5fa;

  color: #e2e8f0;
}

/* ── Shell & chrome ──────────────────────────────────── */
html[data-theme="dark"] .topbar { background: #15181c; border-bottom-color: var(--border-color); }
html[data-theme="dark"] .topbar-signout { color: var(--text-secondary); border-color: var(--border-color); }
html[data-theme="dark"] .topbar-signout:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ── Health badges — keep vivid on dark ──────────────── */
html[data-theme="dark"] .badge-health-green { background: rgba(34, 197, 94, 0.15); color: #86efac; }
html[data-theme="dark"] .badge-health-amber { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
html[data-theme="dark"] .badge-health-red { background: rgba(248, 113, 113, 0.15); color: #fca5a5; }
html[data-theme="dark"] .badge-health-unknown { background: #252a30; color: var(--text-muted); }

/* ── Stat mini cards (auth stats in modal) ─────────── */
html[data-theme="dark"] .stat-mini { background: #252a30; }
html[data-theme="dark"] .stat-mini-label { color: var(--text-secondary); }

/* ── Empty state inline (modal awaiting data) ──────── */
html[data-theme="dark"] .empty-state-inline { color: var(--text-muted); }

/* ── Progress bar ──────────────────────────────────── */
html[data-theme="dark"] .progress-bar { color: #fff; }
html[data-theme="dark"] .enrollment-bar { background: #252a30; }

/* ── Login page ──────────────────────────────────────── */
html[data-theme="dark"] .login-page { background: #0a0c0e; }
html[data-theme="dark"] .login-card { background: var(--card-bg); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .login-title { color: var(--text-primary); }

/* ── Tile dashboard ──────────────────────────────────── */
html[data-theme="dark"] .fleet-summary { background: var(--card-bg); border-color: var(--border-color); }
html[data-theme="dark"] .text-health-green { color: #86efac; }
html[data-theme="dark"] .text-health-amber { color: #fcd34d; }
html[data-theme="dark"] .text-health-red   { color: #fca5a5; }
html[data-theme="dark"] .tile-controls { background: var(--card-bg); border-color: var(--border-color); }
html[data-theme="dark"] .auto-refresh-select { background: var(--card-bg); border-color: var(--border-color); color: var(--text-secondary); }
html[data-theme="dark"] .customer-tile { background: var(--card-bg); border-color: var(--border-color); }
html[data-theme="dark"] .customer-tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35); border-color: #3a4049; }
html[data-theme="dark"] .tile-name { color: var(--text-primary); }
html[data-theme="dark"] .tile-sync-footer { border-top-color: var(--border-color); }
html[data-theme="dark"] .ring-gauge circle[stroke="#e2e8f0"] { stroke: #2a2f38; }
html[data-theme="dark"] .ring-gauge { shape-rendering: geometricPrecision; }
html[data-theme="dark"] .ring-gauge circle { vector-effect: non-scaling-stroke; }

/* Active filter states — dark variants */
html[data-theme="dark"] .tile-filter-btn.active { color: var(--accent); }
html[data-theme="dark"] .tile-metric-btn.active { color: var(--accent); }
html[data-theme="dark"] .view-toggle-btn.active { color: var(--accent); }

html[data-theme="dark"] .tile-filter-btn.filter-green                    { border-color: rgba(34, 197, 94, 0.25); }
html[data-theme="dark"] .tile-filter-btn.filter-green.active             { background: rgba(34, 197, 94, 0.12); border-color: #22c55e; color: #86efac; }
html[data-theme="dark"] .tile-filter-btn.filter-green:hover:not(.active) { background: rgba(34, 197, 94, 0.06); border-color: #22c55e; }

html[data-theme="dark"] .tile-filter-btn.filter-amber                    { border-color: rgba(245, 158, 11, 0.25); }
html[data-theme="dark"] .tile-filter-btn.filter-amber.active             { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; color: #fcd34d; }
html[data-theme="dark"] .tile-filter-btn.filter-amber:hover:not(.active) { background: rgba(245, 158, 11, 0.06); border-color: #f59e0b; }

html[data-theme="dark"] .tile-filter-btn.filter-red                      { border-color: rgba(248, 113, 113, 0.25); }
html[data-theme="dark"] .tile-filter-btn.filter-red.active               { background: rgba(248, 113, 113, 0.12); border-color: #ef4444; color: #fca5a5; }
html[data-theme="dark"] .tile-filter-btn.filter-red:hover:not(.active)   { background: rgba(248, 113, 113, 0.06); border-color: #ef4444; }

/* ── Dashboard table ─────────────────────────────────── */
html[data-theme="dark"] .dashboard-table { background: var(--card-bg); border-color: var(--border-color); }
html[data-theme="dark"] .dashboard-table-row:hover td { background-color: rgba(158, 197, 85, 0.06); }
html[data-theme="dark"] .dashboard-table-row .customer-link { color: var(--text-primary); }
html[data-theme="dark"] .dashboard-table-row:hover .customer-link { color: var(--accent); }

/* ── ConnectWise companies ───────────────────────────── */
html[data-theme="dark"] .fleet-stat-value { color: var(--text-primary); }

/* ── Empty states ────────────────────────────────────── */
html[data-theme="dark"] .empty-state-title { color: var(--text-primary); }

/* ── Dark mode: code elements ────────────────────────── */
html[data-theme="dark"] code { color: #e879f9; background: rgba(232, 121, 249, 0.1); }
html[data-theme="dark"] strong { color: var(--text-primary); }

/* ── Scrollbar ───────────────────────────────────────── */
html[data-theme="dark"] .shell-main::-webkit-scrollbar { width: 8px; }
html[data-theme="dark"] .shell-main::-webkit-scrollbar-track { background: var(--body-bg); }
html[data-theme="dark"] .shell-main::-webkit-scrollbar-thumb { background: #2a2f38; border-radius: 4px; }
html[data-theme="dark"] .shell-main::-webkit-scrollbar-thumb:hover { background: #3a4049; }

/* ── Theme toggle button ─────────────────────────────── */
.theme-toggle {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.13s;
}
.theme-toggle:hover { color: var(--text-primary); }
.theme-toggle .bi-moon-fill { display: none; }
.theme-toggle .bi-sun-fill  { display: none; }
html[data-theme="light"] .theme-toggle .bi-moon-fill { display: inline; }
html[data-theme="dark"]  .theme-toggle .bi-sun-fill  { display: inline; }

/* ── Enroll via SMS (inline form) ────────────────────────── */
/* Notice banner uses the app's existing .alert classes (see layout.html flash pattern). */
.enroll-form-container {
  background: var(--border-light);
  border-radius: 6px;
}
.enroll-form .enroll-username {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.enroll-form label { margin-bottom: 0; }

html[data-theme="dark"] .enroll-form-container { background: #252a30; }

/* ── User lookup status badges ─────────────────────────── */
/* Maps CustomerUser.Status enum values to visual cues so admins see at a glance
   whether the user they're about to enroll is active, locked-out, etc. */
.badge-status-active     { background-color: #198754; color: #fff; font-size: 0.7rem; }
.badge-status-locked-out { background-color: #fd7e14; color: #fff; font-size: 0.7rem; }
.badge-status-bypass     { background-color: #0d6efd; color: #fff; font-size: 0.7rem; }
.badge-status-disabled   { background-color: #6c757d; color: #fff; font-size: 0.7rem; }
.badge-status-unknown    { background-color: #adb5bd; color: #212529; font-size: 0.7rem; }

/* Dark-mode badge overrides for sufficient contrast */
html[data-theme="dark"] .badge-status-active     { background-color: #1a9e61; }
html[data-theme="dark"] .badge-status-locked-out { background-color: #e8720c; }
html[data-theme="dark"] .badge-status-bypass     { background-color: #2677f0; }

/* ── User lookup search card ────────────────────────────── */
/* Dims previous results while a search request is in flight (hx-request class added by HTMX). */
#user-lookup-results.htmx-request { opacity: 0.4; transition: opacity 0.1s; }

/* Focus ring for keyboard-navigated result rows */
.lookup-result-row:focus {
  outline: 2px solid var(--color-primary, #0d6efd);
  outline-offset: -2px;
}

/* Mobile touch target: minimum 44px row height on small viewports */
@media (max-width: 768px) {
  .user-lookup-table tbody tr { min-height: 44px; }
  .user-lookup-table td { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════
   Customer detail views (Overview, Users, Enrollments, Locked,
   Unenrolled, Auth Failures, M365). Dense, table-first layout.
   ══════════════════════════════════════════════════════════ */

/* Customer views widen the content area beyond the default 1280px so
   tables don't clip at common widths. :has() is supported everywhere the
   app runs; the previous max-width remains for pages without .customer-view. */
.page-content:has(> .customer-view) { max-width: 1600px; }

/* ── Header strip (identity + health + refresh) ─────────── */
.customer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-color);
}
.customer-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 6px;
}
.customer-header-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.customer-header-breadcrumb a:hover { color: var(--accent); }
.customer-header-name {
  margin: 0 0 6px;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.1;
}
.customer-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.customer-header-meta code {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: transparent;
  padding: 0;
}
.customer-header-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 1px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--border-light);
}
.customer-header-chip-stale {
  border-color: transparent;
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
.customer-header-sep {
  color: var(--border-color);
  padding: 0 2px;
}
.customer-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Sub-nav (tab bar under header) ──────────────────────── */
.customer-subnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 -24px 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.customer-subnav::-webkit-scrollbar { display: none; }
.customer-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: -1px;
  font-size: var(--text-base);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.13s, border-color 0.13s;
}
.customer-subnav a i {
  font-size: var(--text-md);
  flex-shrink: 0;
}
.customer-subnav a:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.customer-subnav a.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.customer-subnav a.is-active i { color: var(--accent); }
.customer-subnav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 999px;
  line-height: 1;
}
.customer-subnav a.is-active .customer-subnav-count {
  background: var(--accent-light);
  color: #3d5a0e;
}
.customer-subnav-count-alert {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* ── Data view (table-first page body) ───────────────────── */
.data-view { margin-top: 4px; }
.data-view-meta { margin-bottom: 14px; }
.data-view-title {
  margin: 0 0 4px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.data-view-sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 60ch;
}
.data-view-sub code {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 3px;
}
.data-view-sub em { font-style: italic; color: var(--text-secondary); }
.data-view-sub a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-color); }
.data-view-sub a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.data-view-section { margin-top: 28px; }
.data-view-subtitle {
  margin: 0 0 10px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.data-view-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.data-view-search {
  flex: 0 1 280px;
  min-width: 180px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  transition: border-color 0.13s;
}
.data-view-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.data-view-filter-chips {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--border-light);
  border-radius: 6px;
}
.data-view-filter-chip {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.data-view-filter-chip:hover { color: var(--text-primary); }
.data-view-filter-chip.is-active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.data-view-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 32px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
}
.data-view-empty i {
  font-size: 1.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.data-view-empty-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.data-view-empty-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Data table ──────────────────────────────────────────── */
.data-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  margin: 0;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
  padding: 10px 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.data-table tbody td,
.data-table tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
  font-weight: 400;
  text-align: left;
}
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: 0; }
.data-table-row:hover td,
.data-table-row:hover th { background-color: rgba(158, 197, 85, 0.05); }

/* Fact-table variant (M365 check list) — gives the first column more weight */
.data-table-facts tbody th[scope="row"] {
  font-weight: 600;
  color: var(--text-primary);
  width: 22rem;
}

.data-table .col-id,
.data-table .col-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .col-date { white-space: nowrap; color: var(--text-secondary); font-size: var(--text-sm); }
.data-table .col-actions { text-align: right; white-space: nowrap; width: 1%; }
.data-table .col-actions .btn { white-space: nowrap; }
.data-table-icon {
  font-size: 0.75rem;
  margin-right: 6px;
  vertical-align: baseline;
}
.data-table-detail {
  display: inline-block;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.data-table-empty-row {
  padding: 24px 14px !important;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}

/* ── Status pills (compact, pure color) ──────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border-radius: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status-pill-active,
.status-pill-ok      { background: var(--color-success-bg); color: #166534; }
.status-pill-locked,
.status-pill-fail    { background: var(--color-danger-bg);  color: #991b1b; }
.status-pill-warn,
.status-pill-pending { background: var(--color-warning-bg); color: #854d0e; }
.status-pill-bypass,
.status-pill-info    { background: #dbeafe; color: #1e40af; }
.status-pill-disabled,
.status-pill-unknown,
.status-pill-muted   { background: var(--border-light); color: var(--text-muted); }

.status-dot {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
}
.status-dot-ok   { color: var(--color-success); }
.status-dot-warn { color: var(--color-warning); }

/* ── Customer Overview sections (Overview tab only) ──────── */
.customer-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 960px;
}
.overview-section {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.overview-section-danger { border-color: #fecaca; }
.overview-section-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-light);
}
.overview-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.overview-section-title i { color: var(--text-muted); font-size: var(--text-md); }
.overview-section-sub {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.overview-section-sub a { color: var(--text-primary); }
.overview-section-sub a:hover { color: var(--accent); }
.overview-section-sub code {
  font-size: var(--text-sm);
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-secondary);
}
.overview-section-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 1px 8px;
  border-radius: 999px;
}
.overview-section-body {
  padding: 14px 18px 16px;
}
.overview-kv-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 24px;
  align-items: center;
}
.overview-kv-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.overview-kv-actions { text-align: right; }
.overview-inline-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--border-light);
  border-radius: 4px;
}

/* ── Dark theme overrides ────────────────────────────────── */
html[data-theme="dark"] .customer-header { border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .customer-header-chip { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .customer-subnav { border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .customer-subnav-count { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .data-view-filter-chips { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .data-view-filter-chip.is-active { background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .data-table thead th { background: var(--card-bg); }
html[data-theme="dark"] .data-table-row:hover td,
html[data-theme="dark"] .data-table-row:hover th { background-color: rgba(158,197,85,0.08); }
html[data-theme="dark"] .status-pill-active,
html[data-theme="dark"] .status-pill-ok      { background: rgba(34,197,94,0.15);  color: #86efac; }
html[data-theme="dark"] .status-pill-locked,
html[data-theme="dark"] .status-pill-fail    { background: rgba(248,113,113,0.15); color: #fca5a5; }
html[data-theme="dark"] .status-pill-warn,
html[data-theme="dark"] .status-pill-pending { background: rgba(245,158,11,0.15);  color: #fcd34d; }
html[data-theme="dark"] .status-pill-bypass,
html[data-theme="dark"] .status-pill-info    { background: rgba(37,99,235,0.2);    color: #93c5fd; }
html[data-theme="dark"] .status-pill-disabled,
html[data-theme="dark"] .status-pill-unknown,
html[data-theme="dark"] .status-pill-muted   { background: rgba(255,255,255,0.07); color: var(--text-muted); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .customer-header { flex-direction: column; }
  .customer-header-actions { align-self: flex-end; }
  .overview-kv-grid { grid-template-columns: 1fr; }
  .overview-kv-actions { text-align: left; }
}

/* ── Reduced Motion (a11y) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .page-content { animation: none; }
  .spin-icon { animation: none; }
}