/* ==========================================================================
   LARGOCCTV PREMIUM SURVEILLANCE STYLING SYSTEM
   Aesthetic: Steel-Slate Matte & Obsidian, Soft Glassmorphism, Brushed Platinum Accents
   Legibility Focus: High-Contrast Slate Text on Premium Milk Glass Panels
   ========================================================================== */

:root {
  /* Native font stacks — no webfont CDN, so first paint is instant and works offline. */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  /* Color Palette (Obsidian Base + Dark Obsidian Glassmorphism Cards) */
  --bg-base: #0f1420;                 /* Matte dark slate-black */
  --bg-sidebar: #0a0e17;              /* Solid dark charcoal */
  --bg-surface: rgba(25, 30, 40, 0.65);              /* Solid matte charcoal panel */
  --bg-surface-hover: rgba(40, 45, 60, 0.75);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: #c5a059;            /* Rich Swiss Gold */
  
  /* Accent Colors */
  --color-text-primary: #f8fafc;      /* Slate 50 */
  --color-text-secondary: #cbd5e1;    /* Slate 300 */
  --color-text-muted: #94a3b8;        /* Slate 400 */
  --color-silver: #475569;            /* Silver border/accent */
  
  /* Refined Champagne Gold Accents */
  --color-cyan: #00d4ff;              
  --color-gold: #f59e0b;              
  --color-purple: #a855f7;
  
  /* Muted Status Colors */
  --color-green: #10b981;             /* Modern Emerald */
  --color-yellow: #f59e0b;            /* Modern Amber */
  --color-red: #f43f5e;               /* Modern Rose */
  
  /* Shadow & Depth System */
  --glass-blur: blur(16px);                 /* Solid matte panels, no frosted glass */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,d4,ff,0.15);
  --shadow-glow-cyan: none;
  --shadow-glow-green: none;
  --shadow-glow-yellow: none;
  --shadow-glow-red: none;
  --shadow-glow-purple: none;
  
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keyboard focus: visible ring wherever no more-specific focus style applies. */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Base resets & layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Eliminate 300ms mobile tap delay on all interactive elements */
button, a, input, select, label, [role="button"], .nav-item, .mobile-nav-item, .camera-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  font-family: var(--font-family);
  background-color: var(--bg-base);
  color: var(--color-text-primary);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* Matte Slate-Black Background with Gold Ambient Glow */
.glow-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: 
    radial-gradient(circle at 50% -20%, rgba(229, 72, 77, 0.045) 0%, transparent 55%),
    var(--bg-base);
  pointer-events: none;
}

/* App layout (Sidebar + main panel) */
.app-layout {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  min-height: 100vh;
}

/* Left Sidebar styling (Icons only, permanently narrow) */
.sidebar-nav {
  background: var(--bg-sidebar);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 35px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 100;
  width: 78px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 35px;
  position: relative;
}

.sidebar-brand .logo-icon {
  width: 38px;
  height: 38px;
  background: rgba(223, 177, 91, 0.04);
  border: 1.5px solid var(--color-gold);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all var(--transition-fast);
}

.sidebar-brand .logo-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
  stroke-width: 2.2;
  transition: all var(--transition-fast);
}

.sidebar-nav .sidebar-brand:hover .logo-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.sidebar-nav .sidebar-brand:hover .logo-icon svg {
  color: #ffffff;
}

.brand-text h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  background: linear-gradient(135deg, #ffffff 40%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-text span {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.version-badge {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(229, 193, 88, 0.12);
  color: var(--color-gold);
  border: 1px solid rgba(229, 193, 88, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  font-weight: 600;
}

.sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  right: -33px;
  top: 6px;
  z-index: 101;
  transition: all var(--transition-fast);
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-toggle-btn svg {
  width: 12px;
  height: 12px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.nav-item {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 14px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  transition: all var(--transition-fast);
  outline: none;
  border-left: 3px solid transparent;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  color: #cbd5e1;
  transition: transform var(--transition-fast);
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.nav-item:hover svg {
  color: #ffffff;
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(229, 193, 88, 0.08) 0%, rgba(229, 193, 88, 0) 100%);
  border-left: 3px solid var(--color-gold);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.nav-item.active svg {
  color: var(--color-gold);
}

/* Sidebar Collapse Transition System */
.app-layout {
  transition: grid-template-columns var(--transition-normal);
}

.app-layout.sidebar-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}

.sidebar-nav.collapsed {
  width: 78px;
  padding: 35px 0;
}

/* Hide text and badges cleanly when collapsed */
.sidebar-nav.collapsed .brand-text,
.sidebar-nav.collapsed .version-badge,
.sidebar-nav.collapsed .nav-item-text,
.sidebar-nav.collapsed .sidebar-footer .network-badge span:not(.badge-dot) {
  opacity: 0;
  width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}

/* Centering icons and buttons when collapsed */
.sidebar-nav.collapsed .sidebar-brand {
  justify-content: center;
  gap: 0;
}

.sidebar-nav.collapsed .nav-item {
  justify-content: center;
  padding: 14px 0;
  gap: 0;
}

.sidebar-nav.collapsed .sidebar-footer {
  display: flex;
  justify-content: center;
}

.sidebar-nav.collapsed .network-badge {
  padding: 8px;
  justify-content: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 18px;
}

/* Swiss Matte Panel System */
.glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  position: relative;
}

.glass-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Main workspace column */
.main-workspace {
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
  min-height: 100vh;
  overflow-y: auto;
}

/* Unified App Header Panel Layout */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 20px;
  width: 100%;
}

.header-brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #704e18 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(223, 177, 91, 0.2);
}

.header-logo-icon svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
}

.header-brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.header-brand-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-brand-main h2 {
  font-size: 20px;
  font-weight: 850;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.3px;
  margin: 0;
}

.brand-separator {
  color: var(--border-color);
  font-weight: 300;
  font-size: 16px;
}

.header-page-title {
  font-size: 16px;
  font-weight: 750;
  color: var(--color-gold);
  line-height: 1;
  margin: 0;
}

.header-brand-meta {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.creator-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.page-title-card {
  padding: 16px 24px;
  margin-bottom: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.page-title-card h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
}

.page-title-card .subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-top: 4px;
}

/* Tab container & panels visibility */
.tab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-panel {
  display: none;
  animation: fadeIn var(--transition-normal) ease-out;
  flex: 1;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Badge System */
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.pulse-blue {
  background-color: var(--color-gold);
}

.pulse-purple {
  background-color: var(--color-purple);
}

.section-container {
  margin-top: 25px;
  width: 100%;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  width: 100%;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1;
}

.header-icon-bullet {
  display: inline-block;
  width: 4px;
  height: 15px;
  background: var(--color-gold);
  border-radius: 2px;
}

.section-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
}

/* Buttons UI */
.btn {
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
  outline: none;
  position: relative;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold) 0%, #a4813f 100%);
  color: #0c0d0f;
  border: 1px solid rgba(229, 72, 77, 0.4);
  box-shadow: 0 2px 8px rgba(229, 72, 77, 0.12), 0 0 1px rgba(255, 255, 255, 0.4) inset;
  font-weight: 700;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 72, 77, 0.2), 0 0 1px rgba(255, 255, 255, 0.5) inset;
  background: linear-gradient(135deg, #d9be85 0%, var(--color-gold) 100%);
  color: #0c0d0f;
}

/* Secondary Buttons */
.btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(229, 72, 77, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.btn-secondary.active {
  background: rgba(229, 193, 88, 0.1) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
  box-shadow: 0 0 10px rgba(229, 193, 88, 0.12) !important;
}

/* Tertiary Buttons (Refined transparent design) */
.btn-tertiary {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.btn-tertiary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.glass-panel .btn-tertiary,
.settings-workspace .btn-tertiary {
  color: #cbd5e1;
}

.glass-panel .btn-tertiary:hover,
.settings-workspace .btn-tertiary:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.btn-small {
  padding: 6px 12px;
  font-size: 11.5px;
  border-radius: 6px;
}

.btn-svg {
  width: 14px;
  height: 14px;
}

/* Glow effect for high priority buttons */
.btn-glow {
  box-shadow: 0 0 15px rgba(223, 177, 91, 0.25);
  animation: pulse-border 2.5s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 12px rgba(223, 177, 91, 0.2); }
  50% { box-shadow: 0 0 20px rgba(223, 177, 91, 0.45); }
  100% { box-shadow: 0 0 12px rgba(223, 177, 91, 0.2); }
}

/* Unified System Stats Card */
.system-stats-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

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

.stats-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stats-card-title svg {
  color: var(--color-gold);
  width: 14px;
  height: 14px;
}

.stats-card-title h4 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
  margin: 0;
}

.stats-card-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.stats-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 10px;
  transition: all var(--transition-normal);
}

.metric-item:hover {
  transform: translateY(-2.5px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(229, 193, 88, 0.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
}

.metric-data h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.metric-data p {
  font-size: 9.5px;
  color: var(--color-text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 3px 0 0 0;
}

/* List Item in Cameras Log without Play Button */
.cam-log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cam-log-item:hover {
  border-color: rgba(143, 97, 27, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.cam-log-download-btn:hover {
  opacity: 1 !important;
  color: var(--color-gold) !important;
  transform: scale(1.1);
}

.cam-log-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.cam-log-time {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.cam-log-filename {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
}

.cam-log-status-badge {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2.5px 6.5px;
  border-radius: 3px;
}

.cam-log-status-uploaded,
.table-status-uploaded {
  background: rgba(16, 185, 129, 0.02) !important;
  color: var(--color-green) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
}

.cam-log-status-pending,
.table-status-pending {
  background: rgba(245, 158, 11, 0.02) !important;
  color: var(--color-yellow) !important;
  border: 1px solid rgba(245, 158, 11, 0.12) !important;
}

.cam-log-status-failed,
.table-status-failed {
  background: rgba(239, 68, 68, 0.02) !important;
  color: var(--color-red) !important;
  border: 1px solid rgba(239, 68, 68, 0.12) !important;
}

/* Color Background & Text Helpers for icons and badges */
.cyan-bg, .green-bg, .yellow-bg, .red-bg, .purple-bg, .blue-bg, .neutral-bg {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Table status badge styles */
.table-status {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* Card border highlights - Refined (No cheap glowing drop-shadows) */
.border-glow-cyan {
  border-color: rgba(223, 177, 91, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

.border-glow-green {
  border-color: rgba(16, 185, 129, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

.border-glow-yellow {
  border-color: rgba(245, 158, 11, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

.border-glow-red {
  border-color: rgba(239, 68, 68, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

.border-glow-purple {
  border-color: rgba(139, 92, 246, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

.border-glow-blue {
  border-color: rgba(59, 130, 246, 0.15) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* System Cabinet / Drawer Grid */
.system-cabinet-trigger {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 25px;
}

#toggleSystemCabinetBtn {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.12);
  font-weight: 750;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

#toggleSystemCabinetBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-gold);
}

.system-cabinet-content {
  transition: opacity 0.3s ease-out;
  margin-bottom: 25px;
}

.system-cabinet-content.collapsed {
  display: none;
}

.cabinet-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  margin-left: 6px;
  font-size: 10px;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

.system-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.card-title-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.card-title-bar h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.title-svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
}

.uploader-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 4px;
}

.info-label {
  color: var(--color-text-secondary);
  font-weight: 600;
}



.active-file-text {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  font-weight: 700;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.badge-idle { background: rgba(223, 177, 91, 0.02); border: 1px solid rgba(223, 177, 91, 0.12); color: var(--color-gold); }
.badge-uploading { background: rgba(16, 185, 129, 0.02); border: 1px solid rgba(16, 185, 129, 0.12); color: var(--color-green); }
.badge-stopped { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-secondary); }

/* Real-time speed chart */
.chart-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-header-metrics {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.chart-current-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 800;
  color: var(--color-gold);
}

.chart-label {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.live-chart-svg {
  width: 100%;
  height: 90px;
  overflow: visible;
}

/* Vault Search & Table panel */
.recordings-vault {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 480px;
}

.vault-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.vault-desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  font-weight: 500;
}

.filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 15px;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 16px;
  border-radius: 10px;
}

.filter-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.filter-form select,
.filter-form input {
  font-family: var(--font-family);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--color-text-primary);
  font-size: 12.5px;
  outline: none;
  transition: all var(--transition-fast);
  font-weight: 600;
}

.filter-form select:focus,
.filter-form input:focus {
  border-color: var(--border-focus);
}

.form-actions {
  display: flex;
  gap: 8px;
}

.form-actions .btn {
  flex: none;
  min-width: 130px;
}

/* Table layout styling */
.table-wrapper,
.settings-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.25);
  margin-top: 15px;
}

.recordings-table,
.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.recordings-table th,
.settings-table th {
  background: rgba(255, 255, 255, 0.012);
  border-bottom: 2px solid var(--border-color);
  color: var(--color-text-secondary);
  font-weight: 700;
  padding: 14px 18px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.8px;
  font-family: var(--font-family);
}

.recordings-table td,
.settings-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.recordings-table tbody tr,
.settings-table tbody tr {
  transition: background-color var(--transition-fast);
}

.recordings-table tbody tr:hover,
.settings-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: 30px 16px !important;
  font-style: italic;
  font-weight: 500;
}


.intro-text h3 {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.agent-status-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 80%;
  box-shadow: var(--shadow-sm);
}

.agent-bubble {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border-top-left-radius: 2px;
  align-self: flex-start;
}

.user-bubble {
  background: rgba(229, 193, 88, 0.08);
  border: 1px solid rgba(229, 193, 88, 0.2);
  color: var(--color-text-primary);
  border-top-right-radius: 2px;
  align-self: flex-end;
}

.chat-meta {
  font-size: 9.5px;
  color: var(--color-text-muted);
  margin-top: 5px;
  text-align: right;
  font-weight: 600;
}

.chat-help-list {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
}

.chat-help-list li {
  margin-bottom: 4px;
}

.chat-attachment-img {
  max-width: 320px;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.chat-recordings-list {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

/* Suggestion Chips Container */
.suggestion-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid var(--border-color);
  align-items: center;
}

.suggestion-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(229, 193, 88, 0.15);
  color: var(--color-text-secondary);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.suggestion-chip:hover {
  background: rgba(229, 193, 88, 0.06);
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(229, 193, 88, 0.1);
}

.suggestion-chip:active {
  transform: translateY(0);
}

/* Premium Chat Input Area & Pill */
.chat-input-area {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
  position: relative;
}

.chat-input-pill {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(4, 6, 11, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 6px 4px 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  gap: 10px;
}

.chat-input-pill:focus-within {
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(229, 193, 88, 0.15);
}

.chat-input-pill input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  color: white !important;
  outline: none !important;
  font-size: 12.5px;
}

.attach-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  padding: 6px;
  border-radius: 50%;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.attach-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-gold);
}

.chat-rec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  padding-bottom: 6px;
}

.chat-rec-item:last-child {
  border: none;
  padding-bottom: 0;
}

/* Image Drop preview */
.image-drop-preview {
  position: relative;
  background: rgba(0, 0, 0, 0.15);
  border: 1px dashed rgba(143, 97, 27, 0.25);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-drop-preview img {
  max-height: 80px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.cancel-img-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-red);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Input Area styling */
.chat-input-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
}

.chat-input-area input {
  font-family: var(--font-family);
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: 13.5px;
  outline: none;
  font-weight: 600;
}

.attach-btn {
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.attach-btn:hover {
  color: var(--color-gold);
}

.attach-btn svg {
  width: 18px;
  height: 18px;
}

.drag-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: none;
  border-radius: 12px;
  border: 2px dashed var(--color-purple);
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--color-text-primary);
  z-index: 10;
}

/* SECURE LOGIN OVERLAY & KEYPAD STYLING */
.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background: rgba(4, 6, 11, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.login-box {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  width: 100%;
  max-width: 350px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(229, 193, 88, 0.12), rgba(255, 255, 255, 0.01));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-logo {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b28a38 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  color: #04060b;
  box-shadow: 0 6px 20px rgba(229, 193, 88, 0.15);
}

.login-logo svg {
  width: 24px;
  height: 24px;
  stroke: #04060b;
}

.login-box h2 {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.login-tagline {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-bottom: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pin-display-area input {
  width: 100%;
  background: rgba(4, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  font-size: 22px;
  letter-spacing: 12px;
  text-align: center;
  color: var(--color-gold);
  outline: none;
  font-family: var(--font-mono);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-fast);
}

.pin-display-area input:focus {
  border-color: rgba(229, 193, 88, 0.3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 12px rgba(229, 193, 88, 0.06);
}

.shake {
  animation: shakeAnim 0.3s ease-in-out;
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.network-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.login-footer {
  margin-top: 30px;
}

.login-footer .network-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--color-text-secondary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.sidebar-footer .network-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.logout-btn {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 15px !important;
}

.logout-btn:hover {
  color: var(--color-red) !important;
  background: rgba(190, 18, 60, 0.05) !important;
}

.settings-workspace {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: start;
}

/* SETTINGS SUB-TABS */
.settings-subtabs-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.subtab-btn {
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  transition: all var(--transition-fast);
}

.subtab-btn svg {
  width: 14px;
  height: 14px;
}

.subtab-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.subtab-btn.active {
  color: var(--color-gold);
  background: rgba(223, 177, 91, 0.08);
  border-color: rgba(223, 177, 91, 0.15);
  box-shadow: var(--shadow-sm);
}

.subtab-btn.active svg {
  color: var(--color-gold);
}

.settings-subtabs-content .subtab-panel {
  display: none;
  animation: fadeIn var(--transition-normal);
}

.settings-subtabs-content .subtab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 900px) {
  .settings-workspace {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .settings-subtabs-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    gap: 6px;
  }
  .subtab-btn {
    width: auto;
    justify-content: center;
    padding: 8px 14px;
  }
}

.system-settings-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.system-settings-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
}

.section-desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: -8px;
  margin-bottom: 5px;
  font-weight: 500;
  line-height: 1.4;
}

.settings-form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.settings-form-row:has(.form-toggle-group) {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-input-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.form-input-box label {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-input-box input[type="text"],
.form-input-box input[type="number"],
.form-input-box input[type="password"],
.form-input-box input[type="time"],
.form-input-box select {
  font-family: var(--font-family);
  background: rgba(4, 6, 11, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--color-text-primary);
  font-size: 13px;
  outline: none;
  width: 100%;
  font-weight: 500;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form-input-box select option {
  background: #090c15;
  color: var(--color-text-primary);
}

.form-input-box input:focus,
.form-input-box select:focus {
  border-color: var(--color-gold);
  background: rgba(4, 6, 11, 0.85);
  box-shadow: 0 0 12px rgba(229, 193, 88, 0.08);
}

.input-helper-text {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 500;
}

.form-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.form-submit-row-inline {
  display: flex;
  margin-top: 12px;
}

/* Switch styling */
.form-toggle-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.toggle-labels {
  display: flex;
  flex-direction: column;
}

.toggle-main-label {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.toggle-sub-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  font-weight: 550;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: .2s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: rgba(229, 193, 88, 0.15);
  border-color: rgba(229, 193, 88, 0.3);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(229, 193, 88, 0.4);
}

/* Modal Popover */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: none;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
}

.video-modal[open] {
  display: flex;
}

.video-modal-content {
  width: 90%;
  max-width: 800px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
}

.video-modal-header h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 22px;
  cursor: pointer;
}

.video-modal-body {
  position: relative;
  aspect-ratio: 16/9;
  background: black;
}

.video-modal-body video {
  width: 100%;
  height: 100%;
  display: block;
}

/* Diagnostics info */
.diagnostics-list-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.storage-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold) 0%, #704e18 100%);
  border-radius: 3px;
}

.storage-metrics {
  display: flex;
  justify-content: space-between;
}

.metric-col {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.metric-lbl {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Toast Notifications (Bottom Right popovers) */
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  top: auto;
  left: auto;
  margin: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-primary);
  background: rgba(13, 18, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  max-width: 320px;
  min-width: 220px;
  z-index: 999999;
}

/* Reset default browser popover border/background */
.toast-notification:popover-open {
  display: flex;
  background: rgba(13, 18, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 16px;
  color: var(--color-text-primary);
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.toast-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.toast-message {
  line-height: 1.3;
}

.toast-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.toast-close-btn:hover {
  color: var(--color-text-primary);
}

.toast-info { border-left: 3px solid var(--color-gold) !important; }
.toast-success { border-left: 3px solid var(--color-green) !important; }
.toast-warning { border-left: 3px solid var(--color-yellow) !important; }
.toast-error { border-left: 3px solid var(--color-red) !important; }

.toast-info .toast-icon { color: var(--color-gold); }
.toast-success .toast-icon { color: var(--color-green); }
.toast-warning .toast-icon { color: var(--color-yellow); }
.toast-error .toast-icon { color: var(--color-red); }

/* Custom premium scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

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

/* Mobile brand header */
.mobile-brand-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-sidebar);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 99;
}

.mobile-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-logo-area .logo-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #704e18 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-logo-area .logo-icon svg {
  width: 14px;
  height: 14px;
  color: #ffffff;
}

.mobile-logo-area h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  background: linear-gradient(135deg, #ffffff 40%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mobile-logout-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.mobile-logout-btn svg {
  width: 16px;
  height: 16px;
}

/* Floating Sleek Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 62px;
  background: rgba(14, 19, 29, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(15, 24, 40, 0.35);
  z-index: 999;
  justify-content: space-around;
  align-items: center;
}

.mobile-nav-item {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  flex: 1;
  height: 100%;
  justify-content: center;
  outline: none;
  font-family: var(--font-family);
  transition: all var(--transition-fast);
}

.mobile-nav-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.mobile-nav-item span {
  font-size: 11px;
  font-weight: 600;
}

.mobile-nav-item.active {
  color: var(--color-gold);
}

.mobile-nav-item.active svg {
  color: var(--color-gold);
  transform: translateY(-1px);
}

/* Full-width bottom nav (new .mobile-nav markup): fixed bar, phone widths only.
   Reuses .mobile-nav-item above for the icon + label buttons. */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  z-index: 1000;
  justify-content: space-around;
  align-items: stretch;
}
/* Only while signed in and on the dashboard — never over the login screen,
   PIN gate, or the recorder-offline gate (JS toggles body.app-authed). */
@media (max-width: 768px) {
  body.app-authed .mobile-nav { display: flex; }
  /* Keep the last content rows reachable above the fixed bar */
  body.app-authed .tab-container { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* CCTV sweep - premium tactical laser scan overlay */
.viewport-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.01) 85%, 
    rgba(255, 255, 255, 0.05) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  animation: sweep 8s infinite linear;
  z-index: 2;
}

.camera-card.border-glow-red .viewport-sweep {
  background: linear-gradient(to bottom, 
    rgba(244, 63, 94, 0) 0%, 
    rgba(244, 63, 94, 0.01) 85%, 
    rgba(244, 63, 94, 0.06) 100%
  );
  border-bottom: 1px solid rgba(244, 63, 94, 0.2);
}

.camera-card.border-glow-green .viewport-sweep {
  background: linear-gradient(to bottom, 
    rgba(16, 185, 129, 0) 0%, 
    rgba(16, 185, 129, 0.01) 85%, 
    rgba(16, 185, 129, 0.06) 100%
  );
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

@keyframes sweep {
  0% { top: -30%; }
  100% { top: 110%; }
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .main-workspace {
    padding: 20px 25px;
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .app-layout,
  .app-layout.sidebar-collapsed {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
  }

  .sidebar-nav {
    display: none !important;
  }

  .app-header {
    display: none !important;
  }

  .mobile-brand-header {
    display: flex;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  .main-workspace {
    padding: 12px 10px 90px 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .cameras-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .telemetry-horizontal-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .stats-card-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  #btnToggleSidebar {
    display: flex !important;
  }
  .system-stats-card {
    padding: 12px !important;
  }
  .camera-card {
    border-radius: 10px;
  }
  .camera-header {
    padding: 10px 12px;
  }
  .camera-header h4 {
    font-size: 12px;
  }
  .cam-log-header {
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
  }
  .cam-log-filters {
    flex-direction: column;
    gap: 4px;
  }
  .cam-log-filter-select {
    width: 100%;
    font-size: 10px;
  }
  .camera-actions-row {
    padding: 8px 10px;
  }
  .live-feed-btn {
    padding: 7px 18px !important;
    font-size: 10px !important;
  }
  .camera-recordings-log {
    padding: 10px 12px !important;
  }
  .cam-log-item {
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .filter-form {
    grid-template-columns: 1fr;
  }
  .section-title-bar h2 {
    font-size: 16px;
  }
  /* Fix modal on mobile */
  .video-modal::backdrop {
    background: rgba(0, 0, 0, 0.85);
  }
  .video-modal {
    width: 95vw;
    max-width: 95vw;
    padding: 10px;
    border-radius: 10px;
  }
  /* Fix Settings PIN modal on mobile */
  dialog.video-modal {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #settingsPinModal {
    align-items: center;
    justify-content: center;
  }
  /* Touch target minimums */
  .mobile-nav-item {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
  .btn {
    min-height: 38px;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
  .filter-form {
    grid-template-columns: 1fr;
  }
  .stats-card-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .form-actions {
    flex-direction: column;
  }
  .main-workspace {
    padding: 8px 6px 90px 6px;
  }
  .mobile-bottom-nav {
    bottom: 8px;
    left: 8px;
    right: 8px;
    height: 56px;
    border-radius: 14px;
  }
  .mobile-nav-item span {
    font-size: 11px;
  }
  .stat-card {
    padding: 12px !important;
  }
  .login-box {
    width: 92vw;
    padding: 25px 20px;
  }
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes spin-once {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinning {
  animation: spin-once 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Video Buffering / Loading Spinners */
.video-loading-spinner {
  position: absolute;
  inset: 0;
  background: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  z-index: 10;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.spinner-ring {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--color-gold);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Overview Horizontal Layout Grid */
.telemetry-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.cameras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  width: 100%;
}


/* ==========================================================================
   RESTORED CAMERA CARD & VIEWPORT STYLING SYSTEM
   ========================================================================== */

.camera-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.camera-card:hover {
  background: var(--bg-surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 18px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.camera-title h4 {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--color-text-primary);
}

.camera-title span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.status-indicator {
  font-size: 10px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.status-indicator .indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator .indicator-recording {
  background-color: var(--color-green);
}

.status-indicator .indicator-offline {
  background-color: var(--color-red);
}

.status-recording {
  color: var(--color-green);
  border-color: rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.04);
}

.status-offline {
  color: var(--color-red);
  border-color: rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.04);
}

.status-stopped {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.camera-viewport {
  position: relative;
  aspect-ratio: 16/9;
  flex: 1;
  width: 100%;
  background: #0d1117;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.viewport-video-player-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.viewport-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.viewport-info-top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-mono);
}

.viewport-rec-badge {
  background: rgba(239, 68, 68, 0.9);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
}

.rec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  animation: pulse-glow 1s infinite;
}

.viewport-info-bottom {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-mono);
}

/* Viewport Recording/Standby Idle Indicator */
.viewport-idle-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.idle-camera-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 169, 104, 0.08);
  border: 1px solid rgba(15, 169, 104, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: idle-icon-pulse 3s ease-in-out infinite;
}

.idle-camera-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
  opacity: 0.75;
}

.idle-camera-icon.offline {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  animation: none;
}

.idle-camera-icon.offline svg {
  color: var(--color-text-muted);
  opacity: 0.3;
}

.idle-status-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(229, 193, 88, 0.65);
  animation: idle-text-fade 3s ease-in-out infinite;
}

.idle-status-text.offline {
  color: var(--color-text-muted);
  opacity: 0.35;
  animation: none;
}

.idle-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.idle-waveform span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(229, 193, 88, 0.4);
  animation: waveform-bar 1.2s ease-in-out infinite;
}

.idle-waveform span:nth-child(1) { height: 6px; animation-delay: 0s; }
.idle-waveform span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.idle-waveform span:nth-child(3) { height: 16px; animation-delay: 0.3s; }
.idle-waveform span:nth-child(4) { height: 12px; animation-delay: 0.45s; }
.idle-waveform span:nth-child(5) { height: 6px; animation-delay: 0.6s; }

.viewport-idle-offline {
  opacity: 0.7;
}

@keyframes idle-icon-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes idle-text-fade {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes waveform-bar {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 0.9; }
}

.camera-details {
  padding: 15px 18px 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 6px;
}

.detail-row:last-child {
  border: none;
  padding-bottom: 0;
}

.detail-lbl {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.detail-val {
  color: var(--color-text-primary);
  font-weight: 700;
}

.audio-active,
.audio-inactive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.audio-active {
  color: var(--color-green);
}

.audio-inactive {
  color: var(--color-text-muted);
}

.audio-indicator-svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}


.camera-recordings-log {
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
  padding: 15px 18px;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  overflow: hidden;
}

.camera-recordings-log.collapsed {
  display: none;
}

.cam-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cam-log-header h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.cam-log-filters {
  display: flex;
  gap: 6px;
}

.cam-log-filter-select {
  font-family: var(--font-family);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--color-text-secondary);
  font-size: 11px;
  outline: none;
  font-weight: 600;
  cursor: pointer;
}

.cam-log-filter-select option {
  background: #151724;
  color: var(--color-text-primary);
}

.cam-log-list {
  max-height: 165px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cam-log-list::-webkit-scrollbar {
  width: 5px;
}

.cam-log-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.cam-log-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.cam-log-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   CAMERA CARDS LIVE / CLIPS BUTTONS STYLING
   ========================================================================== */

/* Live, Clips, and Logout Buttons: Neutral Glass styling */
.toggle-clips-btn,
.btn-logout {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 700;
  box-shadow: none !important;
  transition: all var(--transition-fast) !important;
}

.toggle-clips-btn:hover,
.btn-logout:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--color-text-primary) !important;
  transform: translateY(-1px);
}

.toggle-clips-btn.active {
  background: rgba(223, 177, 91, 0.1) !important;
  border-color: rgba(223, 177, 91, 0.25) !important;
  color: var(--color-gold) !important;
  box-shadow: none !important;
}

.camera-ptz-drawer {
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
  padding: 15px 18px;
  overflow: hidden;
}
.camera-ptz-drawer.collapsed {
  display: none;
}

.ptz-viewport-toggle-btn {
  position: absolute;
  top: 8px;
  right: 98px; /* sits left of the snapshot button */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 10, 19, 0.7) !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 12;
}

.ptz-viewport-toggle-btn:hover {
  background: var(--bg-surface-hover) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.ptz-viewport-toggle-btn.active {
  background: var(--color-gold) !important;
  color: #000 !important;
  border-color: var(--color-gold) !important;
}

.seven-grid-cell-ptz-btn {
  position: absolute;
  bottom: 12px;
  right: 88px; /* placed left of fullscreen button */
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
  pointer-events: auto;
}

.seven-grid-cell-ptz-btn:hover {
  background: var(--color-gold);
  color: #000;
  border-color: var(--color-gold);
  transform: scale(1.08);
}

.seven-grid-cell-ptz-btn.active {
  background: var(--color-gold) !important;
  color: #000 !important;
  border-color: var(--color-gold) !important;
}

.seven-grid-cell-ptz-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.ptz-floating-overlay {
  position: absolute;
  background: rgba(13, 18, 30, 0.85);
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 15;
  transition: all 0.2s ease;
}

.ptz-floating-overlay.hidden {
  display: none !important;
}

/* Spinner micro-animation on hover for action buttons */
#clearCacheBtn:hover svg,
#refreshBtn:hover svg {
  animation: spin-clockwise 1.5s linear infinite;
}

@keyframes spin-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Overview Tab Double-Glass Panel Cleanup */
.system-stats-card.nested-stats {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Premium Select Arrow Replacement */
.form-input-box select,
.filter-form select,
#settLogLevel {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23cbd5e1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

/* Datetime Calendar Indicators Invert */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Input Focus Glows & Hover transitions */
.form-input-box input:hover,
.form-input-box select:hover,
.filter-form input:hover,
.filter-form select:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.form-input-box input:focus,
.form-input-box select:focus,
.filter-form input:focus,
.filter-form select:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(223, 177, 91, 0.15) !important;
  outline: none;
}

/* Sticky Scrollable Table Headers */
.recordings-table th,
.settings-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #090d16 !important;
}

/* Zebra Striping */
.recordings-table tbody tr:nth-child(even),
.settings-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

/* Table Monospace Path Badges */
.path-text {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.2);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  color: var(--color-text-secondary);
}

/* Google Drive Table Cell Layout */
.id-text-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.drive-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--color-green);
  font-weight: 700;
  text-decoration: none;
  font-size: 11px;
  transition: all var(--transition-fast);
}
.drive-btn:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}
.drive-btn svg {
  width: 11px;
  height: 11px;
}

.gdrive-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

.copy-id-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: all var(--transition-fast);
}
.copy-id-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.copy-id-btn svg {
  width: 13px;
  height: 13px;
}


/* App Title Highlight (Gold Gradient) */
.brand-text h2,
.header-brand-main h2 {
  background: linear-gradient(135deg, #ffffff 30%, var(--color-gold) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 850 !important;
  letter-spacing: -0.3px !important;
}

/* Card Contrast Grouping Enhancements */
.system-stats-card.glass-panel,
.recordings-vault.glass-panel,
.settings-workspace .settings-subtabs-nav {
  background: rgba(9, 13, 24, 0.65) !important; /* Darker matte tint for outer grouping background! */
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Elevated Inner Cards with crisp light glass borders */
.camera-card {
  background: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 6px !important;
}

.camera-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(229, 193, 88, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(229, 193, 88, 0.05) !important;
}

.system-stats-card.glass-panel .metric-item {
  background: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 6px !important;
}

.system-stats-card.glass-panel .system-card {
  background: rgba(255, 255, 255, 0.022) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 6px !important;
}

.system-settings-card {
  background: rgba(255, 255, 255, 0.015) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
}

/* ====================================================================
   LIVE BUTTON (GREEN) & PLAYER CONTROL BAR (BELOW FEED)
   ==================================================================== */

/* Live Feed Button — Premium Green, Glowing */
.live-feed-btn {
  background: linear-gradient(135deg, rgba(15, 169, 104, 0.12), rgba(15, 169, 104, 0.06)) !important;
  border: 1px solid rgba(15, 169, 104, 0.35) !important;
  color: #0fa968 !important;
  font-weight: 700 !important;
  padding: 8px 26px !important;
  border-radius: 30px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  transition: all var(--transition-fast) !important;
  box-shadow: 0 0 16px rgba(15, 169, 104, 0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  animation: live-btn-glow 3s ease-in-out infinite !important;
}

.live-feed-btn:hover {
  background: linear-gradient(135deg, rgba(15, 169, 104, 0.22), rgba(15, 169, 104, 0.12)) !important;
  border-color: rgba(15, 169, 104, 0.6) !important;
  color: #0fa968 !important;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(15, 169, 104, 0.2), 0 4px 12px rgba(15, 169, 104, 0.15) !important;
}

@keyframes live-btn-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(15, 169, 104, 0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
  50% { box-shadow: 0 0 22px rgba(15, 169, 104, 0.18), inset 0 1px 0 rgba(255,255,255,0.05); }
}

.live-feed-btn.btn-active {
  background: var(--color-green) !important;
  border-color: var(--color-green) !important;
  color: #070a13 !important;
  box-shadow: 0 0 12px rgba(15, 169, 104, 0.25) !important;
}

/* Stop Button — Red themed */
.live-stop-btn {
  background: rgba(225, 29, 72, 0.08) !important;
  border: 1px solid rgba(225, 29, 72, 0.3) !important;
  color: var(--color-red) !important;
  font-weight: 700 !important;
  padding: 7px 22px !important;
  border-radius: 30px !important;
  transition: all var(--transition-fast) !important;
}

.live-stop-btn:hover {
  background: rgba(225, 29, 72, 0.18) !important;
  border-color: rgba(225, 29, 72, 0.5) !important;
  color: var(--color-red) !important;
  transform: translateY(-1px);
}

/* Control Bar Buttons (below feed, in actions row) */
.ctrl-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.ctrl-btn.ctrl-play-pause {
  background: rgba(229, 72, 77, 0.08) !important;
  border-color: rgba(229, 72, 77, 0.25) !important;
  color: var(--color-gold) !important;
  width: 36px;
  height: 36px;
}

.ctrl-btn.ctrl-play-pause:hover {
  background: rgba(229, 72, 77, 0.18) !important;
  border-color: rgba(229, 72, 77, 0.45) !important;
}

.ctrl-btn.ctrl-close {
  background: rgba(225, 29, 72, 0.06) !important;
  border-color: rgba(225, 29, 72, 0.2) !important;
  color: var(--color-red) !important;
}

.ctrl-btn.ctrl-close:hover {
  background: rgba(225, 29, 72, 0.2) !important;
  border-color: rgba(225, 29, 72, 0.5) !important;
  color: #ffffff !important;
}

.ctrl-btn svg.hidden,
.ctrl-btn svg.icon-play.hidden,
.ctrl-btn svg.icon-pause.hidden,
.ctrl-btn svg.icon-vol-on.hidden,
.ctrl-btn svg.icon-vol-off.hidden {
  display: none !important;
}

/* LIVE badge inline in control bar */
.live-badge-inline {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--color-red);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Close button on viewport (×) */
.close-viewport-player {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 10, 19, 0.7) !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 12;
}

.close-viewport-player:hover {
  background: rgba(225, 29, 72, 0.8) !important;
  border-color: rgba(225, 29, 72, 1) !important;
}

/* Actions row spacing for control buttons */
.camera-actions-row {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}

/* Enforce perfect alignment & focus styling for Settings digit PIN input boxes */
.pin-digit-input {
  width: 46px !important;
  height: 46px !important;
  font-size: 22px !important;
  text-align: center !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-color) !important;
  color: white !important;
  outline: none !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all var(--transition-fast) !important;
}

.pin-digit-input:focus {
  border-color: var(--color-gold) !important;
  background: rgba(223, 177, 91, 0.05) !important;
  box-shadow: 0 0 10px rgba(223, 177, 91, 0.15) !important;
}

/* Mobile layout clipping fixes for long text & horizontal overflow scroll */
@media (max-width: 768px) {
  /* Allow the settings subtabs content to wrap/scroll */
  .settings-subtabs-content {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Force tables inside settings and diagnostics to overflow horizontally instead of breaking card layout */
  .table-wrapper, 
  .settings-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    display: block;
  }
  
  .recordings-table, 
  .settings-table {
    min-width: 600px; /* Ensure table headers/cells have enough space to not clip text, user can scroll sideways */
  }

  /* Force info rows with long paths/targets to stack vertically on mobile */
  .info-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  
  .info-row .stats-text,
  .info-row .active-file-text,
  .info-row .metric-val {
    word-break: break-all !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Ensure system logs code/pre block is horizontally scrollable if needed */
  #systemLogsPre {
    overflow-x: auto !important;
    white-space: pre !important; /* Allow side-scrolling instead of cutting off or wrapping awkwardly */
    word-break: normal !important;
  }
}

/* ==========================================================================
   AURORA GLASS THEME  (appended override layer — later cascade wins)
   Frosted glassmorphism panels over a slow animated aurora gradient.
   Accents: alert red #E5484D  +  amber #FFB224.  Pure visual layer — no DOM/JS changes.
   ========================================================================== */
:root {
  /* ============================================================
     LIME ON NEAR-BLACK  (Haulix)
     An operations console. The room stays quiet and near-black;
     LIME carries the chrome (primary action, focus, active state)
     and RED is spent on one thing only: something happened.
     ============================================================ */
  --bg-base: #0f1420;                 /* near-black */
  --bg-sidebar: #0a0e17;
  --bg-surface: rgba(25, 30, 40, 0.65);              /* panels */
  --bg-surface-hover: rgba(40, 45, 60, 0.75);
  --border-color: rgba(255, 255, 255, 0.1);

  --border-focus: #F5DC4E;
  /* Legacy names kept: ~76 rules reference --color-gold and the old theme
     aliased --color-cyan to it. Re-point rather than rename, so nothing is
     missed and the diff stays reviewable. These are the CHROME accent. */
  --color-cyan: #00d4ff;
  --color-gold: #f59e0b;
  --color-accent-ink: #0B0C08;        /* text/icons sitting ON the lime fill */
  --color-purple: #9B7CF6;            /* AI surfaces only; muted so it defers */

  --color-text-primary: #F3F4F2;
  --color-text-secondary: #B9BCB6;
  --color-text-muted: #8C8F89;
  --color-silver: #3B3E38;

  --color-green: #10b981;             /* healthy / recording */
  --color-yellow: #f59e0b;            /* warning */
  --color-red: #f43f5e;               /* alert — never decoration */
  /* Was referenced as var(--color-teal) in ~8 rules but never
     defined, so all of them silently used the teal fallback. Defined now. */
  --color-teal: #F5DC4E;

  /* Matte, not frosted. backdrop-filter re-blurs the whole backdrop every
     frame, which is exactly what a weak box and weak phones cannot spare —
     and a console reads better solid anyway. */
  --glass-blur: blur(16px);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,d4,ff,0.15);
  --shadow-glow-cyan: 0 0 0 1px rgba(245, 220, 78, 0.22);
  --shadow-glow-purple: 0 0 0 1px rgba(155, 124, 246, 0.22);
  --shadow-glow-green: 0 0 18px -6px rgba(84, 217, 138, 0.5);
  --shadow-glow-yellow: 0 0 18px -6px rgba(245, 178, 62, 0.5);
  --shadow-glow-red: 0 0 22px -4px rgba(229, 72, 77, 0.55);
  --aurora-edge: rgba(255, 255, 255, 0.055);
}

/* Base color lives on <html>; <body> must be transparent so the
   z-index:-1 backdrop layer is visible through it. */
html { background-color: var(--bg-base) !important; }
body { background-color: transparent !important; background-image: none !important; }

/* ---- Quiet backdrop ----
   Was a four-colour aurora animating hue-rotate on a 28s loop. Two problems:
   it competed with the alert colour for attention, and animating a saturated
   full-screen filter is the most expensive thing on the page for a weak GPU.
   Now: a static, barely-there red wash. No animation, no repaint. */
.glow-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(245, 220, 78, 0.05), transparent 68%),
    var(--bg-base);
  will-change: auto;
  animation: none;
}
.glow-bg::after {            /* faint console grid + vignette */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    radial-gradient(130% 130% at 50% 0%, transparent 58%, rgba(0, 0, 0, 0.5) 100%);
  background-size: 46px 46px, 46px 46px, auto;
  pointer-events: none;
}

/* ---- Solid console surfaces ----
   No backdrop-filter anywhere: --glass-blur is none because this host box is
   weak, and a console reads better solid than frosted. */
.glass-panel,
.tab-panel,
.app-header,
.sidebar-nav,
.login-box,
.camera-card,
.stat-card,
.video-modal-content,
.system-stats-card,
.chat-bubble {
  background: var(--bg-surface) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}

.app-header { background: var(--bg-sidebar) !important; border-width: 0 0 1px 0 !important; }
.sidebar-nav { background: var(--bg-sidebar) !important; border-width: 0 1px 0 0 !important; }

.glass-panel, .camera-card, .stat-card { position: relative; overflow: hidden; border-radius: 16px !important; }

/* ---- Lift + hover ---- */
.glass-panel, .camera-card, .stat-card, .nav-item, .btn {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal), background var(--transition-normal);
}
.camera-card:hover, .stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 220, 78, 0.42) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow-cyan) !important;
}

/* ---- Sidebar nav items ---- */
.nav-item { border-radius: 11px; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); }
.nav-item.active {
  background: rgba(245, 220, 78, 0.12) !important;
  border-left: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(245, 220, 78, 0.32) !important;
  color: var(--color-gold) !important;
}
.nav-item.active .nav-item-text { color: var(--color-gold) !important; }
.nav-item.active svg { color: var(--color-gold) !important; }

/* ---- Buttons ---- */
.btn-primary {
  background: var(--color-gold) !important;
  border: 1px solid transparent !important;
  color: var(--color-accent-ink) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn-secondary, .btn-tertiary {
  background: rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border-color) !important;
}
.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--color-text-primary) !important;
}

/* ---- Legacy PIN gate (kept styled in case it is ever re-enabled) ---- */
.login-overlay {
  background: var(--bg-base) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.login-box { border-radius: 18px !important; }
.pin-display-area input {
  background: var(--bg-surface-hover) !important;
  border: 1px solid var(--border-color) !important;
  letter-spacing: 0.5em;
}
.pin-display-area input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(245, 220, 78, 0.16) !important;
}

/* ---- Brand wordmark ----
   Flat, not a gradient: the Haulix voice puts weight in type, not in ink. */
.header-brand-main, .login-box h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* ---- Status glows (semantic — red here means a real alert) ---- */
.camera-card.border-glow-green { box-shadow: var(--shadow-lg), var(--shadow-glow-green) !important; }
.camera-card.border-glow-red   { box-shadow: var(--shadow-lg), var(--shadow-glow-red) !important; }

/* ---- Themed scrollbars ---- */
* { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(245, 220, 78, 0.4); background-clip: content-box; }

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  .glow-bg { animation: none; }
  .glass-panel, .camera-card, .stat-card, .nav-item, .btn { transition: none; }
}

/* ---- LargoCCTV logo badge (lime tile, dark glyph — matches .auth-logo) ---- */
.login-logo,
.sidebar-brand .logo-icon,
.mobile-logo-area .logo-icon {
  background: rgba(245, 220, 78, 0.1) !important;
  border: 1px solid rgba(245, 220, 78, 0.3) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.login-logo svg,
.sidebar-brand .logo-icon svg,
.mobile-logo-area .logo-icon svg {
  color: var(--color-gold) !important;
  stroke: var(--color-gold) !important;
}
.sidebar-brand .logo-icon:hover,
.login-logo:hover {
  background: rgba(245, 220, 78, 0.16) !important;
  border-color: rgba(245, 220, 78, 0.45) !important;
}

/* ==========================================================================
   7-CAMERA SURVEILLANCE MATRIX OVERLAY SYSTEM
   ========================================================================== */

.seven-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(12, 13, 15, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: none;
  flex-direction: column;
  padding: 24px;
  animation: overlayFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.seven-grid-overlay.open {
  display: flex !important;
}

@keyframes overlayFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.seven-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
  flex-shrink: 0;
}

.seven-grid-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.seven-grid-title h3 {
  color: var(--color-text-primary);
  margin: 0;
}

.btn-close-seven-grid {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.btn-close-seven-grid:hover {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border-color: rgba(244, 63, 94, 0.3);
  transform: rotate(90deg);
}

.seven-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  position: relative;
}

.seven-grid-cell {
  background: #15171e;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.seven-grid-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(229, 72, 77, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.seven-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  flex: 1;
  min-height: 0;
}

.seven-grid-cell-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

.seven-grid-cell-title {
  color: #fff;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.seven-grid-cell-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Specific Cell grid areas for premium desktop layout */
.seven-grid-cell[data-camera-id="camera_1"] {
  grid-area: span 2 / span 2;
}

/* Widescreen/Zoomed State inside the 7-Camera Grid */
.seven-grid-cell.zoomed {
  position: absolute;
  inset: 0;
  z-index: 10;
  grid-area: 1 / 1 / -1 / -1 !important;
  grid-column: 1 / -1 !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
  transform: none !important;
  cursor: zoom-out;
}

.seven-grid-cell-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
  pointer-events: auto;
}

.seven-grid-cell-zoom-btn:hover {
  background: var(--color-gold);
  color: #000;
  border-color: var(--color-gold);
  transform: scale(1.08);
}

.seven-grid-cell-zoom-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Spinner / Loader Inside Overlay Cells */
.seven-grid-cell-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #090a0d;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.seven-grid-cell-loader .spinner-ring {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.seven-grid-cell-loader span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* Mobile Responsiveness for 7-Camera Grid */
@media (max-width: 768px) {
  .seven-grid-overlay {
    padding: 16px;
  }
  .seven-grid-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 12px;
  }
  .seven-grid-cell {
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    grid-area: auto !important;
    grid-column: auto !important;
  }
  .seven-grid-cell.zoomed {
    position: fixed;
    inset: 16px;
    height: calc(100% - 32px);
    z-index: 10001;
  }
}

/* Custom Fullscreen buttons */
.seven-grid-cell-fullscreen-btn {
  position: absolute;
  bottom: 12px;
  right: 50px; /* placed next to zoom button */
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
  pointer-events: auto;
}

.seven-grid-cell-fullscreen-btn:hover {
  background: var(--color-gold);
  color: #000;
  border-color: var(--color-gold);
  transform: scale(1.08);
}

.seven-grid-cell-fullscreen-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.fullscreen-viewport-player {
  position: absolute;
  top: 8px;
  right: 38px; /* to the left of the close button */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 10, 19, 0.7) !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 12;
}

.fullscreen-viewport-player:hover {
  background: var(--bg-surface-hover) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.fullscreen-viewport-player svg {
  width: 12px;
  height: 12px;
}

/* Snapshot control — sits to the left of the fullscreen button. */
.snapshot-viewport-player {
  position: absolute;
  top: 8px;
  right: 68px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 10, 19, 0.7) !important;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 12;
}

.snapshot-viewport-player:hover {
  background: var(--bg-surface-hover) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.snapshot-viewport-player:active {
  transform: scale(0.9);
  border-color: var(--color-teal) !important;
}

.snapshot-viewport-player svg {
  width: 13px;
  height: 13px;
}

.hidden {
  display: none !important;
}

.viewport-live-audio-toggle:hover, .seven-grid-cell-audio-btn:hover {
  color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  background: rgba(13, 18, 30, 0.85) !important;
}

/* PTZ Control Panel Styling */
.ptz-btn {
  background: transparent;
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.ptz-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-gold) !important;
}
.ptz-btn.ptz-home-btn {
  color: var(--color-green);
}
.ptz-btn.ptz-stop-btn {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-red);
}
.ptz-btn.ptz-stop-btn:hover {
  background: rgba(244, 63, 94, 0.3) !important;
  color: #fff !important;
}

/* ==========================================================================
   MOBILE ENHANCEMENTS (v2.3.0)
   Safe-area (notch/home-bar) insets, larger touch targets, native-app feel.
   Appended last so these refinements win without touching existing rules.
   ========================================================================== */

/* Never allow sideways scroll on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Respect the notch: push the sticky mobile header below the status bar,
   and keep content clear of the home indicator at the bottom. */
@supports (padding: max(0px)) {
  .mobile-brand-header {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .app-layout, .tab-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .login-overlay {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    /* A full-screen backdrop-filter re-samples the fixed aurora layer behind
       it on every repaint (the pulsing status dot alone is enough), which
       flickers on mobile GPUs. Paint the overlay opaque and drop the blur so
       there is nothing to re-composite. */
    background: #05060f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* On touch devices, guarantee comfortable tap targets and kill the 300ms delay. */
@media (pointer: coarse) {
  .nav-item,
  .mobile-refresh-btn,
  .mobile-logout-btn,
  .btn,
  .ptz-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  .ptz-btn {
    min-width: 44px;
  }
  .mobile-refresh-btn,
  .mobile-logout-btn {
    min-width: 40px;
    min-height: 40px;
  }
  /* Compact round overlay controls keep their fixed size/spacing; just make taps crisp. */
  .viewport-live-audio-toggle,
  .close-viewport-player,
  .fullscreen-viewport-player,
  .snapshot-viewport-player {
    touch-action: manipulation;
  }
  /* Smooth, momentum scrolling inside scroll regions. */
  .tab-container,
  .vault-list,
  .recordings-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* Feedback on press for the alert bell + header actions (no hover on touch). */
.mobile-refresh-btn:active {
  transform: scale(0.92);
  border-color: var(--color-teal) !important;
}

/* Live video element inherits the same rounded framing as the MJPEG img. */
.viewport-live-hls {
  background: #000;
  border-radius: inherit;
}

/* Camera health pill — compact status chip in the Camera Feeds title bar.
   Green when everything records; red count pill with a click-to-open dropdown
   naming offline feeds. */
.camera-health-wrap { position: relative; margin-left: auto; }
.camera-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-secondary);
  cursor: default;
  white-space: nowrap;
}
.camera-health-pill .chp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.camera-health-pill.chp-ok .chp-dot { background: var(--color-green); }
.camera-health-pill.chp-warn {
  cursor: pointer;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}
.camera-health-pill.chp-warn .chp-dot {
  background: #f87171;
  animation: chb-pulse 1.8s ease-in-out infinite;
}
@keyframes chb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .camera-health-pill .chp-dot { animation: none; } }
.camera-health-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  padding: 8px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.camera-health-dropdown .chp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}
.camera-health-dropdown .chp-row:hover { background: var(--bg-surface-hover); }
.camera-health-dropdown .chp-row-name { color: var(--color-text-primary); font-weight: 600; }
.camera-health-dropdown .chp-row-since {
  color: #f87171;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* ---- Notification Alerts modal ---- */
.alerts-body { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.alerts-section { display: flex; flex-direction: column; gap: 8px; }
.alerts-subhead {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted, #6b7c96);
}
.alerts-hint { margin: 0; font-size: 11.5px; color: var(--color-text-secondary, #9fb0c8); }
.alerts-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
.alerts-row.alerts-master { background: rgba(229, 72, 77, 0.07); border-color: rgba(229, 72, 77, 0.20); }
.alerts-cam-list { display: flex; flex-direction: column; gap: 6px; }
.alerts-row.alerts-times { justify-content: flex-start; flex-wrap: wrap; }
.alerts-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-teal); flex: none; }
.alerts-row input[type="time"] {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(0,0,0,0.25); color: var(--color-text-primary, #e8edf6);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 6px 8px;
}

/* ---- Recording coverage timeline (gap visualizer) ---- */
.cam-coverage { margin: 4px 0 10px; }
.cov-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--color-text-secondary, #9fb0c8); margin-bottom: 5px;
}
.cov-pct { color: var(--color-teal); font-weight: 700; }
.cov-bar {
  position: relative; height: 14px; border-radius: 5px; cursor: pointer;
  /* Empty = a gap (no recording). Faint red wash so downtime is obvious. */
  background: repeating-linear-gradient(
    -45deg, rgba(248,113,113,0.10), rgba(248,113,113,0.10) 4px,
    rgba(248,113,113,0.04) 4px, rgba(248,113,113,0.04) 8px);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.cov-fill {
  position: absolute; top: 0; bottom: 0; min-width: 1px;
  background: linear-gradient(180deg, var(--color-gold), #8FA834);
  border-radius: 2px;
}
.cov-bar:hover .cov-fill { filter: brightness(1.08); }
.cov-axis {
  position: relative; height: 12px; margin-top: 2px;
}
.cov-tick {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted, #6b7c96);
}
.cov-tick:first-child { transform: translateX(0); }
.cov-tick:last-child { transform: translateX(-100%); }

/* ==========================================================================
   AI VAULT SEARCH & DAILY SUMMARY
   ========================================================================== */
.ai-search-panel { margin-bottom: 20px; }

.ai-search-form {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.ai-search-input {
  flex: 1 1 260px; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-base); border: 1px solid var(--border-color);
  color: var(--color-text-primary); font-size: 13px; outline: none;
}
.ai-search-input:focus { border-color: var(--border-focus); }
.ai-search-range {
  padding: 10px 12px; border-radius: 8px; background: var(--bg-base);
  border: 1px solid var(--border-color); color: var(--color-text-secondary);
  font-size: 12.5px;
}

.ai-search-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ai-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  background: var(--bg-surface-hover); border: 1px solid var(--border-color);
  color: var(--color-text-secondary); transition: all 0.15s ease;
}
.ai-chip:hover { border-color: var(--color-gold); color: var(--color-text-primary); }
.ai-chip-static { cursor: default; }
.ai-chip-static:hover { border-color: var(--border-color); color: var(--color-text-secondary); }

.ai-search-meta {
  margin-top: 14px; font-size: 12px; color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.ai-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-top: 12px;
}
.ai-result-card {
  background: var(--bg-base); border: 1px solid var(--border-color);
  border-radius: 10px; overflow: hidden; transition: all 0.15s ease;
}
.ai-result-card.playable { cursor: pointer; }
.ai-result-card.playable:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.ai-result-thumb { aspect-ratio: 16 / 9; background: #000; }
.ai-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-thumb-missing {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 11px;
}
.ai-result-info { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; }
.ai-result-label { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); text-transform: capitalize; }
.ai-result-label em { font-style: normal; color: var(--color-text-muted); font-weight: 400; font-size: 11px; }
.ai-result-cam { font-size: 11.5px; color: var(--color-gold); }
.ai-result-time { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); }
.ai-result-play { font-size: 11px; color: var(--color-green); margin-top: 3px; }
.ai-result-expired { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

.ai-summary-block { margin-top: 22px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.ai-summary-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-summary-controls h3 { font-size: 14px; color: var(--color-text-primary); margin: 0; }
.ai-summary-output {
  margin-top: 14px; padding: 14px; border-radius: 10px;
  background: var(--bg-base); border: 1px solid var(--border-color);
  font-size: 12.5px; color: var(--color-text-secondary);
}
.ai-summary-headline { font-size: 13.5px; color: var(--color-text-primary); margin: 0 0 10px 0; line-height: 1.5; }
.ai-summary-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-summary-coverage { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); margin: 6px 0 10px 0; }
.ai-timeline { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ai-timeline-row {
  display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12px;
  background: var(--bg-surface); align-items: baseline;
}
.ai-timeline-time { font-family: var(--font-mono); color: var(--color-gold); white-space: nowrap; font-size: 11px; min-width: 130px; }
.ai-timeline-cam { color: var(--color-text-primary); white-space: nowrap; min-width: 90px; }
.ai-timeline-desc { color: var(--color-text-secondary); }

/* ==========================================================================
   AI VAULT ASSISTANT — CHAT
   ========================================================================== */
.ai-chat-log {
  margin-top: 14px;
  max-height: 460px;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
  scroll-behavior: smooth;
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-color);
}
.ai-msg-user .ai-msg-bubble {
  background: rgba(229, 72, 77, 0.12);
  border-color: rgba(229, 72, 77, 0.35);
  color: var(--color-text-primary);
  border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble { border-bottom-left-radius: 4px; }
.ai-msg-bubble em { color: var(--color-gold); font-style: normal; }
.ai-thinking { color: var(--color-text-muted); font-style: italic; }

/* Rendered-markdown content inside an assistant bubble (see aiMarkdown in app.js) */
.ai-msg-bubble .ai-md-p { margin: 0; }
.ai-msg-bubble .ai-md-gap { height: 8px; }
.ai-msg-bubble .ai-md-head {
  font-weight: 700; color: var(--color-text-primary); margin: 2px 0;
}
.ai-msg-bubble strong { color: var(--color-text-primary); font-weight: 600; }
.ai-msg-bubble code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 4px; padding: 1px 5px;
}
.ai-msg-bubble .ai-md-list {
  margin: 4px 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.ai-msg-bubble .ai-md-list li::marker { color: var(--color-text-muted); }

.ai-chat-form { display: flex; gap: 10px; margin-top: 12px; }
.ai-chat-form .ai-search-input { flex: 1; }

.ai-chat-cards {
  margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.ai-chat-cards .ai-result-thumb { aspect-ratio: 16 / 9; }
.ai-chat-cards .ai-result-info { padding: 7px 9px; }

.ai-engine-note {
  margin-top: 8px; font-size: 10.5px; color: var(--color-text-muted);
  font-family: var(--font-mono); font-style: italic;
}

/* ==========================================================================
   AI ASSISTANT TAB — full-height chat layout (desktop + mobile)
   ========================================================================== */
.ai-chat-panel {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 210px);
  min-height: 460px;
  overflow: hidden;
}
.ai-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.ai-chat-header-titles h2 { margin: 0; }
.ai-chat-header-titles .vault-desc { margin: 4px 0 0 0; }
.ai-engine-badge {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  color: var(--color-text-muted);
}
.ai-engine-badge.ai-engine-claude {
  color: var(--color-gold);
  border-color: rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.08);
}
.ai-engine-badge.ai-engine-gemini {
  color: #6ea8fe;
  border-color: rgba(110, 168, 254, 0.4);
  background: rgba(110, 168, 254, 0.08);
}

/* Chat log fills the space between header and composer */
.ai-chat-panel .ai-chat-log {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  margin-top: 0;
  padding: 14px 4px;
}

.ai-chat-composer {
  flex: none;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}
.ai-chat-composer .ai-search-chips {
  margin-top: 0;
  margin-bottom: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ai-chat-composer .ai-search-chips::-webkit-scrollbar { display: none; }
.ai-chat-composer .ai-chip { flex: none; white-space: nowrap; }
.ai-chat-composer .ai-chat-form { margin-top: 0; }
.ai-send-btn { flex: none; }

.ai-summary-panel { margin-top: 20px; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .ai-chat-panel {
    /* dvh tracks the browser chrome; leave room for brand header + bottom nav */
    height: calc(100dvh - 235px);
    min-height: 360px;
  }
  .ai-chat-header-titles .vault-desc { display: none; }
  .ai-chat-header { padding-bottom: 10px; }
  .ai-chat-panel .ai-chat-log { padding: 10px 2px; }
  .ai-msg-bubble { max-width: 96%; font-size: 13.5px; }
  /* 16px stops iOS Safari from zooming the page when the input is focused */
  .ai-search-input { font-size: 16px; }
  .ai-send-btn { padding: 10px 14px; }
  .ai-send-btn .ai-send-label { display: none; }
  .ai-chat-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ai-results-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ai-timeline-row { flex-wrap: wrap; row-gap: 2px; }
  .ai-timeline-time { min-width: 0; }
  .ai-timeline-cam { min-width: 0; }
  .ai-summary-controls { flex-direction: column; align-items: stretch; }
  .ai-summary-controls .ai-search-range,
  .ai-summary-controls .btn { width: 100%; }
}

/* Revamped stats tab helpers */
.mono-strong { font-family: var(--font-mono); font-weight: 700; }

/* ==========================================================================
   AI ASSISTANT — engine toggle, chat controls, history dropdown
   ========================================================================== */
.ai-chat-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ai-ctrl-btn { white-space: nowrap; padding: 6px 11px; font-size: 11.5px; }

.ai-engine-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-base);
  padding: 2px;
}
.ai-toggle-opt {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ai-toggle-opt.active {
  background: rgba(229, 72, 77, 0.16);
  color: var(--color-gold);
}
.ai-toggle-opt:not(.active):hover { color: var(--color-text-secondary); }

.ai-history-wrap { position: relative; }
.ai-history-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 290px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.ai-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.ai-history-row:hover { background: var(--bg-surface-hover); }
.ai-history-row.current { border: 1px solid rgba(229, 72, 77, 0.35); }
.ai-history-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-history-title {
  font-size: 12px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-history-date { font-size: 10.5px; color: var(--color-text-muted); font-family: var(--font-mono); }
.ai-history-del {
  flex: none;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.ai-history-del:hover { color: var(--color-red); background: rgba(244, 63, 94, 0.1); }
.ai-history-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .ai-chat-header { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Chat controls share the row evenly — thumb-friendly, no loose wrapping */
  .ai-chat-controls { justify-content: stretch; gap: 6px; flex-wrap: nowrap; }
  .ai-chat-controls .ai-ctrl-btn { flex: 1 1 0; justify-content: center; text-align: center; }
  .ai-history-wrap { flex: 1 1 0; display: flex; }
  .ai-history-wrap .ai-ctrl-btn { width: 100%; }
  .ai-engine-badge { display: none; }
  .ai-history-dropdown { right: auto; left: 0; width: min(290px, 86vw); }
}

/* ==========================================================================
   CAMERA GRID CUSTOMIZER STYLING
   ========================================================================== */
.span-col-2 {
  grid-column: span 2;
}
.span-col-3 {
  grid-column: span 3;
}
.span-row-2 {
  grid-row: span 2;
}
.span-row-3 {
  grid-row: span 3;
}

/* The theme-preset system was a single hardcoded preset that re-declared the
   whole palette on <body>, overriding :root. Removed so :root is the one source
   of truth for colour. Reintroduce presets only if there is a second theme. */

/* Auto-scroll camera card alert highlight glow */
@keyframes alertHighlightPulse {
  0% {
    box-shadow: 0 0 0 0px var(--color-red);
    border-color: var(--color-red);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(229, 72, 77, 0.4);
    border-color: var(--color-red);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(229, 72, 77, 0);
  }
}
.card-highlight {
  animation: alertHighlightPulse 1.8s ease-in-out 3;
}

/* ==========================================================================
   ALERTS LOG TAB STYLING
   ========================================================================== */

/* Filter chips must stay reachable on narrow screens: scroll sideways
   instead of clipping the last categories off the edge. */
/* Alerts toolbar — title block + segmented filter / camera / refresh cluster */
.alerts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
/* Flex items default to min-width:auto, i.e. they refuse to shrink below their
   content's min-content width. .alerts-controls contains the filter strip, whose
   chips give it a 368px min-content — wider than this panel at 360px (the most
   common Android width), and the panel's overflow-x:hidden then silently clipped
   the text and the last filter chip. min-width:0 lets these shrink so the strip
   scrolls (as it was designed to) instead of the panel cutting content off. */
.alerts-toolbar-titles { min-width: 0; }
.alerts-controls { min-width: 0; max-width: 100%; }
.alerts-filter-strip { min-width: 0; }
.alerts-camera-filter { min-width: 0; max-width: 100%; }

.alerts-toolbar-titles h2 {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  color: var(--color-gold);
}
.alerts-toolbar-titles .section-desc { margin: 4px 0 0 0; }
.alerts-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
.alerts-camera-filter {
  height: 34px;
  padding: 0 10px;
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
}
.alerts-refresh-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.alerts-refresh-btn .btn-svg { width: 12px; height: 12px; }

.alerts-filter-strip {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.alerts-filter-strip::-webkit-scrollbar { display: none; }

.alerts-filter-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  white-space: nowrap;
}
.alerts-filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}
.alerts-filter-btn.active {
  background: var(--color-gold);
  color: #000000 !important;
}

.alerts-log-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
/* Alerts controls: filter strip claims its own full-width row; camera + refresh
   share the next. Refresh collapses to icon-only so the row never overflows. */
@media (max-width: 640px) {
  .alerts-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .alerts-controls { flex-wrap: wrap; gap: 8px; }
  .alerts-filter-strip { flex: 1 0 100%; }
  .alerts-camera-filter { flex: 1 1 auto; min-width: 0; }
  .alerts-refresh-btn { padding: 0 12px; }
  .alerts-refresh-btn .alerts-refresh-label { display: none; }
}

/* ==========================================================================
   RECORDING COVERAGE + ACTIVITY HEATMAP (Stats tab)
   ========================================================================== */
.coverage-window {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.btn-icon-plain {
  background: none;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  color: var(--color-text-muted);
  padding: 5px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s, border-color 0.15s;
}

.btn-icon-plain:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.coverage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 2px;
}

.coverage-empty {
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 6px 2px;
}

.coverage-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr 44px;
  align-items: center;
  gap: 10px;
}

.coverage-name {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coverage-offline {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 6px;
  padding: 1px 5px;
  vertical-align: 1px;
}

.coverage-bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.coverage-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}

.coverage-fill.good { background: linear-gradient(90deg, #30A46C, #4ADE80); }
.coverage-fill.warn { background: linear-gradient(90deg, #d97706, #fbbf24); }
.coverage-fill.bad  { background: linear-gradient(90deg, #dc2626, #f87171); }

.coverage-pct {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.coverage-pct.good { color: #30A46C; }
.coverage-pct.warn { color: #fbbf24; }
.coverage-pct.bad  { color: #f87171; }

.heatmap-cam-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 11px;
  padding: 4px 8px;
  max-width: 150px;
}

.heatmap-grid-wrap {
  overflow-x: auto;
  padding: 4px 2px 2px;
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 420px;
}

.heatmap-row {
  display: grid;
  grid-template-columns: 52px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}

.heatmap-daylabel {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.heatmap-hourlabel {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  font-family: var(--font-mono, monospace);
}

.heatmap-cell {
  aspect-ratio: 1 / 1;
  min-height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   GOOGLE SIGN-IN (login screen)
   Sits under the login form; hidden entirely unless the server says
   Google auth is enabled, so the PIN-only build looks untouched.
   ============================================================ */
.google-signin-wrap {
  width: 100%;
  margin-top: 18px;
  min-width: 0;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.google-signin-btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}
.google-signin-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-gold);
}
.google-signin-btn:active:not(:disabled) { transform: scale(0.985); }
.google-signin-btn:disabled { opacity: 0.55; cursor: default; }

.google-signin-btn .google-g {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.google-signin-note {
  margin: 9px 0 0;
  min-height: 14px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.google-signin-note.error { color: #f87171; }

/* Signed-in identity chip in the sidebar */
.user-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.user-identity .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #cbd5e1);
}
.user-identity .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #34d399;
}
.user-identity .dot.anon { background: var(--color-gold); }

/* ============================================================
   LOGIN FORM (email/password + Google + LAN PIN)
   Replaces the old PIN pad. Kept narrow and single-column so it
   behaves at 360px, the width that clipped the alerts toolbar.
   ============================================================ */
.email-login-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
  text-align: left;
  margin-top: 4px;
}

.field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.text-input {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-primary);
  font-size: 14px;               /* >=16px avoids iOS zoom-on-focus, but 14 + the
                                    meta viewport lock reads better here */
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.text-input:focus {
  border-color: var(--color-red);
  background: rgba(255, 255, 255, 0.055);
}
.text-input::placeholder { color: #5C5F6B; }

.password-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.password-row .text-input { flex: 1 1 auto; min-width: 0; }

.pw-toggle {
  flex: 0 0 auto;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pw-toggle:hover { color: var(--color-text-primary); border-color: var(--color-red); }

.primary-btn {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--color-red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.1); }
.primary-btn:active:not(:disabled) { transform: scale(0.985); }
.primary-btn:disabled { opacity: 0.6; cursor: default; }

.secondary-btn {
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.secondary-btn:hover { border-color: var(--color-red); }

.link-btn {
  align-self: center;
  margin-top: 10px;
  padding: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--color-text-primary); }
.link-btn.subtle { font-size: 10px; opacity: 0.75; text-decoration: none; }
.link-btn.subtle:hover { text-decoration: underline; }

.login-note {
  margin: 8px 0 0;
  min-height: 14px;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.login-note.error { color: #FF8A8F; }

.lan-pin-wrap {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lan-pin-form {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  text-align: left;
}
.lan-pin-form .text-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 18px;
}

/* Household PIN entry — wide tracking so 6 digits stay legible as dots. */
.text-input.pin-entry {
  letter-spacing: 10px;
  text-align: center;
  font-size: 20px;
  padding-left: 10px;   /* letter-spacing adds a trailing gap; nudge back to centre */
}

/* ==========================================================================
   AUTH SCREENS (sign in / sign up / household PIN)
   Deliberately conventional: brand, social button, divider, form, switch link.
   Self-contained on .auth-* classes so none of the older .login-box cascade
   (spread across several blocks, several !important) can reach in here.
   ========================================================================== */
/* ============================================================
   AUTH SCREENS — Haulix 2026-07-17
   Operations-console login: near-black ground with a faint grid, a
   solid dark panel, a lime brand tile and exactly one lime action.
   No backdrop-filter on purpose — the theme sets --glass-blur: blur(16px);
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
  overflow-y: auto;
  isolation: isolate;
  background: var(--bg-base);
}
/* faint console grid, fading out from centre */
.auth-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(74% 60% at 50% 42%, #000 0%, transparent 82%);
          mask-image: radial-gradient(74% 60% at 50% 42%, #000 0%, transparent 82%);
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-width: 0;
  padding: 32px 30px 28px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
  animation: authRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- brand ---- */
.auth-brand { text-align: center; margin-bottom: 24px; }

.auth-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(245, 220, 78, 0.1);
  border: 1px solid rgba(245, 220, 78, 0.3);
  color: var(--color-gold);
}
.auth-logo svg { width: 25px; height: 25px; }

.auth-title {
  margin: 0 0 6px;
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: var(--color-text-primary);
}
.auth-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* ---- buttons ---- */
.auth-btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              filter var(--transition-fast), transform var(--transition-fast);
}
.auth-btn:active:not(:disabled) { transform: scale(0.99); }
.auth-btn:disabled { opacity: 0.6; cursor: default; }

.auth-btn-social {
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
}
.auth-btn-social:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.auth-btn-social .google-g { width: 18px; height: 18px; flex: 0 0 auto; }

/* the single lime action on the page */
.auth-btn-primary {
  margin-top: 6px;
  border: 1px solid transparent;
  background: var(--color-gold);
  color: var(--color-accent-ink);
}
.auth-btn-primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }

/* ---- divider ---- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-color);
}

/* ---- form ---- */
.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* display:flex beats the UA's [hidden]{display:none}, so the sign-up-only
   confirm field rendered in sign-in mode. Re-assert it. */
.auth-field[hidden], .auth-overlay [hidden] { display: none !important; }
/* Descendant, not child: the password label lives inside .auth-label-row.
   Uppercase micro-label = the Haulix data-label voice. */
.auth-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.auth-field input {
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-hover);
  color: var(--color-text-primary);
  font-size: 15px;          /* iOS zooms a focused field below ~16px; 15 with the
                               viewport lock in <head> is the practical floor */
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-field input::placeholder { color: #5C5F59; }
.auth-field input:hover:not(:focus) { border-color: rgba(255, 255, 255, 0.15); }
.auth-field input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(245, 220, 78, 0.16);
}
/* Chrome repaints an autofilled field near-white, which blew a lavender hole in
   the dark panel. A huge inset shadow is the only way to beat the UA background. */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface-hover) inset;
  caret-color: var(--color-text-primary);
  transition: background-color 9999s ease-out 0s;
}

/* password field + its Show button share one bordered box */
.auth-input-affix { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.auth-input-affix input { flex: 1 1 auto; min-width: 0; }
.auth-affix-btn {
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-hover);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
}
.auth-affix-btn:hover { color: var(--color-text-primary); border-color: rgba(255, 255, 255, 0.16); }

.auth-pin {
  letter-spacing: 10px;
  text-align: center;
  font-size: 20px;
  padding-left: 22px;
  font-variant-numeric: tabular-nums;
}

/* ---- links + messages ---- */
.auth-link, .auth-link-inline {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-weight: 650;
  cursor: pointer;
  color: var(--color-gold);
}
.auth-link { font-size: 13px; }
.auth-link:hover, .auth-link-inline:hover { text-decoration: underline; }
.auth-link-inline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.auth-link-inline:hover { color: var(--color-text-primary); }

/* keyboard focus must stay visible now that hover carries less weight */
.auth-btn:focus-visible,
.auth-affix-btn:focus-visible,
.auth-link:focus-visible,
.auth-link-inline:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.auth-msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.auth-msg:empty { display: none; }   /* no reserved gap when there's nothing to say */
.auth-msg.error { color: var(--color-red); }   /* red still means exactly one thing */

.auth-switch {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.auth-footnote {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-align: center;
}

@media (max-width: 400px) {
  .auth-card { padding: 26px 20px 24px; border-radius: 16px; }
  .auth-title { font-size: 20px; }
}

/* ---- auth motion ---- */
@keyframes authRise {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none !important; }
}

/* ==========================================================================
   ALERTS — decluttered
   Was: 100 flat cards, ~15,500px tall, each with a big thumbnail and two
   permanent buttons. Now: grouped by day, one compact row each, details on tap,
   paged 25 at a time.
   ========================================================================== */
.alerts-head {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 2px 10px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-color);
}
.alerts-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.alerts-head-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  flex: 0 0 auto;
}
.alerts-count {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.alerts-count:not(:empty)::before { content: "· "; }

.icon-btn {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.icon-btn:hover { color: var(--color-text-primary); border-color: rgba(255,255,255,0.18); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn-dot {           /* filters are active — visible without opening the sheet */
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-red);
}

.alerts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.chip:hover { border-color: rgba(255,255,255,0.2); color: var(--color-text-primary); }
.chip.active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}
.chip-removable { display: inline-flex; align-items: center; gap: 6px; }
.chip-removable span { opacity: 0.7; font-size: 14px; line-height: 1; }

/* ---- day separators ---- */
.alerts-day {
  position: sticky;
  top: 59px;                  /* == .alerts-head height, measured */
  z-index: 10;
  padding: 14px 2px 7px;
  background: var(--bg-base);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- one alert ---- */
.alert-item {
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  margin-bottom: 7px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.alert-item.is-open { border-color: rgba(229, 72, 77, 0.4); }

.alert-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.alert-row:hover { background: var(--bg-surface-hover); }

.alert-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.alert-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.alert-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.alert-time { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.alert-conf {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-red);
  opacity: 0.85;
}

.alert-caret {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.alert-item.is-open .alert-caret { transform: rotate(180deg); }

.alerts-more {
  width: 100%;
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed var(--border-color);
  background: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.alerts-more:hover { border-color: var(--color-red); color: var(--color-text-primary); }
.alerts-more span { color: var(--color-text-muted); font-weight: 500; }

.alerts-empty { padding: 56px 20px; text-align: center; }
.alerts-empty-title { margin: 0 0 5px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.alerts-empty-sub { margin: 0; font-size: 12px; color: var(--color-text-muted); }

/* ==========================================================================
   DRAWER (bottom sheet)
   ========================================================================== */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.drawer-scrim.is-open { opacity: 1; }

.drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1401;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.drawer.is-open { transform: translateY(0); }

.drawer-grip {
  width: 38px; height: 4px;
  margin: 9px auto 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 6px;
}
.drawer-head h3 { margin: 0; font-family: var(--font-family); font-size: 15px; font-weight: 700; }

.drawer-body { padding: 6px 16px 12px; overflow-y: auto; }
.drawer-section { margin-bottom: 18px; }
.drawer-section h4 {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }

.drawer-select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
}

.drawer-foot {
  display: flex;
  gap: 9px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border-color);
}
.drawer-foot .auth-btn { margin-top: 0; }

/* The fixed bottom nav used to sit on top of the last row. */
@media (max-width: 992px) {
  #tab-alerts { padding-bottom: 84px; }
}


/* ==========================================================================
   [hidden] RESET
   The UA sheet's [hidden]{display:none} loses to any explicit display, so
   `el.hidden = true` did nothing to flex/grid components. Assert it once.
   ========================================================================== */
[hidden] { display: none !important; }

/* The tab panel is a grid; its row-gap put 25px of dead space between the sticky
   alerts header and the list. The day separators provide the spacing instead. */
#tab-alerts { gap: 0; }

/* ==========================================================================
   DASHBOARD — same shape as the alerts feed
   Each camera card was ~650px (barely 1.3 per screen), most of it a
   "RECORDING IN PROGRESS" placeholder that showed nothing. Collapsed by
   default to a row that reads like an alert; tap to open the viewport.
   The 8-camera grid button in the top bar still gives the wall view.
   ========================================================================== */
.cameras-grid { display: block; }   /* was a multi-column grid; a list of rows now */

.camera-card {
  margin-bottom: 7px !important;
  border-radius: 11px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface) !important;
  overflow: hidden;
}
/* The old status glow ringed the whole card in colour. On a list it reads as
   noise; the dot and the status text already carry the state. */
.camera-card.border-glow-green,
.camera-card.border-glow-red { box-shadow: none !important; }
.camera-card:not(.is-collapsed) { border-color: rgba(245, 220, 78, 0.4) !important; }

.camera-header {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer;
  text-align: left;
}
.camera-header:hover { background: var(--bg-surface-hover) !important; }
.camera-header .indicator-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.camera-header .camera-title { flex: 1 1 auto; min-width: 0; }
.camera-header .camera-title h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.camera-status-text {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.camera-status-text.status-recording { color: var(--color-green); }
.camera-status-text.status-offline { color: var(--color-text-muted); opacity: 0.7; }

.camera-card .alert-caret { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-text-muted); }
.camera-card:not(.is-collapsed) .alert-caret { transform: rotate(180deg); }

/* Collapsed: the row IS the card. */
.camera-card.is-collapsed .camera-viewport,
.camera-card.is-collapsed .camera-actions-row,
.camera-card.is-collapsed .camera-ptz-drawer,
.camera-card.is-collapsed .cam-coverage,
.camera-card.is-collapsed .cam-log-list,
.camera-card.is-collapsed .camera-meta-grid { display: none !important; }

.camera-card:not(.is-collapsed) .camera-viewport { border-top: 1px solid var(--border-color); }

.icon-btn.is-active { color: var(--color-red); border-color: var(--color-red); }

/* The health pill sits in the sticky header now; keep it from stretching. */
.alerts-head .camera-health-pill { flex: 0 0 auto; }
.alerts-head .camera-health-dropdown { margin-top: 8px; }

@media (max-width: 992px) {
  #tab-overview { padding-bottom: 84px; }
}

/* ==========================================================================
   NAV DRAWER — hamburger, off-canvas at every width
   Replaces the 78px icon rail (no room for labels) AND the mobile bottom nav.
   Declared last so it wins over the older .sidebar-nav / .app-layout rules
   without having to hunt every one of them down.
   ========================================================================== */
.app-layout,
.app-layout.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; }

.sidebar-nav {
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 268px !important;
  height: 100vh;
  padding: 14px 12px 18px !important;
  z-index: 1401;
  background: var(--bg-surface) !important;
  border-right: 1px solid var(--border-color) !important;
  justify-content: flex-start !important;
  gap: 4px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.sidebar-nav.is-open { transform: translateX(0); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-scrim.is-open { opacity: 1; }

.sidebar-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  justify-content: flex-start !important;
  padding: 4px 4px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.sidebar-brand .logo-icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--color-red); }
.sidebar-brand-name {
  flex: 1 1 auto;
  font-size: 14px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--color-text-primary);
}

/* The rail forced every item to a centred icon; the drawer has room to read. */
.sidebar-nav .nav-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 11px;
  width: 100%;
  padding: 11px 12px !important;
  border-radius: 9px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
}
.sidebar-nav .nav-item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.sidebar-nav .nav-item .nav-item-text {
  opacity: 1 !important; width: auto !important;
  overflow: visible !important; pointer-events: auto !important;
}
.sidebar-nav .nav-item:hover { background: var(--bg-surface-hover); color: var(--color-text-primary); }
.sidebar-nav .nav-item.active {
  background: rgba(245, 220, 78, 0.12);
  color: var(--color-gold);
  font-weight: 600;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.sidebar-action {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.sidebar-action svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar-action:hover { background: var(--bg-surface-hover); color: var(--color-text-primary); }
.sidebar-action-danger:hover { color: var(--color-red); }
.sidebar-action.spinning svg { animation: spin 0.6s linear; }

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start !important;
}
.sidebar-nav .sidebar-footer .network-badge span:not(.badge-dot) {
  opacity: 1 !important; width: auto !important;
}

/* Header: hamburger + wordmark, nothing else. The actions live in the drawer. */
.hamburger-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.hamburger-btn:hover { color: var(--color-text-primary); border-color: var(--color-red); }
.hamburger-btn svg { width: 17px; height: 17px; }

.app-header {
  display: flex;
  align-items: center;
  padding: 10px 14px !important;
}
.header-brand-logo { display: flex; align-items: center; gap: 11px; }

.mobile-brand-header { padding: 9px 12px !important; }
.mobile-logo-area { display: flex; align-items: center; gap: 11px; }
.mobile-brand-text { display: flex; flex-direction: column; }
.mobile-brand-text h3 { margin: 0; line-height: 1.2; font-size: 15px; }
.mobile-brand-text .creator-tag {
  font-size: 8px; color: var(--color-text-muted); font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.8;
}

@media (max-width: 992px) {
  /* The rail used to be display:none here — as a drawer it must exist at every width. */
  .sidebar-nav { display: flex !important; }
  /* No bottom nav to clear anymore. */
  .main-workspace { padding-bottom: 24px !important; }
  #tab-overview, #tab-alerts { padding-bottom: 24px; }
}
@media (min-width: 993px) {
  .mobile-brand-header { display: none; }
}

/* The global [hidden] rule (0,1,0) LOSES to `.sidebar-nav .nav-item` (0,2,0) even
   though both are !important, so `el.hidden = true` on the Settings tab would do
   nothing. Same trap as the drawer/chips/confirm-field. Match the specificity. */
.sidebar-nav .nav-item[hidden],
.sidebar-actions .sidebar-action[hidden] { display: none !important; }

/* renderCameras() has always emitted .dot-green/.dot-red/.dot-gray, but no rule
   ever defined them — the dot was an invisible 8px gap. Same shape as the
   never-defined --color-teal var: markup referencing CSS that isn't there. */
.camera-header .indicator-dot.dot-green { background: var(--color-green); }
.camera-header .indicator-dot.dot-red { background: var(--color-red); }
.camera-header .indicator-dot.dot-gray { background: var(--color-text-muted); opacity: 0.5; }

/* Real pages, not an ever-growing list: 20 rows, Prev/Next, back to the top on
   a page change. Landing mid-list on a fresh page reads as a broken scroll. */
.alerts-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-surface);
}
.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pager-btn svg { width: 15px; height: 15px; }
.pager-btn:hover:not(:disabled) { border-color: var(--color-red); color: var(--color-red); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-status {
  flex: 1 1 auto;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.pager-range { font-size: 10.5px; font-weight: 500; color: var(--color-text-muted); }

/* ==========================================================================
   DESKTOP — mobile-first, so the wide viewport is the special case
   Without this the phone layout just stretches: a 40px camera row 1348px wide,
   name at the far left and its status 1300px away at the right. Nothing on this
   app wants to be that wide, so cap the measure and centre it.
   ========================================================================== */
@media (min-width: 993px) {
  .main-workspace { padding: 20px 24px 40px !important; }
  .tab-panel,
  .app-header {
    width: 100%;
    max-width: 1080px;
    align-self: center;
  }

  /* Rows this short read better a little roomier when there's space for it. */
  .camera-header { padding: 13px 14px !important; }
  .camera-header .camera-title h4 { font-size: 14.5px; }
  .alerts-head-title { font-size: 20px; }

  /* The one place the width IS worth using: expanded cards sit side by side, so
     opening a second camera doesn't push the first off-screen. */
  .cameras-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
  }
  .camera-card { margin-bottom: 0 !important; }
  /* An expanded card takes the full row — the viewport deserves the width. */
  .camera-card:not(.is-collapsed) { grid-column: 1 / -1; }

  .alerts-pager { max-width: 520px; margin-left: auto; margin-right: auto; }
}

/* Between the phone and a real desktop, one column is still the right answer. */
@media (min-width: 1400px) {
  .tab-panel, .app-header { max-width: 1180px; }
}

/* ==========================================================================
   STATS — meters
   A bare "97%" makes the reader decide whether that is fine. The state word
   decides it, and carries the meaning for anyone who can't separate red from
   green: the colour is never the only signal.
   ========================================================================== */
.meter-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.meter-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.meter-label {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Values wear text tokens, never the status colour — the fill carries identity. */
.meter-value {
  flex: 1 1 auto;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.meter-state {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.meter-state.is-ok { color: var(--color-green); }
.meter-state.is-warning { color: var(--color-yellow); }
.meter-state.is-critical { color: var(--color-red); }
.meter-state.is-unknown { color: var(--color-text-muted); }

/* Recessive track, thin mark, rounded data-end anchored to the baseline. */
.meter-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-text-muted);
  transition: width 0.35s ease;
}
.meter-fill.is-ok { background: var(--color-green); }
.meter-fill.is-warning { background: var(--color-yellow); }
.meter-fill.is-critical { background: var(--color-red); }

/* ==========================================================================
   ADMIN — user directory
   ========================================================================== */
.admin-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 8px 0 14px;
  padding: 9px 11px;
  border-left: 2px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 7px 7px 0;
}
.users-directory { display: flex; flex-direction: column; gap: 10px; }
.user-card {
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-base);
  padding: 12px;
}
.user-card-head { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 220, 78, 0.15);
  color: var(--color-gold);
  font-size: 13px; font-weight: 700;
}
.user-ident { flex: 1 1 auto; min-width: 0; }
.user-email {
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-you {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px; padding: 1px 4px;
}
.user-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.user-badge {
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--border-color);
  color: var(--color-text-muted);
}
.user-badge.is-admin {
  border-color: rgba(245, 220, 78, 0.4);
  color: var(--color-gold);
  background: rgba(245, 220, 78, 0.1);
}
.user-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 11px 0 8px;
}
.user-stats div { text-align: center; padding: 7px 2px; border-radius: 7px; background: var(--bg-surface); }
.user-stats b {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.user-stats span { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); }
.user-meta { font-size: 10.5px; color: var(--color-text-muted); margin-bottom: 10px; }
.user-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.user-btn {
  flex: 1 1 auto;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--color-text-secondary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.user-btn:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.user-btn-danger:hover:not(:disabled) { color: var(--color-red); border-color: var(--color-red); }
.user-btn:disabled { opacity: 0.35; cursor: default; }

/* ==========================================================================
   ADMIN — system logs
   ========================================================================== */
.log-controls { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; }
.log-search, .log-select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-primary);
  font-size: 13px;
}
.log-selects { display: flex; gap: 8px; }
.log-selects .log-select { flex: 1 1 0; min-width: 0; }
.log-search:focus, .log-select:focus { outline: none; border-color: var(--border-focus); }

.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-row {
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-base);
  padding: 9px 11px;
}
.log-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.log-badge {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border-color);
  color: var(--color-text-muted);
}
.log-badge.tone-ok { color: var(--color-green); border-color: rgba(48, 163, 108, 0.35); }
.log-badge.tone-bad { color: var(--color-red); border-color: rgba(229, 72, 77, 0.35); }
.log-badge.tone-warn { color: var(--color-yellow); border-color: rgba(255, 178, 36, 0.35); }
.log-time {
  flex: 1 1 auto; text-align: right;
  font-size: 10.5px; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.log-details { font-size: 12.5px; color: var(--color-text-primary); line-height: 1.45; word-break: break-word; }
.log-meta { font-size: 10.5px; color: var(--color-text-muted); margin-top: 4px; }
.log-anon { font-style: italic; opacity: 0.75; }
.log-ip { font-variant-numeric: tabular-nums; }

@media (min-width: 993px) {
  .log-controls { flex-direction: row; }
  .log-search { flex: 2 1 0; }
  .log-selects { flex: 3 1 0; }
  .users-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   AI ASSISTANT
   The tab was two panels competing for one screen: a chat whose log was a void,
   and a Daily Summary card below it. Now one column — sticky header, log, then
   the composer — with the summary folded away until asked for.
   ========================================================================== */
.ai-head { margin-bottom: 0; }
.ai-chat-panel {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: visible !important;
}

.ai-engine-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--color-text-muted);
}

.ai-chat-log {
  flex: 1 1 auto;
  max-height: none !important;
  min-height: 220px;
  overflow-x: hidden !important;   /* a chat log has no business scrolling sideways */
  padding: 12px !important;
  margin-top: 0 !important;
}

.ai-chat-composer {
  position: sticky;
  bottom: 0;
  padding: 10px 12px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 11px 11px;
}

/* Wrap. A hidden-scrollbar nowrap strip is an invisible affordance: it silently
   ate 4 of the 7 chips (this is the same bug the alerts filter strip had). */
.ai-chat-composer .ai-search-chips {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  margin-bottom: 10px;
}
.ai-chat-composer .ai-chip { flex: 0 1 auto; white-space: normal; }
.ai-chat-panel.has-conversation .ai-search-chips { display: none; }

.ai-chip {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.ai-chip:hover { border-color: var(--color-red); color: var(--color-text-primary); }

.ai-chat-form { gap: 8px; }
.ai-search-input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-primary);
  font-size: 14px;   /* < 16px makes iOS zoom the whole page on focus */
}
.ai-search-input:focus { outline: none; border-color: var(--border-focus); }

/* Summary: present, but not competing with the chat for the first screen. */
.ai-summary-details {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-surface);
  overflow: hidden;
}
.ai-summary-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-primary);
  list-style: none;
}
.ai-summary-summary::-webkit-details-marker { display: none; }
.ai-summary-summary .alert-caret { width: 15px; height: 15px; color: var(--color-text-muted); }
.ai-summary-details[open] .alert-caret { transform: rotate(180deg); }
.ai-summary-body { padding: 0 12px 12px; border-top: 1px solid var(--border-color); }
.ai-summary-controls {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; padding-top: 12px;
}
.ai-search-range {
  flex: 1 1 150px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--color-text-primary);
  font-size: 13px;
}

@media (min-width: 993px) {
  .ai-chat-log { min-height: 380px; }
}

/* Header buttons are icons; only the wrap was stretching to fill the row. */
.ai-history-wrap { flex: 0 0 auto; position: relative; }

/* ==========================================================================
   SURFACES — solid, and never frosted over a camera feed
   This layer used to set --glass-blur: blur(16px); on a box already at ~96% CPU that is
   not affordable, and the console reads better solid. The scoping below is
   kept so the camera rule still holds if glass is ever reintroduced.
   ========================================================================== */
:root { --glass-blur: blur(16px); }

.app-header,
.mobile-brand-header,
.alerts-head,
.sidebar-nav,
.drawer,
.alerts-pager {
  background: var(--bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Chrome that sits above the scrolling feed needs the blur to have something to
   do; without a sticky context it just costs. */
.alerts-head { position: sticky; top: 0; z-index: 20; }

/* THE CAMERA RULE. A card holding a live feed gets NO backdrop-filter: it would
   blur the video behind it every frame, and a viewport is meant to be looked
   through, not frosted. Solid surfaces only, at every level that could overlap.
   Keep this list in sync with anything new that can contain a <video>. */
.camera-card,
.camera-card *,
.camera-viewport,
.camera-viewport *,
#sevenGridOverlay,
#sevenGridOverlay *,
.video-modal,
.video-modal *,
.ai-msg-bubble img,
.alert-detail img {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* An expanded camera card must stay opaque — a translucent card over a feed
   shows the feed through its own chrome. */
.camera-card { background: var(--bg-surface) !important; }
.camera-viewport { background: #000 !important; }

.ai-chat-composer {
  background: var(--bg-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Respect the user's own call: if they've asked for less motion/effects, or the
   device can't composite this cheaply, drop to matte rather than stutter. */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  :root { --glass-blur: blur(16px); }
  .app-header, .mobile-brand-header, .alerts-head, .sidebar-nav,
  .drawer, .alerts-pager, .ai-chat-composer { background: var(--bg-surface); }
}

/* ==========================================================================
   HAULIX CONSOLE — desktop operations layout
   The app was mobile-first everywhere: an off-canvas drawer at every width and
   a 1180px cap, which on a wide screen read as a phone stretched onto a
   desktop (dead black gutters, no persistent nav). Haulix is the opposite — a
   fixed icon rail and a full-bleed, data-dense console.

   Scoped to >=1100px on purpose: the phone layout is already right and is left
   completely untouched. Everything here is CSS over existing markup — no DOM
   or JS changes, so there is nothing to break in the live-feed path.
   ========================================================================== */
@media (min-width: 1100px) {

  /* ---- 1. Persistent icon rail (was an off-canvas 268px drawer) ---- */
  .sidebar-nav {
    transform: none !important;        /* was translateX(-100%) */
    width: 60px !important;
    padding: 12px 8px 14px !important;
    gap: 6px;
    overflow: visible !important;      /* let the hover labels escape the rail */
    z-index: 40 !important;            /* under modals; it no longer overlays */
    background: var(--bg-sidebar) !important;
    align-items: center !important;
  }
  /* A fixed rail has nothing to dismiss, so the scrim, the close button and the
     mobile brand bar all stop making sense. */
  .drawer-scrim, .mobile-brand-header,
  .sidebar-nav [aria-label="Close menu"] { display: none !important; }

  .sidebar-nav .sidebar-brand-name,
  .sidebar-nav .brand-text,
  .sidebar-nav .version-badge,
  .sidebar-nav .user-identity,
  .sidebar-nav .network-badge span:not(.badge-dot) { display: none !important; }

  .sidebar-brand { justify-content: center !important; margin-bottom: 10px; width: 100%; }
  .sidebar-brand .logo-icon { width: 38px !important; height: 38px !important; }

  .nav-menu, .sidebar-actions, .sidebar-footer {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  /* Utility actions sink to the bottom behind a hairline, like Haulix's
     help/settings cluster. */
  .sidebar-actions, .sidebar-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 10px !important;
    margin-top: 0 !important;
  }
  .sidebar-actions { margin-top: auto !important; }

  .sidebar-nav .nav-item,
  .sidebar-actions button,
  .sidebar-footer button {
    width: 40px !important; height: 40px !important;
    padding: 0 !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
    border-radius: 11px;
    position: relative;
    overflow: visible !important;
  }
  .sidebar-nav .nav-item svg { width: 18px; height: 18px; }

  /* The label is relocated, not deleted: it flies out on hover. Keeping the
     real text in the DOM (rather than a ::after + data-label) means screen
     readers still announce each item and no JS has to stamp an attribute.
     opacity needs !important — an earlier rule pins .nav-item-text to
     opacity:1 !important, which silently defeated the plain declaration. */
  .sidebar-nav .nav-item .nav-item-text,
  .sidebar-actions button span:not(.badge-dot) {
    position: absolute !important;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 9px;
    border-radius: 7px;
    background: #202126;
    border: 1px solid var(--border-color);
    color: var(--color-text-primary) !important;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 60;
    width: auto !important;
    overflow: visible !important;
    transition: opacity var(--transition-fast);
  }
  .sidebar-nav .nav-item:hover .nav-item-text,
  .sidebar-nav .nav-item:focus-visible .nav-item-text,
  .sidebar-actions button:hover span:not(.badge-dot) { opacity: 1 !important; }

  /* ---- 2. Full-bleed content ----
     The 1180px cap is what left ~800px of dead black gutter on a wide screen. */
  .tab-panel, .app-header {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .app-layout, .app-layout.sidebar-collapsed {
    display: block !important;
    padding-left: 60px;              /* clear the fixed rail */
  }
  /* Content sits flush on the console ground — no panel-within-a-panel. */
  .tab-panel {
    padding: 0 26px 26px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  body, .app-layout { background: var(--bg-base) !important; }

  /* The rail carries the brand, so the old header bar is redundant. */
  .app-header { display: none !important; }

  /* ---- 3. Page header: title + status pill, Haulix's opening move ---- */
  .alerts-head {
    background: transparent !important;
    border: 0 !important;
    padding: 22px 0 14px !important;
    position: static !important;
  }
  .alerts-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .alerts-head-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: var(--color-text-primary) !important;
  }
  /* The count stops being an aside and becomes a status chip — the nearest
     thing to Haulix's KPI pills, built from data already on screen. It must
     hug its text (it defaults to flex:1) and drop the "· " separator. */
  .alerts-count {
    flex: 0 0 auto !important;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--color-text-secondary) !important;
    font-size: 11.5px;
    font-weight: 650;
  }
  .alerts-count:not(:empty)::before { content: none !important; }
  .alerts-head-row .icon-btn { margin-left: auto; }

  /* ---- 4. Density: a console reads as rows of data, not roomy cards ---- */
  .cameras-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Checkbox row inside the camera editor: the label wraps the input so the whole
   row is a hit target, which matters most on a phone. */
.form-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.form-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color-gold);
  cursor: pointer;
}

/* ===================== AI TAB — SaaS refinement (2026-07-18) =====================
   Quiet card surfaces, one accent, generous whitespace. All colors come from the
   :root tokens; the lime theme stays the single source of truth. */

/* Chat surface */
.ai-chat-panel { padding: 0; overflow: hidden; border-radius: 14px; }
.ai-head { padding: 13px 18px 12px; border-bottom: 1px solid var(--border-color); }
.ai-head .alerts-head-row { margin: 0; }
.ai-head .alerts-head-title { font-size: 14px; font-weight: 800; letter-spacing: 0.01em; }
.ai-engine-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color); border-radius: 999px; padding: 3px 9px;
}
.ai-chat-panel .ai-chat-log { padding: 18px; }
.ai-msg-bubble {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border-color);
  border-radius: 12px; border-bottom-left-radius: 12px;
  font-size: 13px; line-height: 1.55; max-width: 82%;
  padding: 10px 14px; box-shadow: none;
}
.ai-msg-assistant .ai-msg-bubble { border-bottom-left-radius: 4px; }
.ai-msg-user .ai-msg-bubble {
  background: var(--color-gold); color: var(--color-accent-ink);
  border-color: transparent; border-bottom-right-radius: 4px;
}
.ai-msg-user .ai-msg-bubble em { color: inherit; }

/* Composer */
.ai-chat-composer { padding: 12px 16px 16px; border-top: 1px solid var(--border-color); }
.ai-search-chips { margin-bottom: 10px; }
.ai-chip {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  background: transparent; border: 1px solid var(--border-color);
  border-radius: 999px; padding: 5px 11px; transition: all var(--transition-fast);
}
.ai-chip:hover { color: var(--color-text-primary); border-color: var(--color-gold); background: rgba(245, 220, 78, 0.06); }
.ai-chat-form {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 4px 4px 4px 6px; transition: border-color var(--transition-fast);
}
.ai-chat-form:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-glow-cyan); }
.ai-chat-form .ai-search-input {
  flex: 1; background: transparent; border: none; outline: none; box-shadow: none;
  font-size: 13px; padding: 8px 6px;
}
.ai-send-btn { height: 34px; border-radius: 9px; }
.ai-photo-btn {
  background: transparent; border: none; color: var(--color-text-muted);
  width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.ai-photo-btn:hover { color: var(--color-gold); background: rgba(245, 220, 78, 0.08); }
.ai-photo-btn svg { width: 17px; height: 17px; }

/* Result cards (chat + report share these) */
.ai-result-card {
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-color);
  border-radius: 10px; overflow: hidden;
}
.ai-result-card.playable:hover { border-color: var(--color-gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Daily report container */
.ai-summary-details {
  margin-top: 16px; background: var(--bg-surface);
  border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
}
.ai-summary-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 800; color: var(--color-text-primary); letter-spacing: 0.01em;
}
.ai-summary-summary::-webkit-details-marker { display: none; }
.ai-summary-summary .alert-caret { width: 16px; height: 16px; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.ai-summary-details[open] .alert-caret { transform: rotate(180deg); }
.ai-summary-body { padding: 0 18px 18px; }
.ai-summary-controls { padding: 2px 0 4px; }

/* Report internals */
.ai2-report { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.ai2-report-date {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-text-muted);
}
.ai2-report-headline { font-size: 14px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; margin: 6px 0 4px; }
.ai2-report-cov { font-size: 11px; font-family: var(--font-mono); color: var(--color-text-muted); }
.ai2-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ai2-kpi {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 13px 14px;
}
.ai2-kpi-value { font-size: 21px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ai2-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
.ai2-section-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-text-secondary); margin-bottom: 8px;
}
.ai2-dist { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ai2-bar-row { display: grid; grid-template-columns: minmax(64px, 32%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; }
.ai2-bar-name { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai2-bar-track { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.ai2-bar-fill { height: 100%; border-radius: 4px; background: var(--color-gold); opacity: 0.85; }
.ai2-bar-val { font-size: 11px; font-family: var(--font-mono); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ai2-timeline { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.ai2-timeline .ai2-tl-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0;
  border: none; border-bottom: 1px solid var(--border-color); border-radius: 0;
  background: transparent; cursor: pointer;
}
.ai2-timeline .ai2-tl-row:last-child { border-bottom: none; }
.ai2-timeline .ai2-tl-row:hover { background: var(--bg-surface-hover); }
.ai2-tl-thumb {
  width: 64px; height: 44px; object-fit: cover; flex: none;
  border-radius: 8px; border: 1px solid var(--border-color); background: #000;
}
.ai2-tl-thumb-empty { background: rgba(255, 255, 255, 0.04); }
.ai2-tl-body { min-width: 0; }
.ai2-tl-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai2-tl-time { font-size: 11px; font-family: var(--font-mono); color: var(--color-gold); }
.ai2-tl-cam { font-size: 11.5px; font-weight: 700; color: var(--color-text-secondary); }
.ai2-tl-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.ai2-empty { font-size: 12px; color: var(--color-text-muted); padding: 6px 0 10px; }

@media (max-width: 768px) {
  .ai2-dist { grid-template-columns: 1fr; gap: 14px; }
  .ai2-kpi-value { font-size: 18px; }
  .ai-msg-bubble { max-width: 92%; }
}

/* ============== VAULT + SETTINGS — SaaS refinement (2026-07-18) ==============
   Same language as the AI tab: quiet bordered cards, uppercase micro-labels,
   hairline tables, one accent. Only theme tokens. */

/* ---- Vault ---- */
.recordings-vault { padding: 20px; border-radius: 14px; }
.vault-header h2 { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; margin: 0; }
.vault-desc { font-size: 12px; color: var(--color-text-muted); margin: 4px 0 0; }
.filter-form {
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 14px; gap: 12px; margin: 16px 0;
}
.filter-form label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); margin-bottom: 5px;
}
.filter-form select, .filter-form input {
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 9px; font-size: 12.5px; padding: 8px 10px;
  transition: border-color var(--transition-fast);
}
.filter-form select:focus, .filter-form input:focus {
  border-color: var(--border-focus); box-shadow: var(--shadow-glow-cyan); outline: none;
}
.recordings-table th, .settings-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted); padding: 9px 12px;
  border-bottom: 1px solid var(--border-color); background: transparent;
}
.recordings-table td, .settings-table td {
  font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border-color);
}
.recordings-table tbody tr:hover, .settings-table tbody tr:hover { background: var(--bg-surface-hover); }
.pagination-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding: 12px 2px 2px; border-top: 1px solid var(--border-color);
}
.pagination-info { font-size: 11px; font-family: var(--font-mono); color: var(--color-text-muted); }
.pagination-buttons { display: flex; gap: 8px; }
.pagination-buttons .btn { padding: 6px 12px; font-size: 11px; border-radius: 8px; }

/* ---- Status badges (vault table + clip lists) ---- */
.cam-log-status-badge, .table-status-uploaded, .table-status-pending, .table-status-failed {
  border-radius: 999px; padding: 2.5px 9px; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---- Settings: sub-tab nav as a segmented control ---- */
.settings-subtabs-nav { padding: 6px; gap: 4px; border-radius: 12px; }
.subtab-btn {
  border-radius: 9px; padding: 8px 13px; font-size: 12px; font-weight: 600;
  color: var(--color-text-muted); border: 1px solid transparent; background: transparent;
}
.subtab-btn:hover { color: var(--color-text-primary); background: var(--bg-surface-hover); box-shadow: none; }
.subtab-btn.active {
  color: var(--color-gold); background: rgba(245, 220, 78, 0.07);
  border-color: rgba(245, 220, 78, 0.25); box-shadow: none;
}
.subtab-btn svg, .subtab-btn.active svg { width: 14px; height: 14px; stroke: currentColor; }

/* ---- Settings cards ---- */
.system-settings-card { border-radius: 14px; padding: 20px; border: 1px solid var(--border-color); }
.system-settings-card h3 { font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
.section-desc { font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.form-input-box label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.form-input-box input, .form-input-box select,
.log-search, .log-select {
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color);
  border-radius: 9px; font-size: 12.5px; padding: 8px 10px; color: var(--color-text-primary);
  transition: border-color var(--transition-fast);
}
.form-input-box input:focus, .form-input-box select:focus,
.log-search:focus, .log-select:focus {
  border-color: var(--border-focus); box-shadow: var(--shadow-glow-cyan); outline: none;
}
.input-helper-text { font-size: 11px; color: var(--color-text-muted); }

/* ---- Diagnostics: storage + metrics like the report KPIs ---- */
.storage-info .progress-bar-container {
  height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06);
  overflow: hidden; box-shadow: none;
}
.storage-info .progress-bar { background: var(--color-gold); border-radius: 4px; box-shadow: none; }
.storage-metrics { gap: 10px; margin-top: 14px; }
.metric-col {
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 12px 14px;
}
.metric-val { font-size: 17px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.metric-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
.info-row {
  font-size: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border-color);
  background: transparent; border-radius: 0;
}
.info-row:last-child { border-bottom: none; }
.info-row .info-label { color: var(--color-text-muted); }
.info-row .stats-text { font-family: var(--font-mono); font-size: 11.5px; }

/* Report-in-chat + collapsible vault filters (2026-07-18b) */
.ai2-report-chat { margin-top: 12px; gap: 14px; }
.ai-msg-bubble:has(.ai2-report-chat) { max-width: 100%; width: 100%; }
.ai2-report-chat .ai2-kpi { padding: 10px 12px; }
.ai2-report-chat .ai2-kpi-value { font-size: 18px; }
.vault-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.filter-form:not(.open) { display: none; }
#vaultFilterBtn.is-active { color: var(--color-gold); background: rgba(245, 220, 78, 0.08); }



/* --- PREMIUM MONOCHROME REDESIGN OVERRIDES --- */
:root {
  /* Enforce Black, White, and Silver Color Theme */
  --bg-base: #000000 !important;
  --bg-sidebar: #000000 !important;
  --bg-surface: rgba(16, 16, 18, 0.85) !important;
  --bg-surface-hover: rgba(32, 32, 34, 0.95) !important;
  --border-color: rgba(255, 255, 255, 0.12) !important;
  --border-focus: #ffffff !important;
  
  --color-text-primary: #ffffff !important;
  --color-text-secondary: #e2e8f0 !important;
  --color-text-muted: #8e9aa8 !important;
  --color-silver: #c0c0c0 !important;
  
  --color-cyan: #ffffff !important;
  --color-gold: #c0c0c0 !important;
  --color-purple: #888888 !important;
  --color-teal: #e2e8f0 !important;
  
  --color-green: #ffffff !important;   /* White for active/online */
  --color-yellow: #a1a1aa !important;  /* Light gray/silver for warnings */
  --color-red: #ffffff !important;     /* White/silver for alert/recording */
  
  /* Shadow & Glow System overrides (no colors except white/silver/gray) */
  --shadow-glow-cyan: 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  --shadow-glow-purple: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  --shadow-glow-green: 0 0 18px -6px rgba(255, 255, 255, 0.4) !important;
  --shadow-glow-yellow: 0 0 18px -6px rgba(161, 161, 170, 0.4) !important;
  --shadow-glow-red: 0 0 22px -4px rgba(255, 255, 255, 0.5) !important;
  --shadow-lg: 0 12px 40px rgba(255, 255, 255, 0.08) !important;
  --glass-blur: blur(20px) !important;
}

body, .glow-bg {
  background: radial-gradient(circle at top left, #121214 0%, #000000 100%) !important;
}

.glass-panel, .camera-card, .system-stats-card, .tab-panel, .ai-chat-log, .auth-card {
  background: var(--bg-surface) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  border-radius: 16px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.camera-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.camera-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Completely hide the sidebar navigation drawer & scrim */
.sidebar-nav, .nav-scrim, .hamburger-btn, #navCloseBtn {
  display: none !important;
}

/* Remove the sidebar column from the grid */
.app-layout {
  grid-template-columns: 1fr !important;
  display: block !important;
}

/* Enforce permanent bottom navigation on all screens */
body.app-authed .mobile-nav {
  display: flex !important;
}

/* Floating centered nav dock on desktop, full width on mobile */
.mobile-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 800px !important;
  height: calc(64px + env(safe-area-inset-bottom)) !important;
  background: rgba(10, 10, 12, 0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: none !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -10px 45px rgba(0, 0, 0, 0.95) !important;
  z-index: 1000 !important;
  justify-content: space-around !important;
  align-items: stretch !important;
}

@media (max-width: 768px) {
  .mobile-nav {
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* Style bottom nav items */
.mobile-nav-item {
  color: #8e9aa8 !important;
}
.mobile-nav-item svg {
  color: #8e9aa8 !important;
}
.mobile-nav-item:hover, .mobile-nav-item:focus {
  color: #ffffff !important;
}
.mobile-nav-item:hover svg {
  color: #ffffff !important;
}
.mobile-nav-item.active {
  color: #ffffff !important;
}
.mobile-nav-item.active svg {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) !important;
}

/* tab-container bottom padding to not hide behind bottom nav */
body.app-authed .tab-container {
  padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

/* AI assistant full-viewport layout */
body:has(#tab-ai.active) .main-workspace {
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body:has(#tab-ai.active) .app-header {
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body:has(#tab-ai.active) .tab-container {
  flex: 1 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important; /* Managed by composer padding */
}

#tab-ai.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  gap: 0 !important;
}

.ai-chat-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ai-chat-panel .ai-head {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-color) !important;
  background: rgba(10, 10, 12, 0.5) !important;
}

.ai-chat-panel .ai-chat-log {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: none !important;
  padding: 24px !important;
}

.ai-chat-composer {
  flex: none !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 16px 20px calc(16px + 64px + env(safe-area-inset-bottom)) !important; /* anchors perfectly above bottom nav */
  background: rgba(10, 10, 12, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.ai-chat-form {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
}

.ai-chat-form:focus-within {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

.ai-chat-form .ai-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px !important;
}

.ai-chat-form .ai-search-input:focus {
  box-shadow: none !important;
}

/* Micro-animations */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.loading-state div {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 2s infinite linear !important;
}

.progress-bar-container {
  background: rgba(0,0,0,0.4) !important;
  border-radius: 20px !important;
  overflow: hidden;
  height: 12px !important;
  border: 1px solid rgba(255,255,255,0.08);
}

.progress-bar {
  background: linear-gradient(90deg, #c0c0c0, #ffffff) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.4) !important;
  transition: width 1s ease-in-out !important;
}

button {
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s !important;
}
button:active {
  transform: scale(0.95) !important;
}
button:hover {
  filter: brightness(1.2);
}

.metric-data h3 {
  font-family: var(--font-mono) !important;
  color: #ffffff !important;
  text-shadow: 0 0 15px rgba(255,255,255,0.3) !important;
}

/* AI Chat Polished Bubbles */
.ai-msg-bubble {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px 12px 12px 2px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  border-radius: 12px 12px 2px 12px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Premium Login Screen */
.auth-overlay {
  background: radial-gradient(circle at center, rgba(10,10,12,0.95) 0%, rgba(0,0,0,0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
}

.auth-card {
  background: rgba(20, 20, 22, 0.75) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  border-radius: 24px !important;
}

.auth-btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important;
  color: #000000 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.auth-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.45) !important;
}

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}
tr {
  background: rgba(255,255,255,0.02) !important;
  transition: transform 0.2s, background 0.2s !important;
}
tr:hover {
  background: rgba(255,255,255,0.05) !important;
  transform: scale(1.01) !important;
}
td {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
td:first-child {
  border-left: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 8px 0 0 8px !important;
}
td:last-child {
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Forms */
input, select, textarea {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #fff !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2) !important;
  outline: none !important;
}

/* Camera Card Status Strips */
.camera-card {
  position: relative;
  overflow: hidden;
}
.camera-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: #c0c0c0;
  opacity: 0.8;
  box-shadow: 0 -2px 10px rgba(255,255,255,0.3);
}
.camera-card.status-recording::after {
  background: #ffffff !important;
  box-shadow: 0 -2px 12px rgba(255,255,255,0.85) !important;
  animation: pulseRecording 1.5s infinite !important;
}
.camera-card.status-offline::after {
  background: #555555 !important;
  box-shadow: none !important;
}

/* Tab transitions */
@keyframes premiumFadeInScale {
  0% { opacity: 0; transform: translateY(15px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.tab-panel.active, .subtab-panel.active {
  animation: premiumFadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Beautiful Stats */
.metric-item {
  background: linear-gradient(145deg, rgba(20,20,22,0.9), rgba(10,10,12,0.7)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  padding: 20px !important;
}
.metric-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255,255,255,0.3) !important;
}

.system-stats-card {
  border-radius: 24px !important;
  background: rgba(16,16,18,0.75) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.85) !important;
}

.stats-card-header h4 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #ffffff, #c0c0c0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Fix text colors */
.color-text-primary, h1, h2, h3, h4, p {
  color: #e2e8f0 !important;
}

/* Advanced Forms */
input[type="text"], input[type="email"], input[type="password"] {
  background: rgba(10, 10, 12, 0.6) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4) !important;
}
input:focus {
  background: rgba(20, 20, 22, 0.8) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 0 3px rgba(255,255,255,0.2) !important;
}

/* Heatmap container */
.activity-heatmap {
  background: rgba(0,0,0,0.4) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Elegant badges */
.badge-dot {
  box-shadow: 0 0 10px currentColor !important;
}

/* Premium modals */
.modal-overlay {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(16px) !important;
}
.modal-content {
  background: rgba(20, 20, 22, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.9) !important;
  border-radius: 24px !important;
  animation: premiumFadeInScale 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Login inputs */
.auth-field input {
  font-size: 1rem !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
}

/* Layout structural fixes */
.cameras-grid {
  gap: 24px !important;
  padding: 16px !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4) !important;
}

/* Aspect ratio for camera cards */
.camera-card {
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Beautiful thumbnail areas */
.camera-card .thumb, .camera-card video {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Info overlay on camera cards */
.camera-card .card-info, .camera-card .camera-meta {
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%) !important;
  padding: 16px !important;
  width: 100% !important;
  margin: 0 !important;
}