@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ============================================
     CENTRAAL KLEUREN SYSTEEM — Ops Status App
     Structureel identiek aan Taxi CDT App,
     Originele donkerblauwe kleurschema behouden
     ============================================ */

  /* === CDT PRIMAIRE KLEUREN (identiek aan app) === */
  --cdt-blue-primary: #3b82f6;
  --cdt-blue-shade: #2563eb;
  --cdt-blue-tint: #60a5fa;
  --cdt-blue-light: #dbeafe;
  --cdt-blue-very-light: rgba(59, 130, 246, 0.08);

  /* === GRADIENT === */
  --cdt-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --cdt-gradient-reverse: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);

  /* === BACKGROUNDS (Originele donkerblauwe tonen) === */
  --cdt-bg-primary: #0b1220;
  --cdt-bg-card: #0b1220;
  --cdt-bg-elevated: #1e293b;
  --cdt-bg-input: #0f172a;
  --cdt-bg-hover: #1e293b;

  /* === LIGHT ALIASES (static, for references) === */
  --cdt-light-bg-primary: #f0f2f5;
  --cdt-light-bg-card: #ffffff;
  --cdt-light-bg-elevated: #f8f9fa;
  --cdt-light-bg-input: #ffffff;
  --cdt-light-bg-hover: #f5f6f7;

  /* === TEXT KLEUREN (Origineel) === */
  --cdt-text-primary: #e2e8f0;
  --cdt-text-secondary: #cbd5f5;
  --cdt-text-muted: #94a3b8;
  --cdt-text-disabled: #64748b;

  /* === LIGHT TEXT ALIASES === */
  --cdt-light-text-primary: #1f2937;
  --cdt-light-text-secondary: #6b7280;
  --cdt-light-text-muted: #9ca3af;
  --cdt-light-text-disabled: #d1d5db;

  /* === BORDERS (Origineel) === */
  --cdt-border: rgba(255, 255, 255, 0.08);
  --cdt-border-strong: rgba(255, 255, 255, 0.16);
  --cdt-light-border: #e5e7eb;
  --cdt-light-border-strong: #d1d5db;

  /* === STATUS KLEUREN (identiek aan app) === */
  --cdt-success: #10b981;
  --cdt-warning: #f59e0b;
  --cdt-error: #ef4444;
  --cdt-info: #3b82f6;

  /* === MODAL SPECIFIEK === */
  --cdt-modal-overlay: rgba(0, 0, 0, 0.5);
  --cdt-modal-bg: #0f172a;
  --cdt-modal-content-bg: #0b1220;

  /* === DESIGN TOKENS (Originele donkerblauwe tonen) === */
  --bg: #0b1220;
  --surface: #0f172a;
  --surface-2: #1e293b;
  --surface-3: #1e293b;
  --surface-hover: rgba(18, 35, 74, 0.58);
  --text: #e2e8f0;
  --text-secondary: #cbd5f5;
  --text-muted: #94a3b8;
  --primary: #3b82f6;
  --primary-contrast: #ffffff;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --divider: rgba(255, 255, 255, 0.06);

  /* === ACCENT COLORS (identiek aan app) === */
  --accent-green: #22c55e;
  --accent-blue: #3b82f6;
  --accent-orange: #f97316;
  --accent-red: #ef4444;
  --accent-purple: #a855f7;
  --accent-cyan: #06b6d4;
  --accent-yellow: #eab308;
  --accent-pink: #ec4899;

  /* === PERSOONLIJKE ADMIN SHORTHAND VARS (dark mode defaults) === */
  --blue: #3b82f6;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --cyan: #06b6d4;
  --purple: #a855f7;
  --dim: rgba(255,255,255,0.45);
  --card: rgba(255,255,255,0.04);
  --card2: rgba(255,255,255,0.06);
  --card3: rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.12);
  --radius: 10px;
  --glow: 0 0 20px rgba(59,130,246,0.08);

  /* === STATUS === */
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f97316;
  --info: #3b82f6;

  /* === SHADOWS (Origineel) === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.35);

  /* === RADIUS (identiek aan app) === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* === SPACING (identiek aan app) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* === TYPOGRAPHY (identiek aan app) === */
  --font-xs: 0.75rem;
  --font-sm: 0.8125rem;
  --font-base: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.75rem;

  /* === INPUT TOKENS (Origineel) === */
  --input-bg: rgba(15, 23, 42, 0.8);
  --input-border: rgba(148, 163, 184, 0.2);
  --input-text: #e2e8f0;
  --input-placeholder: #94a3b8;
  --input-focus-ring: rgba(59, 130, 246, 0.4);

  /* === TESLA ALIASES (Originele kleuren) === */
  --tesla-black: #0f1420;
  --tesla-dark-gray: #0f172a;
  --tesla-medium-gray: #1e293b;
  --tesla-light-gray: #1e293b;
  --tesla-card-bg: rgba(15, 23, 42, 0.92);
  --tesla-header-bg: var(--cdt-blue-primary);
  --tesla-header-gradient: linear-gradient(135deg, var(--cdt-blue-shade) 0%, var(--cdt-blue-primary) 100%);
  --tesla-blue: #3b82f6;
  --tesla-blue-hover: #2563eb;
  --tesla-blue-light: rgba(59, 130, 246, 0.12);
  --tesla-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  --tesla-text-primary: #e2e8f0;
  --tesla-text-secondary: #cbd5f5;
  --tesla-text-muted: #94a3b8;
  --tesla-border: rgba(255, 255, 255, 0.08);
  --tesla-border-strong: rgba(255, 255, 255, 0.16);
  --tesla-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --tesla-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.3);
  --tesla-shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.35);

  --tesla-success: #34d399;
  --tesla-success-light: rgba(52, 211, 153, 0.12);
  --tesla-warning: #fbbf24;
  --tesla-warning-light: rgba(251, 191, 36, 0.12);
  --tesla-danger: #f87171;
  --tesla-danger-light: rgba(248, 113, 113, 0.12);

  /* === LAYOUT (identiek aan app) === */
  --sidebar-width: 246px;
  --sidebar-collapsed-width: 70px;
  --global-header-height: 52px;
  --cdt-global-header-height: 52px;
  --transition-speed: 0.2s;
  --cdt-content-max: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

ion-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}

body {
  margin: 0;
  font-family: "Inter", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
  color: var(--tesla-text-primary);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(59, 130, 246, 0.22), transparent 50%),
    radial-gradient(900px 600px at 100% 0%, rgba(14, 165, 233, 0.2), transparent 45%),
    linear-gradient(145deg, #0b1220, #0c2b5a, #0b3c6d);
  min-height: 100dvh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.tesla-settings-container {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100dvh;
  min-height: 0;
  background: transparent;
  overflow: hidden;
}

.tesla-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
  border-right: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  opacity: 0;
  transition: width var(--transition-speed) ease, opacity 0.12s ease;
  position: sticky;
  top: 0;
  height: 100dvh;
  box-shadow: 2px 0 16px rgba(30,58,138,0.4);
  overflow: hidden;
  z-index: 20;
  min-height: 0;
}

.tesla-sidebar[data-initiated] {
  opacity: 1;
}

.tesla-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.sidebar-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.1px;
  color: #ffffff;
  line-height: 1;
}

.sidebar-collapse-btn {
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}

.sidebar-collapse-btn .toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.tesla-sidebar.collapsed .sidebar-collapse-btn .toggle-icon,
.tesla-sidebar.sidebar-open .sidebar-collapse-btn .toggle-icon {
  transform: rotate(180deg);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ── Sidebar search ── */
.sidebar-search-wrap {
  padding: 8px 10px 6px;
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-search-wrap input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 6px 30px 6px 10px;
  outline: none;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-search-wrap input::placeholder { color: rgba(255,255,255,0.5); }
.sidebar-search-wrap input:focus {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.45);
}
.sidebar-search-clear {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 2px;
  display: none;
  line-height: 1;
}
.sidebar-search-clear.visible { display: flex; align-items: center; }
.sidebar-search-clear:hover { color: #fff; }
.tesla-sidebar.collapsed .sidebar-search-wrap { display: none; }

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-category {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 13.5px;
  font-weight: 500;
  min-height: 36px;
  position: relative;
  cursor: pointer;
  letter-spacing: -0.1px;
}

.sidebar-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.sidebar-nav-badge.show {
  display: inline-flex;
}

.tesla-sidebar.collapsed .sidebar-category {
  justify-content: center;
  padding: 8px;
  width: 42px;
  margin: 0 auto;
}

.sidebar-category:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.sidebar-category.active {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
}

.sidebar-category ion-icon {
  font-size: 18px;
  min-width: 18px;
  min-height: 18px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

.sidebar-category.active ion-icon {
  color: #ffffff;
}

.menu-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

.menu-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fallback-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.30);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-category:hover ion-icon,
.sidebar-category:hover .menu-icon {
  color: #ffffff;
}
.sidebar-category.active ion-icon,
.sidebar-category.active .menu-icon {
  color: #ffffff;
}

.sidebar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.tesla-sidebar.collapsed .sidebar-label,
.tesla-sidebar.collapsed .sidebar-title {
  display: none;
}

.tesla-sidebar.collapsed .sidebar-category::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(5, 15, 34, 0.96);
  color: #dbeafe;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1200;
}

.tesla-sidebar.collapsed .sidebar-category:hover::after {
  opacity: 1;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.sidebar-logout {
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.sidebar-logout:hover {
  background: rgba(239,68,68,0.20);
  border-color: rgba(239,68,68,0.40);
  color: #fca5a5;
}

.sidebar-settings {
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.sidebar-settings:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.30);
  color: #ffffff;
}

.sidebar-logout.with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-logout.with-icon ion-icon {
  font-size: 18px;
}

.sidebar-logout.with-icon .menu-icon {
  color: #dbeafe;
}

.sidebar-settings.with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-settings.with-icon .menu-icon {
  color: #dbeafe;
}

.tesla-sidebar.collapsed .sidebar-settings.with-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 auto;
}

.tesla-sidebar.collapsed .sidebar-settings.with-icon .sidebar-settings-label {
  display: none;
}

.tesla-sidebar.collapsed .sidebar-logout.with-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 auto;
}

.tesla-sidebar.collapsed .sidebar-logout.with-icon .sidebar-logout-label {
  display: none;
}

.tesla-content-area {
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100dvh;
  padding: 24px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.tesla-content-area.full-page {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0;
}

body[data-page="chat"] .tesla-content-area.full-page,
body[data-page="ai"] .tesla-content-area.full-page,
body[data-page="agenda"] .tesla-content-area.full-page {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.page-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(30,64,175,0.25);
  flex-shrink: 0;
}

.tesla-content-area.full-page .page-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  min-width: 0;
}

body[data-page="chat"] .page-body,
body[data-page="ai"] .page-body,
body[data-page="agenda"] .page-body,
body[data-page="email"] .page-body,
body[data-page="grafana"] .page-body {
  border: 1px solid var(--tesla-border);
  border-radius: 18px;
  background:
    radial-gradient(800px 320px at 15% -15%, rgba(59, 130, 246, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(6, 14, 32, 0.94), rgba(8, 18, 41, 0.95));
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.4);
  overflow: hidden;
}

body[data-page="chat"] .page-body,
body[data-page="ai"] .page-body {
  gap: 0;
  padding: 0;
  min-height: 100%;
}

body[data-page="chat"] .page-body,
body[data-page="ai"] .page-body {
  border: none;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

body[data-page="agenda"] .page-body {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body[data-page="agenda"] .planning-content,
body[data-page="agenda"] .planning-layout,
body[data-page="agenda"] .planning-wrapper {
  height: 100% !important;
  min-height: 0 !important;
}

/* Finance KPI styles moved to tab8/page.component.css */

body[data-page="settings"] .profile-grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body[data-page="settings"] .profile-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body[data-page="settings"] .profile-photo {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  object-fit: cover;
  background: rgba(15, 23, 42, 0.75);
}

body[data-page="settings"] .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="settings"] .field-grid .full {
  grid-column: 1 / -1;
}

body[data-page="email"] .page-body,
body[data-page="grafana"] .page-body {
  gap: 0;
  padding: 0;
}

body[data-page="email"] .embed-shell,
body[data-page="grafana"] .embed-shell {
  border: none;
  border-radius: 0;
  background: rgba(5, 12, 30, 0.78);
}

.page-title {
  font-size: 18px;
  font-weight: 700;
}

.page-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.tesla-card {
  background: var(--tesla-card-bg);
  border: 1px solid var(--tesla-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--tesla-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ── Layout utility classes ── */
.page-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items: start;
}
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-card.compact {
  padding: 10px 14px;
}
.module-card.compact .mc-icon {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}
.module-card.compact .mc-title {
  font-size: .85rem;
}
.module-card.compact .mc-chevron {
  color: var(--dim);
  margin-left: auto;
  align-self: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.metric {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--tesla-border);
  background: var(--tesla-card-bg, rgba(15, 23, 42, 0.92));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #38bdf8);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.metric:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

.metric:hover::before {
  opacity: 1;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #3b82f6;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--tesla-text-primary, #e2e8f0);
  line-height: 1.2;
}

.metric-sub {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tesla-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill.ok {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.pill.warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fde68a;
}

.pill.bad {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.pill.info {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  width: fit-content;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

.status.ok .dot {
  background: #22c55e;
}

.status.warn .dot {
  background: #f59e0b;
}

.status.bad .dot {
  background: #ef4444;
}

.domain {
  font-size: 13px;
  color: #bae6fd;
}

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.input,
.textarea,
select {
  width: 100%;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--tesla-text-primary);
  font-family: inherit;
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.btn {
  text-decoration: none;
  color: #0b1220;
  background: linear-gradient(135deg, var(--tesla-blue), #38bdf8);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}

.btn.secondary {
  background: rgba(148, 163, 184, 0.2);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.btn.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #fee2e2;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.table-scroll table {
  min-width: 640px;
}

th,
td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  vertical-align: top;
  word-break: break-word;
}

th {
  color: #93c5fd;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(15, 23, 42, 0.6);
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr {
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: rgba(59, 130, 246, 0.04);
}

tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.3);
}

tbody tr:nth-child(even):hover {
  background: rgba(59, 130, 246, 0.08);
}

.muted {
  color: var(--tesla-text-muted);
  font-size: 13px;
}

/* ── Utility components ── */

.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.6);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #38bdf8);
  transition: width 0.4s ease;
  min-width: 2px;
}

.progress-fill.warn {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.progress-fill.bad {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.online {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.status-badge.offline {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-badge.stopped {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.status-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
}

.empty-state ion-icon {
  font-size: 36px;
  opacity: 0.5;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.section-header ion-icon {
  font-size: 20px;
  color: #3b82f6;
}

.section-header h2 {
  margin: 0;
  color: #3b82f6;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.metric.accent-green::before {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  opacity: 1;
}

.metric.accent-yellow::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  opacity: 1;
}

.metric.accent-red::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
  opacity: 1;
}

.metric.accent-purple::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  opacity: 1;
}

.metric.accent-cyan::before {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
  opacity: 1;
}

.metric-icon.green {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.metric-icon.yellow {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.metric-icon.red {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.metric-icon.purple {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.metric-icon.cyan {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.tesla-card h2 {
  font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tesla-card h2 ion-icon,
.tesla-card h3 ion-icon {
  font-size: 18px;
  color: #ffffff;
}

.tesla-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  margin: 0 0 8px 0;
}

label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 4px;
  display: block;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.secondary:hover {
  background: rgba(148, 163, 184, 0.3);
}

.log-box {
  background: rgba(8, 17, 34, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.log-box::-webkit-scrollbar {
  width: 6px;
}

.log-box::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 3px;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.98);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-card {
  width: min(360px, 92vw);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--tesla-border);
  background: rgb(10, 18, 35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 12px;
}

.login-pass-wrap {
  position: relative;
}

.login-pass-wrap .input {
  padding-right: 42px;
}

.login-pass-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--tesla-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.login-pass-toggle:hover {
  color: var(--tesla-text-primary);
}

.footer-note {
  font-size: 12px;
  color: var(--tesla-text-muted);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 18px;
}

.modal-overlay.open {
  display: flex;
}

.modal-card {
  width: min(640px, 94vw);
  background: rgba(10, 18, 35, 0.98);
  border: 1px solid var(--tesla-border);
  border-radius: 16px;
  box-shadow: var(--tesla-shadow-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.icon-btn {
  border: 0;
  background: rgba(59, 130, 246, 0.12);
  color: var(--tesla-text-primary);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.embed-shell {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--tesla-border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(8, 17, 34, 0.7);
}

.full-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Chat styles (Tab13 exact) */
.chat-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  width: 100%;
  background: #0b0f14;
  color: #e8ecf5;
  overflow: hidden;
  border-radius: 0;
  border: none;
}

.chat-sidebar {
  background: #111720;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.chat-sidebar.mobile-hidden {
  display: none !important;
}

.chat-sidebar .sidebar-header {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #111720;
}

.chat-sidebar .sidebar-header .search-wrapper {
  margin: 0;
}

.chat-sidebar .sidebar-header .native-search-container {
  min-height: 42px;
  padding: 10px 16px;
}

.native-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 8px 12px;
}

.native-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e8ecf5;
  outline: none;
  font-size: 13px;
}

.filter-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #9ba6b4;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
}

.chip.active {
  color: #fff;
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.chat-list::-webkit-scrollbar {
  width: 6px;
}

.chat-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.chat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

.chat-row:hover {
  background: #0d1118;
}

.chat-row.active {
  background: #0b1524;
  border-left: 4px solid #3b82f6;
}

.avatar {
  position: relative;
}

.avatar .initials {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
}

.badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #111720;
  background: #6b7280;
}

.badge.online {
  background: #22c55e;
}

.chat-meta .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-meta .name {
  font-weight: 700;
  color: #fff;
}

.chat-meta .time {
  color: #9ba6b4;
  font-size: 12px;
}

.chat-meta .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #9ba6b4;
  font-size: 13px;
}

.empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ba6b4;
}

.empty ion-icon {
  font-size: 48px;
  opacity: 0.4;
}

.chat-pane {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f131b 0%, #0b0f15 100%);
  position: relative;
  min-height: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chat-pane.hidden {
  display: none;
}

.chat-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #121925;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

.header-avatar .initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-info h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.header-info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ba6b4;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #6b7280;
}

.status-dot.online {
  background: #22c55e;
}

.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 92px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  background: linear-gradient(180deg, #0f131b 0%, #0b0f15 100%);
}

.messages::-webkit-scrollbar {
  width: 6px;
}

.messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.message {
  display: flex;
}

.message.sent {
  justify-content: flex-end;
}

.message.received {
  justify-content: flex-start;
}

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: #fff;
  position: relative;
}

.bubble.image {
  padding: 10px;
}

.bubble.image img {
  max-width: 240px;
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.message.sent .bubble {
  background: linear-gradient(135deg, #4f8dfd 0%, #3b72f6 100%);
  border-bottom-right-radius: 6px;
}

.message.received .bubble {
  background: #1f2733;
  border-bottom-left-radius: 6px;
}

.bubble p {
  margin: 0;
  line-height: 1.45;
}

.bubble .meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.input-bar {
  padding: 8px 12px;
  background: #0d1118;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

.attachment-preview {
  display: none;
}

.attachment-preview.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 4px 10px;
}

.attachment-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.attachment-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #9ba6b4;
}

.attachment-meta .name {
  color: #fff;
  font-weight: 600;
}

.ai-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}

.ai-input textarea {
  width: 100%;
  background: #10151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  color: #e8ecf5;
  resize: none;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02);
}

.ai-input textarea::placeholder {
  color: #9ba6b4;
}

.ai-input .attach-btn {
  background: #10151d;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-input .attach-btn:hover {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.18);
}

.ai-input .send-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  width: 44px;
  height: 44px;
}

.ai-input .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.select-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  color: #9ba6b4;
}

.select-placeholder ion-icon {
  font-size: 72px;
  color: #3b82f6;
  opacity: 0.35;
}

.chat-sidebar .sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111720;
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}

.chat-sidebar .fixed-footer .footer-title {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

/* AI page styles (Tab6 exact) */
body[data-page="ai"] .chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  background: #000000;
  color: var(--cdt-light-bg-card);
  border-radius: 0;
  border: none;
  overflow: hidden;
}

body[data-page="ai"] .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--cdt-bg-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
}

body[data-page="ai"] .chat-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cdt-blue-primary) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="ai"] .chat-header h2 ion-icon {
  font-size: 20px;
  color: var(--cdt-blue-primary) !important;
}

body[data-page="chat"] .tesla-content-area,
body[data-page="ai"] .tesla-content-area,
body[data-page="email"] .tesla-content-area,
body[data-page="grafana"] .tesla-content-area {
  height: 100dvh;
  min-height: 0;
}

body[data-page="ai"] .input-area {
  position: sticky;
  bottom: 0;
  margin-bottom: 0;
}

body[data-page="ai"] .messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 16px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

body[data-page="ai"] .messages {
  padding-bottom: 120px;
}

body[data-page="ai"] .messages::-webkit-scrollbar {
  width: 6px;
}

body[data-page="ai"] .messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}

body[data-page="ai"] .messages::-webkit-scrollbar-track {
  background: transparent;
}

body[data-page="ai"] .message {
  display: flex;
  width: 100%;
}

body[data-page="ai"] .message.user {
  justify-content: flex-end;
}

body[data-page="ai"] .message.assistant {
  justify-content: flex-start;
}

body[data-page="ai"] .bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 18px;
  background: #10b981;
  color: var(--cdt-light-bg-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
}

body[data-page="ai"] .message.user .bubble {
  background: #10b981;
  color: var(--cdt-light-bg-card);
  border-radius: 18px 18px 4px 18px;
}

body[data-page="ai"] .message.assistant .bubble {
  color: var(--cdt-light-bg-card) !important;
  border-radius: 18px 18px 18px 4px;
}

body[data-page="ai"] .bubble p {
  margin: 0;
  color: var(--cdt-light-bg-card) !important;
  white-space: pre-line;
}

body[data-page="ai"] .time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
  align-self: flex-end;
}

body[data-page="ai"] .typing {
  display: flex;
  gap: 6px;
}

body[data-page="ai"] .typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typing 1.25s ease-in-out infinite;
}

body[data-page="ai"] .typing span:nth-child(2) {
  animation-delay: 0.15s;
}

body[data-page="ai"] .typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 12px 12px;
}

.suggestions button {
  border: 1px solid rgba(0, 92, 75, 0.3);
  background: rgba(0, 92, 75, 0.1);
  color: var(--cdt-light-bg-card);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestions button:hover:not(:disabled) {
  background: rgba(0, 92, 75, 0.2);
  transform: translateY(-1px);
}

.suggestions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.input-area {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #000000;
}

.input-area textarea {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: #0b1220;
  color: var(--cdt-light-bg-card);
  resize: none;
  font-size: 15px;
}

.send-btn {
  border-radius: 18px;
  padding: 12px 14px;
  border: none;
  background: #10b981;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 900px) {
  .tesla-sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    padding: 0;
    gap: 0;
  }

  .tesla-sidebar .sidebar-header {
    padding: 14px 0;
    justify-content: center;
    border-bottom: none;
  }

  .tesla-sidebar .sidebar-nav {
    padding: 8px 0;
    align-items: center;
  }

  .tesla-sidebar .sidebar-footer {
    padding: 10px 0 14px;
    align-items: center;
  }

  .tesla-sidebar .sidebar-separator {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
  }

  .tesla-sidebar .sidebar-title,
  .tesla-sidebar .sidebar-label {
    display: none;
  }

  .tesla-sidebar .sidebar-category {
    justify-content: center;
    width: 44px;
    margin: 0 auto;
    padding: 9px 7px;
  }

  .tesla-sidebar .sidebar-logout.with-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto;
    border: none;
  }

  .tesla-sidebar .sidebar-logout.with-icon .sidebar-logout-label {
    display: none;
  }

  /* Expanded overlay sidebar on small screens */
  .tesla-sidebar.sidebar-open {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    padding: 14px 10px;
    gap: 14px;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
  }

  .tesla-sidebar.sidebar-open .sidebar-title,
  .tesla-sidebar.sidebar-open .sidebar-label {
    display: initial;
  }

  .tesla-sidebar.sidebar-open .sidebar-nav {
    padding: 8px 10px;
    align-items: stretch;
  }

  .tesla-sidebar.sidebar-open .sidebar-header {
    padding: 14px 12px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .tesla-sidebar.sidebar-open .sidebar-footer {
    padding: 10px 10px 14px;
    align-items: stretch;
  }

  .tesla-sidebar.sidebar-open .sidebar-separator {
    height: auto;
    padding: 12px 10px 4px;
    opacity: 1;
    overflow: visible;
    margin: 0;
  }

  .tesla-sidebar.sidebar-open .sidebar-category {
    width: auto;
    justify-content: flex-start;
    margin: 0;
    padding: 10px 11px;
  }

  .tesla-sidebar.sidebar-open .sidebar-logout.with-icon {
    width: auto;
    height: auto;
    padding: 10px 12px;
    margin: 0;
  }

  .tesla-sidebar.sidebar-open .sidebar-logout.with-icon .sidebar-logout-label {
    display: initial;
  }

  .tesla-content-area,
  .tesla-content-area.full-page {
    padding: 8px 6px 14px;
  }

  body[data-page="chat"] .tesla-content-area.full-page,
  body[data-page="ai"] .tesla-content-area.full-page {
    padding: 0;
  }

  .chat-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-page="settings"] .profile-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="settings"] .field-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .tesla-content-area {
    padding: 16px 16px 24px;
  }

  .tesla-content-area.full-page {
    padding: 8px;
  }

  .page-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  :root {
    --sidebar-width: 68px;
    --sidebar-collapsed-width: 68px;
  }

  .tesla-sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    padding: 0;
  }

  .tesla-sidebar .sidebar-header {
    padding: 14px 0;
    justify-content: center;
    border-bottom: none;
  }

  .tesla-sidebar .sidebar-nav {
    padding: 8px 0;
    align-items: center;
  }

  .tesla-sidebar .sidebar-footer {
    padding: 10px 0 14px;
    align-items: center;
  }

  .tesla-sidebar .sidebar-separator {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
  }

  .tesla-sidebar .sidebar-title,
  .tesla-sidebar .sidebar-label,
  .tesla-sidebar .sidebar-settings-label,
  .tesla-sidebar .sidebar-logout-label {
    display: none;
  }

  .tesla-sidebar .sidebar-category,
  .tesla-sidebar .sidebar-settings.with-icon,
  .tesla-sidebar .sidebar-logout.with-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    border: none;
  }

  /* Expanded sidebar: items links uitlijnen met labels zichtbaar */
  .tesla-sidebar.sidebar-open .sidebar-nav {
    padding: 8px 10px;
    align-items: stretch;
  }
  .tesla-sidebar.sidebar-open .sidebar-header {
    padding: 14px 12px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .tesla-sidebar.sidebar-open .sidebar-title,
  .tesla-sidebar.sidebar-open .sidebar-label,
  .tesla-sidebar.sidebar-open .sidebar-settings-label,
  .tesla-sidebar.sidebar-open .sidebar-logout-label {
    display: initial;
  }
  .tesla-sidebar.sidebar-open .sidebar-separator {
    height: auto;
    padding: 4px 10px 2px;
    opacity: 1;
    margin: 0;
  }
  .tesla-sidebar.sidebar-open .sidebar-category,
  .tesla-sidebar.sidebar-open .sidebar-settings.with-icon,
  .tesla-sidebar.sidebar-open .sidebar-logout.with-icon {
    width: auto;
    height: auto;
    padding: 8px 10px;
    margin: 0;
    justify-content: flex-start;
    border: 1px solid transparent;
  }
  .tesla-sidebar.sidebar-open .sidebar-footer {
    padding: 10px 10px 14px;
    align-items: stretch;
  }

  .tesla-content-area {
    padding: 8px 6px 14px;
  }

  .tesla-content-area.full-page {
    padding: 6px;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

/* Final parity overrides: match app Tab13 chat + Tab6 AI exactly */
body[data-page="chat"],
body[data-page="ai"] {
  --cdt-light-bg-card: #f9fafb;
  --cdt-bg-primary: #0b1220;
  --cdt-bg-card: #0b1220;
  --cdt-blue-primary: #3b82f6;
  --cdt-light-text-muted: #9ca3af;
  --whatsapp-green-dark: #00a884;
}

body[data-page="chat"] .tesla-content-area.full-page,
body[data-page="ai"] .tesla-content-area.full-page {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body[data-page="chat"] .page-body,
body[data-page="ai"] .page-body {
  height: 100%;
  min-height: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  overflow: hidden;
}

body[data-page="chat"] .chat-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  width: 100%;
  min-height: 0;
  background: #0b0f14;
  color: #e8ecf5;
  overflow: hidden;
}

body[data-page="chat"] .chat-sidebar {
  background: #111720;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

body[data-page="chat"] .chat-sidebar.mobile-hidden {
  display: none !important;
}

body[data-page="chat"] .chat-pane {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f131b 0%, #0b0f15 100%);
  position: relative;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

body[data-page="chat"] .chat-pane.hidden {
  display: none;
}

body[data-page="chat"] .chat-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

body[data-page="chat"] .chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #121925;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

body[data-page="chat"] .chat-header .back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

body[data-page="chat"] .chat-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

body[data-page="chat"] .chat-header .header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

body[data-page="chat"] .chat-header .header-actions .icon-btn,
body[data-page="chat"] .chat-sidebar .fixed-footer .chat-settings-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  padding: 0;
}

body[data-page="chat"] .chat-header .header-actions .icon-btn:hover,
body[data-page="chat"] .chat-sidebar .fixed-footer .chat-settings-btn:hover {
  border-color: rgba(59, 130, 246, 0.5);
  color: #e2e8f0;
}

body[data-page="chat"] .header-avatar .initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
}

body[data-page="chat"] .header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-page="chat"] .header-info h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

body[data-page="chat"] .header-info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ba6b4;
}

body[data-page="chat"] .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #6b7280;
}

body[data-page="chat"] .status-dot.online {
  background: #22c55e;
}

body[data-page="chat"] .messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 92px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  background: linear-gradient(180deg, #0f131b 0%, #0b0f15 100%);
}

body[data-page="chat"] .messages::-webkit-scrollbar {
  width: 6px;
}

body[data-page="chat"] .messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

body[data-page="chat"] .message {
  display: flex;
}

body[data-page="chat"] .message.sent {
  justify-content: flex-end;
}

body[data-page="chat"] .message.received {
  justify-content: flex-start;
}

body[data-page="chat"] .bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: #fff;
  position: relative;
}

body[data-page="chat"] .bubble.image {
  padding: 10px;
}

body[data-page="chat"] .bubble.image img {
  max-width: 240px;
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

body[data-page="chat"] .message.sent .bubble {
  background: linear-gradient(135deg, #4f8dfd 0%, #3b72f6 100%);
  border-bottom-right-radius: 6px;
}

body[data-page="chat"] .message.received .bubble {
  background: #1f2733;
  border-bottom-left-radius: 6px;
}

body[data-page="chat"] .bubble p {
  margin: 0;
  line-height: 1.45;
}

body[data-page="chat"] .bubble .meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

body[data-page="chat"] .chat-meta .preview {
  display: block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="chat"] .unread {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body[data-page="chat"] .input-bar {
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: #0d1118;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

body[data-page="chat"] .attachment-preview {
  display: none;
}

body[data-page="chat"] .attachment-preview.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 4px 10px;
}

body[data-page="chat"] .attachment-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

body[data-page="chat"] .attachment-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #9ba6b4;
}

body[data-page="chat"] .attachment-meta .name {
  color: #fff;
  font-weight: 600;
}

body[data-page="chat"] .ai-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}

body[data-page="chat"] .ai-input textarea {
  width: 100%;
  background: #10151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  color: #e8ecf5;
  resize: none;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02);
}

body[data-page="chat"] .ai-input textarea::placeholder {
  color: #9ba6b4;
}

body[data-page="chat"] .ai-input .attach-btn {
  background: #10151d;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body[data-page="chat"] .ai-input .attach-btn:hover {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-page="chat"] .ai-input .send-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  width: 44px;
  height: 44px;
}

body[data-page="chat"] .ai-input .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-page="chat"] .select-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  color: #9ba6b4;
}

body[data-page="chat"] .select-placeholder ion-icon {
  font-size: 72px;
  color: #3b82f6;
  opacity: 0.35;
}

body[data-page="chat"] .chat-sidebar .sidebar-footer {
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111720;
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}

body[data-page="chat"] .chat-sidebar .fixed-footer .footer-title {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

body[data-page="ai"] .chat-container {
  --chat-bg: #000000;
  --chat-header-bg: #000000;
  --chat-text: var(--cdt-light-bg-card);
  --chat-subtle: rgba(255, 255, 255, 0.4);
  --assistant-bubble: #10b981;
  --user-bubble: #10b981;
  --divider: rgba(255, 255, 255, 0.1);
  --input-bg: var(--cdt-bg-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  background: var(--chat-bg);
  color: var(--chat-text);
  min-height: 0;
  overflow: hidden;
}

body[data-page="ai"] .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--cdt-bg-card);
  border-bottom: 1px solid var(--divider);
  z-index: 10;
}

body[data-page="ai"] .chat-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cdt-blue-primary) !important;
}

body[data-page="ai"] .chat-header h2,
body[data-page="ai"] .chat-header h2 * {
  color: var(--cdt-blue-primary) !important;
}

body[data-page="ai"] .chat-header h2 ion-icon {
  font-size: 20px;
}

body[data-page="ai"] .messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 16px 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--chat-subtle) transparent;
  min-height: 0;
}

body[data-page="ai"] .messages::-webkit-scrollbar {
  width: 6px;
}

body[data-page="ai"] .messages::-webkit-scrollbar-thumb {
  background: var(--chat-subtle);
  border-radius: 999px;
}

body[data-page="ai"] .messages::-webkit-scrollbar-track {
  background: transparent;
}

body[data-page="ai"] .message {
  display: flex;
  width: 100%;
}

body[data-page="ai"] .message.user {
  justify-content: flex-end;
}

body[data-page="ai"] .message.assistant {
  justify-content: flex-start;
}

body[data-page="ai"] .bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--assistant-bubble);
  color: var(--cdt-light-bg-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
}

body[data-page="ai"] .message.user .bubble {
  background: var(--user-bubble);
  color: var(--cdt-light-bg-card);
  border-radius: 18px 18px 4px 18px;
}

body[data-page="ai"] .message.assistant .bubble {
  color: var(--cdt-light-bg-card) !important;
  border-radius: 18px 18px 18px 4px;
}

body[data-page="ai"] .bubble p {
  margin: 0;
  color: var(--cdt-light-bg-card) !important;
  white-space: pre-line;
}

body[data-page="ai"] .time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
  align-self: flex-end;
}

body[data-page="ai"] .typing {
  display: flex;
  gap: 6px;
}

body[data-page="ai"] .typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typing 1.25s ease-in-out infinite;
}

body[data-page="ai"] .typing span:nth-child(2) {
  animation-delay: 0.15s;
}

body[data-page="ai"] .typing span:nth-child(3) {
  animation-delay: 0.3s;
}

body[data-page="ai"] .suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px 12px;
  flex-shrink: 0;
}

body[data-page="ai"] .suggestions button {
  border: 1px solid rgba(0, 92, 75, 0.3);
  background: rgba(0, 92, 75, 0.1);
  color: var(--chat-text);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-page="ai"] .suggestions button:hover:not(:disabled) {
  background: rgba(0, 92, 75, 0.2);
  transform: translateY(-1px);
}

body[data-page="ai"] .suggestions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-page="ai"] .input-area {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 0;
  border-top: 1px solid var(--divider);
  background: var(--chat-header-bg) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  min-height: 70px;
  flex-shrink: 0;
}

body[data-page="ai"] .input-area textarea {
  flex: 1;
  min-height: 48px !important;
  max-height: 120px;
  padding: 14px 18px;
  border: 1px solid var(--divider) !important;
  border-radius: 24px;
  background: var(--input-bg) !important;
  color: var(--chat-text) !important;
  font-size: 15px;
  resize: none;
  font-family: inherit;
  box-shadow: none;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-page="ai"] .input-area textarea::placeholder {
  color: var(--cdt-light-text-muted);
}

body[data-page="ai"] .input-area textarea:focus {
  outline: none;
  border-color: var(--cdt-blue-primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body[data-page="ai"] .input-area textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body[data-page="ai"] .input-area button[type="submit"],
body[data-page="ai"] .input-area .send-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp-green-dark) 0%, #06cf9c 100%);
  color: var(--tesla-text-primary);
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3);
}

body[data-page="ai"] .input-area .send-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

body[data-page="ai"] .input-area button[type="submit"]:hover:not(:disabled),
body[data-page="ai"] .input-area .send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #06cf9c 0%, #00e5a8 100%);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 168, 132, 0.5);
}

body[data-page="ai"] .input-area button[type="submit"]:hover:not(:disabled) svg,
body[data-page="ai"] .input-area .send-btn:hover:not(:disabled) svg {
  transform: translateX(2px);
}

body[data-page="ai"] .input-area button[type="submit"]:active:not(:disabled),
body[data-page="ai"] .input-area .send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

body[data-page="ai"] .input-area button[type="submit"]:disabled,
body[data-page="ai"] .input-area .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  body[data-page="chat"] .chat-shell {
    grid-template-columns: 1fr;
  }

  body[data-page="chat"] .chat-pane.hidden {
    display: none;
  }

  body[data-page="chat"] .message.sent .bubble,
  body[data-page="chat"] .message.received .bubble {
    max-width: 85%;
  }
}

/* Hard lock: exact App Tab13 + Tab6 visual parity */
body[data-page="chat"] {
  --tab13-header-height: 56px;
  --bg: #0b0f14;
  --panel: #111720;
  --panel-2: #0d1118;
  --text: #e8ecf5;
  --muted: #9ba6b4;
  --border: rgba(255, 255, 255, 0.07);
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --success: #22c55e;
  --wallpaper: linear-gradient(180deg, #0f131b 0%, #0b0f15 100%);
}

body[data-page="chat"] .tesla-content-area.full-page {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

body[data-page="chat"] .page-body {
  flex: 1;
  min-height: 0;
  display: flex;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

body[data-page="chat"] .chat-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  width: 100%;
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  border-radius: 0;
  border: none;
}

body[data-page="chat"] .chat-sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

body[data-page="chat"] .chat-sidebar.mobile-hidden {
  display: none !important;
}

body[data-page="chat"] .chat-sidebar .sidebar-header {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

body[data-page="chat"] .chat-sidebar .sidebar-header .search-wrapper {
  margin: 0;
}

body[data-page="chat"] .chat-sidebar .sidebar-header .native-search-container {
  min-height: 42px !important;
  padding: 10px 16px !important;
}

body[data-page="chat"] .filter-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

body[data-page="chat"] .chat-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

body[data-page="chat"] .chat-list::-webkit-scrollbar {
  width: 6px;
}

body[data-page="chat"] .chat-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

body[data-page="chat"] .chat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}

body[data-page="chat"] .chat-row:hover {
  background: #0d1118;
}

body[data-page="chat"] .chat-row.active {
  background: #0b1524;
  border-left: 4px solid var(--primary);
}

body[data-page="chat"] .avatar {
  position: relative;
}

body[data-page="chat"] .avatar .initials {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
}

body[data-page="chat"] .badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: #6b7280;
}

body[data-page="chat"] .badge.online {
  background: var(--success);
}

body[data-page="chat"] .chat-meta .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body[data-page="chat"] .chat-meta .name {
  font-weight: 700;
  color: #fff;
}

body[data-page="chat"] .chat-meta .time {
  color: var(--muted);
  font-size: 12px;
}

body[data-page="chat"] .chat-meta .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

body[data-page="chat"] .chat-meta .preview {
  display: block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-page="chat"] .empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
}

body[data-page="chat"] .empty ion-icon {
  font-size: 48px;
  opacity: 0.4;
}

body[data-page="chat"] .chat-pane {
  display: flex;
  flex-direction: column;
  background: var(--wallpaper);
  position: relative;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

body[data-page="chat"] .chat-pane.hidden {
  display: none;
}

body[data-page="chat"] .chat-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

body[data-page="chat"] .chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #121925;
  border-bottom: 1px solid var(--border);
}

body[data-page="chat"] .chat-header .back-btn {
  display: inline-flex;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

body[data-page="chat"] .chat-header .header-actions {
  margin-left: auto;
}

body[data-page="chat"] .header-avatar .initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

body[data-page="chat"] .header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-page="chat"] .header-info h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

body[data-page="chat"] .header-info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

body[data-page="chat"] .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #6b7280;
}

body[data-page="chat"] .status-dot.online {
  background: #22c55e;
}

body[data-page="chat"] #chatMessages.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 92px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  background: var(--wallpaper) !important;
}

body[data-page="chat"] #chatMessages.messages::-webkit-scrollbar {
  width: 6px;
}

body[data-page="chat"] #chatMessages.messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

body[data-page="chat"] .message {
  display: flex;
}

body[data-page="chat"] .message.sent {
  justify-content: flex-end;
}

body[data-page="chat"] .message.received {
  justify-content: flex-start;
}

body[data-page="chat"] .bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: #fff;
  position: relative;
}

body[data-page="chat"] .bubble.image {
  padding: 10px;
}

body[data-page="chat"] .bubble.image img {
  max-width: 240px;
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

body[data-page="chat"] .message.sent .bubble {
  background: linear-gradient(135deg, #4f8dfd 0%, #3b72f6 100%);
  border-bottom-right-radius: 6px;
}

body[data-page="chat"] .message.received .bubble {
  background: #1f2733;
  border-bottom-left-radius: 6px;
}

body[data-page="chat"] .bubble p {
  margin: 0;
  line-height: 1.45;
}

body[data-page="chat"] .bubble .meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

body[data-page="chat"] .input-bar {
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

body[data-page="chat"] .attachment-preview {
  display: none;
}

body[data-page="chat"] .attachment-preview.show {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 4px 10px;
}

body[data-page="chat"] .attachment-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

body[data-page="chat"] .attachment-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

body[data-page="chat"] .attachment-meta .name {
  color: #fff;
  font-weight: 600;
}

body[data-page="chat"] #chatForm.ai-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}

body[data-page="chat"] #chatForm.ai-input textarea {
  width: 100%;
  background: #10151d !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text) !important;
  resize: none;
  min-height: 48px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02);
}

body[data-page="chat"] #chatForm.ai-input textarea::placeholder {
  color: var(--muted);
}

body[data-page="chat"] #chatForm.ai-input .attach-btn {
  background: #10151d;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body[data-page="chat"] #chatForm.ai-input .attach-btn:hover {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-page="chat"] #chatForm.ai-input .send-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  cursor: pointer;
  width: 44px;
  height: 44px;
}

body[data-page="chat"] #chatForm.ai-input .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-page="chat"] .select-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  color: var(--muted);
}

body[data-page="chat"] .select-placeholder ion-icon {
  font-size: 72px;
  color: var(--primary);
  opacity: 0.35;
}

body[data-page="chat"] .chat-sidebar .sidebar-footer {
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-shrink: 0;
}

body[data-page="chat"] .chat-sidebar .fixed-footer .footer-title {
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}

body[data-page="ai"] {
  --chat-bg: #000000;
  --chat-header-bg: #000000;
  --chat-text: var(--cdt-light-bg-card);
  --chat-subtle: rgba(255, 255, 255, 0.4);
  --assistant-bubble: #10b981;
  --user-bubble: #10b981;
  --divider: rgba(255, 255, 255, 0.1);
  --input-bg: var(--cdt-bg-primary);
}

body[data-page="ai"] .tesla-content-area.full-page {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

body[data-page="ai"] .page-body {
  flex: 1;
  min-height: 0;
  display: flex;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--chat-bg);
  box-shadow: none;
}

body[data-page="ai"] .chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  background: var(--chat-bg);
  color: var(--chat-text);
  min-height: 0;
  overflow: hidden;
}

body[data-page="ai"] .chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--cdt-bg-card);
  border-bottom: 1px solid var(--divider);
  z-index: 10;
}

body[data-page="ai"] .chat-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cdt-blue-primary) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-page="ai"] .chat-header h2 ion-icon {
  font-size: 20px;
  color: var(--cdt-blue-primary) !important;
}

body[data-page="ai"] #aiMessages.messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 16px 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--chat-subtle) transparent;
  min-height: 0;
  background: var(--chat-bg) !important;
}

body[data-page="ai"] #aiMessages.messages::-webkit-scrollbar {
  width: 6px;
}

body[data-page="ai"] #aiMessages.messages::-webkit-scrollbar-thumb {
  background: var(--chat-subtle);
  border-radius: 999px;
}

body[data-page="ai"] #aiMessages.messages::-webkit-scrollbar-track {
  background: transparent;
}

body[data-page="ai"] .message {
  display: flex;
  width: 100%;
}

body[data-page="ai"] .message.user {
  justify-content: flex-end;
}

body[data-page="ai"] .message.assistant {
  justify-content: flex-start;
}

body[data-page="ai"] .bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--assistant-bubble);
  color: var(--cdt-light-bg-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
}

body[data-page="ai"] .message.user .bubble {
  background: var(--user-bubble);
  color: var(--cdt-light-bg-card);
  border-radius: 18px 18px 4px 18px;
}

body[data-page="ai"] .message.assistant .bubble {
  color: var(--cdt-light-bg-card) !important;
  border-radius: 18px 18px 18px 4px;
}

body[data-page="ai"] .bubble p {
  margin: 0;
  color: var(--cdt-light-bg-card) !important;
  white-space: pre-line;
}

body[data-page="ai"] .time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 2px;
  align-self: flex-end;
}

body[data-page="ai"] .typing {
  display: flex;
  gap: 6px;
}

body[data-page="ai"] .typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typing 1.25s ease-in-out infinite;
}

body[data-page="ai"] .typing span:nth-child(2) {
  animation-delay: 0.15s;
}

body[data-page="ai"] .typing span:nth-child(3) {
  animation-delay: 0.3s;
}

body[data-page="ai"] #aiSuggestions.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px 12px;
  flex-shrink: 0;
  background: var(--chat-bg) !important;
}

body[data-page="ai"] #aiSuggestions.suggestions button {
  border: 1px solid rgba(0, 92, 75, 0.3);
  background: rgba(0, 92, 75, 0.1);
  color: var(--chat-text);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-page="ai"] #aiSuggestions.suggestions button:hover:not(:disabled) {
  background: rgba(0, 92, 75, 0.2);
  transform: translateY(-1px);
}

body[data-page="ai"] #aiSuggestions.suggestions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-page="ai"] #aiForm.input-area {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 0;
  border-top: 1px solid var(--divider);
  background: var(--chat-header-bg) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  min-height: 70px;
  flex-shrink: 0;
}

body[data-page="ai"] #aiInput {
  flex: 1;
  min-height: 48px !important;
  max-height: 120px;
  padding: 14px 18px;
  border: 1px solid var(--divider) !important;
  border-radius: 24px;
  background: var(--input-bg) !important;
  color: var(--chat-text) !important;
  font-size: 15px;
  resize: none;
  font-family: inherit;
  box-shadow: none;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-page="ai"] #aiInput::placeholder {
  color: var(--cdt-light-text-muted);
}

body[data-page="ai"] #aiInput:focus {
  outline: none;
  border-color: var(--cdt-blue-primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body[data-page="ai"] #aiInput:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

body[data-page="ai"] #aiForm .send-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp-green-dark) 0%, #06cf9c 100%);
  color: var(--tesla-text-primary);
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 168, 132, 0.3);
}

body[data-page="ai"] #aiForm .send-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

body[data-page="ai"] #aiForm .send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #06cf9c 0%, #00e5a8 100%);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 168, 132, 0.5);
}

body[data-page="ai"] #aiForm .send-btn:hover:not(:disabled) svg {
  transform: translateX(2px);
}

body[data-page="ai"] #aiForm .send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

body[data-page="ai"] #aiForm .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  body[data-page="chat"] .chat-shell {
    grid-template-columns: 1fr;
  }

  body[data-page="chat"] .chat-pane.hidden {
    display: none;
  }

  body[data-page="chat"] .message.sent .bubble,
  body[data-page="chat"] .message.received .bubble {
    max-width: 85%;
  }
}
/* ===== RESPONSIVE IMPROVEMENTS (added 2026-03-10) ===== */

/* Cards stack on small screens, better padding */
@media (max-width: 640px) {
  .tesla-card {
    padding: 14px 13px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .page-topbar {
    padding: 10px 12px;
    gap: 6px;
  }

  .page-title {
    font-size: 1rem;
  }

  .page-meta {
    font-size: 0.7rem;
  }

  /* Stat cards: 2-col on small phones */
  .stat-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px;
  }

  .stat-value {
    font-size: 1.35rem;
  }

  /* Tables scroll horizontally */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 520px;
  }

  /* Overview grid: 1-col on tiny screens */
                                                                                                        small screens */
  .page-topbar .btn {
    font-size: 0.78rem;
    padding: 6px 10px;
  }

  /* Topbar wrap nicely */
  .page-topbar {
    flex-wrap: wrap;
  }

  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Overview status items */
  .status-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  /* Section headings */
  .tesla-card h2 {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .stat-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .status-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Live indicator pulse animation */
@keyframes ops-live-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

.ops-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 5px;
  vertical-align: middle;
  animation: ops-live-pulse 2s ease-in-out infinite;
}

/* ── Notification Bell ── */
.ops-bell-btn {
  position: relative;
  transition: color 0.2s;
}
.ops-bell-btn.active { color: #f59e0b; }
.ops-bell-btn:hover { background: rgba(245, 158, 11, 0.12); }
.ops-bell-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 8px; height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--tesla-bg);
}



/* ═══════════════════════════════════════════════════════
   UNIFIED VISITORS-STYLE — Auto-applied to all pages
   ═══════════════════════════════════════════════════════ */

/* ═══ Per-page accent colours (auto-generated) ═══ */


/* ── Default accent (fallback) ── */
:root {
  --page-accent: #3b82f6;
  --page-accent-rgb: 59,130,246;
}

/* ── Tesla-card → visitors-style card ── */
.tesla-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  box-shadow: none !important;
}
.tesla-card h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #3b82f6 !important;
  margin: 0 0 16px 0 !important;
}
.tesla-card h2 ion-icon,
.tesla-card h3 ion-icon {
  color: #ffffff !important;
}
.tesla-card h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #3b82f6 !important;
}

/* ── Page topbar → slim bar ── */
/* ══ Page topbar ══════════════════════════════════════════════
   DOM na JS-injectie:
     .page-topbar
       .page-title     ← altijd aanwezig in HTML
       .page-meta      ← altijd aanwezig in HTML (soms ook in .page-actions)
       .page-actions   ← aangemaakt door JS of in HTML
         #opsHeaderClock  (prepend: klok)
         #opsSseIndicator (prepend: live/offline badge)
         #opsBell         (prepend: notificatie bell)
         #topbarSettingsBtn (prepend: tandwiel)
         ...pagina-knoppen...
         #themeToggle     (append: dag/nacht)
   Layout: title volledige breedte (rij 1), meta + actions (rij 2)
═══════════════════════════════════════════════════════════════ */
.page-topbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  background: linear-gradient(90deg, #1e3a8a 0%, #1e40af 45%, #2563eb 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 2px 12px rgba(30,64,175,0.25) !important;
  margin-bottom: 16px !important;
  gap: 4px 0 !important;
  min-height: unset !important;
  height: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* Rij 1: titel neemt volledige breedte — dwingt wrap naar rij 2 */
.page-topbar .page-title {
  flex: 0 0 100% !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Rij 2 links: meta-tekst, groeit om resterende ruimte te vullen */
.page-topbar > .page-meta {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Rij 2 rechts: alle knoppen bij elkaar */
.page-topbar .page-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
/* meta binnen page-actions (grafana-stijl pagina's) */
.page-topbar .page-actions > .page-meta {
  font-size: 11px !important;
  color: rgba(255,255,255,0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
  flex-shrink: 1 !important;
}
/* Klok in actions: scheidingsteken dan knoppen */
.page-topbar #opsHeaderClock {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.65) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding-right: 8px !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  margin-right: 2px !important;
}
/* Alle icon-knoppen: zelfde formaat & stijl */
.page-topbar .icon-btn,
.page-topbar .topbar-theme-btn,
.page-topbar #themeToggle {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.page-topbar .icon-btn:hover,
.page-topbar .topbar-theme-btn:hover,
.page-topbar #themeToggle:hover {
  background: rgba(255,255,255,0.24) !important;
}
.page-topbar .icon-btn svg,
.page-topbar #topbarSettingsBtn svg {
  stroke: #ffffff !important;
  fill: none !important;
}
.page-topbar .topbar-theme-btn ion-icon,
.page-topbar #themeToggle ion-icon {
  color: #ffffff !important;
  font-size: 17px !important;
}
/* Normale knoppen (links) in actions */
.page-topbar .page-actions .btn {
  font-size: 12px !important;
  padding: 0 12px !important;
  height: 32px !important;
  white-space: nowrap !important;
}
/* SSE live/offline badge */
.page-topbar #opsSseIndicator {
  flex-shrink: 0 !important;
  font-size: 11px !important;
}
/* Responsief ≤600px */
@media (max-width: 600px) {
  .page-topbar {
    padding: 8px 14px !important;
  }
  .page-topbar .page-title {
    font-size: 14px !important;
  }
  .page-topbar > .page-meta {
    white-space: normal !important;
    font-size: 10.5px !important;
  }
  .page-topbar #opsHeaderClock {
    display: none !important;
  }
  .page-topbar .page-actions {
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }
}

/* ── Metrics → stat-card style ── */
.metric {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  box-shadow: none !important;
  transition: border-color .2s ease !important;
}
.metric::before {
  background: linear-gradient(90deg, var(--page-accent), rgba(var(--page-accent-rgb),.5)) !important;
  height: 3px !important;
}
.metric:hover {
  border-color: rgba(var(--page-accent-rgb), .3) !important;
}
.metric-icon {
  background: rgba(var(--page-accent-rgb), .1) !important;
  color: var(--page-accent) !important;
}
.metric-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  color: rgba(255,255,255,.5) !important;
}
.metric-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.metric-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,.5) !important;
}

/* ── Buttons → accent colour ── */
.tesla-content-area .btn:not(.secondary):not(.btn-icon):not(.sidebar-logout):not(#loginBtn):not(.compose-send):not(.compose-discard):not(.compose-close) {
  background: var(--page-accent) !important;
  border-color: var(--page-accent) !important;
}
.tesla-content-area .btn:not(.secondary):not(.btn-icon):hover {
  filter: brightness(1.15);
}

/* ── Pill / badge accent ── */
.pill {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

/* ── Grid gaps ── */
.grid, .metrics-grid {
  gap: 16px !important;
}

/* ── Status badges ── */
.status-badge, .badge {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── Tables ── */
.tesla-card table,
.tesla-content-area table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tesla-card table th,
.tesla-content-area table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.4);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tesla-card table td,
.tesla-content-area table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: rgba(255,255,255,.8);
}
.tesla-card table tr:hover td,
.tesla-content-area table tr:hover td {
  background: rgba(255,255,255,.03);
}

/* ── Progress bars ── */
.progress-bar, .bar-track {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.progress-bar-fill, .bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--page-accent), rgba(var(--page-accent-rgb),.6)) !important;
  border-radius: 3px !important;
}

/* ── Scrollbar (content area) ── */
.tesla-content-area::-webkit-scrollbar {
  width: 6px;
}
.tesla-content-area::-webkit-scrollbar-track {
  background: transparent;
}
.tesla-content-area::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 3px;
}
.tesla-content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.2);
}

/* ── Header clock ── */
.ops-header-clock {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  letter-spacing: 0.01em;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── Last-refresh / meta ── */
.last-refresh, .page-meta {
  font-size: 12px !important;
  color: rgba(255,255,255,.4) !important;
}

/* ── Sidebar active item accent ── */
.tesla-sidebar .sidebar-nav a.active,
.tesla-sidebar .sidebar-nav .active {
  background: rgba(var(--page-accent-rgb), .12) !important;
  color: var(--page-accent) !important;
  border-left-color: var(--page-accent) !important;
}

/* ── Subscriptions stat-card restyle ── */
.stats-grid .stat-card {
  background: linear-gradient(135deg, rgba(30,58,138,0.45) 0%, rgba(37,99,235,0.25) 100%) !important;
  border: 1px solid rgba(59,130,246,0.18) !important;
  border-radius: 12px !important;
}

/* ── Section spacing — gap between stacked cards ── */
.tesla-card + .tesla-card { margin-top: 20px !important; }

/* ── Stat cards equal width ── */
.users-stats, .stats-grid, .stat-grid, .metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
}

/* ── Full width everywhere ── */
.tesla-content-area { padding: 16px 20px 40px !important; }
body[data-page="email"] .tesla-content-area,
body[data-page="mijn-app"] .tesla-content-area { padding: 0 !important; gap: 0 !important; }
.analytics-container, .subscriptions-content, .page-body { max-width: 100% !important; width: 100% !important; }
.grid, .metrics-grid { width: 100% !important; }

/* ═════ END UNIFIED VISITORS-STYLE ═════ */

/* ── Sidebar separator ── */
.sidebar-separator { padding: 18px 16px 6px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); user-select: none; }
.tesla-sidebar.collapsed .sidebar-separator { opacity: 0; height: 0; padding: 0; overflow: hidden; margin: 0; }

/* ── Collapsed sidebar cleanup ── */
.tesla-sidebar.collapsed .sidebar-header {
  padding: 14px 0;
  justify-content: center;
  border-bottom: none;
}
.tesla-sidebar.collapsed .sidebar-nav {
  padding: 8px 0;
  align-items: center;
}
.tesla-sidebar.collapsed .sidebar-footer {
  padding: 10px 0 14px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ── PA Toast + Confirm System ── */
.pa-toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 400px; }
.pa-toast { pointer-events: auto; background: rgba(15,23,42,0.95); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 18px; color: #f1f5f9; font-size: 0.85rem; box-shadow: 0 8px 32px rgba(0,0,0,0.4); display: flex; align-items: flex-start; gap: 12px; animation: paToastIn 0.3s ease-out; min-width: 280px; }
.pa-toast .pa-toast-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pa-toast .pa-toast-icon ion-icon { font-size: 14px; color: #fff; }
.pa-toast.success .pa-toast-icon { background: rgba(34,197,94,0.25); box-shadow: 0 0 10px rgba(34,197,94,0.3); }
.pa-toast.success .pa-toast-icon ion-icon { color: #22c55e; }
.pa-toast.error .pa-toast-icon { background: rgba(239,68,68,0.25); box-shadow: 0 0 10px rgba(239,68,68,0.3); }
.pa-toast.error .pa-toast-icon ion-icon { color: #ef4444; }
.pa-toast.warning .pa-toast-icon { background: rgba(234,179,8,0.25); box-shadow: 0 0 10px rgba(234,179,8,0.3); }
.pa-toast.warning .pa-toast-icon ion-icon { color: #eab308; }
.pa-toast.info .pa-toast-icon { background: rgba(59,130,246,0.25); box-shadow: 0 0 10px rgba(59,130,246,0.3); }
.pa-toast.info .pa-toast-icon ion-icon { color: #3b82f6; }
.pa-toast .pa-toast-body { flex: 1; }
.pa-toast .pa-toast-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
.pa-toast .pa-toast-msg { opacity: 0.7; font-size: 0.78rem; }
.pa-toast .pa-toast-close { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; margin-left: auto; }
.pa-toast .pa-toast-close:hover { color: #fff; }
@keyframes paToastIn { from { opacity:0; transform: translateX(40px) scale(0.95); } to { opacity:1; transform: translateX(0) scale(1); } }
@keyframes paToastOut { to { opacity:0; transform: translateX(40px) scale(0.95); } }

.pa-confirm-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: paFadeIn 0.15s ease; }
.pa-confirm-box { background: rgba(15,23,42,0.96); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 1.75rem; max-width: 420px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: paScaleIn 0.2s ease; }
.pa-confirm-box h4 { margin: 0 0 0.5rem; font-size: 1rem; color: #f1f5f9; display: flex; align-items: center; gap: 0.5rem; }
.pa-confirm-box h4 ion-icon { color: #eab308; font-size: 1.2rem; }
.pa-confirm-box p { margin: 0 0 1.25rem; color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.5; }
.pa-confirm-actions { display: flex; justify-content: center; gap: 0.75rem; }
.pa-confirm-actions button { padding: 0.55rem 1.5rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; border: none; transition: all 0.15s; }
.pa-confirm-cancel { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1) !important; }
.pa-confirm-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pa-confirm-ok { background: #ef4444; color: #fff; }
.pa-confirm-ok:hover { background: #dc2626; }
@keyframes paFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes paScaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ── Invoice Preview ── */
.invoice-preview { background: #fff; color: #1a1a2e; border-radius: 8px; padding: 2rem; font-family: 'Segoe UI', system-ui, sans-serif; max-height: 70vh; overflow-y: auto; }
.invoice-preview .inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e2e8f0; }
.invoice-preview .inv-company { font-weight: 800; font-size: 1.2rem; color: #1e293b; }
.invoice-preview .inv-company-sub { font-size: 0.78rem; color: #64748b; margin-top: 0.25rem; }
.invoice-preview .inv-title { text-align: right; }
.invoice-preview .inv-title h2 { margin: 0; font-size: 1.5rem; color: #3b82f6; font-weight: 800; }
.invoice-preview .inv-meta { font-size: 0.78rem; color: #64748b; margin-top: 0.25rem; }
.invoice-preview .inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.invoice-preview .inv-party label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; font-weight: 700; display: block; margin-bottom: 0.3rem; }
.invoice-preview .inv-party .name { font-weight: 700; font-size: 0.9rem; color: #1e293b; }
.invoice-preview .inv-party .detail { font-size: 0.78rem; color: #64748b; }
.invoice-preview table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.invoice-preview th { background: #f1f5f9; padding: 0.6rem 0.75rem; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 700; }
.invoice-preview td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #e2e8f0; font-size: 0.82rem; color: #334155; }
.invoice-preview .inv-totals { display: flex; justify-content: flex-end; }
.invoice-preview .inv-totals-table { width: 250px; }
.invoice-preview .inv-totals-table .row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.85rem; color: #475569; }
.invoice-preview .inv-totals-table .row.total { border-top: 2px solid #1e293b; margin-top: 0.25rem; padding-top: 0.6rem; font-weight: 800; font-size: 1rem; color: #1e293b; }
.invoice-preview .inv-footer { border-top: 1px solid #e2e8f0; padding-top: 1rem; font-size: 0.75rem; color: #94a3b8; text-align: center; }

/* ── Invoice Badge Styles ── */
.pa-badge-paid { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
.pa-badge-partial { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.3); padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
.pa-badge-unpaid { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR THEME TOGGLE BUTTON
   Compact icon button injected into .page-topbar by sidebar.js
   ═══════════════════════════════════════════════════════════════ */

.topbar-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--tesla-border);
  background: rgba(255,255,255,0.07);
  color: var(--tesla-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  padding: 0;
  font-size: 0;
}
.topbar-theme-btn ion-icon {
  font-size: 18px;
  pointer-events: none;
}
.topbar-theme-btn:hover {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.light-mode .topbar-theme-btn {
  border-color: #d1d5db;
  background: #f8fafc;
  color: #404040;
}
.light-mode .topbar-theme-btn:hover {
  background: #e0e7ff;
  border-color: #2563eb;
  color: #2563eb;
}

/* Keep old .theme-toggle-btn working in sidebar footer if still present */
.theme-toggle-btn {
  border: 1px solid var(--tesla-border);
  background: transparent;
  color: var(--tesla-text-secondary);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  font-family: inherit;
}
.theme-toggle-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}
.theme-toggle-btn ion-icon { font-size: 18px; }
.tesla-sidebar.collapsed .theme-toggle-btn { width: 48px; height: 48px; padding: 0; margin: 0 auto; }
.tesla-sidebar.collapsed .theme-toggle-label { display: none; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Precies als taxi-cdt.nl website stijl
   Toggle via .light-mode class op <html> of <body>
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Variable overrides ── */
.light-mode {
  --cdt-bg-primary:    #ffffff;
  --cdt-bg-card:       #ffffff;
  --cdt-bg-elevated:   #f8fafc;
  --cdt-bg-input:      #ffffff;
  --cdt-bg-hover:      #f1f5f9;

  --cdt-text-primary:   #111827;
  --cdt-text-secondary: #374151;
  --cdt-text-muted:     #6b7280;
  --cdt-text-disabled:  #9ca3af;

  --cdt-border:        #e5e7eb;
  --cdt-border-strong: #d1d5db;

  --cdt-modal-overlay:     rgba(0,0,0,0.25);
  --cdt-modal-bg:          #ffffff;
  --cdt-modal-content-bg:  #f9fafb;

  --bg:           #f3f4f6;
  --surface:      #ffffff;
  --surface-2:    #f9fafb;
  --surface-3:    #f3f4f6;
  --surface-hover: rgba(37,99,235,0.05);
  --text:           #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --border:         #e5e7eb;
  --border-strong:  #d1d5db;
  --divider:        #e5e7eb;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 28px rgba(0,0,0,0.10);

  --input-bg:           #ffffff;
  --input-border:       #d1d5db;
  --input-text:         #111827;
  --input-placeholder:  #9ca3af;
  --input-focus-ring:   rgba(37,99,235,0.25);

  --tesla-black:          #ffffff;
  --tesla-dark-gray:      #f9fafb;
  --tesla-medium-gray:    #f3f4f6;
  --tesla-light-gray:     #e5e7eb;
  --tesla-card-bg:        #ffffff;
  --tesla-text-primary:   #111827;
  --tesla-text-secondary: #374151;
  --tesla-text-muted:     #6b7280;
  --tesla-border:         #e5e7eb;
  --tesla-border-strong:  #d1d5db;
  --tesla-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --tesla-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --tesla-shadow-lg: 0 10px 28px rgba(0,0,0,0.10);

  --tesla-success:       #16a34a;
  --tesla-success-light: rgba(22,163,74,0.08);
  --tesla-warning:       #d97706;
  --tesla-warning-light: rgba(217,119,6,0.08);
  --tesla-danger:        #dc2626;
  --tesla-danger-light:  rgba(220,38,38,0.08);
}

/* ── 2. Body background ── */
.light-mode,
html.light-mode body {
  background: #f3f4f6;
  color: #111827;
}

/* ── 3. Layout container ── */
.light-mode .tesla-settings-container {
  background: transparent;
}

/* ── 4. Sidebar ── */
.light-mode .tesla-sidebar {
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
  border-right-color: rgba(255,255,255,0.12);
  box-shadow: 2px 0 16px rgba(30,58,138,0.35);
}
.light-mode .sidebar-header {
  background: transparent;
  border-bottom-color: rgba(255,255,255,0.15);
}
.light-mode .sidebar-title {
  color: #ffffff;
  font-weight: 700;
}
.light-mode .sidebar-collapse-btn {
  color: #ffffff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.light-mode .sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.20);
  color: #ffffff;
}
.light-mode .sidebar-nav {
  background: transparent;
}
.light-mode .sidebar-category {
  color: rgba(255,255,255,0.75);
}
.light-mode .sidebar-category:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}
.light-mode .sidebar-category.active {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
}
.light-mode .sidebar-category ion-icon {
  color: rgba(255,255,255,0.6);
}
.light-mode .sidebar-category.active ion-icon,
.light-mode .sidebar-category:hover ion-icon {
  color: #ffffff;
}
.light-mode .sidebar-separator {
  color: rgba(255,255,255,0.45);
}
.light-mode .sidebar-separator::after {
  background: rgba(255,255,255,0.15);
}
.light-mode .sidebar-footer {
  border-top-color: rgba(255,255,255,0.15);
  background: transparent;
}
.light-mode .sidebar-logout,
.light-mode .sidebar-settings {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.15);
  background: transparent;
}
.light-mode .sidebar-logout:hover {
  background: rgba(239,68,68,0.20);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.40);
}
.light-mode .sidebar-settings:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border-color: rgba(255,255,255,0.30);
}
.light-mode .tesla-sidebar.collapsed .sidebar-category::after {
  background: #1e40af;
  color: #ffffff;
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 4px 12px rgba(30,58,138,0.35);
}

/* ── 5. Topbar ── */
.light-mode .page-topbar {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3) !important;
}
.light-mode .page-topbar .page-title,
.light-mode .page-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.light-mode .page-meta {
  color: rgba(255,255,255,0.8) !important;
}

/* ── 6. Cards ── */
.light-mode .tesla-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.light-mode .tesla-card h2 {
  color: #1d4ed8 !important;
}
.light-mode .tesla-card h3 {
  color: #1d4ed8 !important;
}
.light-mode .tesla-card p,
.light-mode .tesla-card .muted {
  color: #6b7280 !important;
}

/* ── 7. Metrics ── */
.light-mode .metric {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
.light-mode .metric-label {
  color: #6b7280 !important;
}
.light-mode .metric-value {
  color: #111827 !important;
}
.light-mode .metric-sub {
  color: #9ca3af !important;
}
.light-mode .metric-icon {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* ── 8. Pills and badges ── */
.light-mode .pill {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}
.light-mode .pill.ok {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.light-mode .pill.warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.light-mode .pill.bad {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.light-mode .pill.info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

/* ── 9. Status dots & badges ── */
.light-mode .status {
  color: #374151;
}
.light-mode .dot {
  box-shadow: none;
}
.light-mode .status-badge {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}
.light-mode .status-badge.online {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}
.light-mode .status-badge.offline,
.light-mode .status-badge.stopped {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.light-mode .status-badge.warning {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

/* ── 10. Inputs, select, button ── */
.light-mode .input,
.light-mode .textarea,
.light-mode select {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.light-mode .input:focus,
.light-mode .textarea:focus,
.light-mode select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  outline: none;
}
.light-mode label {
  color: #374151;
}
.light-mode .btn {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.light-mode .btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.light-mode .btn.secondary {
  background: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}
.light-mode .btn.secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* ── 11. Tables ── */
.light-mode .table-scroll {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode table thead th {
  background: #f9fafb;
  color: #374151;
  border-color: #e5e7eb;
}
.light-mode table tbody tr {
  border-color: #f3f4f6;
}
.light-mode table tbody tr:hover {
  background: #f9fafb;
}
.light-mode table td,
.light-mode table th {
  border-color: #e5e7eb;
  color: #374151;
}

/* ── 12. Misc text ── */
.light-mode .muted {
  color: #6b7280;
}
.light-mode .domain {
  color: #2563eb;
}
.light-mode .footer-note {
  color: #9ca3af;
}
.light-mode .section-header ion-icon {
  color: #2563eb;
}
.light-mode .section-meta {
  color: #9ca3af;
}
.light-mode h1, .light-mode h2, .light-mode h3,
.light-mode h4, .light-mode h5, .light-mode h6 {
  color: #111827;
}
.light-mode p {
  color: #374151;
}

/* ── 13. Log box ── */
.light-mode .log-box {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #374151;
}
.light-mode .log-box .log-entry { color: #374151; }
.light-mode .log-box .log-entry.error { color: #dc2626; }
.light-mode .log-box .log-entry.warn  { color: #d97706; }
.light-mode .log-box .log-entry.ok    { color: #16a34a; }

/* ── 14. Progress bar ── */
.light-mode .progress-bar {
  background: #e5e7eb;
}
.light-mode .progress-bar .bar {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
}

/* ── 15. Empty state ── */
.light-mode .empty-state {
  color: #9ca3af;
}

/* ── 16. Login overlay ── */
.light-mode .login-overlay {
  background: rgba(243,244,246,0.92);
}
.light-mode .login-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* ── 17. Modals ── */
.light-mode .modal-overlay {
  background: rgba(0,0,0,0.25);
}
.light-mode .modal-card {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}
.light-mode .modal-card h3,
.light-mode .modal-card h4 {
  color: #111827;
}

/* ── 18. Icon buttton ── */
.light-mode .icon-btn {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}
.light-mode .icon-btn:hover {
  background: #e5e7eb;
  color: #111827;
}

/* ── 19. Embed / full-page iframes ── */
.light-mode .embed-shell {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.light-mode .chat-shell {
  background: #f9fafb;
}
.light-mode .chat-sidebar {
  background: #ffffff;
  border-right-color: #e5e7eb;
}
.light-mode .chat-sidebar .sidebar-header {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
  color: #111827;
}

/* Embed page bodies */
body.light-mode[data-page="chat"] .page-body,
body.light-mode[data-page="ai"] .page-body,
body.light-mode[data-page="agenda"] .page-body,
body.light-mode[data-page="email"] .page-body,
body.light-mode[data-page="grafana"] .page-body {
  background: #f9fafb;
  border-color: #e5e7eb;
  box-shadow: none;
}

/* ── 20. Settings profile ── */
body.light-mode[data-page="settings"] .profile-photo {
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── 21. Embed shells ── */
.light-mode[data-page="email"] .embed-shell,
.light-mode[data-page="grafana"] .embed-shell {
  background: #ffffff;
  border-color: #e5e7eb;
}

/* ── 22. Search ── */
.light-mode .native-search-container {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.light-mode .native-search-input {
  background: transparent;
  color: #111827;
}

/* ── 23. Chips ── */
.light-mode .chip {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.light-mode .chip.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* ── 24. Chat messages ── */
.light-mode .chat-list::-webkit-scrollbar-thumb { background: #d1d5db; }
.light-mode .chat-row {
  background: transparent;
  border-color: #f3f4f6;
}
.light-mode .chat-row:hover { background: #f9fafb; }
.light-mode .chat-row.active { background: #eff6ff; border-color: #bfdbfe; }
.light-mode .badge {
  background: #2563eb;
  color: #ffffff;
}
.light-mode .chat-meta .name { color: #111827; }
.light-mode .chat-meta .time,
.light-mode .chat-meta .bottom { color: #9ca3af; }
.light-mode .empty { color: #9ca3af; }

/* Chat pane */
.light-mode .chat-pane { background: #f9fafb; }
.light-mode .chat-header {
  background: #ffffff;
  border-bottom-color: #e5e7eb;
}
.light-mode .header-info h2 { color: #111827; }
.light-mode .header-info p  { color: #6b7280; }
.light-mode .messages { background: #f9fafb; }
.light-mode .messages::-webkit-scrollbar-thumb { background: #d1d5db; }
.light-mode .message.received .bubble {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
}
.light-mode .bubble {
  background: #2563eb;
  color: #ffffff;
}
.light-mode .bubble .meta { color: rgba(255,255,255,0.7); }
.light-mode .input-bar {
  background: #ffffff;
  border-top-color: #e5e7eb;
}

/* ── 25. Attachment preview ── */
.light-mode .attachment-preview.show {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.light-mode .attachment-meta { color: #374151; }
.light-mode .attachment-meta .name { color: #111827; }

/* ── 26. AI input ── */
.light-mode .ai-input textarea {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.light-mode .ai-input textarea::placeholder { color: #9ca3af; }
.light-mode .ai-input .attach-btn {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.light-mode .ai-input .attach-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}
.light-mode .select-placeholder { color: #9ca3af; }

/* ── 27. AI page body ── */
body.light-mode[data-page="ai"] {
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
}
.light-mode .input-area {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .input-area textarea {
  background: transparent;
  color: #111827;
  border-color: #e5e7eb;
}
.light-mode .suggestions button {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.light-mode .suggestions button:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* ── 28. PA toast / confirm ── */
.light-mode .pa-toast {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.light-mode .pa-toast .pa-toast-close { color: #9ca3af; }
.light-mode .pa-confirm-box {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.light-mode .pa-confirm-box h4 { color: #111827; }
.light-mode .pa-confirm-box p  { color: #6b7280; }
.light-mode .pa-confirm-cancel {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.light-mode .pa-confirm-cancel:hover {
  background: #e5e7eb;
}

/* ── 29. Stats grid ── */
.light-mode .stats-grid .stat-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .last-refresh { color: #9ca3af; }

/* ── 30. Scrollbars ── */
.light-mode .tesla-content-area::-webkit-scrollbar-thumb { background: #d1d5db; }
.light-mode .sidebar-nav::-webkit-scrollbar-thumb { background: #d1d5db; }
.light-mode *::-webkit-scrollbar-track { background: #f3f4f6; }
.light-mode *::-webkit-scrollbar-thumb { background: #d1d5db; }

/* ── 31. Chat page body var ── */
body.light-mode[data-page="chat"] {
  --bg: #f9fafb;
  --panel: #ffffff;
  --panel-2: #f3f4f6;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
}
.light-mode .sidebar-separator span {
  color: #9ca3af;
}

/* ── 32. Section header ── */
.light-mode .section-header-row {
  border-bottom-color: #e5e7eb;
}

/* ── 33. Interactive elements highlight ── */
.light-mode a { color: #2563eb; }
.light-mode a:hover { color: #1d4ed8; }

/* ── 34. Content area ── */
.light-mode .tesla-content-area {
  background: transparent;
}

/* ── 35. Overview page specific ── */
.light-mode .service-card,
.light-mode .kpi-pill,
.light-mode .uptime-card,
.light-mode .rt-card,
.light-mode .ssl-card,
.light-mode .docker-card,
.light-mode .backup-item {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .service-card.is-ok { border-left-color: #16a34a; }
.light-mode .service-card.is-bad { border-left-color: #dc2626; }
.light-mode .service-card.is-warn { border-left-color: #d97706; }

/* ── 36. Offline / online cards ── */
.light-mode .offline-card {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.light-mode .online-ok-card {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

/* ── 37. Incidents ── */
.light-mode .incident-row {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .incident-row:hover { background: #f9fafb; }
.light-mode .inc-stat {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

/* ── 38. SS Modal (interactive) ── */
.light-mode .ss-modal {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.light-mode .ss-modal-field {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}
.light-mode .ss-toast {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
.light-mode .ss-delete-btn {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* ── 39. Doc page ── */
.light-mode .doc-section h2,
.light-mode .doc-section h3,
.light-mode .doc-section h4 { color: #111827; }
.light-mode .doc-section p  { color: #374151; }
.light-mode .doc-table-header { background: #f9fafb; color: #374151; }
.light-mode .doc-table-row    { border-color: #e5e7eb; }
.light-mode .doc-table-row:hover { background: #f9fafb; }
.light-mode .doc-app-link-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .app-tab-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .toc-item { color: #374151; }
.light-mode .toc-item:hover { color: #2563eb; }

/* ── 40. App opties page ── */
.light-mode .ao-section h2,
.light-mode .ao-section h3 { color: #111827; }
.light-mode .ao-section p  { color: #374151; }
.light-mode .ao-feat {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.light-mode .ao-stat {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .ao-nav-item { color: #374151; }
.light-mode .ao-nav-item:hover { color: #2563eb; }
.light-mode .ao-doc-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .ao-sub,
.light-mode .ao-route { color: #6b7280; }
.light-mode .ao-operator { border-left-color: #2563eb; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Page-specific component overrides
   Covers all page component CSS files that have hardcoded dark colors
   ═══════════════════════════════════════════════════════════════ */

/* ── Server page ── */
.light-mode .server-metric {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .server-metric .sm-label { color: #9ca3af; }
.light-mode .server-metric .sm-value { color: #111827; }
.light-mode .server-metric .sm-sub   { color: #9ca3af; }
.light-mode .pm2-status.online  { background: rgba(22,163,74,0.08); color: #16a34a; border-color: rgba(22,163,74,0.2); }
.light-mode .pm2-status.stopped,
.light-mode .pm2-status.errored { background: rgba(220,38,38,0.08);  color: #dc2626; border-color: rgba(220,38,38,0.2); }

/* ── Database page ── */
.light-mode .db-metric {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .db-metric .dm-label { color: #9ca3af; }
.light-mode .db-metric .dm-value { color: #111827; }
.light-mode .activity-item {
  background: #f8fafc;
  border-color: #e5e7eb;
}
.light-mode .activity-item .act-value  { color: #111827; }
.light-mode .activity-item .act-label  { color: #9ca3af; }
.light-mode .activity-item.activity-error .act-value { color: #dc2626; }

/* ── Docker page ── */
.light-mode .dk-kpi {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .dk-val { color: #111827; }
.light-mode .dk-lbl { color: #9ca3af; }
.light-mode .dk-kpi.running { border-color: rgba(22,163,74,0.25); }
.light-mode .dk-kpi.running .dk-val { color: #16a34a; }
.light-mode .dk-kpi.stopped { border-color: rgba(220,38,38,0.25); }
.light-mode .dk-kpi.stopped .dk-val { color: #dc2626; }
.light-mode .container-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .cc-name  { color: #111827; }
.light-mode .cc-image { color: #9ca3af; }
.light-mode .cc-state-badge.running { background: rgba(22,163,74,0.08); color: #16a34a; }
.light-mode .cc-state-badge.stopped { background: rgba(220,38,38,0.08); color: #dc2626; }
.light-mode .ccm-label { color: #9ca3af; }
.light-mode .ccm-value { color: #374151; }
.light-mode .ccm-pct   { color: #9ca3af; }
.light-mode .ccm-bar-wrap { background: #e5e7eb; }
.light-mode .cc-footer { color: #9ca3af; border-top-color: #f1f5f9; }
.light-mode .compose-item {
  background: #f8fafc;
  border-color: #e5e7eb;
}
.light-mode .ci-name { color: #111827; }

/* ── Security page ── */
.light-mode .sec-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .sc-title { color: #9ca3af; }
.light-mode .sc-big   { color: #111827; }
.light-mode .sec-card.accent-green .sc-big { color: #16a34a; }
.light-mode .sec-card.accent-red .sc-big   { color: #dc2626; }
.light-mode .sc-note  { color: #9ca3af; }
.light-mode .sec-pct-bar { background: #e5e7eb; }
.light-mode .sec-pct-text { color: #9ca3af; }
.light-mode .as-item {
  background: #f8fafc;
  border-color: #e5e7eb;
}
.light-mode .as-val { color: #111827; }
.light-mode .as-item.ok .as-val   { color: #16a34a; }
.light-mode .as-item.fail .as-val { color: #dc2626; }
.light-mode .as-lbl { color: #9ca3af; }

/* ── SLA Uptime page ── */
.light-mode .gauge-val   { color: #111827; }
.light-mode .gauge-label { color: #9ca3af; }
.light-mode .uptime-gauge.ok .gauge-val   { color: #16a34a; }
.light-mode .uptime-gauge.fail .gauge-val { color: #dc2626; }
.light-mode .kpi-item {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .ki-val { color: #111827; }
.light-mode .ki-lbl { color: #9ca3af; }
.light-mode .kpi-item.ok .ki-val   { color: #16a34a; }
.light-mode .kpi-item.fail .ki-val { color: #dc2626; }
.light-mode .chart-label { color: #9ca3af; }
.light-mode .hc-hour     { color: #9ca3af; }
.light-mode .svc-item {
  background: #f8fafc;
  border-color: #e5e7eb;
}
.light-mode .svc-name   { color: #111827; }
.light-mode .svc-detail { color: #9ca3af; }
.light-mode .progress-ring .ring-bg { stroke: #e5e7eb; }
.light-mode .progress-ring .ring-pct { color: #111827; }
.light-mode .progress-ring .ring-pct small { color: #9ca3af; }

/* ── ILT Compliance page ── */
.light-mode .stat-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .stat-card .stat-num { color: #111827; }
.light-mode .stat-card .stat-lbl { color: #9ca3af; }
.light-mode .progress-ring-info .verdict-line { color: #9ca3af; }
.light-mode .progress-ring-info .remediation {
  background: rgba(37,99,235,0.05);
  color: #374151;
}

/* ── ILT Queue page ── */
.light-mode .q-kpi {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .qk-val { color: #111827; }
.light-mode .qk-lbl { color: #9ca3af; }
.light-mode .q-kpi.pending    { border-color: rgba(37,99,235,0.2); }
.light-mode .q-kpi.processing { border-color: rgba(139,92,246,0.2); }
.light-mode .q-kpi.completed  { border-color: rgba(22,163,74,0.2); }
.light-mode .q-kpi.failed     { border-color: rgba(220,38,38,0.2); }
.light-mode .q-kpi.blocked    { border-color: rgba(217,119,6,0.2); }
.light-mode .q-kpi.pending .qk-val    { color: #2563eb; }
.light-mode .q-kpi.processing .qk-val { color: #7c3aed; }
.light-mode .q-kpi.completed .qk-val  { color: #16a34a; }
.light-mode .q-kpi.failed .qk-val     { color: #dc2626; }
.light-mode .q-kpi.blocked .qk-val    { color: #d97706; }
.light-mode .q-badge { color: #374151; background: #f1f5f9; border-color: #e5e7eb; }
.light-mode .q-badge.pending    { background: rgba(37,99,235,0.06);  color: #2563eb; }
.light-mode .q-badge.processing { background: rgba(139,92,246,0.06); color: #7c3aed; }
.light-mode .q-badge.completed  { background: rgba(22,163,74,0.06);  color: #16a34a; }
.light-mode .q-badge.failed     { background: rgba(220,38,38,0.06);  color: #dc2626; }
.light-mode .q-badge.blocked    { background: rgba(217,119,6,0.06);  color: #d97706; }

/* ── Errors page ── */
.light-mode .error-metric {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .error-metric .em-value { color: #111827; }
.light-mode .error-metric .em-label { color: #9ca3af; }

/* ── Users page ── */
.light-mode .tabs-bar {
  background: #f1f5f9;
  border-color: #e5e7eb;
}
.light-mode .tab-btn {
  color: #6b7280;
  background: transparent;
}
.light-mode .tab-btn:hover { background: #e5e7eb; color: #111827; }
.light-mode .tab-btn.tab-active {
  background: #ffffff;
  color: #2563eb;
  border-color: #e5e7eb;
}
.light-mode .tab-badge { background: #e5e7eb; color: #6b7280; }
.light-mode .tab-active .tab-badge { background: #dbeafe; color: #2563eb; }
.light-mode .users-search-input {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
.light-mode .users-search-input::placeholder { color: #9ca3af; }
.light-mode .users-count { color: #6b7280; }
.light-mode .user-stat {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .user-stat:hover { background: #f8fafc; border-color: #d1d5db; }
.light-mode .user-stat .us-value { color: #111827; }
.light-mode .user-stat .us-label { color: #9ca3af; }

/* ── Visitors / Analytics page ── */
.light-mode .analytics-container { background: transparent; }
.light-mode .analytics-card {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .stat-label  { color: #9ca3af; }
.light-mode .stat-value  { color: #111827; }
.light-mode .stat-change.flat { color: #9ca3af; background: #f1f5f9; }
.light-mode .period-btn {
  background: #f1f5f9;
  color: #6b7280;
  border-color: #e5e7eb;
}
.light-mode .period-btn:hover { background: #e5e7eb; color: #111827; }
.light-mode .period-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.light-mode .period-label { color: #111827; }

/* ── Certificates page ── */
.light-mode .cert-card,
.light-mode .cert-grid > div,
.light-mode .domain-row {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}

/* ── Backups page ── */
.light-mode .backup-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

/* ── Settings page ── */
.light-mode .settings-section {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .settings-label { color: #9ca3af; }
.light-mode .settings-value { color: #111827; }
.light-mode .settings-row   { border-bottom-color: #f1f5f9; }
.light-mode .profile-name   { color: #111827; }
.light-mode .profile-role   { color: #9ca3af; }

/* ── Mijn App page ── */
.light-mode .app-metric {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-mode .am-value { color: #111827; }
.light-mode .am-label { color: #9ca3af; }

/* ── Section description text ── */
.light-mode .section-desc { color: #6b7280; }
.light-mode .tab-panel > p { color: #6b7280; }

/* ── Table rows in light mode ── */
.light-mode table th {
  background: #f8fafc;
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}
.light-mode table td {
  color: #374151;
  border-bottom-color: #f1f5f9;
}
.light-mode table tr:hover td { background: #f8fafc; }

/* ── Topbar layout: title+meta group left, theme btn right ── */
.page-topbar .topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.page-topbar .topbar-theme-btn {
  flex-shrink: 0;
}

/* -- Topbar layout --*/
.page-topbar .topbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.page-topbar #themeToggle {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Personal admin pages: override inline CSS variables for light mode ──*/
.light-mode {
  --dim: rgba(0,0,0,0.5);
  --card: rgba(0,0,0,0.03);
  --card2: #ffffff;
  --card3: #f8fafc;
  --border: #e5e7eb;
  --border2: #d1d5db;
  --glow: 0 0 20px rgba(37,99,235,0.06);
}

/* ══════════════════════════════════════════════════════
   PERSOONLIJKE ADMIN PAGINAS — LIGHT MODE (HOGE SPECIFICITEIT)
   html.light-mode slaat :root over omdat specificiteit (0,1,1) > (0,1,0)
   ══════════════════════════════════════════════════════ */
html.light-mode {
  --dim:     #6b7280;
  --text:    #111827;
  --bg:      #f3f4f6;
  --card:    #ffffff;
  --card2:   #f8fafc;
  --card3:   #f1f5f9;
  --border:  #e5e7eb;
  --border2: #d1d5db;
  --glow:    0 0 20px rgba(37,99,235,0.06);
}

/* Hardcoded dark backgrounds in personal admin pages */
html.light-mode .pa-modal {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 32px rgba(0,0,0,0.12);
  color: #111827;
}
html.light-mode .pa-modal h3,
html.light-mode .pa-modal h4 { color: #111827; }
html.light-mode .pa-modal-overlay { background: rgba(0,0,0,0.25); }
html.light-mode .pa-input-group select option {
  background: #ffffff;
  color: #111827;
}
html.light-mode .pa-table tr:hover td { background: #f8fafc; }
html.light-mode .pa-table th {
  background: #f1f5f9;
  border-bottom-color: #e5e7eb;
}
html.light-mode .pa-week-nav button {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #111827;
}
html.light-mode .pa-week-label { color: #111827; }
html.light-mode .pa-week-dates { color: #6b7280; }
html.light-mode .pa-bg-btn {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #6b7280;
}
html.light-mode .pa-bg-btn:hover { color: #111827; border-color: #2563eb; }
html.light-mode .pa-bg-btn.active {
  background: rgba(37,99,235,0.08);
  border-color: #2563eb;
  color: #2563eb;
}

/* ══ LIGHT MODE: HOGE PRIORITEIT MET !important voor persoonlijke admin paginas ══
   Nodig omdat de inline <style>:root{} na de externe stylesheet staat in de HTML  */
html.light-mode {
  --dim:     #6b7280 !important;
  --text:    #111827 !important;
  --bg:      #f3f4f6 !important;
  --card:    #ffffff !important;
  --card2:   #f8fafc !important;
  --card3:   #f1f5f9 !important;
  --border:  #e5e7eb !important;
  --border2: #d1d5db !important;
  --glow:    0 0 20px rgba(37,99,235,0.06) !important;
}

/* ══════════════════════════════════════════════════════
   GLOBAL LIGHT MODE — generic dark-card overrides
   Covers pages that use hardcoded rgba(15,23,42,…) backgrounds
   ══════════════════════════════════════════════════════ */

/* Body: verwijder de donkere gradient */
html.light-mode body,
.light-mode body {
  background: #f3f4f6 !important;
}

/* Content area */
html.light-mode .tesla-content-area:not(.full-page) {
  background: transparent !important;
}

/* Generic card patterns used across pages */
html.light-mode .pa-card,
html.light-mode .ops-card,
html.light-mode .card,
html.light-mode .tesla-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

/* pa-card-loading */
html.light-mode .pa-card-loading { color: #6b7280; }

/* Topbar */
html.light-mode .page-topbar {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3) !important;
}

html.light-mode .page-topbar .page-title,
html.light-mode .page-title {
  color: #ffffff !important;
}

html.light-mode .tesla-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
html.light-mode .tesla-card h2,
html.light-mode .tesla-card h3 {
  color: #1d4ed8 !important;
}
html.light-mode .tesla-card h2 ion-icon,
html.light-mode .tesla-card h3 ion-icon {
  color: #2563eb !important;
}
html.light-mode .tesla-card p,
html.light-mode .tesla-card .muted {
  color: #6b7280 !important;
}

/* Generic metric / kpi cards using hardcoded dark backgrounds */
html.light-mode .db-metric,
html.light-mode .server-metric,
html.light-mode .error-metric,
html.light-mode .dk-kpi,
html.light-mode .container-card,
html.light-mode .compose-item,
html.light-mode .sec-card,
html.light-mode .as-item,
html.light-mode .backup-group,
html.light-mode .backup-stat,
html.light-mode .activity-item,
html.light-mode .uptime-gauge,
html.light-mode .kpi-item,
html.light-mode .q-kpi,
html.light-mode .tp-card,
html.light-mode .syslog-filters,
html.light-mode .acc-card,
html.light-mode .acc-stat {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

html.light-mode .container-card.running { border-left-color: #16a34a !important; }
html.light-mode .container-card.stopped { border-left-color: #dc2626 !important; }
html.light-mode .compose-item.up { border-left-color: #16a34a !important; }
html.light-mode .compose-item.down { border-left-color: #dc2626 !important; }

html.light-mode .dk-kpi.running { border-color: rgba(22,163,74,0.35) !important; }
html.light-mode .dk-kpi.stopped { border-color: rgba(220,38,38,0.35) !important; }

/* Value / label text in dark-coded component */
html.light-mode .dk-val,
html.light-mode .cc-name,
html.light-mode .ci-name,
html.light-mode .sc-big,
html.light-mode .as-val,
html.light-mode .dm-value,
html.light-mode .sm-value,
html.light-mode .em-value,
html.light-mode .act-value,
html.light-mode .gauge-val,
html.light-mode .backup-group h3 {
  color: #111827 !important;
}

html.light-mode .dk-lbl,
html.light-mode .cc-image,
html.light-mode .cc-footer,
html.light-mode .ci-status,
html.light-mode .ci-status.up,
html.light-mode .sc-title,
html.light-mode .sc-note,
html.light-mode .as-lbl,
html.light-mode .dm-label,
html.light-mode .sm-label,
html.light-mode .sm-sub,
html.light-mode .em-label,
html.light-mode .act-label,
html.light-mode .gauge-label,
html.light-mode .ccm-label,
html.light-mode .ccm-value,
html.light-mode .backup-date,
html.light-mode .backup-size,
html.light-mode .syslog-filters label,
html.light-mode .acc-info-user,
html.light-mode .acc-info-pages,
html.light-mode .acc-stat-lbl {
  color: #6b7280 !important;
}

html.light-mode .acc-info-name,
html.light-mode .acc-stat-val {
  color: #111827 !important;
}

/* Status badges: keep accessible colors, just tweak backgrounds */
html.light-mode .pm2-status.online {
  background: rgba(22,163,74,0.1) !important;
  color: #15803d !important;
  border-color: rgba(22,163,74,0.25) !important;
}
html.light-mode .pm2-status.stopped,
html.light-mode .pm2-status.errored {
  background: rgba(220,38,38,0.1) !important;
  color: #b91c1c !important;
  border-color: rgba(220,38,38,0.25) !important;
}
html.light-mode .cc-state-badge.running {
  background: rgba(22,163,74,0.1) !important;
  color: #15803d !important;
}
html.light-mode .cc-state-badge.stopped {
  background: rgba(220,38,38,0.1) !important;
  color: #b91c1c !important;
}

/* Progress/bar backgrounds */
html.light-mode .ccm-bar-wrap,
html.light-mode .sec-pct-bar { background: #e5e7eb !important; }
html.light-mode .sec-pct-text { color: #374151 !important; }

/* Audit inline: .aud- components */
html.light-mode .aud-stat,
html.light-mode .aud-detail-panel,
html.light-mode .aud-live-feed,
html.light-mode .aud-user-card,
html.light-mode .aud-user-list-card,
html.light-mode .aud-session-card,
html.light-mode .aud-filter-bar,
html.light-mode .aud-change-item,
html.light-mode .aud-panel {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
html.light-mode .aud-live-feed { box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
html.light-mode .aud-live-header { background: rgba(37,99,235,0.04) !important; }
html.light-mode .aud-tabs { background: #f8fafc !important; border-color: #e5e7eb !important; }
html.light-mode .aud-stat-val,
html.light-mode .aud-user-name,
html.light-mode .aud-detail-title,
html.light-mode .aud-live-user,
html.light-mode .aud-session-device,
html.light-mode .aud-change-title,
html.light-mode .aud-tl-title,
html.light-mode .aud-user-list-header span:first-child { color: #111827 !important; }
html.light-mode .aud-stat-lbl,
html.light-mode .aud-user-meta,
html.light-mode .aud-live-action,
html.light-mode .aud-live-detail,
html.light-mode .aud-live-time,
html.light-mode .aud-session-meta,
html.light-mode .aud-tl-desc,
html.light-mode .aud-tl-time { color: #6b7280 !important; }
html.light-mode .aud-filter-group label { color: #374151 !important; }
html.light-mode .aud-filter-group input,
html.light-mode .aud-filter-group select {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
html.light-mode .aud-detail-row:hover,
html.light-mode .aud-user-row:hover { background: #f8fafc !important; }
html.light-mode .aud-user-row.selected { background: rgba(37,99,235,0.06) !important; }
html.light-mode .aud-export-bar { background: #f8fafc !important; border-color: #e5e7eb !important; }
html.light-mode .aud-change-before { background: rgba(220,38,38,0.05) !important; border-color: rgba(220,38,38,0.15) !important; }
html.light-mode .aud-change-after { background: rgba(22,163,74,0.05) !important; border-color: rgba(22,163,74,0.15) !important; }
html.light-mode .aud-tl-chip { background: #f1f5f9 !important; border-color: #e5e7eb !important; color: #374151 !important; }
html.light-mode .aud-live-toggle { border-color: #d1d5db !important; color: #374151 !important; }
html.light-mode .aud-live-toggle.active { background: rgba(37,99,235,0.08) !important; border-color: #2563eb !important; color: #2563eb !important; }
html.light-mode .aud-detail-pager { border-color: #e5e7eb !important; }

/* ══════════════════════════════════════════════════════
   LOADING BARS & SKELETON STATES (gedeeld voor alle pagina's)
   ══════════════════════════════════════════════════════ */

/* Top progress bar — fixed at top of page */
.pa-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.pa-progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan, #06b6d4));
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}
.pa-progress-bar.loading::after {
  animation: pa-progress-indeterminate 1.4s ease-in-out infinite;
  width: 100%;
}
.pa-progress-bar.done::after {
  width: 100%;
  transition: width 0.2s ease;
}
@keyframes pa-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Inline loading spinner for buttons */
.pa-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pa-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes pa-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading rows */
.pa-skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  animation: pa-skeleton-pulse 1.4s ease-in-out infinite;
}
.pa-skeleton-row:last-child { border-bottom: none; }
.pa-skeleton-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card2);
  flex-shrink: 0;
}
.pa-skeleton-lines { flex: 1; }
.pa-skeleton-line {
  height: 10px;
  border-radius: 5px;
  background: var(--card2);
  margin-bottom: 6px;
}
.pa-skeleton-line:last-child { margin-bottom: 0; width: 60%; }
@keyframes pa-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Loading overlay for card sections */
.pa-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  color: var(--dim);
  font-size: 0.85rem;
}
.pa-card-loading .pa-spin {
  width: 18px;
  height: 18px;
  border-width: 2.5px;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Zichtbaar op schermen ≤ 768px — vervangt de zijbalk op mobiel
══════════════════════════════════════════════════════════════════ */
.ops-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--card-bg, #0d1526);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  z-index: 200;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  /* Safe area inset voor notch-telefoons (iPhone X+) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ops-mobile-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  background: none;
  border: none;
  color: var(--dim, #6b7280);
  font-size: 10px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  transition: color 0.15s;
}

.ops-mobile-nav-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  flex-shrink: 0;
}

.ops-mobile-nav-btn.active {
  color: var(--blue, #3b82f6);
}

.ops-mobile-nav-btn:active {
  opacity: 0.7;
}

/* Hamburger menu overlay (uitgeklapt via menu-knop in bottom nav) */
.ops-mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.55);
}
.ops-mobile-menu-overlay.open {
  display: block;
}

/* Hamburger button in topbar — verborgen op desktop */
.ops-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--tesla-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   VOLLEDIG RESPONSIEF ONTWERP — ≤ 768px
   Sidebar = verborgen drawer, schuift in vanuit links bij hamburger
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Sidebar: verborgen drawer ── */
  .tesla-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    z-index: 310 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    flex-shrink: 0;
    /* Labels WEL tonen in drawer */
  }
  .tesla-sidebar::-webkit-scrollbar { display: none !important; }

  /* Drawer open: slide in vanuit links */
  body.mobile-sidebar-open .tesla-sidebar {
    transform: translateX(0) !important;
  }

  /* Overlay: donkert content af wanneer drawer open is */
  body.mobile-sidebar-open .ops-mobile-menu-overlay {
    display: block !important;
    z-index: 305;
  }

  /* Label + collapse knop wél tonen in de volledige drawer */
  .tesla-sidebar .sidebar-label,
  .tesla-sidebar .sidebar-title {
    display: inline !important;
  }
  .tesla-sidebar .sidebar-collapse-btn,
  .tesla-sidebar .sidebar-logout-label {
    display: inline !important;
  }
  .tesla-sidebar .sidebar-separator span {
    display: inline !important;
  }

  /* Drawer navigatie-items */
  .tesla-sidebar .sidebar-category {
    justify-content: flex-start;
    padding: 10px 14px;
    width: 100%;
    margin: 0;
    border-radius: 8px;
    gap: 10px;
  }
  .tesla-sidebar .sidebar-header {
    padding: 16px 14px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .tesla-sidebar .sidebar-nav {
    padding: 8px 8px;
    gap: 2px;
    align-items: stretch;
  }
  .tesla-sidebar .sidebar-footer {
    padding: 8px 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .tesla-sidebar .sidebar-logout {
    justify-content: flex-start;
    padding: 10px 14px;
    width: 100%;
    margin: 0;
    border-radius: 8px;
    gap: 10px;
    border: none;
    background: transparent;
  }
  .tesla-sidebar .sidebar-logout .menu-icon svg,
  .tesla-sidebar .sidebar-logout svg {
    width: 18px;
    height: 18px;
    stroke: #94a3b8;
    flex-shrink: 0;
  }
  .tesla-sidebar .sidebar-logout:hover .menu-icon svg {
    stroke: #fca5a5;
  }
  .tesla-sidebar .sidebar-separator {
    margin: 4px 6px;
    padding: 4px 8px 2px;
    height: auto;
    background: transparent;
  }

  /* ── Hamburger in topbar ── */
  .ops-hamburger-btn {
    display: inline-flex !important;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
  }
  .ops-hamburger-btn:hover { background: rgba(255,255,255,0.07); }

  /* ── Container: content vult volledige breedte (sidebar is fixed, buiten flow) ── */
  .tesla-settings-container {
    flex-direction: row;
    overflow: hidden;
    height: 100dvh;
  }
  /* Sidebar is fixed/off-screen, content pakt volledige breedte */
  .tesla-settings-container > .tesla-sidebar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    width: 0 !important;
  }

  /* ── Content area: scrollbaar ── */
  /* Full-page (chat/ai/agenda): behoud flex+fixed height voor interne scroll */
  .tesla-content-area.full-page {
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1;
    min-width: 0;
    height: 100dvh;
  }

  /* Gewone pagina's: block layout zodat inhoud vrij kan groeien en de container scrolt */
  .tesla-content-area:not(.full-page) {
    display: block !important;
    padding: 12px 10px env(safe-area-inset-bottom, 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1;
    min-width: 0;
    height: 100dvh;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
  }
  .tesla-content-area:not(.full-page)::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .tesla-content-area:not(.full-page) > * {
    display: block;
  }
  .tesla-content-area:not(.full-page) .page-topbar {
    display: flex;
  }
  .tesla-content-area:not(.full-page) .page-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ── Compacte topbar op tablet/mobiel ── */
  .topbar-theme-btn { margin-left: auto; flex-shrink: 0; }

  /* ── Grid layouts → enkele kolom op mobiel ── */
  .page-grid-2-1 {
    grid-template-columns: 1fr !important;
  }
  .grid,
  .stat-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-grid.two-col,
  .grid.two-col {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Kaarten ── */
  .card, .pa-card, .ops-card {
    border-radius: 10px;
    padding: 12px 14px;
  }

  /* ── Tabellen: horizontaal scrollen ── */
  .table-wrap, .ops-table-wrap, [class*="-table-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .table-wrap::-webkit-scrollbar, .ops-table-wrap::-webkit-scrollbar { display: none; }
  /* Wrap bare tables (zonder wrapper div) in horizontale scroll */
  .tesla-card table, section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 420px;
    max-width: 100%;
    scrollbar-width: none;
  }
  .tesla-card table::-webkit-scrollbar { display: none; }
  table { min-width: 480px; }

  /* ── Tabs ── */
  .tab-bar, .tabs, [class*="-tabs"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  /* ── Filter bars ── */
  .filter-bar, [class*="-filter-bar"] {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Touch-vriendelijke hoogte ── */
  button, .btn, input, select, textarea { min-height: 40px; }

  /* ── Modals: bottom sheet stijl ── */
  .modal-dialog, .modal-content, [class*="-modal"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  /* ── Toasts ── */
  .toast-container, #toast-container {
    bottom: env(safe-area-inset-bottom, 12px) !important;
  }

  /* ── Alert banners ── */
  .alert, .ops-alert {
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 10px 12px;
  }

  /* ── Stat-cards ── */
  .stat-cards-row, .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .aud-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .aud-stat { padding: 10px 12px !important; }

  /* ── Chat ── */
  .chat-shell {
    grid-template-columns: 1fr;
    height: 100dvh;
  }
  .chat-sidebar { display: none; }

  /* ── Grafana ── */
  iframe.grafana-frame {
    height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
  }

  /* ── Topbar theme toggle ── */
  .topbar-theme-btn { padding: 6px; }

  /* ── Docker / server cards ── */
  .docker-card-grid, .server-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Chat/AI: geen padding */
  body[data-page="chat"] .tesla-content-area.full-page,
  body[data-page="ai"] .tesla-content-area.full-page {
    padding: 0 !important;
    height: 100dvh;
  }

  /* Email / mijn-app: iframe full-height, geen eigen scroll */
  body[data-page="email"] .tesla-content-area,
  body[data-page="mijn-app"] .tesla-content-area {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    height: 100dvh;
  }
}

/* ── Zeer kleine schermen (≤ 390px) ── */
@media (max-width: 390px) {
  /* Sidebar blijft fixed/hidden drawer — NIET overschrijven */
  .tesla-sidebar {
    width: 100dvw !important;
    min-width: 0 !important;
    position: fixed !important;
    transform: translateX(-100%) !important;
  }
  body.mobile-sidebar-open .tesla-sidebar {
    transform: translateX(0) !important;
  }
  .tesla-sidebar .sidebar-category,
  .tesla-sidebar .sidebar-logout {
    width: auto;
  }
  .tesla-content-area,
  .tesla-content-area.full-page {
    padding: 8px 8px env(safe-area-inset-bottom, 8px) !important;
  }
  .stat-cards-row, .stats-row, .aud-stats-row {
    grid-template-columns: 1fr !important;
  }
  .card, .pa-card, .ops-card {
    padding: 10px 11px;
    border-radius: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — mobiele navigatiebalk aanpassing
══════════════════════════════════════════════════════════════════ */
.light-mode .ops-mobile-nav {
  background: #ffffff;
  border-top-color: #e5e7eb;
}
.light-mode .ops-mobile-nav-btn {
  color: #6b7280;
}
.light-mode .ops-mobile-nav-btn.active {
  color: #2563eb;
}