/* ═══════════════════════════════════════════════════════════════════════
   ArgusRecon Fleet Manager — Business Owner Workspace
   Exact Pixel-Perfect SaaS Theme matching Umar Farooque's Reference
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/web/assets/inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background: #f4f7fb;
  font-size: 13px;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --ink: #0f172a;
  --muted: #64748b;
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --accent-cyan: #06b6d4;
  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #f97316;
  --warning-bg: #fff7ed;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --purple: #8b5cf6;
  --purple-bg: #f5f3ff;
  --side: 240px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.09);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
a { text-decoration: none; color: inherit; }

/* ── App Shell & Sidebar ────────────────────────────────────────── */
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side);
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.02);
}

.sidebar .brand-title {
  color: #0F172A !important;
  font-weight: 850;
}
.sidebar .brand-title span {
  color: #2563EB !important;
}
.sidebar .brand-sub {
  color: #64748B !important;
  font-weight: 550;
}
.sidebar .nav-item {
  color: #475569;
  font-weight: 600;
  transition: all 0.18s ease;
}
.sidebar .nav-item:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.sidebar .nav-item.active {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-left: 3px solid #2563EB;
  box-shadow: none !important;
  font-weight: 750;
}
.sidebar .sidebar-footer {
  border-top: 1px solid #E2E8F0;
}
.sidebar .quota-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}
.sidebar .quota-header-left {
  color: #0F172A !important;
}
.sidebar .quota-header-left svg {
  color: #2563EB !important;
}
.sidebar .quota-percent {
  color: #059669 !important;
  font-weight: 750;
}
.sidebar .progress-bar-bg {
  background: #E2E8F0 !important;
}
.sidebar .progress-bar-fill {
  background: #2563EB !important;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 24px 20px 20px;
  text-decoration: none;
}
.brand-pin-logo {
  width: 36px;
  height: 36px;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.25));
}
.brand-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
.brand-title span {
  color: #0284c7;
}
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.sidebar-nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s ease;
  text-align: left;
}
.nav-item:hover {
  background: var(--surface-subtle);
  color: #0f172a;
}
.nav-item.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}
.nav-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--line);
}
.quota-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.quota-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 8px;
}
.quota-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-weight: 600;
}
.quota-header-left svg { color: #0284c7; }
.quota-percent {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4 0%, #10b981 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ── Main Content Area ─────────────────────────────────────────── */
.main-shell {
  margin-left: var(--side);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 70px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f9ff;
  color: #0284c7;
  display: grid;
  place-items: center;
}
.topbar-title-wrap h1 {
  font-size: 18px;
  font-weight: 750;
  color: #0f172a;
  letter-spacing: -0.3px;
}
.topbar-title-wrap p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.alerts-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  transition: all 0.15s;
}
.alerts-btn:hover { background: #f8fafc; border-color: var(--line-strong); }
.badge-count {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.datetime-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  color: var(--muted);
}
.datetime-chip strong {
  font-size: 13px;
  color: #0f172a;
}
.user-profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.user-profile-text {
  text-align: left;
}
.user-profile-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.user-profile-role {
  font-size: 10px;
  color: var(--muted);
}

.content-body {
  padding: 20px 28px 40px;
  flex: 1;
}

/* ── Top Metric Cards Row (Image 1) ─────────────────────────────── */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.metric-circle-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  transition: all 0.2s ease;
}
.metric-circle-icon svg { width: 22px; height: 22px; stroke-width: 2px; }
.metric-circle-icon.green { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.metric-circle-icon.blue { background: #EFF6FF; color: #2563EB; border: 1px solid #DBEAFE; }
.metric-circle-icon.orange { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
.metric-circle-icon.gray { background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }
.metric-circle-icon.purple { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.metric-circle-icon.cyan { background: #ECFEFF; color: #0891B2; border: 1px solid #A5F3FC; }
.metric-circle-icon.red { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }

.metric-info { flex: 1; min-width: 0; }
.metric-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}
.metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-arrow {
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 700;
}

/* ── TAB 1: LIVE MAP & 3D RECON ─────────────────────────────────── */
.map-recon-layout {
  position: relative;
  height: calc(100vh - 215px);
  min-height: 580px;
  background: #e2e8f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

#leaflet-map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Floating Field Staff List (Left Overlay) */
.floating-staff-panel {
  position: absolute;
  top: 14px;
  left: 14px;
  bottom: 14px;
  width: 330px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.staff-panel-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.staff-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
}
.staff-panel-title svg { color: #0284c7; }

.staff-search-box {
  padding: 10px 14px 6px;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-wrap svg {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}
.search-input-wrap input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  font-size: 11.5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s;
}
.search-input-wrap input:focus {
  border-color: #0284c7;
  background: #fff;
}

.staff-filter-pills {
  display: flex;
  gap: 6px;
  padding: 6px 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.staff-filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
  transition: all 0.15s;
}
.filter-pill.active {
  background: #0284c7;
  color: #fff;
}

.staff-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Individual Staff Row Item (Image 1) */
.staff-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.14s ease;
  text-align: left;
}
.staff-card-row:hover {
  background: #f8fafc;
  border-color: var(--line);
}
.staff-card-row.active {
  background: #f0f9ff;
  border-color: #bae6fd;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.staff-avatar-wrap {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
}
.staff-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #e2e8f0;
  display: block;
}
.status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.status-dot.green { background: #10b981; }
.status-dot.orange { background: #f97316; }
.status-dot.gray { background: #94a3b8; }

.staff-card-details {
  flex: 1;
  min-width: 0;
}
.staff-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-card-model {
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-card-badge {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.badge-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.badge-pill-tag.green { background: #ecfdf5; color: #059669; }
.badge-pill-tag.orange { background: #fff7ed; color: #ea580c; }
.badge-pill-tag.gray { background: #f1f5f9; color: #64748b; }
.badge-sub-text {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
}
.staff-more-btn {
  color: #94a3b8;
  font-size: 16px;
  padding: 0 4px;
}

/* Floating Map Controls (Top Right) */
.map-top-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.map-style-segmented {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-style-segmented button {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: var(--surface);
  transition: all 0.15s;
}
.map-style-segmented button.active {
  background: #0284c7;
  color: #fff;
}
.map-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.map-action-btn.active {
  color: #0284c7;
  border-color: #0284c7;
  background: #f0f9ff;
}

/* Vertical Zoom / Recenter Tools */
.map-vertical-tools {
  position: absolute;
  top: 80px;
  right: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.tool-icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #334155;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.tool-icon-btn:last-child { border-bottom: none; }
.tool-icon-btn:hover { background: #f8fafc; color: #0284c7; }

/* Selected Staff Floating Callout Popup (Docked safely at bottom-left) */
.staff-map-callout {
  display: none;
}
/* ══════════════════════════════════════════════════════════════
   UBER ULTRA-CLASSIC LIVE TRIP COCKPIT (LUXURY GLASSMORPHISM)
   ══════════════════════════════════════════════════════════════ */
@keyframes uberSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uberPulseHalo {
  0% { transform: scale(0.95); opacity: 0.9; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes uberDashFlow {
  to { stroke-dashoffset: -40; }
}

.uber-animated-trail {
  animation: uberDashFlow 1.1s linear infinite !important;
}

.uber-cockpit-island {
  position: absolute;
  bottom: 24px;
  left: 360px;
  right: auto;
  z-index: 500;
  width: 480px;
  max-width: calc(100% - 390px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: uberSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.uber-cockpit-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.uber-driver-avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
}

.uber-driver-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.uber-pulse-dot-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.uber-pulse-dot-indicator.moving { background: #10b981; }
.uber-pulse-dot-indicator.stopped { background: #f59e0b; }
.uber-pulse-dot-indicator.offline { background: #94a3b8; }

.uber-driver-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uber-name-tier {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uber-driver-name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uber-badge-status {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2.5px 8px;
  border-radius: 999px;
}
.uber-badge-status.green { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.uber-badge-status.orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.uber-badge-status.gray { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.uber-vehicle-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}
.uber-vehicle-model { font-weight: 650; color: #475569; }
.uber-sep { color: #cbd5e1; }
.uber-telemetry-meta { color: #0284c7; font-weight: 650; }

.uber-cockpit-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: none;
}
.uber-cockpit-close-btn:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #ef4444;
}

.uber-route-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
}

.uber-route-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(37, 99, 235, 0.1);
  display: grid;
  place-items: center;
  flex: none;
}

.uber-route-details {
  flex: 1;
  min-width: 0;
}

.uber-address-main {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uber-trip-summary {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 1px;
}

.uber-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.uber-bento-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.uber-pill-label {
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-transform: uppercase;
}

.uber-pill-val {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uber-bento-pill.speed .uber-pill-val { color: #10b981; }
.uber-bento-pill.precision .uber-pill-val { color: #0284c7; }

.uber-cockpit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.uber-act-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.uber-act-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.uber-act-btn.follow-btn {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.uber-act-btn.follow-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.uber-act-btn.cam-front {
  background: #fdf2f8;
  border-color: #fbcfe8;
  color: #db2777;
}
.uber-act-btn.cam-back {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0d9488;
}
.uber-act-btn.mirror-btn {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

/* ══════════════════════════════════════════════════════════════
   UBER AGENT NAVIGATION PUCK MARKERS
   ══════════════════════════════════════════════════════════════ */
.uber-puck-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.uber-puck-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  border-radius: 50%;
  pointer-events: none;
}
.uber-puck-marker.moving .uber-puck-halo {
  border: 2px solid #10b981;
  animation: uberPulseHalo 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.uber-puck-core {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), 0 0 0 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uber-puck-marker.selected .uber-puck-core {
  width: 46px;
  height: 46px;
  box-shadow: 0 0 0 4px #2563eb, 0 8px 24px rgba(37, 99, 235, 0.45);
}

.uber-puck-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.uber-puck-arrow {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #2563eb;
  transition: transform 0.3s ease;
}

.uber-puck-chip {
  position: absolute;
  bottom: calc(100% + 8px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 750;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  letter-spacing: -0.01em;
}
.uber-puck-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.uber-start-pin .uber-pin-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Tactical Stealth Mode Overrides for Callout */
body.theme-tactical .staff-map-callout {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(14px);
  border-color: #334155;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
body.theme-tactical .callout-name {
  color: #f8fafc !important;
}
body.theme-tactical .callout-model {
  color: #94a3b8 !important;
}
body.theme-tactical .callout-meta-row {
  color: #cbd5e1 !important;
}
body.theme-tactical .callout-actions-row {
  border-top-color: #334155;
}
body.theme-tactical .callout-action-btn {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}
body.theme-tactical .callout-action-btn:hover {
  background: #334155;
  border-color: #64748b;
}
body.theme-tactical .callout-action-btn.camera-btn.front {
  background: rgba(219, 39, 119, 0.15);
  border-color: rgba(219, 39, 119, 0.4);
  color: #f472b6;
}
body.theme-tactical .callout-action-btn.camera-btn.back {
  background: rgba(13, 148, 136, 0.15);
  border-color: rgba(13, 148, 136, 0.4);
  color: #2dd4bf;
}
body.theme-tactical .callout-action-btn.recenter-btn {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.4);
  color: #4ade80;
}
body.theme-tactical .callout-action-btn.screen-btn {
  background: rgba(2, 132, 199, 0.15);
  border-color: rgba(2, 132, 199, 0.4);
  color: #38bdf8;
}
body.theme-tactical .callout-close {
  background: #334155;
  color: #cbd5e1;
}
body.theme-tactical .callout-close:hover {
  background: #475569;
  color: #ffffff;
}

/* Tactical Stealth Mode Overrides for Uber Cockpit */
body.theme-tactical .uber-cockpit-island {
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-color: rgba(51, 65, 85, 0.85);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body.theme-tactical .uber-driver-name {
  color: #f8fafc;
}
body.theme-tactical .uber-vehicle-model {
  color: #94a3b8;
}
body.theme-tactical .uber-route-strip {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(51, 65, 85, 0.9);
}
body.theme-tactical .uber-address-main {
  color: #f1f5f9;
}
body.theme-tactical .uber-trip-summary {
  color: #94a3b8;
}
body.theme-tactical .uber-bento-pill {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(51, 65, 85, 0.8);
}
body.theme-tactical .uber-pill-label {
  color: #64748b;
}
body.theme-tactical .uber-pill-val {
  color: #f8fafc;
}
body.theme-tactical .uber-act-btn {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(71, 85, 105, 0.8);
  color: #f1f5f9;
}
body.theme-tactical .uber-act-btn.follow-btn {
  background: #2563eb;
  border-color: #3b82f6;
  color: #ffffff;
}
body.theme-tactical .uber-cockpit-close-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
body.theme-tactical .uber-cockpit-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
}

/* ── Leaflet Custom Pin Markers ──────────────────────────────────── */
.staff-marker-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
}
.staff-marker-halo {
  padding: 2.5px;
  border-radius: 50%;
  display: inline-block;
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}
.staff-marker-halo.orange { background: #f97316; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.45); }
.staff-marker-halo.gray { background: #94a3b8; box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3); }
.staff-marker-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #fff;
  display: block;
  object-fit: cover;
}
.staff-marker-point {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #10b981;
  margin-top: -2px;
}
.staff-marker-point.orange { border-top-color: #f97316; }
.staff-marker-point.gray { border-top-color: #94a3b8; }

/* ── TAB 2: EMPLOYEES & DEVICES (IMAGE 2) ────────────────────────── */
.devices-tab-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.devices-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.25fr;
  gap: 14px;
}
.enroll-cta-card {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  cursor: pointer;
  transition: transform 0.15s;
}
.enroll-cta-card:hover { transform: translateY(-2px); }
.enroll-cta-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
}
.enroll-cta-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 3px;
}

/* Filter & Search Bar */
.device-filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.filter-search-input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 440px;
}
.filter-search-input svg {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: #94a3b8;
}
.filter-search-input input {
  width: 100%;
  padding: 7px 12px 7px 34px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  outline: none;
}
.filter-search-input input:focus { border-color: #0284c7; background: #fff; }

.filter-dropdowns {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-select {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #334155;
  outline: none;
}
.view-mode-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-mode-toggle button {
  padding: 6px 10px;
  color: #64748b;
  background: #f8fafc;
}
.view-mode-toggle button.active {
  background: #0284c7;
  color: #fff;
}

/* 4-Column Device Grid */
.device-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* High-Density Device List View */
.device-list-table-wrap {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.device-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
.device-list-table th {
  padding: 10px 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.device-list-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.device-list-table tr:hover td {
  background: #f8fafc;
  cursor: pointer;
}
.device-list-table tr:last-child td {
  border-bottom: none;
}

.emp-device-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s;
}
.emp-device-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  border-color: #38bdf8;
}
.emp-device-card.moving {
  background: radial-gradient(circle at 95% 5%, rgba(16, 185, 129, 0.09) 0%, rgba(255, 255, 255, 1) 65%);
}
.emp-device-card.stopped {
  background: radial-gradient(circle at 95% 5%, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 1) 65%);
}
.emp-device-card.offline {
  background: radial-gradient(circle at 95% 5%, rgba(148, 163, 184, 0.08) 0%, rgba(255, 255, 255, 1) 65%);
}

.emp-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.emp-card-avatar-wrap {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}
.emp-card-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #e2e8f0;
  display: block;
}
.emp-card-meta {
  flex: 1;
  min-width: 0;
}
.emp-card-name {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-card-role {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.emp-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  margin-top: 4px;
}
.emp-card-badge.green { background: #ecfdf5; color: #059669; }
.emp-card-badge.orange { background: #fff7ed; color: #ea580c; }
.emp-card-badge.gray { background: #f1f5f9; color: #64748b; }
.emp-card-dots {
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
}

/* Device specs line */
.emp-device-info-box {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.emp-device-icon {
  width: 24px;
  height: 32px;
  border-radius: 6px;
  background: #0f172a;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex: none;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
.emp-device-icon svg {
  color: #38bdf8;
}
.emp-device-texts {
  flex: 1;
  min-width: 0;
}
.emp-device-model {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-device-os {
  font-size: 9.5px;
  color: var(--muted);
}

.emp-battery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.battery-indicator-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: #334155;
}
.battery-bar-mini {
  width: 50px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.battery-bar-fill {
  height: 100%;
  background: #10b981;
}

.emp-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}
.btn-action-track {
  background: #0284c7;
  color: #fff;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-action-track:hover { background: #0369a1; }
.btn-action-secondary {
  background: #f8fafc;
  border: 1px solid var(--line);
  color: #334155;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-action-secondary:hover { background: #f1f5f9; }

/* ── TAB 2.1: DEVICE DETAILS SUB-VIEW (IMAGE 3) ─────────────────── */
.device-detail-subview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.breadcrumb-bar a {
  color: #0284c7;
  font-weight: 600;
}

.detail-header-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.detail-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.detail-large-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  flex: none;
}
.detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-title-name {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}
.detail-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.detail-status-pill.green { background: #ecfdf5; color: #059669; }
.detail-status-pill.orange { background: #fff7ed; color: #ea580c; }
.detail-status-pill.gray { background: #f1f5f9; color: #64748b; }
.detail-role-row {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0 6px;
}
.detail-contact-row {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #334155;
}

.detail-phone-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}
.detail-phone-screen {
  font-size: 24px;
}
.detail-phone-meta {
  font-size: 11px;
  color: var(--muted);
}
.detail-phone-meta strong {
  color: #0f172a;
  font-size: 12px;
  display: block;
}

.detail-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-detail-primary {
  background: #0284c7;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.btn-detail-primary:hover { background: #0369a1; }
.btn-detail-camera {
  background: #8b5cf6;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-detail-camera:hover { background: #7c3aed; }
.btn-detail-lock {
  background: #ef4444;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-detail-lock:hover { background: #dc2626; }

/* Subtabs bar */
.detail-subtabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.subtab-btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  transition: all 0.15s;
}
.subtab-btn:hover { background: #f1f5f9; color: #0f172a; }
.subtab-btn.active { background: #0284c7; color: #fff; }

/* 5 Status Badges Row (Image 3) */
.detail-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.detail-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.stat-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.stat-pill-icon.green { background: #ecfdf5; color: #10b981; }
.stat-pill-icon.blue { background: #f0f9ff; color: #0284c7; }
.stat-pill-icon.yellow { background: #fefce8; color: #eab308; }
.stat-pill-icon.purple { background: #f5f3ff; color: #8b5cf6; }
.stat-pill-icon.red { background: #fef2f2; color: #ef4444; }

.stat-pill-info { flex: 1; min-width: 0; }
.stat-pill-label { font-size: 10.5px; color: var(--muted); }
.stat-pill-value {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3-Column Widgets Grid (Image 3) */
.detail-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.detail-widget-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.widget-title {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}
.widget-link {
  font-size: 11px;
  color: #0284c7;
  font-weight: 600;
}

/* Timeline */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}
.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.timeline-dot.green { background: #10b981; }
.timeline-dot.orange { background: #f97316; }
.timeline-dot.blue { background: #0284c7; }
.timeline-text { font-size: 11px; }
.timeline-text strong { color: #0f172a; display: block; font-size: 11.5px; }
.timeline-text span { color: var(--muted); }

/* Quick Actions 3x3 Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.quick-action-tile {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  cursor: pointer;
}
.quick-action-tile:hover {
  background: #f0f9ff;
  border-color: #bae6fd;
  transform: translateY(-1px);
}
.quick-action-tile svg {
  width: 22px;
  height: 22px;
}
.quick-action-tile span {
  font-size: 10.5px;
  font-weight: 600;
  color: #334155;
}

/* Call Recording Items */
.call-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.call-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.call-log-row:hover { background: #f1f5f9; }
.call-log-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.call-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.call-icon-circle.outgoing { background: #eff6ff; color: #0284c7; }
.call-icon-circle.incoming { background: #ecfdf5; color: #10b981; }
.call-icon-circle.missed { background: #fef2f2; color: #ef4444; }
.call-meta strong {
  font-size: 12px;
  color: #0f172a;
  display: block;
}
.call-meta span {
  font-size: 10px;
  color: var(--muted);
}
.call-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #0284c7;
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.call-play-btn:hover { background: #0369a1; }
.call-play-btn.playing { background: #ef4444; }

/* WhatsApp Chat Items */
.whatsapp-chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.whatsapp-chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.whatsapp-chat-row:hover { background: #f1f5f9; }
.whatsapp-contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.whatsapp-chat-content {
  flex: 1;
  min-width: 0;
}
.whatsapp-chat-content strong {
  font-size: 12px;
  color: #0f172a;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-chat-content p {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whatsapp-badge-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: #10b981;
}

/* Recent Screenshots Grid */
.screenshots-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.screenshot-card {
  position: relative;
  height: 110px;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px;
  cursor: pointer;
  transition: transform 0.15s;
}
.screenshot-card:hover { transform: scale(1.03); }
.screenshot-bg-mock {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}
.screenshot-tag {
  position: relative;
  z-index: 2;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #38bdf8;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: center;
}

/* Phone Mockup */
.phone-frame-mockup {
  width: 48px;
  height: 80px;
  background: #0f172a;
  border-radius: 10px;
  border: 2px solid #334155;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px;
  flex: none;
  position: relative;
  overflow: hidden;
}
.phone-notch {
  width: 16px;
  height: 3px;
  background: #1e293b;
  border-radius: 2px;
}
.phone-screen-wallpaper {
  width: 100%;
  height: 60px;
  background: linear-gradient(135deg, #0284c7 0%, #3b82f6 50%, #8b5cf6 100%);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
}
.phone-chin {
  width: 14px;
  height: 2px;
  background: #475569;
  border-radius: 1px;
}

/* ── TAB 3: COMPANY SETTINGS (IMAGE 4) ─────────────────────────── */
.settings-tab-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.settings-subtabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.settings-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.settings-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
}
.settings-card-title svg { color: #0284c7; }

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: none;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: .2s;
  border-radius: 999px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: #10b981;
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(18px);
}

.setting-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}
.setting-toggle-row:last-child { border-bottom: none; }
.setting-toggle-info strong {
  font-size: 12px;
  color: #0f172a;
  display: block;
}
.setting-toggle-info p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Geofence Management Layout (Image 4) */
.geofence-split-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-top: 14px;
}
.geofence-list-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geofence-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.geofence-item-card:hover {
  background: #f1f5f9;
}
.geofence-item-card.active {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.geofence-item-name {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.geofence-item-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
#geofence-preview-map {
  height: 280px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #e2e8f0;
}

/* Team Table */
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.team-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.team-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

/* Modals */
[hidden],
.modal-overlay[hidden] {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: grid;
  place-items: center;
}
.modal-window {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 90%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.modal-title {
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
}

/* Responsive */
@media (max-width: 1300px) {
  .device-grid-4col { grid-template-columns: repeat(3, 1fr); }
  .detail-3col-grid { grid-template-columns: 1fr 1fr; }
  .devices-metrics-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  :root { --side: 68px; }
  .brand-title, .brand-sub, .nav-item span, .quota-card { display: none; }
  .brand { justify-content: center; padding: 20px 0; }
  .nav-item { justify-content: center; padding: 12px; }
  .device-grid-4col { grid-template-columns: repeat(2, 1fr); }
  .settings-2col-grid { grid-template-columns: 1fr; }
}

/* ── HIGH-FIDELITY SUBTAB & WIDGET EXTENSIONS ────────────────────────── */

/* Mini Map Custom Marker & Floating Callout (Image 3 Match) */
.mini-map-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.15);
  min-width: 170px;
}
.mini-map-callout-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0284c7;
}
.mini-map-callout-texts strong {
  font-size: 11.5px;
  font-weight: 750;
  color: #0f172a;
  display: block;
  line-height: 1.2;
}
.mini-map-callout-texts span {
  font-size: 9.5px;
  color: #64748b;
  display: block;
}
.mini-map-callout-texts .status-label {
  font-weight: 700;
  font-size: 9.5px;
  margin-top: 1px;
}

/* Silent Camera Photo Vault Cards */
.camera-vault-card {
  position: relative;
  background: #0f172a;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.camera-vault-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.camera-vault-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.camera-vault-meta {
  padding: 8px 10px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.camera-vault-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.camera-vault-tag.front { background: #fdf2f8; color: #ec4899; }
.camera-vault-tag.rear { background: #eff6ff; color: #0284c7; }
.camera-vault-time {
  font-size: 10px;
  color: #64748b;
  font-family: var(--font-mono);
}

/* Hardware & System Info Spec Card */
.info-spec-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: background 0.15s;
}
.info-spec-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
}
.info-spec-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0284c7;
  display: grid;
  place-items: center;
  flex: none;
}
.info-spec-details {
  flex: 1;
  min-width: 0;
}
.info-spec-label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.info-spec-value {
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
  margin-top: 2px;
  word-break: break-word;
}
.info-spec-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* Audio Waveform pulse simulation */
@keyframes audioWavePulse {
  0% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.0); }
  100% { transform: scaleY(0.4); }
}
.audio-playing-bar {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  height: 12px;
  margin-left: 6px;
}
.audio-playing-bar span {
  width: 2px;
  height: 100%;
  background: #fff;
  border-radius: 1px;
  animation: audioWavePulse 0.8s infinite ease-in-out;
}
.audio-playing-bar span:nth-child(2) { animation-delay: 0.2s; }
.audio-playing-bar span:nth-child(3) { animation-delay: 0.4s; }

/* Phone Hardware Chassis Buttons (ws-scrcpy) */
.phone-hw-btn {
  width: 38px;
  height: 52px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.phone-hw-btn:hover {
  background: #334155;
  color: #fff;
  transform: translateY(-1px);
}
.phone-hw-btn:active {
  transform: translateY(1px);
  background: #0284c7;
  color: #fff;
}
.phone-hw-btn.power {
  height: 64px;
  color: #ef4444;
}
.phone-hw-btn.power:hover {
  background: #ef4444;
  color: #fff;
}

/* Soft Bottom Navigation Buttons */
.nav-soft-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.nav-soft-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.nav-soft-btn:active {
  color: #38bdf8;
  transform: scale(0.92);
}

/* Tactical Call Audio Player Modal */
.tactical-audio-modal {
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.audio-btn-circle:hover {
  background: #0369a1;
  transform: scale(1.05);
}
.audio-btn-circle:active {
  transform: scale(0.95);
}

/* ── 3D Tactical HUD Reticle (CesiumGS/cesium) ── */
.tactical-hud-box {
  background: rgba(15, 23, 42, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(2, 132, 199, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(2, 132, 199, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 210px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.hud-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: hudPulse 1.6s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.hud-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
}
.hud-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  line-height: 1.6;
}
.hud-label {
  color: #94a3b8;
  font-weight: 500;
}
.hud-val {
  color: #f1f5f9;
  font-weight: 700;
}

/* ── Nav Badges ── */
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.35);
  line-height: 1.2;
}
.nav-item.active .nav-badge {
  background: #ffffff;
  color: #0284c7;
  border-color: #ffffff;
}
.nav-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.nav-item.active .nav-badge.amber {
  background: #ffffff;
  color: #d97706;
  border-color: #ffffff;
}

/* ── Tactical Alerts Flyout Drawer ── */
.alerts-flyout-drawer {
  width: 440px;
  max-width: 95vw;
  height: 100vh;
  background: #ffffff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.alerts-drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}
.alerts-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alerts-bell-bubble {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-pulse-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: hudPulse 1.5s infinite;
}
.alerts-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.alerts-drawer-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 0;
}
.alerts-drawer-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-mark-all {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.btn-mark-all:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.btn-drawer-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
}
.btn-drawer-close:hover { color: #0f172a; }

.alerts-category-segmented {
  display: flex;
  padding: 10px 16px;
  gap: 6px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.alerts-seg-btn {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.alerts-seg-btn .badge {
  background: #e2e8f0;
  color: #475569;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
}
.alerts-seg-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.alerts-seg-btn.active .badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.alerts-stream-container {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8fafc;
}

.alert-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.alert-card.unread {
  border-left: 3px solid #0284c7;
  background: #f0f9ff;
}
.alert-card.breach { border-left-color: #ef4444; }
.alert-card.comms { border-left-color: #10b981; }
.alert-card.warning { border-left-color: #f59e0b; }

.alert-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
}
.alert-type-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.alert-type-chip.breach { color: #dc2626; }
.alert-type-chip.comms { color: #059669; }
.alert-type-chip.warning { color: #d97706; }
.alert-time { color: var(--muted); }

.alert-card-body {
  font-size: 12px;
  color: #1e293b;
  line-height: 1.45;
}
.alert-card-body strong { color: #0f172a; }

.alert-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.alert-action-pill {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.alert-action-pill.primary {
  background: #0284c7;
  color: #fff;
}
.alert-action-pill.primary:hover { background: #0369a1; }
.alert-action-pill.outline {
  background: #f1f5f9;
  color: #475569;
}
.alert-action-pill.outline:hover { background: #e2e8f0; color: #0f172a; }

.alerts-drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.alerts-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
}

/* ── WhatsApp & Comms Terminal Workstation (Tab 3) ── */
.comms-terminal-layout {
  display: grid;
  grid-template-columns: 340px 1fr 300px;
  height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1200px) {
  .comms-terminal-layout {
    grid-template-columns: 320px 1fr;
  }
  .comms-intel-panel { display: none; }
}

.comms-threads-panel {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}
.comms-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comms-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comms-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comms-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
.comms-search-box input {
  border: none;
  background: transparent;
  font-size: 12px;
  outline: none;
  width: 100%;
  color: #0f172a;
}
.comms-filter-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}
.comms-filter-btn {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}
.comms-filter-btn.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.comms-threads-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.comms-thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.comms-thread-row:hover { background: #f1f5f9; }
.comms-thread-row.active {
  background: #f0f9ff;
  border-left: 3px solid #0284c7;
}
.comms-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
}
.comms-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.comms-platform-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  border: 2px solid #fff;
}
.comms-platform-icon.sms { background: #0284c7; }
.comms-platform-icon.telegram { background: #0088cc; }

.comms-thread-content {
  flex: 1;
  min-width: 0;
}
.comms-thread-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.comms-contact-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comms-timestamp {
  font-size: 10.5px;
  color: var(--muted);
  flex: none;
}
.comms-snippet {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.comms-employee-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  margin-top: 4px;
}
.comms-unread-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0284c7;
  flex: none;
}

/* Center Column: Conversation Viewer */
.comms-conversation-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.conversation-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}
.conversation-target-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.conversation-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
}
.chat-bubble-row {
  display: flex;
  gap: 10px;
  max-width: 75%;
}
.chat-bubble-row.incoming { align-self: flex-start; }
.chat-bubble-row.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-bubble.incoming {
  background: #ffffff;
  border: 1px solid var(--line);
  color: #0f172a;
  border-bottom-left-radius: 2px;
}
.chat-bubble.outgoing {
  background: #dcf8c6;
  border: 1px solid #bbf7d0;
  color: #0f172a;
  border-bottom-right-radius: 2px;
}
.chat-bubble-time {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 4px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.conversation-composer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}
.composer-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}
.composer-inner input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
}
.composer-inner input:focus { border-color: #0284c7; }

/* Right Column: Handset Recon Snapshot */
.comms-intel-panel {
  border-left: 1px solid var(--line);
  background: #f8fafc;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.intel-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.intel-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.intel-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.intel-label { color: #64748b; }
.intel-val { font-weight: 600; color: #0f172a; }

/* ══════════════════════════════════════════════════════════════════════════
   FLAGSHIP SMARTPHONE 3D MOCKUP (IMAGE 1 & 2 REFERENCE)
   ══════════════════════════════════════════════════════════════════════════ */
.detail-phone-preview {
  display: flex;
  align-items: center;
  gap: 16px;
}

.phone-frame-mockup {
  position: relative;
  width: 62px;
  height: 122px;
  background: linear-gradient(145deg, #334155, #0f172a);
  border: 2.5px solid #475569;
  border-radius: 16px;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.phone-frame-mockup:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 
    0 12px 30px rgba(2, 132, 199, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.phone-glass-glare {
  position: absolute;
  top: -20%;
  left: -50%;
  width: 200%;
  height: 140%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 60%);
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 10;
}

.phone-top-speaker {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: #1e293b;
  border-radius: 2px;
  z-index: 8;
}

.phone-camera-hole {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: #020617;
  border: 0.8px solid #334155;
  border-radius: 50%;
  z-index: 8;
  box-shadow: inset 0 0 1px #38bdf8;
}

.phone-oled-display {
  position: absolute;
  inset: 2px;
  background: radial-gradient(circle at 50% 20%, #0c1a2e 0%, #030712 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 4px 3px;
  overflow: hidden;
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 6.5px;
  z-index: 5;
  margin-top: 5px;
}

.phone-time {
  font-weight: 700;
  color: #e2e8f0;
}

.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.phone-battery-pill {
  width: 9px;
  height: 4.5px;
  border: 0.8px solid #94a3b8;
  border-radius: 1.5px;
  padding: 0.5px;
  display: flex;
}

.phone-battery-level {
  width: 75%;
  height: 100%;
  background: #10b981;
  border-radius: 0.5px;
}

.phone-screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  z-index: 5;
}

.phone-app-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}

.phone-fleet-title {
  font-size: 7.5px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.phone-agent-tag {
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 0.5px solid rgba(16, 185, 129, 0.4);
}

.phone-gesture-bar {
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  align-self: center;
  z-index: 5;
}

/* ════════ MODEL-SPECIFIC HYPER-REALISTIC SMARTPHONE SKINS ════════ */

/* Realme C25-Y / Narzo 50i / Realme 11x */
.phone-frame-mockup.model-realme {
  width: 78px;
  height: 154px;
  background: linear-gradient(155deg, #1e293b 0%, #0f172a 70%, #0284c7 100%);
  border: 3px solid #38bdf8;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.phone-frame-mockup.model-realme .phone-oled-display {
  border-radius: 15px;
  padding-bottom: 7px;
  background: radial-gradient(circle at 50% 10%, #0369a1 0%, #0c1a2e 45%, #020617 100%);
}
.phone-frame-mockup.model-realme .phone-camera-hole {
  top: 0px;
  width: 10px;
  height: 8px;
  border-radius: 0 0 10px 10px;
  background: #020617;
  border: 1px solid #1e293b;
  border-top: none;
}

/* Samsung Galaxy S24 Ultra / A-series */
.phone-frame-mockup.model-samsung {
  width: 78px;
  height: 156px;
  background: linear-gradient(145deg, #475569 0%, #1e293b 80%, #0f172a 100%);
  border: 2.5px solid #94a3b8;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.phone-frame-mockup.model-samsung .phone-oled-display {
  border-radius: 7px;
  background: radial-gradient(circle at 50% 30%, #312e81 0%, #0f172a 60%, #020617 100%);
}
.phone-frame-mockup.model-samsung .phone-camera-hole {
  top: 7px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #000;
  border: 0.8px solid #64748b;
  box-shadow: 0 0 2px #60a5fa;
}

/* Apple iPhone 15 Pro / 14 Pro */
.phone-frame-mockup.model-iphone {
  width: 78px;
  height: 154px;
  background: linear-gradient(145deg, #64748b 0%, #334155 70%, #1e293b 100%);
  border: 3px solid #cbd5e1;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65), inset 0 1.5px 3px rgba(255, 255, 255, 0.6);
}
.phone-frame-mockup.model-iphone .phone-oled-display {
  border-radius: 19px;
  background: radial-gradient(circle at 50% 25%, #4c1d95 0%, #1e1b4b 50%, #030712 100%);
}
.phone-frame-mockup.model-iphone .phone-camera-hole {
  top: 6px;
  width: 24px;
  height: 7px;
  border-radius: 10px;
  background: #000;
  border: 0.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Google Pixel 8 Pro / 7a */
.phone-frame-mockup.model-pixel {
  width: 78px;
  height: 154px;
  background: linear-gradient(145deg, #334155 0%, #1e293b 70%, #0f172a 100%);
  border: 3px solid #64748b;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.phone-frame-mockup.model-pixel .phone-oled-display {
  border-radius: 17px;
  background: radial-gradient(circle at 50% 20%, #064e3b 0%, #022c22 55%, #020617 100%);
}
.phone-frame-mockup.model-pixel .phone-camera-hole {
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #000;
  border: 0.8px solid #34d399;
}

/* OnePlus / Xiaomi / Poco */
.phone-frame-mockup.model-oneplus {
  width: 78px;
  height: 154px;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 70%, #b91c1c 100%);
  border: 3px solid #ef4444;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.phone-frame-mockup.model-oneplus .phone-oled-display {
  border-radius: 14px;
  background: radial-gradient(circle at 20% 20%, #450a0a 0%, #18181b 60%, #09090b 100%);
}
.phone-frame-mockup.model-oneplus .phone-camera-hole {
  top: 8px;
  left: 12px;
  transform: none;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #000;
  border: 0.8px solid #f87171;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARGUSRECON SOVEREIGN WHATSAPP WEB WORKSTATION (AUTHENTIC 1:1 RECON MIRROR)
   Architect: Umar Farooque | Grounded in: WhiskeySockets/Baileys & WhatsApp Web
   ══════════════════════════════════════════════════════════════════════════ */
.wa-web-station-wrap {
  background: var(--surface, #ffffff);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--line, #e2e8f0);
}

.wa-tactical-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--line, #e2e8f0);
}

.wa-top-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-session-pill {
  font-size: 9.5px;
  font-weight: 750;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.wa-version-tag {
  font-size: 9.5px;
  font-family: var(--font-mono, monospace);
  color: var(--muted, #64748b);
  background: var(--surface-subtle, #f1f5f9);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line, #e2e8f0);
}

/* ── DUAL PANE WORKSTATION LAYOUT ── */
.wa-web-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  height: 640px;
  background: #ffffff;
  overflow: hidden;
}

/* ── LEFT PANE: WHATSAPP SIDEBAR ── */
.wa-sidebar-col {
  border-right: 1px solid var(--line, #e2e8f0);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  height: 100%;
  overflow: hidden;
}

.wa-my-profile-bar {
  padding: 10px 14px;
  background: #f0f2f5;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.wa-user-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.wa-user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.wa-online-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25d366;
  border: 1.5px solid #ffffff;
}

.wa-profile-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-icon-btn {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #54656f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wa-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111b21;
}

/* ── SEARCH & FILTER SECTION ── */
.wa-search-section {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
}

.wa-search-input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f2f5;
  padding: 6px 12px;
  border-radius: 8px;
  color: #54656f;
}

.wa-search-input-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: #111b21;
}

.wa-search-input-box input::placeholder {
  color: #8696a0;
}

.wa-filter-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.wa-filter-chip {
  background: #f0f2f5;
  border: 1px solid transparent;
  color: #54656f;
  font-size: 11px;
  font-weight: 600;
  padding: 3.5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.wa-filter-chip:hover {
  background: #e9edef;
  color: #111b21;
}

.wa-filter-chip.active {
  background: #00a884 !important;
  color: #ffffff !important;
  font-weight: 700;
}

.wa-filter-chip.wa-calls-pill {
  color: #0284c7;
  background: #f0f9ff;
  border-color: #bae6fd;
}

.wa-filter-chip.wa-calls-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* ── THREADS LIST ── */
.wa-threads-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.wa-thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  background: #ffffff;
  transition: background 0.15s ease;
  position: relative;
}

.wa-thread-row:hover {
  background: #f5f6f6;
}

.wa-thread-row.active {
  background: #f0f2f5;
  border-left: 3px solid #00a884;
}

.wa-thread-avatar-box {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.wa-thread-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.wa-thread-initial-badge {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #ffffff;
}

.wa-thread-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-thread-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wa-thread-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #111b21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-thread-time {
  font-size: 10.5px;
  color: #667781;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
}

.wa-thread-phone {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: #0284c7;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-thread-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1px;
}

.wa-thread-snippet {
  font-size: 12px;
  color: #667781;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}

.wa-double-tick {
  color: #53bdeb;
  font-size: 12px;
  letter-spacing: -1.5px;
  font-weight: 700;
}

.wa-double-tick.grey {
  color: #8696a0;
}

.wa-unread-badge {
  background: #25d366;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 6px;
}

.wa-call-record-chip {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── RIGHT PANE: WHATSAPP ACTIVE CHAT CONVERSATION ── */
.wa-chat-canvas-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #efeae2;
  position: relative;
  overflow: hidden;
}

.wa-chat-header {
  padding: 10px 18px;
  background: #f0f2f5;
  border-bottom: 1px solid #d1d7db;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
}

.wa-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-hdr-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.wa-hdr-name {
  font-size: 14px;
  font-weight: 750;
  color: #111b21;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-hdr-phone-sub {
  font-size: 11px;
  color: #667781;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.wa-hdr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wa-call-playback-btn {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.wa-call-playback-btn:hover {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
}

/* ── WHATSAPP DOODLE CANVAS ── */
.wa-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  background-color: #efeae2;
  background-image: 
    radial-gradient(#d1d7db 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 12px 12px;
}

.wa-date-divider {
  align-self: center;
  margin: 6px 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #54656f;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ── SPEECH BUBBLES ── */
.wa-msg {
  max-width: 65%;
  padding: 6px 9px 7px 9px;
  border-radius: 7.5px;
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  word-break: break-word;
  animation: waMsgIn 0.18s ease;
}

@keyframes waMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-msg.inbound {
  background: #ffffff;
  color: #111b21;
  align-self: flex-start;
  border-top-left-radius: 0;
}

.wa-msg.outbound {
  background: #d9fdd3;
  color: #111b21;
  align-self: flex-end;
  border-top-right-radius: 0;
}

.wa-msg-sender-name {
  font-size: 11px;
  font-weight: 750;
  margin-bottom: 2px;
}

.wa-msg-meta {
  float: right;
  margin-left: 12px;
  margin-top: 4px;
  font-size: 10px;
  color: #667781;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── VOICE NOTE PLAYER BUBBLE ── */
.wa-audio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  min-width: 230px;
}

.wa-audio-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #00a884;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.wa-audio-play-btn:hover {
  transform: scale(1.06);
}

.wa-waveform-bar {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.wa-wave-seg {
  flex: 1;
  background: #8696a0;
  border-radius: 2px;
  transition: height 0.2s ease, background 0.2s ease;
}

.wa-wave-seg.played {
  background: #00a884;
}

.wa-audio-dur {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: #667781;
  flex-shrink: 0;
}

/* ── MEDIA ATTACHMENT CARDS ── */
.wa-media-preview-box {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 5px;
  max-width: 280px;
  cursor: pointer;
}

.wa-media-preview-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.wa-doc-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 5px;
}

/* ── COMPOSER BAR ── */
.wa-composer-bar {
  padding: 10px 14px;
  background: #f0f2f5;
  border-top: 1px solid #d1d7db;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wa-composer-btn {
  background: transparent;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #54656f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.wa-composer-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111b21;
}

.wa-input-pill {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d1d7db;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wa-input-pill input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: #667781;
  font-style: italic;
}

.wa-encryption-chip {
  font-size: 9.5px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   TACTICAL DARK THEME OVERRIDES FOR WHATSAPP WEB WORKSTATION
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-tactical .wa-web-station-wrap {
  background: #111b21 !important;
  border-color: rgba(56, 189, 248, 0.18) !important;
}

body.theme-tactical .wa-tactical-topbar {
  background: #111b21 !important;
  border-bottom-color: #202c33 !important;
}

body.theme-tactical .wa-web-layout {
  background: #0b141a !important;
}

body.theme-tactical .wa-sidebar-col {
  background: #111b21 !important;
  border-right-color: #202c33 !important;
}

body.theme-tactical .wa-my-profile-bar {
  background: #202c33 !important;
  border-bottom-color: #2a3942 !important;
}

body.theme-tactical .wa-icon-btn {
  color: #aebac1 !important;
}
body.theme-tactical .wa-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e9edef !important;
}

body.theme-tactical .wa-search-section {
  background: #111b21 !important;
  border-bottom-color: #202c33 !important;
}

body.theme-tactical .wa-search-input-box {
  background: #202c33 !important;
  color: #aebac1 !important;
}

body.theme-tactical .wa-search-input-box input {
  color: #e9edef !important;
}

body.theme-tactical .wa-filter-chip {
  background: #202c33 !important;
  color: #aebac1 !important;
}
body.theme-tactical .wa-filter-chip:hover {
  background: #2a3942 !important;
  color: #e9edef !important;
}
body.theme-tactical .wa-filter-chip.active {
  background: #00a884 !important;
  color: #ffffff !important;
}

body.theme-tactical .wa-thread-row {
  background: #111b21 !important;
  border-bottom-color: #1f2c34 !important;
}
body.theme-tactical .wa-thread-row:hover {
  background: #202c33 !important;
}
body.theme-tactical .wa-thread-row.active {
  background: #2a3942 !important;
  border-left-color: #00a884 !important;
}

body.theme-tactical .wa-thread-name {
  color: #e9edef !important;
}
body.theme-tactical .wa-thread-time {
  color: #8696a0 !important;
}
body.theme-tactical .wa-thread-snippet {
  color: #8696a0 !important;
}

body.theme-tactical .wa-chat-canvas-col {
  background: #0b141a !important;
}

body.theme-tactical .wa-chat-header {
  background: #202c33 !important;
  border-bottom-color: #2a3942 !important;
}

body.theme-tactical .wa-hdr-name {
  color: #e9edef !important;
}
body.theme-tactical .wa-hdr-phone-sub {
  color: #8696a0 !important;
}

body.theme-tactical .wa-chat-messages {
  background-color: #0b141a !important;
  background-image: 
    radial-gradient(#1f2c34 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
}

body.theme-tactical .wa-date-divider {
  background: #182229 !important;
  border-color: #222e35 !important;
  color: #8696a0 !important;
}

body.theme-tactical .wa-msg.inbound {
  background: #202c33 !important;
  color: #e9edef !important;
}

body.theme-tactical .wa-msg.outbound {
  background: #005c4b !important;
  color: #e9edef !important;
}

body.theme-tactical .wa-msg-meta {
  color: #8696a0 !important;
}

body.theme-tactical .wa-composer-bar {
  background: #202c33 !important;
  border-top-color: #2a3942 !important;
}

body.theme-tactical .wa-composer-btn {
  color: #8696a0 !important;
}
body.theme-tactical .wa-composer-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e9edef !important;
}

body.theme-tactical .wa-input-pill {
  background: #2a3942 !important;
  border-color: #3b4a54 !important;
}

body.theme-tactical .wa-input-pill input {
  color: #8696a0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DETAIL CONTACT ROW SVG ITEM STYLING (IMAGE 1 FIX)
   ══════════════════════════════════════════════════════════════════════════ */
.detail-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}
.detail-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #334155;
}
.detail-contact-item svg {
  color: #0284c7;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   NECTARLINK ADDON: ELEVATED SYSTEM BRIDGES & SENSORS
   ══════════════════════════════════════════════════════════════════════════ */
.nectar-bridge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  font-size: 11.5px;
}
.nectar-bridge-row:last-child {
  border-bottom: none;
}
.nectar-bridge-name {
  color: #334155;
  font-weight: 500;
}
.nectar-bridge-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
}
.nectar-bridge-status.green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.nectar-bridge-status.blue {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.nectar-bridge-val {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════════
   NECTARLINK ULTRA-COCKPIT 3-COLUMN WORKSTATION
   ══════════════════════════════════════════════════════════════════════════ */
.cockpit-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f0f9ff;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bae6fd;
}
.cockpit-chip-blue {
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: #f1f5f9;
  color: #0284c7;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.rec-dot-blink {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 4px;
  animation: recBlink 1s infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

.cockpit-workstation-grid {
  display: grid;
  grid-template-columns: 280px 340px 1fr;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 1280px) {
  .cockpit-workstation-grid {
    grid-template-columns: 260px 320px 1fr;
    gap: 12px;
  }
}
@media (max-width: 1024px) {
  .cockpit-workstation-grid {
    grid-template-columns: 1fr;
  }
}

.cockpit-panel-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.cockpit-panel-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Tactical App Drawer */
.app-drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.app-tile-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}
.app-tile-btn:hover {
  background: #f0f9ff;
  border-color: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
}
.app-tile-btn:active {
  transform: translateY(0);
}
.app-tile-btn.highlight {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-color: #7dd3fc;
}
.app-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.app-tile-icon.whatsapp { background: #10b981; }
.app-tile-icon.phone { background: #0284c7; }
.app-tile-icon.sms { background: #0ea5e9; }
.app-tile-icon.chrome { background: #f59e0b; }
.app-tile-icon.camera { background: #64748b; }
.app-tile-icon.maps { background: #10b981; }
.app-tile-icon.settings { background: #475569; }
.app-tile-icon.youtube { background: #ef4444; }
.app-tile-icon.files { background: #6366f1; }
.app-tile-icon.nectar { background: linear-gradient(135deg, #0284c7, #06b6d4); }
.app-tile-btn span {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stream Deck Inputs */
.cockpit-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 11.5px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
  transition: border-color 0.15s;
}
.cockpit-input:focus {
  border-color: #0284c7;
  background: #fff;
}
.cockpit-mini-btn {
  padding: 7px 11px;
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cockpit-mini-btn:hover {
  background: #0284c7;
}

/* ════════ ULTIMATE HYPER-REALISTIC SMARTPHONE CHASSIS & BEZEL ════════ */

.handset-model-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 14px;
  margin-bottom: 14px;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}

.model-pills-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.model-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.model-pill-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.model-pill-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.5);
}

.model-pill-btn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.model-pill-btn .dot.realme { background: #38bdf8; }
.model-pill-btn .dot.samsung { background: #cbd5e1; }
.model-pill-btn .dot.iphone { background: #f59e0b; }
.model-pill-btn .dot.pixel { background: #10b981; }

/* Handset Shell Container: Houses the physical body and side buttons */
.handset-device-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  user-select: none;
}

/* Photorealistic Side Hardware Buttons */
.handset-edge-keys {
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 25;
}

.handset-edge-keys.left {
  left: 2px;
  top: 125px;
  gap: 12px;
}

.handset-edge-keys.right {
  right: 2px;
  top: 165px;
  gap: 12px;
}

.edge-btn {
  width: 14px;
  height: 46px;
  background: linear-gradient(90deg, #475569 0%, #1e293b 50%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px 0 0 5px;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    -2px 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  padding: 0;
}

.edge-btn:hover {
  width: 17px;
  background: linear-gradient(90deg, #64748b 0%, #334155 50%, #1e293b 100%);
  color: #f8fafc;
  box-shadow: -3px 4px 12px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.edge-btn:active {
  transform: translateX(2px);
  width: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.edge-btn.power {
  height: 58px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(270deg, #b91c1c 0%, #7f1d1d 50%, #1e293b 100%);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fca5a5;
  box-shadow: 
    2px 3px 8px rgba(185, 28, 28, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.edge-btn.power:hover {
  width: 17px;
  background: linear-gradient(270deg, #ef4444 0%, #991b1b 50%, #1e293b 100%);
  color: #fff;
  box-shadow: 3px 5px 14px rgba(239, 68, 68, 0.5);
}

.edge-btn.power:active {
  transform: translateX(-2px);
  width: 12px;
}

/* Flagship Smartphone Main Chassis */
.handset-physical-body {
  width: 298px;
  height: 642px;
  background: #020617;
  border-radius: 44px;
  border: 4px solid #1e293b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 
    0 0 0 1.5px rgba(255, 255, 255, 0.22), /* Outer metallic chamfer highlight */
    0 0 0 4px #0b1120, /* Dark titanium rim */
    0 0 0 5.5px rgba(255, 255, 255, 0.08), /* Secondary metallic reflection */
    0 24px 60px -12px rgba(0, 0, 0, 0.9), /* Primary ambient depth */
    0 45px 95px -20px rgba(2, 6, 23, 0.95), /* Ground drop shadow */
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), /* Inner bezel specular ring */
    inset 0 2px 4px rgba(255, 255, 255, 0.4); /* Top curved glass glare */
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Antenna isolation bands on chassis rails */
.handset-physical-body::before,
.handset-physical-body::after {
  content: "";
  position: absolute;
  width: 3.5px;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
  z-index: 20;
  pointer-events: none;
}
.handset-physical-body::before {
  top: 90px;
  left: 0;
  box-shadow: 290px 0 0 rgba(255, 255, 255, 0.35);
}
.handset-physical-body::after {
  bottom: 90px;
  left: 0;
  box-shadow: 290px 0 0 rgba(255, 255, 255, 0.35);
}

/* Model Specific Tunings: Realme / Android Default */
.handset-physical-body.model-realme {
  border-color: #1e3a5f;
  border-radius: 42px;
  box-shadow: 
    0 0 0 1.5px rgba(56, 189, 248, 0.45),
    0 0 0 4px #082f49,
    0 0 0 5.5px rgba(56, 189, 248, 0.15),
    0 24px 60px -12px rgba(2, 132, 199, 0.4),
    0 45px 95px -20px rgba(2, 6, 23, 0.95),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.45);
}

/* Model: Samsung Galaxy S24 Ultra (Squared off titanium profile) */
.handset-physical-body.model-samsung {
  border-radius: 18px;
  border-color: #334155;
  box-shadow: 
    0 0 0 1.5px rgba(203, 213, 225, 0.4),
    0 0 0 4px #0f172a,
    0 0 0 5.5px rgba(203, 213, 225, 0.12),
    0 24px 60px -12px rgba(0, 0, 0, 0.92),
    0 45px 95px -20px rgba(2, 6, 23, 0.95),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

/* Model: Apple iPhone 15/16 Pro (Natural Titanium Curved Chamfer) */
.handset-physical-body.model-iphone {
  border-radius: 52px;
  border-color: #475569;
  box-shadow: 
    0 0 0 1.8px rgba(255, 255, 255, 0.45),
    0 0 0 4.5px #1e293b,
    0 0 0 6px rgba(255, 255, 255, 0.1),
    0 26px 65px -12px rgba(0, 0, 0, 0.92),
    0 50px 105px -20px rgba(2, 6, 23, 0.95),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.25),
    inset 0 2px 6px rgba(255, 255, 255, 0.65);
}

/* Model: Google Pixel 9 Pro (Matte Titanium Curve) */
.handset-physical-body.model-pixel {
  border-radius: 46px;
  border-color: #334155;
  box-shadow: 
    0 0 0 1.5px rgba(52, 211, 153, 0.4),
    0 0 0 4px #0f172a,
    0 0 0 5.5px rgba(52, 211, 153, 0.1),
    0 24px 60px -12px rgba(0, 0, 0, 0.9),
    0 45px 95px -20px rgba(2, 6, 23, 0.95),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.2),
    inset 0 2px 5px rgba(255, 255, 255, 0.45);
}

/* Top Ear Speaker & Laser Grill */
.handset-top-bar {
  height: 28px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #f8fafc;
  z-index: 10;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Laser-etched Micro Ear Speaker */
.handset-speaker-notch {
  width: 48px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #334155, #334155 1.5px, #0f172a 1.5px, #0f172a 3px);
  border-radius: 2px;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.9), 0 1px 1px rgba(255,255,255,0.08);
}

/* Photorealistic Optical Camera Module / Notch */
.handset-camera-aperture {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #0284c7 0%, #1e1b4b 35%, #020617 75%);
  border: 1.5px solid #0f172a;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.8),
    inset 0 0 2px rgba(56, 189, 248, 0.6);
  z-index: 12;
}

/* Anti-reflective lens coating glint (White Specular Highlight) */
.handset-camera-aperture::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* iPhone Dynamic Island Variant */
.handset-physical-body.model-iphone .handset-camera-aperture {
  width: 82px;
  height: 20px;
  top: 5px;
  border-radius: 20px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}
.handset-physical-body.model-iphone .handset-camera-aperture::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #0284c7 0%, #1e1b4b 40%, #000 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* Viewport with Sub-pixel Display Surface */
.handset-viewport {
  position: relative;
  width: 100%;
  height: 576px;
  background: #020617;
  cursor: crosshair;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2.5D Curved OLED Glass Surface Glare */
.handset-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(122deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 22%, transparent 48%, rgba(255, 255, 255, 0.02) 68%, transparent 100%),
    radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.04) 0%, transparent 60%);
  z-index: 5;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.03);
}

.cockpit-touch-ripple {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(56,189,248,0.4);
  border: 2px solid #38bdf8;
  pointer-events: none;
  transform: translate(-50%,-50%);
  display: none;
}

.cockpit-res-pill {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}

/* Modern Bottom Navigation & Gesture Pill */
.handset-nav-bar {
  height: 38px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  z-index: 10;
  padding: 0 16px;
}

/* Sleek Gesture Pill (Android 14/15 & iOS) */
.handset-gesture-pill {
  width: 120px;
  height: 4.5px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
  cursor: pointer;
}
.handset-gesture-pill:hover {
  background: #ffffff;
  transform: scaleY(1.3);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.nav-soft-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.nav-soft-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}
.nav-soft-btn:active {
  transform: scale(0.9);
}

/* ── Status Mini Bar (Dark Tactical Cyber Glass) ── */
.cockpit-status-pill-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 23, 44, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  padding: 9px 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cockpit-status-pill-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cockpit-model-name {
  font-weight: 800;
  font-size: 13px;
  color: #f8fafc;
  letter-spacing: 0.3px;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.cockpit-sep {
  color: #475569;
  font-size: 11px;
}

.cockpit-sim-badge {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.cockpit-status-pill-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cockpit-ip-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.nectar-battery-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.6);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.nectar-battery-pct {
  font-weight: 800;
  color: #10b981;
}
.nectar-battery-sub {
  font-size: 9.5px;
  color: #94a3b8;
}

/* ── On-Screen Animated Volume HUD ── */
.handset-volume-hud {
  position: absolute;
  top: 60px;
  left: 10px;
  width: 26px;
  height: 105px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px;
  z-index: 15;
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateX(-15px) scale(0.9);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.handset-volume-hud.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.volume-slider-icon {
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.volume-slider-track {
  width: 7px;
  height: 65px;
  background: rgba(51, 65, 85, 0.8);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.volume-slider-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  transition: height 0.15s ease;
}

/* ── On-Screen OLED Sleep / Lock Overlay ── */
.handset-sleep-overlay {
  position: absolute;
  inset: 0;
  background: #000000;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.handset-sleep-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Clean Handset Quick Gestures Strip ── */
.handset-gesture-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
}

.gesture-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gesture-btn:hover {
  background: rgba(2, 132, 199, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}
.gesture-btn:active {
  transform: scale(0.96);
}

/* ── PC Keyboard Text Input Box (Dark Cyber Glass) ── */
.cockpit-type-box {
  width: 310px;
  margin-top: 12px;
  background: rgba(11, 23, 44, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.cockpit-type-header {
  font-size: 10.5px;
  font-weight: 750;
  color: #94a3b8;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cockpit-type-badge {
  font-size: 9.5px;
  color: #38bdf8;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.cockpit-cyber-input {
  flex: 1;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 7px;
  padding: 7px 11px;
  color: #f8fafc;
  font-size: 11px;
  outline: none;
  transition: all 0.18s ease;
}
.cockpit-cyber-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
  background: rgba(15, 23, 42, 0.95);
}

/* Right Column Hardware Matrix */
.hw-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.hw-card-tile {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
}
.hw-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.hw-tile-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.hw-badge-off {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #64748b;
}
.hw-badge-on {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ecfdf5;
  color: #059669;
}
.hw-badge-neutral {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0284c7;
}
.cockpit-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s;
}
.cockpit-action-btn:hover {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.btn-ringer-opt {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}
.btn-ringer-opt.active {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
}

/* Media Deck */
.media-deck-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  border-radius: 10px;
  padding: 12px;
  color: #fff;
}
.media-deck-art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}
.media-deck-info {
  flex: 1;
  min-width: 0;
}
.media-deck-title {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-deck-artist {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-deck-progress {
  width: 100%;
  height: 3px;
  background: #334155;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.media-deck-progress-bar {
  height: 100%;
  background: #ec4899;
  border-radius: 2px;
}
.media-deck-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.media-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.media-ctrl-btn:hover {
  background: #334155;
  color: #fff;
  transform: scale(1.06);
}
.media-ctrl-btn.play {
  width: 34px;
  height: 34px;
  background: #0284c7;
  border-color: #0284c7;
  color: #fff;
}
.media-ctrl-btn.play:hover {
  background: #0369a1;
}

/* Diagnostics Grid */
.cockpit-diag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.diag-item {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diag-lbl {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}
.diag-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════════
   NECTARLINK AUTHENTIC DESKTOP WORKSPACE & COCKPIT THEME (thtbee/nectarlink)
   ══════════════════════════════════════════════════════════════════════════ */
.nectar-hero-deck {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}
@media (max-width: 1280px) {
  .nectar-hero-deck {
    grid-template-columns: 1fr;
  }
}

/* Device Hero Card */
.nectar-device-card {
  background: #141822;
  border: 1px solid #2d3342;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #f1f5f9;
}
.nectar-device-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nectar-phone-avatar {
  width: 44px;
  height: 44px;
  background: #202738;
  border: 1px solid #3e485e;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  position: relative;
}
.nectar-phone-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #141822;
}
.nectar-device-name {
  font-size: 14px;
  font-weight: 750;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nectar-device-specs {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nectar-link-badge {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}
.nectar-battery-ring {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nectar-battery-pct {
  font-size: 11px;
  font-weight: 800;
  color: #10b981;
  font-family: var(--font-mono);
}
.nectar-battery-sub {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}

/* Now Playing Card */
.nectar-now-playing {
  background: #141822;
  border: 1px solid #2d3342;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #f1f5f9;
}
.nectar-media-art {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.nectar-media-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nectar-media-details {
  flex: 1;
  min-width: 0;
}
.nectar-media-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nectar-media-artist {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nectar-source-pill {
  background: #202738;
  border: 1px solid #3e485e;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 9px;
  color: #cbd5e1;
}
.nectar-media-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.nectar-time-label {
  font-size: 9.5px;
  color: #64748b;
  font-family: var(--font-mono);
}
.nectar-scrubber {
  flex: 1;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.nectar-scrubber-fill {
  height: 100%;
  background: #38bdf8;
  width: 14%;
  border-radius: 2px;
}
.nectar-media-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nectar-m-btn {
  background: #202738;
  border: 1px solid #3e485e;
  color: #cbd5e1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.nectar-m-btn:hover {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
}
.nectar-m-btn.play {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
  width: 34px;
  height: 34px;
}

/* Phone Controls (5 Quick Round Buttons + Speaker switch) */
.nectar-controls-card {
  background: #141822;
  border: 1px solid #2d3342;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nectar-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.nectar-quick-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #202738;
  border: 1px solid #3e485e;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.nectar-quick-btn:hover {
  background: #334155;
  color: #ffffff;
  border-color: #475569;
}
.nectar-quick-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.nectar-speaker-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #202738;
}
.nectar-speaker-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Action Deck (4 Prominent Cards) */
.nectar-action-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .nectar-action-deck {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nectar-action-card {
  background: #141822;
  border: 1px solid #2d3342;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #ffffff;
}
.nectar-action-card:hover {
  background: #1c2333;
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.nectar-action-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nectar-action-icon.mirror { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.nectar-action-icon.files { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.nectar-action-icon.clipboard { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.nectar-action-icon.find { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.nectar-action-title {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}
.nectar-action-sub {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Feature Cards (Continuity Camera, Phone as Webcam, Type on phone) */
.nectar-feature-card {
  background: #141822;
  border: 1px solid #2d3342;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #f1f5f9;
}
.nectar-feat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.nectar-feat-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nectar-feat-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 10px;
}
.nectar-feat-btn {
  background: #202738;
  border: 1px solid #3e485e;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #f8fafc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.nectar-feat-btn:hover {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
}
.nectar-feat-btn.primary {
  background: #0284c7;
  border-color: #38bdf8;
}
.nectar-feat-btn.primary:hover {
  background: #0369a1;
}

/* Timeline Activity Stream */
.nectar-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nectar-timeline-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #1c2333;
  border-radius: 8px;
  border: 1px solid #2d3342;
  font-size: 11px;
}
.nectar-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  flex-shrink: 0;
}
.nectar-timeline-text {
  flex: 1;
  color: #e2e8f0;
  font-weight: 500;
}
.nectar-timeline-time {
  font-size: 10px;
  color: #64748b;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════════
   COCKPIT NAVIGATION SUB-TABS (MIRROR, APPS, GALLERY, TOOLS)
   ══════════════════════════════════════════════════════════════════════════ */
.cockpit-subtabs-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin: 14px 0 18px 0;
  overflow-x: auto;
}

.cockpit-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.cockpit-subtab-btn:hover {
  color: #0f172a;
  background: #ffffff;
}

.cockpit-subtab-btn.active {
  background: #ffffff;
  color: #0284c7;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.cockpit-subtab-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

.cockpit-subtab-btn.active .cockpit-subtab-count {
  background: #e0f2fe;
  color: #0284c7;
}

.cockpit-badge-live {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
  letter-spacing: 0.5px;
}

/* Sub-views containers */
.cockpit-subview {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

.cockpit-subview.active {
  display: block;
}

/* ── SUB-VIEW 1: CLEAN MIRROR COCKPIT ── */
.cockpit-mirror-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 10px 0 20px;
}

.cockpit-phone-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Tactical Glass Floating Tool Dock ── */
.cockpit-dock-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(11, 23, 44, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  align-self: flex-start;
  margin-top: 50px;
}

.dock-tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.7);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-tool-btn:hover {
  background: rgba(2, 132, 199, 0.25);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  transform: translateY(-1px) scale(1.05);
}

.dock-tool-btn:active {
  transform: scale(0.95);
}

.dock-tool-btn.danger {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.dock-tool-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
}

.dock-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #020617;
  color: #f8fafc;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.dock-tool-btn:hover .dock-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}

/* ── SUB-VIEW 2: INSTALLED APPS GRID ── */
.cockpit-apps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.apps-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  flex: 1;
  min-width: 260px;
}

.apps-search-input {
  border: none;
  outline: none;
  font-size: 12.5px;
  width: 100%;
  color: #0f172a;
}

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

.cockpit-app-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  transition: all 0.18s ease;
  position: relative;
}

.cockpit-app-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.cockpit-app-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.cockpit-app-info {
  flex: 1;
  min-width: 0;
}

.cockpit-app-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-app-pkg {
  font-size: 10.5px;
  color: #64748b;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 1px 0 4px;
}

.cockpit-app-cat-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
}

.cockpit-app-launch-btn {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #0284c7;
  background: #f0f9ff;
  color: #0284c7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.cockpit-app-launch-btn:hover {
  background: #0284c7;
  color: #ffffff;
}

/* ── SUB-VIEW 3: HANDSET GALLERY & PHOTOS ── */
.cockpit-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

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

.cockpit-gallery-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 4/5;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.cockpit-gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-color: #38bdf8;
}

.cockpit-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cockpit-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  color: #ffffff;
}

.cockpit-gallery-tag {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(2,132,199,0.9);
  color: #ffffff;
  margin-bottom: 4px;
}

.cockpit-gallery-tag.screenshot {
  background: rgba(99,102,241,0.9);
}

.cockpit-gallery-name {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cockpit-gallery-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #94a3b8;
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Lightbox Modal */
.gallery-lightbox-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.92);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}

.gallery-lightbox-modal.active {
  display: flex;
}

.gallery-lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.gallery-lightbox-close:hover {
  background: #ef4444;
}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTS & SECURITY LOGS (SOC AUDIT OPERATIONS) STYLES
   ══════════════════════════════════════════════════════════════════════════ */
.alerts-tab-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sec-toolbar-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.sec-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sec-filter-pill {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-filter-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.sec-filter-pill.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2,132,199,0.25);
}

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

.sec-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sec-search-wrap svg {
  position: absolute;
  left: 10px;
  color: var(--muted);
}

.sec-search-box {
  padding: 7px 12px 7px 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  background: #f8fafc;
  width: 230px;
  outline: none;
  transition: all 0.15s;
}

.sec-search-box:focus {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(2,132,199,0.15);
}

.sec-split-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1200px) {
  .sec-split-layout {
    grid-template-columns: 1fr;
  }
}

.sec-stream-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.sec-panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sec-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0f172a;
}

.sec-feed-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.sec-feed-card {
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.sec-feed-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.sec-feed-card.critical {
  border-left: 4px solid #ef4444;
  background: #fffafa;
}

.sec-feed-card.warning {
  border-left: 4px solid #f59e0b;
  background: #fffdf5;
}

.sec-feed-card.audit {
  border-left: 4px solid #0284c7;
  background: #f7fbfe;
}

.sec-feed-card.comms {
  border-left: 4px solid #10b981;
  background: #f7fdf9;
}

.sec-feed-card.success {
  border-left: 4px solid #10b981;
  background: #f7fdf9;
}

.sec-feed-card.info {
  border-left: 4px solid #64748b;
  background: #f8fafc;
}

.sec-feed-card.read {
  opacity: 0.72;
}

.sec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.sec-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sec-badge.critical {
  background: #fee2e2;
  color: #b91c1c;
}

.sec-badge.warning {
  background: #fef3c7;
  color: #b45309;
}

.sec-badge.audit {
  background: #e0f2fe;
  color: #0369a1;
}

.sec-badge.comms {
  background: #dcfce7;
  color: #15803d;
}

.sec-badge.success {
  background: #dcfce7;
  color: #15803d;
}

.sec-badge.info {
  background: #f1f5f9;
  color: #475569;
}

.sec-card-time {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.sec-card-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.sec-card-meta strong {
  color: #334155;
}

.sec-card-narrative {
  font-size: 12.5px;
  color: #1e293b;
  line-height: 1.5;
}

.sec-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.sec-device-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.sec-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #f1f5f9;
}

.sec-meta-row span {
  color: var(--muted);
}

.sec-meta-row strong {
  color: #0f172a;
}

.sec-quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sec-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.sec-quick-btn:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.sec-quick-btn.danger:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #ef4444;
}

.sec-perimeter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.sec-perimeter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sec-perm-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}

.sec-perm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.sec-perm-dot.green { background: #10b981; }
.sec-perm-dot.amber { background: #f59e0b; }
.sec-perm-dot.red { background: #ef4444; }







/* ═══════════════════════════════════════════════════════════════════════
   DYNAMIC BROADCAST ANNOUNCEMENT BANNER
   Managed from Superadmin Console (/superadmin)
   ═══════════════════════════════════════════════════════════════════════ */
.announcement-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(11, 19, 36, 0.06), 0 1px 3px rgba(11, 19, 36, 0.04);
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease;
  overflow: hidden;
}

.announcement-banner.dismissing {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.announcement-left-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
}

.announcement-body-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
}

.announcement-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 2px;
}

.announcement-content {
  flex: 1;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.announcement-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
}

.announcement-time {
  font-size: 11px;
  color: #64748B;
  font-weight: 550;
}

.announcement-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.announcement-message {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

.announcement-right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.announcement-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.announcement-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.announcement-dismiss-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s ease;
}

/* 1. Tactical Bulletin (Info - Blue) */
.announcement-banner.info {
  background: #F0F7FF;
  border: 1px solid #BFDBFE;
}
.announcement-banner.info .announcement-left-stripe { background: #2563EB; }
.announcement-banner.info .announcement-icon-badge {
  background: #DBEAFE;
  color: #1D4ED8;
}
.announcement-banner.info .announcement-tag {
  background: #DBEAFE;
  color: #1E40AF;
}
.announcement-banner.info .announcement-title { color: #1E3A8A; }
.announcement-banner.info .announcement-message { color: #1E40AF; }
.announcement-banner.info .announcement-action-btn {
  background: #2563EB;
  color: #FFFFFF;
}
.announcement-banner.info .announcement-action-btn:hover { background: #1D4ED8; }
.announcement-banner.info .announcement-dismiss-btn { color: #3B82F6; }
.announcement-banner.info .announcement-dismiss-btn:hover { background: #DBEAFE; color: #1E3A8A; }

/* 2. Maintenance Window (Warning - Amber) */
.announcement-banner.warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}
.announcement-banner.warning .announcement-left-stripe { background: #D97706; }
.announcement-banner.warning .announcement-icon-badge {
  background: #FEF3C7;
  color: #B45309;
}
.announcement-banner.warning .announcement-tag {
  background: #FEF3C7;
  color: #92400E;
}
.announcement-banner.warning .announcement-title { color: #78350F; }
.announcement-banner.warning .announcement-message { color: #92400E; }
.announcement-banner.warning .announcement-action-btn {
  background: #D97706;
  color: #FFFFFF;
}
.announcement-banner.warning .announcement-action-btn:hover { background: #B45309; }
.announcement-banner.warning .announcement-dismiss-btn { color: #D97706; }
.announcement-banner.warning .announcement-dismiss-btn:hover { background: #FEF3C7; color: #78350F; }

/* 3. Security Advisory (Critical - Red) */
.announcement-banner.critical {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.announcement-banner.critical .announcement-left-stripe { background: #DC2626; }
.announcement-banner.critical .announcement-icon-badge {
  background: #FEE2E2;
  color: #B91C1C;
}
.announcement-banner.critical .announcement-tag {
  background: #FEE2E2;
  color: #991B1B;
}
.announcement-banner.critical .announcement-title { color: #7F1D1D; }
.announcement-banner.critical .announcement-message { color: #991B1B; }
.announcement-banner.critical .announcement-action-btn {
  background: #DC2626;
  color: #FFFFFF;
}
.announcement-banner.critical .announcement-action-btn:hover { background: #B91C1C; }
.announcement-banner.critical .announcement-dismiss-btn { color: #EF4444; }
.announcement-banner.critical .announcement-dismiss-btn:hover { background: #FEE2E2; color: #7F1D1D; }

/* 4. Operational Release (Success - Emerald) */
.announcement-banner.success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
}
.announcement-banner.success .announcement-left-stripe { background: #059669; }
.announcement-banner.success .announcement-icon-badge {
  background: #D1FAE5;
  color: #047857;
}
.announcement-banner.success .announcement-tag {
  background: #D1FAE5;
  color: #065F46;
}
.announcement-banner.success .announcement-title { color: #064E3B; }
.announcement-banner.success .announcement-message { color: #065F46; }
.announcement-banner.success .announcement-action-btn {
  background: #059669;
  color: #FFFFFF;
}
.announcement-banner.success .announcement-action-btn:hover { background: #047857; }
.announcement-banner.success .announcement-dismiss-btn { color: #10B981; }
.announcement-banner.success .announcement-dismiss-btn:hover { background: #D1FAE5; color: #064E3B; }

/* ── STRONG TACTICAL CARDS & METRIC POLISH ──────────────────────────── */
.metric-card {
  border: 1px solid #DDE3EA !important;
  box-shadow: 0 2px 6px rgba(11, 19, 36, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.metric-card:hover {
  border-color: #94A3B8 !important;
  box-shadow: 0 8px 20px rgba(11, 19, 36, 0.08) !important;
  transform: translateY(-2px);
}
.metric-value {
  color: #0F172A !important;
  font-weight: 850 !important;
  font-size: 28px !important;
  letter-spacing: -0.5px;
}
.metric-label {
  color: #475569 !important;
  font-weight: 650 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.topbar {
  border-bottom: 1px solid #DDE3EA !important;
  box-shadow: 0 1px 4px rgba(11, 19, 36, 0.04) !important;
}
#topbar-heading {
  color: #0F172A !important;
  font-weight: 850 !important;
  font-size: 20px !important;
  letter-spacing: -0.3px;
}
#topbar-sub {
  color: #475569 !important;
  font-weight: 550 !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRAPHIC HERO BANNER (MATCHING USER REFERENCE DESIGN)
   ══════════════════════════════════════════════════════════════════════════ */
.workspace-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #EBF3FE 0%, #E3EFFF 38%, #DCEEFF 70%, #EBF4FF 100%);
  border: 1px solid #BFDBFE;
  border-radius: 14px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.07);
  min-height: 136px;
  transition: all 0.25s ease;
}
.hero-banner-content {
  position: relative;
  z-index: 2;
  padding: 22px 28px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hero-banner-tag {
  display: inline-flex;
  align-items: center;
  background: #DBEAFE;
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}
.hero-banner-title {
  margin: 0;
  font-size: 22px;
  font-weight: 850;
  color: #0F172A;
  line-height: 1.22;
  letter-spacing: -0.4px;
}
.hero-banner-subtitle {
  margin: 0 0 4px 0;
  font-size: 13.5px;
  color: #334155;
  font-weight: 500;
  line-height: 1.4;
}
.hero-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563EB;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.28);
  transition: all 0.18s ease;
}
.hero-banner-btn:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.38);
}
.hero-banner-art-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 58%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-banner-art {
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: right center;
  mask-image: linear-gradient(to right, transparent 0%, black 18%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%);
}
.hero-banner-footer-credit {
  position: absolute;
  right: 20px;
  bottom: 8px;
  font-size: 11px;
  color: #64748B;
  font-weight: 550;
  z-index: 3;
}
.hero-banner-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  color: #475569;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  z-index: 4;
}
.hero-banner-close-btn:hover {
  background: #FFFFFF;
  color: #0F172A;
  transform: scale(1.08);
}

/* ── Template 1: Fleet Route Panorama (Default Blue) ────────────────────── */
.workspace-hero-banner.template-fleet {
  background: linear-gradient(90deg, #EBF3FE 0%, #E3EFFF 38%, #DCEEFF 70%, #EBF4FF 100%);
  border: 1px solid #BFDBFE;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.07);
}
.workspace-hero-banner.template-fleet .hero-banner-tag {
  background: #DBEAFE;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
.workspace-hero-banner.template-fleet .hero-banner-title {
  color: #0F172A;
}
.workspace-hero-banner.template-fleet .hero-banner-subtitle {
  color: #334155;
}
.workspace-hero-banner.template-fleet .hero-banner-btn {
  background: #2563EB;
  color: #FFFFFF !important;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.28);
}
.workspace-hero-banner.template-fleet .hero-banner-btn:hover {
  background: #1D4ED8;
}

/* ── Template 2: Live Handset Recon (Tactical Cyber Slate & Cyan) ────────── */
.workspace-hero-banner.template-handset {
  background: linear-gradient(90deg, #0B1324 0%, #0F172A 50%, #162032 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 6px 24px rgba(11, 19, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.workspace-hero-banner.template-handset .hero-banner-tag {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.workspace-hero-banner.template-handset .hero-banner-title {
  color: #F8FAFC;
}
.workspace-hero-banner.template-handset .hero-banner-subtitle {
  color: #94A3B8;
}
.workspace-hero-banner.template-handset .hero-banner-perks li {
  color: #CBD5E1;
}
.workspace-hero-banner.template-handset .hero-banner-price-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.workspace-hero-banner.template-handset .hero-banner-btn {
  background: #0284C7;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
}
.workspace-hero-banner.template-handset .hero-banner-btn:hover {
  background: #0369A1;
}
.workspace-hero-banner.template-handset .hero-banner-footer-credit {
  color: #64748B;
}
.workspace-hero-banner.template-handset .hero-banner-close-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #94A3B8;
}
.workspace-hero-banner.template-handset .hero-banner-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* ── Template 3: Commercial Offer & Quota Booster (Deep Obsidian & 24k Amber Gold) ── */
.workspace-hero-banner.template-promo {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(24, 33, 50, 0.96) 55%, rgba(10, 16, 28, 0.98) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(245, 158, 11, 0.25);
}
.workspace-hero-banner.template-promo .hero-banner-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  letter-spacing: 0.05em;
}
.workspace-hero-banner.template-promo .hero-banner-title {
  color: #F8FAFC;
}
.workspace-hero-banner.template-promo .hero-banner-subtitle {
  color: #CBD5E1;
}
.workspace-hero-banner.template-promo .hero-banner-perks li {
  color: #E2E8F0;
}
.workspace-hero-banner.template-promo .hero-banner-price-tag {
  background: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.workspace-hero-banner.template-promo .hero-banner-btn {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #0F172A !important;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}
.workspace-hero-banner.template-promo .hero-banner-btn:hover {
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}
.workspace-hero-banner.template-promo .hero-banner-footer-credit {
  color: #94A3B8;
}
.workspace-hero-banner.template-promo .hero-banner-close-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.workspace-hero-banner.template-promo .hero-banner-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* ── Perks & Pricing Elements ───────────────────────────────────────────── */
.hero-banner-perks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 6px 0;
  padding: 0;
  list-style: none;
}
.hero-banner-perks li {
  font-size: 12px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-banner-perks li svg {
  flex-shrink: 0;
}
.hero-banner-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  margin: 4px 0 6px 0;
  width: fit-content;
}

/* ══════════════════════════════════════════════════════════════════════════
   HELPDESK & COMPLAINT SYSTEM STYLING
   ══════════════════════════════════════════════════════════════════════════ */
.btn-raise-complaint:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
  color: #B91C1C !important;
  transform: translateY(-1px);
}
.helpdesk-subtab-btn.active {
  color: #2563EB !important;
  border-bottom: 2px solid #2563EB !important;
}
.kb-card {
  background: #FFFFFF;
  border: 1px solid #DDE3EA;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
  cursor: pointer;
}
.kb-card:hover {
  border-color: #93C5FD;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}
.kb-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.kb-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #EFF6FF;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kb-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  color: #0F172A;
  line-height: 1.3;
}
.kb-card-category {
  font-size: 11px;
  font-weight: 700;
  color: #2563EB;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kb-card-summary {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.kb-card-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #2563EB;
  font-weight: 650;
}

/* Chat bubble styling for ticket conversation drawer */
.chat-bubble-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-bubble-row.owner {
  align-items: flex-end;
}
.chat-bubble-row.superadmin {
  align-items: flex-start;
}
.chat-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.chat-bubble.owner {
  background: #2563EB;
  color: #FFFFFF;
  border-bottom-right-radius: 3px;
}
.chat-bubble.superadmin {
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #DDE3EA;
  border-bottom-left-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.chat-bubble-meta {
  font-size: 11px;
  color: #64748B;
  display: flex;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 1: CYBER OBSIDIAN / TACTICAL STEALTH THEME & TELEMETRY HUD CHIP
   ══════════════════════════════════════════════════════════════════════════ */

/* Theme Toggle Button in Topbar */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle-btn:hover {
  background: var(--surface-subtle);
  border-color: var(--line-strong);
}

/* ── BODY.THEME-TACTICAL (AVIONICS / STEALTH HUD HIGH-CONTRAST PALETTE) ── */
body.theme-tactical {
  --bg: #070a12;
  --surface: #0f172a;
  --surface-subtle: #131d33;
  --line: #1e293b;
  --line-strong: #334155;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --primary: #0284c7;
  --primary-hover: #38bdf8;
  --accent-cyan: #00f0ff;
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.14);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  background: #070a12;
  color: #f8fafc;
}

body.theme-tactical .topbar {
  background: #090d16;
  border-bottom-color: #1e293b;
}

body.theme-tactical .sidebar {
  background: #0B1324;
  border-right-color: #1E293B;
  box-shadow: 4px 0 24px rgba(11, 19, 36, 0.16);
}
body.theme-tactical .sidebar .brand-title {
  color: #FFFFFF !important;
}
body.theme-tactical .sidebar .brand-title span {
  color: #38BDF8 !important;
}
body.theme-tactical .sidebar .brand-sub {
  color: #94A3B8 !important;
}
body.theme-tactical .sidebar .nav-item {
  color: #94A3B8;
}
body.theme-tactical .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}
body.theme-tactical .sidebar .nav-item.active {
  background: #1E293B !important;
  color: #38BDF8 !important;
  border-left: 3px solid #38BDF8;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}
body.theme-tactical .sidebar .sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-tactical .sidebar .quota-card {
  background: #111C30 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical .sidebar .quota-header-left {
  color: #E2E8F0 !important;
}
body.theme-tactical .sidebar .quota-header-left svg {
  color: #38BDF8 !important;
}
body.theme-tactical .sidebar .quota-percent {
  color: #34D399 !important;
}
body.theme-tactical .sidebar .progress-bar-bg {
  background: rgba(255, 255, 255, 0.12) !important;
}
body.theme-tactical .sidebar .progress-bar-fill {
  background: linear-gradient(90deg, #0284C7, #10B981) !important;
}

body.theme-tactical .content-body {
  background: #070a12;
}

body.theme-tactical .map-stage-wrapper {
  background: #070a12;
}

body.theme-tactical .map-staff-sidebar {
  background: #0d1321;
  border-right-color: #1e293b;
}

body.theme-tactical .staff-card-row {
  background: #0f172a;
  border-color: #1e293b;
  color: #f8fafc;
}
body.theme-tactical .staff-card-row:hover {
  background: #131d33;
  border-color: #334155;
}
body.theme-tactical .staff-card-row.active {
  background: #172554;
  border-color: #2563eb;
}

body.theme-tactical .settings-card,
body.theme-tactical .detail-stat-card,
body.theme-tactical .cockpit-app-card,
body.theme-tactical .stat-card,
body.theme-tactical .tactical-tool-card,
body.theme-tactical .detail-card,
body.theme-tactical .modal-window {
  background: #0d1321;
  border-color: #1e293b;
  color: #f8fafc;
}

body.theme-tactical .modal-header {
  border-bottom-color: #1e293b !important;
}

body.theme-tactical .map-top-controls .map-style-segmented,
body.theme-tactical .map-action-btn,
body.theme-tactical .tool-icon-btn {
  background: rgba(15, 23, 42, 0.92);
  border-color: #334155;
  color: #f8fafc;
}
body.theme-tactical .map-top-controls .map-style-segmented button {
  color: #94a3b8;
}
body.theme-tactical .map-top-controls .map-style-segmented button.active {
  background: #0284c7;
  color: #fff;
}

body.theme-tactical .datetime-chip,
body.theme-tactical .user-profile-chip {
  background: #0f172a;
  border-color: #1e293b;
  color: #f8fafc;
}

body.theme-tactical .staff-chat-composer {
  background: #090d16 !important;
  border-top-color: #1e293b !important;
}

/* ── FLOATING TACTICAL TELEMETRY HUD CHIP (MAP OVERLAY) ── */
.map-telemetry-hud-chip {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px;
  background: rgba(11, 17, 32, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #cbd5e1;
  pointer-events: auto;
}
.map-telemetry-hud-chip .hud-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-telemetry-hud-chip .hud-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.map-telemetry-hud-chip .hud-dot.green {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.map-telemetry-hud-chip .hud-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.14);
}
.map-telemetry-hud-chip .hud-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.6px;
}
.map-telemetry-hud-chip .hud-val {
  font-size: 11.5px;
  font-weight: 800;
  color: #f8fafc;
}
.map-telemetry-hud-chip .hud-val.green { color: #34d399; }
.map-telemetry-hud-chip .hud-val.amber { color: #fbbf24; }
.map-telemetry-hud-chip .hud-val.cyan { color: #38bdf8; }
.map-telemetry-hud-chip .hud-sub {
  font-size: 9.5px;
  color: #94a3b8;
}

/* ── VIRTUAL HANDSET GESTURE STRIP (DIRECT ADB INJECTION) ── */
.handset-gesture-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 320px;
}
.gesture-btn {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.gesture-btn svg {
  color: #38bdf8;
  transition: transform 0.15s ease;
}
.gesture-btn:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  color: #f8fafc;
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}
.gesture-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  border-color: #38bdf8;
}
.gesture-btn:hover svg {
  transform: scale(1.1);
}

/* ── MAP LAYER SELECTOR (CLASSIC / GOOGLE SAT / ESRI / TERRAIN) ── */
.map-layer-selector {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.layer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.15s ease;
}
.layer-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}
.layer-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}

/* ── CALL AUDIO WAVEFORM PLAYER MODAL ── */
.waveform-player-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.waveform-player-card {
  width: 90%;
  max-width: 620px;
  background: #0b1120;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
.waveform-visual-container {
  position: relative;
  width: 100%;
  height: 90px;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin: 16px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speed-chip {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.speed-chip.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}
.speed-chip:hover:not(.active) {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

/* ── SUPPORT CHAT & TICKET DESK ELEVATION ── */
.chat-thread-bubble {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 80%;
}
.chat-thread-bubble.owner {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border-bottom-right-radius: 3px;
  margin-left: auto;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}
.chat-thread-bubble.superadmin {
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 3px;
  margin-right: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ── HARDWARE ORIENTATION & FLASHLIGHT ILLUMINATION ── */
.handset-physical-body.landscape-mode {
  transform: rotate(90deg) scale(0.85);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 50px 0;
}

.handset-physical-body.torch-on::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 36px;
  width: 14px;
  height: 24px;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.95) 0%, rgba(250, 204, 21, 0.4) 60%, transparent 100%);
  filter: blur(4px) drop-shadow(0 0 16px #facc15);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  z-index: 100;
  animation: torchPulse 1.2s ease-in-out infinite alternate;
}

@keyframes torchPulse {
  0% { opacity: 0.85; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.1); filter: blur(3px) drop-shadow(0 0 24px #fde047); }
}

/* ==========================================================================
   ENTERPRISE TACTICAL HIGH-CONTRAST DARK MODE OVERRIDES (V5 ULTRA)
   ========================================================================== */
body.theme-tactical .metric-value {
  color: #f8fafc !important;
}
body.theme-tactical .metric-label {
  color: #94a3b8 !important;
}
body.theme-tactical .metric-card {
  background: #0d1321 !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
body.theme-tactical .metric-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.25) !important;
}
body.theme-tactical #topbar-heading {
  color: #f8fafc !important;
}
body.theme-tactical #topbar-sub {
  color: #94a3b8 !important;
}
body.theme-tactical .topbar {
  background: #090d16 !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}
body.theme-tactical .metric-circle-icon.blue { background: rgba(2, 132, 199, 0.18) !important; color: #38bdf8 !important; }
body.theme-tactical .metric-circle-icon.green { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }
body.theme-tactical .metric-circle-icon.amber { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; }
body.theme-tactical .metric-circle-icon.red { background: rgba(239, 68, 68, 0.18) !important; color: #f87171 !important; }
body.theme-tactical .metric-circle-icon.purple { background: rgba(139, 92, 246, 0.18) !important; color: #a78bfa !important; }

/* Tactical Input and Form Controls in Dark Mode */
body.theme-tactical input[type="text"],
body.theme-tactical input[type="number"],
body.theme-tactical input[type="email"],
body.theme-tactical input[type="password"],
body.theme-tactical select,
body.theme-tactical textarea {
  background: #090d16 !important;
  border: 1px solid #1e293b !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
body.theme-tactical input:focus,
body.theme-tactical select:focus,
body.theme-tactical textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
  outline: none !important;
}
body.theme-tactical input::placeholder,
body.theme-tactical textarea::placeholder {
  color: #64748b !important;
}
body.theme-tactical label,
body.theme-tactical .form-label,
body.theme-tactical .settings-card h3,
body.theme-tactical .settings-card h4,
body.theme-tactical .settings-title,
body.theme-tactical .card-title {
  color: #f8fafc !important;
}
body.theme-tactical .settings-card p,
body.theme-tactical .form-hint,
body.theme-tactical .settings-desc,
body.theme-tactical .card-subtitle {
  color: #94a3b8 !important;
}
body.theme-tactical .settings-subtabs {
  border-bottom: 1px solid #1e293b !important;
}
body.theme-tactical .subtab-btn {
  color: #94a3b8 !important;
  border-bottom: 2px solid transparent !important;
}
body.theme-tactical .subtab-btn:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
body.theme-tactical .subtab-btn.active {
  color: #38bdf8 !important;
  border-bottom-color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.12) !important;
}
body.theme-tactical .table-card,
body.theme-tactical .data-table-container,
body.theme-tactical .geofence-list-container {
  background: #0d1321 !important;
  border: 1px solid #1e293b !important;
}
body.theme-tactical table {
  color: #f8fafc !important;
}
body.theme-tactical thead th {
  background: #090d16 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #1e293b !important;
}
body.theme-tactical tbody td {
  border-bottom: 1px solid #131d33 !important;
  color: #cbd5e1 !important;
}
body.theme-tactical tbody tr:hover {
  background: #131d33 !important;
}
body.theme-tactical .workspace-hero-banner {
  background: linear-gradient(90deg, #0b1528 0%, #0f2042 50%, #0b1528 100%) !important;
  border: 1px solid #1e3a5f !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
body.theme-tactical .hero-banner-title {
  color: #f8fafc !important;
}
body.theme-tactical .hero-banner-sub {
  color: #94a3b8 !important;
}
body.theme-tactical .filter-pill-btn,
body.theme-tactical .btn-secondary,
body.theme-tactical .btn-ghost {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}
body.theme-tactical .filter-pill-btn:hover,
body.theme-tactical .btn-secondary:hover {
  background: #1e293b !important;
  color: #f8fafc !important;
}
body.theme-tactical .filter-pill-btn.active {
  background: #0284c7 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
body.theme-tactical .tactical-tab-bar {
  background: #090d16 !important;
  border-bottom: 1px solid #1e293b !important;
}
body.theme-tactical .tactical-tab-btn {
  color: #94a3b8 !important;
}
body.theme-tactical .tactical-tab-btn.active {
  color: #38bdf8 !important;
  border-bottom-color: #0284c7 !important;
}
body.theme-tactical .sec-perimeter-item,
body.theme-tactical .sec-quick-btn {
  background: #090d16 !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
}
body.theme-tactical .sec-perimeter-item:hover,
body.theme-tactical .sec-quick-btn:hover {
  background: #131d33 !important;
  border-color: #38bdf8 !important;
}
body.theme-tactical .sec-quick-btn span {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   TACTICAL ALERTS & GEOFENCE LOGS INTERACTIVE BOXES (COCKPIT GRADE)
   ========================================================================== */
.sec-feed-list {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-feed-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec-feed-card:hover {
  border-color: #0284c7;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
  transform: translateY(-2px);
}

.sec-feed-card.critical {
  border-left: 5px solid #ef4444 !important;
  background: #ffffff;
}
.sec-feed-card.warning {
  border-left: 5px solid #f59e0b !important;
  background: #ffffff;
}
.sec-feed-card.audit {
  border-left: 5px solid #0284c7 !important;
  background: #ffffff;
}
.sec-feed-card.comms {
  border-left: 5px solid #10b981 !important;
  background: #ffffff;
}
.sec-feed-card.info {
  border-left: 5px solid #64748b !important;
  background: #ffffff;
}

body.theme-tactical .sec-feed-card {
  background: #0d1321 !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body.theme-tactical .sec-feed-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 28px rgba(2, 132, 199, 0.25) !important;
}
body.theme-tactical .sec-feed-card.critical {
  border-left: 5px solid #ef4444 !important;
  background: #110e16 !important;
}
body.theme-tactical .sec-feed-card.warning {
  border-left: 5px solid #f59e0b !important;
  background: #14110b !important;
}
body.theme-tactical .sec-feed-card.audit {
  border-left: 5px solid #0284c7 !important;
  background: #0b1526 !important;
}
body.theme-tactical .sec-feed-card.comms {
  border-left: 5px solid #10b981 !important;
  background: #0b1a16 !important;
}
body.theme-tactical .sec-feed-card.info {
  border-left: 5px solid #64748b !important;
  background: #0b1526 !important;
}

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

.sec-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sec-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sec-icon-circle.critical { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.sec-icon-circle.warning { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); }
.sec-icon-circle.audit { background: rgba(2, 132, 199, 0.12); color: #0284c7; border: 1px solid rgba(2, 132, 199, 0.25); }
.sec-icon-circle.comms { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.sec-icon-circle.info { background: rgba(100, 116, 139, 0.12); color: #64748b; border: 1px solid rgba(100, 116, 139, 0.25); }

.sec-card-title {
  font-size: 14px;
  font-weight: 750;
  color: #0f172a;
  letter-spacing: -0.2px;
}
body.theme-tactical .sec-card-title {
  color: #f8fafc !important;
}

.sec-narrative {
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #edf2f7;
}
body.theme-tactical .sec-narrative {
  background: #090d16 !important;
  color: #cbd5e1 !important;
  border-color: #1e293b !important;
}

.sec-meta-chips-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}

.sec-gnss-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 6px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sec-gnss-chip:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  transform: translateY(-1px);
}
body.theme-tactical .sec-gnss-chip {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}
body.theme-tactical .sec-gnss-chip:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* Interactive Card Action Buttons */
.sec-card-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  flex-wrap: wrap;
}
body.theme-tactical .sec-card-action-bar {
  border-top-color: #1e293b !important;
}

.sec-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sec-btn-interactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}
.sec-btn-interactive:active {
  transform: scale(0.97);
}

.sec-btn-interactive.primary {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}
.sec-btn-interactive.primary:hover {
  background: #0369a1;
  border-color: #38bdf8;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.sec-btn-interactive.danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
.sec-btn-interactive.danger:hover {
  background: #b91c1c;
  border-color: #f87171;
}

.sec-btn-interactive.warning {
  background: #d97706;
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}
.sec-btn-interactive.warning:hover {
  background: #b45309;
  border-color: #fbbf24;
}

.sec-btn-interactive.secondary {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.sec-btn-interactive.secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}
body.theme-tactical .sec-btn-interactive.secondary {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}
body.theme-tactical .sec-btn-interactive.secondary:hover {
  background: #334155 !important;
  color: #f8fafc !important;
}

.sec-btn-interactive.success {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}
.sec-btn-interactive.success:hover {
  background: #047857;
  border-color: #34d399;
}

/* Enrollment & Billing Specific Styling */
#settings-qr-box {
  min-height: 190px;
  background: #ffffff !important;
  border: 2px dashed #0284c7 !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15);
}

.enroll-step-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
body.theme-tactical .enroll-step-card {
  background: #090d16 !important;
  border-color: #1e293b !important;
}
.enroll-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.theme-tactical .sec-meta-row strong {
  color: #f8fafc !important;
}
body.theme-tactical .sec-meta-row span {
  color: #94a3b8 !important;
}
body.theme-tactical .sec-meta-row {
  border-bottom: 1px dashed #1e293b !important;
}
body.theme-tactical .sec-card-title,
body.theme-tactical .settings-card-title,
body.theme-tactical .settings-card-title span,
body.theme-tactical .settings-title,
body.theme-tactical .card-title {
  color: #f8fafc !important;
}
body.theme-tactical .metric-title {
  color: #94a3b8 !important;
}
body.theme-tactical .metric-big-num {
  color: #f8fafc !important;
}
body.theme-tactical .metric-sub {
  color: #94a3b8 !important;
}
body.theme-tactical .sec-card-meta span {
  color: #cbd5e1 !important;
}
body.theme-tactical .sec-card-meta strong {
  color: #f8fafc !important;
}
body.theme-tactical .sec-card-narrative {
  color: #f8fafc !important;
}
body.theme-tactical .alerts-btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}
body.theme-tactical .alerts-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TACTICAL INVOICE A4 SHEET RENDERING (WORKSPACE CLIENT VIEWER)
   ═══════════════════════════════════════════════════════════════════════════ */
.invoice-a4-paper {
  width: 100% !important;
  max-width: 820px !important;
  min-height: 1160px !important;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.4) !important;
  border-radius: 6px !important;
  position: relative !important;
  padding: 36px 40px !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  transition: all 0.25s ease !important;
}

/* ── THEME 1: TACTICAL GOLD & OBSIDIAN (MILITARY SPEC) ──────────────────── */
.invoice-a4-paper.theme-tactical-gold {
  background: #111418 !important;
  color: #E2E8F0 !important;
  border: 1.5px solid #2D3748 !important;
}
.theme-tactical-gold .inv-classification-bar {
  background: #1A1E24 !important;
  border-bottom: 1px solid #D97706 !important;
  color: #F59E0B !important;
}
.theme-tactical-gold .inv-brand-title { color: #FFFFFF !important; }
.theme-tactical-gold .inv-brand-sub { color: #D97706 !important; }
.theme-tactical-gold .inv-issuer-details { color: #94A3B8 !important; }
.theme-tactical-gold .inv-meta-card {
  background: #181C22 !important;
  border: 1px solid #2D3748 !important;
}
.theme-tactical-gold .inv-doc-title {
  color: #F59E0B !important;
  border-bottom: 1px solid #2D3748 !important;
}
.theme-tactical-gold .inv-meta-cell .meta-label { color: #94A3B8 !important; }
.theme-tactical-gold .inv-meta-cell .meta-val { color: #F8FAFC !important; }
.theme-tactical-gold .inv-address-box {
  background: #161A20 !important;
  border: 1px solid #2D3748 !important;
  color: #CBD5E1 !important;
}
.theme-tactical-gold .inv-address-box.alt {
  background: #181C24 !important;
  border-left: 3px solid #D97706 !important;
}
.theme-tactical-gold .address-title { color: #F59E0B !important; }
.theme-tactical-gold .client-name { color: #FFFFFF !important; }
.theme-tactical-gold .inv-sheet-table thead tr {
  background: #1A1F26 !important;
  color: #F59E0B !important;
  border-top: 1px solid #2D3748 !important;
  border-bottom: 2px solid #D97706 !important;
}
.theme-tactical-gold .inv-sheet-table tbody tr {
  border-bottom: 1px solid #1F242C !important;
  color: #E2E8F0 !important;
}
.theme-tactical-gold .inv-sheet-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02) !important;
}
.theme-tactical-gold .inv-settlement-box {
  background: #161A20 !important;
  border: 1px solid #2D3748 !important;
  color: #94A3B8 !important;
}
.theme-tactical-gold .sheet-qr-caption { color: #F59E0B !important; }
.theme-tactical-gold .inv-totals-box {
  background: #181C22 !important;
  border: 1px solid #2D3748 !important;
  color: #CBD5E1 !important;
}
.theme-tactical-gold .inv-total-row.grand {
  background: #1E232B !important;
  border-top: 1.5px solid #D97706 !important;
  color: #F59E0B !important;
}
.theme-tactical-gold .inv-words-amount { color: #94A3B8 !important; }
.theme-tactical-gold .inv-footer-block {
  border-top: 1px solid #2D3748 !important;
  color: #94A3B8 !important;
}
.theme-tactical-gold .inv-rubber-stamp {
  border: 3.5px dashed rgba(217, 119, 6, 0.75) !important;
  color: #F59E0B !important;
}
.theme-tactical-gold .inv-sig-cursive { color: #F59E0B !important; }
.theme-tactical-gold .inv-sig-rule { background: #2D3748 !important; }
.theme-tactical-gold .inv-sig-name { color: #FFFFFF !important; }
.theme-tactical-gold .inv-sig-role { color: #94A3B8 !important; }

/* ── FLAGSHIP THEME: CORPORATE TEAL & GEOMETRIC (MATCHES UPLOADED REFERENCE) ── */
.invoice-a4-paper.theme-classic,
.invoice-a4-paper.theme-corporate-teal,
.invoice-a4-paper.theme-swiss-minimal {
  padding: 32px 38px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #0F172A !important;
  border-radius: 4px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
  max-width: 840px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body.theme-tactical .invoice-a4-paper.theme-classic,
body.theme-tactical .invoice-a4-paper.theme-classic * {
  color: #0F172A;
}

body.theme-tactical .invoice-a4-paper.theme-classic table th,
.invoice-a4-paper.theme-classic table th {
  color: #FFFFFF !important;
  background: #0F172A !important;
}

body.theme-tactical .invoice-a4-paper.theme-corporate-teal strong,
body.theme-tactical .invoice-a4-paper.theme-swiss-minimal strong,
body.theme-tactical .invoice-a4-paper.theme-classic strong,
.invoice-a4-paper.theme-corporate-teal strong,
.invoice-a4-paper.theme-swiss-minimal strong,
.invoice-a4-paper.theme-classic strong {
  color: #0F172A !important;
}

/* Sovereign Security Watermark Background */
.inv-watermark-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 440px !important;
  height: 440px !important;
  opacity: 0.035 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: url('/web/assets/brand/argusrecon-symbol-v1.png') center/contain no-repeat !important;
}

/* Classic Executive Theme Base */
.theme-corporate-teal,
.theme-classic-corporate,
.theme-swiss-minimal {
  position: relative !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Top-Left Accent Tab */
.theme-corporate-teal .inv-geo-accent-tab,
.theme-swiss-minimal .inv-geo-accent-tab {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 22px !important;
  background: #008080 !important;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%) !important;
  z-index: 4 !important;
}

/* Left Charcoal / Brand Zone */
.theme-corporate-teal .inv-geo-left,
.theme-swiss-minimal .inv-geo-left {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 62% !important;
  height: 100% !important;
  background: #111619 !important;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%) !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 42px 36px 18px 40px !important;
  box-sizing: border-box !important;
}

.theme-corporate-teal .inv-geo-brand-row,
.theme-swiss-minimal .inv-geo-brand-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
}

.theme-corporate-teal .inv-geo-brand-name,
.theme-swiss-minimal .inv-geo-brand-name {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
}

.theme-corporate-teal .inv-geo-brand-tag,
.theme-corporate-teal .inv-geo-brand-tagline,
.theme-swiss-minimal .inv-geo-brand-tag,
.theme-swiss-minimal .inv-geo-brand-tagline {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #00C4B4 !important;
  margin-top: 3px !important;
}

.theme-corporate-teal .inv-geo-corp-meta,
.theme-corporate-teal .inv-geo-registry-text,
.theme-swiss-minimal .inv-geo-corp-meta,
.theme-swiss-minimal .inv-geo-registry-text {
  font-size: 10px !important;
  color: #CBD5E1 !important;
  line-height: 1.4 !important;
}

/* Right Angled Emerald Teal Zone */
.theme-corporate-teal .inv-geo-right,
.theme-swiss-minimal .inv-geo-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 52% !important;
  height: 100% !important;
  background: #008080 !important;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding: 24px 38px 18px 60px !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
}

.theme-corporate-teal .inv-geo-title,
.theme-swiss-minimal .inv-geo-title {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

.theme-corporate-teal .inv-geo-meta-list,
.theme-swiss-minimal .inv-geo-meta-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 220px !important;
}

.theme-corporate-teal .inv-geo-meta-row,
.theme-swiss-minimal .inv-geo-meta-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
}

.theme-corporate-teal .inv-geo-meta-label,
.theme-swiss-minimal .inv-geo-meta-label {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
}

.theme-corporate-teal .inv-geo-meta-val,
.theme-swiss-minimal .inv-geo-meta-val {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Document Body Padding */
.theme-corporate-teal .inv-sheet-body,
.theme-swiss-minimal .inv-sheet-body {
  padding: 28px 40px 16px 40px !important;
  flex: 1 1 auto !important;
}

/* Middle 2-Column Info */
.theme-corporate-teal .inv-info-columns,
.theme-swiss-minimal .inv-info-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 26px !important;
}

.theme-corporate-teal .inv-col-heading,
.theme-swiss-minimal .inv-col-heading {
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #008080 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.theme-corporate-teal .inv-client-name,
.theme-swiss-minimal .inv-client-name {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.theme-corporate-teal .inv-client-sub,
.theme-swiss-minimal .inv-client-sub {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  margin: 2px 0 10px 0 !important;
}

.theme-corporate-teal .inv-kv-list,
.theme-swiss-minimal .inv-kv-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.theme-corporate-teal .inv-kv-item,
.theme-swiss-minimal .inv-kv-item {
  display: flex !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  gap: 8px !important;
}

.theme-corporate-teal .inv-kv-k,
.theme-swiss-minimal .inv-kv-k {
  width: 105px !important;
  flex-shrink: 0 !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

.theme-corporate-teal .inv-kv-v,
.theme-swiss-minimal .inv-kv-v {
  color: #0F172A !important;
  white-space: nowrap !important;
}

/* Line Items Table */
.theme-corporate-teal .inv-sheet-table,
.theme-swiss-minimal .inv-sheet-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11.5px !important;
  border: 1px solid #E2E8F0 !important;
}

.theme-corporate-teal .inv-sheet-table thead tr,
.theme-swiss-minimal .inv-sheet-table thead tr {
  background: #008080 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.theme-corporate-teal .inv-sheet-table th,
.theme-swiss-minimal .inv-sheet-table th {
  padding: 10px 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  font-size: 11px !important;
  border: 1px solid #006666 !important;
}

.theme-corporate-teal .inv-sheet-table tbody tr,
.theme-swiss-minimal .inv-sheet-table tbody tr {
  border-bottom: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
}

.theme-corporate-teal .inv-sheet-table tbody tr:nth-child(even),
.theme-swiss-minimal .inv-sheet-table tbody tr:nth-child(even) {
  background: #F8FAFC !important;
}

.theme-corporate-teal .inv-sheet-table td,
.theme-swiss-minimal .inv-sheet-table td {
  padding: 10px 14px !important;
  border: 1px solid #E2E8F0 !important;
  vertical-align: middle !important;
  color: #0F172A !important;
}

/* Bottom Calculation & Terms */
.theme-corporate-teal .inv-bottom-section,
.theme-swiss-minimal .inv-bottom-section {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
  margin-top: 20px !important;
  align-items: start !important;
}

.theme-corporate-teal .inv-terms-title,
.theme-swiss-minimal .inv-terms-title {
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  color: #008080 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.theme-corporate-teal .inv-terms-body,
.theme-swiss-minimal .inv-terms-body {
  font-size: 10.5px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin: 0 0 14px 0 !important;
}

.theme-corporate-teal .inv-thankyou-banner,
.theme-swiss-minimal .inv-thankyou-banner {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #0F172A !important;
  text-transform: uppercase !important;
}

.theme-corporate-teal .inv-totals-col,
.theme-swiss-minimal .inv-totals-col {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.theme-corporate-teal .inv-total-line,
.theme-swiss-minimal .inv-total-line {
  display: flex !important;
  justify-content: space-between !important;
  padding: 7px 14px !important;
  font-size: 11.5px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.theme-corporate-teal .total-k,
.theme-swiss-minimal .total-k {
  color: #475569 !important;
  font-weight: 600 !important;
}

.theme-corporate-teal .total-v,
.theme-swiss-minimal .total-v {
  color: #0F172A !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
}

.theme-corporate-teal .inv-grand-total-bar,
.theme-swiss-minimal .inv-grand-total-bar {
  background: #008080 !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.theme-corporate-teal .grand-label,
.theme-swiss-minimal .grand-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.theme-corporate-teal .grand-amount,
.theme-swiss-minimal .grand-amount {
  font-size: 16px !important;
  font-weight: 900 !important;
  font-family: var(--font-mono) !important;
}

.theme-corporate-teal .inv-words-amount,
.theme-swiss-minimal .inv-words-amount {
  font-size: 9.5px !important;
  color: #008080 !important;
  font-style: italic !important;
  padding: 6px 14px !important;
  background: #F0FDFA !important;
  line-height: 1.35 !important;
}

/* Bottom Geometric Footer */
.theme-corporate-teal .inv-geo-footer,
.theme-swiss-minimal .inv-geo-footer {
  position: relative !important;
  width: 100% !important;
  min-height: 80px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

/* Left Angled Teal Contact Strip */
.theme-corporate-teal .inv-geo-contact-strip,
.theme-swiss-minimal .inv-geo-contact-strip {
  background: #008080 !important;
  color: #FFFFFF !important;
  width: 62% !important;
  clip-path: polygon(0 0, 94% 0, 86% 100%, 0 100%) !important;
  padding: 12px 28px 12px 36px !important;
  box-sizing: border-box !important;
}

.theme-corporate-teal .contact-strip-inner,
.theme-swiss-minimal .contact-strip-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

.theme-corporate-teal .contact-pill,
.theme-swiss-minimal .contact-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 8.8px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.theme-corporate-teal .contact-icon,
.theme-swiss-minimal .contact-icon {
  font-size: 13px !important;
  opacity: 0.9 !important;
}

/* Right Signature Area */
.theme-corporate-teal .inv-geo-sig-area,
.theme-swiss-minimal .inv-geo-sig-area {
  width: 38% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding-right: 40px !important;
  padding-bottom: 8px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.theme-corporate-teal .inv-sig-wrap,
.theme-swiss-minimal .inv-sig-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 170px !important;
}

.theme-corporate-teal .inv-sig-cursive,
.theme-swiss-minimal .inv-sig-cursive {
  font-family: "Brush Script MT", "Caveat", "Dancing Script", cursive !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin-bottom: -4px !important;
}

.theme-corporate-teal .inv-sig-rule,
.theme-swiss-minimal .inv-sig-rule {
  width: 100% !important;
  height: 1px !important;
  background: #64748B !important;
  margin-bottom: 4px !important;
}

.theme-corporate-teal .inv-sig-name,
.theme-swiss-minimal .inv-sig-name {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.theme-corporate-teal .inv-sig-role,
.theme-swiss-minimal .inv-sig-role {
  font-size: 8.5px !important;
  color: #64748B !important;
  text-align: center !important;
}

/* Bottom Grounding Black Bar */
.theme-corporate-teal .inv-bottom-black-bar,
.theme-swiss-minimal .inv-bottom-black-bar {
  width: 100% !important;
  height: 14px !important;
  background: #111619 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TEMPLATE 2: SUNSET GRADIENT • MODERN STUDIO (MATCHES IMAGE 1)
   ═══════════════════════════════════════════════════════════════════════════ */
.invoice-a4-paper.theme-sunset-gradient,
.invoice-a4-paper.theme-corporate-teal {
  padding: 0 !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 20px 50px rgba(10, 17, 40, 0.12), 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* Full-Bleed Gradient Header */
.theme-sunset-gradient .inv-sunset-header,
.theme-corporate-teal .inv-spectrum-header {
  background: linear-gradient(135deg, #0A1128 0%, #142744 25%, #1E40AF 60%, #315BFA 85%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
  padding: 34px 44px 28px 44px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.theme-sunset-gradient .sunset-header-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 24px !important;
}

.theme-sunset-gradient .sunset-brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.theme-sunset-gradient .sunset-logo-icon {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.theme-sunset-gradient .sunset-brand-title {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
}

.theme-sunset-gradient .sunset-brand-tag {
  font-size: 9.5px !important;
  letter-spacing: 1.8px !important;
  color: #93C5FD !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

.theme-sunset-gradient .sunset-meta-top-right {
  text-align: right !important;
  color: #FFFFFF !important;
}

.theme-sunset-gradient .sunset-meta-label {
  font-size: 11px !important;
  color: #BFDBFE !important;
  font-weight: 600 !important;
}

.theme-sunset-gradient .sunset-meta-val {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin-bottom: 8px !important;
}

/* Header Middle Split */
.theme-sunset-gradient .sunset-header-mid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 16px !important;
}

.theme-sunset-gradient .sunset-inv-title {
  font-size: 42px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}

.theme-sunset-gradient .sunset-inv-num {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #93C5FD !important;
  margin-top: 6px !important;
  letter-spacing: 0.5px !important;
}

.theme-sunset-gradient .sunset-client-box {
  text-align: right !important;
  color: #FFFFFF !important;
  max-width: 320px !important;
}

.theme-sunset-gradient .sunset-client-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #BFDBFE !important;
  letter-spacing: 1px !important;
  margin-bottom: 3px !important;
}

.theme-sunset-gradient .sunset-client-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin-bottom: 2px !important;
}

.theme-sunset-gradient .sunset-client-addr {
  font-size: 11px !important;
  color: #E0E7FF !important;
  line-height: 1.3 !important;
}

/* Header Bottom Bar */
.theme-sunset-gradient .sunset-header-bot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 11.5px !important;
  color: #DBEAFE !important;
}

.theme-sunset-gradient .sunset-total-due {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

/* Sunset Document Body */
.theme-sunset-gradient .sunset-sheet-body {
  padding: 30px 44px 24px 44px !important;
  flex: 1 1 auto !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

/* Table Pill Container */
.theme-sunset-gradient .sunset-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  margin-bottom: 26px !important;
}

.theme-sunset-gradient .sunset-table thead tr {
  background: #EEF2F6 !important;
  color: #334155 !important;
  border-radius: 12px !important;
}

.theme-sunset-gradient .sunset-table th {
  padding: 12px 16px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
}

.theme-sunset-gradient .sunset-table th:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

.theme-sunset-gradient .sunset-table th:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.theme-sunset-gradient .sunset-table tbody tr {
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.theme-sunset-gradient .sunset-table tbody tr:nth-child(even) {
  background: #F1F5F9 !important;
}

.theme-sunset-gradient .sunset-table td {
  padding: 11px 16px !important;
  font-size: 11.5px !important;
  vertical-align: middle !important;
  border: none !important;
  color: #0F172A !important;
}

.theme-sunset-gradient .sunset-table tbody tr:nth-child(even) td:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.theme-sunset-gradient .sunset-table tbody tr:nth-child(even) td:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* Sunset Bottom Grid */
.theme-sunset-gradient .sunset-bottom-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 36px !important;
  align-items: start !important;
}

.theme-sunset-gradient .sunset-thankyou {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.theme-sunset-gradient .sunset-contact-strip {
  display: flex !important;
  gap: 18px !important;
  font-size: 10.5px !important;
  color: #475569 !important;
  margin-bottom: 18px !important;
  font-weight: 600 !important;
}

.theme-sunset-gradient .sunset-section-title {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  color: #0F172A !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.theme-sunset-gradient .sunset-section-body {
  font-size: 10.5px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

/* Sunset Totals & Pill Bar */
.theme-sunset-gradient .sunset-totals-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.theme-sunset-gradient .sunset-total-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
}

.theme-sunset-gradient .sunset-total-row strong {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.theme-sunset-gradient .sunset-total-pill {
  background: linear-gradient(135deg, #0A1128 0%, #142744 35%, #1E40AF 70%, #315BFA 100%) !important;
  color: #FFFFFF !important;
  border-radius: 28px !important;
  padding: 12px 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 24px rgba(49, 91, 250, 0.28) !important;
}

.theme-sunset-gradient .sunset-sig-block {
  margin-top: 24px !important;
  text-align: right !important;
}

.theme-sunset-gradient .sunset-sig-name {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
}

.theme-sunset-gradient .sunset-sig-role {
  font-size: 10.5px !important;
  color: #64748B !important;
  margin-bottom: 4px !important;
}

.theme-sunset-gradient .sunset-sig-loop {
  font-family: "Brush Script MT", "Caveat", "Dancing Script", cursive !important;
  font-size: 32px !important;
  color: #0F172A !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TEMPLATE 2: OCEANIC AZURE & DUAL-CARD UI (MATCHES REFERENCE IMAGE 2)
   ═══════════════════════════════════════════════════════════════════════════ */
.invoice-a4-paper.theme-oceanic-cards {
  padding: 26px 40px 22px 40px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 20px 50px rgba(20, 39, 68, 0.12), 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* Watermark */
.theme-oceanic-cards .oceanic-star-watermark {
  position: absolute !important;
  right: -30px !important;
  top: 150px !important;
  width: 180px !important;
  height: 180px !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Header Top */
.theme-oceanic-cards .oceanic-header-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 22px !important;
  position: relative !important;
  z-index: 1 !important;
}

.theme-oceanic-cards .oceanic-main-title {
  font-size: 46px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #142744 !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}

.theme-oceanic-cards .oceanic-dates-row {
  display: flex !important;
  gap: 20px !important;
  font-size: 11px !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

.theme-oceanic-cards .oceanic-brand-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: right !important;
}

.theme-oceanic-cards .oceanic-brand-name {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #142744 !important;
  letter-spacing: 1px !important;
}

.theme-oceanic-cards .oceanic-brand-sub {
  font-size: 9.5px !important;
  color: #315BFA !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Middle Section: Navy Client Card + Right Stack */
.theme-oceanic-cards .oceanic-mid-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 24px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

.theme-oceanic-cards .oceanic-client-card {
  background: #142744 !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px rgba(20, 39, 68, 0.2) !important;
}

.theme-oceanic-cards .oceanic-client-label {
  font-size: 11px !important;
  color: #93C5FD !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.theme-oceanic-cards .oceanic-name-pill {
  display: inline-block !important;
  background: #315BFA !important;
  color: #FFFFFF !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  margin: 6px 0 10px 0 !important;
  box-shadow: 0 4px 12px rgba(49, 91, 250, 0.35) !important;
}

.theme-oceanic-cards .oceanic-client-meta {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.4 !important;
}

.theme-oceanic-cards .oceanic-client-meta strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.theme-oceanic-cards .oceanic-terms-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.theme-oceanic-cards .oceanic-orange-heading {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #142744 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.theme-oceanic-cards .oceanic-info-txt {
  font-size: 10.5px !important;
  color: #475569 !important;
  line-height: 1.45 !important;
}

.theme-oceanic-cards .oceanic-notice-bar {
  font-size: 10px !important;
  color: #64748B !important;
  font-style: italic !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Oceanic Table */
.theme-oceanic-cards .oceanic-table-card {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 24px !important;
  position: relative !important;
  z-index: 1 !important;
}

.theme-oceanic-cards .oceanic-table-card thead tr {
  background: #142744 !important;
  color: #FFFFFF !important;
}

.theme-oceanic-cards .oceanic-table-card th {
  padding: 12px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border: none !important;
}

.theme-oceanic-cards .oceanic-table-card th:first-child {
  border-top-left-radius: 12px !important;
}

.theme-oceanic-cards .oceanic-table-card th:last-child {
  border-top-right-radius: 12px !important;
}

.theme-oceanic-cards .oceanic-table-card td {
  padding: 12px 16px !important;
  font-size: 11.5px !important;
  vertical-align: middle !important;
  border-bottom: 1px dashed #CBD5E1 !important;
  color: #0F172A !important;
}

.theme-oceanic-cards .oceanic-badge-no {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  margin: 0 auto !important;
}

/* Badge colors */
.theme-oceanic-cards .badge-c1 { background: #315BFA !important; }
.theme-oceanic-cards .badge-c2 { background: #1E40AF !important; }
.theme-oceanic-cards .badge-c3 { background: #142744 !important; }
.theme-oceanic-cards .badge-c4 { background: #0284C7 !important; }

/* Oceanic Bottom Grid */
.theme-oceanic-cards .oceanic-bot-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  position: relative !important;
  z-index: 1 !important;
}

.theme-oceanic-cards .oceanic-sig-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.theme-oceanic-cards .oceanic-sig-cursive {
  font-family: "Brush Script MT", "Caveat", "Dancing Script", cursive !important;
  font-size: 28px !important;
  color: #142744 !important;
  font-weight: 600 !important;
}

.theme-oceanic-cards .oceanic-sig-name {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #142744 !important;
}

.theme-oceanic-cards .oceanic-sig-role {
  font-size: 10.5px !important;
  color: #64748B !important;
}

.theme-oceanic-cards .oceanic-totals-card {
  background: #142744 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  color: #FFFFFF !important;
  width: 280px !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 25px rgba(20, 39, 68, 0.25) !important;
}

.theme-oceanic-cards .oceanic-tot-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 6px !important;
}

.theme-oceanic-cards .oceanic-tot-row strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.theme-oceanic-cards .oceanic-final-pill {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 10px !important;
  color: #142744 !important;
}

.theme-oceanic-cards .oceanic-final-pill span {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #142744 !important;
}

.theme-oceanic-cards .oceanic-final-pill strong {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #142744 !important;
}

/* Tactical Mode Color Protection */
body.theme-tactical .invoice-a4-paper.theme-sunset-gradient strong,
body.theme-tactical .invoice-a4-paper.theme-oceanic-cards strong,
.invoice-a4-paper.theme-sunset-gradient strong,
.invoice-a4-paper.theme-oceanic-cards strong {
  color: inherit !important;
}


/* ── COMMON A4 SHEET INTERNAL ELEMENTS ──────────────────────────────────── */
.inv-classification-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  margin: -36px -40px 24px -40px !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

.inv-header-block {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 24px !important;
  align-items: start !important;
  margin-bottom: 22px !important;
}

.inv-logo-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}

.inv-logo-img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

.inv-brand-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

.inv-brand-sub {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  display: block !important;
}

.inv-issuer-details p {
  margin: 2px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

.inv-meta-card {
  padding: 14px 18px !important;
  border-radius: 8px !important;
  min-width: 220px !important;
}

.inv-doc-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
}

.inv-meta-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.inv-meta-cell {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
}

.sheet-status-badge {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
.sheet-status-badge.status-paid {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10B981 !important;
  border: 1px solid #10B981 !important;
}
.sheet-status-badge.status-issued {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #38BDF8 !important;
  border: 1px solid #2563EB !important;
}
.sheet-status-badge.status-pending {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #F59E0B !important;
  border: 1px solid #D97706 !important;
}
.sheet-status-badge.status-overdue {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #EF4444 !important;
  border: 1px solid #DC2626 !important;
}

.inv-address-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.inv-address-box {
  padding: 12px 14px !important;
  border-radius: 6px !important;
}

.inv-address-box .address-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.inv-address-box .client-name {
  margin: 0 0 2px 0 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.inv-address-box p {
  margin: 2px 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.inv-table-wrap {
  margin-bottom: 20px !important;
}

.inv-sheet-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11.5px !important;
}

.inv-sheet-table th {
  padding: 8px 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  font-size: 10.5px !important;
  text-align: left !important;
}

.inv-sheet-table td {
  padding: 9px 10px !important;
  vertical-align: middle !important;
}

.inv-summary-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  margin-bottom: 24px !important;
}

.inv-settlement-box {
  padding: 12px 14px !important;
  border-radius: 6px !important;
  display: flex !important;
  gap: 14px !important;
}

.inv-qr-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.sheet-qr-box {
  width: 84px !important;
  height: 84px !important;
  background: #FFFFFF !important;
  padding: 5px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sheet-qr-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.sheet-qr-caption {
  font-size: 8.5px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
}

.inv-bank-text p {
  margin: 2px 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

.inv-totals-box {
  padding: 12px 14px !important;
  border-radius: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.inv-total-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
}

.inv-total-row.discount {
  color: #DC2626 !important;
}

.inv-total-row.grand {
  padding: 8px 10px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin: 4px 0 2px 0 !important;
}

.inv-words-amount {
  font-size: 10px !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
}

.inv-footer-block {
  display: grid !important;
  grid-template-columns: 1fr 220px !important;
  gap: 20px !important;
  padding-top: 16px !important;
  align-items: flex-end !important;
}

.inv-terms-notes strong {
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.inv-terms-notes p {
  margin: 0 0 6px 0 !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

.inv-crypto-hash {
  font-size: 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.inv-crypto-hash code {
  font-family: var(--font-mono) !important;
  background: rgba(0,0,0,0.15) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}

.inv-signature-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  position: relative !important;
}

/* Tactical Rubber Stamp Graphic */
.inv-rubber-stamp {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotate(-14deg) !important;
  position: absolute !important;
  top: -65px !important;
  right: 70px !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.88 !important;
}

.stamp-inner {
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  border: 1.5px solid currentColor !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

.stamp-top {
  font-size: 6.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}

.stamp-mid {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  margin: 2px 0 !important;
}

.stamp-bot {
  font-size: 6px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}

.inv-sig-line {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 180px !important;
  position: relative !important;
}

.inv-sig-cursive {
  font-family: "Brush Script MT", "Caveat", "Dancing Script", cursive !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  margin-bottom: -6px !important;
  user-select: none !important;
}

.inv-sig-rule {
  width: 100% !important;
  height: 1px !important;
  margin-bottom: 4px !important;
}

.inv-sig-name {
  font-size: 11px !important;
  font-weight: 800 !important;
}

.inv-sig-role {
  font-size: 9px !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT MEDIA RULES FOR WORKSPACE INVOICE MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  body * {
    visibility: hidden !important;
  }
  .app-container,
  .sidebar,
  .topbar,
  .workspace-main {
    display: none !important;
  }
  #workspace-invoice-modal,
  #workspace-invoice-modal * {
    visibility: visible !important;
  }
  #workspace-invoice-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
  }
  #workspace-invoice-modal .modal-window {
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  #workspace-invoice-modal .modal-window > div:first-child {
    display: none !important;
  }
  #workspace-invoice-a4-sheet {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 15mm !important;
    box-shadow: none !important;
    border: none !important;
    page-break-after: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #workspace-invoice-a4-sheet.theme-corporate-teal,
  #workspace-invoice-a4-sheet.theme-swiss-minimal,
  #workspace-invoice-a4-sheet.theme-sunset-gradient,
  #workspace-invoice-a4-sheet.theme-oceanic-cards {
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* Guarantee workspace invoice sheet preserves pristine executive colors in all dashboard themes */
#workspace-invoice-modal #workspace-invoice-a4-sheet,
#workspace-invoice-modal #workspace-invoice-a4-sheet * {
  color-scheme: light !important;
}

#workspace-invoice-modal #workspace-invoice-a4-sheet div[style*="background:#F8FAFC"],
#workspace-invoice-modal #workspace-invoice-a4-sheet div[style*="background: #F8FAFC"] {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

#workspace-invoice-modal #workspace-invoice-a4-sheet div[style*="background:#FFFFFF"],
#workspace-invoice-modal #workspace-invoice-a4-sheet div[style*="background: #FFFFFF"] {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

#workspace-invoice-modal #workspace-invoice-a4-sheet tr[style*="background:#F8FAFC"],
#workspace-invoice-modal #workspace-invoice-a4-sheet tr[style*="background: #F8FAFC"] {
  background: #F8FAFC !important;
}

#workspace-invoice-modal #workspace-invoice-a4-sheet tr[style*="background:#FFFFFF"],
#workspace-invoice-modal #workspace-invoice-a4-sheet tr[style*="background: #FFFFFF"] {
  background: #FFFFFF !important;
}

body.theme-tactical #workspace-invoice-modal #workspace-invoice-a4-sheet .inv-spectrum-body,
#workspace-invoice-modal #workspace-invoice-a4-sheet .inv-spectrum-body {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

body.theme-tactical #workspace-invoice-modal #workspace-invoice-a4-sheet .inv-spectrum-header,
#workspace-invoice-modal #workspace-invoice-a4-sheet .inv-spectrum-header {
  background: linear-gradient(135deg, #0A1128 0%, #142744 25%, #1E40AF 60%, #315BFA 85%, #38BDF8 100%) !important;
  color: #FFFFFF !important;
}

body.theme-tactical #workspace-invoice-modal #workspace-invoice-a4-sheet,
body.theme-tactical .invoice-a4-paper {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ENTERPRISE TACTICAL HIGH-CONTRAST & POLARITY OVERRIDES (V5.6 POLISHED)
   Defeats all hardcoded inline styles and eliminates harsh white-on-dark cards
   ══════════════════════════════════════════════════════════════════════════ */
body.theme-tactical {
  --ink: #f8fafc !important;
  --muted: #94a3b8 !important;
  --surface: #0d1321 !important;
  --surface-subtle: #111a2e !important;
  --line: #1e293b !important;
  --line-strong: #334155 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARGUSRECON ULTRA HIGH-CONTRAST TACTICAL DARK THEME ENGINE
   ══════════════════════════════════════════════════════════════════════════ */

body:not(.theme-tactical) {
  background-color: #f1f5f9;
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(14, 165, 233, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(99, 102, 241, 0.07) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.035) 0%, transparent 60%),
    linear-gradient(rgba(99, 102, 241, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  background-attachment: fixed;
}

body.theme-tactical {
  background-color: #050914 !important;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.05) 0%, transparent 55%),
    linear-gradient(rgba(56, 189, 248, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.045) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px !important;
  background-attachment: fixed !important;
  color: #f8fafc !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 1. Universal Typography & Contrast */
body.theme-tactical h1:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical h2:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical h3:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical h4:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical h5:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical h6:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical strong:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical b:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical .widget-title,
body.theme-tactical .widget-header,
body.theme-tactical .detail-title-name,
body.theme-tactical #detail-phone-model,
body.theme-tactical #detail-breadcrumb-name,
body.theme-tactical #staff-comms-header-title {
  color: #f8fafc !important;
}

body.theme-tactical p:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical .text-body {
  color: #cbd5e1 !important;
}

body.theme-tactical .muted:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical span[style*="color:var(--muted)"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical span[style*="color:#64748b"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical span[style*="color:#64748B"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="color:var(--muted)"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="color:#64748b"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="color:#64748B"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical p[style*="color:#64748b"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical p[style*="color:#64748B"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical #topbar-sub,
body.theme-tactical .user-badge-role {
  color: #94a3b8 !important;
}

/* 2. Eradication of Blinding White & Light Surfaces */
body.theme-tactical .recon-hub-container,
body.theme-tactical .main-workspace-content,
body.theme-tactical .main-container {
  background: #070d18 !important;
}

body.theme-tactical .companies-table-card,
body.theme-tactical .summary-stat-card,
body.theme-tactical .metric-card,
body.theme-tactical .settings-card,
body.theme-tactical .detail-stat-card,
body.theme-tactical .detail-header-card,
body.theme-tactical .nectar-telemetry-deck,
body.theme-tactical div[style*="background:#ffffff"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #ffffff"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#FFFFFF"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #FFFFFF"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#fff"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #fff"]:not(#settings-qr-box):not(.brand-badge-white):not(#interactive-phone-mockup):not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#FAFAFA"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #FAFAFA"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#fafafa"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #fafafa"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#f8fafc"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #f8fafc"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#F8FAFC"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #F8FAFC"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background:#f1f5f9"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper),
body.theme-tactical div[style*="background: #f1f5f9"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *):not(#workspace-auth-gatekeeper *):not(#workspace-auth-gatekeeper) {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* 2B. Clean Professional White Card for Auth Gatekeeper (Google OAuth) */
#workspace-auth-gatekeeper {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#workspace-auth-gatekeeper div,
#workspace-auth-gatekeeper .auth-card-clean {
  color: #0F172A !important;
}
#workspace-auth-gatekeeper .auth-card-clean,
#workspace-auth-gatekeeper > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}
#workspace-auth-gatekeeper h2 {
  color: #0F172A !important;
}
#workspace-auth-gatekeeper p {
  color: #64748B !important;
}
#workspace-auth-gatekeeper label {
  color: #334155 !important;
}
#workspace-auth-gatekeeper input {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
#workspace-auth-gatekeeper input::placeholder {
  color: #94A3B8 !important;
}
#workspace-auth-gatekeeper #auth-btn-google-login {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}
#workspace-auth-gatekeeper #auth-btn-google-login span {
  color: #0F172A !important;
}
#workspace-auth-gatekeeper #auth-btn-google-login:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}
#workspace-auth-gatekeeper #auth-btn-submit {
  background: #2563EB !important;
  color: #FFFFFF !important;
}
#workspace-auth-gatekeeper #auth-btn-submit span {
  color: #FFFFFF !important;
}
#workspace-auth-gatekeeper #auth-btn-submit:hover {
  background: #1D4ED8 !important;
}


/* 3. Table Card Header Bars (Calls Ledger, Tax Invoices, etc.) */
body.theme-tactical .companies-table-card > div:first-child,
body.theme-tactical .table-header-bar,
body.theme-tactical div[style*="background:#FAFAFA"]:has(strong),
body.theme-tactical div[style*="background: #FAFAFA"]:has(strong) {
  background: #131f37 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .companies-table-card > div:first-child strong,
body.theme-tactical .companies-table-card > div:first-child h3 {
  color: #f8fafc !important;
}
body.theme-tactical .companies-table-card > div:first-child span,
body.theme-tactical .companies-table-card > div:first-child p {
  color: #94a3b8 !important;
}

/* 4. Table Thead and Cells */
body.theme-tactical .admin-data-table thead tr,
body.theme-tactical .device-list-table thead tr,
body.theme-tactical tr[style*="background:#F8FAFC"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *),
body.theme-tactical tr[style*="background: #F8FAFC"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *),
body.theme-tactical tr[style*="background:#f8fafc"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *),
body.theme-tactical tr[style*="background: #f8fafc"]:not(#workspace-invoice-modal *):not(#workspace-invoice-a4-sheet *) {
  background: #0b1120 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

body.theme-tactical .admin-data-table th,
body.theme-tactical .device-list-table th {
  background: transparent !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body.theme-tactical .admin-data-table td,
body.theme-tactical .device-list-table td {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.theme-tactical .admin-data-table td strong,
body.theme-tactical .device-list-table td strong {
  color: #f8fafc !important;
}

body.theme-tactical .admin-data-table tbody tr:hover,
body.theme-tactical .device-list-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Staff Handset name inside table */
body.theme-tactical .admin-data-table td div[style*="color:#0284c7"] {
  color: #38bdf8 !important;
  font-weight: 700 !important;
}
body.theme-tactical .admin-data-table td div[style*="color:#0f172a"] {
  color: #f8fafc !important;
}

/* 5. Employee Grid Cards (Staff Tab) */
body.theme-tactical .emp-device-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
body.theme-tactical .emp-device-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.2) !important;
  transform: translateY(-2px);
}
body.theme-tactical .emp-device-card.moving,
body.theme-tactical .emp-device-card.stopped,
body.theme-tactical .emp-device-card.offline {
  background: #0f172a !important;
}
body.theme-tactical .emp-card-name {
  color: #f8fafc !important;
}
body.theme-tactical .emp-card-role {
  color: #94a3b8 !important;
}
body.theme-tactical .emp-device-info-box {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .emp-device-model {
  color: #f8fafc !important;
}
body.theme-tactical .emp-device-os {
  color: #94a3b8 !important;
}
body.theme-tactical .battery-indicator-wrap span {
  color: #e2e8f0 !important;
}
body.theme-tactical .btn-action-secondary {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.theme-tactical .btn-action-secondary:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
}
body.theme-tactical .btn-action-track {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* 6. Photos Gallery (Silent Camera captures) */
body.theme-tactical .photo-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
body.theme-tactical .photo-card:hover {
  border-color: #38bdf8 !important;
  transform: translateY(-2px);
}
body.theme-tactical .photo-card > div:last-child {
  background: #131f37 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .photo-card strong {
  color: #f8fafc !important;
}
body.theme-tactical .photo-card span {
  color: #94a3b8 !important;
}
body.theme-tactical .photo-card a {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.theme-tactical .photo-card a:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* 7. Floating Staff List Panel on Map */
body.theme-tactical .floating-staff-panel {
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
body.theme-tactical .staff-panel-header {
  background: #131f37 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .staff-panel-title,
body.theme-tactical .staff-panel-title span {
  color: #f8fafc !important;
}
body.theme-tactical .staff-card-row {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .staff-card-row:hover {
  background: #273549 !important;
  border-color: #38bdf8 !important;
}
body.theme-tactical .staff-card-row.active {
  background: rgba(2, 132, 199, 0.22) !important;
  border-color: #38bdf8 !important;
}
body.theme-tactical .staff-card-name {
  color: #f8fafc !important;
}
body.theme-tactical .staff-card-model {
  color: #94a3b8 !important;
}
body.theme-tactical .staff-card-time {
  color: #64748b !important;
}

/* 8. Staff Dossier View (Details Subview) */
body.theme-tactical .detail-header-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
body.theme-tactical .detail-title-name {
  color: #f8fafc !important;
}
body.theme-tactical .detail-role-row {
  color: #94a3b8 !important;
}
body.theme-tactical .detail-contact-row {
  color: #cbd5e1 !important;
}
body.theme-tactical .detail-device-hardware-card {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical #detail-phone-model {
  color: #f8fafc !important;
}
body.theme-tactical #detail-phone-os,
body.theme-tactical #detail-phone-imei {
  color: #94a3b8 !important;
}
body.theme-tactical .quick-action-tile {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}
body.theme-tactical .quick-action-tile span {
  color: #e2e8f0 !important;
}
body.theme-tactical .quick-action-tile:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}
body.theme-tactical .call-log-row {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .call-log-row:hover {
  background: #273549 !important;
}
body.theme-tactical .call-meta strong {
  color: #f8fafc !important;
}
body.theme-tactical .call-meta span {
  color: #94a3b8 !important;
}
body.theme-tactical .whatsapp-chat-row {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .whatsapp-chat-row:hover {
  background: #273549 !important;
}
body.theme-tactical .whatsapp-chat-content strong {
  color: #f8fafc !important;
}
body.theme-tactical .whatsapp-chat-content p {
  color: #94a3b8 !important;
}
body.theme-tactical .detail-stat-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical #detail-stat-location,
body.theme-tactical #detail-stat-battery,
body.theme-tactical #detail-stat-seen,
body.theme-tactical #detail-stat-status,
body.theme-tactical #detail-stat-accuracy {
  color: #f8fafc !important;
}

/* 9. Form Inputs, Select Dropdowns, Search Inputs */
body.theme-tactical input:not([type="checkbox"]):not([type="radio"]),
body.theme-tactical select,
body.theme-tactical textarea,
body.theme-tactical .filter-select,
body.theme-tactical .search-input-wrap input {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.theme-tactical input:focus,
body.theme-tactical select:focus,
body.theme-tactical textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}
body.theme-tactical select option {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}
body.theme-tactical .filter-pill {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
}
body.theme-tactical .filter-pill:hover {
  background: #334155 !important;
  color: #f8fafc !important;
}
body.theme-tactical .filter-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

/* 10. Support Dual-Pane Workstation */
body.theme-tactical .support-dual-pane {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
body.theme-tactical .support-left-pane {
  background: #0b1120 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical .support-left-pane > div:first-child {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical .support-right-pane {
  background: #0f172a !important;
}
body.theme-tactical .support-right-pane > div:first-child {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical .support-right-pane > div:last-child {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical #thread-pane-messages {
  background: #070d18 !important;
}
body.theme-tactical #thread-pane-reply-input {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}
body.theme-tactical #thread-pane-subject {
  color: #f8fafc !important;
}
body.theme-tactical .ticket-card-item {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .ticket-card-item:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}
body.theme-tactical .ticket-card-item.active {
  background: rgba(2, 132, 199, 0.18) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.3) !important;
}
body.theme-tactical .ticket-card-item strong,
body.theme-tactical .ticket-card-item div[style*="color:#0f172a"] {
  color: #f8fafc !important;
}
body.theme-tactical .chat-bubble-agent {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}
body.theme-tactical .chat-bubble-agent strong {
  color: #f8fafc !important;
}
body.theme-tactical #support-tickets-search {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

/* 11. Support KB Articles & C2 Desk */
body.theme-tactical .kb-card {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
body.theme-tactical .kb-card-title {
  color: #f8fafc !important;
}
body.theme-tactical .kb-card-summary {
  color: #94a3b8 !important;
}
body.theme-tactical .kb-card-footer {
  background: #131f37 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
}
body.theme-tactical #helpdesk-view-c2desk > div > div {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical #helpdesk-view-c2desk div[style*="background:#F8FAFC"] {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical #helpdesk-view-c2desk strong {
  color: #f8fafc !important;
}
body.theme-tactical #helpdesk-view-c2desk p {
  color: #94a3b8 !important;
}

/* 12. Billing Tab Settlement Cards */
body.theme-tactical .settings-card div[style*="font-family:var(--font-mono)"],
body.theme-tactical .settings-card strong {
  color: #f8fafc !important;
}
body.theme-tactical .settings-card div[style*="color:var(--muted)"] {
  color: #94a3b8 !important;
}

/* 13. Map Tactical Radar Filter (Prevents Blinding White Map Canvas) */
body.theme-tactical #map-container .leaflet-tile-pane {
  filter: brightness(0.65) invert(1) contrast(2.8) hue-rotate(200deg) saturate(0.35);
}
body.theme-tactical #map-container {
  background: #070d18 !important;
}

/* 14. Modals and Drawers */
body.theme-tactical .modal-window {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}
body.theme-tactical .modal-header {
  background: #131f37 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.theme-tactical .modal-title {
  color: #f8fafc !important;
}
body.theme-tactical .alerts-drawer {
  background: #0f172a !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.theme-tactical .alert-drawer-item {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* 15. QR Code Optical Scanner Safety */
body.theme-tactical #settings-qr-box {
  background: #ffffff !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARGUSRECON RESPONSIVE ENGINE (MOBILE & TABLET VIEWPORT HARDENING)
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet Optimization (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --side: 68px;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 68px !important;
  }

  .sidebar .brand-title,
  .sidebar .brand-sub,
  .sidebar-nav .nav-item span,
  .sidebar .quota-card {
    display: none !important;
  }

  .sidebar .brand {
    justify-content: center !important;
    padding: 16px 0 !important;
  }

  .sidebar-nav .nav-item {
    justify-content: center !important;
    padding: 12px 0 !important;
  }

  .main-shell {
    margin-left: 68px !important;
    width: calc(100% - 68px) !important;
    max-width: calc(100% - 68px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar {
    padding: 0 16px !important;
  }

  .topbar-right .datetime-chip {
    display: none !important;
  }

  .topbar-right .user-profile-text {
    display: none !important;
  }

  .stats-summary-4col,
  .stats-summary-3col,
  .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .device-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .cockpit-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .cockpit-view-main {
    flex-direction: column !important;
    align-items: center !important;
  }

  .support-dual-pane {
    min-height: 520px !important;
  }

  .photo-grid-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .table-responsive-wrap,
  .device-list-table-wrap,
  .companies-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

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

  /* Compact Horizontal App Bar */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  .sidebar .brand {
    padding: 0 !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .sidebar .brand-title,
  .sidebar .brand-sub {
    display: none !important;
  }

  .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 4px !important;
    margin: 0 6px !important;
    flex: 1 !important;
    max-width: calc(100vw - 80px) !important;
    scrollbar-width: none !important;
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none !important;
  }

  .sidebar-nav .nav-item {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }

  .sidebar-nav .nav-item span:not(.nav-badge) {
    display: inline-block !important;
    font-size: 11.5px !important;
  }

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

  /* Main Shell fills entire viewport width without left margin */
  .main-shell {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Compact Topbar */
  .topbar {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 50px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .topbar-title-wrap {
    gap: 8px !important;
  }

  .topbar-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  .topbar-title-wrap h1 {
    font-size: 14px !important;
  }

  .topbar-title-wrap p {
    display: none !important;
  }

  .topbar-right {
    gap: 6px !important;
    margin-left: auto !important;
  }

  .topbar-right .datetime-chip {
    display: none !important;
  }

  .topbar-right .user-profile-text {
    display: none !important;
  }

  .topbar-right .user-profile-chip {
    padding: 2px !important;
    border: none !important;
    background: transparent !important;
  }

  .topbar-right .theme-label {
    display: none !important;
  }

  .topbar-right .theme-toggle-btn {
    padding: 6px 8px !important;
    min-width: 32px !important;
    justify-content: center !important;
  }

  .topbar-right .alerts-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Workspace Content */
  .content-body {
    padding: 10px 12px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .workspace-hero-banner {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-banner-art-wrap,
  .hero-banner-footer-credit {
    display: none !important;
  }

  .hero-banner-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* KPI Summary Grids */
  .stats-summary-4col,
  .stats-summary-3col,
  .metrics-row,
  .kpi-row-5 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .device-grid-4col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .photo-grid-gallery {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Cockpit & Mirror View Mobile */
  .cockpit-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cockpit-view-main {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Support Dual Pane Mobile Vertical Stacking */
  .support-dual-pane {
    flex-direction: column !important;
    min-height: auto !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .support-left-pane {
    width: 100% !important;
    max-height: 280px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .support-right-pane {
    width: 100% !important;
    min-height: 380px !important;
  }

  /* Map Floating Staff List Mobile */
  .floating-staff-panel {
    position: static !important;
    width: 100% !important;
    max-height: 240px !important;
    margin-top: 10px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
  }

  #map-wrapper, #workspace-map {
    height: 340px !important;
    width: 100% !important;
  }

  /* Staff Dossier Header Mobile */
  .detail-header-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-device-hardware-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-action-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Quick Actions Grid Mobile */
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Table horizontal scrolling containers */
  .table-responsive-wrap,
  .device-list-table-wrap,
  .companies-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .companies-table-card table,
  .device-list-table-wrap table {
    min-width: 580px !important;
  }
}

/* Small Handsets (<= 480px) */
@media (max-width: 480px) {
  .quick-actions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .detail-action-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT OPTIMIZATION FOR A4 TAX INVOICE SHEETS
   ══════════════════════════════════════════════════════════════════════════ */
@media print {

  body * {
    visibility: hidden !important;
  }
  #workspace-invoice-modal,
  #workspace-invoice-modal * {
    visibility: visible !important;
  }
  #workspace-invoice-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .modal-window {
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
  }
  #workspace-invoice-a4-sheet {
    box-shadow: none !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .sidebar,
  .topbar,
  #ws-inv-modal-print-btn,
  #ws-inv-modal-close-btn {
    display: none !important;
  }
}



/* ══════════════════════════════════════════════════════════════
   ARGUSRECON ULTRA MODERN ENTERPRISE EXTENSIONS (V5.2)
   AI Copilot (MCP), Behavioral Speedometer, Smart Rules & Payouts
   ══════════════════════════════════════════════════════════════ */

/* ── 1. FLOATING AI COPILOT LAUNCHER & DRAWER ── */
#btn-open-ai-copilot:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 38px rgba(124, 58, 237, 0.55), 0 0 20px rgba(168, 85, 247, 0.35);
}

#btn-open-ai-copilot:active {
  transform: translateY(0) scale(0.98);
}

.ai-copilot-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 96vw;
  background: var(--surface, #ffffff);
  border-left: 1px solid var(--line, #e2e8f0);
  box-shadow: -20px 0 50px rgba(15, 23, 42, 0.12);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ai-copilot-drawer.open {
  transform: translateX(0) !important;
}

/* ══════════════════════════════════════════════════════════════════
   1. SOVEREIGN BRAND LOGO WATERMARK BACKDROP
   ══════════════════════════════════════════════════════════════════ */
.copilot-brand-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.copilot-watermark-centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}

.copilot-watermark-symbol {
  width: 270px;
  height: 270px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 0.13;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.copilot-watermark-ring {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px dashed rgba(49, 91, 250, 0.18);
  pointer-events: none;
  animation: copilotRingRotate 80s linear infinite;
}

@keyframes copilotRingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.copilot-clean-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(rgba(49, 91, 250, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 91, 250, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ══════════════════════════════════════════════════════════════════
   2. CLEAN ENTERPRISE HEADER
   ══════════════════════════════════════════════════════════════════ */
.copilot-header {
  position: relative;
  z-index: 2;
  padding: 14px 18px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--line, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.copilot-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(49, 91, 250, 0.08);
  border: 1px solid rgba(49, 91, 250, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.copilot-live-pill {
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(49, 91, 250, 0.08);
  border: 1px solid rgba(49, 91, 250, 0.22);
  color: #315bfa;
  padding: 1.5px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  letter-spacing: 0.3px;
}

.copilot-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #315bfa;
  box-shadow: 0 0 6px #315bfa;
  animation: copilotDotPulse 1.8s infinite;
}

@keyframes copilotDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.copilot-hdr-btn {
  background: transparent;
  border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.copilot-hdr-btn:hover {
  background: var(--surface-subtle, #f8fafc);
  border-color: #315bfa;
  color: #315bfa;
}

.copilot-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.copilot-close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════════
   3. CAPABILITIES BAR
   ══════════════════════════════════════════════════════════════════ */
.copilot-tools-bar {
  position: relative;
  z-index: 2;
  padding: 7px 18px;
  background: var(--surface-subtle, #f8fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  flex-shrink: 0;
}

.mcp-tool-badge {
  display: inline-flex;
  align-items: center;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  cursor: default;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.mcp-tool-badge:hover {
  border-color: #315bfa;
  color: #315bfa;
}

/* ══════════════════════════════════════════════════════════════════
   4. CLEAN SEGMENTED CATEGORIES
   ══════════════════════════════════════════════════════════════════ */
.copilot-category-bar {
  position: relative;
  z-index: 2;
  padding: 7px 16px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--line, #e2e8f0);
  display: flex;
  gap: 5px;
  overflow-x: auto;
  flex-shrink: 0;
}

.copilot-cat-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.copilot-cat-btn:hover {
  background: var(--surface-subtle, #f8fafc);
  color: var(--ink, #0f172a);
}

.copilot-cat-btn.active {
  background: #315bfa !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(49, 91, 250, 0.25);
}

/* ══════════════════════════════════════════════════════════════════
   5. CLEAN MESSAGES STREAM
   ══════════════════════════════════════════════════════════════════ */
.copilot-messages-container {
  position: relative;
  z-index: 2;
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.copilot-msg-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.58;
  animation: fadeInMsg 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.copilot-msg-bubble.assistant {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-left: 3px solid #315bfa;
  color: var(--ink, #0f172a);
  align-self: flex-start;
  max-width: 95%;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
  padding: 14px 16px;
}

.copilot-msg-bubble.user {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  align-self: flex-end;
  max-width: 86%;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25);
  padding: 11px 15px;
  border-radius: 12px 12px 3px 12px;
}

.copilot-bubble-sender {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #315bfa;
}

.copilot-msg-bubble.user .copilot-bubble-sender {
  color: rgba(255, 255, 255, 0.85);
}

.copilot-verified-pill {
  color: #059669;
  font-weight: 700;
  font-size: 9.5px;
  background: rgba(16, 185, 129, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.copilot-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -2px;
}

.copilot-chip-btn {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--ink, #334155);
  font-size: 11.5px;
  font-weight: 550;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  white-space: nowrap;
}

.copilot-chip-btn:hover {
  background: var(--surface-subtle, #f8fafc);
  border-color: #315bfa;
  color: #315bfa;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(49, 91, 250, 0.12);
}

/* ── 6. CLEAN ACTION PILLS ─────────────────────────────────────── */
.copilot-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e2e8f0);
}

.copilot-action-pill {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--ink, #0f172a);
  font-size: 11px;
  font-weight: 600;
  padding: 4.5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.copilot-action-pill:hover {
  background: rgba(49, 91, 250, 0.06);
  border-color: #315bfa;
  color: #315bfa;
  transform: translateY(-1px);
}

.copilot-inline-code {
  background: var(--surface-subtle, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: #2563eb;
  border: 1px solid var(--line, #e2e8f0);
}

.copilot-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: #2563eb;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  margin: 2px 0;
}

/* ── 7. CLEAN INPUT PANEL ──────────────────────────────────────── */
.copilot-input-panel {
  position: relative;
  z-index: 2;
  padding: 13px 18px;
  background: var(--surface, #ffffff);
  border-top: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}

.copilot-voice-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  margin-bottom: 8px;
  animation: fadeInMsg 0.15s ease;
}

.copilot-mic-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseMicGlow 1.2s infinite;
}

.copilot-input-form {
  display: flex;
  gap: 7px;
  align-items: center;
}

.copilot-mic-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.copilot-mic-btn:hover {
  background: #ffffff;
  border-color: #315bfa;
  color: #315bfa;
}

.copilot-mic-btn.listening {
  background: #fee2e2;
  border-color: #ef4444;
  color: #ef4444;
  animation: pulseMicGlow 1.5s infinite;
}

.copilot-text-input {
  flex: 1;
  background: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--ink, #0f172a);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.copilot-text-input:focus {
  background: var(--surface, #ffffff);
  border-color: #315bfa;
  box-shadow: 0 0 0 3px rgba(49, 91, 250, 0.12);
}

.copilot-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #315bfa;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(49, 91, 250, 0.3);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.copilot-send-btn:hover {
  background: #254bd6;
  transform: translateY(-1px);
}

.copilot-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--muted, #64748b);
}

/* ══════════════════════════════════════════════════════════════════
   8. TACTICAL DARK THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light),
.ai-copilot-drawer.copilot-theme-dark {
  background: #080d1a !important;
  border-left-color: rgba(56, 189, 248, 0.22) !important;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7) !important;
  color: #f1f5f9 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-watermark-symbol,
.ai-copilot-drawer.copilot-theme-dark .copilot-watermark-symbol {
  opacity: 0.16 !important;
  filter: drop-shadow(0 0 40px rgba(49, 91, 250, 0.45)) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-watermark-ring,
.ai-copilot-drawer.copilot-theme-dark .copilot-watermark-ring {
  border-color: rgba(56, 189, 248, 0.2) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-clean-grid,
.ai-copilot-drawer.copilot-theme-dark .copilot-clean-grid {
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-header,
.ai-copilot-drawer.copilot-theme-dark .copilot-header {
  background: rgba(11, 19, 36, 0.95) !important;
  border-bottom-color: rgba(56, 189, 248, 0.16) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-title-text,
.ai-copilot-drawer.copilot-theme-dark .copilot-title-text {
  color: #f8fafc !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-subtitle-text,
.ai-copilot-drawer.copilot-theme-dark .copilot-subtitle-text {
  color: #94a3b8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-tools-bar,
.ai-copilot-drawer.copilot-theme-dark .copilot-tools-bar {
  background: rgba(8, 14, 28, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .mcp-tool-badge,
.ai-copilot-drawer.copilot-theme-dark .mcp-tool-badge {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-category-bar,
.ai-copilot-drawer.copilot-theme-dark .copilot-category-bar {
  background: rgba(11, 19, 36, 0.95) !important;
  border-bottom-color: rgba(56, 189, 248, 0.12) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-cat-btn:not(.active),
.ai-copilot-drawer.copilot-theme-dark .copilot-cat-btn:not(.active) {
  color: #94a3b8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-cat-btn.active,
.ai-copilot-drawer.copilot-theme-dark .copilot-cat-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-msg-bubble.assistant,
.ai-copilot-drawer.copilot-theme-dark .copilot-msg-bubble.assistant {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(56, 189, 248, 0.18) !important;
  border-left-color: #38bdf8 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-msg-bubble.assistant .copilot-bubble-sender,
.ai-copilot-drawer.copilot-theme-dark .copilot-msg-bubble.assistant .copilot-bubble-sender {
  color: #38bdf8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-chip-btn,
.ai-copilot-drawer.copilot-theme-dark .copilot-chip-btn {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
  color: #cbd5e1 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-chip-btn:hover,
.ai-copilot-drawer.copilot-theme-dark .copilot-chip-btn:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-action-pill,
.ai-copilot-drawer.copilot-theme-dark .copilot-action-pill {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-action-pill:hover,
.ai-copilot-drawer.copilot-theme-dark .copilot-action-pill:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #ffffff !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-input-panel,
.ai-copilot-drawer.copilot-theme-dark .copilot-input-panel {
  background: rgba(8, 14, 28, 0.96) !important;
  border-top-color: rgba(56, 189, 248, 0.16) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-mic-btn,
.ai-copilot-drawer.copilot-theme-dark .copilot-mic-btn {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-text-input,
.ai-copilot-drawer.copilot-theme-dark .copilot-text-input {
  background: rgba(3, 7, 18, 0.85) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #f8fafc !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-text-input:focus,
.ai-copilot-drawer.copilot-theme-dark .copilot-text-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-inline-code,
.ai-copilot-drawer.copilot-theme-dark .copilot-inline-code {
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

body.theme-tactical .ai-copilot-drawer:not(.copilot-theme-light) .copilot-tool-tag,
.ai-copilot-drawer.copilot-theme-dark .copilot-tool-tag {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}

/* ── 2. BEHAVIORAL SPEEDOMETER GAUGE & METRICS ── */
.speedometer-gauge-wrap {
  position: relative;
  width: 220px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.speedometer-arc {
  width: 200px;
  height: 100px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 16px solid #1e293b;
  border-bottom: 0;
  box-sizing: border-box;
  position: relative;
}

.speedometer-needle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 80px;
  background: linear-gradient(to top, #38bdf8, #818cf8);
  transform-origin: bottom center;
  transform: rotate(0deg);
  border-radius: 2px;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.speedometer-hub {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8fafc;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

/* ── 3. SMART RULE CARD & SLIDER TOGGLE ── */
.smart-rule-card {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.15s ease;
}

.smart-rule-card:hover {
  background: #0d1527;
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rule-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.rule-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rule-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.25s ease;
  border-radius: 24px;
}

.rule-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #94a3b8;
  transition: 0.25s ease;
  border-radius: 50%;
}

.rule-toggle-switch input:checked + .rule-slider {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
}

.rule-toggle-switch input:checked + .rule-slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.rule-sensitivity-select {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rule-sensitivity-select:focus {
  border-color: #2563EB;
}

body.theme-tactical .rule-sensitivity-select {
  background: #070d18;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

body.theme-tactical .rule-sensitivity-select:focus {
  border-color: #818cf8;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARGUSRECON ULTRA-ADVANCED INFOGRAPHICS & BENCHMARKING ENGINE (HUBSTAFF V5+)
   DEFAULT: EXECUTIVE LIGHT MODE (PURE WHITE CARDS, PASTEL CONTAINERS, SLATE INK)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Top Intelligence Filter & Benchmark Bar */
.intel-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02);
}

.intel-filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.intel-select {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 12px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.intel-select:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.intel-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 12px;
}

.intel-timezone-chip {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #2563EB;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: 6px;
  padding: 3px 8px;
}

/* Benchmark Switcher */
.intel-benchmark-switch-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 6px 12px;
}

.intel-benchmark-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.benchmark-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.benchmark-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.benchmark-legend-dot.blue { background: #2563EB; box-shadow: 0 0 4px rgba(37, 99, 235, 0.4); }
.benchmark-legend-dot.amber { background: #F59E0B; box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }

#btn-open-smart-rules-modal {
  background: #FFFFFF !important;
  border: 1px solid #2563EB !important;
  color: #2563EB !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
#btn-open-smart-rules-modal:hover {
  background: #EFF6FF !important;
}

/* ── 4 Advanced Infographic Cards ── */
.intel-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

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

.intel-card-v5 {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.intel-card-v5:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}

.intel-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.intel-eyebrow-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intel-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 10px;
  font-weight: 700;
  cursor: help;
}

.intel-primary-num {
  font-size: 40px;
  font-weight: 850;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1;
}

.intel-sub-label {
  font-size: 13px;
  color: #64748B;
  font-weight: 600;
  margin-top: 4px;
}

.intel-target-label {
  font-size: 11px;
  color: #64748B;
  margin-top: 6px;
}

.intel-highlight-word {
  font-size: 16px;
  font-weight: 700;
  color: #2563EB;
}

.intel-stat-box-val {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
}

.intel-legend-row {
  color: #334155;
}

/* Horizontal Benchmark Slider on EVERY Card */
.benchmark-slider-container {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.benchmark-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: #64748B;
  margin-bottom: 4px;
}

.benchmark-baseline-txt {
  color: #2563EB;
  font-weight: 700;
}

.benchmark-slider-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 999px;
  margin-bottom: 10px;
}

.benchmark-slider-range-pill {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 999px;
  transition: all 0.3s ease;
}

.benchmark-slider-marker {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.benchmark-marker-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #0F172A;
}

.benchmark-marker-label {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  background: #0F172A;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #0F172A;
  white-space: nowrap;
}

/* Card 1: Speedometer Gauge Graphic */
.speedometer-gauge-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
}

.speedometer-svg-dial {
  width: 170px;
  height: 100px;
  position: relative;
  overflow: visible;
}

.gauge-bg-track {
  stroke: #E2E8F0;
}

.gauge-tick-line {
  stroke: #CBD5E1;
}

#gauge-needle-line {
  stroke: #1E293B;
}

#gauge-needle-hub {
  fill: #1E293B;
  stroke: #FFFFFF;
}

#intel-speedometer-pct {
  color: #059669;
}

/* Card 2: Segmented Bar with Tick Marks */
.classification-bar-wrap {
  margin: 18px 0 10px 0;
}

.classification-segments {
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: #F1F5F9;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  gap: 2px;
}

.class-seg-core {
  background: #2563EB;
  border-radius: 999px 0 0 999px;
  transition: width 0.5s ease;
}

.class-seg-transit {
  background: #64748B;
  transition: width 0.5s ease;
}

.class-seg-idle {
  background: #F97316;
  border-radius: 0 999px 999px 0;
  transition: width 0.5s ease;
}

.classification-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: #64748B;
}

/* Card 3: Donut Ring Graphic */
.focus-donut-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.donut-bg-track {
  stroke: #E2E8F0;
}

.focus-donut-inner-val {
  position: absolute;
  text-align: center;
  font-size: 24px;
  font-weight: 850;
  color: #0F172A;
  letter-spacing: -0.5px;
}

/* Card 4: Vertical Thermometer Graphic */
.thermometer-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.thermometer-meter-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thermometer-scale-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: #64748B;
  text-align: right;
}

.thermometer-bar-housing {
  width: 16px;
  height: 100px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.thermometer-bar-fill {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #10B981 0%, #F59E0B 50%, #EF4444 100%);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
  transition: height 0.5s ease;
}

/* Highlights Feed Section (Matching Hubstaff Slide 4) */
.intel-highlights-section {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02);
}

.intel-highlights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.intel-section-title {
  color: #0F172A;
}

.intel-section-sub {
  color: #64748B;
}

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

.highlight-card-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.highlight-card-item:hover {
  border-color: #CBD5E1;
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.highlight-operative-name {
  color: #0F172A;
}

.highlight-operative-role {
  color: #64748B;
}

.highlight-body-p {
  color: #334155;
}

.highlight-meta-bar {
  color: #64748B;
}

/* Operational Division Rankings Card */
.intel-division-rankings-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.02);
}

.intel-division-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  transition: all 0.15s ease;
}
.intel-division-row-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.division-team-name {
  color: #0F172A;
}
.division-team-sub {
  color: #64748B;
}

/* Smart Rules Illustrated SVG Badges (Matching Hubstaff Slide 1) */
.rule-illustrated-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.rule-badge-blue   { background: #EFF6FF; border: 1px solid #DBEAFE; color: #2563EB; }
.rule-badge-green  { background: #ECFDF5; border: 1px solid #A7F3D0; color: #059669; }
.rule-badge-orange { background: #FFFBEB; border: 1px solid #FDE68A; color: #D97706; }
.rule-badge-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #7C3AED; }
.rule-badge-teal   { background: #ECFEFF; border: 1px solid #A5F3FC; color: #0891B2; }
.rule-badge-rose   { background: #FFF1F2; border: 1px solid #FECDD3; color: #E11D48; }

.smart-rules-modal-window {
  max-width: 820px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
}

.smart-rules-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.smart-rules-modal-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  font-size: 18px;
}

.smart-rules-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.2px;
}

.smart-rules-header-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smart-rules-header-sub {
  margin: 3px 0 0 0;
  font-size: 12px;
  color: #64748B;
}

.smart-rules-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s ease;
}
.smart-rules-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.smart-rules-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #F8FAFC;
}

.smart-rules-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
}

.smart-rules-status-txt {
  font-size: 12.5px;
  font-weight: 600;
  color: #0F172A;
}

.smart-rules-modal-footer {
  padding: 16px 24px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.smart-rules-footer-note {
  font-size: 11.5px;
  color: #64748B;
}

.smart-rule-card-illustrated {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.smart-rule-card-illustrated:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.smart-rule-title {
  color: #0F172A;
}

.smart-rule-desc {
  color: #64748B;
}

.smart-rule-meta {
  color: #64748B;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BODY.THEME-TACTICAL OVERRIDES FOR INFOGRAPHICS & MODALS
   ══════════════════════════════════════════════════════════════════════════════ */
body.theme-tactical .intel-filter-bar {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-tactical .intel-select {
  background: #0B1220;
  border-color: rgba(255, 255, 255, 0.12);
  color: #F1F5F9;
}
body.theme-tactical .intel-date-badge {
  background: #0B1220;
  border-color: rgba(255, 255, 255, 0.12);
  color: #CBD5E1;
}
body.theme-tactical .intel-timezone-chip {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38BDF8;
}
body.theme-tactical .intel-benchmark-switch-wrap {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
}
body.theme-tactical .intel-benchmark-label {
  color: #F8FAFC;
}
body.theme-tactical .benchmark-legend-pill {
  color: #94A3B8;
}
body.theme-tactical .benchmark-legend-dot.blue {
  background: #38BDF8;
  box-shadow: 0 0 6px #38BDF8;
}
body.theme-tactical #btn-open-smart-rules-modal {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #A5B4FC !important;
}

body.theme-tactical .intel-card-v5 {
  background: linear-gradient(145deg, #0E1626 0%, #090E1A 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.theme-tactical .intel-card-v5:hover {
  border-color: rgba(56, 189, 248, 0.25);
}
body.theme-tactical .intel-eyebrow-tag {
  color: #94A3B8;
}
body.theme-tactical .intel-info-icon {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94A3B8;
}
body.theme-tactical .intel-primary-num {
  color: #F8FAFC !important;
}
body.theme-tactical .intel-sub-label {
  color: #94A3B8 !important;
}
body.theme-tactical .intel-target-label {
  color: #64748B !important;
}
body.theme-tactical .intel-highlight-word {
  color: #38BDF8 !important;
}
body.theme-tactical .intel-stat-box-val {
  color: #F8FAFC !important;
}
body.theme-tactical .intel-legend-row {
  color: #F8FAFC !important;
}
body.theme-tactical .gauge-bg-track {
  stroke: rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .gauge-tick-line {
  stroke: rgba(255, 255, 255, 0.3) !important;
}
body.theme-tactical #gauge-needle-line {
  stroke: #FFFFFF !important;
}
body.theme-tactical #gauge-needle-hub {
  fill: #FFFFFF !important;
  stroke: #0F172A !important;
}
body.theme-tactical #intel-speedometer-pct {
  color: #10B981 !important;
}
body.theme-tactical .classification-segments {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.theme-tactical .class-seg-core {
  background: linear-gradient(90deg, #2563EB, #38BDF8);
}
body.theme-tactical .donut-bg-track {
  stroke: rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical .focus-donut-inner-val {
  color: #38BDF8 !important;
}
body.theme-tactical .thermometer-bar-housing {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.theme-tactical .benchmark-slider-container {
  border-top-color: rgba(255, 255, 255, 0.06);
}
body.theme-tactical .benchmark-baseline-txt {
  color: #38BDF8 !important;
}
body.theme-tactical .benchmark-slider-track {
  background: rgba(255, 255, 255, 0.06);
}
body.theme-tactical .benchmark-slider-range-pill {
  background: rgba(56, 189, 248, 0.35);
  border: none;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
body.theme-tactical .benchmark-marker-triangle {
  border-top-color: #F8FAFC;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
body.theme-tactical .benchmark-marker-label {
  background: #0F172A;
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.15);
}

body.theme-tactical .intel-highlights-section {
  background: linear-gradient(145deg, #0E1626 0%, #090E1A 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.theme-tactical .intel-section-title {
  color: #F8FAFC !important;
}
body.theme-tactical .intel-section-sub {
  color: #94A3B8 !important;
}
body.theme-tactical .highlight-card-item {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}
body.theme-tactical .highlight-card-item:hover {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(15, 23, 42, 0.85);
}
body.theme-tactical .highlight-operative-name {
  color: #F8FAFC !important;
}
body.theme-tactical .highlight-operative-role {
  color: #94A3B8 !important;
}
body.theme-tactical .highlight-body-p {
  color: #CBD5E1 !important;
}
body.theme-tactical .highlight-meta-bar {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #64748B !important;
}

body.theme-tactical .intel-division-rankings-card {
  background: linear-gradient(145deg, #0E1626 0%, #090E1A 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.theme-tactical .intel-division-row-item {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}
body.theme-tactical .intel-division-row-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
body.theme-tactical .division-team-name {
  color: #F8FAFC !important;
}
body.theme-tactical .division-team-sub {
  color: #94A3B8 !important;
}

body.theme-tactical .smart-rules-modal-window {
  background: #0A0F1D;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
}
body.theme-tactical .smart-rules-modal-header {
  background: linear-gradient(180deg, #0F172A 0%, #0A0F1D 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.theme-tactical .smart-rules-modal-icon-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  border-color: rgba(168, 85, 247, 0.4);
  color: #C084FC;
}
body.theme-tactical .smart-rules-header-title {
  color: #F8FAFC;
}
body.theme-tactical .smart-rules-header-pill {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #A5B4FC;
}
body.theme-tactical .smart-rules-header-sub {
  color: #94A3B8;
}
body.theme-tactical .smart-rules-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}
body.theme-tactical .smart-rules-modal-body {
  background: #080C18;
}
body.theme-tactical .smart-rules-status-banner {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
}
body.theme-tactical .smart-rules-status-txt {
  color: #E2E8F0;
}
body.theme-tactical .smart-rules-modal-footer {
  background: #0F172A;
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.theme-tactical .smart-rule-card-illustrated {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-tactical .smart-rule-card-illustrated:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(56, 189, 248, 0.25);
}
body.theme-tactical .smart-rule-title {
  color: #F8FAFC !important;
}
body.theme-tactical .smart-rule-desc {
  color: #94A3B8 !important;
}
body.theme-tactical .rule-badge-blue   { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); color: #ffffff; border: none; }
body.theme-tactical .rule-badge-green  { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #ffffff; border: none; }
body.theme-tactical .rule-badge-orange { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: #ffffff; border: none; }
body.theme-tactical .rule-badge-purple { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: #ffffff; border: none; }
body.theme-tactical .rule-badge-teal   { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: #ffffff; border: none; }
body.theme-tactical .rule-badge-rose   { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); color: #ffffff; border: none; }

/* ══════════════════════════════════════════════════════════════════════════
   V5.8 EDITORIAL VECTOR ILLUSTRATIONS & MINIMAL SAAS POLISH (UI/UX PRO MAX)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Editorial Vector Background Illustrations on KPI & Summary Cards (Zero Vertical Clipping) */
.illus-telemetry,
.illus-voice,
.illus-chat,
.illus-camera,
.illus-security,
.illus-sla,
.illus-billing {
  position: relative !important;
  overflow: hidden !important;
}

.illus-telemetry > *,
.illus-voice > *,
.illus-chat > *,
.illus-camera > *,
.illus-security > *,
.illus-sla > *,
.illus-billing > * {
  position: relative;
  z-index: 1;
}

.illus-telemetry::after,
.illus-online::after,
.illus-moving::after,
.illus-stopped::after,
.illus-offline::after,
.illus-geofence::after,
.illus-voice::after,
.illus-chat::after,
.illus-camera::after,
.illus-security::after,
.illus-sla::after,
.illus-billing::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 10px;
  width: 38%;
  max-width: 116px;
  min-width: 68px;
  height: auto;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

/* Taller multi-line cards: anchor art cleanly on right bottom without touching text */
.highlight-card-item.illus-telemetry::after,
.highlight-card-item.illus-voice::after,
.highlight-card-item.illus-chat::after,
.highlight-card-item.illus-camera::after,
.highlight-card-item.illus-security::after,
.highlight-card-item.illus-sla::after,
.highlight-card-item.illus-billing::after {
  top: auto;
  bottom: 8px;
  right: 8px;
  height: 62px;
  width: 96px;
  background-position: right bottom;
}

.illus-telemetry:hover::after,
.illus-online:hover::after,
.illus-moving:hover::after,
.illus-stopped:hover::after,
.illus-offline:hover::after,
.illus-geofence:hover::after,
.illus-voice:hover::after,
.illus-chat:hover::after,
.illus-camera:hover::after,
.illus-security:hover::after,
.illus-sla:hover::after,
.illus-billing:hover::after {
  transform: scale(1.04) translate(-2px, 0);
  opacity: 1;
}

.illus-telemetry::after {
  background-image: url('/web/assets/illustrations/card_telemetry_map.svg');
}
.illus-online::after {
  background-image: url('/web/assets/illustrations/card_online_radar.svg');
}
.illus-moving::after {
  background-image: url('/web/assets/illustrations/card_telemetry_map.svg');
}
.illus-stopped::after {
  background-image: url('/web/assets/illustrations/card_stopped_beacon.svg');
}
.illus-offline::after {
  background-image: url('/web/assets/illustrations/card_security_vault.svg');
}
.illus-geofence::after {
  background-image: url('/web/assets/illustrations/card_geofence_perimeter.svg');
}
.illus-voice::after {
  background-image: url('/web/assets/illustrations/card_voice_wave.svg');
}
.illus-chat::after {
  background-image: url('/web/assets/illustrations/card_chat_dispatch.svg');
}
.illus-camera::after {
  background-image: url('/web/assets/illustrations/card_camera_optics.svg');
}
.illus-security::after {
  background-image: url('/web/assets/illustrations/card_security_vault.svg');
}
.illus-sla::after {
  background-image: url('/web/assets/illustrations/card_sla_clock.svg');
}
.illus-billing::after {
  background-image: url('/web/assets/illustrations/card_billing_ledger.svg');
}

/* Hide legacy text chevron inside metric cards so it never collides with right-side illustrations */
.metric-card .metric-arrow {
  display: none !important;
}

/* Dark Mode (Tactical Stealth) Vector Illustration Harmony */
body.theme-tactical .illus-telemetry::after,
body.theme-tactical .illus-online::after,
body.theme-tactical .illus-moving::after,
body.theme-tactical .illus-stopped::after,
body.theme-tactical .illus-offline::after,
body.theme-tactical .illus-geofence::after,
body.theme-tactical .illus-voice::after,
body.theme-tactical .illus-chat::after,
body.theme-tactical .illus-camera::after,
body.theme-tactical .illus-security::after,
body.theme-tactical .illus-sla::after,
body.theme-tactical .illus-billing::after {
  opacity: 0.55 !important;
  filter: invert(1) hue-rotate(190deg) brightness(1.25) drop-shadow(0 0 6px rgba(56, 189, 248, 0.35)) !important;
}
body.theme-tactical .illus-telemetry:hover::after,
body.theme-tactical .illus-online:hover::after,
body.theme-tactical .illus-moving:hover::after,
body.theme-tactical .illus-stopped:hover::after,
body.theme-tactical .illus-offline:hover::after,
body.theme-tactical .illus-geofence:hover::after,
body.theme-tactical .illus-voice:hover::after,
body.theme-tactical .illus-chat:hover::after,
body.theme-tactical .illus-camera:hover::after,
body.theme-tactical .illus-security:hover::after,
body.theme-tactical .illus-sla:hover::after,
body.theme-tactical .illus-billing:hover::after {
  opacity: 0.85 !important;
  transform: scale(1.06) translate(-2px, 0) !important;
}

/* 2. Sub-tab & Navigation Vector SVG Icon Alignment */
.helpdesk-subtab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.helpdesk-subtab-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.helpdesk-subtab-btn.active svg,
.helpdesk-subtab-btn:hover svg {
  opacity: 1;
  transform: translateY(-0.5px);
}
.settings-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.settings-nav-item svg {
  flex-shrink: 0;
  opacity: 0.82;
}
.settings-nav-item.active svg {
  opacity: 1;
}

/* Dark Mode Support for 24/7 Priority Hotline Panel (#helpdesk-view-c2desk) */
body.theme-tactical #helpdesk-view-c2desk > div {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical #helpdesk-view-c2desk .c2-hotline-card {
  background: #131D31 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.theme-tactical #helpdesk-view-c2desk .c2-hotline-card div[style*="color:#0F172A"] {
  color: #F8FAFC !important;
}
body.theme-tactical #helpdesk-view-c2desk .c2-hotline-card div[style*="color:#64748B"] {
  color: #94A3B8 !important;
}

/* Alerts SOC Feed SVG Icon Badges */
.sec-icon-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sec-meta-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 3. Editorial Hero Banner Refinement (No Dark-Blue/Black Box, Pure Vector Art) */
.workspace-hero-banner,
.workspace-hero-banner.template-fleet {
  background: linear-gradient(105deg, #FFFFFF 0%, #F8FAFC 42%, #EFF6FF 100%) !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(37, 99, 235, 0.05) !important;
  min-height: 144px !important;
  margin-bottom: 20px !important;
}

.workspace-hero-banner .hero-banner-content {
  padding: 22px 28px !important;
  max-width: 480px !important;
  gap: 6px !important;
}

.workspace-hero-banner .hero-banner-tag {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border: 1px solid #BFDBFE !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 10px !important;
}

.workspace-hero-banner .hero-banner-title {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.025em !important;
}

.workspace-hero-banner .hero-banner-subtitle {
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.workspace-hero-banner .hero-banner-art-wrap {
  width: 56% !important;
  padding-right: 12px !important;
}

.workspace-hero-banner .hero-banner-art {
  width: 100% !important;
  height: 100% !important;
  max-height: 168px !important;
  object-fit: contain !important;
  object-position: right center !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.workspace-hero-banner .hero-banner-footer-credit {
  display: none !important;
}

/* Dark Mode Hero Banner */
body.theme-tactical .workspace-hero-banner,
body.theme-tactical .workspace-hero-banner.template-fleet {
  background: linear-gradient(105deg, #0F172A 0%, #111C33 52%, #0F233F 100%) !important;
  border-color: rgba(56, 189, 248, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

body.theme-tactical .workspace-hero-banner .hero-banner-tag {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60A5FA !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

body.theme-tactical .workspace-hero-banner .hero-banner-title {
  color: #F8FAFC !important;
}

body.theme-tactical .workspace-hero-banner .hero-banner-subtitle {
  color: #94A3B8 !important;
}

body.theme-tactical .workspace-hero-banner .hero-banner-art {
  opacity: 0.88 !important;
}

/* 4. Interactive Minimal & Clean Card Hierarchy */
.metric-card,
.interactive-metric-card {
  border-radius: 14px !important;
  padding: 18px 20px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  cursor: pointer !important;
  user-select: none;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

.metric-card:hover,
.interactive-metric-card:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.1) !important;
  border-color: #94A3B8 !important;
}

.metric-card:active,
.interactive-metric-card:active {
  transform: translateY(0) scale(0.99) !important;
}

/* Active Filter Glow Rings on Selected Stat Cards */
.metric-card.active-filter {
  border-width: 1.5px !important;
}
#card-filter-online.active-filter {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(16, 185, 129, 0.15) !important;
}
#card-filter-moving.active-filter {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 8px 24px rgba(14, 165, 233, 0.15) !important;
}
#card-filter-stopped.active-filter {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 8px 24px rgba(245, 158, 11, 0.15) !important;
}
#card-filter-offline.active-filter {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25), 0 8px 24px rgba(148, 163, 184, 0.15) !important;
}
#card-filter-geofences.active-filter {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25), 0 8px 24px rgba(139, 92, 246, 0.15) !important;
}

.metric-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #64748B !important;
  margin-bottom: 4px !important;
}

.metric-big-num {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}

/* Tactical Stealth (Dark Mode) Stat Cards High Contrast Overhaul */
body.theme-tactical .metric-card {
  background: linear-gradient(180deg, #131d33 0%, #0d1527 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-tactical .metric-card:hover {
  background: linear-gradient(180deg, #182440 0%, #0f1a30 100%) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.2) !important;
}

.metric-value {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

body.theme-tactical .metric-value {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.metric-label {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.theme-tactical .metric-label {
  color: #cbd5e1 !important;
}
body.theme-tactical .metric-card:hover .metric-label {
  color: #f1f5f9 !important;
}

@media (min-width: 901px) {
  #tab-calls-view .metrics-row,
  #tab-messages-view .metrics-row,
  #settings-group-enrollment .metrics-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #tab-photos-view .metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: 520px !important;
  }
}

body.theme-tactical #billing-invoices-tbody strong,
body.theme-tactical #workspace-invoices-tbody strong,
body.theme-tactical .admin-data-table td strong,
body.theme-tactical .team-table td strong {
  color: #F8FAFC !important;
}

/* ══════════════════════════════════════════════════════════════════
   CLASSIC & PREMIUM HANDSET / OFFICER SELECTOR
   Zero Emojis · Clean Vector SVGs · Avatar Badges · High Contrast
   ══════════════════════════════════════════════════════════════════ */
.custom-officer-picker-wrap {
  position: relative;
  display: inline-block;
}

.officer-picker-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 6px 14px 6px 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.officer-picker-btn:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.officer-picker-btn:focus-visible {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

body.theme-tactical .officer-picker-btn {
  background: #0F172A;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.theme-tactical .officer-picker-btn:hover {
  background: #1E293B;
  border-color: #38BDF8;
}

body.theme-tactical .officer-picker-btn #screen-trigger-name {
  color: #F8FAFC !important;
}

body.theme-tactical .officer-picker-btn #screen-trigger-model {
  color: #94A3B8 !important;
}

/* Floating Dropdown Panel */
.officer-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 380px;
  max-height: 400px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(0, 0, 0, 0.06);
  z-index: 999999;
  flex-direction: column;
  overflow: hidden;
  animation: officerDropdownFadeIn 0.16s ease-out;
}

@keyframes officerDropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

body.theme-tactical .officer-dropdown-panel {
  background: #0F172A;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.1);
}

.officer-dropdown-search-box {
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.theme-tactical .officer-dropdown-search-box {
  background: #1E293B;
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body.theme-tactical .officer-dropdown-search-box input {
  color: #F8FAFC !important;
}

body.theme-tactical .officer-dropdown-search-box input::placeholder {
  color: #64748B;
}

/* Option Items */
.officer-option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.14s ease;
  user-select: none;
}

.officer-option-item:hover {
  background: #F1F5F9;
}

.officer-option-item.active {
  background: rgba(37, 99, 235, 0.08);
}

body.theme-tactical .officer-option-item:hover {
  background: rgba(56, 189, 248, 0.12);
}

body.theme-tactical .officer-option-item.active {
  background: rgba(56, 189, 248, 0.18);
}

body.theme-tactical .officer-option-item strong {
  color: #F8FAFC !important;
}

body.theme-tactical .officer-option-item .officer-sub-text {
  color: #94A3B8 !important;
}

/* Officer Status Badges (Zero Emojis) */
.officer-status-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2.5px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.officer-status-badge.status-moving {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.officer-status-badge.status-online {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.officer-status-badge.status-offline {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
  border: 1px solid rgba(100, 116, 139, 0.25);
}

body.theme-tactical .officer-status-badge.status-moving {
  background: rgba(56, 189, 248, 0.18);
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.35);
}

body.theme-tactical .officer-status-badge.status-online {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.35);
}

body.theme-tactical .officer-status-badge.status-offline {
  background: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.2);
}

.status-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}

.live-blink-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: liveBlinkPulse 1.8s infinite ease-in-out;
}

@keyframes liveBlinkPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}