:root {
  --impersonation-banner-height: 0px;
}

body.has-impersonation-banner,
.app.has-impersonation-banner,
body:has(.impersonation-banner-wrapper),
.app:has(.impersonation-banner-wrapper) {
  --impersonation-banner-height: 30px;
}

/* ============================================
   APP LAYOUT
   ============================================ */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: hsl(var(--background, 210 40% 98%));
}

/* Prevent horizontal page scroll and hide scrollbars visually */
html, body, #root {
  overflow-x: hidden;
}

/* Hide scrollbars (visual only) while keeping scroll behavior if needed */
* {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Header */
.app-header {
  background: #f8fafd; /* light gray background */
  color: #2c3e50; /* dark text for icons/labels */
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid rgba(16,24,32,0.06);
  position: fixed;
  top: var(--impersonation-banner-height, 0px);
  left: 80px;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  height: 60px;
  transition: top 0.2s ease;
}

/* Breadcrumb bar */
.breadcrumb-bar {
  position: fixed;
  top: calc(var(--impersonation-banner-height, 0px) + 60px);
  left: 80px;
  right: 0;
  background: #f8fafd;
  border-bottom: 2px solid #e5e7eb;
  z-index: 99;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  margin-top: 0px;
}

.breadcrumb {
  padding: 8px 14px;
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
  margin: 0;
}

/* Settings card */
.settings-card {
  position: absolute;
  top: 56px;
  right: 16px;
  width: 320px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(16,24,32,0.06);
  box-shadow: 0 10px 30px rgba(16,24,32,0.08);
  z-index: 300;
  overflow: hidden;
}
.settings-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(16,24,32,0.04);
}
.settings-close{ background: transparent; border: none; cursor: pointer; font-size: 1rem }
.settings-body{ padding: 12px 14px }
.settings-row{ margin-bottom: 12px; display:flex; flex-direction:column; gap:8px }
.settings-options{ display:flex; flex-direction:column; gap:12px }
.settings-options label{ display:flex; gap:8px; align-items:center; cursor:pointer; padding:4px 0; font-weight:500; width:100%; }
.settings-options label input[type="radio"]{ margin:0; cursor:pointer; flex-shrink:0; width:18px; height:18px; }
.settings-actions{ display:flex; justify-content:flex-end }
.btn{ padding:6px 12px; border-radius:8px; border:1px solid rgba(16,24,32,0.06); background:#fff; cursor:pointer }
.btn-primary{ background: var(--color-btn-primary); color: var(--color-btn-primary-text); border-color: transparent }

/* Icon-friendly button layout */
.btn,
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn svg,
.btn-sm svg {
  flex: 0 0 auto;
}

/* Profile card */
.profile-card {
  position: absolute;
  top: 54px;
  right: 12px;
  width: 300px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d9e0e7;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  z-index: 300;
  overflow: hidden;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f3f4f6;
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}

.profile-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-name-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

.profile-avatar-large {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C3AED;
  font-weight: 700;
  font-size: 1rem;
  background: #e9d5ff;
  border: none;
}

.profile-email-text {
  font-size: 0.78rem;
  color: #6b7280;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-menu {
  padding: 8px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
}

.profile-menu-item-static {
  cursor: default;
}

.profile-menu-item-static:hover {
  background: transparent;
}

.profile-menu-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 110px;
}

.profile-theme-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--theme-switcher-border);
  background: var(--theme-switcher-bg);
  margin-left: auto;
}

.profile-theme-control .theme-switch-btn {
  height: 26px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 0.7rem;
}

.profile-menu-item:hover {
  background: var(--surface-3);
}

.profile-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.profile-menu-item.logout {
  color: var(--text);
  padding: 10px 12px;
  margin: 0 8px 8px;
}

/* Profile page */
.profile-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 6px 24px;
}

.profile-breadcrumb {
  color: #6b7280;
  font-size: 0.85rem;
}

.profile-hero {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.profile-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-accent-lighter);
  color: var(--color-accent-primary);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.profile-hero-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.profile-hero-email {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.profile-hero-meta {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  gap: 8px;
  align-items: center;
}

.profile-hero-stats {
  display: flex;
  gap: 24px;
}

.profile-stat {
  text-align: center;
}

.profile-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}

.profile-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 4px;
}

.profile-tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--surface-3);
  border-radius: 12px;
  padding: 4px;
  width: -moz-fit-content;
  width: fit-content;
}

.profile-tab {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.profile-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.profile-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
}

.profile-panel-title {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}

.profile-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-top: 1px solid var(--border-subtle);
}

.profile-row:first-child {
  border-top: none;
}

.profile-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}

.profile-row-label {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: uppercase;
}

.profile-row-value {
  color: var(--text);
  font-size: 0.95rem;
  margin-top: 2px;
}

.profile-badge {
  background: var(--color-accent-light);
  color: var(--color-accent-primary);
  font-size: 0.65rem;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 8px;
  font-weight: 600;
}

.profile-panel-note {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.profile-error {
  color: #b42318;
  background: #fff5f4;
  border: 1px solid #fecdca;
  border-radius: 8px;
  padding: 10px 12px;
}

.profile-security-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.profile-security-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
}

.profile-security-row:last-child {
  border-bottom: none;
}

.profile-security-copy {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.profile-security-copy strong { color: var(--text); font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; }
.profile-security-copy span { color: var(--text-muted); font-size: 0.8rem; }
.profile-security-status { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.profile-security-action { border: 0; border-radius: 8px; padding: 8px 12px; background: #f3e8ff; color: #7c3aed; font-size: 0.78rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background 0.15s ease; }
.profile-security-action:hover:not(:disabled) { background: #ede9fe; color: #6d28d9; }
.profile-security-action:disabled { opacity: 0.7; cursor: not-allowed; }
.profile-permission-list { display: grid; gap: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; }
.profile-permission-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid #e2e8f0; }
.profile-permission-row:last-child { border-bottom: 0; }
.profile-permission-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #f1f5f9; color: #64748b; }
.profile-permission-name { color: #0f172a; font-size: 0.82rem; }
.profile-permission-access { color: #64748b; font-size: 0.75rem; white-space: nowrap; }

.dark .profile-permission-list,
.dark .profile-panel,
.dark .profile-security-list {
  background: #000000 !important;
  background-color: #000000 !important;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .profile-security-row {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #27272a !important;
  border-radius: 0 !important;
  color: #ffffff !important;
}

.dark .profile-security-row:last-child {
  border-bottom: none !important;
}

.dark .profile-permission-row {
  border-bottom: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark .profile-permission-row:last-child {
  border-bottom: none !important;
}

.dark .profile-permission-icon {
  background-color: #241838 !important;
  color: #8b5cf6 !important;
}

.dark .profile-permission-name,
.dark .profile-permission-section h3,
.dark .profile-permissions-summary {
  color: #ffffff !important;
}

.dark .profile-permission-access {
  color: #a1a1aa !important;
}

@media (max-width: 900px) {
  .profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

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

.header-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: unset;
}


.logo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #000000;
  white-space: nowrap;
}



.header-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 0 0 auto;
  min-width: unset;
  justify-content: flex-end;
}

.header-icons {
  display: flex;
  gap: 0.5rem;
}

.icon-btn {
  background: transparent;
  border: none;
  color: #55616a;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: rgba(16,24,32,0.04);
  transform: translateY(-1px);
}

.header-time {
  font-size: 0.85rem;
  color: #1f2937;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(16,24,32,0.06);
  box-shadow: 0 2px 6px rgba(16,24,32,0.04);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(16,24,32,0.06);
  box-shadow: 0 2px 6px rgba(16,24,32,0.04);
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-user:hover {
  background: #f9fafb;
  border-color: rgba(16,24,32,0.12);
  box-shadow: 0 4px 12px rgba(16,24,32,0.08);
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0b1220; /* dark/near-black profile text to align with header */
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; /* white initial */
  font-weight: 700;
  font-size: 0.8rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e72 100%);
  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.16);
  border: 2px solid rgba(255,255,255,0.12);
}

/* Main Layout */
.app-body {
  flex: 1;
  gap: 0;
  padding: 0;
  margin-left: 80px;
  margin-top: 105px;
  width: calc(100% - 80px);
  min-height: calc(100vh - 115px);
}



/* Sidebar */
.sidebar {
  width: 80px;
  background: #f8f9fa;
  border-radius: 0;
  padding: 0;
  border-right: 1px solid #e5e7eb;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 101;
  overflow: hidden;
}

.sidebar-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
  height: 60px;
  background: #f8f9fa;
  flex-shrink: 0;
  position: relative;
  top: 0;
  left: 0;
}

.hamburger-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #2c3e50;
  padding: 0;
  transition: transform 0.2s;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-btn:hover {
  transform: scale(1.1);
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.3rem;
  align-items: center;
}

.nav-item {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  color: #2c3e50;
  font-size: 0.65rem;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 60px;
  height: 60px;
  text-decoration: none;
  border: 1px solid transparent;
}

.nav-icon {
  font-size: 1.5rem;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
  font-size: 0.6rem;
}

.nav-item:hover {
  background-color: rgba(0, 102, 204, 0.08);
  border-color: rgba(0, 102, 204, 0.2);
}

.nav-item:hover .nav-icon {
  transform: scale(1.15);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.15) 0%, rgba(0, 102, 204, 0.08) 100%);
  color: #0066cc;
  border-color: #0066cc;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .app-body {
    gap: 0.75rem;
    padding: 0.75rem;
    margin-left: 80px;
  }

  .sidebar {
    width: 80px;
  }

  .nav-item {
    padding: 10px 6px;
  }

  .nav-icon {
    font-size: 1.5rem;
  }

  .nav-label {
    font-size: 0.6rem;
  }
}

@media (max-width: 768px) {
  .app-body {
    flex-direction: column;
    margin-left: 0;
    margin-top: 120px;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 10px;
    margin-top: 1rem;
  }

  .sidebar-header {
    border: none;
    order: -1;
  }

  .nav-menu {
    flex-direction: row;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .nav-item {
    min-width: 100px;
  }

  .header-content {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .logo {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .app-header {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }

  .header-left {
    min-width: auto;
  }

  .header-search {
    max-width: 100%;
  }

  .header-right {
    min-width: auto;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .header-time {
    min-width: auto;
    font-size: 0.75rem;
  }

  .logo {
    font-size: 1rem;
  }

  .sidebar {
    padding: 0.75rem;
  }

  .nav-item {
    padding: 8px 10px;
    font-size: 0.7rem;
    min-width: 80px;
  }

  .nav-icon {
    font-size: 1.25rem;
  }

  .main-content {
    min-height: auto;
  }
}

/* ============================================
   TECHDESK UI OVERRIDES
   ============================================ */

html, body, #root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}

.app {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 78px;
  /* Pilot-style tokens */
  --brand-blue: var(--color-accent-primary);
  --brand-blue-light: rgba(124, 58, 237, 0.10);
  --brand-blue-border: rgba(124, 58, 237, 0.22);
  --surface: var(--color-bg-primary);
  --surface-2: var(--color-bg-secondary);
  --surface-3: var(--color-bg-tertiary);
  --border-subtle: var(--color-border-default);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --theme-switcher-bg: #ffffff;
  --theme-switcher-border: rgba(15, 23, 42, 0.1);
  --theme-switcher-icon: #111827;
  --theme-switcher-icon-muted: #6b7280;
  background: var(--surface-2);
}

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

.app-header {
  top: var(--impersonation-banner-height, 0px);
  left: 0;
  right: 0;
  height: 72px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
  gap: 1rem;
}

.breadcrumb-bar {
  left: var(--sidebar-width);
  right: 0;
  top: calc(var(--impersonation-banner-height, 0px) + 72px);
  height: 38px;
  min-height: 38px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.breadcrumb {
  padding: 0;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-link {
  color: #64748b;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.breadcrumb-current {
  color: #0f172a;
  font-weight: 600;
}

.breadcrumb-sep {
  color: #94a3b8;
  font-size: 0.85rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 0 1px;
}

.dark .breadcrumb-link {
  color: #94a3b8;
}

.dark .breadcrumb-link:hover {
  color: #60a5fa;
}

.dark .breadcrumb-current {
  color: #f8fafc;
}

.dark .breadcrumb-sep {
  color: #64748b;
}

/* Standardized Work Area Header Cards (Dashboard, Units, Players, Assets, etc.) */
.player-main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 20px;
}

.header-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.header-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.player-main-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.player-main-header p {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  color: #64748b;
}

.dark .player-main-header h1 {
  color: #f8fafc;
}

.dark .player-main-header p {
  color: #94a3b8;
}

.app-body {
  display: block;
  margin-left: 0;
  margin-top: calc(var(--impersonation-banner-height, 0px) + 110px);
  width: 100%;
  min-height: calc(100vh - 110px - var(--impersonation-banner-height, 0px));
  background: transparent;
  transition: margin-top 0.2s ease, min-height 0.2s ease;
}

.app-body.no-breadcrumbs {
  margin-top: calc(var(--impersonation-banner-height, 0px) + 72px);
  min-height: calc(100vh - 72px - var(--impersonation-banner-height, 0px));
}

.header-left {
  gap: 0.75rem;
  min-width: unset;
  flex: 0 0 auto;
}

.header-menu-btn {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 6px;
  color: var(--brand-blue);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
}

.brand-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
}

.brand-logo-img {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.brand-icon-img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logo {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--text);
}



.header-right {
  min-width: unset;
  flex: 0 0 auto;
  gap: 1rem;
  flex-wrap: nowrap;
}

.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--theme-switcher-border);
  background: var(--theme-switcher-bg);
}

.theme-switch-btn {
  height: 28px;
  min-width: 58px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--theme-switcher-icon-muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.theme-switch-icon {
  width: 14px;
  height: 14px;
}

.theme-switch-btn.is-active {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.35);
  color: var(--theme-switcher-icon);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-blue);
  display: grid;
  place-items: center;
}

.icon-btn.active {
  background: var(--brand-blue);
  color: #ffffff;
  border-color: transparent;
}

.header-badge {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  color: var(--brand-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.header-time {
  min-height: 36px;
  font-size: 0.75rem;
  background: var(--surface);
}

.header-user {
  min-height: 36px;
  background: var(--surface);
  border-radius: 999px;
}



.sidebar {
  width: var(--sidebar-width);
  align-items: stretch;
  padding: 0;
  background: var(--left-panel-bg, #f8f9fa);
  border-right: 1px solid var(--left-panel-border, #e5e7eb);
  box-shadow: none;
  position: fixed;
  top: calc(var(--impersonation-banner-height, 0px) + 72px);
  left: 0;
  height: calc(100vh - 72px - var(--impersonation-banner-height, 0px));
  overflow-y: auto;
  z-index: 90;
  transition: top 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-header {
  display: none;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sidebar-brand-text {
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--brand-blue);
}

.hamburger-btn {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  padding: 6px;
  color: var(--brand-blue);
  display: grid;
  place-items: center;
}

.sidebar-search {
  padding: 0 1.25rem 0.75rem 1.25rem;
}

.sidebar-search input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  padding: 10px 12px;
  background: var(--surface-3);
  color: var(--text);
}

.sidebar-search input::-moz-placeholder {
  color: var(--text-muted);
}

.sidebar-search input::placeholder {
  color: var(--text-muted);
}

.nav-menu {
  align-items: stretch;
  padding: 0 1.25rem;
  gap: 0.5rem;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.25rem 0 0.15rem;
  font-weight: 700;
}

.nav-section-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  height: 38px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 6px 12px;
  border-radius: 12px;
  text-align: left;
  border: 1px solid transparent;
}

.nav-icon {
  min-height: auto;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: transparent;
  color: var(--brand-blue);
  display: block;
  padding: 0;
}

.nav-label {
  font-size: 0.85rem;
  max-width: none;
}

.nav-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
}

.nav-item:hover {
  background: var(--brand-blue-light);
  color: var(--text);
}

.nav-item:hover .nav-icon {
  color: var(--brand-blue);
}

.nav-item.active {
  background: var(--brand-blue);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.18);
}

.nav-item.active .nav-icon {
  color: #ffffff;
}

.nav-item.active .nav-chevron {
  color: rgba(255, 255, 255, 0.7);
}

.nav-badge-beta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: rgba(20, 184, 166, 0.2);
  color: #2dd4bf;
  border: 1px solid rgba(20, 184, 166, 0.4);
  margin-left: auto;
  line-height: 1.4;
}

.nav-chevron-arrow {
  margin-left: auto;
  color: var(--left-panel-text-muted, #717784);
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-chevron-arrow.rotated {
  transform: rotate(90deg);
}

/* Subitems / Nested Navigation */
.nav-item-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-item.has-subitems {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 14px;
  margin: 2px 0 4px 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-size: 0.825rem;
  font-weight: 500;
  color: #94a3b8;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}

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

.nav-subitem.active {
  color: #ffffff;
  background: var(--brand-blue, #7c3aed);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.nav-subitem-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-subitem:hover .nav-subitem-bullet {
  opacity: 1;
  transform: scale(1.2);
}

.nav-subitem.active .nav-subitem-bullet {
  opacity: 1;
  background-color: #ffffff;
}

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

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 1.5rem 1.25rem;
  font-size: 0.7rem;
  color: #94a3b8;
}

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

.sidebar-collapsed .sidebar-search,
.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .sidebar-footer {
  display: none;
}

.sidebar-collapsed .nav-menu {
  padding: 0.75rem 0.5rem;
  gap: 0.4rem;
}

.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0;
  width: 52px;
  height: 52px;
  margin: 0 auto;
}

.sidebar-collapsed .nav-section-title {
  display: none;
}

.sidebar-collapsed .nav-section {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.sidebar-collapsed .nav-section:last-child {
  border-bottom: none;
}

.sidebar-collapsed .nav-section-items {
  gap: 0.55rem;
}

.sidebar-collapsed .nav-item {
  background: #eef3ff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-collapsed .nav-item.active {
  background: #dbe8ff;
  border-color: rgba(11, 94, 215, 0.45);
  box-shadow: 0 6px 14px rgba(11, 94, 215, 0.15);
}

.sidebar-collapsed .nav-item:hover {
  background: #e4ecff;
  border-color: rgba(11, 94, 215, 0.2);
}

.sidebar-collapsed .nav-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 auto;
  transition: color 0.15s ease;
}

.sidebar-collapsed .nav-item.active .nav-icon {
  background: transparent;
  color: #0b5ed7;
}

.sidebar-collapsed .nav-item:hover .nav-icon {
  background: transparent;
}


.icon-sm {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.brand-icon {
  width: 20px;
  height: 20px;
  color: var(--brand-blue);
}

/* ============================================
   GLOBAL UI POLISH (ALL PAGES)
   ============================================ */

:root {
  --ui-surface: #ffffff;
  --ui-muted: #f3f4f6;
  --ui-border: #e5e7eb;
  --ui-text: #0f172a;
  --ui-subtext: #64748b;
  --ui-radius: 14px;
}

.main-content {
  color: var(--ui-text);
}

/* Generic cards */
.card {
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
}

/* Tables */
table {
  border-collapse: collapse;
}

thead th {
  font-weight: 600;
  color: var(--ui-subtext);
}

tbody td {
  color: var(--ui-text);
}

/* Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
select,
textarea {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: #f8fafc;
  color: var(--ui-text);
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #94a3b8 !important;
  box-shadow: none !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline: none !important;
  border-color: #3b3b44 !important;
  box-shadow: none !important;
}

/* Buttons */
button,
.btn {
  border-radius: 12px;
  border: none;
}

button:hover,
.btn:hover {
  box-shadow: none;
}
.btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid #333a4c;
}

.btn-outline:hover {
  background: #282e3f;
  color: #ffffff;
  border-color: #444d64;
}

.btn-primary {
  background: #1e222e;
  color: #ffffff;
  border: 1px solid #333a4c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.btn-primary:hover {
  background: #282e3f;
  border-color: #444d64;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* BADGES */
.badge,
.pill,
[class*="badge"],
[class*="pill"] {
  border-radius: 999px;
}



@media (max-width: 1200px) {
  .app-header {
    right: 0;
  }
  .breadcrumb-bar {
    right: 0;
  }
  .app-body {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
  .right-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    padding: 0.75rem 1rem;
  }
  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .header-search {
    order: 3;
    width: 100%;
    max-width: none;
  }
}


/* ===== Borderless sidebar/header (match sample) ===== */
.sidebar,
.breadcrumb-bar,
.app-header,
.sidebar-search input,
.nav-item,
.nav-section,
.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-section {
  border: none !important;
  box-shadow: none !important;
}

.nav-section { border-bottom: none !important; }

.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-item.active,
.sidebar-collapsed .nav-item:hover {
  border: none !important;
  box-shadow: none !important;
}

.nav-item.active {
  border: none !important;
}

/* ===== Sidebar clean items ===== */
.nav-item {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

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

.nav-item.active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.nav-section-title {
  background: transparent !important;
}

.nav-section-items {
  background: transparent !important;
}

.nav-beta-badge {
  display: none !important;
}


.icon-btn-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--surface);
}

.header-popover {
  position: absolute;
  top: 52px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #d9e0e7;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  z-index: 320;
  overflow: hidden;
}

.header-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f3;
}

.header-popover-title {
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.header-popover-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: #64748b;
}

.notification-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-border, #edf0f3);
  background: var(--theme-surface, #ffffff);
}

.notification-tab {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--theme-border, #d9e0e7);
  border-radius: 8px;
  background: var(--theme-surface, #ffffff);
  color: var(--theme-text-secondary, #6b7280);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.notification-tab:hover {
  border-color: #cbd5e1;
  color: var(--theme-text-primary, #0f172a);
}

.notification-tab.active {
  border: 1px solid transparent;
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.22));
  color: #ffffff;
  font-weight: 600;
}

.dark .notification-tabs {
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .notification-tab {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #949aa6 !important;
}

.dark .notification-tab:hover:not(.active) {
  background: #202636 !important;
  border-color: #3b455c !important;
  color: #ffffff !important;
}

.dark .notification-tab.active {
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.22)) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  outline: none !important;
}

.header-popover-body {
  padding: 10px 12px 12px;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.quick-access-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 1px solid #d9e0e7;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.quick-access-tile:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: none;
}

.quick-access-tile span {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 850;
}

.quick-access-icon {
  color: #8b5cf6;
  display: inline-flex;
  align-items: center;
  border: none;
}

.quick-access-tile em {
  position: absolute;
  top: -7px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #8b5cf6;
  color: #ffffff;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.mini-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.mini-form input {
  height: 36px;
  border-radius: 8px;
  border: 1px solid #d9e0e7;
  padding: 0 12px;
  font-size: 0.85rem;
  background: #ffffff;
  color: #1f2937;
  transition: all 0.2s ease;
}

.mini-form input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.mini-form button {
  height: 36px;
  border-radius: 8px;
  border: 1px solid #333a4c;
  background: #1e222e;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  padding: 0 16px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mini-form button:hover {
  background: #282e3f;
  border-color: #444d64;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.header-list {
  max-height: 320px;
  overflow: auto;
}

.header-empty {
  padding: 14px 12px;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

.header-item {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 12px;
}

.header-item.unread {
  background: var(--color-accent-lighter);
  border: 1px solid var(--color-accent-light);
}

.header-item-main {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}

.header-item-main:hover {
  background: rgba(15, 23, 42, 0.04);
}

.header-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.header-item-title {
  font-weight: 900;
  color: var(--text);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-item-sub {
  color: #64748b;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-item-action {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(16,24,32,0.10);
  background: #ffffff;
  cursor: pointer;
  color: #64748b;
  flex: none;
}

.sev-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  flex: none;
}

.sev-info { background: #3b82f6; }
.sev-success { background: #22c55e; }
.sev-warning { background: #f59e0b; }
.sev-error { background: #ef4444; }

.todo-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  padding: 6px;
}

.todo-row input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}

.todo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
}

.header-icons .icon-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.icon-btn:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.icon-btn.active,
.icon-btn:active {
  background: #e7f0ff;
  border-color: #c7dcff;
}

.header-badge {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--datra-border);
  background: var(--datra-panel);
  color: var(--datra-text);
  font-weight: 800;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 36px;
  min-height: 36px;
  border-radius: 20px;
  border: 1px solid var(--datra-border);
  background: var(--datra-panel);
  padding: 0 10px 0 6px;
  gap: 8px;
  align-items: center;
  display: flex;
  box-sizing: border-box;
}

.user-name {
  color: #0f172a;
  font-weight: 600;
  font-size: 0.85rem;
}

.user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.user-email {
  font-size: 0.7rem;
  color: #6b7280;
}

.user-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  box-shadow: none;
  border: 2px solid #e2e8f0;
}

.user-chevron {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* Breadcrumb bar */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  min-height: 52px;
  background: #f8fafd;
  border-bottom: 1px solid #e5e7eb;
}

.breadcrumb-left {
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #6b7280;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.breadcrumb-sep {
  color: #cbd5f5;
}

.breadcrumb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

.breadcrumb-actions-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.breadcrumb-refresh-btn {
  border: 1px solid rgba(17, 24, 39, 0.10);
  background: #f3f4f6;
  border-radius: 10px;
  height: 34px;
  padding: 0 12px;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.breadcrumb-refresh-btn:hover {
  background: #e5e7eb;
}

.app-body {
  margin-top: calc(var(--impersonation-banner-height, 0px) + 110px);
  min-height: calc(100vh - 110px - var(--impersonation-banner-height, 0px));
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  box-sizing: border-box;
  padding: 30px 16px 36px 16px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.app-body.no-breadcrumbs {
  margin-top: calc(var(--impersonation-banner-height, 0px) + 72px);
  min-height: calc(100vh - 72px - var(--impersonation-banner-height, 0px));
}

.app-body > :not(.sidebar):not(.sidebar-backdrop) {
  padding: 0;
  margin: 0;
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.app-body > .player-main-header,
.app-body > .jobs-hero-header,
.app-body > .page-header-card {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  top: calc(var(--impersonation-banner-height, 0px) + 60px);
  height: calc(100vh - 60px - var(--impersonation-banner-height, 0px));
  background: #f8fafc;
  border-right: none;
  padding: 14px 12px;
  box-shadow: none;
  overflow-x: hidden;
}

.sidebar-search {
  display: block;
  margin-bottom: 12px;
}

.sidebar-search input {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 0.8rem;
  padding: 0 12px;
  color: #111827;
}

.nav-menu {
  padding: 0;
  gap: 10px;
}

.nav-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 700;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.nav-section-title::after {
  content: "⌄";
  font-size: 0.85rem;
  line-height: 1;
  color: #cbd5e1;
  transition: transform 0.15s ease, color 0.15s ease;
}

.nav-section-title[aria-expanded='false']::after {
  transform: rotate(-90deg);
  color: #d1d5db;
}

.nav-section-title:focus,
.nav-section-title:focus-visible {
  outline: none;
}

.nav-section-title:hover::after {
  color: #94a3b8;
}

.nav-section[data-collapsed='true'] .nav-section-items {
  display: none;
}

.nav-section-items {
  gap: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.sidebar,
aside.sidebar,
.app .sidebar {
  background: var(--left-panel-bg, #ffffff) !important;
  border-right: 1px solid var(--left-panel-border, #e2e8f0) !important;
  color: var(--left-panel-text, #334155) !important;
}

.dark .sidebar,
.dark aside.sidebar,
.dark.app .sidebar,
:root.dark .sidebar {
  background: var(--left-panel-bg, #0d0d10) !important;
  border-right: 1px solid var(--left-panel-border, rgba(255, 255, 255, 0.08)) !important;
  color: var(--left-panel-text, #cbd5e1) !important;
}

.sidebar .nav-section-title {
  color: var(--left-panel-text-muted, #64748b) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.dark .sidebar .nav-section-title {
  color: var(--left-panel-text-muted, #71717a) !important;
}

.nav-item,
.sidebar .nav-item,
.sidebar .nav-item:visited {
  height: 42px !important;
  width: 100%;
  border-radius: 10px !important;
  padding: 0 12px !important;
  gap: 12px !important;
  color: var(--left-panel-text, #334155) !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  position: relative;
  cursor: pointer;
  text-decoration: none !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

.dark .sidebar .nav-item,
.dark .sidebar .nav-item:visited {
  color: var(--left-panel-text, #cbd5e1) !important;
}

.nav-icon,
.sidebar .nav-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--left-panel-text-muted, #64748b) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease !important;
}

.dark .sidebar .nav-icon {
  color: var(--left-panel-text-muted, #94a3b8) !important;
}

.nav-label,
.sidebar .nav-label {
  color: var(--left-panel-text, #334155) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.dark .sidebar .nav-label {
  color: var(--left-panel-text, #cbd5e1) !important;
}

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

.nav-item:hover,
.sidebar .nav-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

.nav-item:hover .nav-icon,
.nav-item:hover .nav-label,
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item:hover .nav-label {
  color: #0f172a !important;
}

.dark .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.dark .sidebar .nav-item:hover .nav-icon,
.dark .sidebar .nav-item:hover .nav-label {
  color: #ffffff !important;
}

.sidebar .nav-item:focus,
.sidebar .nav-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Active Nav Item */
.nav-item.active,
.sidebar .nav-item.active {
  background: var(--left-panel-active-bg, rgba(124, 58, 237, 0.1)) !important;
  color: var(--left-panel-active-text, #7c3aed) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.dark .sidebar .nav-item.active,
.dark .nav-item.active {
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.16)) !important;
  color: var(--left-panel-active-text, #a78bfa) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.nav-item.active::before,
.dark .nav-item.active::before {
  display: none !important;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label,
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-label {
  color: var(--left-panel-active-text, #7c3aed) !important;
}

.dark .sidebar .nav-item.active .nav-icon,
.dark .sidebar .nav-item.active .nav-label {
  color: var(--left-panel-active-text, #a78bfa) !important;
}

/* Quick Links Card in Sidebar */
.sidebar-quick-links {
  margin: 16px 12px 12px 12px;
  padding: 12px 14px;
  background: #0d1527;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-quick-links-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 2px;
}

.quick-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: 0.78rem;
  color: #cbd5e1;
  transition: color 0.15s ease;
}

.quick-link-row:hover {
  color: #ffffff;
}

.quick-link-badge {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #1e293b;
  color: #94a3b8;
}

.quick-link-badge.online {
  background: #065f46;
  color: #34d399;
}

.quick-link-badge.alert {
  background: #dc2626;
  color: #ffffff;
  font-weight: 700;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--left-panel-text-muted, #64748b) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--left-panel-border, #e2e8f0) !important;
  margin-top: auto;
}

.dark .sidebar-footer {
  border-top: 1px solid var(--left-panel-border, rgba(255, 255, 255, 0.08)) !important;
  color: var(--left-panel-text-muted, #71717a) !important;
}

.sidebar-version {
  color: var(--left-panel-text-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 500;
}

.dark .sidebar-version {
  color: var(--left-panel-text-muted, #71717a);
}

.sidebar-collapse-toggle-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-collapse-toggle-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.dark .sidebar-collapse-toggle-btn {
  background: #18181c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.dark .sidebar-collapse-toggle-btn:hover {
  background: #27272a !important;
  color: #ffffff !important;
}


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

.app.sidebar-collapsed .sidebar {
  padding: 12px 6px;
}

.app.sidebar-collapsed .sidebar-search,
.app.sidebar-collapsed .sidebar-brand-text,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav-chevron,
.app.sidebar-collapsed .nav-section-title,
.app.sidebar-collapsed .sidebar-footer {
  display: none;
}

.app.sidebar-collapsed .nav-menu {
  padding: 0;
  gap: 0.85rem;
}

.app.sidebar-collapsed .nav-section-items {
  gap: 0.85rem;
  align-items: center;
}

.app.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-item {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.app.sidebar-collapsed .nav-icon,
.sidebar-collapsed .nav-icon,
.app.sidebar-collapsed .nav-item .nav-icon,
.sidebar-collapsed .nav-item .nav-icon,
.app.sidebar-collapsed .nav-icon svg,
.sidebar-collapsed .nav-icon svg,
.app.sidebar-collapsed .nav-item .nav-icon svg,
.sidebar-collapsed .nav-item .nav-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.app.sidebar-collapsed .nav-chevron-arrow,
.sidebar-collapsed .nav-chevron-arrow,
.app.sidebar-collapsed .nav-badge-beta,
.sidebar-collapsed .nav-badge-beta {
  display: none !important;
}

.app.sidebar-collapsed .nav-item.active::before {
  display: none;
}

/* ============================================
   RESPONSIVE POLISH (TABLET + MOBILE)
   ============================================ */

.sidebar-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--impersonation-banner-height, 0px) + 60px);
  height: calc(100vh - 60px - var(--impersonation-banner-height, 0px));
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, top 0.2s ease, height 0.2s ease;
  z-index: 80;
}

@media (max-width: 1024px) {
  .app {
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 56px;
  }

  .app-header {
    height: 56px;
    padding: 0 12px;
    gap: 0.6rem;
  }

  .header-left {
    min-width: 160px;
  }

  .logo {
    font-size: 0.98rem;
  }

  .header-search {
    max-width: 520px;
    min-width: 220px;
    margin: 0 0.5rem;
  }

  .search-input {
    height: 36px;
    font-size: 0.85rem;
    padding: 0 84px 0 42px;
  }

  .header-right {
    min-width: auto;
    gap: 0.5rem;
  }

  .header-badge {
    height: 32px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0 10px;
  }

  .header-user {
    padding: 4px 8px;
    gap: 8px;
  }

  .user-name {
    font-size: 0.8rem;
  }

  .user-email {
    display: none;
  }

  .breadcrumb-bar {
    top: calc(var(--impersonation-banner-height, 0px) + 56px) !important;
    min-height: 44px;
    padding: 10px 12px;
  }

  .breadcrumb {
    font-size: 0.8rem;
  }

  .breadcrumb-refresh-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .app-body {
    margin-top: calc(var(--impersonation-banner-height, 0px) + 100px) !important;
    min-height: calc(100vh - 100px - var(--impersonation-banner-height, 0px)) !important;
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 10px 14px 20px;
  }

  .app-body .main-content {
    margin-left: 0;
    padding: 0;
  }

  .sidebar {
    top: calc(var(--impersonation-banner-height, 0px) + 56px) !important;
    height: calc(100vh - 56px - var(--impersonation-banner-height, 0px)) !important;
    padding: 12px 10px;
  }

  .nav-item {
    height: 38px;
  }
}

@media (max-width: 900px) {
  .app {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 240px;
  }

  .header-left {
    min-width: 0;
  }

  .brand-card .logo { display: none; }

  .header-search {
    max-width: 420px;
    min-width: 180px;
  }

  .header-right { gap: 0.35rem; }

  .header-badge {
    display: none;
  }

  .header-user {
    padding: 2px 6px;
  }

  .user-meta,
  .user-chevron {
    display: none;
  }

  .breadcrumb-bar {
    padding: 8px 10px;
    left: 0;
  }

  .breadcrumb-refresh-btn {
    padding: 6px 8px;
    gap: 6px;
  }

  .app-body {
    margin-left: 0;
    width: 100%;
    padding: 14px 12px 24px 12px;
  }

  .app-body .main-content {
    margin-left: 0;
    padding: 0;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: calc(var(--impersonation-banner-height, 0px) + 60px) !important;
    height: calc(100vh - 60px - var(--impersonation-banner-height, 0px)) !important;
    width: var(--sidebar-width);
    padding: 12px 12px 16px;
    transform: translateX(-105%);
    transition: transform 0.2s ease, top 0.2s ease, height 0.2s ease;
    z-index: 90;
  }

  .sidebar-backdrop {
    top: calc(var(--impersonation-banner-height, 0px) + 56px) !important;
    height: calc(100vh - 56px - var(--impersonation-banner-height, 0px)) !important;
  }

  .app.mobile-sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app.mobile-sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  .header-search {
    display: none;
  }

  .breadcrumb-item:first-child {
    display: none;
  }

  .breadcrumb-refresh-btn {
    font-size: 0;
    padding: 6px;
  }

  .breadcrumb-refresh-btn .icon-sm {
    width: 16px;
    height: 16px;
  }

  .app-body {
    margin-top: calc(var(--impersonation-banner-height, 0px) + 96px) !important;
    min-height: calc(100vh - 96px - var(--impersonation-banner-height, 0px)) !important;
    padding: 10px 12px 18px;
  }

  .app-body .main-content {
    padding: 0;
  }
}

.system-update-notice {
  position: fixed;
  top: 84px;
  right: 18px;
  z-index: 420;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(620px, calc(100vw - var(--sidebar-width) - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(15, 159, 143, 0.24);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.system-update-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.system-update-title {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0;
}

.system-update-message {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.35;
}

.system-update-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.system-update-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d9e0e7;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.system-update-btn.primary {
  border-color: #0f9f8f;
  background: #0f9f8f;
  color: #ffffff;
}

.system-update-btn:hover {
  border-color: #0f9f8f;
  color: #087f73;
  box-shadow: 0 4px 12px rgba(15, 159, 143, 0.16);
}

.system-update-btn.primary:hover {
  background: #087f73;
  border-color: #087f73;
  color: #ffffff;
}

.dark .system-update-notice {
  background: #18181b;
  border-color: rgba(20, 184, 166, 0.32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.dark .system-update-title {
  color: #ffffff;
}

.dark .system-update-message {
  color: #a1a1aa;
}

.dark .system-update-btn {
  background: #27272a;
  border-color: #3f3f46;
  color: #f4f4f5;
}

.dark .system-update-btn.primary {
  background: #0f9f8f;
  border-color: #0f9f8f;
  color: #ffffff;
}

@media (max-width: 900px) {
  .system-update-notice {
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .system-update-notice {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .system-update-actions {
    width: 100%;
  }

  .system-update-btn {
    flex: 1;
  }
}

/* ==========================================================================
   GLOBAL PRELOADER STYLES (MATCHING SAMPLE IMAGE DESIGN)
   ========================================================================== */
.datra-preloader,
.table-loading-state,
.loading-wrapper,
.preloader-container,
.office-metric-card .loading,
.health-monitoring-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 40px 20px !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.datra-preloader-full {
  min-height: 320px;
  width: 100%;
}

.datra-preloader-icon,
.spinner-purple,
.animate-spin {
  color: #8b5cf6 !important;
  flex-shrink: 0 !important;
}

.datra-preloader-text {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.spinner,
.btn-spinner .spinner {
  border-color: rgba(139, 92, 246, 0.25) !important;
  border-top-color: #8b5cf6 !important;
}

/* ==========================================================================
   UNIFIED HEADER BUTTONS & THIN OUTLINE STYLES
   ========================================================================== */
.header-actions-group .btn,
.header-actions-group button,
.player-main-header .btn,
.player-main-header button,
.admin-header .btn,
.admin-header button,
.btn-outline,
.btn-ghost,
.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.header-actions-group .btn:hover,
.header-actions-group button:hover,
.player-main-header .btn:hover,
.btn-outline:hover,
.btn-ghost:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.header-actions-group .btn-primary,
.player-main-header .btn-primary,
.btn-primary,
.btn-add-office {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.header-actions-group .btn-primary:hover,
.player-main-header .btn-primary:hover,
.btn-primary:hover,
.btn-add-office:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

.header-actions-group .btn:disabled,
.header-actions-group button:disabled,
.player-main-header .btn:disabled,
.player-main-header button:disabled,
.btn:disabled,
.btn-primary:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
}

/* Dark mode header buttons */
.dark .header-actions-group .btn,
.dark .header-actions-group button,
.dark .player-main-header .btn,
.dark .btn-outline,
.dark .btn-primary {
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .header-actions-group .btn:hover,
.dark .header-actions-group button:hover,
.dark .player-main-header .btn:hover,
.dark .btn-outline:hover,
.dark .btn-primary:hover {
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   DEFAULT GREY & WHITE CARD FILTER OPTION BUTTONS (MATCHING SAMPLE IMAGE)
   ========================================================================== */
.office-tabs,
.units-tabs,
.admin-card-header .tabs,
.player-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  padding: 4px 6px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.dark .units-tabs {
  background: #18181d !important;
  border-color: #262631 !important;
}

.filter-tabs,
.jobs-tabs,
.office-tabs,
.reports-filter-chips,
.filter-row .filter-tabs,
.dark .filter-tabs,
.dark .jobs-tabs,
.dark .office-tabs,
.dark .reports-filter-chips,
.dark .filter-row .filter-tabs {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.tab,
.office-tab,
.filter-btn,
.units-tab,
button.tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dark .tab,
.dark .office-tab,
.dark .filter-btn {
  color: #94a3b8 !important;
}

.tab:hover,
.office-tab:hover,
.filter-btn:hover {
  color: #0f172a !important;
  background: rgba(226, 232, 240, 0.6) !important;
}

.dark .tab:hover,
.dark .office-tab:hover,
.dark .filter-btn:hover {
  color: #f8fafc !important;
  background: #27272a !important;
}

/* Active Filter Tab: White Card Button with Thin Outline (as in Sample Image) */
.tab.active,
.office-tab.active,
.filter-btn.active,
button.tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
}

.dark .tab.active,
.dark .office-tab.active,
.dark .filter-btn.active,
.dark button.tab.active {
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.22)) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active Tab Icons (Neutral Charcoal / Grey) */
.tab.active svg,
.tab.active .tab-icon,
.office-tab.active svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

.dark .tab.active svg,
.dark .tab.active .tab-icon,
.dark .office-tab.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Inactive Count Badge Pill */
.count-badge,
.badge,
.tab .badge,
.office-tab .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
}

.dark .count-badge,
.dark .badge {
  background: #27272a !important;
  color: #a1a1aa !important;
}

/* Active Count Badge Pill (Neutral Grey Style - NO GREEN/TEAL) */
.tab.active .count-badge,
.tab.active .badge,
.office-tab.active .badge,
.office-tab.active .count-badge {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

.dark .tab.active .count-badge,
.dark .tab.active .badge,
.dark .office-tab.active .badge,
.dark .office-tab.active .count-badge {
  background: #3f3f46 !important;
  color: #f8fafc !important;
  border: 1px solid #52525b !important;
}

/* ==========================================================================
   VIEW MODE SWITCHER & COMPACT LOW-SPACE DENSITY CARD LAYOUTS
   ========================================================================== */

/* View Mode Switcher Pill Control */
.view-mode-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
  padding: 2px !important;
}

.dark .view-mode-tabs {
  background: #18181d !important;
  border-color: #262631 !important;
}

.view-mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dark .view-mode-btn {
  color: #94a3b8 !important;
}

.view-mode-btn:hover {
  color: #0f172a !important;
  background: #e2e8f0 !important;
}

.dark .view-mode-btn:hover {
  color: #f8fafc !important;
  background: #27272a !important;
}

.view-mode-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.dark .view-mode-btn.active {
  background: #27272a !important;
  color: #f8fafc !important;
  border: 1px solid #3f3f46 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* 1. COMPACT ROWS VIEW (PROFESSIONAL LOW SPACE DENSITY) */
.card-list,
.card-list.view-rows,
.card-list.view-compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.card-list .list-card,
.card-list.view-rows .list-card,
.card-list.view-compact .list-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 280px) 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.dark .card-list .list-card,
.dark .card-list.view-rows .list-card,
.dark .card-list.view-compact .list-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: #262631 !important;
}

.card-list .list-card:hover,
.card-list.view-rows .list-card:hover,
.card-list.view-compact .list-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.dark .card-list .list-card:hover,
.dark .card-list.view-rows .list-card:hover,
.dark .card-list.view-compact .list-card:hover {
  border-color: #3f3f46 !important;
}

.card-list .list-card-header,
.card-list.view-rows .list-card-header,
.card-list.view-compact .list-card-header {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

.card-list .list-title,
.card-list.view-rows .list-title,
.card-list.view-compact .list-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.card-list .list-card-body,
.card-list.view-rows .list-card-body,
.card-list.view-compact .list-card-body {
  grid-column: 2 !important;
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.card-list .meta-row,
.card-list.view-rows .meta-row,
.card-list.view-compact .meta-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 240px) minmax(140px, 180px) minmax(140px, 180px) !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.dark .card-list .meta-row,
.dark .card-list.view-rows .meta-row,
.dark .card-list.view-compact .meta-row {
  color: #94a3b8 !important;
}

.card-list .list-actions,
.card-list.view-rows .list-actions,
.card-list.view-compact .list-actions {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Row Action Buttons inside Compact List Cards */
.row-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 12px !important;
}

.row-actions .link-btn,
.row-actions .tenant-action-link,
.row-actions button {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.dark .row-actions .link-btn,
.dark .row-actions .tenant-action-link,
.dark .row-actions button {
  background: #18181d !important;
  border-color: #3f3f46 !important;
  color: #cbd5e1 !important;
}

.row-actions .link-btn:hover,
.row-actions .tenant-action-link:hover,
.row-actions button:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.dark .row-actions .link-btn:hover,
.dark .row-actions .tenant-action-link:hover,
.dark .row-actions button:hover {
  background: #27272a !important;
  border-color: #a1a1aa !important;
  color: #ffffff !important;
}

.row-actions .link-btn.danger,
.row-actions .tenant-action-link.danger,
.row-actions button.danger {
  color: #ef4444 !important;
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

.row-actions .link-btn.danger:hover,
.row-actions .tenant-action-link.danger:hover,
.row-actions button.danger:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #dc2626 !important;
}

.dark .row-actions .link-btn.danger,
.dark .row-actions .tenant-action-link.danger,
.dark .row-actions button.danger {
  color: #f87171 !important;
  border-color: #7f1d1d !important;
  background: #2a1215 !important;
}

/* 2. GRID VIEW (RESPONSIVE CARDS) */
.card-list.view-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 12px !important;
}

.card-list.view-grid .list-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 14px !important;
  border-radius: 12px !important;
  gap: 12px !important;
}

.card-list.view-grid .list-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.card-list.view-grid .list-card-body {
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.dark .card-list.view-grid .list-card-body {
  border-top-color: #1e1e24 !important;
}

.card-list.view-grid .meta-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

/* ==========================================================================
   UNIFIED ENTERPRISE CARD & DIV CONTAINER STYLES (MATCHING PLAYER & OFFICE)
   ========================================================================== */

/* Universal Card & Panel Rule */
.card,
.admin-card,
.list-card,
.job-card,
.system-card,
.sites-card,
.sites-map-shell,
.inventory-card,
.ticket-card,
.linkgen-hero,
.linkgen-options,
.linkgen-result,
.linkgen-table-card,
.unit-card,
.device-card,
.dash-section,
.profile-card,
.settings-card,
.tenant-card,
.user-card,
.permission-card,
.audit-card,
.summary-card,
.metric-card,
.stat-card,
.office-metric-card,
.office-card,
.player-stat-card,
.table-card {
  background: var(--theme-surface, #ffffff) !important;
  background-color: var(--theme-surface, #ffffff) !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  border-radius: 14px !important;
  color: var(--theme-text-primary, #0f172a) !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Hover effect on interactive cards */
.office-card:hover,
.job-card:hover,
.list-card:hover,
.unit-card:hover,
.device-card:hover,
.tenant-card:hover,
.user-card:hover {
  border-color: var(--theme-accent, #c4b5fd) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   DYNAMIC THEME REACTIVE CARDS, CONTAINERS & SHELL
   ========================================================================== */

/* Global Dark Mode Base Body & Main Containers */
.dark,
.dark body,
.dark #root,
.dark .app,
.dark .app-main,
.dark .admin-page,
.dark .player-page-container,
.dark .units-page,
.dark .office-page,
[data-theme="dark"] body,
[data-theme="dark"] .app-main {
  background-color: var(--theme-bg, #000000) !important;
  color: var(--theme-text-primary, #f4f4f5) !important;
}

.dark .app-header,
.dark .breadcrumb-bar,
[data-theme="dark"] .app-header {
  background: var(--theme-header, var(--left-panel-bg, #000000)) !important;
  border-bottom-color: var(--theme-border, #2a3245) !important;
  color: var(--theme-text-primary, #f4f4f5) !important;
}

/* Universal Dark Theme Overrides for All Cards & Div Containers */
.dark .card,
.dark .admin-card,
.dark .list-card,
.dark .job-card,
.dark .system-card,
.dark .sites-card,
.dark .sites-map-shell,
.dark .inventory-card,
.dark .ticket-card,
.dark .linkgen-hero,
.dark .linkgen-options,
.dark .linkgen-result,
.dark .linkgen-table-card,
.dark .unit-card,
.dark .device-card,
.dark .dash-section,
.dark .profile-card,
.dark .settings-card,
.dark .tenant-card,
.dark .user-card,
.dark .permission-card,
.dark .audit-card,
.dark .summary-card,
.dark .metric-card,
.dark .stat-card,
.dark .office-metric-card,
.dark .office-card,
.dark .player-stat-card,
.dark .table-card,
[data-theme="dark"] .card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .player-stat-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid var(--theme-border, #2a3245) !important;
  border-radius: 12px !important;
  color: var(--theme-text-primary, #f4f4f5) !important;
  box-shadow: none !important;
}

/* Card Hover Elevation in Dark Mode */
.dark .office-card:hover,
.dark .job-card:hover,
.dark .list-card:hover,
.dark .unit-card:hover,
.dark .device-card:hover,
.dark .tenant-card:hover,
.dark .user-card:hover,
.dark .player-stat-card:hover,
[data-theme="dark"] .list-card:hover,
[data-theme="dark"] .player-stat-card:hover {
  background: var(--theme-surface-hover, #1c1e24) !important;
  background-color: var(--theme-surface-hover, #1c1e24) !important;
  border-color: #3b3b44 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Stat & Metric Cards in Dark Mode */
.dark .stat,
.dark .hero-stats .stat,
.dark .office-metric-card,
.dark .player-stat-card,
[data-theme="dark"] .player-stat-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid var(--theme-border, #2a3245) !important;
  color: var(--theme-text-primary, #ffffff) !important;
}

.dark .player-stat-card .stat-label,
.dark .player-stat-card .stat-sub {
  color: var(--theme-text-secondary, #9ea0a6) !important;
}

.dark .player-stat-card .stat-value {
  color: var(--theme-text-primary, #ffffff) !important;
}

/* Card Headers & Bodies in Dark Mode */
.dark .card-header,
.dark .admin-card-header,
.dark .list-card-header,
.dark .office-card-header {
  background: #000000 !important;
  border-bottom: 1px solid var(--theme-border, #2a3245) !important;
}

/* Universal Data Tables in Dark Mode */
.dark thead,
.dark thead tr {
  background: #000000 !important;
}

.dark th {
  color: var(--theme-text-secondary, #9ea0a6) !important;
  border-bottom: 1px solid var(--theme-border, #2a3245) !important;
}

.dark td {
  color: var(--theme-text-primary, #ffffff) !important;
  border-bottom: 1px solid var(--theme-border-subtle, #20222a) !important;
}

.dark tbody tr:hover {
  background-color: #202636 !important;
}

/* Global Header Action Buttons in Dark Mode */
.dark .header-actions-group button,
.dark .player-main-header .btn,
.dark .btn-primary,
.dark .btn-outline,
.dark .btn-ghost,
.dark .btn-secondary,
.dark .btn-add-office,
[data-theme="dark"] .header-actions-group button,
[data-theme="dark"] .btn-outline {
  border: 1px solid #2a3245 !important;
  background: #1f2432 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .header-actions-group button:hover,
.dark .player-main-header .btn:hover,
.dark .btn-outline:hover,
.dark .btn-ghost:hover,
.dark .btn-secondary:hover,
.dark .btn-add-office:hover,
[data-theme="dark"] .header-actions-group button:hover,
[data-theme="dark"] .btn-outline:hover {
  background: #22242c !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .header-actions-group button:disabled,
.dark .btn:disabled {
  opacity: 0.45 !important;
  background: #121216 !important;
  border-color: #202026 !important;
  color: #64646c !important;
}

/* Filter Option Tabs & View Mode Switcher in Dark Mode */
.dark .filter-tabs,
.dark .view-mode-tabs,
[data-theme="dark"] .filter-tabs,
[data-theme="dark"] .view-mode-tabs {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
}

.dark .tab,
.dark .office-tab,
.dark .view-mode-btn,
[data-theme="dark"] .tab,
[data-theme="dark"] .view-mode-btn {
  color: #9ea0a6 !important;
}

.dark .tab.active,
.dark .office-tab.active,
.dark .filter-btn.active,
.dark button.tab.active,
.dark .view-mode-btn.active,
[data-theme="dark"] .tab.active,
[data-theme="dark"] .view-mode-btn.active {
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.22)) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark .tab.active .count-badge,
.dark .tab.active .badge,
.dark .office-tab.active .badge,
.dark .office-tab.active .count-badge,
[data-theme="dark"] .tab.active .count-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
}

.dark .tab:hover:not(.active),
.dark .view-mode-btn:hover:not(.active) {
  background: #1f2432 !important;
  color: #ffffff !important;
}

/* Avatars in Dark Mode */
.dark .avatar,
[data-theme="dark"] .avatar {
  background: #24242c !important;
  border: 1px solid #3c3c4a !important;
  color: #ffffff !important;
}

/* Row Action Buttons in Dark Mode */
.dark .row-actions .link-btn,
.dark .row-actions .tenant-action-link,
.dark .row-actions button,
[data-theme="dark"] .row-actions button {
  background: #18181e !important;
  border: 1px solid #282830 !important;
  color: #d1d2d6 !important;
}

.dark .row-actions .link-btn:hover,
.dark .row-actions .tenant-action-link:hover,
.dark .row-actions button:hover,
[data-theme="dark"] .row-actions button:hover {
  background: #22222a !important;
  border-color: #3e3e4d !important;
  color: #ffffff !important;
}

.dark .row-actions .link-btn.danger,
.dark .row-actions .tenant-action-link.danger,
.dark .row-actions button.danger,
[data-theme="dark"] .row-actions button.danger {
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.3) !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.dark .row-actions .link-btn.danger:hover,
.dark .row-actions .tenant-action-link.danger:hover,
.dark .row-actions button.danger:hover,
[data-theme="dark"] .row-actions button.danger:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}

/* Status Pills in Dark Mode */
.dark .status-pill.success,
[data-theme="dark"] .status-pill.success {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
}

.dark .status-pill.danger,
[data-theme="dark"] .status-pill.danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.25) !important;
}

.dark .status-pill.warning,
[data-theme="dark"] .status-pill.warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
}

/* Inputs, Selects & Search Boxes in Dark Mode */
.dark .input-icon,
.dark .filter-actions select,
.dark .modal input,
.dark .modal select,
[data-theme="dark"] .input-icon {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .input-icon input,
[data-theme="dark"] .input-icon input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Dropdown Action Menus in Dark Mode */
.dark .menu,
[data-theme="dark"] .menu {
  background: #141418 !important;
  border: 1px solid #25252c !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

.dark .menu button,
[data-theme="dark"] .menu button {
  color: #d1d2d6 !important;
}

.dark .menu button:hover,
[data-theme="dark"] .menu button:hover {
  background: #22222a !important;
  color: #ffffff !important;
}

.dark .menu button.danger,
[data-theme="dark"] .menu button.danger {
  color: #f87171 !important;
}

.dark .menu button.danger:hover,
[data-theme="dark"] .menu button.danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* ==========================================================================
   DATRA MODERN ENTERPRISE DESIGN SYSTEM (MATCHING REFERENCE UI)
   ========================================================================== */

/* Left Panel / Sidebar - Theme Reactive */
.sidebar,
aside.sidebar,
.app .sidebar,
.app.sidebar-collapsed .sidebar {
  background: var(--left-panel-bg, #ffffff) !important;
  background-color: var(--left-panel-bg, #ffffff) !important;
  border-right: 1px solid var(--left-panel-border, #e2e8f0) !important;
  color: var(--left-panel-text, #334155) !important;
}

.dark .sidebar,
.dark aside.sidebar,
.dark .app .sidebar,
.dark.app .sidebar,
:root.dark .sidebar,
[data-theme="dark"] .sidebar,
.dark .app.sidebar-collapsed .sidebar {
  background: var(--left-panel-bg, #0d0d10) !important;
  background-color: var(--left-panel-bg, #0d0d10) !important;
  border-right: 1px solid var(--left-panel-border, rgba(255, 255, 255, 0.08)) !important;
  color: var(--left-panel-text, #cbd5e1) !important;
}

.sidebar-header,
.sidebar .sidebar-header {
  background: var(--left-panel-bg, #ffffff) !important;
  background-color: var(--left-panel-bg, #ffffff) !important;
  border-bottom: 1px solid var(--left-panel-border, #e2e8f0) !important;
}

.dark .sidebar-header,
[data-theme="dark"] .sidebar-header {
  background: var(--left-panel-bg, #0d0d10) !important;
  background-color: var(--left-panel-bg, #0d0d10) !important;
  border-bottom: 1px solid var(--left-panel-border, rgba(255, 255, 255, 0.08)) !important;
}

.nav-section-title,
.sidebar .nav-section-title {
  color: var(--left-panel-text-muted, #64748b) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 12px 4px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .sidebar .nav-section-title,
.dark .nav-section-title,
[data-theme="dark"] .nav-section-title {
  color: var(--left-panel-text-muted, #71717a) !important;
}

.nav-section-title::after {
  color: inherit !important;
}

.nav-item,
.sidebar .nav-item,
.sidebar .nav-item:visited {
  height: 42px !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  gap: 12px !important;
  color: var(--left-panel-text, #334155) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.dark .sidebar .nav-item,
.dark .sidebar .nav-item:visited,
.dark .nav-item,
[data-theme="dark"] .nav-item {
  color: var(--left-panel-text, #cbd5e1) !important;
}

.nav-item .nav-icon,
.sidebar .nav-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--left-panel-text-muted, #64748b) !important;
  transition: color 0.15s ease !important;
}

.dark .sidebar .nav-icon,
.dark .nav-item .nav-icon,
[data-theme="dark"] .nav-icon {
  color: var(--left-panel-text-muted, #94a3b8) !important;
}

.nav-item .nav-label,
.sidebar .nav-label {
  color: var(--left-panel-text, #334155) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.dark .sidebar .nav-label,
.dark .nav-item .nav-label,
[data-theme="dark"] .nav-label {
  color: var(--left-panel-text, #cbd5e1) !important;
}

.nav-item:hover,
.sidebar .nav-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-item:hover .nav-icon,
.nav-item:hover .nav-label,
.sidebar .nav-item:hover .nav-icon,
.sidebar .nav-item:hover .nav-label {
  color: #0f172a !important;
}

.dark .sidebar .nav-item:hover,
.dark .nav-item:hover,
[data-theme="dark"] .nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.dark .sidebar .nav-item:hover .nav-icon,
.dark .sidebar .nav-item:hover .nav-label,
.dark .nav-item:hover .nav-icon,
.dark .nav-item:hover .nav-label,
[data-theme="dark"] .nav-item:hover .nav-icon,
[data-theme="dark"] .nav-item:hover .nav-label {
  color: #ffffff !important;
}

/* Active Nav Item */
.nav-item.active,
.sidebar .nav-item.active,
.app .sidebar .nav-item.active {
  background: var(--left-panel-active-bg, rgba(124, 58, 237, 0.1)) !important;
  background-color: var(--left-panel-active-bg, rgba(124, 58, 237, 0.1)) !important;
  color: var(--left-panel-active-text, #7c3aed) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 10px !important;
}

.dark .nav-item.active,
.dark .sidebar .nav-item.active,
.dark .app .sidebar .nav-item.active,
[data-theme="dark"] .nav-item.active {
  background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.16)) !important;
  background-color: var(--left-panel-active-bg, rgba(139, 92, 246, 0.16)) !important;
  color: var(--left-panel-active-text, #a78bfa) !important;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label,
.sidebar .nav-item.active .nav-icon,
.sidebar .nav-item.active .nav-label {
  color: var(--left-panel-active-text, #7c3aed) !important;
}

.dark .sidebar .nav-item.active .nav-icon,
.dark .sidebar .nav-item.active .nav-label,
.dark .nav-item.active .nav-icon,
.dark .nav-item.active .nav-label,
[data-theme="dark"] .nav-item.active .nav-icon,
[data-theme="dark"] .nav-item.active .nav-label {
  color: var(--left-panel-active-text, #a78bfa) !important;
}

.nav-beta-badge {
  display: none !important;
}

.nav-alert-badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  margin-left: auto !important;
  line-height: 1 !important;
}

.sidebar-footer {
  padding: 12px 16px !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  background: transparent !important;
  border: none !important;
}

/* Top App Header */
.app-header {
  top: var(--impersonation-banner-height, 0px) !important;
  height: 60px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0 1.25rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark .app-header {
  background: var(--theme-header, #000000) !important;
  border-bottom: 1px solid var(--theme-border, #24242a) !important;
}

/* Header Search - Unified Single Search Text Box */
.header-search {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 10px 0 12px;
  width: 100%;
  max-width: 680px;
  height: 38px;
  gap: 8px;
  margin: 0 1.25rem;
  box-sizing: border-box;
  transition: all 0.2s ease;
  cursor: pointer;
}

.dark .header-search {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.header-search:hover,
.dark .header-search:hover,
.header-search:focus-within,
.dark .header-search:focus-within {
  border-color: #3b3b44 !important;
  background: #1f2432 !important;
  box-shadow: none !important;
}

.header-search-icon {
  color: #94a3b8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.header-search .search-input {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  cursor: pointer !important;
}

.dark .header-search .search-input {
  color: #f8fafc !important;
  background: transparent !important;
  border: none !important;
}

.header-search .search-input::-moz-placeholder {
  color: #94a3b8 !important;
}

.header-search .search-input::placeholder {
  color: #94a3b8 !important;
}

.header-search-kbd {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.06);
  color: #64748b;
  border: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
}

.dark .header-search-kbd {
  background: #202636 !important;
  color: #94a3b8 !important;
  border-color: #2a3245 !important;
}

/* Header Tools & User Profile */
.header-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.icon-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0f172a;
}

.dark .icon-btn {
  color: #94a3b8;
}

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

.icon-btn-badge-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -8px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 6px;
  border-radius: 20px;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.15s ease;
}

.header-user:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dark .header-user:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  line-height: 1.15;
  text-align: left;
}

.user-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .user-name {
  color: #ffffff;
}

.user-email {
  font-size: 0.6875rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .user-email {
  color: #94a3b8;
}

.user-chevron {
  color: #64748b;
  margin-left: auto;
  flex-shrink: 0;
}

.dark .user-chevron {
  color: #94a3b8;
}

/* Breadcrumb Bar */
.breadcrumb-bar {
  top: calc(var(--impersonation-banner-height, 0px) + 60px) !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
}

.dark .breadcrumb-bar {
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.breadcrumb-actions-slot {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumb-item {
  color: #64748b !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.dark .breadcrumb-item {
  color: #94a3b8 !important;
}

.breadcrumb-sep {
  margin: 0 6px !important;
  color: #cbd5e1 !important;
}

.dark .breadcrumb-sep {
  color: #475569 !important;
}

.breadcrumb-refresh-btn {
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 0 10px !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}

.app-body {
  margin-top: calc(var(--impersonation-banner-height, 0px) + 108px) !important;
  min-height: calc(100vh - 108px - var(--impersonation-banner-height, 0px)) !important;
  transition: margin-top 0.2s ease, min-height 0.2s ease;
}

.app-body.no-breadcrumbs {
  margin-top: calc(var(--impersonation-banner-height, 0px) + 60px) !important;
  min-height: calc(100vh - 60px - var(--impersonation-banner-height, 0px)) !important;
}




/* Modern Cards & Dark Mode Canvas - Refined Enterprise Dark (#000000) */
.dark .app,
.dark .app-body,
.dark .main-content,
.dark .page-container,
.dark .impersonation-page-container {
  background-color: #000000 !important;
  background: #000000 !important;
}

.card,
.kpi-card,
.dash-card,
.admin-card,
.admin-table-container,
.units-table-card,
.selection-header-card,
.sidebar-section-card,
.device-card,
.panel {
  background-color: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}

.dark .card,
.dark .kpi-card,
.dark .dash-card,
.dark .admin-card,
.dark .admin-table-container,
.dark .units-table-card,
.dark .selection-header-card,
.dark .sidebar-section-card,
.dark .device-card,
.dark .panel {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Modern Enterprise Tables */
.admin-table,
.overview-table,
.dash-table,
.datra-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table thead th,
.overview-table thead th,
.dash-table thead th,
.datra-table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  text-align: left;
}

.dark .admin-table thead th,
.dark .overview-table thead th,
.dark .dash-table thead th,
.dark .datra-table thead th {
  background: #000000 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.admin-table tbody td,
.overview-table tbody td,
.dash-table tbody td,
.datra-table tbody td {
  padding: 14px 16px !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
}

.dark .admin-table tbody td,
.dark .overview-table tbody td,
.dark .dash-table tbody td,
.dark .datra-table tbody td {
  color: #f8fafc !important;
  border-bottom: 1px solid var(--theme-border-subtle, #1c1d22) !important;
}

.admin-table tbody tr:hover,
.overview-table tbody tr:hover,
.dash-table tbody tr:hover,
.datra-table tbody tr:hover {
  background: #f8fafc !important;
}

.dark .admin-table tbody tr:hover,
.dark .overview-table tbody tr:hover,
.dark .dash-table tbody tr:hover,
.dark .datra-table tbody tr:hover {
  background: var(--theme-surface-hover, #202636) !important;
}

/* Modern Form Inputs & Selects */
.admin-input,
.search-box input,
.form-input {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.875rem !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.admin-input:focus,
.search-box input:focus,
.form-input:focus {
  border-color: #94a3b8 !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark .admin-input,
.dark .search-box input,
.dark .form-input {
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: #2a3245 !important;
  color: #f8fafc !important;
}

.dark .admin-input:focus,
.dark .search-box input:focus,
.dark .form-input:focus {
  border-color: #3b3b44 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Global Checkbox and Radio Accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #2e2d6b !important;
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
  accent-color: #5c59b6 !important;
}

/* Dropdown Selects with Chevron */
.filter-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 32px 0 12px !important;
  height: 38px !important;
  font-size: 0.875rem !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  color: #0f172a !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.filter-select:hover {
  border-color: #94a3b8 !important;
}

.filter-select:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

.dark .filter-select {
  background-color: #000000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  border-color: #2a3245 !important;
  color: #f8fafc !important;
}

.dark .filter-select:hover {
  border-color: #475569 !important;
}

.dark .filter-select:focus {
  border-color: #52525b !important;
  outline: none !important;
  box-shadow: none !important;
}

.group-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 36px 8px 12px !important;
  font-size: 0.85rem !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  color: #0f172a !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.dark .group-select {
  background-color: #000000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  border-color: #2a3245 !important;
  color: #f8fafc !important;
}

/* Buttons */
.btn-primary,
.control-btn.primary {
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover,
.control-btn.primary:hover {
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

.units-new-unit-btn {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding: 0 10px !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.units-new-unit-btn:hover {
  background: rgba(17, 24, 39, 0.05) !important;
  color: #475569 !important;
}

.dark .units-new-unit-btn {
  color: #94a3b8 !important;
}

.dark .units-new-unit-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.overview-btn,
.overview-all-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.overview-btn:hover,
.overview-all-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.dark .overview-btn,
.dark .overview-all-btn {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

.dark .overview-btn:hover,
.dark .overview-all-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   DATRA PLATFORM - ENTERPRISE MODERN DARK THEME
   Design System:
   - Canvas / Background: #000000 (Solid True Black)
   - Sidebar & Header:    #000000 (Solid True Black)
   - Cards & Panels:      #000000 (Solid True Black)
   - Elevated Elements:   #000000 (Solid True Black)
   - Low-contrast Border: #292933
   - Primary Accent:      #8B5CF6 (Vibrant Violet)
   - Bright Accent:       #A855F7
   - Soft Violet:         #7C3AED
   - Text Primary:        #F4F4F5
   - Text Secondary:      #949AA6
   - Text Muted:          #717784
   ========================================================================== */

:root:not(.dark),
html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #f8fafc;
  --theme-sidebar: #ffffff;
  --theme-header: #ffffff;
  --left-panel-bg: #ffffff;
  --left-panel-border: #e2e8f0;
  --left-panel-text: #0f172a;
  --left-panel-text-muted: #64748b;
  --left-panel-active-bg: #eef2ff;
  --left-panel-active-text: #4338ca;
  --player-bg: #ffffff;
  --player-surface: #ffffff;
  --player-surface-subtle: #f8fafc;
  --player-border: #e2e8f0;
  --theme-surface: #ffffff;
  --theme-surface-elevated: #ffffff;
  --theme-surface-hover: #f1f5f9;
  --theme-border: #e2e8f0;
  --theme-border-subtle: #f1f5f9;
  --theme-border-active: #cbd5e1;
  --theme-violet: #6366f1;
  --theme-violet-bright: #4f46e5;
  --theme-violet-soft: #eef2ff;
  --theme-violet-bg: #eef2ff;
  --theme-violet-border: #c7d2fe;
  --color-btn-primary: #4f46e5;
  --color-btn-primary-hover: #4338ca;
  --color-btn-primary-border: #4338ca;
  --color-btn-primary-border-hover: #3730a3;
  --color-btn-primary-text: #ffffff;
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #475569;
  --theme-text-muted: #64748b;
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 262 83% 58%;
  --radius: 12px;
}

:root.dark,
.dark {
  color-scheme: dark;
  --theme-bg: #000000;
  --theme-sidebar: #000000;
  --theme-header: #000000;
  --left-panel-bg: #000000;
  --left-panel-border: #2a3245;
  --left-panel-text: #ffffff;
  --left-panel-text-muted: #a1a1aa;
  --left-panel-active-bg: #1e222e;
  --left-panel-active-text: #ffffff;
  --player-bg: #000000;
  --player-surface: #000000;
  --player-surface-subtle: #000000;
  --player-border: #2a3245;
  --theme-surface: #000000;
  --theme-surface-elevated: #000000;
  --theme-surface-hover: #12141a;
  --theme-border: #2a3245;
  --theme-border-subtle: #1c1c22;
  --theme-border-active: #3b455c;
  --theme-violet: #1e222e;
  --theme-violet-bright: #282e3f;
  --theme-violet-soft: #1e222e;
  --theme-violet-bg: #1e222e;
  --theme-violet-border: #333a4c;
  --color-btn-primary: #1e222e;
  --color-btn-primary-hover: #282e3f;
  --color-btn-primary-border: #333a4c;
  --color-btn-primary-border-hover: #444d64;
  --color-btn-primary-text: #ffffff;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #949aa6;
  --theme-text-muted: #717784;
  --destructive-foreground: 0 0% 100%;
  --border: 240 6% 18%;
  --input: 240 6% 18%;
  --ring: 263 70% 60%;
  --radius: 12px;
}

/* Base Body & App Shell - Enterprise Dark Canvas (#000000) */
html.dark,
body.dark,
.dark,
.dark body,
.dark #root,
.dark .app,
.dark .app-body,
.dark .main-content,
.dark .page-container,
.dark .impersonation-page-container,
.dark .player-page-container,
.dark .jobs-page,
.dark .admin-page,
.dark .units-page,
.dark .office-page,
.dark .dashboard-page,
.dark .remote-control-container,
.dark .linkgen-page,
.dark .announcements-page,
.dark .api-keys-page,
.dark .auditlog-page,
.dark .permissions-page,
.dark .sso-management-page,
.dark .tenant-management-page,
.dark .user-management-page,
.dark .inv-page-container,
.dark .tkt-page-container,
.dark .sys-health-wrapper,
.dark .reports-hub-container,
.dark .page-wrap,
.dark .analytics-page-wrapper,
[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] #root,
[data-theme="dark"] .app,
[data-theme="dark"] .app-body,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-container,
[data-theme="dark"] .player-page-container,
[data-theme="dark"] .jobs-page,
[data-theme="dark"] .units-page,
.dark .devices-container,
.dark .units-container,
.dark .units-view-container,
.dark .units-pagination-container,
.dark .live-feed-container,
.dark .admin-nav-tabs-container,
.dark .admin-nav-tabs-wrapper,
.dark .control-system-wrapper,
.dark .preferences-container,
.dark .health-monitoring-container,
.dark .home-dashboard-container,
.dark .downloads-page-container,
.dark .hardware-page-container,
.dark .components-page-container,
.dark .content-panel-content,
.dark .players-column,
.dark .player-system-info,
.dark .info-grid,
.dark .overview-table-wrap,
.dark .table-wrap,
.dark .table-container,
.dark .player-table-container,
.dark .player-table-wrap,
.dark .matrix-wrap,
.dark .event-table-wrap,
.dark .admin-table-wrap,
.dark .admin-table-container,
.dark .dash-table-wrap,
.dark .fleet-table-wrap,
.dark .history-table-wrapper,
.dark .inv-table-wrapper,
.dark .linkgen-table-wrap,
.dark .office-table-wrap,
.dark .remote-tooling-table-wrap,
.dark .sites-table-wrap,
.dark .spec-table-wrap,
.dark .status-table-wrapper,
.dark .taskmgr-procs-table-wrap,
.dark .tkt-table-wrapper,
.dark .user-table-wrap,
.dark .main-layout,
.dark .content-area,
.dark .app-layout,
.dark .workspace-content,
[data-theme="dark"] .devices-container,
[data-theme="dark"] .units-container,
[data-theme="dark"] .units-view-container,
[data-theme="dark"] .units-pagination-container,
[data-theme="dark"] .live-feed-container,
[data-theme="dark"] .admin-nav-tabs-container,
[data-theme="dark"] .admin-nav-tabs-wrapper,
[data-theme="dark"] .control-system-wrapper,
[data-theme="dark"] .preferences-container,
[data-theme="dark"] .health-monitoring-container,
[data-theme="dark"] .home-dashboard-container,
[data-theme="dark"] .content-panel-content,
[data-theme="dark"] .players-column,
[data-theme="dark"] .player-system-info,
[data-theme="dark"] .info-grid,
[data-theme="dark"] .overview-table-wrap,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .table-container,
[data-theme="dark"] .player-table-container,
[data-theme="dark"] .player-table-wrap,
[data-theme="dark"] .matrix-wrap,
[data-theme="dark"] .event-table-wrap,
[data-theme="dark"] .admin-table-wrap,
[data-theme="dark"] .admin-table-container,
[data-theme="dark"] .dash-table-wrap,
[data-theme="dark"] .fleet-table-wrap,
[data-theme="dark"] .history-table-wrapper,
[data-theme="dark"] .inv-table-wrapper,
[data-theme="dark"] .linkgen-table-wrap,
[data-theme="dark"] .office-table-wrap,
[data-theme="dark"] .remote-tooling-table-wrap,
[data-theme="dark"] .sites-table-wrap,
[data-theme="dark"] .spec-table-wrap,
[data-theme="dark"] .status-table-wrapper,
[data-theme="dark"] .taskmgr-procs-table-wrap,
[data-theme="dark"] .tkt-table-wrapper,
[data-theme="dark"] .user-table-wrap,
[data-theme="dark"] .main-layout,
[data-theme="dark"] .content-area,
[data-theme="dark"] .app-layout,
[data-theme="dark"] .workspace-content {
  background-color: #000000 !important;
  background: #000000 !important;
  color: var(--theme-text-primary, #ffffff) !important;
}

/* ==========================================================================
   BASE BODY & APP SHELL - LIGHT THEME CANVAS (#f8fafc)
   ========================================================================== */
html:not(.dark),
body:not(.dark),
:root:not(.dark) body,
:root:not(.dark) #root,
:root:not(.dark) .app,
:root:not(.dark) .app-body,
:root:not(.dark) .main-content,
:root:not(.dark) .page-container,
body:not(.dark) .impersonation-page-container,
body:not(.dark) .player-page-container,
body:not(.dark) .jobs-page,
body:not(.dark) .admin-page,
body:not(.dark) .units-page,
body:not(.dark) .office-page,
body:not(.dark) .dashboard-page,
body:not(.dark) .remote-control-container,
body:not(.dark) .linkgen-page,
body:not(.dark) .announcements-page,
body:not(.dark) .api-keys-page,
body:not(.dark) .auditlog-page,
body:not(.dark) .permissions-page,
body:not(.dark) .sso-management-page,
body:not(.dark) .tenant-management-page,
body:not(.dark) .user-management-page,
body:not(.dark) .inv-page-container,
body:not(.dark) .tkt-page-container,
body:not(.dark) .sys-health-wrapper,
body:not(.dark) .reports-hub-container,
body:not(.dark) .page-wrap,
body:not(.dark) .analytics-page-wrapper,
body:not(.dark) .devices-container,
body:not(.dark) .units-container,
body:not(.dark) .units-view-container,
body:not(.dark) .units-pagination-container,
body:not(.dark) .live-feed-container,
body:not(.dark) .admin-nav-tabs-container,
body:not(.dark) .admin-nav-tabs-wrapper,
body:not(.dark) .control-system-wrapper,
body:not(.dark) .preferences-container,
body:not(.dark) .health-monitoring-container,
body:not(.dark) .home-dashboard-container,
body:not(.dark) .downloads-page-container,
body:not(.dark) .hardware-page-container,
body:not(.dark) .components-page-container,
body:not(.dark) .main-layout,
body:not(.dark) .content-area,
body:not(.dark) .app-layout,
body:not(.dark) .workspace-content,
[data-theme="light"] html,
[data-theme="light"] body,
[data-theme="light"] #root,
[data-theme="light"] .app,
[data-theme="light"] .app-body,
[data-theme="light"] .main-content,
[data-theme="light"] .page-container,
[data-theme="light"] .player-page-container,
[data-theme="light"] .jobs-page,
[data-theme="light"] .units-page,
[data-theme="light"] .devices-container,
[data-theme="light"] .units-container,
[data-theme="light"] .units-view-container,
[data-theme="light"] .units-pagination-container,
[data-theme="light"] .live-feed-container,
[data-theme="light"] .admin-nav-tabs-container,
[data-theme="light"] .admin-nav-tabs-wrapper,
[data-theme="light"] .control-system-wrapper,
[data-theme="light"] .preferences-container,
[data-theme="light"] .health-monitoring-container,
[data-theme="light"] .home-dashboard-container,
[data-theme="light"] .downloads-page-container,
[data-theme="light"] .hardware-page-container,
[data-theme="light"] .components-page-container,
[data-theme="light"] .main-layout,
[data-theme="light"] .content-area,
[data-theme="light"] .app-layout,
[data-theme="light"] .workspace-content {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* ==========================================================================
   THEME SWITCHER CAPSULE & BUTTONS (BOTH MODES)
   ========================================================================== */
.theme-switcher-capsule {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 12px !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.dark .theme-switcher-capsule,
[data-theme="dark"] .theme-switcher-capsule {
  background: #111317 !important;
  background-color: #111317 !important;
  border: 1px solid #252833 !important;
  box-shadow: none !important;
}

body:not(.dark) .theme-switcher-capsule,
[data-theme="light"] .theme-switcher-capsule {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.theme-switcher-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 9px !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.dark .theme-switcher-btn,
[data-theme="dark"] .theme-switcher-btn {
  color: #949aa6 !important;
  background: transparent !important;
}

.dark .theme-switcher-btn:hover,
[data-theme="dark"] .theme-switcher-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.dark .theme-switcher-btn.active,
[data-theme="dark"] .theme-switcher-btn.active {
  background: #1e222e !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body:not(.dark) .theme-switcher-btn,
[data-theme="light"] .theme-switcher-btn {
  color: #64748b !important;
  background: transparent !important;
}

body:not(.dark) .theme-switcher-btn:hover,
[data-theme="light"] .theme-switcher-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

body:not(.dark) .theme-switcher-btn.active,
[data-theme="light"] .theme-switcher-btn.active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.theme-switcher-capsule .theme-switcher-btn:focus,
.theme-switcher-capsule .theme-switcher-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   UNIVERSAL LIGHT THEME SYSTEM - COMPLETE COVERAGE FOR ALL DIVS, CARDS & PANELS
   ========================================================================== */

/* 1. All Cards, Panels, Surfaces, Sections, and Elevated Containers */
body:not(.dark) .card,
body:not(.dark) .admin-card,
body:not(.dark) .dash-card,
body:not(.dark) .dash-section,
body:not(.dark) .player-stat-card,
body:not(.dark) .list-card,
body:not(.dark) .stat-card,
body:not(.dark) .detail-card,
body:not(.dark) .service-card,
body:not(.dark) .bandwidth-kpi-card,
body:not(.dark) .note-card,
body:not(.dark) .tkt-summary-card,
body:not(.dark) .reports-gen-card,
body:not(.dark) .content-card,
body:not(.dark) .diag-card,
body:not(.dark) .diag-ui-card,
body:not(.dark) .unit-name-card,
body:not(.dark) .device-info-card,
body:not(.dark) .unit-status-card,
body:not(.dark) .sidebar-action-card,
body:not(.dark) .selection-header-card,
body:not(.dark) .player-mac-card,
body:not(.dark) .live-stream-card,
body:not(.dark) .capture-toast-card,
body:not(.dark) .main-card,
body:not(.dark) .secondary-card,
body:not(.dark) .metric-card,
body:not(.dark) .camera-card,
body:not(.dark) .config-card,
body:not(.dark) .role-card,
body:not(.dark) .tenant-card,
body:not(.dark) .theme-card,
body:not(.dark) .telemetry-card,
body:not(.dark) .unit-media-card,
body:not(.dark) .unit-process-card,
body:not(.dark) .units-card,
body:not(.dark) .units-table-card,
body:not(.dark) .units-main-card,
body:not(.dark) .dash-kpi-card,
body:not(.dark) .dash-metric-card,
body:not(.dark) .sidebar-section-card,
body:not(.dark) .impersonation-card,
body:not(.dark) .impersonation-form-card,
body:not(.dark) .inv-kpi-card,
body:not(.dark) .inv-widget-card,
body:not(.dark) .inv-table-card,
body:not(.dark) .inventory-card,
body:not(.dark) .tkt-card,
body:not(.dark) .tkt-kpi-card,
body:not(.dark) .tkt-table-card,
body:not(.dark) .ticket-card,
body:not(.dark) .sys-kpi-card,
body:not(.dark) .sys-card,
body:not(.dark) .sys-services-card,
body:not(.dark) .system-card,
body:not(.dark) .perf-kpi-card,
body:not(.dark) .perf-card,
body:not(.dark) .perf-panel-card,
body:not(.dark) .analytics-kpi-card,
body:not(.dark) .analytics-card,
body:not(.dark) .reports-hub-card,
body:not(.dark) .reports-table-card,
body:not(.dark) .downloads-card,
body:not(.dark) .linkgen-hero,
body:not(.dark) .linkgen-options,
body:not(.dark) .linkgen-result,
body:not(.dark) .linkgen-table-card,
body:not(.dark) .office-card,
body:not(.dark) .office-table-card,
body:not(.dark) .office-metric-card,
body:not(.dark) .sites-card,
body:not(.dark) .sites-layer-card,
body:not(.dark) .settings-card,
body:not(.dark) .profile-card,
body:not(.dark) .profile-section-card,
body:not(.dark) .profile-perm-card,
body:not(.dark) .profile-password-card,
body:not(.dark) .profile-danger-card,
body:not(.dark) .job-card,
body:not(.dark) .job-item-card,
body:not(.dark) .jobs-card,
body:not(.dark) .unit-card,
body:not(.dark) .device-card,
body:not(.dark) .table-card,
body:not(.dark) .user-card,
body:not(.dark) .version-card,
body:not(.dark) .permission-card,
body:not(.dark) .rc-card,
body:not(.dark) .rc-device-card,
body:not(.dark) .health-service-card,
body:not(.dark) .mac-card,
body:not(.dark) .mock-card,
body:not(.dark) .mock-user-card,
body:not(.dark) .summary-card,
body:not(.dark) .taskmgr-chart-card,
body:not(.dark) .move-device-source-card,
body:not(.dark) .move-device-toggle-card,
body:not(.dark) .kpi-card,
body:not(.dark) .sidebar-card,
body:not(.dark) .hero-card,
body:not(.dark) .panel,
body:not(.dark) .admin-panel,
body:not(.dark) .control-panel,
body:not(.dark) .devices-left-panel,
body:not(.dark) .devices-right-panel,
body:not(.dark) .devices-center-panel,
body:not(.dark) .devices-panel,
body:not(.dark) .diagnostics-panel,
body:not(.dark) .content-panel,
body:not(.dark) .pc-commands-panel,
body:not(.dark) .user-filter-panel,
body:not(.dark) .tkt-table-panel,
body:not(.dark) .profile-panel,
body:not(.dark) .service-panel,
body:not(.dark) .locations-panel,
body:not(.dark) .ops-panel,
body:not(.dark) .overview-panel,
body:not(.dark) .players-panel,
body:not(.dark) .remote-control-panel,
body:not(.dark) .taskmgr-panel,
body:not(.dark) .taskmgr-main-panel,
body:not(.dark) .uptime-panel,
body:not(.dark) .system-info-content,
body:not(.dark) .player-system-info,
body:not(.dark) .system-left-panel,
body:not(.dark) .system-specs-content,
body:not(.dark) .system-players-content,
body:not(.dark) .dash-location-detail-panel,
body:not(.dark) .search-panel,
body:not(.dark) .search-modal-left-panel,
body:not(.dark) .search-modal-right-panel,
body:not(.dark) .info-grid,
body:not(.dark) .dash-section-activity,
body:not(.dark) .dash-metric-card,
body:not(.dark) .diag-stack,
body:not(.dark) .diag-ui-stack,
body:not(.dark) .bc-panel,
body:not(.dark) .taskmgr-stats-grid,
body:not(.dark) .taskmgr-gpu-quad,
body:not(.dark) .taskmgr-gpu-quad-grid,
body:not(.dark) .taskmgr-gpu-quad-box,
body:not(.dark) .taskmgr-chart-box,
body:not(.dark) .forgot-password-content,
body:not(.dark) .login-v1-canvas,
body:not(.dark) .login-v1-card,
[data-theme="light"] .card,
[data-theme="light"] .admin-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .dash-section,
[data-theme="light"] .player-stat-card,
[data-theme="light"] .list-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .detail-card,
[data-theme="light"] .service-card,
[data-theme="light"] .bandwidth-kpi-card,
[data-theme="light"] .note-card,
[data-theme="light"] .tkt-summary-card,
[data-theme="light"] .reports-gen-card,
[data-theme="light"] .content-card,
[data-theme="light"] .diag-card,
[data-theme="light"] .diag-ui-card,
[data-theme="light"] .unit-name-card,
[data-theme="light"] .device-info-card,
[data-theme="light"] .unit-status-card,
[data-theme="light"] .sidebar-action-card,
[data-theme="light"] .selection-header-card,
[data-theme="light"] .player-mac-card,
[data-theme="light"] .live-stream-card,
[data-theme="light"] .capture-toast-card,
[data-theme="light"] .main-card,
[data-theme="light"] .secondary-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .camera-card,
[data-theme="light"] .config-card,
[data-theme="light"] .role-card,
[data-theme="light"] .tenant-card,
[data-theme="light"] .theme-card,
[data-theme="light"] .telemetry-card,
[data-theme="light"] .unit-media-card,
[data-theme="light"] .unit-process-card,
[data-theme="light"] .units-card,
[data-theme="light"] .units-table-card,
[data-theme="light"] .units-main-card,
[data-theme="light"] .dash-kpi-card,
[data-theme="light"] .dash-metric-card,
[data-theme="light"] .sidebar-section-card,
[data-theme="light"] .impersonation-card,
[data-theme="light"] .impersonation-form-card,
[data-theme="light"] .inv-kpi-card,
[data-theme="light"] .inv-widget-card,
[data-theme="light"] .inv-table-card,
[data-theme="light"] .inventory-card,
[data-theme="light"] .tkt-card,
[data-theme="light"] .tkt-kpi-card,
[data-theme="light"] .tkt-table-card,
[data-theme="light"] .ticket-card,
[data-theme="light"] .sys-kpi-card,
[data-theme="light"] .sys-card,
[data-theme="light"] .sys-services-card,
[data-theme="light"] .system-card,
[data-theme="light"] .perf-kpi-card,
[data-theme="light"] .perf-card,
[data-theme="light"] .perf-panel-card,
[data-theme="light"] .analytics-kpi-card,
[data-theme="light"] .analytics-card,
[data-theme="light"] .reports-hub-card,
[data-theme="light"] .reports-table-card,
[data-theme="light"] .downloads-card,
[data-theme="light"] .linkgen-hero,
[data-theme="light"] .linkgen-options,
[data-theme="light"] .linkgen-result,
[data-theme="light"] .linkgen-table-card,
[data-theme="light"] .office-card,
[data-theme="light"] .office-table-card,
[data-theme="light"] .office-metric-card,
[data-theme="light"] .sites-card,
[data-theme="light"] .sites-layer-card,
[data-theme="light"] .settings-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .profile-section-card,
[data-theme="light"] .profile-perm-card,
[data-theme="light"] .profile-password-card,
[data-theme="light"] .profile-danger-card,
[data-theme="light"] .job-card,
[data-theme="light"] .job-item-card,
[data-theme="light"] .jobs-card,
[data-theme="light"] .unit-card,
[data-theme="light"] .device-card,
[data-theme="light"] .table-card,
[data-theme="light"] .user-card,
[data-theme="light"] .version-card,
[data-theme="light"] .permission-card,
[data-theme="light"] .rc-card,
[data-theme="light"] .rc-device-card,
[data-theme="light"] .health-service-card,
[data-theme="light"] .mac-card,
[data-theme="light"] .mock-card,
[data-theme="light"] .mock-user-card,
[data-theme="light"] .summary-card,
[data-theme="light"] .taskmgr-chart-card,
[data-theme="light"] .move-device-source-card,
[data-theme="light"] .move-device-toggle-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .sidebar-card,
[data-theme="light"] .hero-card,
[data-theme="light"] .panel,
[data-theme="light"] .admin-panel,
[data-theme="light"] .control-panel,
[data-theme="light"] .devices-left-panel,
[data-theme="light"] .devices-right-panel,
[data-theme="light"] .devices-center-panel,
[data-theme="light"] .devices-panel,
[data-theme="light"] .diagnostics-panel,
[data-theme="light"] .content-panel,
[data-theme="light"] .pc-commands-panel,
[data-theme="light"] .user-filter-panel,
[data-theme="light"] .tkt-table-panel,
[data-theme="light"] .profile-panel,
[data-theme="light"] .service-panel,
[data-theme="light"] .locations-panel,
[data-theme="light"] .ops-panel,
[data-theme="light"] .overview-panel,
[data-theme="light"] .players-panel,
[data-theme="light"] .remote-control-panel,
[data-theme="light"] .taskmgr-panel,
[data-theme="light"] .taskmgr-main-panel,
[data-theme="light"] .uptime-panel,
[data-theme="light"] .system-info-content,
[data-theme="light"] .player-system-info,
[data-theme="light"] .system-left-panel,
[data-theme="light"] .system-specs-content,
[data-theme="light"] .system-players-content,
[data-theme="light"] .dash-location-detail-panel,
[data-theme="light"] .search-panel,
[data-theme="light"] .search-modal-left-panel,
[data-theme="light"] .search-modal-right-panel,
[data-theme="light"] .info-grid,
[data-theme="light"] .dash-section-activity,
[data-theme="light"] .kpi-card,
[data-theme="light"] .dash-metric-card,
[data-theme="light"] .diag-stack,
[data-theme="light"] .diag-ui-stack,
[data-theme="light"] .bc-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

/* Card & Panel Subheaders and Footers */
body:not(.dark) .card-header,
body:not(.dark) .list-card-header,
body:not(.dark) .office-card-header,
body:not(.dark) .drawer-header,
body:not(.dark) .comp-drawer-header,
body:not(.dark) .job-modal-header,
body:not(.dark) .office-modal-header,
body:not(.dark) .table-settings-header,
body:not(.dark) .impersonate-modal-header,
body:not(.dark) .settings-drawer-header,
body:not(.dark) .right-panel-header,
body:not(.dark) .units-panel-header,
body:not(.dark) .locations-panel-header,
body:not(.dark) .control-section-header,
body:not(.dark) .device-section-header,
body:not(.dark) .diag-ui-card-head,
body:not(.dark) .system-info-header,
body:not(.dark) .report-modal-header,
[data-theme="light"] .card-header,
[data-theme="light"] .drawer-header,
[data-theme="light"] .comp-drawer-header,
[data-theme="light"] .job-modal-header,
[data-theme="light"] .office-modal-header,
[data-theme="light"] .table-settings-header,
[data-theme="light"] .impersonate-modal-header,
[data-theme="light"] .settings-drawer-header,
[data-theme="light"] .right-panel-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body:not(.dark) .card-footer,
body:not(.dark) .office-card-footer,
body:not(.dark) .player-card-footer,
body:not(.dark) .login-v1-card-footer,
body:not(.dark) .drawer-footer,
body:not(.dark) .comp-drawer-footer,
body:not(.dark) .job-modal-footer,
body:not(.dark) .office-modal-footer,
body:not(.dark) .table-settings-footer,
body:not(.dark) .report-modal-footer,
[data-theme="light"] .drawer-footer,
[data-theme="light"] .comp-drawer-footer,
[data-theme="light"] .job-modal-footer,
[data-theme="light"] .office-modal-footer,
[data-theme="light"] .table-settings-footer {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* 2. All Modals, Drawers, Popovers, Dropdowns, Dialogs and Backdrops in Light Mode */
body:not(.dark) .modal-backdrop,
body:not(.dark) .drawer-backdrop,
body:not(.dark) .right-panel-backdrop,
body:not(.dark) .settings-drawer-backdrop,
body:not(.dark) .search-modal-backdrop,
body:not(.dark) .rc-modal-overlay,
body:not(.dark) .job-modal-overlay,
body:not(.dark) .job-detail-overlay,
body:not(.dark) .diff-modal-backdrop,
body:not(.dark) .comp-drawer-backdrop,
body:not(.dark) .units-action-modal-backdrop,
body:not(.dark) .service-panel-backdrop,
body:not(.dark) .table-settings-backdrop,
body:not(.dark) .report-modal-backdrop,
body:not(.dark) .player-modal-backdrop,
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .drawer-backdrop,
[data-theme="light"] .right-panel-backdrop {
  background-color: rgba(15, 23, 42, 0.45) !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body:not(.dark) .modal-content,
body:not(.dark) .modal-card,
body:not(.dark) .modal-body,
body:not(.dark) .modal-container,
body:not(.dark) .dialog-content,
body:not(.dark) .settings-drawer,
body:not(.dark) .drawer-content,
body:not(.dark) .drawer-panel,
body:not(.dark) .header-popover,
body:not(.dark) .header-popover-head,
body:not(.dark) .header-popover-body,
body:not(.dark) .right-panel-drawer,
body:not(.dark) .right-panel-header,
body:not(.dark) .right-panel-body,
body:not(.dark) .drawer,
body:not(.dark) .drawer-body,
body:not(.dark) .popover-content,
body:not(.dark) .dropdown-menu,
body:not(.dark) .menu-content,
body:not(.dark) .menu-panel,
body:not(.dark) .popover-card,
body:not(.dark) .unit-modal,
body:not(.dark) .unit-modal-content,
body:not(.dark) .unit-modal-body,
body:not(.dark) .register-device-modal,
body:not(.dark) .register-device-body,
body:not(.dark) .comp-right-drawer,
body:not(.dark) .comp-drawer-body,
body:not(.dark) .tkt-detail-drawer,
body:not(.dark) .job-modal,
body:not(.dark) .job-modal-body,
body:not(.dark) .job-detail-modal,
body:not(.dark) .job-detail-body,
body:not(.dark) .office-modal,
body:not(.dark) .office-modal-body,
body:not(.dark) .table-settings-modal,
body:not(.dark) .table-settings-body,
body:not(.dark) .table-settings-toolbar,
body:not(.dark) .impersonate-modal,
body:not(.dark) .impersonate-modal-body,
body:not(.dark) .move-device-modal,
body:not(.dark) .move-device-body,
body:not(.dark) .move-device-section,
body:not(.dark) .report-modal,
body:not(.dark) .report-modal-body,
body:not(.dark) .edit-unit-modal,
body:not(.dark) .edit-unit-body,
body:not(.dark) .live-stream-modal,
body:not(.dark) .live-stream-fullscreen-modal,
body:not(.dark) .confirm-action-modal,
body:not(.dark) .settings-drawer-body,
body:not(.dark) .device-dropdown-menu,
body:not(.dark) .job-dropdown-menu,
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-card,
[data-theme="light"] .modal-body,
[data-theme="light"] .dialog-content,
[data-theme="light"] .settings-drawer,
[data-theme="light"] .drawer-content,
[data-theme="light"] .drawer-panel,
[data-theme="light"] .header-popover,
[data-theme="light"] .header-popover-head,
[data-theme="light"] .right-panel-drawer,
[data-theme="light"] .right-panel-header,
[data-theme="light"] .drawer,
[data-theme="light"] .popover-content,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .menu-content,
[data-theme="light"] .menu-panel,
[data-theme="light"] .popover-card,
[data-theme="light"] .unit-modal,
[data-theme="light"] .modal-container,
[data-theme="light"] .unit-modal-content,
[data-theme="light"] .register-device-modal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* 3. Breadcrumbs, Header User Pill, and Header Actions in Light Mode */
body:not(.dark) .breadcrumb-bar,
[data-theme="light"] .breadcrumb-bar {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body:not(.dark) .breadcrumb,
[data-theme="light"] .breadcrumb {
  color: #475569 !important;
}

body:not(.dark) .breadcrumb-item,
[data-theme="light"] .breadcrumb-item {
  color: #64748b !important;
}

body:not(.dark) .breadcrumb-item:last-child,
[data-theme="light"] .breadcrumb-item:last-child {
  color: #0f172a !important;
  font-weight: 600 !important;
}

body:not(.dark) .breadcrumb-sep,
[data-theme="light"] .breadcrumb-sep {
  color: #cbd5e1 !important;
}

body:not(.dark) .breadcrumb-refresh-btn,
[data-theme="light"] .breadcrumb-refresh-btn {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 8px !important;
}

body:not(.dark) .breadcrumb-refresh-btn:hover,
[data-theme="light"] .breadcrumb-refresh-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body:not(.dark) .header-user,
[data-theme="light"] .header-user {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 20px !important;
}

body:not(.dark) .header-user:hover,
[data-theme="light"] .header-user:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

body:not(.dark) .user-name,
[data-theme="light"] .user-name {
  color: #0f172a !important;
}

body:not(.dark) .user-email,
[data-theme="light"] .user-email {
  color: #64748b !important;
}

body:not(.dark) .user-chevron,
[data-theme="light"] .user-chevron {
  color: #64748b !important;
}

body:not(.dark) .icon-btn,
[data-theme="light"] .icon-btn {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 10px !important;
}

body:not(.dark) .icon-btn:hover,
[data-theme="light"] .icon-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

body:not(.dark) .icon-btn.active,
[data-theme="light"] .icon-btn.active {
  background-color: #eef2ff !important;
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

body:not(.dark) .icon-btn.active svg,
body:not(.dark) .icon-btn.active .icon-sm,
[data-theme="light"] .icon-btn.active svg,
[data-theme="light"] .icon-btn.active .icon-sm {
  color: #4338ca !important;
  stroke: #4338ca !important;
}

/* 4. All Tables and Table Wrappers in Light Mode */
body:not(.dark) .table-wrap,
body:not(.dark) .table-container,
body:not(.dark) .overview-table-wrap,
body:not(.dark) .player-table-wrap,
body:not(.dark) .player-table-container,
body:not(.dark) .admin-table-wrap,
body:not(.dark) .admin-table-container,
body:not(.dark) .dash-table-wrap,
body:not(.dark) .diag-ui-table-wrap,
body:not(.dark) .event-table-wrap,
body:not(.dark) .fleet-table-wrap,
body:not(.dark) .history-table-wrapper,
body:not(.dark) .inv-table-wrapper,
body:not(.dark) .linkgen-table-wrap,
body:not(.dark) .office-table-wrap,
body:not(.dark) .remote-tooling-table-wrap,
body:not(.dark) .sites-table-wrap,
body:not(.dark) .spec-table-wrap,
body:not(.dark) .status-table-wrapper,
body:not(.dark) .taskmgr-procs-table-wrap,
body:not(.dark) .tkt-table-wrapper,
body:not(.dark) .matrix-wrap,
body:not(.dark) .camshot-archive-wrap,
body:not(.dark) .user-table-wrap,
body:not(.dark) .datra-table,
body:not(.dark) .reports-table,
[data-theme="light"] .table-wrap,
[data-theme="light"] .table-container,
[data-theme="light"] .overview-table-wrap,
[data-theme="light"] .player-table-wrap,
[data-theme="light"] .player-table-container,
[data-theme="light"] .admin-table-wrap,
[data-theme="light"] .admin-table-container,
[data-theme="light"] .dash-table-wrap,
[data-theme="light"] .diag-ui-table-wrap,
[data-theme="light"] .event-table-wrap,
[data-theme="light"] .fleet-table-wrap,
[data-theme="light"] .history-table-wrapper,
[data-theme="light"] .inv-table-wrapper,
[data-theme="light"] .linkgen-table-wrap,
[data-theme="light"] .office-table-wrap,
[data-theme="light"] .remote-tooling-table-wrap,
[data-theme="light"] .sites-table-wrap,
[data-theme="light"] .spec-table-wrap,
[data-theme="light"] .status-table-wrapper,
[data-theme="light"] .taskmgr-procs-table-wrap,
[data-theme="light"] .tkt-table-wrapper,
[data-theme="light"] .matrix-wrap,
[data-theme="light"] .camshot-archive-wrap,
[data-theme="light"] .user-table-wrap {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

body:not(.dark) table,
body:not(.dark) .overview-table,
body:not(.dark) .dash-table,
body:not(.dark) .player-table,
body:not(.dark) .sites-table,
body:not(.dark) .admin-table,
body:not(.dark) .reports-table,
[data-theme="light"] table,
[data-theme="light"] .overview-table,
[data-theme="light"] .dash-table,
[data-theme="light"] .player-table,
[data-theme="light"] .sites-table,
[data-theme="light"] .admin-table {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body:not(.dark) thead th,
body:not(.dark) .overview-table thead th,
body:not(.dark) .dash-table thead th,
body:not(.dark) .player-table thead th,
body:not(.dark) .sites-table thead th,
body:not(.dark) .admin-table thead th,
body:not(.dark) .reports-table thead th,
[data-theme="light"] thead th {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
}

body:not(.dark) tbody td,
body:not(.dark) .overview-table tbody td,
body:not(.dark) .dash-table tbody td,
body:not(.dark) .player-table tbody td,
body:not(.dark) .sites-table tbody td,
body:not(.dark) .admin-table tbody td,
body:not(.dark) .reports-table tbody td,
[data-theme="light"] tbody td {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 14px 16px !important;
}

body:not(.dark) tbody tr:hover td,
body:not(.dark) tbody tr:hover,
body:not(.dark) .overview-table tbody tr:hover,
body:not(.dark) .dash-table tbody tr:hover,
body:not(.dark) .player-table tbody tr:hover,
body:not(.dark) .reports-table tbody tr:hover,
[data-theme="light"] tbody tr:hover td {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
}

/* 5. Filter Tabs, Chips, Segmented Controls, and Navigation Pills in Light Mode */
body:not(.dark) .tab,
body:not(.dark) .jobs-tab,
body:not(.dark) .office-tab,
body:not(.dark) .notification-tab,
body:not(.dark) .view-mode-btn,
body:not(.dark) .reports-filter-chip,
body:not(.dark) .tab-chip,
body:not(.dark) .profile-segmented-tab,
body:not(.dark) .profile-nav-tab,
body:not(.dark) .tkt-tab-btn,
body:not(.dark) .detail-tab,
body:not(.dark) .diag-tab,
body:not(.dark) .edit-unit-tab-btn,
body:not(.dark) .rp-notification-tab,
[data-theme="light"] .tab,
[data-theme="light"] .jobs-tab,
[data-theme="light"] .office-tab,
[data-theme="light"] .notification-tab,
[data-theme="light"] .reports-filter-chip {
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body:not(.dark) .filter-tabs .tab.active,
body:not(.dark) .tab.active,
body:not(.dark) .notification-tab.active,
body:not(.dark) .jobs-tab.active,
body:not(.dark) .office-tab.active,
body:not(.dark) .view-mode-btn.active,
body:not(.dark) .reports-filter-chip.active,
body:not(.dark) .tab-chip.active,
body:not(.dark) .profile-segmented-tab.active,
body:not(.dark) .profile-nav-tab.active,
body:not(.dark) .tkt-tab-btn.active,
body:not(.dark) .detail-tab.active,
body:not(.dark) .diag-tab.active,
body:not(.dark) .edit-unit-tab-btn.active,
body:not(.dark) .rp-notification-tab.active,
[data-theme="light"] .filter-tabs .tab.active,
[data-theme="light"] .tab.active,
[data-theme="light"] .notification-tab.active,
[data-theme="light"] .jobs-tab.active,
[data-theme="light"] .office-tab.active,
[data-theme="light"] .reports-filter-chip.active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* 6. Units Page Selected Player / Unit Item Styles in Light Mode */
body:not(.dark) .units-sidebar {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}

body:not(.dark) .device-selector-btn,
body:not(.dark) .device-tab.device-selector-btn,
[data-theme="light"] .device-selector-btn,
[data-theme="light"] .device-tab.device-selector-btn {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
}

body:not(.dark) .device-tab.active:not(.device-selector-btn),
body:not(.dark) .device-tab-active-pill,
body:not(.dark) .unit-primary-tab.active,
body:not(.dark) .control-tab.active,
body:not(.dark) .unit-tab-pill.active,
[data-theme="light"] .unit-primary-tab.active,
[data-theme="light"] .control-tab.active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body:not(.dark) .unit-card.active,
body:not(.dark) .device-card.active,
[data-theme="light"] .unit-card.active,
[data-theme="light"] .device-card.active {
  background-color: #eef2ff !important;
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
}

/* 7. Form Inputs, Selects, and Textareas in Light Mode */
body:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) select,
body:not(.dark) textarea,
body:not(.dark) .form-input,
body:not(.dark) .form-select,
body:not(.dark) .form-control,
body:not(.dark) .admin-input,
body:not(.dark) .forgot-input,
body:not(.dark) .login-v1-input,
body:not(.dark) .edit-unit-input,
body:not(.dark) .edit-unit-select,
body:not(.dark) .edit-unit-textarea,
body:not(.dark) .register-device-input,
body:not(.dark) .job-form-input,
body:not(.dark) .jobs-select-input,
body:not(.dark) .move-device-select,
body:not(.dark) .office-search-input,
body:not(.dark) .pref-select,
body:not(.dark) .scope-select,
body:not(.dark) .location-select,
body:not(.dark) .unit-table-select,
body:not(.dark) .bc-input-select,
body:not(.dark) .custom-input-group,
body:not(.dark) .profile-text-input,
body:not(.dark) .profile-input-with-badge,
body:not(.dark) .rp-input,
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-control,
[data-theme="light"] .admin-input {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
}

body:not(.dark) input::-moz-placeholder, body:not(.dark) textarea::-moz-placeholder, [data-theme="light"] input::-moz-placeholder, [data-theme="light"] textarea::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

body:not(.dark) input::placeholder,
body:not(.dark) textarea::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

body:not(.dark) input:focus,
body:not(.dark) select:focus,
body:not(.dark) textarea:focus,
body:not(.dark) .form-input:focus,
body:not(.dark) .form-select:focus,
body:not(.dark) .form-control:focus,
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none !important;
}

/* 8. Pagination Select & Number Buttons in Light Mode */
body:not(.dark) .pagination-select,
[data-theme="light"] .pagination-select {
  min-width: 76px !important;
  width: auto !important;
  height: 32px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  padding: 0 28px 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body:not(.dark) .pagination-select:hover,
[data-theme="light"] .pagination-select:hover {
  border-color: #94a3b8 !important;
}

body:not(.dark) .pagination-select:focus,
[data-theme="light"] .pagination-select:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

/* 8b. Filter Select Dropdowns with Clean Chevron (Global) */
body:not(.dark) .filter-select,
[data-theme="light"] .filter-select {
  height: 38px !important;
  min-height: 38px !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center !important;
  background-size: 12px 12px !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  padding: 0 32px 0 12px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body:not(.dark) .filter-select:hover,
[data-theme="light"] .filter-select:hover {
  border-color: #94a3b8 !important;
}

body:not(.dark) .filter-select:focus,
[data-theme="light"] .filter-select:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

.dark .filter-select,
[data-theme="dark"] .filter-select {
  height: 38px !important;
  min-height: 38px !important;
  background: #000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center !important;
  background-size: 12px 12px !important;
  border: 1px solid #2a3245 !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  padding: 0 32px 0 12px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.dark .filter-select:hover,
[data-theme="dark"] .filter-select:hover {
  border-color: #475569 !important;
}

.dark .filter-select:focus,
[data-theme="dark"] .filter-select:focus {
  border-color: #52525b !important;
  outline: none !important;
  box-shadow: none !important;
}

body:not(.dark) .units-page-buttons,
[data-theme="light"] .units-page-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body:not(.dark) .units-page-buttons button,
body:not(.dark) .pagination-btn,
body:not(.dark) .btn-page,
body:not(.dark) .pg-btn,
[data-theme="light"] .units-page-buttons button,
[data-theme="light"] .pagination-btn,
[data-theme="light"] .btn-page {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 8px !important;
  min-width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

body:not(.dark) .units-page-buttons button:hover:not(:disabled):not(.active),
body:not(.dark) .pagination-btn:hover:not(:disabled):not(.active),
body:not(.dark) .btn-page:hover:not(:disabled),
[data-theme="light"] .units-page-buttons button:hover:not(:disabled):not(.active),
[data-theme="light"] .pagination-btn:hover:not(:disabled):not(.active) {
  border-color: #94a3b8 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

body:not(.dark) .units-page-buttons button.active,
body:not(.dark) .pagination-btn.active,
[data-theme="light"] .units-page-buttons button.active,
[data-theme="light"] .pagination-btn.active {
  border: 1px solid #4f46e5 !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
  font-weight: 600 !important;
}

body:not(.dark) .units-page-buttons button:disabled,
body:not(.dark) .pagination-btn:disabled,
body:not(.dark) .btn-page:disabled,
[data-theme="light"] .units-page-buttons button:disabled,
[data-theme="light"] .pagination-btn:disabled {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 9. Interactive List Items, Session Rows, and Tiles in Light Mode */
body:not(.dark) .device-item,
body:not(.dark) .location-item,
body:not(.dark) .proc-row,
body:not(.dark) .rp-todo-item,
body:not(.dark) .rp-notification-item,
body:not(.dark) .rp-saved-link-item,
body:not(.dark) .rp-quick-tile,
body:not(.dark) .profile-session-row,
body:not(.dark) .permission-item,
body:not(.dark) .office-compact-row,
body:not(.dark) .tag-row,
[data-theme="light"] .device-item,
[data-theme="light"] .location-item,
[data-theme="light"] .proc-row,
[data-theme="light"] .rp-todo-item,
[data-theme="light"] .rp-notification-item,
[data-theme="light"] .rp-saved-link-item,
[data-theme="light"] .rp-quick-tile,
[data-theme="light"] .profile-session-row,
[data-theme="light"] .permission-item {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Ensure notification body text is purely inline text with no background, border, or shadow */
.rp-notification-body,
body:not(.dark) .rp-notification-body,
[data-theme="light"] .rp-notification-body,
.dark .rp-notification-body,
[data-theme="dark"] .rp-notification-body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.dark) .device-item:hover,
body:not(.dark) .location-item:hover,
body:not(.dark) .proc-row:hover,
body:not(.dark) .rp-todo-item:hover,
body:not(.dark) .rp-notification-item:hover,
body:not(.dark) .rp-saved-link-item:hover,
body:not(.dark) .rp-quick-tile:hover,
body:not(.dark) .profile-session-row:hover,
body:not(.dark) .permission-item:hover,
[data-theme="light"] .device-item:hover,
[data-theme="light"] .location-item:hover,
[data-theme="light"] .proc-row:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
}

/* 10. Buttons in Light Mode */
body:not(.dark) .btn-primary,
body:not(.dark) .primary-btn,
body:not(.dark) .btn-new-job,
body:not(.dark) .btn-add-office,
body:not(.dark) .inv-btn-primary,
body:not(.dark) .reports-btn-primary,
body:not(.dark) .sys-btn-refresh,
body:not(.dark) .analytics-export-btn,
body:not(.dark) .reports-gen-card-btn,
body:not(.dark) .profile-btn-primary,
body:not(.dark) .rc-btn-primary,
body:not(.dark) .rp-submit-btn,
body:not(.dark) .comp-drawer-save-btn,
body:not(.dark) .impersonation-exit-btn,
body:not(.dark) .custom-impersonate-submit,
body:not(.dark) .impersonation-submit-btn,
body:not(.dark) .move-device-submit-btn,
body:not(.dark) .confirm-action-btn,
body:not(.dark) .linkgen-select-all,
body:not(.dark) .linkgen-generate,
body:not(.dark) .ops-btn:not(.ghost),
body:not(.dark) form button[type="submit"]:not(.btn-danger),
[data-theme="light"] .btn-primary,
[data-theme="light"] .primary-btn,
[data-theme="light"] .linkgen-select-all,
[data-theme="light"] .linkgen-generate {
  background: #4f46e5 !important;
  background-color: #4f46e5 !important;
  border: 1px solid #4338ca !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2) !important;
}

body:not(.dark) .btn-primary:hover,
body:not(.dark) .primary-btn:hover,
body:not(.dark) .btn-new-job:hover,
body:not(.dark) .btn-add-office:hover,
body:not(.dark) .inv-btn-primary:hover,
body:not(.dark) .reports-btn-primary:hover,
body:not(.dark) .sys-btn-refresh:hover,
body:not(.dark) .analytics-export-btn:hover,
body:not(.dark) .reports-gen-card-btn:hover,
body:not(.dark) .profile-btn-primary:hover,
body:not(.dark) .rc-btn-primary:hover,
body:not(.dark) .rp-submit-btn:hover,
body:not(.dark) .comp-drawer-save-btn:hover,
body:not(.dark) .impersonation-exit-btn:hover,
body:not(.dark) .custom-impersonate-submit:hover,
body:not(.dark) .impersonation-submit-btn:hover,
body:not(.dark) .move-device-submit-btn:hover,
body:not(.dark) .confirm-action-btn:hover,
body:not(.dark) .linkgen-select-all:hover,
body:not(.dark) .linkgen-generate:hover:not(:disabled),
body:not(.dark) form button[type="submit"]:not(.btn-danger):hover,
[data-theme="light"] .btn-primary:hover {
  background: #4338ca !important;
  background-color: #4338ca !important;
  border-color: #3730a3 !important;
  color: #ffffff !important;
}

body:not(.dark) .btn-secondary,
body:not(.dark) .btn-outline,
body:not(.dark) .btn-ghost,
body:not(.dark) .overview-btn,
body:not(.dark) .overview-all-btn,
body:not(.dark) .sort-btn,
body:not(.dark) .filter-btn,
body:not(.dark) .view-btn,
body:not(.dark) .unit-type-btn,
body:not(.dark) .pref-pill-btn,
body:not(.dark) .pref-reset-btn,
body:not(.dark) .comp-drawer-cancel-btn,
body:not(.dark) .comp-drawer-close-btn,
body:not(.dark) .move-device-close-btn,
body:not(.dark) .impersonate-close-btn,
body:not(.dark) .modal-close,
body:not(.dark) .toast-close-btn,
body:not(.dark) .settings-drawer-close-btn,
body:not(.dark) .right-panel-close-btn,
body:not(.dark) .sidebar-collapse-toggle-btn,
body:not(.dark) .profile-btn-outline,
body:not(.dark) .bc-icon-btn,
body:not(.dark) .bc-preset-btn,
body:not(.dark) .taskmgr-btn,
body:not(.dark) .taskmgr-action-btn,
body:not(.dark) .retired-toggle-btn,
body:not(.dark) .link-btn,
body:not(.dark) .header-search-kbd,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

body:not(.dark) .btn-secondary:hover,
body:not(.dark) .btn-outline:hover,
body:not(.dark) .overview-btn:hover,
body:not(.dark) .overview-all-btn:hover,
body:not(.dark) .sort-btn:hover,
body:not(.dark) .filter-btn:hover,
body:not(.dark) .view-btn:hover,
body:not(.dark) .unit-type-btn:hover,
body:not(.dark) .pref-pill-btn:hover,
body:not(.dark) .pref-reset-btn:hover,
body:not(.dark) .comp-drawer-cancel-btn:hover,
body:not(.dark) .profile-btn-outline:hover,
body:not(.dark) .bc-icon-btn:hover,
body:not(.dark) .bc-preset-btn:hover,
body:not(.dark) .taskmgr-btn:hover,
body:not(.dark) .taskmgr-action-btn:hover,
[data-theme="light"] .btn-secondary:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* 11. Status Pills & Badges in Light Mode */
body:not(.dark) .status-pill.online,
body:not(.dark) .job-status-badge.active,
body:not(.dark) .status-badge.online,
body:not(.dark) .connected,
body:not(.dark) .is-online,
body:not(.dark) .toast-success,
body:not(.dark) .sev-success,
[data-theme="light"] .status-pill.online,
[data-theme="light"] .job-status-badge.active {
  background: #ecfdf5 !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

body:not(.dark) .status-pill.offline,
body:not(.dark) .job-status-badge.inactive,
body:not(.dark) .status-badge.offline,
[data-theme="light"] .status-pill.offline,
[data-theme="light"] .job-status-badge.inactive {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

body:not(.dark) .status-pill.warning,
body:not(.dark) .status-badge.warning,
[data-theme="light"] .status-pill.warning {
  background: #fefce8 !important;
  background-color: #fefce8 !important;
  color: #a16207 !important;
  border: 1px solid #fef08a !important;
}

body:not(.dark) .status-pill.danger,
body:not(.dark) .status-badge.danger,
[data-theme="light"] .status-pill.danger {
  background: #fef2f2 !important;
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* 12. Typography & Text Elements in Light Mode */
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) h5,
body:not(.dark) h6,
body:not(.dark) .section-title,
body:not(.dark) .page-title,
body:not(.dark) .dash-card-title,
body:not(.dark) .profile-panel-title,
body:not(.dark) .header-popover-title,
body:not(.dark) .jobs-title,
body:not(.dark) .job-title,
body:not(.dark) .units-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body:not(.dark) p,
body:not(.dark) .section-subtitle,
body:not(.dark) .page-subtitle,
body:not(.dark) .dash-sub,
body:not(.dark) .muted,
body:not(.dark) .text-muted,
body:not(.dark) .profile-email-text,
body:not(.dark) label,
body:not(.dark) .filter-label,
[data-theme="light"] p,
[data-theme="light"] label {
  color: #475569 !important;
}

/* 13. Deep Comprehensive Light Theme Rules for Every Div, Card, Wrapper & Interactive Element */

/* Batch Commands, Activity, Audit, and Agent Cards & Panels in Light Mode */
body:not(.dark) .bc-card-configuration,
body:not(.dark) .bc-card-units-summary,
body:not(.dark) .bc-cmd-card,
body:not(.dark) .bc-group-row,
body:not(.dark) .bc-group-units-sublist,
body:not(.dark) .bc-hero-header,
body:not(.dark) .activity-panel,
body:not(.dark) .activity-entry,
body:not(.dark) .activity-list,
body:not(.dark) .audit-card,
body:not(.dark) .audit-row,
body:not(.dark) .api-key-item,
body:not(.dark) .admin-card-header,
body:not(.dark) .card-list,
body:not(.dark) .impersonation-active-banner,
body:not(.dark) .custom-impersonate-box,
body:not(.dark) .impersonate-active-alert,
body:not(.dark) .auth-card-container,
body:not(.dark) .auth-feature-card,
body:not(.dark) .auth-viewport,
body:not(.dark) .login-v1-viewport,
body:not(.dark) .login-v1-canvas,
body:not(.dark) .login-v1-card,
body:not(.dark) .forgot-left,
body:not(.dark) .forgot-right,
[data-theme="light"] .bc-card-configuration,
[data-theme="light"] .bc-card-units-summary,
[data-theme="light"] .bc-cmd-card,
[data-theme="light"] .bc-group-row,
[data-theme="light"] .bc-group-units-sublist,
[data-theme="light"] .bc-hero-header,
[data-theme="light"] .activity-panel,
[data-theme="light"] .audit-card,
[data-theme="light"] .audit-row,
[data-theme="light"] .api-key-item,
[data-theme="light"] .impersonation-active-banner,
[data-theme="light"] .auth-card-container,
[data-theme="light"] .login-v1-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Dashboard Map Shell, Tools & Summary Strips in Light Mode */
body:not(.dark) .dash-map-shell,
body:not(.dark) .dash-map-summary-strip,
body:not(.dark) .dash-map-tools,
body:not(.dark) .sites-map-shell,
body:not(.dark) .sites-map-empty,
[data-theme="light"] .dash-map-shell,
[data-theme="light"] .dash-map-summary-strip,
[data-theme="light"] .sites-map-shell {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 12px !important;
}

/* Diagnostics UI Components in Light Mode */
body:not(.dark) .diag-ui-chart,
body:not(.dark) .diag-ui-chart-wrap,
body:not(.dark) .diag-ui-event,
body:not(.dark) .diag-ui-events,
body:not(.dark) .diag-ui-metric,
body:not(.dark) .diag-ui-metric-icon,
body:not(.dark) .diag-ui-metrics,
body:not(.dark) .telemetry-history,
body:not(.dark) .telemetry-chart,
body:not(.dark) .telemetry-chart-wrap,
body:not(.dark) .telemetry-metric,
[data-theme="light"] .diag-ui-chart-wrap,
[data-theme="light"] .diag-ui-event,
[data-theme="light"] .diag-ui-metric,
[data-theme="light"] .telemetry-chart-wrap {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
}

/* Task Manager Sidebars, Toolbars & GPU quad in Light Mode */
body:not(.dark) .taskmgr-sidebar,
body:not(.dark) .taskmgr-sidebar-item,
body:not(.dark) .taskmgr-procs-toolbar,
body:not(.dark) .taskmgr-top-bar,
body:not(.dark) .job-detail-toolbar,
body:not(.dark) .media-viewer-toolbar,
body:not(.dark) .live-stream-modal-toolbar,
body:not(.dark) .live-stream-toolbar-row,
body:not(.dark) .user-toolbar,
body:not(.dark) .filter-actions,
body:not(.dark) .header-actions-group,
body:not(.dark) .dashboard-topbar-right,
[data-theme="light"] .taskmgr-sidebar,
[data-theme="light"] .taskmgr-procs-toolbar,
[data-theme="light"] .job-detail-toolbar,
[data-theme="light"] .media-viewer-toolbar {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body:not(.dark) .taskmgr-sidebar-item:hover,
body:not(.dark) .taskmgr-sidebar-item.active,
[data-theme="light"] .taskmgr-sidebar-item:hover,
[data-theme="light"] .taskmgr-sidebar-item.active {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

/* Chips, Tags & Badges in Light Mode */
body:not(.dark) .count-badge,
body:not(.dark) .screen-badge,
body:not(.dark) .os-chip,
body:not(.dark) .office-coords-chip,
body:not(.dark) .office-infra-tag,
body:not(.dark) .bc-unit-badge-chip,
body:not(.dark) .unit-timestamp-badge,
body:not(.dark) .download-version-badge,
body:not(.dark) .profile-tab-badge,
body:not(.dark) .profile-tab-count-badge,
body:not(.dark) .quick-link-badge,
body:not(.dark) .nav-beta-badge,
body:not(.dark) .datrashell-badge,
body:not(.dark) .datrashell-preset-chip,
body:not(.dark) .units-badge,
body:not(.dark) .bc-chip,
body:not(.dark) .bc-cmd-pill,
body:not(.dark) .auth-chip,
body:not(.dark) .auth-hero-pill-badge,
body:not(.dark) .live-stream-help-pill,
[data-theme="light"] .count-badge,
[data-theme="light"] .screen-badge,
[data-theme="light"] .os-chip,
[data-theme="light"] .bc-unit-badge-chip,
[data-theme="light"] .units-badge {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 6px !important;
}

/* Secondary Action Buttons across Modules in Light Mode */
body:not(.dark) .action-btn,
body:not(.dark) .activate-player-btn,
body:not(.dark) .active-btn,
body:not(.dark) .btn-capture,
body:not(.dark) .btn-job-action,
body:not(.dark) .btn-job-icon,
body:not(.dark) .btn-post,
body:not(.dark) .btn-update,
body:not(.dark) .control-btn,
body:not(.dark) .edit-device-btn,
body:not(.dark) .health-refresh-btn,
body:not(.dark) .system-update-btn,
body:not(.dark) .terminal-btn,
body:not(.dark) .theme-card-btn,
body:not(.dark) .tkt-action-btn,
body:not(.dark) .units-new-unit-btn,
body:not(.dark) .units-quickbar-btn,
body:not(.dark) .office-btn-icon,
body:not(.dark) .office-view-btn,
body:not(.dark) .player-copy-btn,
body:not(.dark) .rp-action-icon-btn,
body:not(.dark) .rp-logout-btn,
body:not(.dark) .rp-menu-btn,
body:not(.dark) .reply-submit-btn,
body:not(.dark) .send-btn,
body:not(.dark) .sites-search-go,
body:not(.dark) .drawer-btn-edit,
body:not(.dark) .drawer-btn-impersonate,
[data-theme="light"] .action-btn,
[data-theme="light"] .btn-capture,
[data-theme="light"] .units-new-unit-btn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

body:not(.dark) .action-btn:hover,
body:not(.dark) .activate-player-btn:hover,
body:not(.dark) .btn-capture:hover,
body:not(.dark) .btn-job-action:hover,
body:not(.dark) .btn-job-icon:hover,
body:not(.dark) .control-btn:hover,
body:not(.dark) .edit-device-btn:hover,
body:not(.dark) .health-refresh-btn:hover,
body:not(.dark) .system-update-btn:hover,
body:not(.dark) .terminal-btn:hover,
body:not(.dark) .units-new-unit-btn:hover,
body:not(.dark) .units-quickbar-btn:hover,
body:not(.dark) .office-view-btn:hover,
body:not(.dark) .rp-action-icon-btn:hover,
[data-theme="light"] .action-btn:hover,
[data-theme="light"] .units-new-unit-btn:hover {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* DatraShell & Terminal in Light Mode */
body:not(.dark) .datrashell-container,
body:not(.dark) .datrashell-terminal-body,
body:not(.dark) .terminal-window,
body:not(.dark) .datrashell-script-textarea,
body:not(.dark) .comp-drawer-code-area,
[data-theme="light"] .datrashell-container,
[data-theme="light"] .datrashell-terminal-body,
[data-theme="light"] .terminal-window {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
}

body:not(.dark) .datrashell-header,
body:not(.dark) .datrashell-presets-bar,
body:not(.dark) .datrashell-input-bar,
[data-theme="light"] .datrashell-header,
[data-theme="light"] .datrashell-presets-bar {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Skeleton Loaders in Light Mode */
body:not(.dark) .datra-skeleton-card,
body:not(.dark) .datra-skeleton-table-header,
body:not(.dark) .datra-skeleton-table-row,
body:not(.dark) .skeleton-card,
body:not(.dark) .skeleton-body,
[data-theme="light"] .datra-skeleton-card,
[data-theme="light"] .skeleton-card {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

/* Placeholders & Media Canvas in Light Mode */
body:not(.dark) .livecam-placeholder,
body:not(.dark) .liveview-placeholder,
body:not(.dark) .screenshot-placeholder,
body:not(.dark) .image-placeholder-samples,
body:not(.dark) .screenshot-canvas-wrapper,
body:not(.dark) .diag-empty,
[data-theme="light"] .livecam-placeholder,
[data-theme="light"] .liveview-placeholder,
[data-theme="light"] .screenshot-placeholder {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px dashed #cbd5e1 !important;
  color: #64748b !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & HEADINGS
   ========================================================================== */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .player-header h1,
.dark .admin-header h2,
.dark .section-title,
.dark .page-title,
.dark .dash-card-title,
.dark .profile-panel-title,
.dark .header-popover-title,
.dark .settings-header span,
.dark .jobs-title,
.dark .job-title,
.dark .units-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark p,
.dark .player-header p,
.dark .admin-header p,
.dark .section-subtitle,
.dark .page-subtitle,
.dark .dash-sub,
.dark .muted,
.dark .text-muted,
.dark .profile-email-text,
.dark .header-item-sub,
.dark .field label,
.dark label,
.dark .filter-label {
  color: #949aa6 !important;
}

/* ==========================================================================
   TOP APP HEADER
   ========================================================================== */
.dark .app-header,
[data-theme="dark"] .app-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

body:not(.dark) .app-header,
[data-theme="light"] .app-header {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* Header Search - Unified Single Search Text Box */
.header-search {
  display: flex !important;
  align-items: center !important;
  background-color: #f1f5f9 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 0 10px 0 12px !important;
  height: 38px !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 1.25rem !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.dark .header-search,
[data-theme="dark"] .header-search {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
}

.dark .header-search:hover,
.dark .header-search:focus-within,
[data-theme="dark"] .header-search:hover,
[data-theme="dark"] .header-search:focus-within {
  border-color: #3b3b44 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  box-shadow: none !important;
}

body:not(.dark) .header-search:hover,
body:not(.dark) .header-search:focus-within,
[data-theme="light"] .header-search:hover,
[data-theme="light"] .header-search:focus-within {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.header-search-icon,
.dark .header-search-icon {
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header-search .search-input,
.dark .header-search .search-input,
.header-search input,
.dark .header-search input,
.header-search input:focus,
.dark .header-search input:focus,
.header-search .search-input:focus,
.dark .header-search .search-input:focus {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: normal !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.dark .header-search .search-input,
.dark .header-search input,
[data-theme="dark"] .header-search .search-input,
[data-theme="dark"] .header-search input {
  color: #f8fafc !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.header-search .search-input::-moz-placeholder, .dark .header-search .search-input::-moz-placeholder {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  opacity: 1 !important;
}

.header-search .search-input::placeholder,
.dark .header-search .search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.875rem !important;
  opacity: 1 !important;
}

.header-search-kbd,
.dark .header-search-kbd {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  padding: 0 7px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #64748b !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  pointer-events: none !important;
}

.dark .header-search-kbd,
[data-theme="dark"] .header-search-kbd {
  background: #12141a !important;
  border: 1px solid #2a3245 !important;
  color: #94a3b8 !important;
}

.dark .header-user {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px 0 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  transition: all 0.15s ease !important;
}

.dark .header-user:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
}

.dark .user-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.dark .user-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.dark .user-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dark .user-email {
  color: #949aa6 !important;
  font-size: 0.6875rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dark .user-chevron {
  color: #606674 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

.dark .icon-btn {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #949aa6 !important;
  border-radius: 10px !important;
}

.dark .icon-btn:hover {
  background-color: #22242b !important;
  color: #ffffff !important;
  border-color: #353842 !important;
}

.dark .icon-btn.active {
  background-color: #1e222e !important;
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  border-color: #333a4c !important;
  outline: none !important;
}

.dark .icon-btn.active svg,
.dark .icon-btn.active .icon-sm {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Breadcrumbs */
.dark .breadcrumb-bar {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .breadcrumb {
  color: #949aa6 !important;
}

.dark .breadcrumb-item {
  color: #5d636f !important;
}

.dark .breadcrumb-item:last-child {
  color: #ffffff !important;
}

.dark .breadcrumb-sep {
  color: #40444f !important;
}

.dark .breadcrumb-refresh-btn {
  background-color: #000000 !important;
  border: 1px solid #25272e !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
}

.dark .breadcrumb-refresh-btn:hover {
  background-color: #22242b !important;
  color: #ffffff !important;
}

/* ==========================================================================
   SIDEBAR NAVIGATION (DYNAMIC THEME LEFT PANEL WITH ADAPTIVE COLORS)
   ========================================================================== */
.dark .sidebar,
.dark aside.sidebar,
.dark .app .sidebar,
:root.dark .sidebar,
[data-theme="dark"] .sidebar {
  background-color: #000000 !important;
  background: #000000 !important;
  border-right: 1px solid #1c1c22 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

body:not(.dark) .sidebar,
body:not(.dark) aside.sidebar,
body:not(.dark) .app .sidebar,
:root:not(.dark) .sidebar,
[data-theme="light"] .sidebar {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dark .sidebar-header,
[data-theme="dark"] .sidebar-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #1c1c22 !important;
}

body:not(.dark) .sidebar-header,
[data-theme="light"] .sidebar-header {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.dark .sidebar-footer,
[data-theme="dark"] .sidebar-footer {
  background-color: #000000 !important;
  background: #000000 !important;
  border-top: 1px solid #1c1c22 !important;
  color: #a1a1aa !important;
}

body:not(.dark) .sidebar-footer,
[data-theme="light"] .sidebar-footer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.dark .sidebar-version,
[data-theme="dark"] .sidebar-version {
  color: #71717a !important;
}

body:not(.dark) .sidebar-version,
[data-theme="light"] .sidebar-version {
  color: #94a3b8 !important;
}

/* Nav Section Titles (CORE & MONITORING, AUTOMATION AND CONTROL, PLATFORM) */
.dark .nav-section-title,
[data-theme="dark"] .nav-section-title {
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 0.9 !important;
}

.dark .nav-section-title:hover,
[data-theme="dark"] .nav-section-title:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}

.dark .nav-section-title svg,
.dark .nav-section-title span,
[data-theme="dark"] .nav-section-title svg,
[data-theme="dark"] .nav-section-title span {
  color: #ffffff !important;
}

body:not(.dark) .nav-section-title,
[data-theme="light"] .nav-section-title {
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body:not(.dark) .nav-section-title:hover,
[data-theme="light"] .nav-section-title:hover {
  color: #0f172a !important;
}

body:not(.dark) .nav-section-title svg,
body:not(.dark) .nav-section-title span,
[data-theme="light"] .nav-section-title svg,
[data-theme="light"] .nav-section-title span {
  color: #64748b !important;
}

/* Standard Nav Item - Icon color always matches text color */
.dark .sidebar .nav-item,
.dark .sidebar .nav-item:visited,
.dark .nav-item,
[data-theme="dark"] .nav-item {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.dark) .sidebar .nav-item,
body:not(.dark) .sidebar .nav-item:visited,
body:not(.dark) .nav-item,
[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .nav-item {
  color: #334155 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dark .sidebar .nav-item .nav-label,
.dark .nav-item .nav-label,
[data-theme="dark"] .nav-label {
  color: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item .nav-label,
body:not(.dark) .nav-item .nav-label,
[data-theme="light"] .nav-label {
  color: #334155 !important;
}

.dark .sidebar .nav-item .nav-icon,
.dark .nav-item .nav-icon,
[data-theme="dark"] .nav-icon,
.dark .sidebar .nav-item .nav-icon svg,
.dark .nav-item .nav-icon svg,
[data-theme="dark"] .nav-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item .nav-icon,
body:not(.dark) .nav-item .nav-icon,
[data-theme="light"] .nav-icon,
body:not(.dark) .sidebar .nav-item .nav-icon svg,
body:not(.dark) .nav-item .nav-icon svg,
[data-theme="light"] .nav-icon svg {
  color: #64748b !important;
  stroke: #64748b !important;
}

/* Hover Navigation Item - Icon color matches text color */
.dark .sidebar .nav-item:hover,
.dark .nav-item:hover,
[data-theme="dark"] .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item:hover,
body:not(.dark) .nav-item:hover,
[data-theme="light"] .sidebar .nav-item:hover,
[data-theme="light"] .nav-item:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.dark .sidebar .nav-item:hover .nav-label,
.dark .nav-item:hover .nav-label,
[data-theme="dark"] .nav-item:hover .nav-label {
  color: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item:hover .nav-label,
body:not(.dark) .nav-item:hover .nav-label,
[data-theme="light"] .nav-item:hover .nav-label {
  color: #0f172a !important;
}

.dark .sidebar .nav-item:hover .nav-icon,
.dark .nav-item:hover .nav-icon,
[data-theme="dark"] .nav-item:hover .nav-icon,
.dark .sidebar .nav-item:hover .nav-icon svg,
.dark .nav-item:hover .nav-icon svg,
[data-theme="dark"] .nav-item:hover .nav-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item:hover .nav-icon,
body:not(.dark) .nav-item:hover .nav-icon,
[data-theme="light"] .nav-item:hover .nav-icon,
body:not(.dark) .sidebar .nav-item:hover .nav-icon svg,
body:not(.dark) .nav-item:hover .nav-icon svg,
[data-theme="light"] .nav-item:hover .nav-icon svg {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

/* Active Navigation Item */
.dark .sidebar .nav-item.active,
.dark .nav-item.active,
[data-theme="dark"] .nav-item.active {
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

body:not(.dark) .sidebar .nav-item.active,
body:not(.dark) .nav-item.active,
[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .nav-item.active {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.dark .sidebar .nav-item.active .nav-label,
.dark .nav-item.active .nav-label,
[data-theme="dark"] .nav-item.active .nav-label {
  color: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item.active .nav-label,
body:not(.dark) .nav-item.active .nav-label,
[data-theme="light"] .nav-item.active .nav-label {
  color: #4338ca !important;
}

.dark .sidebar .nav-item.active .nav-icon,
.dark .nav-item.active .nav-icon,
[data-theme="dark"] .nav-item.active .nav-icon,
.dark .sidebar .nav-item.active .nav-icon svg,
.dark .nav-item.active .nav-icon svg,
[data-theme="dark"] .nav-item.active .nav-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

body:not(.dark) .sidebar .nav-item.active .nav-icon,
body:not(.dark) .nav-item.active .nav-icon,
[data-theme="light"] .nav-item.active .nav-icon,
body:not(.dark) .sidebar .nav-item.active .nav-icon svg,
body:not(.dark) .nav-item.active .nav-icon svg,
[data-theme="light"] .nav-item.active .nav-icon svg {
  color: #4338ca !important;
  stroke: #4338ca !important;
}

.dark .nav-item.active::before,
.dark .sidebar .nav-item.active::before {
  display: none !important;
}

.dark .nav-beta-badge {
  background-color: #241838 !important;
  color: #a78bfa !important;
  border: 1px solid #4c1d95 !important;
}

.dark .nav-chevron,
.dark .nav-chevron-arrow {
  color: #71717a !important;
}

.dark .nav-subitems {
  border-left: 2px solid #232a3c !important;
}

.dark .nav-subitem {
  color: #94a3b8 !important;
}

.dark .nav-subitem:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.dark .nav-subitem.active {
  color: #ffffff !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .nav-subitem.active .nav-subitem-bullet {
  background-color: #ffffff !important;
}

/* ==========================================================================
   COLLAPSED SIDEBAR - ENHANCED ICON SIZING (24px)
   ========================================================================== */
.sidebar-collapsed .nav-item,
.app.sidebar-collapsed .nav-item {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.sidebar-collapsed .nav-icon,
.app.sidebar-collapsed .nav-icon,
.sidebar-collapsed .nav-item .nav-icon,
.app.sidebar-collapsed .nav-item .nav-icon,
.sidebar-collapsed .nav-icon svg,
.app.sidebar-collapsed .nav-icon svg,
.sidebar-collapsed .nav-item .nav-icon svg,
.app.sidebar-collapsed .nav-item .nav-icon svg,
.dark .sidebar-collapsed .nav-icon,
.dark .app.sidebar-collapsed .nav-icon,
.dark .sidebar-collapsed .nav-item .nav-icon,
.dark .app.sidebar-collapsed .nav-item .nav-icon,
.dark .sidebar-collapsed .nav-icon svg,
.dark .app.sidebar-collapsed .nav-icon svg,
.dark .sidebar-collapsed .nav-item .nav-icon svg,
.dark .app.sidebar-collapsed .nav-item .nav-icon svg,
[data-theme="dark"] .sidebar-collapsed .nav-icon,
[data-theme="dark"] .app.sidebar-collapsed .nav-icon,
[data-theme="dark"] .sidebar-collapsed .nav-item .nav-icon,
[data-theme="dark"] .app.sidebar-collapsed .nav-item .nav-icon,
[data-theme="dark"] .sidebar-collapsed .nav-icon svg,
[data-theme="dark"] .app.sidebar-collapsed .nav-icon svg,
[data-theme="dark"] .sidebar-collapsed .nav-item .nav-icon svg,
[data-theme="dark"] .app.sidebar-collapsed .nav-item .nav-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.sidebar-collapsed .nav-chevron,
.app.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .nav-chevron-arrow,
.app.sidebar-collapsed .nav-chevron-arrow,
.sidebar-collapsed .nav-badge-beta,
.app.sidebar-collapsed .nav-badge-beta {
  display: none !important;
}

/* ==========================================================================
   BUTTONS & FORM CONTROLS
   ========================================================================== */
.dark .btn {
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease-in-out !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .btn-primary {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .btn-primary:hover {
  background-color: #282e3f !important;
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}


.dark .btn-danger {
  background-color: #2b1114 !important;
  border-color: #7f1d1d !important;
}

.dark .btn-danger:hover {
  background-color: #3e161a !important;
}


.dark input[type="text"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark select,
.dark textarea,
.dark .field input,
.dark .field select,
.dark .field textarea,
.dark .group-select,
.dark .location-select,
.dark .pagination-select {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #3b3b44 !important;
  background-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark ::-moz-placeholder {
  color: #5d636f !important;
}

.dark ::placeholder {
  color: #5d636f !important;
}

/* ==========================================================================
   PAGE HEADER CARDS & HERO HEADERS (STANDARDIZED ACROSS ALL PAGES)
   ========================================================================== */
.dark .admin-hero,
.dark .hero-card,
.dark .units-header-card,
.dark .jobs-header-card,
.dark .page-hero-card,
.dark .page-header-card,
.dark .player-main-header,
.dark .jobs-hero-header,
.dark .profile-hero-header,
.dark .profile-header-card,
.dark .office-hero,
.dark .tkt-header-strip,
.dark .inv-header-strip,
.dark .sys-header-strip,
.dark .analytics-header-strip,
.dark .reports-hub-header,
.dark .dashboard-header,
.dark .rc-header,
.dark .control-header-card,
[data-theme="dark"] .admin-hero,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .units-header-card,
[data-theme="dark"] .jobs-header-card,
[data-theme="dark"] .page-hero-card,
[data-theme="dark"] .page-header-card,
[data-theme="dark"] .player-main-header,
[data-theme="dark"] .jobs-hero-header,
[data-theme="dark"] .profile-hero-header,
[data-theme="dark"] .profile-header-card,
[data-theme="dark"] .office-hero,
[data-theme="dark"] .tkt-header-strip,
[data-theme="dark"] .inv-header-strip,
[data-theme="dark"] .sys-header-strip,
[data-theme="dark"] .analytics-header-strip,
[data-theme="dark"] .reports-hub-header,
[data-theme="dark"] .dashboard-header,
[data-theme="dark"] .rc-header,
[data-theme="dark"] .control-header-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  color: var(--theme-text-primary, #ffffff) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  width: 100% !important;
}

body:not(.dark) .admin-hero,
body:not(.dark) .hero-card,
body:not(.dark) .units-header-card,
body:not(.dark) .jobs-header-card,
body:not(.dark) .page-hero-card,
body:not(.dark) .page-header-card,
body:not(.dark) .player-main-header,
body:not(.dark) .jobs-hero-header,
body:not(.dark) .profile-hero-header,
body:not(.dark) .profile-header-card,
body:not(.dark) .office-hero,
body:not(.dark) .tkt-header-strip,
body:not(.dark) .inv-header-strip,
body:not(.dark) .sys-header-strip,
body:not(.dark) .analytics-header-strip,
body:not(.dark) .reports-hub-header,
body:not(.dark) .dashboard-header,
body:not(.dark) .rc-header,
body:not(.dark) .control-header-card,
[data-theme="light"] .admin-hero,
[data-theme="light"] .hero-card,
[data-theme="light"] .units-header-card,
[data-theme="light"] .jobs-header-card,
[data-theme="light"] .page-hero-card,
[data-theme="light"] .page-header-card,
[data-theme="light"] .player-main-header,
[data-theme="light"] .jobs-hero-header,
[data-theme="light"] .profile-hero-header,
[data-theme="light"] .profile-header-card,
[data-theme="light"] .office-hero,
[data-theme="light"] .tkt-header-strip,
[data-theme="light"] .inv-header-strip,
[data-theme="light"] .sys-header-strip,
[data-theme="light"] .analytics-header-strip,
[data-theme="light"] .reports-hub-header,
[data-theme="light"] .dashboard-header,
[data-theme="light"] .rc-header,
[data-theme="light"] .control-header-card {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  width: 100% !important;
}

/* Ensure flex layouts for page header cards */
.page-header-card,
.player-main-header,
.office-hero,
.tkt-header-strip,
.inv-header-strip,
.sys-header-strip,
.analytics-header-strip,
.reports-hub-header,
.jobs-hero-header,
.profile-hero-header,
.admin-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* Fix nested hero-card inside admin-hero */
.admin-hero .hero-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Standardized Page Header Headings */
.player-main-header h1,
.page-header-card h1,
.office-hero-title h2,
.tkt-header-title,
.inv-header-title,
.sys-header-title,
.analytics-header-title,
.reports-hub-title,
.jobs-hero-left h1,
.profile-hero-left h1,
.rc-header h1,
.dashboard-header h1,
.admin-hero h2,
.hero-card h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--theme-text-primary, #ffffff) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Standardized Page Header Subtitles */
.player-main-header p,
.page-header-card p,
.office-hero-title p,
.tkt-header-subtitle,
.inv-header-subtitle,
.sys-header-subtitle,
.analytics-header-subtitle,
.reports-hub-subtitle,
.jobs-hero-left p,
.profile-header-sub,
.dashboard-header p,
.admin-hero p,
.hero-card p {
  font-size: 13px !important;
  color: var(--theme-text-secondary, #949aa6) !important;
  margin: 4px 0 0 0 !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   GLOBAL PAGE HEADER STATS / KPIS
   Clean, centered, transparent, no outline/box/card wrapper
   ========================================================================== */
.jobs-hero-right,
.player-main-header .jobs-hero-right {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

.jobs-hero-stat,
.profile-hero-stat,
.bc-hero-metric,
.hero-stats .stat,
.hero-stat-item,
.office-compact-stat-item,
.player-main-header .hero-stats .stat,
.player-main-header .jobs-hero-stat,
.player-main-header .profile-hero-stat,
.player-main-header .bc-hero-metric,
body:not(.dark) .jobs-hero-stat,
[data-theme="light"] .jobs-hero-stat,
.dark .jobs-hero-stat,
[data-theme="dark"] .jobs-hero-stat,
body:not(.dark) .profile-hero-stat,
[data-theme="light"] .profile-hero-stat,
.dark .profile-hero-stat,
[data-theme="dark"] .profile-hero-stat,
body:not(.dark) .bc-hero-metric,
[data-theme="light"] .bc-hero-metric,
.dark .bc-hero-metric,
[data-theme="dark"] .bc-hero-metric,
body:not(.dark) .hero-stats .stat,
[data-theme="light"] .hero-stats .stat,
.dark .hero-stats .stat,
[data-theme="dark"] .hero-stats .stat,
body:not(.dark) .hero-stat-item,
[data-theme="light"] .hero-stat-item,
.dark .hero-stat-item,
[data-theme="dark"] .hero-stat-item,
body:not(.dark) .office-compact-stat-item,
[data-theme="light"] .office-compact-stat-item,
.dark .office-compact-stat-item,
[data-theme="dark"] .office-compact-stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 8px !important;
  min-width: unset !important;
}

.jobs-hero-stat .val,
.profile-hero-stat .val,
.bc-hero-metric .bc-hero-metric-val,
.hero-stats .stat strong,
.hero-stat-item strong,
.office-compact-stat-item strong {
  display: block !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.jobs-hero-stat .lbl,
.profile-hero-stat .lbl,
.bc-hero-metric .bc-hero-metric-lbl,
.hero-stats .stat span,
.hero-stat-item span,
.office-compact-stat-item .lbl {
  display: block !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}

body:not(.dark) .jobs-hero-stat .val,
[data-theme="light"] .jobs-hero-stat .val,
body:not(.dark) .profile-hero-stat .val,
[data-theme="light"] .profile-hero-stat .val,
body:not(.dark) .bc-hero-metric .bc-hero-metric-val,
[data-theme="light"] .bc-hero-metric .bc-hero-metric-val,
body:not(.dark) .hero-stats .stat strong,
[data-theme="light"] .hero-stats .stat strong,
body:not(.dark) .hero-stat-item strong,
[data-theme="light"] .hero-stat-item strong,
body:not(.dark) .office-compact-stat-item strong,
[data-theme="light"] .office-compact-stat-item strong {
  color: #0f172a !important;
}

body:not(.dark) .jobs-hero-stat .lbl,
[data-theme="light"] .jobs-hero-stat .lbl,
body:not(.dark) .profile-hero-stat .lbl,
[data-theme="light"] .profile-hero-stat .lbl,
body:not(.dark) .bc-hero-metric .bc-hero-metric-lbl,
[data-theme="light"] .bc-hero-metric .bc-hero-metric-lbl,
body:not(.dark) .hero-stats .stat span,
[data-theme="light"] .hero-stats .stat span,
body:not(.dark) .hero-stat-item span,
[data-theme="light"] .hero-stat-item span,
body:not(.dark) .office-compact-stat-item .lbl,
[data-theme="light"] .office-compact-stat-item .lbl {
  color: #64748b !important;
}

.dark .jobs-hero-stat .val,
[data-theme="dark"] .jobs-hero-stat .val,
.dark .profile-hero-stat .val,
[data-theme="dark"] .profile-hero-stat .val,
.dark .bc-hero-metric .bc-hero-metric-val,
[data-theme="dark"] .bc-hero-metric .bc-hero-metric-val,
.dark .hero-stats .stat strong,
[data-theme="dark"] .hero-stats .stat strong,
.dark .hero-stat-item strong,
[data-theme="dark"] .hero-stat-item strong,
.dark .office-compact-stat-item strong,
[data-theme="dark"] .office-compact-stat-item strong {
  color: #f8fafc !important;
}

.dark .jobs-hero-stat .lbl,
[data-theme="dark"] .jobs-hero-stat .lbl,
.dark .profile-hero-stat .lbl,
[data-theme="dark"] .profile-hero-stat .lbl,
.dark .bc-hero-metric .bc-hero-metric-lbl,
[data-theme="dark"] .bc-hero-metric .bc-hero-metric-lbl,
.dark .hero-stats .stat span,
[data-theme="dark"] .hero-stats .stat span,
.dark .hero-stat-item span,
[data-theme="dark"] .hero-stat-item span,
.dark .office-compact-stat-item .lbl,
[data-theme="dark"] .office-compact-stat-item .lbl {
  color: #94a3b8 !important;
}

/* ==========================================================================
   KPI SUMMARY CARDS (MATCHING SAMPLE IMAGE 1)
   ========================================================================== */
.dash-kpi-grid,
body:not(.dark) .dash-kpi-grid,
[data-theme="light"] .dash-kpi-grid,
.dark .dash-kpi-grid,
[data-theme="dark"] .dash-kpi-grid,
.dark .player-stats,
[data-theme="dark"] .player-stats {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 14px !important;
}

.dark .dash-kpi-card,
.dark .player-stat,
.dark .stat-card,
.dark .dash-metric-card,
[data-theme="dark"] .dash-kpi-card,
[data-theme="dark"] .player-stat,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-metric-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid var(--theme-border, #2a3245) !important;
  border-radius: 14px !important;
  color: var(--theme-text-primary, #F4F4F5) !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.dark .dash-kpi-card:hover,
.dark .player-stat:hover,
[data-theme="dark"] .dash-kpi-card:hover,
[data-theme="dark"] .player-stat:hover {
  border-color: #3b3b44 !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.dark .dash-kpi-value,
.dark .player-stat strong {
  color: #F4F4F5 !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
}

.dark .dash-kpi-label,
.dark .player-stat span {
  color: #949AA6 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* KPI icon badge boxes - unified brand violet globally */
.dark .dash-kpi-icon,
[data-theme="dark"] .dash-kpi-icon,
.dark .dash-kpi-icon.wifi,
.dark .dash-kpi-icon.online,
.dark .dash-kpi-icon.offline,
.dark .dash-kpi-icon.total,
[data-theme="dark"] .dash-kpi-icon.wifi,
[data-theme="dark"] .dash-kpi-icon.online,
[data-theme="dark"] .dash-kpi-icon.offline,
[data-theme="dark"] .dash-kpi-icon.total {
  border-radius: 12px !important;
  background: #1e222e !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
}

.dark .dash-kpi-icon svg,
[data-theme="dark"] .dash-kpi-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* ==========================================================================
   UNITS SIDEBAR, SECTIONS & FILTER GROUPS (ZERO WHITE BORDERS)
   ========================================================================== */
.dark .units-page,
.dark .units-container,
.dark .units-sidebar,
.dark .main-card,
.dark .sidebar-section,
.dark .sidebar-section-body,
.dark .sidebar-section-flush,
[data-theme="dark"] .units-page,
[data-theme="dark"] .units-container,
[data-theme="dark"] .units-sidebar,
[data-theme="dark"] .main-card,
[data-theme="dark"] .sidebar-section {
  --units-surface: var(--theme-surface, #000000) !important;
  --units-muted-surface: var(--theme-surface-elevated, #1f2432) !important;
  --units-border: var(--theme-border, #2a3245) !important;
  --units-accent-border: var(--theme-accent, rgba(139, 92, 246, 0.35)) !important;
  --panel-bg: var(--theme-surface, #000000) !important;
  --color-border-default: var(--theme-border, #2a3245) !important;
  --color-border-subtle: var(--theme-border-subtle, #000000) !important;
  --color-btn-secondary: var(--theme-surface-elevated, #1f2432) !important;
  border-color: var(--theme-border, #2a3245) !important;
}

/* Sidebar Modern Cards (Dark Mode Overrides) */
.dark .sidebar-action-card,
.dark .sidebar-section-card,
[data-theme="dark"] .sidebar-action-card,
[data-theme="dark"] .sidebar-section-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid var(--theme-border, #2a3245) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.dark .sidebar-action-card:hover,
.dark .sidebar-section-card:hover,
[data-theme="dark"] .sidebar-action-card:hover,
[data-theme="dark"] .sidebar-section-card:hover {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #2e303b !important;
}

.dark .sidebar-card-icon-box,
.dark .sidebar-card-icon-box.purple,
.dark .sidebar-card-icon-box.green,
.dark .sidebar-card-icon-box.blue,
[data-theme="dark"] .sidebar-card-icon-box,
[data-theme="dark"] .sidebar-card-icon-box.purple,
[data-theme="dark"] .sidebar-card-icon-box.green,
[data-theme="dark"] .sidebar-card-icon-box.blue {
  background-color: #1e222e !important;
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
}

.dark .sidebar-card-icon-box svg,
[data-theme="dark"] .sidebar-card-icon-box svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark .sidebar-card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.dark .sidebar-card-subtitle {
  font-size: 0.76rem !important;
  color: #8b909a !important;
}

.dark .sidebar-card-arrow {
  color: #717784 !important;
  margin-left: auto !important;
}

.dark .sidebar-section {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.dark .sidebar-section-flush {
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
}

.dark .sidebar-section-body {
  border-top: 1px solid #2a3245 !important;
}

.dark .units-panel-header,
.dark .locations-panel-header {
  border-bottom: 1px solid #2a3245 !important;
}

.dark .filter-group {
  border-top: none !important;
}

.dark .filter-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #717784 !important;
  margin-bottom: 8px !important;
}

.dark .filter-toggle-options {
  border: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  padding: 0 0 0 10px !important;
}

.dark .filter-toggle-item {
  border: none !important;
  border-bottom: none !important;
  background-color: transparent !important;
  color: #e4e4e7 !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding: 2px 0 !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

.dark .filter-toggle-item input[type="checkbox"] {
  accent-color: #8b5cf6 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.dark .filter-toggle-item:last-child {
  border-bottom: none !important;
}

.dark .group-select {
  border: 1px solid #25272e !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

.dark select option,
.dark select optgroup,
.dark .group-select option,
.dark .group-select optgroup,
.dark option,
.dark optgroup {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.dark .overview-btn {
  border: 1px solid #25272e !important;
  background-color: #22242b !important;
  color: #949aa6 !important;
  border-radius: 6px !important;
}

/* ==========================================================================
   UNIT DETAILS SCREEN (DEVICES.CSS / UNITS.TSX DARK THEME)
   ========================================================================== */
.dark .devices-container {
  background-color: #0c0d10 !important;
  color: #f1f3f5 !important;
}

.dark .devices-layout {
  background: transparent !important;
}

.dark .unit-name-card,
.dark .unit-name-card-top {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .unit-name-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .unit-name-meta,
.dark .unit-name-meta span {
  color: #949aa6 !important;
}

.dark .unit-name-sep {
  color: #40444f !important;
}

.dark .unit-tag.retired,
[data-theme="dark"] .unit-tag.retired {
  background-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(148, 163, 184, 0.14) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #949aa6 !important;
}

.dark .unit-tag.offline,
[data-theme="dark"] .unit-tag.offline {
  background: rgba(239, 68, 68, 0.16) !important;
  background-color: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.dark .unit-tag.online,
[data-theme="dark"] .unit-tag.online {
  background: rgba(34, 197, 94, 0.16) !important;
  background-color: rgba(34, 197, 94, 0.16) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.dark .retired-toggle-btn.on,
[data-theme="dark"] .retired-toggle-btn.on {
  background: #1e222e !important;
  color: #ffffff !important;
  border-color: #333a4c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .retired-toggle-btn.on:hover,
[data-theme="dark"] .retired-toggle-btn.on:hover {
  background: #282e3f !important;
  border-color: #444d64 !important;
}

.dark .devices-left-panel,
.dark .devices-right-panel,
.dark .devices-center-panel,
.dark .control-panel {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f1f3f5 !important;
}

.dark .device-section,
.dark .device-info-card,
.dark .control-section,
.dark .system-players-content,
.dark .panel-outline {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #f1f3f5 !important;
}

.dark .devices-panel-header,
.dark .control-header,
.dark .control-section-header,
.dark .device-section-header,
.dark .system-info-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .device-media-header,
.dark .device-media-title {
  color: #ffffff !important;
}

.dark .device-media-btn {
  background-color: #000000 !important;
  border: 1px solid #2a2d36 !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
}

.dark .device-media-btn:hover:not(:disabled) {
  background-color: #282b34 !important;
  color: #ffffff !important;
}

.dark .unit-health-widget {
  background-color: #000000 !important;
  border: 1px solid #25272e !important;
  color: #ffffff !important;
}

.dark .unit-health-label {
  color: #949aa6 !important;
}

.dark .unit-health-value {
  color: #ffffff !important;
}

.dark .unit-health-bar {
  background-color: #25272e !important;
}

.dark .device-info-section,
.dark .device-description-box {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #2a3245 !important;
  color: #f1f3f5 !important;
}

.dark .unit-primary-tabs,
.dark .control-tabs,
.dark .unit-tabs-nav {
  background-color: #000000 !important;
  border-bottom: 1px solid #25272e !important;
}

.dark .unit-primary-tab,
.dark .control-tab,
.dark .unit-tab-pill {
  color: #949aa6 !important;
  background: transparent !important;
  border: none !important;
}

.dark .unit-primary-tab:hover,
.dark .control-tab:hover,
.dark .unit-tab-pill:hover {
  color: #ffffff !important;
  background-color: #22242b !important;
}

.dark .unit-primary-tab.active,
.dark .control-tab.active,
.dark .unit-tab-pill.active,
[data-theme="dark"] .unit-primary-tab.active,
[data-theme="dark"] .control-tab.active,
[data-theme="dark"] .unit-tab-pill.active {
  color: #ffffff !important;
  background: #22242b !important;
  background-color: #22242b !important;
  border: 1px solid #3b3b44 !important;
  border-bottom: 1px solid #3b3b44 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.dark .unit-primary-tab.active:hover,
.dark .control-tab.active:hover,
.dark .unit-tab-pill.active:hover,
[data-theme="dark"] .unit-primary-tab.active:hover,
[data-theme="dark"] .control-tab.active:hover,
[data-theme="dark"] .unit-tab-pill.active:hover {
  background: #2a2c36 !important;
  background-color: #2a2c36 !important;
  border-color: #4b4b58 !important;
  border-bottom-color: #4b4b58 !important;
  color: #ffffff !important;
}

.dark .telemetry-card,
.dark .telemetry-metric,
.dark .empty-box,
.dark .beta-feature-panel {
  background-color: #000000 !important;
  border: 1px solid #25272e !important;
  color: #949aa6 !important;
}

.dark .telemetry-title,
.dark .telemetry-metric-header {
  color: #ffffff !important;
}

.dark .telemetry-row {
  color: #949aa6 !important;
}

.dark .devices-table,
.dark .system-info-table,
.dark .device-table {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f1f3f5 !important;
}

.dark .devices-table th,
.dark .system-info-table th,
.dark .device-table th {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #717784 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .devices-table td,
.dark .system-info-table td,
.dark .device-table td,
.dark .device-info-row {
  border-bottom: 1px solid #202636 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   UNIT DETAILS - HIGH CONTRAST WHITE TEXT & DARK PLAYER CARDS
   ========================================================================== */
.dark .players-details .info-grid,
.dark .info-grid,
.dark .system-info-table,
.dark .device-info-table {
  background-color: transparent !important;
}

.dark .info-grid .row,
.dark .diag-card-body .row {
  border-bottom: 1px solid #21232a !important;
  color: #ffffff !important;
  padding: 8px 0 !important;
}

.dark .info-grid .row .label,
.dark .diag-card-body .row .label,
.dark .player-system-info .label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dark .info-grid .row .value,
.dark .diag-card-body .row .value,
.dark .player-system-info .value {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.dark .info-section-title {
  color: #c084fc !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 1px solid #282a30 !important;
  padding-bottom: 4px !important;
  margin-top: 14px !important;
}

.dark .mac-address-cell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dark .mac-copy-inline-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background-color: #20222a !important;
  color: #e2e8f0 !important;
  border: 1px solid #333846 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dark .mac-copy-inline-btn:hover {
  background-color: #2b2f3a !important;
  color: #ffffff !important;
  border-color: #4b5563 !important;
}

/* Player Cards in Unit Details */
.dark .player-card {
  width: 136px !important;
  max-width: 136px !important;
  padding: 12px 10px 8px !important;
  box-sizing: border-box !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .player-card.is-active,
.dark .players-panel .players-grid .player-card.is-active,
.dark .players-grid .player-card.is-active {
  background-color: #1a1d24 !important;
  border: 1.5px solid #3b4252 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .player-card.is-active .player-avatar .player-icon-bg,
.dark .players-panel .players-grid .player-card.is-active .player-icon-bg,
.dark .players-grid .player-card.is-active .player-icon-bg {
  background-color: #272a33 !important;
  color: #ffffff !important;
  border: 1px solid #4b5563 !important;
}

.dark .player-card.is-active .player-id strong,
.dark .players-panel .players-grid .player-card.is-active .player-id strong,
.dark .players-grid .player-card.is-active .player-id strong {
  color: #ffffff !important;
}

.dark .player-card.is-active.selected,
.dark .player-card.is-active:hover {
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.dark .player-card.is-retired,
.dark .players-panel .players-grid .player-card.is-retired,
.dark .players-grid .player-card.is-retired {
  background-color: #271214 !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .player-card.is-retired .player-avatar .player-icon-bg,
.dark .players-panel .players-grid .player-card.is-retired .player-icon-bg,
.dark .players-grid .player-card.is-retired .player-icon-bg {
  background-color: #451a1d !important;
  color: #f87171 !important;
  border: 1px solid #7f1d1d !important;
}

.dark .player-card.is-retired .player-id strong,
.dark .players-panel .players-grid .player-card.is-retired .player-id strong,
.dark .players-grid .player-card.is-retired .player-id strong {
  color: #fca5a5 !important;
}

.dark .player-card.is-retired.selected,
.dark .player-card.is-retired:hover {
  border-color: #f87171 !important;
  box-shadow: none !important;
}

.dark .player-card .player-id {
  padding: 0 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: center !important;
}

.dark .player-card .player-id strong {
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 0 4px !important;
  display: inline-block !important;
}

.dark .player-copy-btn {
  background-color: #22242b !important;
  border: 1px solid #353842 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.dark .player-copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: #3b3b44 !important;
}

/* Player Actions in Unit Details - Violet Shade (Dark Mode) */
.dark .player-actions,
.dark .system-info-content .players-panel.techdesk-players .player-actions,
.dark .players-panel.techdesk-players .player-actions {
  border-top: 1px solid #27272a !important;
}

.dark .player-actions button,
.dark .system-info-content .players-panel.techdesk-players .player-actions button,
.dark .players-panel.techdesk-players .player-actions button,
.dark .player-actions .add-player,
.dark .player-actions .activate-player-btn,
.dark .player-actions .move-player,
.dark .player-actions .retire-player,
.dark .player-actions .retire-player.restore,
.dark .player-actions .restore-player {
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .player-actions button svg,
.dark .system-info-content .players-panel.techdesk-players .player-actions button svg,
.dark .players-panel.techdesk-players .player-actions button svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.dark .player-actions button:hover,
.dark .system-info-content .players-panel.techdesk-players .player-actions button:hover,
.dark .players-panel.techdesk-players .player-actions button:hover,
.dark .player-actions .add-player:hover,
.dark .player-actions .activate-player-btn:hover,
.dark .player-actions .move-player:hover,
.dark .player-actions .retire-player:hover,
.dark .player-actions .retire-player.restore:hover,
.dark .player-actions .restore-player:hover {
  background: #282e3f !important;
  color: #ffffff !important;
  border-color: #444d64 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

.dark .player-actions button:hover svg,
.dark .system-info-content .players-panel.techdesk-players .player-actions button:hover svg,
.dark .players-panel.techdesk-players .player-actions button:hover svg {
  color: #ffffff !important;
}

.dark .player-actions button:active,
.dark .system-info-content .players-panel.techdesk-players .player-actions button:active,
.dark .players-panel.techdesk-players .player-actions button:active {
  background: #181c26 !important;
  border-color: #333a4c !important;
  transform: translateY(0) !important;
}

/* Device primary tabs & active highlights */
.dark .device-primary-tabs {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .device-tab,
[data-theme="dark"] .device-tab {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.dark .device-tab:hover,
[data-theme="dark"] .device-tab:hover {
  color: #ffffff !important;
  background-color: #22242b !important;
}

.dark .device-tab.active:not(.device-selector-btn),
[data-theme="dark"] .device-tab.active:not(.device-selector-btn),
.dark .device-tab-active-pill,
[data-theme="dark"] .device-tab-active-pill {
  color: #ffffff !important;
  background: #22242b !important;
  background-color: #22242b !important;
  border: 1px solid #3b3b44 !important;
  border-bottom: 1px solid #3b3b44 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.dark .device-tab.active:not(.device-selector-btn):hover,
[data-theme="dark"] .device-tab.active:not(.device-selector-btn):hover,
.dark .device-tab-active-pill:hover,
[data-theme="dark"] .device-tab-active-pill:hover {
  background: #2a2c36 !important;
  background-color: #2a2c36 !important;
  border-color: #4b4b58 !important;
  border-bottom-color: #4b4b58 !important;
  color: #ffffff !important;
}

/* Device (MAC) Selector Dropdown Button - ALWAYS show the sleek grey hover pill, ZERO violet */
.dark .device-selector-btn,
.dark .device-tab.device-selector-btn,
.dark .device-tab.device-selector-btn.open,
.dark .device-tab.device-selector-btn.active,
[data-theme="dark"] .device-selector-btn,
[data-theme="dark"] .device-tab.device-selector-btn,
[data-theme="dark"] .device-tab.device-selector-btn.open,
[data-theme="dark"] .device-tab.device-selector-btn.active {
  background: #22242b !important;
  background-color: #22242b !important;
  border: 1px solid #3b3b44 !important;
  border-bottom: 1px solid #3b3b44 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark .device-selector-btn:hover,
.dark .device-tab.device-selector-btn:hover,
[data-theme="dark"] .device-selector-btn:hover,
[data-theme="dark"] .device-tab.device-selector-btn:hover,
.dark .device-tab.device-selector-btn.open:hover,
[data-theme="dark"] .device-tab.device-selector-btn.open:hover {
  background: #2a2c36 !important;
  background-color: #2a2c36 !important;
  border-color: #4b4b58 !important;
  border-bottom-color: #4b4b58 !important;
  color: #ffffff !important;
}

.dark .device-selector-btn svg,
.dark .device-tab.device-selector-btn svg,
[data-theme="dark"] .device-selector-btn svg,
[data-theme="dark"] .device-tab.device-selector-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Left panel text contrast */
.dark .stat-item label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dark .stat-row .stat-value {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .stat-row .stat-percent {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .device-details h4 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .detail-text {
  color: #ffffff !important;
}

.dark .edit-device-btn {
  background-color: #000000 !important;
  border: 1px solid #2a2d36 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.dark .edit-device-btn:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: #3b3b44 !important;
}

.dark .unit-name-meta,
.dark .unit-name-meta span {
  color: #ffffff !important;
}

/* ==========================================================================
   UNITS HERO SELECTION HEADER CARD
   ========================================================================== */
.selection-header-card {
  background: var(--units-surface, #ffffff);
  border: 1px solid var(--units-border, #e5e7eb) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.dark .selection-header-card,
[data-theme="dark"] .selection-header-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  color: #ffffff !important;
}

.dark .selection-title-section h2 {
  color: #ffffff !important;
}

.dark .selection-subtitle {
  color: #949aa6 !important;
}

.dark .health-stat .stat-value {
  color: #ffffff !important;
}

.dark .health-stat .stat-label {
  color: #717784 !important;
}

/* ==========================================================================
   CARDS, PANELS & CONTAINERS (MATCHING SAMPLE IMAGES 1, 2 & 3)
   ========================================================================== */
/* Layout wrappers - strictly transparent, no outer border or duplicate card outline */
.dark .main-card,
.dark .units-main-card,
.dark .dash-section-activity,
.dark .profile-panel,
.dark .panel {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .dash-section,
.dark .office-card,
.dark .sites-card,
.dark .admin-card,
.dark .card,
.dark .list-card,
.dark .settings-card,
.dark .header-popover,
.dark .profile-card,
.dark .job-card,
.dark .job-item-card,
.dark .unit-card,
.dark .device-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #f1f3f5 !important;
  box-shadow: none !important;
}

.dark .unit-card:hover,
.dark .device-card:hover,
.dark .job-item-card:hover {
  background-color: #12141a !important;
  background: #12141a !important;
  border-color: #2e313b !important;
  box-shadow: none !important;
}

.dark .dash-section-head,
.dark .units-panel-header,
.dark .locations-panel-header,
.dark .profile-header,
.dark .header-popover-head,
.dark .modal-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .dash-section-head h3,
.dark .locations-header-title,
.dark .units-panel-header {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   FILTER TABS, CHIPS & QUICKBAR PILLS (WITH VIOLET ACCENT)
   ========================================================================== */
.dark .units-quickbar-section,
.dark .units-refresh-section,
.dark .dash-view-toggle,
.dark .control-section.filter-section,
.dark .units-control-bar .control-section,
.dark .tabs-nav,
.dark .segmented-control {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 10px !important;
  padding: 3px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.dark .filter-tabs,
.dark .filter-row .filter-tabs,
.dark .tkt-filter-tabs,
.dark .activity-tabs {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.dark .units-refresh-interval-select {
  background: transparent !important;
  color: #949aa6 !important;
  border: none !important;
}

.dark .units-refresh-interval-select:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
}

.dark .units-quickbar-btn,
.dark .dash-view-btn,
.dark .tab-chip,
.dark .tab,
.dark .control-btn.sort-btn,
.dark .control-btn.view-btn,
.dark .filter-toggle-item,
.dark .segmented-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}

.dark .units-quickbar-btn:hover,
.dark .dash-view-btn:hover,
.dark .tab-chip:hover,
.dark .tab:hover,
.dark .control-btn.sort-btn:hover,
.dark .control-btn.view-btn:hover,
.dark .filter-toggle-item:hover,
.dark .segmented-btn:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
}

/* Inactive count badge */
.dark .tab-chip span,
.dark .tab .count-badge,
.dark .tab-count,
.dark .control-btn .count-badge {
  background-color: #202228 !important;
  border: 1px solid #2a2d36 !important;
  color: #717784 !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

/* Active selection tab pill (Matching dark slate reference #1e222e) */
.dark .units-quickbar-btn.active,
.dark .dash-view-btn.active,
.dark .tab-chip.active,
.dark .tab.active,
.dark .control-btn.sort-btn.active,
.dark .control-btn.view-btn.active,
.dark .filter-toggle-item.active,
.dark .segmented-btn.active {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
}

.dark .units-quickbar-btn.view-btn svg,
.dark .control-btn.view-btn svg,
.dark .dash-view-btn svg,
.dark .office-view-btn svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.dark .units-quickbar-btn.active svg,
.dark .dash-view-btn.active svg,
.dark .tab-chip.active svg,
.dark .tab.active svg,
.dark .control-btn.sort-btn.active svg,
.dark .control-btn.view-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Active count badge */
.dark .tab-chip.active span,
.dark .tab.active .count-badge,
.dark .tab.active .tab-count,
.dark .control-btn.sort-btn.active .count-badge,
.dark .units-quickbar-btn.active span {
  background-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Locations list item */
.dark .location-item {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #a1a1aa !important;
  border-radius: 6px !important;
}

.dark .location-item:hover {
  background-color: #12141a !important;
  background: #12141a !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.dark .location-item.active {
  background-color: #12141a !important;
  background: #12141a !important;
  border-color: #2a3245 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   UNIT CARDS & ACTION BUTTONS (NO WHITE BORDERS)
   ========================================================================== */
.dark .unit-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.dark .unit-card-top,
.dark .unit-card-top-merged {
  background: transparent !important;
  border: none !important;
}

.dark .unit-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .unit-status-text {
  color: #949aa6 !important;
}

.dark .unit-last-seen {
  color: #717784 !important;
}

.dark .unit-card-footer {
  background: #000000 !important;
  border-top: 1px solid #2a3245 !important;
  padding: 8px 10px !important;
}

.dark .unit-footer-btn {
  background-color: #000000 !important;
  border: 1px solid #2a2d36 !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
  height: 32px !important;
}

.dark .unit-footer-btn:hover {
  background-color: #282b34 !important;
  border-color: #3f4350 !important;
  color: #ffffff !important;
}

.dark .unit-footer-btn.is-active,
[data-theme="dark"] .unit-footer-btn.is-active {
  background-color: #22242b !important;
  background: #22242b !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
}

.dark .unit-media {
  background-color: #0e0f13 !important;
}

.dark .unit-timestamp-badge {
  background: rgba(14, 15, 19, 0.85) !important;
  border: 1px solid #25272e !important;
  color: #949aa6 !important;
}

.dark .unit-chip,
.dark .unit-chip.compact {
  background-color: #000000 !important;
  border: 1px solid #2a2d36 !important;
  color: #c084fc !important;
}

.dark .units-control-bar {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
}

.dark .control-btn {
  background-color: #000000 !important;
  border: 1px solid #25272e !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
}

.dark .control-btn:hover {
  background-color: #22242b !important;
  color: #ffffff !important;
  border-color: #353842 !important;
}

.dark .control-btn.active,
[data-theme="dark"] .control-btn.active {
  background-color: #22242b !important;
  background: #22242b !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
}

.dark .control-btn.sort-btn:not(.active),
.dark .control-btn.grid-btn:not(.active),
.dark .control-btn.list-btn:not(.active) {
  background-color: #000000 !important;
  border: 1px solid #25272e !important;
  color: #949aa6 !important;
}

/* ==========================================================================
   TABLES & METERS (MATCHING SAMPLE IMAGE 1)
   ========================================================================== */
.dark .overview-table-wrap,
.dark .dash-table-wrap,
.dark .player-table-wrap,
.dark .sites-table-wrap,
.dark .table-container,
.dark .admin-table-wrap {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
}

.dark table,
.dark .overview-table,
.dark .dash-table,
.dark .player-table,
.dark .sites-table,
.dark .admin-table {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f1f3f5 !important;
}

.dark thead th,
.dark .overview-table thead th,
.dark .dash-table thead th,
.dark .player-table thead th,
.dark .sites-table thead th,
.dark .admin-table thead th {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #717784 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #2a3245 !important;
  padding: 12px 16px !important;
}

.dark tbody td,
.dark .overview-table tbody td,
.dark .dash-table tbody td,
.dark .player-table tbody td,
.dark .sites-table tbody td,
.dark .admin-table tbody td {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f1f3f5 !important;
  border-bottom: 1px solid #20222a !important;
  padding: 14px 16px !important;
}

.dark tbody tr:hover td,
.dark tbody tr:hover,
.dark .overview-table tbody tr:hover,
.dark .dash-table tbody tr:hover,
.dark .player-table tbody tr:hover {
  background-color: #12141a !important;
}

.dark .overview-location,
.dark .overview-row-name,
.dark .player-name,
.dark .dash-table-group-cell .link {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dark .overview-health-foot {
  display: none !important;
}

.dark .overview-health-meter {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 180px !important;
}

.dark .overview-health-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dark .overview-health-count strong,
.dark .dash-table-meter-count strong {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.dark .overview-health-count span,
.dark .dash-table-meter-count span {
  color: #8b909a !important;
  font-size: 0.85rem !important;
}

.dark .overview-health-percent,
.dark .dash-table-meter-percent,
[data-theme="dark"] .overview-health-percent,
[data-theme="dark"] .dash-table-meter-percent {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

.dark .dash-table-meter.is-ok .dash-table-meter-percent,
.dark .overview-health-meter.is-ok .overview-health-percent,
[data-theme="dark"] .dash-table-meter.is-ok .dash-table-meter-percent,
[data-theme="dark"] .overview-health-meter.is-ok .overview-health-percent {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.dark .dash-table-meter.is-warning .dash-table-meter-percent,
.dark .overview-health-meter.is-warning .overview-health-percent,
[data-theme="dark"] .dash-table-meter.is-warning .dash-table-meter-percent,
[data-theme="dark"] .overview-health-meter.is-warning .overview-health-percent {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.dark .dash-table-meter.is-down .dash-table-meter-percent,
.dark .overview-health-meter.is-down .overview-health-percent,
[data-theme="dark"] .dash-table-meter.is-down .dash-table-meter-percent,
[data-theme="dark"] .overview-health-meter.is-down .overview-health-percent {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.dark .dash-table-meter.is-empty .dash-table-meter-percent,
.dark .overview-health-meter.is-empty .overview-health-percent,
[data-theme="dark"] .dash-table-meter.is-empty .dash-table-meter-percent,
[data-theme="dark"] .overview-health-meter.is-empty .overview-health-percent {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.dark .overview-bar,
.dark .dash-status-bar {
  height: 6px !important;
  background-color: #27272a !important;
  background: #27272a !important;
  border-radius: 999px !important;
  display: flex !important;
  overflow: hidden !important;
}

/* Progress bar fills with vibrant green (connected) and red (disconnected) */
.dark .overview-bar-fill.connected,
.dark .dash-status-online,
.dark .progress-bar-fill.connected,
.dark .status-bar-fill.connected {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%) !important;
  height: 100% !important;
  border-radius: 999px !important;
}

.dark .overview-bar-fill.disconnected,
.dark .dash-status-offline,
.dark .progress-bar-fill.disconnected,
.dark .status-bar-fill.disconnected {
  background: #ef4444 !important;
  height: 100% !important;
}

.dark .dash-status-offline,
.dark .progress-bar-fill.disconnected,
.dark .status-bar-fill.disconnected {
  background: #ef4444 !important;
}

/* ==========================================================================
   ACTIVITY LISTS, JOBS & PLAYER ROWS
   ========================================================================== */
.dark .activity-list,
[data-theme="dark"] .activity-list {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .activity-row,
[data-theme="dark"] .activity-row,
.dark .activity-item,
[data-theme="dark"] .activity-item {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #20222a !important;
  color: #f1f3f5 !important;
}

.dark .activity-row:hover,
[data-theme="dark"] .activity-row:hover,
.dark .activity-item:hover,
[data-theme="dark"] .activity-item:hover {
  background-color: #12141a !important;
  background: #12141a !important;
}

.dark .activity-name,
[data-theme="dark"] .activity-name,
.dark .activity-id,
[data-theme="dark"] .activity-id {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .activity-sub,
[data-theme="dark"] .activity-sub,
.dark .activity-env,
[data-theme="dark"] .activity-env {
  color: #949aa6 !important;
}

.dark .activity-time,
[data-theme="dark"] .activity-time {
  color: #717784 !important;
}

/* Player badges */
.dark .mac-cell code {
  background: #000000 !important;
  color: #c084fc !important;
  border: 1px solid #25272e !important;
  border-radius: 6px !important;
}

.dark .mac-cell .icon-btn {
  background: #22242b !important;
  color: #ffffff !important;
  border: 1px solid #353842 !important;
}

.dark .status-pill.online {
  background: #0f2e1e !important;
  color: #34d399 !important;
  border: 1px solid #059669 !important;
}

.dark .status-pill.offline {
  background: #2d1315 !important;
  color: #f87171 !important;
  border: 1px solid #b91c1c !important;
}

.dark .status-pill.maintenance {
  background: #2e1d08 !important;
  color: #fbbf24 !important;
  border: 1px solid #854d0e !important;
}

/* Modals & Popovers */
.dark .modal-content,
.dark .dialog-content,
.dark .player-modal {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f1f3f5 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8) !important;
}

.dark .modal-header,
.dark .modal-footer,
.dark .player-modal-header,
.dark .player-modal-footer {
  border-color: #2a3245 !important;
  background-color: #000000 !important;
  background: #000000 !important;
}

.dark .profile-menu-item {
  color: #d4d4d8 !important;
  border-radius: 8px !important;
}

.dark .profile-menu-item:hover {
  background-color: #22242b !important;
  color: #ffffff !important;
}

.dark .profile-divider {
  background-color: #25272e !important;
}


/* Typography & Headings across all screens */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .player-header h1,
.dark .admin-header h2,
.dark .section-title,
.dark .page-title,
.dark .hero-card h2,
.dark .dash-card-title,
.dark .profile-panel-title,
.dark .header-popover-title,
.dark .settings-header span {
  color: #f4f4f5 !important;
}

.dark p,
.dark .player-header p,
.dark .admin-header p,
.dark .section-subtitle,
.dark .page-subtitle,
.dark .muted,
.dark .text-muted,
.dark .hero-card p,
.dark .profile-email-text,
.dark .header-item-sub,
.dark .field label,
.dark label {
  color: #a1a1aa !important;
}

/* Top App Header */
.dark .app-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}



.dark .icon-btn {
  background-color: #000000 !important;
  border-color: #2a3245 !important;
  color: #a1a1aa !important;
}

.dark .icon-btn:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
  border-color: #3b455c !important;
}

.dark .icon-btn.active {
  background-color: #1e222e !important;
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  border-color: #333a4c !important;
  outline: none !important;
}

.dark .icon-btn.active svg,
.dark .icon-btn.active .icon-sm {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark .search-input:not(.header-search .search-input):not(.search-input-wrap .search-input) {
  background-color: #000000 !important;
  border-color: #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark .search-input:not(.header-search .search-input):focus {
  background-color: #000000 !important;
  border-color: #3b3b44 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Breadcrumbs */
.dark .breadcrumb-bar {
  background-color: #000000 !important;
  border-bottom-color: #2a3245 !important;
}

.dark .breadcrumb {
  color: #a1a1aa !important;
}

.dark .breadcrumb-item {
  color: #71717a !important;
}

.dark .breadcrumb-item:last-child {
  color: #f4f4f5 !important;
}

.dark .breadcrumb-sep {
  color: #52525b !important;
}

.dark .breadcrumb-refresh-btn {
  background-color: #000000 !important;
  border-color: #2a3245 !important;
  color: #a1a1aa !important;
}

.dark .breadcrumb-refresh-btn:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
}


/* Buttons */
.dark .btn {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.dark .btn:hover {
  background-color: #282e3f !important;
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
}

.dark .btn-primary {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .btn-primary:hover {
  background-color: #282e3f !important;
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

.dark .btn-danger {
  background-color: #2b1114 !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

.dark .btn-danger:hover {
  background-color: #3e161a !important;
}

/* Form Controls & Inputs */
.dark input[type="text"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="number"],
.dark select,
.dark textarea,
.dark .field input,
.dark .field select,
.dark .field textarea,
.dark .group-select,
.dark .location-select,
.dark .pagination-select {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #3b3b44 !important;
  background-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark ::-moz-placeholder {
  color: #52525b !important;
}

.dark ::placeholder {
  color: #52525b !important;
}

/* Stat Cards & Metric Cards across all views */
.dark .player-stat,
.dark .stat-card,
.dark .dash-metric-card,
.dark .hero-stats .stat,
.dark .stat,
.dark .metric-card,
.dark .dash-card,
.dark .office-card,
.dark .sites-card,
.dark .admin-card,
.dark .card,
.dark .list-card,
.dark .settings-card,
.dark .header-popover,
.dark .profile-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
  box-shadow: none !important;
}

.dark .player-stat span,
.dark .stat span,
.dark .metric-label {
  color: #a1a1aa !important;
}

.dark .player-stat strong,
.dark .stat strong,
.dark .metric-value {
  color: #ffffff !important;
}

/* Tables across all views */
.dark .player-table-wrap,
.dark .overview-table-wrap,
.dark .sites-table-wrap,
.dark .table-container,
.dark .admin-table-wrap,
.dark .table-wrap {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark table,
.dark .player-table,
.dark .overview-table,
.dark .sites-table,
.dark .admin-table {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f4f4f5 !important;
}

.dark thead th,
.dark .player-table thead th,
.dark .overview-table thead th,
.dark .sites-table thead th,
.dark .admin-table thead th {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #a1a1aa !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark tbody td,
.dark .player-table tbody td,
.dark .overview-table tbody td,
.dark .sites-table tbody td,
.dark .admin-table tbody td {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f4f4f5 !important;
  border-bottom: 1px solid #20222a !important;
}

.dark tbody tr:hover td,
.dark tbody tr:hover,
.dark .player-table tbody tr:hover,
.dark .overview-table tbody tr:hover {
  background-color: #12141a !important;
}

/* Units & Devices Custom Styles */
.dark .units-page {
  background: #000000 !important;
}

.dark .units-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
}

.dark .units-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  flex-shrink: 0 !important;
}

.dark .units-layout-view {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}

.dark .sidebar-section-flush {
  border-bottom: 1px solid #2a3245 !important;
}

.dark .units-panel-header,
.dark .locations-panel-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark .main-card,
.dark .units-main-card {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .units-quickbar-section {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
}

.dark .units-quickbar-btn {
  color: #a1a1aa !important;
}

.dark .units-quickbar-btn:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
}

.dark .units-quickbar-btn.active {
  background-color: #1e1635 !important;
  border-color: #7c3aed !important;
  color: #c084fc !important;
}

.dark .location-item {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #a1a1aa !important;
  border-radius: 6px !important;
}

.dark .location-item:hover {
  background-color: #12141a !important;
  background: #12141a !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.dark .location-item.active {
  background-color: #12141a !important;
  background: #12141a !important;
  color: #ffffff !important;
  border-color: #2a3245 !important;
}

.dark .location-item.active .location-name {
  color: #ffffff !important;
}

.dark .location-count,
.dark .location-count-badge,
.dark .dash-location-count,
.dark .location-item .location-count {
  background-color: transparent !important;
  background: transparent !important;
  color: #71717a !important;
  border: none !important;
  font-weight: 600 !important;
}

.dark .location-item:hover .location-count {
  color: #a1a1aa !important;
}

.dark .location-item.active .location-count,
[data-theme="dark"] .location-item.active .location-count {
  background-color: #22242b !important;
  background: #22242b !important;
  color: #ffffff !important;
  border: 1px solid #3b3b44 !important;
  font-weight: 700 !important;
}


.dark .overview-health-count strong {
  color: #f4f4f5 !important;
}

.dark .overview-health-count span,
.dark .overview-health-foot {
  color: #71717a !important;
}

.dark .overview-health-percent {
  color: #a1a1aa !important;
}

.dark .overview-bar {
  background-color: #27272a !important;
}

/* Modals & Dialogs */
.dark .modal-content,
.dark .modal-card,
.dark .dialog-content {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark .modal-header,
.dark .modal-footer {
  border-color: #2a3245 !important;
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Popover & User Menu */
.dark .profile-header,
.dark .header-popover-head {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .profile-menu-item {
  color: #d4d4d8 !important;
}

.dark .profile-menu-item:hover {
  background-color: #222225 !important;
  color: #ffffff !important;
}

.dark .profile-divider {
  background-color: #27272a !important;
}

.dark .header-item {
  border-bottom: 1px solid #27272a !important;
  color: #f4f4f5 !important;
}

.dark .header-item:hover {
  background-color: #1c1c1f !important;
}

/* ========================================================
   PLAYER MANAGER DARK STYLES
   ======================================================== */

.dark .player-name {
  color: #f4f4f5 !important;
  font-weight: 600 !important;
}

.dark .player-id {
  color: #71717a !important;
}

.dark .mac-cell code {
  background: #000000 !important;
  color: #c084fc !important;
  border: 1px solid #2a3245 !important;
}

.dark .mac-cell .icon-btn {
  background: #000000 !important;
  color: #f4f4f5 !important;
  border: 1px solid #2a3245 !important;
}

.dark .mac-cell .icon-btn:hover {
  background: #12141a !important;
  color: #ffffff !important;
}

.dark .status-pill.online {
  background: #052e16 !important;
  color: #4ade80 !important;
  border: 1px solid #166534 !important;
}

.dark .status-pill.offline {
  background: #2b1114 !important;
  color: #f87171 !important;
  border: 1px solid #7f1d1d !important;
}

.dark .status-pill.maintenance {
  background: #2e1d08 !important;
  color: #fbbf24 !important;
  border: 1px solid #854d0e !important;
}

.dark .player-modal {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
}

.dark .player-modal-header {
  border-bottom: 1px solid #2a3245 !important;
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark .player-modal-footer {
  border-top: 1px solid #2a3245 !important;
  background: #000000 !important;
}

/* ========================================================
   HOME DASHBOARD DARK STYLES
   ======================================================== */

.dark .dash-kpi-grid {
  background: transparent !important;
}

.dark .dash-kpi-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
  box-shadow: none !important;
}

.dark .dash-kpi-value {
  color: #ffffff !important;
}

.dark .dash-kpi-label {
  color: #a1a1aa !important;
}

.dark .dash-section {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
  box-shadow: none !important;
}

.dark .dash-section-head {
  border-bottom-color: #2a3245 !important;
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark .dash-section-head h3 {
  color: #f4f4f5 !important;
}

.dark .dash-sub {
  color: #a1a1aa !important;
}

.dark .dash-section-activity {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .activity-filters {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.dark .activity-tabs {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dark .activity-tools {
  margin-left: auto !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

.dark .tab-chip {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #a1a1aa !important;
}

.dark .tab-chip:hover {
  background-color: #12141a !important;
  color: #ffffff !important;
}

.dark .tab-chip.active {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
}

.dark .tab-chip span {
  background-color: #12141a !important;
  color: #f4f4f5 !important;
}

.dark .activity-row,
[data-theme="dark"] .activity-row,
.dark .activity-item,
[data-theme="dark"] .activity-item {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark .activity-row:hover,
[data-theme="dark"] .activity-row:hover,
.dark .activity-item:hover,
[data-theme="dark"] .activity-item:hover {
  background-color: #12141a !important;
  background: #12141a !important;
}

.dark .activity-name,
[data-theme="dark"] .activity-name,
.dark .activity-id,
[data-theme="dark"] .activity-id {
  color: #ffffff !important;
}

.dark .activity-sub,
[data-theme="dark"] .activity-sub,
.dark .activity-env,
[data-theme="dark"] .activity-env {
  color: #a1a1aa !important;
}

.dark .activity-time,
[data-theme="dark"] .activity-time {
  color: #71717a !important;
}

.dark .dash-table-wrap {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .dash-table {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #f4f4f5 !important;
}

.dark .dash-table thead th {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #a1a1aa !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .dash-table tbody tr {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #20222a !important;
  color: #f4f4f5 !important;
}

.dark .dash-table tbody tr:hover {
  background-color: #12141a !important;
}

.dark .dash-table-group-cell .link {
  color: #f4f4f5 !important;
}

.dark .dash-table-meter-count strong {
  color: #f4f4f5 !important;
}

.dark .dash-table-meter-count span {
  color: #71717a !important;
}



.dark .dash-table-meter-foot {
  color: #71717a !important;
}

.dark .dash-status-bar {
  background-color: #27272a !important;
}

.dark .dash-map-wrap,
.dark .dash-map-sidebar,
.dark .dash-map-topbar,
.dark .dash-location-detail-panel {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f4f4f5 !important;
}

.dark .dash-location-unit {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #20222a !important;
  color: #f4f4f5 !important;
}

.dark .dash-location-unit strong {
  color: #ffffff !important;
}

.dark .dash-location-unit span {
  color: #ffffff !important;
}

.dark .dash-location-unit em {
  color: #ffffff !important;
}

/* ==========================================================================
   OFFICE & WORKSPACES DARK THEME
   ========================================================================== */
.dark .office-page,
.dark .office-container {
  background-color: transparent !important;
  color: #ffffff !important;
}

.dark .office-hero-title h2,
.dark .office-hero-title p,
.dark .office-card-title-group h3,
.dark .office-building-sub,
.dark .office-loc-row,
.dark .office-loc-row div {
  color: #ffffff !important;
}

.dark .office-metric-card,
.dark .office-card,
.dark .office-table-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .office-metric-info strong {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.dark .office-metric-info span {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.dark .office-tabs,
.dark .office-view-toggle {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 10px !important;
}

.dark .office-tab {
  color: #ffffff !important;
  background: transparent !important;
}

.dark .office-tab.active {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
}

.dark .office-search-input,
.dark .office-form-input {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .office-card-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .office-card-body {
  color: #ffffff !important;
}

/* ==========================================================================
   JOBS & TASK HISTORY DARK THEME
   ========================================================================== */
.dark .jobs-page {
  background-color: transparent !important;
  color: #ffffff !important;
}

.dark .jobs-column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .jobs-history,
.dark .job-card,
.dark .history-item {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .jobs-column h2,
.dark .jobs-history h3,
.dark .job-card h4,
.dark .job-card-header h4,
.dark .history-title {
  color: #ffffff !important;
}

.dark .job-card .meta,
.dark .job-card .notes,
.dark .history-notes,
.dark .empty {
  color: #ffffff !important;
}

.dark .jobs-page select,
.dark .jobs-page input {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   SITES & MAP VIEW DARK THEME
   ========================================================================== */
.dark .sites-page {
  background-color: transparent !important;
  color: #ffffff !important;
}

.dark .sites-map-shell {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .sites-search-bar {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .sites-search-bar input {
  color: #ffffff !important;
}

.dark .sites-search-icon-btn {
  color: #ffffff !important;
}

.dark .sites-map-status-strip,
.dark .sites-map-status-strip span,
.dark .sites-map-sidebar,
.dark .sites-filter-box,
.dark .sites-group-item,
.dark .sites-legend,
.dark .sites-stat-pill,
.dark .sites-quick-stats,
.dark .sites-stat-badge,
.dark .sites-header-stats {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

.dark .sites-popup {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

.dark .sites-popup-title {
  color: #ffffff !important;
}

/* ==========================================================================
   ADMIN SCREENS, USER & TENANT MANAGEMENT DARK THEME
   ========================================================================== */
.dark .hero-card,
.dark .hero-stats .stat,
.dark .admin-card,
.dark .list-card,
.dark .tenant-card,
.dark .user-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .hero-card h2,
.dark .hero-card p,
.dark .hero-stats .stat strong,
.dark .hero-stats .stat span,
.dark .list-title,
.dark .list-title h4,
.dark .list-title strong,
.dark .meta-row,
.dark .meta-row span,
.dark .meta-row div,
.dark .admin-header h2,
.dark .admin-header p,
.dark .admin-card-header h3,
.dark .admin-table th,
.dark .admin-table td {
  color: #ffffff !important;
}

.dark .list-card-body,
.dark .tenant-card-body,
.dark .tenant-footer,
.dark .card-footer {
  background-color: transparent !important;
  border-top: 1px solid #21232a !important;
  color: #ffffff !important;
}

.dark .avatar {
  background-color: #241838 !important;
  color: #c084fc !important;
  border: 1px solid #7c3aed !important;
}

.dark .filter-actions input,
.dark .filter-actions select,
.dark .player-filter-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.dark .search-input-wrap,
.dark .reports-search-input-box {
  display: flex !important;
  align-items: center !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 8px !important;
  padding: 0 10px 0 12px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  position: relative !important;
  box-shadow: none !important;
}

.dark .search-input-wrap:focus-within,
.dark .reports-search-input-box:focus-within {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 1px #8b5cf6 !important;
}

.dark .search-input-wrap svg,
.dark .search-icon,
.dark .reports-search-icon,
.dark .reports-search-input-box svg {
  position: static !important;
  transform: none !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.dark .search-input-wrap input,
.dark .search-input-wrap .search-input,
.dark .reports-search-input-box input,
.dark .reports-search-input-box .reports-search-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: normal !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

.dark .search-input-wrap input:focus,
.dark .search-input-wrap .search-input:focus,
.dark .reports-search-input-box input:focus,
.dark .reports-search-input-box .reports-search-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.dark .search-input-wrap .clear-search-btn,
.dark .search-input-wrap button,
.dark .reports-search-clear-btn,
.dark .reports-search-input-box button {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.dark .search-input-wrap .clear-search-btn:hover,
.dark .search-input-wrap button:hover,
.dark .reports-search-clear-btn:hover,
.dark .reports-search-input-box button:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   GLOBAL DARK MODE TEXT ENFORCEMENT (ALL TEXT HIGH CONTRAST WHITE)
   ========================================================================== */
.dark body,
.dark #root,
.dark .app-body,
.dark .main-content,
.dark div,
.dark span,
.dark p,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark label,
.dark strong,
.dark b,
.dark th,
.dark td,
.dark li,
.dark a:not(.btn):not(.control-btn),
.dark input,
.dark select,
.dark textarea {
  color: #ffffff;
}

.dark .text-muted,
.dark .muted,
.dark .sub-text,
.dark .meta,
.dark .label {
  color: #ffffff !important;
}

/* Zero white backgrounds in Unit Details & Diagnostics */
.dark .thumb-caption,
.dark .diag-ui-tabs,
.dark .diag-ui-card,
.dark .diag-ui-stack,
.dark .diag-ui-chart,
.dark .diag-ui-chart-wrap,
.dark .diag-ui-metrics,
.dark .diag-ui-metric,
.dark .diag-ui-table-wrap,
.dark .diag-ui-table,
.dark .diag-ui-table th,
.dark .diag-ui-table td,
.dark .activity-panel,
.dark .activity-list,
.dark .activity-entry,
.dark .empty-activity,
.dark .activity-textarea,
.dark .screenshot-placeholder,
.dark .livecam-placeholder,
.dark .liveview-placeholder,
.dark .telemetry-card,
.dark .telemetry-metric,
.dark .telemetry-chart,
.dark .telemetry-chart-wrap,
.dark .telemetry-history {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #2a3245 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   DIAGNOSTICS & TRENDS - TRUE BLACK THEME FOR ALL TABS
   Uptime, Performance, Processes, Brightness, Sensors, Bandwidth, Telemetry,
   Drivers, Audit Logs, Live Logs, Processes, DatraShell (CLI)
   ========================================================================== */

.dark .diagnostics-panel,
[data-theme="dark"] .diagnostics-panel,
.dark .diag-stack,
[data-theme="dark"] .diag-stack,
.dark .diag-ui-stack,
[data-theme="dark"] .diag-ui-stack {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Diagnostics Sidebar Sub-tabs */
.dark .diag-ui-tabs,
[data-theme="dark"] .diag-ui-tabs,
.dark .diagnostics-tabs,
[data-theme="dark"] .diagnostics-tabs {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-ui-tabs .diag-tab,
[data-theme="dark"] .diag-ui-tabs .diag-tab,
.dark .diag-tab,
[data-theme="dark"] .diag-tab {
  color: #94a3b8 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.dark .diag-ui-tabs .diag-tab:hover,
[data-theme="dark"] .diag-ui-tabs .diag-tab:hover,
.dark .diag-tab:hover,
[data-theme="dark"] .diag-tab:hover {
  background: #141720 !important;
  color: #ffffff !important;
}

.dark .diag-ui-tabs .diag-tab.active,
[data-theme="dark"] .diag-ui-tabs .diag-tab.active,
.dark .diag-tab.active,
[data-theme="dark"] .diag-tab.active {
  background: #1a1e27 !important;
  background-color: #1a1e27 !important;
  color: #ffffff !important;
  border: 1px solid #3b4252 !important;
}

/* Diagnostic Cards (Brightness, Sensors, Drivers, Audit, Live Logs, Ports) */
.dark .diag-card,
[data-theme="dark"] .diag-card,
.dark .diag-empty,
[data-theme="dark"] .diag-empty,
.dark .diag-ui-card,
[data-theme="dark"] .diag-ui-card,
.dark .diag-suggestion,
[data-theme="dark"] .diag-suggestion {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .diag-card-title,
[data-theme="dark"] .diag-card-title,
.dark .diag-empty-title,
[data-theme="dark"] .diag-empty-title,
.dark .diag-suggestion-title,
[data-theme="dark"] .diag-suggestion-title {
  color: #ffffff !important;
}

.dark .diag-card-sub,
[data-theme="dark"] .diag-card-sub,
.dark .diag-empty-sub,
[data-theme="dark"] .diag-empty-sub,
.dark .diag-suggestion-sub,
[data-theme="dark"] .diag-suggestion-sub {
  color: #94a3b8 !important;
}

.dark .diag-card-icon,
[data-theme="dark"] .diag-card-icon,
.dark .diag-empty-icon,
[data-theme="dark"] .diag-empty-icon {
  background: #161922 !important;
  background-color: #161922 !important;
  color: #ffffff !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-card-icon svg,
[data-theme="dark"] .diag-card-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Toggles and Action Buttons */
.dark .diag-toggle,
[data-theme="dark"] .diag-toggle {
  background: #0e1015 !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-toggle button,
[data-theme="dark"] .diag-toggle button {
  background: transparent !important;
  color: #94a3b8 !important;
}

.dark .diag-toggle button:hover,
[data-theme="dark"] .diag-toggle button:hover {
  color: #ffffff !important;
}

.dark .diag-toggle button.active,
[data-theme="dark"] .diag-toggle button.active {
  background: #252834 !important;
  color: #ffffff !important;
  border: 1px solid #3b4252 !important;
  box-shadow: none !important;
}

.dark .diag-ghost-btn,
[data-theme="dark"] .diag-ghost-btn {
  background: #141720 !important;
  color: #e2e8f0 !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-ghost-btn:hover,
[data-theme="dark"] .diag-ghost-btn:hover {
  background: #202430 !important;
  color: #ffffff !important;
  border-color: #3b4252 !important;
}

/* Uptime, Bandwidth & Telemetry Metrics & Headings */
.dark .diag-ui-card-head,
[data-theme="dark"] .diag-ui-card-head {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .diag-ui-title,
[data-theme="dark"] .diag-ui-title {
  color: #ffffff !important;
}

.dark .diag-ui-title-icon,
[data-theme="dark"] .diag-ui-title-icon {
  background: #161922 !important;
  color: #ffffff !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-ui-metrics,
[data-theme="dark"] .diag-ui-metrics {
  background: #000000 !important;
}

.dark .diag-ui-metric,
[data-theme="dark"] .diag-ui-metric {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 8px !important;
}

.dark .diag-ui-metric strong,
[data-theme="dark"] .diag-ui-metric strong {
  color: #ffffff !important;
}

.dark .diag-ui-metric em,
[data-theme="dark"] .diag-ui-metric em {
  color: #94a3b8 !important;
}

.dark .diag-ui-summary-row,
[data-theme="dark"] .diag-ui-summary-row {
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .diag-ui-summary-row strong,
[data-theme="dark"] .diag-ui-summary-row strong {
  color: #ffffff !important;
}

.dark .diag-ui-summary-row span,
[data-theme="dark"] .diag-ui-summary-row span {
  color: #94a3b8 !important;
}

.dark .diag-ui-chart,
[data-theme="dark"] .diag-ui-chart {
  background: #000000 !important;
}

.dark .diag-ui-legend-line,
[data-theme="dark"] .diag-ui-legend-line {
  color: #94a3b8 !important;
  border-top: 1px solid #2a3245 !important;
}

.dark .diag-ui-events,
[data-theme="dark"] .diag-ui-events {
  background: #000000 !important;
  border-top: 1px solid #2a3245 !important;
}

.dark .diag-ui-events-title,
[data-theme="dark"] .diag-ui-events-title {
  color: #ffffff !important;
}

.dark .diag-ui-event,
[data-theme="dark"] .diag-ui-event {
  border-bottom: 1px solid #1a1d26 !important;
}

.dark .diag-ui-event strong,
[data-theme="dark"] .diag-ui-event strong {
  color: #ffffff !important;
}

.dark .diag-ui-event em,
[data-theme="dark"] .diag-ui-event em {
  color: #94a3b8 !important;
}

/* Telemetry Table */
.dark .diag-ui-table-wrap,
[data-theme="dark"] .diag-ui-table-wrap {
  background: #000000 !important;
}

.dark .diag-ui-table,
[data-theme="dark"] .diag-ui-table {
  background: #000000 !important;
}

.dark .diag-ui-table th,
[data-theme="dark"] .diag-ui-table th {
  background: #000000 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .diag-ui-table td,
[data-theme="dark"] .diag-ui-table td {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #161822 !important;
}

.dark .diag-ui-table-foot,
[data-theme="dark"] .diag-ui-table-foot {
  background: #000000 !important;
  color: #94a3b8 !important;
  border-top: 1px solid #2a3245 !important;
}

/* Ports within Drivers */
.dark .port-card,
[data-theme="dark"] .port-card {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .port-card-head,
[data-theme="dark"] .port-card-head {
  border-bottom: 1px solid #1a1d26 !important;
}

.dark .port-card-title,
[data-theme="dark"] .port-card-title,
.dark .port-card-name,
[data-theme="dark"] .port-card-name {
  color: #ffffff !important;
}

.dark .port-card-type,
[data-theme="dark"] .port-card-type {
  background: #181a20 !important;
  color: #94a3b8 !important;
  border: 1px solid #2a3245 !important;
}

.dark .port-card-metric .port-metric-label,
[data-theme="dark"] .port-card-metric .port-metric-label {
  color: #94a3b8 !important;
}

.dark .port-card-metric .port-metric-value,
[data-theme="dark"] .port-card-metric .port-metric-value {
  color: #ffffff !important;
}

.dark .port-card-foot,
[data-theme="dark"] .port-card-foot {
  color: #64748b !important;
  border-top: 1px solid #1a1d26 !important;
}

.dark .ports-toolbar,
[data-theme="dark"] .ports-toolbar {
  color: #94a3b8 !important;
}

.dark .remote-tooling-table-wrap,
[data-theme="dark"] .remote-tooling-table-wrap {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 8px !important;
}

.dark .remote-tooling-table,
[data-theme="dark"] .remote-tooling-table {
  background: #000000 !important;
}

.dark .remote-tooling-table th,
[data-theme="dark"] .remote-tooling-table th {
  background: #000000 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .remote-tooling-table td,
[data-theme="dark"] .remote-tooling-table td {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #161822 !important;
}

.dark .diag-range-pills,
[data-theme="dark"] .diag-range-pills {
  background-color: #12141a !important;
  border: 1px solid #2a3245 !important;
}

.dark .diag-range-pills button,
[data-theme="dark"] .diag-range-pills button {
  color: #94a3b8 !important;
}

.dark .diag-range-pills button.active,
[data-theme="dark"] .diag-range-pills button.active {
  background-color: #252834 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PERFORMANCE & PROCESSES - TRUE BLACK TASK MANAGER OVERRIDES
   ========================================================================== */
.dark .taskmgr-performance-container,
[data-theme="dark"] .taskmgr-performance-container,
.dark .taskmgr-procs-container,
[data-theme="dark"] .taskmgr-procs-container {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .taskmgr-top-bar,
[data-theme="dark"] .taskmgr-top-bar,
.dark .taskmgr-procs-toolbar,
[data-theme="dark"] .taskmgr-procs-toolbar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .taskmgr-top-title,
[data-theme="dark"] .taskmgr-top-title,
.dark .taskmgr-procs-title,
[data-theme="dark"] .taskmgr-procs-title {
  color: #ffffff !important;
}

.dark .taskmgr-action-btn,
[data-theme="dark"] .taskmgr-action-btn,
.dark .taskmgr-btn,
[data-theme="dark"] .taskmgr-btn {
  background: #141720 !important;
  border: 1px solid #2a3245 !important;
  color: #e2e8f0 !important;
}

.dark .taskmgr-action-btn:hover,
[data-theme="dark"] .taskmgr-action-btn:hover,
.dark .taskmgr-btn:hover:not(:disabled),
[data-theme="dark"] .taskmgr-btn:hover:not(:disabled) {
  background: #202430 !important;
  border-color: #3b4252 !important;
  color: #ffffff !important;
}

.dark .taskmgr-body-layout,
[data-theme="dark"] .taskmgr-body-layout,
.dark .taskmgr-main-panel,
[data-theme="dark"] .taskmgr-main-panel,
.dark .taskmgr-content,
[data-theme="dark"] .taskmgr-content {
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark .taskmgr-sidebar,
[data-theme="dark"] .taskmgr-sidebar {
  background: #000000 !important;
  border-right: 1px solid #2a3245 !important;
}

.dark .taskmgr-sidebar-item,
[data-theme="dark"] .taskmgr-sidebar-item {
  background: transparent !important;
  border: 1px solid transparent !important;
}

.dark .taskmgr-sidebar-item:hover,
[data-theme="dark"] .taskmgr-sidebar-item:hover {
  background: #141720 !important;
}

.dark .taskmgr-sidebar-item.active,
[data-theme="dark"] .taskmgr-sidebar-item.active {
  background: #1a1e27 !important;
  border: 1px solid #3b4252 !important;
  box-shadow: none !important;
}

.dark .taskmgr-sidebar-name,
[data-theme="dark"] .taskmgr-sidebar-name {
  color: #ffffff !important;
}

.dark .taskmgr-sidebar-sub,
[data-theme="dark"] .taskmgr-sidebar-sub {
  color: #94a3b8 !important;
}

.dark .taskmgr-panel-header,
[data-theme="dark"] .taskmgr-panel-header {
  border-bottom: 1px solid #2a3245 !important;
}

.dark .taskmgr-panel-title,
[data-theme="dark"] .taskmgr-panel-title {
  color: #ffffff !important;
}

.dark .taskmgr-panel-spec,
[data-theme="dark"] .taskmgr-panel-spec {
  color: #94a3b8 !important;
}

.dark .taskmgr-chart-card,
[data-theme="dark"] .taskmgr-chart-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .taskmgr-chart-header,
[data-theme="dark"] .taskmgr-chart-header {
  color: #94a3b8 !important;
}

.dark .taskmgr-comp-title,
[data-theme="dark"] .taskmgr-comp-title {
  color: #94a3b8 !important;
}

.dark .taskmgr-comp-bar,
[data-theme="dark"] .taskmgr-comp-bar {
  border-color: #2a3245 !important;
  background: #181a20 !important;
}

.dark .taskmgr-comp-free,
[data-theme="dark"] .taskmgr-comp-free {
  background: #2a2d38 !important;
}

.dark .taskmgr-stats-grid,
[data-theme="dark"] .taskmgr-stats-grid {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .taskmgr-metric-lbl,
[data-theme="dark"] .taskmgr-metric-lbl {
  color: #94a3b8 !important;
}

.dark .taskmgr-metric-big,
[data-theme="dark"] .taskmgr-metric-big {
  color: #ffffff !important;
}

.dark .taskmgr-metric-medium,
[data-theme="dark"] .taskmgr-metric-medium {
  color: #ffffff !important;
}

.dark .specs-col,
[data-theme="dark"] .specs-col {
  border-left: 1px solid #2a3245 !important;
}

.dark .taskmgr-spec-row .lbl,
[data-theme="dark"] .taskmgr-spec-row .lbl {
  color: #94a3b8 !important;
}

.dark .taskmgr-spec-row .val,
[data-theme="dark"] .taskmgr-spec-row .val {
  color: #ffffff !important;
}

.dark .taskmgr-grid-lines line,
[data-theme="dark"] .taskmgr-grid-lines line {
  stroke: #1e2230 !important;
}

.dark .taskmgr-gpu-quad,
[data-theme="dark"] .taskmgr-gpu-quad {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .taskmgr-gpu-quad-head,
[data-theme="dark"] .taskmgr-gpu-quad-head {
  color: #94a3b8 !important;
}

/* Processes Table */
.dark .taskmgr-procs-search,
[data-theme="dark"] .taskmgr-procs-search {
  background: #111318 !important;
  border: 1px solid #2a3245 !important;
}

.dark .taskmgr-procs-search input,
[data-theme="dark"] .taskmgr-procs-search input {
  color: #ffffff !important;
}

.dark .taskmgr-toast-banner,
[data-theme="dark"] .taskmgr-toast-banner {
  background: #0a2618 !important;
  border-bottom: 1px solid #14532d !important;
  color: #86efac !important;
}

.dark .taskmgr-procs-table-wrap,
[data-theme="dark"] .taskmgr-procs-table-wrap {
  background: #000000 !important;
}

.dark .taskmgr-procs-table,
[data-theme="dark"] .taskmgr-procs-table {
  background: #000000 !important;
}

.dark .taskmgr-procs-table th,
[data-theme="dark"] .taskmgr-procs-table th {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #94a3b8 !important;
  border-bottom: 2px solid #2a3245 !important;
}

.dark .metric-th-head .big-pct,
[data-theme="dark"] .metric-th-head .big-pct {
  color: #ffffff !important;
}

.dark .metric-th-head .lbl,
[data-theme="dark"] .metric-th-head .lbl {
  color: #94a3b8 !important;
}

.dark .group-header-tr,
[data-theme="dark"] .group-header-tr {
  background: #0d0f14 !important;
  border-bottom: 1px solid #222634 !important;
}

.dark .group-header-tr:hover,
[data-theme="dark"] .group-header-tr:hover {
  background: #151822 !important;
}

.dark .group-title,
[data-theme="dark"] .group-title {
  color: #e2e8f0 !important;
}

.dark .proc-row,
[data-theme="dark"] .proc-row {
  border-bottom: 1px solid #141722 !important;
  background: #000000 !important;
}

.dark .proc-row:hover,
[data-theme="dark"] .proc-row:hover {
  background: #11141c !important;
}

.dark .proc-row.selected,
[data-theme="dark"] .proc-row.selected {
  background: #1e2230 !important;
}

.dark .proc-name-text,
[data-theme="dark"] .proc-name-text {
  color: #ffffff !important;
}

.dark .col-metric,
[data-theme="dark"] .col-metric {
  color: #ffffff !important;
}

/* DatraShell (CLI) - True Black Container */
.dark .datrashell-container,
[data-theme="dark"] .datrashell-container {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .datrashell-header,
[data-theme="dark"] .datrashell-header {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .datrashell-presets-bar,
[data-theme="dark"] .datrashell-presets-bar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .datrashell-terminal-body,
[data-theme="dark"] .datrashell-terminal-body {
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark .datrashell-input-bar,
[data-theme="dark"] .datrashell-input-bar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-top: 1px solid #2a3245 !important;
}

.dark .datrashell-output-wrap,
[data-theme="dark"] .datrashell-output-wrap {
  background: #090b10 !important;
  border: 1px solid #2a3245 !important;
  color: #e2e8f0 !important;
}

.dark .scope-select {
  background-color: #1a1a1a !important;
  border-color: #27272a !important;
  color: #ffffff !important;
}

.dark .delete-activity {
  background-color: #1f1f23 !important;
  border-color: #27272a !important;
  color: #ffffff !important;
}

.dark .devices-container.techdesk-old,
.dark .techdesk-old,
.dark.techdesk-old {
  background: transparent !important;
}

.dark .techdesk-old .devices-left-panel,
.dark .techdesk-old .devices-center-panel,
.dark .techdesk-old .devices-right-panel,
.dark .techdesk-old .device-section,
.dark .techdesk-old .control-section,
.dark .techdesk-old .players-panel.techdesk-players,
.dark .techdesk-old .player-card,
.dark .devices-right-panel,
.dark .players-panel,
.dark .player-card {
  border-color: #2a3245 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .techdesk-old .players-panel.techdesk-players .info-grid .row,
.dark .info-grid .row,
.dark .player-system-info .info-grid .row {
  border-bottom: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark .techdesk-old .device-section-header,
.dark .techdesk-old .control-section-header,
.dark .techdesk-old .system-info-header {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom-color: #2a3245 !important;
  color: #ffffff !important;
}

.dark .diag-ui-events,
.dark .diag-ui-event {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .diag-ui-events-title {
  border-bottom: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark .diag-ui-event strong,
.dark .diag-ui-event em {
  color: #ffffff !important;
}

.dark .profile-permission-list,
.dark .profile-panel,
.dark .profile-security-list {
  background-color: #000000 !important;
  background: #000000 !important;
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.dark .profile-security-row {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #27272a !important;
  border-radius: 0 !important;
  color: #ffffff !important;
}

.dark .profile-security-row:last-child {
  border-bottom: none !important;
}

.dark .profile-permission-row {
  border-bottom: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark .profile-permission-row:last-child {
  border-bottom: none !important;
}

.dark .profile-permission-icon {
  background-color: #241838 !important;
  color: #8b5cf6 !important;
}

.dark .profile-permission-name,
.dark .profile-permission-section h3,
.dark .profile-permissions-summary {
  color: #ffffff !important;
}

.dark .profile-permission-access {
  color: #a1a1aa !important;
}

.dark .profile-row {
  border-bottom: 1px solid #27272a !important;
  color: #ffffff !important;
}

.dark .profile-row:last-child {
  border-bottom: none !important;
}

.dark .profile-row-label {
  color: #a1a1aa !important;
}

.dark .profile-row-value {
  color: #ffffff !important;
}

.dark .profile-security-copy strong {
  color: #ffffff !important;
}

.dark .profile-security-copy span,
.dark .profile-security-status {
  color: #a1a1aa !important;
}

.dark .profile-security-action {
  background-color: #241838 !important;
  color: #c084fc !important;
  border: 1px solid #7c3aed !important;
}

/* ==========================================================================
   GLOBAL CANVAS & CLEAN ELEVATED SURFACES ENFORCEMENT
   Remove pure black overrides and restore crisp elevated card layers
   ========================================================================== */
.dark .app,
.dark .app-body,
.dark .main-content,
.dark .page-container,
.dark .impersonation-page-container {
  background-color: #000000 !important;
  background: #000000 !important;
}

.dark .breadcrumb-bar {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .card,
.dark .impersonation-card,
.dark .impersonation-form-card,
.dark .admin-card,
.dark .list-card,
.dark .panel,
.dark .kpi-card,
.dark .dash-card,
.dark .device-card,
.dark .stat-card,
.dark .metric-card {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Eliminate duplicate outline rings and glowing box-shadows */
.dark .card,
.dark .impersonation-card,
.dark .impersonation-form-card,
.dark .admin-card,
.dark .list-card,
.dark .panel,
.dark .kpi-card,
.dark .dash-card,
.dark .device-card,
.dark .units-table-card,
.dark .sidebar-section-card,
.dark .admin-table-container {
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid #2a3245 !important;
}

/* Remove grey fills on inputs, nested buttons, and controls */
.dark input,
.dark select,
.dark textarea,
.dark .impersonation-input-group input,
.dark .impersonation-input-group select {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus,
.dark .impersonation-input-group input:focus,
.dark .impersonation-input-group select:focus {
  border-color: #3b3b44 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Clean single outline on action buttons inside cards */
.dark .impersonation-card-action,
.dark .card button:not(.btn-primary) {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #ffffff !important;
}

.dark .impersonation-card-action:hover,
.dark .card button:not(.btn-primary):hover {
  border-color: #3b3b44 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.dark .impersonation-card.active {
  border-color: #8b5cf6 !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark .impersonation-card-action.active-btn {
  border-color: #8b5cf6 !important;
  color: #a78bfa !important;
  background: #241838 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   PROJECT-WIDE REMOVAL OF DUPLICATE CARD WRAPPERS & MULTI-OUTLINES
   ========================================================================== */

/* 1. All layout wrappers must be strictly transparent layout boxes (NO borders, NO card styling, NO shadows) */
.dark .units-layout-view,
.dark .units-main-content,
.dark .main-card,
.dark .units-main-card,
.dark .page-container,
.dark .page-wrap,
.dark .app-main,
.dark .dash-section-activity,
.dark .jobs-card-list,
.dark .jobs-column,
.dark .devices-left-panel,
.dark .devices-right-panel,
.dark .devices-center-panel,
.dark .control-panel,
.dark .profile-panel,
.dark .profile-content-area,
.dark .profile-two-col-grid,
.dark .overview-table-wrap,
.dark .user-table-wrap,
.dark .matrix-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 2. Remove all outer box-shadow halos & rings across the entire application */
.dark .card,
.dark .dash-section,
.dark .office-card,
.dark .sites-card,
.dark .admin-card,
.dark .list-card,
.dark .settings-card,
.dark .header-popover,
.dark .profile-card,
.dark .job-card,
.dark .job-item-card,
.dark .unit-card,
.dark .device-card,
.dark .dash-kpi-card,
.dark .player-stat-card,
.dark .units-table-card,
.dark .admin-header,
.dark .devices-panel-header,
.dark .units-panel-header,
.dark .control-section,
.dark .device-section,
.dark .inv-kpi-card,
.dark .inv-widget-card,
.dark .modal,
.dark .modal-content,
.dark .modal-card,
.dark .dialog-content,
.dark .player-modal,
.dark .job-modal,
.dark .btn,
.dark .btn-primary,
.dark .control-btn,
.dark .tab,
.dark .tab-chip,
.dark input,
.dark select,
.dark textarea {
  box-shadow: none !important;
  outline: none !important;
}

/* 3. Eliminate duplicate card outlines and nested background divs */
.dark .card .card,
.dark .admin-card .admin-card,
.dark .dash-section .dash-section,
.dark .card .panel,
.dark .panel .panel,
.dark .card .selection-header-card,
.dark .units-table-card .selection-header-card,
.dark .units-table-card .overview-table-wrap,
.dark .units-table-card .selection-title-section,
.dark .units-table-card .selection-health-section,
.dark .units-table-card .units-table-card-header,
.dark .units-control-bar .control-section,
.dark .control-section,
.dark .selection-title-section,
.dark .selection-health-section,
.dark .card [class*="bg-surface"],
.dark .card [class*="bg-muted"],
.dark .admin-card [class*="bg-surface"],
.dark .admin-card [class*="bg-muted"],
.dark .card [class*="bg-[#"],
.dark .admin-card [class*="bg-[#"],
.dark [class*="card"] [class*="bg-surface"],
.dark [class*="card"] [class*="bg-muted"],
.dark [class*="card"] [class*="bg-[#"],
.dark [class*="panel"] [class*="bg-surface"],
.dark [class*="panel"] [class*="bg-muted"],
.dark [class*="panel"] [class*="bg-[#"],
.dark [class*="section"] [class*="bg-surface"],
.dark [class*="section"] [class*="bg-muted"],
.dark [class*="section"] [class*="bg-[#"],
.dark .page-container [class*="bg-surface"],
.dark .page-container [class*="bg-muted"],
.dark .page-container [class*="bg-[#"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 4. Single 1px crisp border on elevated dark surface for all cards across all pages */
.dark .card,
.dark .admin-card,
.dark .dash-section,
.dark .office-card,
.dark .sites-card,
.dark .list-card,
.dark .settings-card,
.dark .profile-card,
.dark .job-card,
.dark .job-item-card,
.dark .unit-card,
.dark .device-card,
.dark .dash-kpi-card,
.dark .player-stat-card,
.dark .units-table-card,
.dark .sidebar-section-card,
.dark .impersonation-card,
.dark .inv-kpi-card,
.dark .inv-widget-card,
.dark .inv-table-card,
.dark .tkt-card,
.dark .tkt-kpi-card,
.dark .tkt-table-card,
.dark .tkt-table-panel,
.dark .tkt-detail-drawer,
.dark .sys-kpi-card,
.dark .sys-card,
.dark .system-card,
.dark .devices-center-panel,
.dark .perf-kpi-card,
.dark .perf-card,
.dark .perf-panel-card,
.dark .analytics-kpi-card,
.dark .analytics-card,
.dark .reports-hub-card,
.dark .reports-table-card,
.dark .sys-services-card,
.dark .health-monitoring-container,
.dark .health-service-card,
.dark .downloads-card,
.dark .datrashell-container,
.dark .overview-section,
.dark .info-card,
.dark .linkgen-hero,
.dark .linkgen-options,
.dark .linkgen-result,
.dark .linkgen-table-card,
.dark .remote-control-panel,
.dark .rc-card,
[data-theme="dark"] .card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .dash-section,
[data-theme="dark"] .impersonation-card,
[data-theme="dark"] .office-card,
[data-theme="dark"] .sites-card,
[data-theme="dark"] .downloads-card,
[data-theme="dark"] .health-monitoring-container {
  border: 1px solid #2a3245 !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   GLOBAL REMOVAL OF VIOLET / PURPLE OUTLINE & BORDERS ON ALL INPUT BOXES
   ========================================================================== */
input,
input:focus,
input:focus-visible,
input:focus-within,
input:active,
select,
select:focus,
select:focus-visible,
select:active,
textarea,
textarea:focus,
textarea:focus-visible,
textarea:active,
.search-input,
.search-input:focus,
.search-box input,
.search-box input:focus,
.device-search-input,
.device-search-input:focus,
.device-search-input:focus-visible,
.device-dropdown-search,
.device-dropdown-search:focus-within,
.admin-input,
.admin-input:focus,
.form-input,
.form-input:focus,
.impersonation-input-group input,
.impersonation-input-group input:focus,
.custom-input-group input,
.custom-input-group input:focus,
.register-device-input,
.register-device-input:focus,
.edit-unit-input,
.edit-unit-input:focus,
.jobs-search-box input,
.jobs-search-box input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Light theme focus border */
body:not(.dark) input:focus,
body:not(.dark) select:focus,
body:not(.dark) textarea:focus,
body:not(.dark) .device-dropdown-search:focus-within,
body:not(.dark) .search-box input:focus,
body:not(.dark) .search-input:focus,
body:not(.dark) .admin-input:focus,
body:not(.dark) .form-input:focus {
  border-color: #94a3b8 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Dark theme focus border */
.dark input:focus,
.dark input:focus-visible,
.dark select:focus,
.dark select:focus-visible,
.dark textarea:focus,
.dark textarea:focus-visible,
.dark .device-dropdown-search:focus-within,
.dark .search-box input:focus,
.dark .search-input:focus,
.dark .admin-input:focus,
.dark .form-input:focus,
.dark .group-select:focus,
.dark .filter-select:focus,
.dark .pref-select:focus,
.dark .impersonation-input-group input:focus,
.dark .custom-input-group input:focus,
.dark .register-device-input:focus,
.dark .edit-unit-input:focus,
.dark .activity-search input:focus {
  border-color: #3b3b44 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Specific reset for dropdown inner search input to never show border/outline */
.device-search-input,
.device-search-input:focus,
.device-search-input:focus-visible,
.dark .device-search-input,
.dark .device-search-input:focus,
.dark .device-search-input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   FLATTEN MULTI-NESTED DIV CONTAINERS & CARDS
   ========================================================================== */
.dark .units-table-card .overview-table-wrap,
.units-table-card .overview-table-wrap {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.dark .units-table-card .overview-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.dark .units-table-card .overview-table thead th {
  border-top: 1px solid #2a3245 !important;
  border-bottom: 1px solid #2a3245 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #71717a !important;
  padding: 12px 14px !important;
}

.dark .units-table-card .overview-table tbody td {
  border-bottom: 1px solid #2a3245 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 14px !important;
}

.dark .units-table-card .overview-table tbody tr:last-child td {
  border-bottom: none !important;
}

.dark .units-table-card .overview-table tbody tr:hover td,
.dark .units-table-card .overview-table tbody tr:hover {
  background-color: #12141a !important;
  background: #12141a !important;
}

/* Units list view table dark styles */
.dark .units-table tbody tr {
  background-color: transparent !important;
  background: transparent !important;
}

.dark .units-table tbody tr td {
  border-bottom: 1px solid #2a3245 !important;
  border-right: 1px solid #2a3245 !important;
  color: #e4e4e7 !important;
}

.dark .units-table tbody tr:hover td {
  background-color: #12141a !important;
}

.dark .units-table tbody tr.selected td,
.dark .units-table tbody tr.selected {
  background-color: #1a1528 !important;
  box-shadow: inset 3px 0 0 #8b5cf6 !important;
}

/* Sites map sidebar dark mode */
.dark .dash-map-search {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .dash-map-search input {
  background: transparent !important;
  color: #ffffff !important;
}

/* ==========================================================================
   MAP & LOCATION FILTERS DARK THEME (HOME DASHBOARD & SITES)
   ========================================================================== */
.dark .dash-map-sidebar,
[data-theme="dark"] .dash-map-sidebar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-left: 1px solid #2a3245 !important;
  border-right: none !important;
  color: #f1f5f9 !important;
}

.dark .dash-map-search,
[data-theme="dark"] .dash-map-search,
.dark .dash-location-unit-search,
[data-theme="dark"] .dash-location-unit-search {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 10px !important;
  color: #94a3b8 !important;
}

.dark .dash-map-search input,
[data-theme="dark"] .dash-map-search input,
.dark .dash-location-unit-search input,
[data-theme="dark"] .dash-location-unit-search input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #f1f5f9 !important;
}

.dark .dash-map-search input::-moz-placeholder, [data-theme="dark"] .dash-map-search input::-moz-placeholder, .dark .dash-location-unit-search input::-moz-placeholder, [data-theme="dark"] .dash-location-unit-search input::-moz-placeholder {
  color: #64748b !important;
}

.dark .dash-map-search input::placeholder,
[data-theme="dark"] .dash-map-search input::placeholder,
.dark .dash-location-unit-search input::placeholder,
[data-theme="dark"] .dash-location-unit-search input::placeholder {
  color: #64748b !important;
}

.dark .dash-map-counts span,
[data-theme="dark"] .dash-map-counts span {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 9px !important;
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}

.dark .dash-map-group-row,
[data-theme="dark"] .dash-map-group-row {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
}

.dark .dash-map-group-row:hover,
[data-theme="dark"] .dash-map-group-row:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
}

.dark .dash-map-group-row.selected,
[data-theme="dark"] .dash-map-group-row.selected {
  background: #1e222e !important;
  background-color: #1e222e !important;
  border-color: #333a4c !important;
}

.dark .dash-map-group-row.muted,
[data-theme="dark"] .dash-map-group-row.muted {
  color: #64748b !important;
  opacity: 0.7 !important;
}

.dark .dash-map-group-main,
[data-theme="dark"] .dash-map-group-main,
.dark .dash-map-group-main span,
[data-theme="dark"] .dash-map-group-main span {
  color: #f1f5f9 !important;
}

.dark .dash-map-group-count,
[data-theme="dark"] .dash-map-group-count {
  color: #94a3b8 !important;
}

.dark .dash-map-empty-state,
[data-theme="dark"] .dash-map-empty-state {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px dashed #2a3245 !important;
  color: #717784 !important;
}

.dark .dash-status-bar,
[data-theme="dark"] .dash-status-bar {
  background: #2a3245 !important;
  background-color: #2a3245 !important;
}

.dark .dash-map-summary-strip,
[data-theme="dark"] .dash-map-summary-strip {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4) !important;
}

.dark .dash-map-summary-strip span,
[data-theme="dark"] .dash-map-summary-strip span {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f1f5f9 !important;
}

.dark .dash-map-summary-strip em,
[data-theme="dark"] .dash-map-summary-strip em {
  color: #94a3b8 !important;
}

.dark .dash-map-tools button,
[data-theme="dark"] .dash-map-tools button {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #94a3b8 !important;
}

.dark .dash-map-tools button.active,
[data-theme="dark"] .dash-map-tools button.active {
  background: #1e222e !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
  border-color: #333a4c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .dash-map-tools button:hover:not(.active),
[data-theme="dark"] .dash-map-tools button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: #3b3b44 !important;
}

.dark .dash-group-item,
[data-theme="dark"] .dash-group-item {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .dash-group-header,
[data-theme="dark"] .dash-group-header {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark .dash-group-header:hover,
[data-theme="dark"] .dash-group-header:hover {
  background: #12141a !important;
  background-color: #12141a !important;
}

.dark .dash-location-item,
[data-theme="dark"] .dash-location-item {
  background: transparent !important;
  color: #94a3b8 !important;
  border-left: 2px solid transparent !important;
}

.dark .dash-location-item:hover,
[data-theme="dark"] .dash-location-item:hover {
  background: #12141a !important;
  background-color: #12141a !important;
  color: #ffffff !important;
}

.dark .dash-location-item.selected,
[data-theme="dark"] .dash-location-item.selected {
  background: #12141a !important;
  background-color: #12141a !important;
  color: #ffffff !important;
  border-left-color: #8b5cf6 !important;
}

.dark .dash-location-drawer,
[data-theme="dark"] .dash-location-drawer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-left: 1px solid #2a3245 !important;
  box-shadow: -14px 0 30px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5f9 !important;
}

.dark .dash-location-head,
[data-theme="dark"] .dash-location-head {
  border-bottom: 1px solid #2a3245 !important;
}

.dark .dash-location-head h3,
[data-theme="dark"] .dash-location-head h3 {
  color: #ffffff !important;
}

.dark .dash-location-head span,
[data-theme="dark"] .dash-location-head span {
  color: #94a3b8 !important;
}

.dark .dash-location-close,
[data-theme="dark"] .dash-location-close {
  color: #94a3b8 !important;
}

.dark .dash-location-close:hover,
[data-theme="dark"] .dash-location-close:hover {
  background: #12141a !important;
  color: #ffffff !important;
}

.dark .dash-location-metrics div,
[data-theme="dark"] .dash-location-metrics div {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #94a3b8 !important;
}

.dark .dash-location-metrics strong,
[data-theme="dark"] .dash-location-metrics strong {
  color: #ffffff !important;
}

.dark .dash-location-metrics span,
[data-theme="dark"] .dash-location-metrics span {
  color: #94a3b8 !important;
}

.dark .dash-location-uptime>div,
[data-theme="dark"] .dash-location-uptime>div {
  color: #f1f5f9 !important;
}

.dark .dash-location-unit-head,
[data-theme="dark"] .dash-location-unit-head {
  border-top: 1px solid #2a3245 !important;
  color: #94a3b8 !important;
}

.dark .dash-location-unit,
[data-theme="dark"] .dash-location-unit {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-bottom: 1px solid #20222a !important;
  color: #f4f4f5 !important;
}

.dark .dash-location-unit strong,
[data-theme="dark"] .dash-location-unit strong {
  color: #ffffff !important;
}

.dark .dash-location-unit span,
[data-theme="dark"] .dash-location-unit span {
  color: #94a3b8 !important;
}

.dark .dash-location-unit em,
[data-theme="dark"] .dash-location-unit em {
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #717784 !important;
}

/* ==========================================================================
   PAGE HEADER CARDS DARK OVERRIDE
   ========================================================================== */
.dark .admin-hero,
.dark .hero-card,
.dark .units-header-card,
.dark .jobs-header-card,
.dark .page-hero-card,
.dark .page-header-card,
.dark .player-main-header,
.dark .jobs-hero-header,
.dark .profile-hero-header,
.dark .profile-header-card,
.dark .office-hero,
.dark .tkt-header-strip,
.dark .inv-header-strip,
.dark .sys-header-strip,
.dark .analytics-header-strip,
.dark .reports-hub-header,
.dark .dashboard-header,
.dark .rc-header,
.dark .control-header-card,
[data-theme="dark"] .admin-hero,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .units-header-card,
[data-theme="dark"] .jobs-header-card,
[data-theme="dark"] .page-hero-card,
[data-theme="dark"] .page-header-card,
[data-theme="dark"] .player-main-header,
[data-theme="dark"] .jobs-hero-header,
[data-theme="dark"] .profile-hero-header,
[data-theme="dark"] .profile-header-card,
[data-theme="dark"] .office-hero,
[data-theme="dark"] .tkt-header-strip,
[data-theme="dark"] .inv-header-strip,
[data-theme="dark"] .sys-header-strip,
[data-theme="dark"] .analytics-header-strip,
[data-theme="dark"] .reports-hub-header,
[data-theme="dark"] .dashboard-header,
[data-theme="dark"] .rc-header,
[data-theme="dark"] .control-header-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   FILTER SELECTOR CONTAINER TRANSPARENCY (REMOVE NESTED BOX ENCLOSING TABS)
   ========================================================================== */
.filter-row,
.filter-tabs,
.jobs-tabs,
.office-tabs,
.tkt-filter-tabs,
.reports-filter-chips,
.filter-row .filter-tabs,
.jobs-toolbar-row .jobs-tabs,
.office-toolbar .office-tabs,
body:not(.dark) .filter-row,
body:not(.dark) .filter-tabs,
[data-theme="light"] .filter-row,
[data-theme="light"] .filter-tabs,
.dark .filter-row,
.dark .filter-tabs,
.dark .jobs-tabs,
.dark .office-tabs,
.dark .tkt-filter-tabs,
.dark .reports-filter-chips,
.dark .filter-row .filter-tabs,
.dark .jobs-toolbar-row .jobs-tabs,
.dark .office-toolbar .office-tabs,
[data-theme="dark"] .filter-row,
[data-theme="dark"] .filter-tabs,
[data-theme="dark"] .jobs-tabs,
[data-theme="dark"] .office-tabs,
[data-theme="dark"] .tkt-filter-tabs,
[data-theme="dark"] .reports-filter-chips,
[data-theme="dark"] .filter-row .filter-tabs,
[data-theme="dark"] .jobs-toolbar-row .jobs-tabs,
[data-theme="dark"] .office-toolbar .office-tabs {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.filter-tabs,
.jobs-tabs,
.office-tabs,
.tkt-filter-tabs,
.reports-filter-chips,
.filter-row .filter-tabs,
.jobs-toolbar-row .jobs-tabs,
.office-toolbar .office-tabs,
.dark .filter-tabs,
.dark .jobs-tabs,
.dark .office-tabs,
.dark .tkt-filter-tabs,
.dark .reports-filter-chips,
.dark .filter-row .filter-tabs,
.dark .jobs-toolbar-row .jobs-tabs,
.dark .office-toolbar .office-tabs,
[data-theme="dark"] .filter-tabs,
[data-theme="dark"] .jobs-tabs,
[data-theme="dark"] .office-tabs,
[data-theme="dark"] .tkt-filter-tabs,
[data-theme="dark"] .reports-filter-chips,
[data-theme="dark"] .filter-row .filter-tabs,
[data-theme="dark"] .jobs-toolbar-row .jobs-tabs,
[data-theme="dark"] .office-toolbar .office-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ==========================================================================
   GLOBAL PAGE CONTAINERS - REMOVE CARD STYLING / OUTER BORDER
   ========================================================================== */
.player-page-container,
.perf-dashboard-container,
.agent-management-page,
.system-page,
.sites-page,
.batch-commands-page,
.sys-health-wrapper,
.analytics-page-wrapper,
.reports-hub-container,
.taskmgr-performance-container,
.taskmgr-procs-container,
body:not(.dark) .player-page-container,
body:not(.dark) .perf-dashboard-container,
body:not(.dark) .agent-management-page,
body:not(.dark) .system-page,
body:not(.dark) .sites-page,
body:not(.dark) .batch-commands-page,
body:not(.dark) .sys-health-wrapper,
body:not(.dark) .analytics-page-wrapper,
body:not(.dark) .reports-hub-container,
body:not(.dark) .taskmgr-performance-container,
body:not(.dark) .taskmgr-procs-container,
.dark .player-page-container,
.dark .perf-dashboard-container,
.dark .agent-management-page,
.dark .system-page,
.dark .sites-page,
.dark .batch-commands-page,
.dark .sys-health-wrapper,
.dark .analytics-page-wrapper,
.dark .reports-hub-container,
.dark .taskmgr-performance-container,
.dark .taskmgr-procs-container {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   GLOBAL SELECTED TABS & FILTERS - CLEAN BORDERLESS ACCENT PILL
   Exact match to sidebar active style (Agent management):
   - Background: var(--left-panel-active-bg, rgba(139, 92, 246, 0.22))
   - Border: none / 1px solid transparent (NO violet outline)
   - Color: #ffffff (pure white)
   - Font-weight: 600
   ========================================================================== */
.dark .filter-tabs .tab.active,
.dark .filter-tabs button.tab.active,
.dark .tab.active,
.dark button.tab.active,
.dark .notification-tab.active,
.dark button.notification-tab.active,
.dark .jobs-tab.active,
.dark .office-tab.active,
.dark .detail-tab.active,
.dark .tkt-tab.active,
.dark .reports-filter-chip.active,
.dark .tab-chip.active,
.dark .filter-btn.active,
.dark .filter-toggle-item.active,
.dark .view-mode-btn.active,
.dark .modal-tabs .tab.active,
.dark .segmented-btn.active,
.dark .user-management-page .filter-tabs .tab.active,
.dark .permissions-page .filter-tabs .tab.active,
.dark .sso-management-page .filter-tabs .tab.active,
.dark .api-keys-page .filter-tabs .tab.active,
.dark .auditlog-page .filter-tabs .tab.active,
.dark .tenant-management-page .filter-tabs .tab.active,
.dark .announcements-page .filter-tabs .tab.active,
.dark .downloads-page .filter-tabs .tab.active,
.dark .agent-management-page .filter-tabs .tab.active,
.dark .monitoring-reports-page .filter-tabs .tab.active,
.dark .filter-row .filter-tabs .tab.active,
[data-theme="dark"] .filter-tabs .tab.active,
[data-theme="dark"] .tab.active,
[data-theme="dark"] .notification-tab.active,
[data-theme="dark"] .jobs-tab.active,
[data-theme="dark"] .office-tab.active,
[data-theme="dark"] .view-mode-btn.active,
[data-theme="dark"] .reports-filter-chip.active,
[data-theme="dark"] .tab-chip.active {
  background: #1e222e !important;
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  border-color: #333a4c !important;
  outline: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .filter-tabs .tab.active:hover,
.dark .tab.active:hover,
.dark .notification-tab.active:hover,
[data-theme="dark"] .tab.active:hover,
[data-theme="dark"] .notification-tab.active:hover {
  background: #282e3f !important;
  border: 1px solid #444d64 !important;
  outline: none !important;
  color: #ffffff !important;
}

.dark .filter-tabs .tab:focus,
.dark .filter-tabs .tab:focus-visible,
.dark .tab:focus,
.dark .tab:focus-visible,
.dark .notification-tab:focus,
.dark .notification-tab:focus-visible,
[data-theme="dark"] .tab:focus,
[data-theme="dark"] .tab:focus-visible,
[data-theme="dark"] .notification-tab:focus,
[data-theme="dark"] .notification-tab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.dark .filter-tabs .tab.active svg,
.dark .tab.active svg,
.dark .jobs-tab.active svg,
.dark .office-tab.active svg,
.dark .detail-tab.active svg,
.dark .tab-chip.active svg,
.dark .reports-filter-chip.active svg,
[data-theme="dark"] .tab.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark .filter-tabs .tab.active .count-badge,
.dark .tab.active .count-badge,
.dark .tab.active .badge,
.dark .jobs-tab.active .badge,
.dark .office-tab.active .badge,
.dark .tab.active .tab-count,
[data-theme="dark"] .tab.active .count-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   HEADER POPOVERS, NOTIFICATIONS & QUICK ACCESS - DARK THEME
   ========================================================================== */
.dark .header-popover,
[data-theme="dark"] .header-popover {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

.dark .header-popover-head,
[data-theme="dark"] .header-popover-head {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .header-popover-title,
[data-theme="dark"] .header-popover-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .header-popover-close,
[data-theme="dark"] .header-popover-close {
  background: transparent !important;
  border: none !important;
  color: #949aa6 !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dark .header-popover-close:hover,
[data-theme="dark"] .header-popover-close:hover {
  background: #12141a !important;
  color: #ffffff !important;
}

.dark .notification-tabs,
[data-theme="dark"] .notification-tabs {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
  display: flex !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

.dark .notification-tab,
[data-theme="dark"] .notification-tab {
  flex: 1 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #949aa6 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.dark .notification-tab:hover:not(.active),
[data-theme="dark"] .notification-tab:hover:not(.active) {
  background-color: #12141a !important;
  background: #12141a !important;
  border-color: #3b455c !important;
  color: #ffffff !important;
}

.dark .header-popover-body,
[data-theme="dark"] .header-popover-body {
  background-color: #000000 !important;
  background: #000000 !important;
  padding: 12px !important;
}

.dark .header-empty,
[data-theme="dark"] .header-empty {
  color: #717784 !important;
  font-weight: 600 !important;
  padding: 24px 12px !important;
  text-align: center !important;
}

.dark .header-item,
[data-theme="dark"] .header-item {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}

.dark .header-item:hover,
[data-theme="dark"] .header-item:hover {
  background-color: #12141a !important;
  background: #12141a !important;
  border-color: #3b455c !important;
}

.dark .header-item.unread,
[data-theme="dark"] .header-item.unread {
  background-color: #12141a !important;
  background: #12141a !important;
  border-color: #2a3245 !important;
}

.dark .header-item-main,
[data-theme="dark"] .header-item-main {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

.dark .header-item-title,
[data-theme="dark"] .header-item-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.dark .header-item-sub,
[data-theme="dark"] .header-item-sub {
  color: #949aa6 !important;
}

.dark .header-item-action,
[data-theme="dark"] .header-item-action {
  background-color: #12141a !important;
  background: #12141a !important;
  border: 1px solid #2a3245 !important;
  color: #949aa6 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.dark .header-item-action:hover,
[data-theme="dark"] .header-item-action:hover {
  background-color: #2a3245 !important;
  background: #2a3245 !important;
  color: #ffffff !important;
}

.dark .quick-access-tile,
[data-theme="dark"] .quick-access-tile {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.dark .quick-access-tile:hover,
[data-theme="dark"] .quick-access-tile:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .quick-access-tile span,
[data-theme="dark"] .quick-access-tile span {
  color: #e2e8f0 !important;
}

.dark .quick-access-tile:hover span,
[data-theme="dark"] .quick-access-tile:hover span {
  color: #ffffff !important;
}

.dark .quick-access-icon,
[data-theme="dark"] .quick-access-icon {
  color: #a78bfa !important;
}

.dark .quick-access-tile em,
[data-theme="dark"] .quick-access-tile em {
  background: #8b5cf6 !important;
  color: #ffffff !important;
}

.dark .mini-form input,
[data-theme="dark"] .mini-form input {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

.dark .mini-form input:focus,
[data-theme="dark"] .mini-form input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
  outline: none !important;
}

.dark .mini-form button,
[data-theme="dark"] .mini-form button {
  background-color: #1e222e !important;
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .mini-form button:hover,
[data-theme="dark"] .mini-form button:hover {
  background-color: #282e3f !important;
  background: #282e3f !important;
  border-color: #444d64 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

.dark .todo-text .header-item-title,
[data-theme="dark"] .todo-text .header-item-title {
  color: #ffffff !important;
}

.dark .todo-text .header-item-sub,
[data-theme="dark"] .todo-text .header-item-sub {
  color: #949aa6 !important;
}
/* ==========================================================================
   SOLID TRUE BLACK SYSTEM - UNIVERSAL ENFORCER FOR ALL DIVS, CARDS & CONTAINERS
   ========================================================================== */
.dark,
[data-theme="dark"],
.dark body,
[data-theme="dark"] body,
.dark #root,
.dark .app,
.dark .app-body,
.dark .main-content,
.dark .page-container,
.dark .app-header,
.dark .left-panel,
.dark .sidebar,
.dark .breadcrumb-bar,
.dark .card,
.dark .dash-card,
.dark .stat-card,
.dark .metric-card,
.dark .unit-card,
.dark .device-card,
.dark .job-card,
.dark .job-item-card,
.dark .office-card,
.dark .tenant-card,
.dark .user-card,
.dark .role-card,
.dark .permission-card,
.dark .audit-card,
.dark .list-card,
.dark .settings-card,
.dark .profile-card,
.dark .admin-card,
.dark .panel,
.dark .admin-panel,
.dark .table-container,
.dark .table-wrap,
.dark .overview-table-wrap,
.dark .player-table-wrap,
.dark .sites-table-wrap,
.dark .admin-table-wrap,
.dark .header-popover,
.dark .header-popover-head,
.dark .header-popover-body,
.dark .notification-tabs,
.dark .modal-content,
.dark .dialog-content,
.dark .player-modal,
.dark .modal-header,
.dark .modal-footer,
.dark .player-modal-header,
.dark .player-modal-footer,
.dark .drawer,
.dark .settings-drawer,
.dark .right-panel-drawer,
.dark .right-panel-header,
.dark .units-quickbar-section,
.dark .units-refresh-section,
.dark .dash-view-toggle,
.dark .segmented-control,
[data-theme="dark"] .card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .unit-card,
[data-theme="dark"] .device-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .office-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .table-container,
[data-theme="dark"] .header-popover,
[data-theme="dark"] .right-panel-drawer,
[data-theme="dark"] .right-panel-header,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dialog-content {
  background-color: #000000 !important;
  background: #000000 !important;
}

.dark .card,
.dark .dash-card,
.dark .unit-card,
.dark .device-card,
.dark .job-card,
.dark .office-card,
.dark .admin-card,
.dark .panel,
.dark .table-container,
.dark .header-popover,
.dark .modal-content,
[data-theme="dark"] .card,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .unit-card,
[data-theme="dark"] .device-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .table-container {
  border-color: #2a3245 !important;
}

/* ==========================================================================
   GLOBAL SEARCH INPUT & ICON UNIFICATION
   Ensures the search icon is always INSIDE the unified search text box globally.
   ========================================================================== */

/* 1. All search text box containers behave as a single unified input box */
.dark .input-icon,
[data-theme="dark"] .input-icon,
.dark .user-search,
[data-theme="dark"] .user-search,
.dark .role-search,
[data-theme="dark"] .role-search,
.dark .jobs-search-box,
[data-theme="dark"] .jobs-search-box,
.dark .components-search-box,
[data-theme="dark"] .components-search-box,
.dark .bc-search-box,
[data-theme="dark"] .bc-search-box,
.dark .search-input-wrap,
[data-theme="dark"] .search-input-wrap,
.dark .reports-search-input-box,
[data-theme="dark"] .reports-search-input-box,
.dark .inv-search-box,
[data-theme="dark"] .inv-search-box,
.dark .tkt-search-input,
[data-theme="dark"] .tkt-search-input,
.dark .dash-location-unit-search,
[data-theme="dark"] .dash-location-unit-search,
.dark .dash-map-search,
[data-theme="dark"] .dash-map-search,
.dark .linkgen-search,
[data-theme="dark"] .linkgen-search,
.dark .device-dropdown-search,
[data-theme="dark"] .device-dropdown-search,
.dark .taskmgr-procs-search,
[data-theme="dark"] .taskmgr-procs-search,
.dark .header-search,
[data-theme="dark"] .header-search,
.dark .activity-search,
[data-theme="dark"] .activity-search,
.dark .office-search-box,
[data-theme="dark"] .office-search-box,
.dark .table-settings-search-box,
[data-theme="dark"] .table-settings-search-box,
.dark .job-unit-search,
[data-theme="dark"] .job-unit-search,
.dark .search-box,
[data-theme="dark"] .search-box,
.dark .search-wrapper,
[data-theme="dark"] .search-wrapper,
.dark .search-bar,
[data-theme="dark"] .search-bar,
.dark .search-container,
[data-theme="dark"] .search-container {
  display: flex !important;
  align-items: center !important;
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 8px !important;
  padding: 0 10px 0 12px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:not(.dark) .input-icon,
body:not(.dark) .user-search,
body:not(.dark) .role-search,
body:not(.dark) .jobs-search-box,
body:not(.dark) .components-search-box,
body:not(.dark) .bc-search-box,
body:not(.dark) .search-input-wrap,
body:not(.dark) .reports-search-input-box,
body:not(.dark) .inv-search-box,
body:not(.dark) .tkt-search-input,
body:not(.dark) .dash-location-unit-search,
body:not(.dark) .dash-map-search,
body:not(.dark) .linkgen-search,
body:not(.dark) .device-dropdown-search,
body:not(.dark) .taskmgr-procs-search,
body:not(.dark) .activity-search,
body:not(.dark) .office-search-box,
body:not(.dark) .table-settings-search-box,
body:not(.dark) .job-unit-search,
body:not(.dark) .search-box,
body:not(.dark) .search-wrapper,
body:not(.dark) .search-bar,
body:not(.dark) .search-container,
[data-theme="light"] .input-icon,
[data-theme="light"] .user-search,
[data-theme="light"] .role-search,
[data-theme="light"] .jobs-search-box,
[data-theme="light"] .components-search-box,
[data-theme="light"] .bc-search-box,
[data-theme="light"] .search-input-wrap,
[data-theme="light"] .reports-search-input-box,
[data-theme="light"] .inv-search-box,
[data-theme="light"] .tkt-search-input,
[data-theme="light"] .dash-location-unit-search,
[data-theme="light"] .dash-map-search,
[data-theme="light"] .linkgen-search,
[data-theme="light"] .device-dropdown-search,
[data-theme="light"] .taskmgr-procs-search,
[data-theme="light"] .activity-search,
[data-theme="light"] .office-search-box,
[data-theme="light"] .table-settings-search-box,
[data-theme="light"] .job-unit-search,
[data-theme="light"] .search-box,
[data-theme="light"] .search-wrapper,
[data-theme="light"] .search-bar,
[data-theme="light"] .search-container {
  display: flex !important;
  align-items: center !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 10px 0 12px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  position: relative !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* 2. Focus state lights up the container border cleanly */
.input-icon:focus-within,
.dark .input-icon:focus-within,
[data-theme="dark"] .input-icon:focus-within,
.user-search:focus-within,
.dark .user-search:focus-within,
.role-search:focus-within,
.dark .role-search:focus-within,
.jobs-search-box:focus-within,
.dark .jobs-search-box:focus-within,
.components-search-box:focus-within,
.dark .components-search-box:focus-within,
.bc-search-box:focus-within,
.dark .bc-search-box:focus-within,
.search-input-wrap:focus-within,
.dark .search-input-wrap:focus-within,
.reports-search-input-box:focus-within,
.dark .reports-search-input-box:focus-within,
.inv-search-box:focus-within,
.dark .inv-search-box:focus-within,
.tkt-search-input:focus-within,
.dark .tkt-search-input:focus-within,
.dash-location-unit-search:focus-within,
.dark .dash-location-unit-search:focus-within,
.dash-map-search:focus-within,
.dark .dash-map-search:focus-within,
.linkgen-search:focus-within,
.dark .linkgen-search:focus-within,
.device-dropdown-search:focus-within,
.dark .device-dropdown-search:focus-within,
.taskmgr-procs-search:focus-within,
.dark .taskmgr-procs-search:focus-within,
.header-search:focus-within,
.dark .header-search:focus-within,
.activity-search:focus-within,
.dark .activity-search:focus-within,
.office-search-box:focus-within,
.dark .office-search-box:focus-within,
.table-settings-search-box:focus-within,
.dark .table-settings-search-box:focus-within,
.job-unit-search:focus-within,
.dark .job-unit-search:focus-within,
.search-box:focus-within,
.dark .search-box:focus-within,
.search-wrapper:focus-within,
.dark .search-wrapper:focus-within,
.search-bar:focus-within,
.dark .search-bar:focus-within,
.search-container:focus-within,
.dark .search-container:focus-within {
  border-color: #3b3b44 !important;
  outline: none !important;
  box-shadow: none !important;
}

body:not(.dark) .input-icon:focus-within,
[data-theme="light"] .input-icon:focus-within,
body:not(.dark) .user-search:focus-within,
[data-theme="light"] .user-search:focus-within,
body:not(.dark) .role-search:focus-within,
[data-theme="light"] .role-search:focus-within,
body:not(.dark) .jobs-search-box:focus-within,
[data-theme="light"] .jobs-search-box:focus-within,
body:not(.dark) .components-search-box:focus-within,
[data-theme="light"] .components-search-box:focus-within,
body:not(.dark) .bc-search-box:focus-within,
[data-theme="light"] .bc-search-box:focus-within,
body:not(.dark) .search-input-wrap:focus-within,
[data-theme="light"] .search-input-wrap:focus-within,
body:not(.dark) .reports-search-input-box:focus-within,
[data-theme="light"] .reports-search-input-box:focus-within,
body:not(.dark) .inv-search-box:focus-within,
[data-theme="light"] .inv-search-box:focus-within,
body:not(.dark) .tkt-search-input:focus-within,
[data-theme="light"] .tkt-search-input:focus-within,
body:not(.dark) .dash-location-unit-search:focus-within,
[data-theme="light"] .dash-location-unit-search:focus-within,
body:not(.dark) .dash-map-search:focus-within,
[data-theme="light"] .dash-map-search:focus-within,
body:not(.dark) .linkgen-search:focus-within,
[data-theme="light"] .linkgen-search:focus-within,
body:not(.dark) .device-dropdown-search:focus-within,
[data-theme="light"] .device-dropdown-search:focus-within,
body:not(.dark) .taskmgr-procs-search:focus-within,
[data-theme="light"] .taskmgr-procs-search:focus-within,
body:not(.dark) .header-search:focus-within,
[data-theme="light"] .header-search:focus-within,
body:not(.dark) .activity-search:focus-within,
[data-theme="light"] .activity-search:focus-within,
body:not(.dark) .office-search-box:focus-within,
[data-theme="light"] .office-search-box:focus-within,
body:not(.dark) .table-settings-search-box:focus-within,
[data-theme="light"] .table-settings-search-box:focus-within,
body:not(.dark) .job-unit-search:focus-within,
[data-theme="light"] .job-unit-search:focus-within,
body:not(.dark) .search-box:focus-within,
[data-theme="light"] .search-box:focus-within,
body:not(.dark) .search-wrapper:focus-within,
[data-theme="light"] .search-wrapper:focus-within,
body:not(.dark) .search-bar:focus-within,
[data-theme="light"] .search-bar:focus-within,
body:not(.dark) .search-container:focus-within,
[data-theme="light"] .search-container:focus-within,
body:not(.dark) [class*="search"]:focus-within,
[data-theme="light"] [class*="search"]:focus-within,
body:not(.dark) [class*="-search"]:focus-within,
[data-theme="light"] [class*="-search"]:focus-within,
body:not(.dark) [class*="search-"]:focus-within,
[data-theme="light"] [class*="search-"]:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none !important;
}

/* 3. Search icons inside the text box on the left */
.input-icon .icon,
.input-icon .icon svg,
.dark .input-icon .icon,
.dark .input-icon .icon svg,
.user-search .icon,
.user-search .icon svg,
.dark .user-search .icon,
.dark .user-search .icon svg,
.role-search .icon,
.role-search .icon svg,
.dark .role-search .icon,
.dark .role-search .icon svg,
.jobs-search-box .search-icon,
.jobs-search-box svg,
.dark .jobs-search-box .search-icon,
.dark .jobs-search-box svg,
.components-search-box .search-icon,
.components-search-box svg,
.dark .components-search-box .search-icon,
.dark .components-search-box svg,
.bc-search-box svg,
.dark .bc-search-box svg,
.search-input-wrap .search-icon,
.search-input-wrap svg,
.dark .search-input-wrap .search-icon,
.dark .search-input-wrap svg,
.reports-search-input-box .reports-search-icon,
.reports-search-input-box svg,
.dark .reports-search-input-box .reports-search-icon,
.dark .reports-search-input-box svg,
.inv-search-box .search-icon,
.inv-search-box svg,
.dark .inv-search-box .search-icon,
.dark .inv-search-box svg,
.tkt-search-input svg,
.dark .tkt-search-input svg,
.dash-location-unit-search svg,
.dark .dash-location-unit-search svg,
.dash-map-search svg,
.dark .dash-map-search svg,
.linkgen-search svg,
.dark .linkgen-search svg,
.device-dropdown-search .device-search-icon,
.device-dropdown-search svg,
.dark .device-dropdown-search .device-search-icon,
.dark .device-dropdown-search svg,
.taskmgr-procs-search .search-icon,
.taskmgr-procs-search svg,
.dark .taskmgr-procs-search .search-icon,
.dark .taskmgr-procs-search svg,
.header-search-icon,
.dark .header-search-icon,
.activity-search .search-icon,
.activity-search svg,
.dark .activity-search .search-icon,
.dark .activity-search svg,
.office-search-box .search-icon,
.office-search-box svg,
.dark .office-search-box .search-icon,
.dark .office-search-box svg,
.table-settings-search-box .search-icon,
.table-settings-search-box svg,
.dark .table-settings-search-box .search-icon,
.dark .table-settings-search-box svg,
.job-unit-search svg,
.dark .job-unit-search svg,
.search-box svg,
.dark .search-box svg,
.search-wrapper svg,
.dark .search-wrapper svg,
.search-bar svg,
.dark .search-bar svg,
.search-container svg,
.dark .search-container svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  line-height: 1 !important;
}

/* 4. Inputs inside search containers: borderless, transparent, seamless filling of text box */
.input-icon input,
.dark .input-icon input,
[data-theme="dark"] .input-icon input,
.user-search input,
.dark .user-search input,
.role-search input,
.dark .role-search input,
.jobs-search-box input,
.dark .jobs-search-box input,
.components-search-box input,
.dark .components-search-box input,
.bc-search-box input,
.dark .bc-search-box input,
.search-input-wrap input,
.dark .search-input-wrap input,
.reports-search-input-box input,
.dark .reports-search-input-box input,
.inv-search-box input,
.dark .inv-search-box input,
.tkt-search-input input,
.dark .tkt-search-input input,
.dash-location-unit-search input,
.dark .dash-location-unit-search input,
.dash-map-search input,
.dark .dash-map-search input,
.linkgen-search input,
.dark .linkgen-search input,
.device-dropdown-search input,
.dark .device-dropdown-search input,
.taskmgr-procs-search input,
.dark .taskmgr-procs-search input,
.header-search input,
.dark .header-search input,
.activity-search input,
.dark .activity-search input,
.office-search-box input,
.dark .office-search-box input,
.table-settings-search-box input,
.dark .table-settings-search-box input,
.job-unit-search input,
.dark .job-unit-search input,
.search-box input,
.dark .search-box input,
.search-wrapper input,
.dark .search-wrapper input,
.search-bar input,
.dark .search-bar input,
.search-container input,
.dark .search-container input,
[class*="search"] input,
[class*="-search"] input,
[class*="search-"] input,
body:not(.dark) [class*="search"] input,
[data-theme="light"] [class*="search"] input,
body:not(.dark) [class*="-search"] input,
[data-theme="light"] [class*="-search"] input,
body:not(.dark) [class*="search-"] input,
[data-theme="light"] [class*="search-"] input {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

.dark .input-icon input,
[data-theme="dark"] .input-icon input,
.dark .user-search input,
[data-theme="dark"] .user-search input,
.dark .role-search input,
[data-theme="dark"] .role-search input,
.dark .jobs-search-box input,
[data-theme="dark"] .jobs-search-box input,
.dark .components-search-box input,
[data-theme="dark"] .components-search-box input,
.dark .bc-search-box input,
[data-theme="dark"] .bc-search-box input,
.dark .search-input-wrap input,
[data-theme="dark"] .search-input-wrap input,
.dark .reports-search-input-box input,
[data-theme="dark"] .reports-search-input-box input,
.dark .inv-search-box input,
[data-theme="dark"] .inv-search-box input,
.dark .tkt-search-input input,
[data-theme="dark"] .tkt-search-input input,
.dark .dash-location-unit-search input,
[data-theme="dark"] .dash-location-unit-search input,
.dark .dash-map-search input,
[data-theme="dark"] .dash-map-search input,
.dark .linkgen-search input,
[data-theme="dark"] .linkgen-search input,
.dark .device-dropdown-search input,
[data-theme="dark"] .device-dropdown-search input,
.dark .taskmgr-procs-search input,
[data-theme="dark"] .taskmgr-procs-search input,
.dark .header-search input,
[data-theme="dark"] .header-search input,
.dark .activity-search input,
[data-theme="dark"] .activity-search input,
.dark .office-search-box input,
[data-theme="dark"] .office-search-box input,
.dark .table-settings-search-box input,
[data-theme="dark"] .table-settings-search-box input,
.dark .job-unit-search input,
[data-theme="dark"] .job-unit-search input,
.dark .search-box input,
[data-theme="dark"] .search-box input,
.dark .search-wrapper input,
[data-theme="dark"] .search-wrapper input,
.dark .search-bar input,
[data-theme="dark"] .search-bar input,
.dark .search-container input,
[data-theme="dark"] .search-container input {
  color: #ffffff !important;
}

body:not(.dark) .input-icon input,
[data-theme="light"] .input-icon input,
body:not(.dark) .user-search input,
[data-theme="light"] .user-search input,
body:not(.dark) .role-search input,
[data-theme="light"] .role-search input,
body:not(.dark) .jobs-search-box input,
[data-theme="light"] .jobs-search-box input,
body:not(.dark) .components-search-box input,
[data-theme="light"] .components-search-box input,
body:not(.dark) .bc-search-box input,
[data-theme="light"] .bc-search-box input,
body:not(.dark) .search-input-wrap input,
[data-theme="light"] .search-input-wrap input,
body:not(.dark) .reports-search-input-box input,
[data-theme="light"] .reports-search-input-box input,
body:not(.dark) .inv-search-box input,
[data-theme="light"] .inv-search-box input,
body:not(.dark) .tkt-search-input input,
[data-theme="light"] .tkt-search-input input,
body:not(.dark) .dash-location-unit-search input,
[data-theme="light"] .dash-location-unit-search input,
body:not(.dark) .dash-map-search input,
[data-theme="light"] .dash-map-search input,
body:not(.dark) .linkgen-search input,
[data-theme="light"] .linkgen-search input,
body:not(.dark) .device-dropdown-search input,
[data-theme="light"] .device-dropdown-search input,
body:not(.dark) .taskmgr-procs-search input,
[data-theme="light"] .taskmgr-procs-search input,
body:not(.dark) .header-search input,
[data-theme="light"] .header-search input,
body:not(.dark) .activity-search input,
[data-theme="light"] .activity-search input,
body:not(.dark) .office-search-box input,
[data-theme="light"] .office-search-box input,
body:not(.dark) .table-settings-search-box input,
[data-theme="light"] .table-settings-search-box input,
body:not(.dark) .job-unit-search input,
[data-theme="light"] .job-unit-search input,
body:not(.dark) .search-box input,
[data-theme="light"] .search-box input,
body:not(.dark) .search-wrapper input,
[data-theme="light"] .search-wrapper input,
body:not(.dark) .search-bar input,
[data-theme="light"] .search-bar input,
body:not(.dark) .search-container input,
[data-theme="light"] .search-container input,
body:not(.dark) [class*="search"] input,
[data-theme="light"] [class*="search"] input,
body:not(.dark) [class*="-search"] input,
[data-theme="light"] [class*="-search"] input,
body:not(.dark) [class*="search-"] input,
[data-theme="light"] [class*="search-"] input,
body:not(.dark) .input-icon input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .input-icon input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) .tkt-search-input input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .tkt-search-input input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) [class*="search"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] [class*="search"] input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) [class*="-search"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] [class*="-search"] input:not([type="checkbox"]):not([type="radio"]),
body:not(.dark) [class*="search-"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] [class*="search-"] input:not([type="checkbox"]):not([type="radio"]) {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
}

/* 5. Inputs on focus: keep search container border clean and no inner outline */
.input-icon input:focus,
.dark .input-icon input:focus,
.user-search input:focus,
.dark .user-search input:focus,
.role-search input:focus,
.dark .role-search input:focus,
.jobs-search-box input:focus,
.dark .jobs-search-box input:focus,
.components-search-box input:focus,
.dark .components-search-box input:focus,
.bc-search-box input:focus,
.dark .bc-search-box input:focus,
.search-input-wrap input:focus,
.dark .search-input-wrap input:focus,
.reports-search-input-box input:focus,
.dark .reports-search-input-box input:focus,
.inv-search-box input:focus,
.dark .inv-search-box input:focus,
.tkt-search-input input:focus,
.dark .tkt-search-input input:focus,
.dash-location-unit-search input:focus,
.dark .dash-location-unit-search input:focus,
.dash-map-search input:focus,
.dark .dash-map-search input:focus,
.linkgen-search input:focus,
.dark .linkgen-search input:focus,
.device-dropdown-search input:focus,
.dark .device-dropdown-search input:focus,
.taskmgr-procs-search input:focus,
.dark .taskmgr-procs-search input:focus,
.header-search input:focus,
.dark .header-search input:focus,
.activity-search input:focus,
.dark .activity-search input:focus,
.office-search-box input:focus,
.dark .office-search-box input:focus,
.table-settings-search-box input:focus,
.dark .table-settings-search-box input:focus,
.job-unit-search input:focus,
.dark .job-unit-search input:focus,
.search-box input:focus,
.dark .search-box input:focus,
.search-wrapper input:focus,
.dark .search-wrapper input:focus,
.search-bar input:focus,
.dark .search-bar input:focus,
.search-container input:focus,
.dark .search-container input:focus,
body:not(.dark) .input-icon input:focus,
[data-theme="light"] .input-icon input:focus,
body:not(.dark) [class*="search"] input:focus,
[data-theme="light"] [class*="search"] input:focus,
body:not(.dark) [class*="-search"] input:focus,
[data-theme="light"] [class*="-search"] input:focus,
body:not(.dark) [class*="search-"] input:focus,
[data-theme="light"] [class*="search-"] input:focus,
body:not(.dark) .input-icon input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] .input-icon input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.dark) .tkt-search-input input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] .tkt-search-input input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.dark) [class*="search"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] [class*="search"] input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.dark) [class*="-search"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] [class*="-search"] input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.dark) [class*="search-"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] [class*="search-"] input:not([type="checkbox"]):not([type="radio"]):focus {
  border: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* 6. Placeholder styling inside search boxes */
.input-icon input::-moz-placeholder, .user-search input::-moz-placeholder, .role-search input::-moz-placeholder, .jobs-search-box input::-moz-placeholder, .components-search-box input::-moz-placeholder, .bc-search-box input::-moz-placeholder, .search-input-wrap input::-moz-placeholder, .reports-search-input-box input::-moz-placeholder, .inv-search-box input::-moz-placeholder, .tkt-search-input input::-moz-placeholder, .dash-location-unit-search input::-moz-placeholder, .dash-map-search input::-moz-placeholder, .linkgen-search input::-moz-placeholder, .device-dropdown-search input::-moz-placeholder, .taskmgr-procs-search input::-moz-placeholder, .activity-search input::-moz-placeholder, .office-search-box input::-moz-placeholder, .table-settings-search-box input::-moz-placeholder, .job-unit-search input::-moz-placeholder, .search-box input::-moz-placeholder, .search-wrapper input::-moz-placeholder, .search-bar input::-moz-placeholder, .search-container input::-moz-placeholder {
  color: #64748b !important;
}
.input-icon input::placeholder,
.user-search input::placeholder,
.role-search input::placeholder,
.jobs-search-box input::placeholder,
.components-search-box input::placeholder,
.bc-search-box input::placeholder,
.search-input-wrap input::placeholder,
.reports-search-input-box input::placeholder,
.inv-search-box input::placeholder,
.tkt-search-input input::placeholder,
.dash-location-unit-search input::placeholder,
.dash-map-search input::placeholder,
.linkgen-search input::placeholder,
.device-dropdown-search input::placeholder,
.taskmgr-procs-search input::placeholder,
.activity-search input::placeholder,
.office-search-box input::placeholder,
.table-settings-search-box input::placeholder,
.job-unit-search input::placeholder,
.search-box input::placeholder,
.search-wrapper input::placeholder,
.search-bar input::placeholder,
.search-container input::placeholder {
  color: #64748b !important;
}

/* 7. Clear buttons inside search text boxes */
.search-input-wrap .clear-search-btn,
.reports-search-clear-btn,
.reports-search-input-box button,
.inv-search-box button,
.search-modal-clear-btn {
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
}

.dark .search-input-wrap .clear-search-btn:hover,
.dark .reports-search-clear-btn:hover,
.dark .reports-search-input-box button:hover,
.dark .inv-search-box button:hover,
.dark .search-modal-clear-btn:hover,
[data-theme="dark"] .search-input-wrap .clear-search-btn:hover,
[data-theme="dark"] .reports-search-clear-btn:hover,
[data-theme="dark"] .reports-search-input-box button:hover,
[data-theme="dark"] .inv-search-box button:hover,
[data-theme="dark"] .search-modal-clear-btn:hover {
  color: #ffffff !important;
}

body:not(.dark) .search-input-wrap .clear-search-btn:hover,
body:not(.dark) .reports-search-clear-btn:hover,
body:not(.dark) .reports-search-input-box button:hover,
body:not(.dark) .inv-search-box button:hover,
body:not(.dark) .search-modal-clear-btn:hover,
[data-theme="light"] .search-input-wrap .clear-search-btn:hover,
[data-theme="light"] .reports-search-clear-btn:hover,
[data-theme="light"] .reports-search-input-box button:hover,
[data-theme="light"] .inv-search-box button:hover,
[data-theme="light"] .search-modal-clear-btn:hover {
  color: #0f172a !important;
}


/* ==========================================================================
   GLOBAL SINGLE-LINE ALERT & BANNER NOTIFICATIONS (ERROR, WARNING, INFO, SUCCESS)
   ========================================================================== */
.auth-alert,
.reports-error-banner,
.player-alert {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}

.auth-alert-icon,
.reports-error-banner svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.auth-alert-text,
.reports-error-banner span,
.player-alert span {
  flex: 1 1 auto !important;
  white-space: normal !important;
}

.auth-alert-close,
.reports-error-banner button,
.player-alert button {
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  margin-left: auto !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.auth-alert-close:hover,
.reports-error-banner button:hover,
.player-alert button:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.auth-alert-error,
.auth-alert-danger,
.reports-error-banner,
.player-alert-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

.auth-alert-error svg,
.auth-alert-danger svg,
.reports-error-banner svg,
.player-alert-danger svg {
  stroke: #ef4444 !important;
  color: #ef4444 !important;
}

.auth-alert-error .auth-alert-close,
.reports-error-banner button,
.player-alert-danger button {
  color: #f87171 !important;
}

.auth-alert-warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

.auth-alert-warning svg {
  stroke: #f59e0b !important;
  color: #f59e0b !important;
}

.auth-alert-warning .auth-alert-close {
  color: #fbbf24 !important;
}

.auth-alert-info {
  background-color: rgba(59, 130, 246, 0.12) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  color: #60a5fa !important;
}

.auth-alert-info svg {
  stroke: #3b82f6 !important;
  color: #3b82f6 !important;
}

.auth-alert-info .auth-alert-close {
  color: #60a5fa !important;
}

.auth-alert-success {
  background-color: rgba(16, 185, 129, 0.12) !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.auth-alert-success svg {
  stroke: #10b981 !important;
  color: #10b981 !important;
}

.auth-alert-success .auth-alert-close {
  color: #34d399 !important;
}


/* ==========================================================================
   ADMIN RIGHT PANEL DRAWERS & DETAIL CARDS DARK MODERN THEME OVERRIDES
   ========================================================================== */
.dark .drawer,
[data-theme="dark"] .drawer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-left: 1px solid #232c40 !important;
  color: #f1f5f9 !important;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.85) !important;
}

.dark .drawer-header,
[data-theme="dark"] .drawer-header {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #232c40 !important;
  color: #ffffff !important;
}

.dark .drawer-header h3,
[data-theme="dark"] .drawer-header h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dark .drawer-header p,
[data-theme="dark"] .drawer-header p {
  color: #94a3b8 !important;
}

.dark .drawer-close,
[data-theme="dark"] .drawer-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid #2a3245 !important;
  color: #cbd5e1 !important;
}

.dark .drawer-close:hover,
[data-theme="dark"] .drawer-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: #3b4252 !important;
}

.dark .drawer-body,
[data-theme="dark"] .drawer-body {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #f1f5f9 !important;
}

.dark .drawer-footer,
[data-theme="dark"] .drawer-footer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-top: 1px solid #232c40 !important;
}

/* Detail Card Dark Mode Styling (True Black #000000) */
.dark .detail-card,
[data-theme="dark"] .detail-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #e2e8f0 !important;
}

.dark .detail-card h4,
[data-theme="dark"] .detail-card h4 {
  color: #ffffff !important;
}

.dark .detail-card .field-label,
[data-theme="dark"] .detail-card .field-label {
  color: #94a3b8 !important;
}

.dark .detail-card p.muted,
[data-theme="dark"] .detail-card p.muted {
  color: #94a3b8 !important;
}

.dark .detail-card .tag-row .pill,
.dark .detail-card .tenant-chip-list .pill,
[data-theme="dark"] .detail-card .tag-row .pill,
[data-theme="dark"] .detail-card .tenant-chip-list .pill {
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
}

.dark .detail-card .status-pill.success,
[data-theme="dark"] .detail-card .status-pill.success {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.dark .detail-card .status-pill.warning,
[data-theme="dark"] .detail-card .status-pill.warning {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.dark .detail-card .status-pill.danger,
[data-theme="dark"] .detail-card .status-pill.danger {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.dark .event-table-wrap .admin-table,
[data-theme="dark"] .event-table-wrap .admin-table {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 8px !important;
}

.dark .event-table-wrap .admin-table th,
[data-theme="dark"] .event-table-wrap .admin-table th {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .event-table-wrap .admin-table td,
[data-theme="dark"] .event-table-wrap .admin-table td {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #20222a !important;
  color: #e2e8f0 !important;
}

.dark .event-table-wrap .admin-table tbody tr:hover td,
[data-theme="dark"] .event-table-wrap .admin-table tbody tr:hover td {
  background: #12141a !important;
  background-color: #12141a !important;
}

/* Modals fallback dark styling */
.dark .modal,
[data-theme="dark"] .modal {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #232c40 !important;
  color: #f1f5f9 !important;
}

/* ==========================================================================
   DATRA PLATFORM - GLOBAL ICON SYSTEM & STATUS BADGE MASTER STYLING
   Enforces clean dark slate icon color globally (#ffffff on #1e222e)
   and fixes all status badge/pill contrast & washed-out background issues across dark theme.
   ========================================================================== */

/* 1. GLOBAL UNIFIED ICON SYSTEM */
.dark .dash-section-icon,
[data-theme="dark"] .dash-section-icon,
.dark .card-icon,
[data-theme="dark"] .card-icon,
.dark .pref-icon-box,
[data-theme="dark"] .pref-icon-box,
.dark .impersonate-icon-box,
[data-theme="dark"] .impersonate-icon-box,
.dark .rp-quick-icon-box,
[data-theme="dark"] .rp-quick-icon-box,
.dark .player-card-icon,
[data-theme="dark"] .player-card-icon,
.dark .auth-feature-card-icon,
[data-theme="dark"] .auth-feature-card-icon,
.dark .section-icon,
[data-theme="dark"] .section-icon,
.dark .header-icon-bubble,
[data-theme="dark"] .header-icon-bubble,
.dark .reports-gen-icon-bubble,
[data-theme="dark"] .reports-gen-icon-bubble {
  background: #1e222e !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  box-shadow: none !important;
}

.dark .dash-section-icon svg,
[data-theme="dark"] .dash-section-icon svg,
.dark .card-icon svg,
[data-theme="dark"] .card-icon svg,
.dark .pref-icon-box svg,
[data-theme="dark"] .pref-icon-box svg,
.dark .impersonate-icon-box svg,
[data-theme="dark"] .impersonate-icon-box svg,
.dark .rp-quick-icon-box svg,
[data-theme="dark"] .rp-quick-icon-box svg,
.dark .player-card-icon svg,
[data-theme="dark"] .player-card-icon svg,
.dark .auth-feature-card-icon svg,
[data-theme="dark"] .auth-feature-card-icon svg,
.dark .section-icon svg,
[data-theme="dark"] .section-icon svg,
.dark .header-icon-bubble svg,
[data-theme="dark"] .header-icon-bubble svg,
.dark .reports-gen-icon-bubble svg,
[data-theme="dark"] .reports-gen-icon-bubble svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Location group / table cell / location metrics icons */
.dark .dash-table-group-cell svg,
[data-theme="dark"] .dash-table-group-cell svg,
.dark .dash-table-group-cell .lucide,
[data-theme="dark"] .dash-table-group-cell .lucide,
.dark .dash-location-metrics svg,
[data-theme="dark"] .dash-location-metrics svg {
  color: #a78bfa !important;
  stroke: #a78bfa !important;
}

/* Tab Icons - Transparent Background, Clean High-Contrast Vector */
.dark .tab-icon,
.dark .filter-tabs .tab .tab-icon,
.dark .tab.active .tab-icon,
.dark .filter-tabs .tab.active .tab-icon,
[data-theme="dark"] .tab-icon,
[data-theme="dark"] .filter-tabs .tab .tab-icon,
[data-theme="dark"] .tab.active .tab-icon,
[data-theme="dark"] .filter-tabs .tab.active .tab-icon {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-right: 6px !important;
  color: inherit !important;
}

.dark .tab-icon svg,
.dark .filter-tabs .tab .tab-icon svg,
.dark .tab svg,
.dark .filter-tabs .tab svg,
[data-theme="dark"] .tab-icon svg,
[data-theme="dark"] .filter-tabs .tab .tab-icon svg,
[data-theme="dark"] .tab svg,
[data-theme="dark"] .filter-tabs .tab svg {
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

.dark .filter-tabs .tab,
.dark .tab {
  color: #94a3b8 !important;
}

.dark .filter-tabs .tab:hover,
.dark .tab:hover {
  color: #ffffff !important;
}

.dark .filter-tabs .tab.active,
.dark .tab.active {
  color: #ffffff !important;
}

/* User & Provider Avatars in Permissions & SSO */
.dark .avatar.icon-blue,
[data-theme="dark"] .avatar.icon-blue {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dark .avatar.icon-purple,
[data-theme="dark"] .avatar.icon-purple {
  background: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
}

.dark .avatar.icon-indigo,
[data-theme="dark"] .avatar.icon-indigo {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

.dark .avatar.icon-orange,
[data-theme="dark"] .avatar.icon-orange {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

.dark .avatar.icon-yellow,
[data-theme="dark"] .avatar.icon-yellow {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
  border: 1px solid rgba(234, 179, 8, 0.3) !important;
}

/* 2. GLOBAL STATUS BADGES & HEALTH PILLS */
/* Base Health Pill / Status Pill Defaults */
.dark .health-pill,
[data-theme="dark"] .health-pill,
.dark .status-pill,
[data-theme="dark"] .status-pill,
.dark .status-badge,
[data-theme="dark"] .status-badge,
.dark .unit-status-badge,
[data-theme="dark"] .unit-status-badge,
.dark .unit-status-badge-compact,
[data-theme="dark"] .unit-status-badge-compact,
.dark .unit-status-pill,
[data-theme="dark"] .unit-status-pill {
  background: rgba(148, 163, 184, 0.12) !important;
  background-color: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  --pill-dot: #94a3b8;
}

/* Tier A: CRITICAL / DANGER / OFFLINE / ERROR / FAILED */
.dark .health-pill.critical,
[data-theme="dark"] .health-pill.critical,
.dark .status-pill.critical,
[data-theme="dark"] .status-pill.critical,
.dark .status-pill.danger,
[data-theme="dark"] .status-pill.danger,
.dark .status-pill.offline,
[data-theme="dark"] .status-pill.offline,
.dark .status-pill.error,
[data-theme="dark"] .status-pill.error,
.dark .status-pill.failed,
[data-theme="dark"] .status-pill.failed,
.dark .status-pill.disconnected,
[data-theme="dark"] .status-pill.disconnected,
.dark .status-badge.offline,
[data-theme="dark"] .status-badge.offline,
.dark .status-badge.disconnected,
[data-theme="dark"] .status-badge.disconnected,
.dark .status-badge.danger,
[data-theme="dark"] .status-badge.danger,
.dark .status-badge-red,
[data-theme="dark"] .status-badge-red,
.dark .unit-status-badge.offline,
[data-theme="dark"] .unit-status-badge.offline,
.dark .unit-tag.offline,
[data-theme="dark"] .unit-tag.offline,
.dark .unit-status-badge.disconnected,
[data-theme="dark"] .unit-status-badge.disconnected,
.dark .rc-status-badge.offline,
[data-theme="dark"] .rc-status-badge.offline,
.dark .live-stream-status-badge.offline,
[data-theme="dark"] .live-stream-status-badge.offline,
.dark .service-status-pill.offline,
[data-theme="dark"] .service-status-pill.offline,
.dark .badge-destructive,
[data-theme="dark"] .badge-destructive {
  background: rgba(239, 68, 68, 0.16) !important;
  background-color: rgba(239, 68, 68, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  --pill-dot: #f87171 !important;
}

/* Tier B: SUCCESS / ONLINE / OK / OPERATIONAL / CONNECTED / ACTIVE / COMPLETED */
.dark .health-pill.ok,
[data-theme="dark"] .health-pill.ok,
.dark .health-pill.operational,
[data-theme="dark"] .health-pill.operational,
.dark .status-pill.online,
[data-theme="dark"] .status-pill.online,
.dark .status-pill.success,
[data-theme="dark"] .status-pill.success,
.dark .status-pill.connected,
[data-theme="dark"] .status-pill.connected,
.dark .status-pill.active,
[data-theme="dark"] .status-pill.active,
.dark .status-pill.completed,
[data-theme="dark"] .status-pill.completed,
.dark .status-pill.live,
[data-theme="dark"] .status-pill.live,
.dark .status-badge.online,
[data-theme="dark"] .status-badge.online,
.dark .status-badge.connected,
[data-theme="dark"] .status-badge.connected,
.dark .status-badge.success,
[data-theme="dark"] .status-badge.success,
.dark .status-badge-green,
[data-theme="dark"] .status-badge-green,
.dark .unit-status-badge.online,
[data-theme="dark"] .unit-status-badge.online,
.dark .unit-tag.online,
[data-theme="dark"] .unit-tag.online,
.dark .unit-status-badge.connected,
[data-theme="dark"] .unit-status-badge.connected,
.dark .rc-status-badge.online,
[data-theme="dark"] .rc-status-badge.online,
.dark .job-status-badge.active,
[data-theme="dark"] .job-status-badge.active,
.dark .exec-status-pill.completed,
[data-theme="dark"] .exec-status-pill.completed,
.dark .service-status-pill.online,
[data-theme="dark"] .service-status-pill.online,
.dark .live-stream-status-badge.live,
[data-theme="dark"] .live-stream-status-badge.live,
.dark .live-stream-status-badge.online,
[data-theme="dark"] .live-stream-status-badge.online,
.dark .tkt-status-pill.closed,
[data-theme="dark"] .tkt-status-pill.closed,
.dark .tkt-status-pill.resolved,
[data-theme="dark"] .tkt-status-pill.resolved,
.dark .badge-success,
[data-theme="dark"] .badge-success {
  background: rgba(34, 197, 94, 0.16) !important;
  background-color: rgba(34, 197, 94, 0.16) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  --pill-dot: #4ade80 !important;
}

/* Tier C: WARNING / DEGRADED / MAINTENANCE / IN-PROGRESS / CONNECTING */
.dark .health-pill.warning,
[data-theme="dark"] .health-pill.warning,
.dark .health-pill.degraded,
[data-theme="dark"] .health-pill.degraded,
.dark .status-pill.warning,
[data-theme="dark"] .status-pill.warning,
.dark .status-pill.maintenance,
[data-theme="dark"] .status-pill.maintenance,
.dark .status-pill.degraded,
[data-theme="dark"] .status-pill.degraded,
.dark .status-pill.invited,
[data-theme="dark"] .status-pill.invited,
.dark .status-badge.maintenance,
[data-theme="dark"] .status-badge.maintenance,
.dark .status-badge.warning,
[data-theme="dark"] .status-badge.warning,
.dark .status-badge-amber,
[data-theme="dark"] .status-badge-amber,
.dark .unit-status-badge.no_active,
[data-theme="dark"] .unit-status-badge.no_active,
.dark .unit-status-badge.no-active,
[data-theme="dark"] .unit-status-badge.no-active,
.dark .live-stream-status-badge.connecting,
[data-theme="dark"] .live-stream-status-badge.connecting,
.dark .tkt-status-pill.progress,
[data-theme="dark"] .tkt-status-pill.progress,
.dark .tkt-status-pill.pending,
[data-theme="dark"] .tkt-status-pill.pending,
.dark .badge-warning,
[data-theme="dark"] .badge-warning {
  background: rgba(245, 158, 11, 0.16) !important;
  background-color: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  --pill-dot: #fbbf24 !important;
}

/* Tier D: INFO / OPEN / RUNNING / WAITING */
.dark .status-pill.info,
[data-theme="dark"] .status-pill.info,
.dark .status-badge.info,
[data-theme="dark"] .status-badge.info,
.dark .exec-status-pill.running,
[data-theme="dark"] .exec-status-pill.running,
.dark .tkt-status-pill.open,
[data-theme="dark"] .tkt-status-pill.open,
.dark .badge-info,
[data-theme="dark"] .badge-info {
  background: rgba(59, 130, 246, 0.16) !important;
  background-color: rgba(59, 130, 246, 0.16) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  --pill-dot: #60a5fa !important;
}

/* Tier E: MUTED / INACTIVE / DEFAULT / RETIRED / NOT-RUN */
.dark .status-pill.default,
[data-theme="dark"] .status-pill.default,
.dark .status-pill.inactive,
[data-theme="dark"] .status-pill.inactive,
.dark .status-pill.not-run,
[data-theme="dark"] .status-pill.not-run,
.dark .status-pill.draft,
[data-theme="dark"] .status-pill.draft,
.dark .status-badge.retired,
[data-theme="dark"] .status-badge.retired,
.dark .status-badge.no-active,
[data-theme="dark"] .status-badge.no-active,
.dark .status-badge-gray,
[data-theme="dark"] .status-badge-gray,
.dark .unit-status-badge.retired,
[data-theme="dark"] .unit-status-badge.retired,
.dark .job-status-badge.inactive,
[data-theme="dark"] .job-status-badge.inactive,
.dark .exec-status-pill.not-run,
[data-theme="dark"] .exec-status-pill.not-run {
  background: rgba(148, 163, 184, 0.12) !important;
  background-color: rgba(148, 163, 184, 0.12) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  --pill-dot: #94a3b8 !important;
}

/* Pill dots support */
.dark .status-pill::before,
[data-theme="dark"] .status-pill::before {
  background-color: var(--pill-dot, currentColor) !important;
}

/* 3. DRAWER HEADER ACTIONS - UNIFIED EQUAL HEIGHT BUTTONS */
.dark .drawer-header-actions,
[data-theme="dark"] .drawer-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.dark .drawer-header-actions .btn,
[data-theme="dark"] .drawer-header-actions .btn,
.dark .drawer-header-actions .drawer-btn,
[data-theme="dark"] .drawer-header-actions .drawer-btn,
.dark .drawer-header-actions .btn-primary,
[data-theme="dark"] .drawer-header-actions .btn-primary,
.dark .drawer-header-actions .drawer-close,
[data-theme="dark"] .drawer-header-actions .drawer-close {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}

.dark .drawer-header-actions .btn,
[data-theme="dark"] .drawer-header-actions .btn {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .drawer-header-actions .btn:hover,
[data-theme="dark"] .drawer-header-actions .btn:hover {
  background: #181c26 !important;
  border-color: #3b455c !important;
  color: #ffffff !important;
}

.dark .drawer-btn-impersonate,
[data-theme="dark"] .drawer-btn-impersonate {
  background: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
}

.dark .drawer-btn-impersonate:hover,
[data-theme="dark"] .drawer-btn-impersonate:hover {
  background: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
}

.dark .drawer-btn-edit,
[data-theme="dark"] .drawer-btn-edit,
.dark .drawer-header-actions .btn-primary,
[data-theme="dark"] .drawer-header-actions .btn-primary {
  background: #1e222e !important;
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .drawer-btn-edit:hover,
[data-theme="dark"] .drawer-btn-edit:hover,
.dark .drawer-header-actions .btn-primary:hover,
[data-theme="dark"] .drawer-header-actions .btn-primary:hover {
  background: #282e3f !important;
  background-color: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

.dark .drawer-header-actions .drawer-close,
[data-theme="dark"] .drawer-header-actions .drawer-close {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
  font-size: 18px !important;
  background: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #94a3b8 !important;
}

.dark .drawer-header-actions .drawer-close:hover,
[data-theme="dark"] .drawer-header-actions .drawer-close:hover {
  background: #181c26 !important;
  color: #ffffff !important;
  border-color: #3b455c !important;
}

/* ==========================================================================
   GLOBAL OVERRIDE: NO VIOLET OUTLINES ON HOVER GLOBALLY
   Use sleek grey color on hover globally, matching navigation item hover
   ========================================================================== */
.dark *:hover {
  outline-color: transparent !important;
}

/* Non-primary buttons, cards, tiles, and interactive elements on hover: neutral grey */
.dark .rp-menu-btn:hover,
[data-theme="dark"] .rp-menu-btn:hover,
.dark .menu button:hover,
.dark .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark .rp-menu-btn:hover .rp-menu-arrow,
[data-theme="dark"] .rp-menu-btn:hover .rp-menu-arrow,
.dark .rp-menu-btn:hover svg,
[data-theme="dark"] .rp-menu-btn:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Ensure MAC / Device Selector button & active selection tabs are strictly grey pills with zero violet */
.dark .device-selector-btn,
.dark .device-tab.device-selector-btn,
[data-theme="dark"] .device-selector-btn,
[data-theme="dark"] .device-tab.device-selector-btn,
.dark .device-tab.active:not(.device-selector-btn),
[data-theme="dark"] .device-tab.active:not(.device-selector-btn),
.dark .device-tab-active-pill,
[data-theme="dark"] .device-tab-active-pill,
.dark .unit-primary-tab.active,
[data-theme="dark"] .unit-primary-tab.active,
.dark .control-tab.active,
[data-theme="dark"] .control-tab.active,
.dark .unit-tab-pill.active,
[data-theme="dark"] .unit-tab-pill.active {
  background: #22242b !important;
  background-color: #22242b !important;
  border: 1px solid #3b3b44 !important;
  border-bottom: 1px solid #3b3b44 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.dark .device-tab.active:not(.device-selector-btn):hover,
[data-theme="dark"] .device-tab.active:not(.device-selector-btn):hover,
.dark .device-tab-active-pill:hover,
[data-theme="dark"] .device-tab-active-pill:hover,
.dark .unit-primary-tab.active:hover,
[data-theme="dark"] .unit-primary-tab.active:hover,
.dark .control-tab.active:hover,
[data-theme="dark"] .control-tab.active:hover,
.dark .unit-tab-pill.active:hover,
[data-theme="dark"] .unit-tab-pill.active:hover {
  background: #2a2c36 !important;
  background-color: #2a2c36 !important;
  border-color: #4b4b58 !important;
  border-bottom-color: #4b4b58 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   PAGINATION SELECT & BUTTONS OUTLINE (FULL NUMBER VISIBILITY + CRISP OUTLINES)
   ========================================================================== */

.dark .pagination-select,
[data-theme="dark"] .pagination-select {
  min-width: 76px !important;
  width: auto !important;
  height: 32px !important;
  background: #000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 9px center !important;
  border: 1px solid #3b4252 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0 28px 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  -moz-appearance: none !important;
       appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.dark .pagination-select:hover,
[data-theme="dark"] .pagination-select:hover {
  border-color: #52525b !important;
}

.dark .pagination-select:focus,
[data-theme="dark"] .pagination-select:focus {
  border-color: #52525b !important;
  outline: none !important;
  box-shadow: none !important;
}

.dark .units-page-buttons,
[data-theme="dark"] .units-page-buttons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.dark .units-page-buttons button,
[data-theme="dark"] .units-page-buttons button,
.dark .pagination-btn,
[data-theme="dark"] .pagination-btn,
.dark .btn-page,
[data-theme="dark"] .btn-page {
  border: 1px solid #3b4252 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  min-width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.dark .units-page-buttons button:hover:not(:disabled):not(.active),
[data-theme="dark"] .units-page-buttons button:hover:not(:disabled):not(.active),
.dark .pagination-btn:hover:not(:disabled):not(.active),
[data-theme="dark"] .pagination-btn:hover:not(:disabled):not(.active),
.dark .btn-page:hover:not(:disabled),
[data-theme="dark"] .btn-page:hover:not(:disabled) {
  border-color: #52525b !important;
  background: #141721 !important;
  color: #ffffff !important;
}

.dark .units-page-buttons button.active,
[data-theme="dark"] .units-page-buttons button.active,
.dark .pagination-btn.active,
[data-theme="dark"] .pagination-btn.active {
  border: 1px solid #3b4252 !important;
  background: #22242b !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.dark .units-page-buttons button:disabled,
[data-theme="dark"] .units-page-buttons button:disabled,
.dark .pagination-btn:disabled,
[data-theme="dark"] .pagination-btn:disabled,
.dark .btn-page:disabled,
[data-theme="dark"] .btn-page:disabled {
  border: 1px solid #232838 !important;
  background: #000000 !important;
  color: #475569 !important;
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ==========================================================================
   GLOBAL BUTTONS HARMONIZATION (Matching Dark Slate Navy Reference #1e222e)
   Replaces all violet, purple, and discordant colors across the entire project
   ========================================================================== */
.dark .btn-primary,
[data-theme="dark"] .btn-primary,
.dark .btn-outline,
[data-theme="dark"] .btn-outline,
.dark .btn-secondary,
[data-theme="dark"] .btn-secondary,
.dark .btn-new-job,
.dark .btn-add-office,
.dark .inv-btn-primary,
.dark .reports-btn-primary,
.dark .sys-btn-refresh,
.dark .analytics-export-btn,
.dark .reports-gen-card-btn,
.dark .profile-btn-primary,
.dark .rc-btn-primary,
.dark .rp-submit-btn,
.dark .comp-drawer-save-btn,
.dark .impersonation-exit-btn,
.dark .custom-impersonate-submit,
.dark .impersonation-submit-btn,
.dark .move-device-submit-btn,
.dark .ops-btn:not(.ghost),
.dark .primary-btn,
.dark .modal-actions .btn-primary,
.dark .drawer-actions .btn-primary,
.dark .dialog-actions .btn-primary,
.dark .linkgen-select-all,
[data-theme="dark"] .linkgen-select-all,
.dark .linkgen-generate,
[data-theme="dark"] .linkgen-generate,
.dark .linkgen-copy-all,
[data-theme="dark"] .linkgen-copy-all,
.dark .linkgen-option-group button.active,
[data-theme="dark"] .linkgen-option-group button.active,
.dark form button[type="submit"]:not(.btn-danger) {
  background: #1e222e !important;
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease-in-out !important;
}

.dark .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover,
.dark .btn-outline:hover,
[data-theme="dark"] .btn-outline:hover,
.dark .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:hover,
.dark .btn-new-job:hover,
.dark .btn-add-office:hover,
.dark .inv-btn-primary:hover,
.dark .reports-btn-primary:hover,
.dark .sys-btn-refresh:hover,
.dark .analytics-export-btn:hover,
.dark .reports-gen-card-btn:hover,
.dark .profile-btn-primary:hover,
.dark .rc-btn-primary:hover,
.dark .rp-submit-btn:hover,
.dark .comp-drawer-save-btn:hover,
.dark .impersonation-exit-btn:hover,
.dark .custom-impersonate-submit:hover,
.dark .impersonation-submit-btn:hover,
.dark .move-device-submit-btn:hover,
.dark .ops-btn:not(.ghost):hover,
.dark .primary-btn:hover,
.dark .modal-actions .btn-primary:hover,
.dark .drawer-actions .btn-primary:hover,
.dark .dialog-actions .btn-primary:hover,
.dark .linkgen-select-all:hover,
[data-theme="dark"] .linkgen-select-all:hover,
.dark .linkgen-generate:hover:not(:disabled),
[data-theme="dark"] .linkgen-generate:hover:not(:disabled),
.dark .linkgen-copy-all:hover,
[data-theme="dark"] .linkgen-copy-all:hover,
.dark form button[type="submit"]:not(.btn-danger):hover {
  background: #282e3f !important;
  background-color: #282e3f !important;
  border-color: #444d64 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

.dark .btn-primary:active,
[data-theme="dark"] .btn-primary:active,
.dark .btn-outline:active,
[data-theme="dark"] .btn-outline:active,
.dark form button[type="submit"]:active {
  background: #181c26 !important;
  background-color: #181c26 !important;
  border-color: #333a4c !important;
  transform: translateY(0) !important;
}

.dark .btn-primary:disabled,
[data-theme="dark"] .btn-primary:disabled,
.dark .btn-outline:disabled,
[data-theme="dark"] .btn-outline:disabled,
.dark form button[type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   GLOBAL PAGE HEADER ICON BUBBLE & TITLE ROW SPECIFICATION
   40x40px rounded square icon badge (#1e222e surface, #333a4c border) beside title
   ========================================================================== */
.header-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}

.dark .header-icon-bubble,
[data-theme="dark"] .header-icon-bubble {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background: #1e222e !important;
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
}

body:not(.dark) .header-icon-bubble,
[data-theme="light"] .header-icon-bubble {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  background: #eef2ff !important;
  background-color: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4338ca !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  flex-shrink: 0 !important;
}

.dark .header-icon-bubble svg,
.dark .header-icon-bubble .lucide,
[data-theme="dark"] .header-icon-bubble svg,
[data-theme="dark"] .header-icon-bubble .lucide {
  color: #ffffff !important;
  stroke: #ffffff !important;
  width: 20px !important;
  height: 20px !important;
}

body:not(.dark) .header-icon-bubble svg,
body:not(.dark) .header-icon-bubble .lucide,
[data-theme="light"] .header-icon-bubble svg,
[data-theme="light"] .header-icon-bubble .lucide {
  color: #4338ca !important;
  stroke: #4338ca !important;
  width: 20px !important;
  height: 20px !important;
}

.header-title-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.dark .header-title-text h1,
.dark .header-title-row h1,
[data-theme="dark"] .header-title-text h1,
[data-theme="dark"] .header-title-row h1 {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

body:not(.dark) .header-title-text h1,
body:not(.dark) .header-title-row h1,
[data-theme="light"] .header-title-text h1,
[data-theme="light"] .header-title-row h1 {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.dark .header-title-text p,
.dark .header-title-row p,
[data-theme="dark"] .header-title-text p,
[data-theme="dark"] .header-title-row p {
  margin: 3px 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body:not(.dark) .header-title-text p,
body:not(.dark) .header-title-row p,
[data-theme="light"] .header-title-text p,
[data-theme="light"] .header-title-row p {
  margin: 3px 0 0 0 !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* ==========================================================================
   GLOBAL UNIFIED DARK CARD STYLING (Pitch-black #000000, #1f2430 / #2a3245 borders)
   ========================================================================== */
.dark .card,
.dark .admin-card,
.dark .dash-section,
.dark .player-stat-card,
.dark .list-card,
.dark .settings-card,
.dark .profile-card,
.dark .job-card,
.dark .job-item-card,
.dark .unit-card,
.dark .device-card,
.dark .dash-kpi-card,
.dark .units-table-card,
.dark .sidebar-section-card,
.dark .impersonation-card,
.dark .inv-kpi-card,
.dark .inv-widget-card,
.dark .inv-table-card,
.dark .tkt-card,
.dark .tkt-kpi-card,
.dark .tkt-table-card,
.dark .sys-kpi-card,
.dark .sys-card,
.dark .system-card,
.dark .perf-kpi-card,
.dark .perf-card,
.dark .analytics-kpi-card,
.dark .analytics-card,
.dark .reports-hub-card,
.dark .reports-table-card,
.dark .downloads-card,
.dark .linkgen-hero,
.dark .linkgen-options,
.dark .linkgen-result,
.dark .linkgen-table-card,
.dark .user-table-wrap,
.dark .detail-card,
.dark .service-card,
.dark .bandwidth-kpi-card,
.dark .note-card,
.dark .tkt-summary-card,
.dark .reports-gen-card,
.dark .content-card,
.dark .diag-card,
.dark .diag-ui-card,
.dark .unit-name-card,
.dark .device-info-card,
.dark .unit-status-card,
.dark .sidebar-action-card,
.dark .selection-header-card,
.dark .player-mac-card,
.dark .live-stream-card,
.dark .capture-toast-card,
.dark .main-card,
.dark .stat-card,
.dark .metric-card,
.dark .camera-card,
.dark .config-card,
.dark .role-card,
.dark .tenant-card,
.dark .theme-card,
.dark .telemetry-card,
.dark .unit-media-card,
.dark .unit-process-card,
.dark .panel,
.dark .admin-panel,
.dark .control-panel,
.dark .devices-left-panel,
.dark .devices-right-panel,
.dark .devices-center-panel,
.dark .diagnostics-panel,
.dark .content-panel,
.dark .pc-commands-panel,
.dark .user-filter-panel,
.dark .tkt-table-panel,
.dark .profile-panel,
.dark .service-panel,
.dark .locations-panel,
.dark .ops-panel,
.dark .overview-panel,
.dark .players-panel,
.dark .remote-control-panel,
.dark .taskmgr-panel,
.dark .uptime-panel,
.dark .system-info-content,
.dark .player-system-info,
.dark .info-grid,
.dark .table-wrap,
.dark .table-container,
.dark .overview-table-wrap,
.dark .player-table-wrap,
.dark .player-table-container,
.dark .admin-table-wrap,
.dark .admin-table-container,
.dark .dash-table-wrap,
.dark .diag-ui-table-wrap,
.dark .event-table-wrap,
.dark .fleet-table-wrap,
.dark .history-table-wrapper,
.dark .inv-table-wrapper,
.dark .linkgen-table-wrap,
.dark .office-table-wrap,
.dark .remote-tooling-table-wrap,
.dark .sites-table-wrap,
.dark .spec-table-wrap,
.dark .status-table-wrapper,
.dark .taskmgr-procs-table-wrap,
.dark .tkt-table-wrapper,
.dark .matrix-wrap,
.dark .camshot-archive-wrap,
.dark .tkt-search-filter-wrap,
.dark .pc-commands-grid-wrapper,
.dark .modal-content,
.dark .modal-card,
.dark .modal-body,
.dark .dialog-content,
.dark .settings-drawer,
.dark .drawer-content,
.dark .drawer-panel,
.dark .header-popover,
.dark .right-panel-drawer,
.dark .drawer,
.dark .popover-content,
.dark .dropdown-menu,
.dark .menu-content,
.dark .menu-panel,
.dark .popover-card,
.dark .unit-modal,
.dark .modal-container,
.dark .unit-modal-content,
.dark .register-device-modal,
[data-theme="dark"] .card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .dash-section,
[data-theme="dark"] .player-stat-card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .job-card,
[data-theme="dark"] .job-item-card,
[data-theme="dark"] .unit-card,
[data-theme="dark"] .device-card,
[data-theme="dark"] .dash-kpi-card,
[data-theme="dark"] .units-table-card,
[data-theme="dark"] .sidebar-section-card,
[data-theme="dark"] .impersonation-card,
[data-theme="dark"] .inv-kpi-card,
[data-theme="dark"] .inv-widget-card,
[data-theme="dark"] .inv-table-card,
[data-theme="dark"] .tkt-card,
[data-theme="dark"] .tkt-kpi-card,
[data-theme="dark"] .tkt-table-card,
[data-theme="dark"] .sys-kpi-card,
[data-theme="dark"] .sys-card,
[data-theme="dark"] .system-card,
[data-theme="dark"] .perf-kpi-card,
[data-theme="dark"] .perf-card,
[data-theme="dark"] .analytics-kpi-card,
[data-theme="dark"] .analytics-card,
[data-theme="dark"] .reports-hub-card,
[data-theme="dark"] .reports-table-card,
[data-theme="dark"] .downloads-card,
[data-theme="dark"] .linkgen-hero,
[data-theme="dark"] .linkgen-options,
[data-theme="dark"] .linkgen-result,
[data-theme="dark"] .linkgen-table-card,
[data-theme="dark"] .user-table-wrap,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .bandwidth-kpi-card,
[data-theme="dark"] .note-card,
[data-theme="dark"] .tkt-summary-card,
[data-theme="dark"] .reports-gen-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .diag-card,
[data-theme="dark"] .diag-ui-card,
[data-theme="dark"] .unit-name-card,
[data-theme="dark"] .device-info-card,
[data-theme="dark"] .unit-status-card,
[data-theme="dark"] .sidebar-action-card,
[data-theme="dark"] .selection-header-card,
[data-theme="dark"] .player-mac-card,
[data-theme="dark"] .live-stream-card,
[data-theme="dark"] .capture-toast-card,
[data-theme="dark"] .main-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .camera-card,
[data-theme="dark"] .config-card,
[data-theme="dark"] .role-card,
[data-theme="dark"] .tenant-card,
[data-theme="dark"] .theme-card,
[data-theme="dark"] .telemetry-card,
[data-theme="dark"] .unit-media-card,
[data-theme="dark"] .unit-process-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .control-panel,
[data-theme="dark"] .devices-left-panel,
[data-theme="dark"] .devices-right-panel,
[data-theme="dark"] .devices-center-panel,
[data-theme="dark"] .diagnostics-panel,
[data-theme="dark"] .content-panel,
[data-theme="dark"] .pc-commands-panel,
[data-theme="dark"] .user-filter-panel,
[data-theme="dark"] .tkt-table-panel,
[data-theme="dark"] .profile-panel,
[data-theme="dark"] .service-panel,
[data-theme="dark"] .locations-panel,
[data-theme="dark"] .ops-panel,
[data-theme="dark"] .overview-panel,
[data-theme="dark"] .players-panel,
[data-theme="dark"] .remote-control-panel,
[data-theme="dark"] .taskmgr-panel,
[data-theme="dark"] .uptime-panel,
[data-theme="dark"] .system-info-content,
[data-theme="dark"] .player-system-info,
[data-theme="dark"] .info-grid,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .table-container,
[data-theme="dark"] .overview-table-wrap,
[data-theme="dark"] .player-table-wrap,
[data-theme="dark"] .player-table-container,
[data-theme="dark"] .admin-table-wrap,
[data-theme="dark"] .admin-table-container,
[data-theme="dark"] .dash-table-wrap,
[data-theme="dark"] .diag-ui-table-wrap,
[data-theme="dark"] .event-table-wrap,
[data-theme="dark"] .fleet-table-wrap,
[data-theme="dark"] .history-table-wrapper,
[data-theme="dark"] .inv-table-wrapper,
[data-theme="dark"] .linkgen-table-wrap,
[data-theme="dark"] .office-table-wrap,
[data-theme="dark"] .remote-tooling-table-wrap,
[data-theme="dark"] .sites-table-wrap,
[data-theme="dark"] .spec-table-wrap,
[data-theme="dark"] .status-table-wrapper,
[data-theme="dark"] .taskmgr-procs-table-wrap,
[data-theme="dark"] .tkt-table-wrapper,
[data-theme="dark"] .matrix-wrap,
[data-theme="dark"] .camshot-archive-wrap,
[data-theme="dark"] .tkt-search-filter-wrap,
[data-theme="dark"] .pc-commands-grid-wrapper,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .dialog-content,
[data-theme="dark"] .settings-drawer,
[data-theme="dark"] .drawer-content,
[data-theme="dark"] .drawer-panel,
[data-theme="dark"] .header-popover,
[data-theme="dark"] .right-panel-drawer,
[data-theme="dark"] .drawer,
[data-theme="dark"] .popover-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu-content,
[data-theme="dark"] .menu-panel,
[data-theme="dark"] .popover-card,
[data-theme="dark"] .unit-modal,
[data-theme="dark"] .modal-container,
[data-theme="dark"] .unit-modal-content,
[data-theme="dark"] .register-device-modal {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #f4f4f5 !important;
}

/* ==========================================================================
   GLOBAL PAGE HEADERS AS CARDS (ACROSS ALL PAGES GLOBALLY)
   ========================================================================== */
.dark .admin-hero,
.dark .hero-card,
.dark .units-header-card,
.dark .jobs-header-card,
.dark .page-hero-card,
.dark .page-header-card,
.dark .player-main-header,
.dark .jobs-hero-header,
.dark .profile-hero-header,
.dark .profile-header-card,
.dark .office-hero,
.dark .tkt-header-strip,
.dark .inv-header-strip,
.dark .sys-header-strip,
.dark .analytics-header-strip,
.dark .reports-hub-header,
.dark .dashboard-header,
.dark .rc-header,
.dark .bc-hero-header,
.dark .control-header-card,
.dark .user-management-page .player-main-header,
.dark .permissions-page .player-main-header,
.dark .sso-management-page .player-main-header,
.dark .api-keys-page .player-main-header,
.dark .auditlog-page .player-main-header,
.dark .tenant-management-page .player-main-header,
.dark .announcements-page .player-main-header,
.dark .linkgen-page .player-main-header,
[data-theme="dark"] .admin-hero,
[data-theme="dark"] .hero-card,
[data-theme="dark"] .units-header-card,
[data-theme="dark"] .jobs-header-card,
[data-theme="dark"] .page-hero-card,
[data-theme="dark"] .page-header-card,
[data-theme="dark"] .player-main-header,
[data-theme="dark"] .jobs-hero-header,
[data-theme="dark"] .profile-hero-header,
[data-theme="dark"] .profile-header-card,
[data-theme="dark"] .office-hero,
[data-theme="dark"] .tkt-header-strip,
[data-theme="dark"] .inv-header-strip,
[data-theme="dark"] .sys-header-strip,
[data-theme="dark"] .analytics-header-strip,
[data-theme="dark"] .reports-hub-header,
[data-theme="dark"] .dashboard-header,
[data-theme="dark"] .rc-header,
[data-theme="dark"] .bc-hero-header,
[data-theme="dark"] .control-header-card {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

/* ==========================================================================
   GLOBAL LEFT-ALIGNMENT GUARANTEE FOR ALL PAGE HEADERS
   ========================================================================== */
.header-title-block,
.player-main-header .header-title-block,
.page-header-card .header-title-block,
.hero-card .header-title-block,
.admin-hero .header-title-block,
.jobs-hero-header .header-title-block,
.bc-hero-header .header-title-block {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
}

.header-title-row,
.player-main-header .header-title-row,
.page-header-card .header-title-row,
.hero-card .header-title-row,
.admin-hero .header-title-row,
.jobs-hero-header .header-title-row,
.bc-hero-header .header-title-row {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
}

.header-title-text,
.player-main-header .header-title-text,
.page-header-card .header-title-text,
.hero-card .header-title-text,
.admin-hero .header-title-text,
.jobs-hero-header .header-title-text,
.bc-hero-header .header-title-text {
  text-align: left !important;
  align-items: flex-start !important;
  margin: 0 !important;
  margin-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================================
   DATRA PLATFORM - PREFERENCES & SETTINGS DRAWER STYLES
   ========================================================================== */

/* Settings Slide-Over Drawer */
.settings-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
  animation: prefFadeIn 0.2s ease-out;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(460px, 30vw, 520px);
  max-width: 94vw;
  background: #ffffff;
  z-index: 9999;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: prefSlideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.settings-drawer-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-drawer-title h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.settings-drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
}

.settings-drawer-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.settings-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

@keyframes prefFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes prefSlideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.preferences-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 900px;
  width: 100%;
}

.pref-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none !important;
  outline: none !important;
}

.pref-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 0;
}

/* Theme Cards Grid */
.theme-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.theme-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #334155;
}

.theme-card-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.theme-card-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  transition: all 0.2s ease;
}

.theme-card-label {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Vibrant Violet Theme Active State */
.theme-card-btn.active {
  border-color: #333a4c;
  background: #1e222e;
  color: #ffffff;
}

.theme-card-btn.active .theme-card-icon-wrap {
  background: #282e3f;
  color: #ffffff;
}

/* Color Theme Presets Picker matching Images 2 & 3 */
.pref-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}


/* Preference Cards List */
.pref-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none !important;
  outline: none !important;
}

.pref-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #f8fafc;
  border: none;
  transition: all 0.15s ease;
}

.pref-card-row:hover {
  background: #f1f5f9;
}

.pref-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pref-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  flex-shrink: 0;
}

.pref-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pref-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
}

.pref-subtitle {
  font-size: 0.78rem;
  color: #64748b;
}

/* Toggle Switch (Violet Active) */
.pref-toggle-label {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
}

.pref-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pref-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}

.pref-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pref-toggle-label input:checked + .pref-toggle-slider {
  background-color: #8B5CF6;
}

.pref-toggle-label input:checked + .pref-toggle-slider:before {
  transform: translateX(20px);
}

/* Pill Selectors */
.pref-pill-group {
  display: inline-flex;
  align-items: center;
  background: #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.pref-pill-btn {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #475569;
  transition: all 0.15s ease;
}

.pref-pill-btn:hover {
  color: #0f172a;
}

.pref-pill-btn.active {
  background: #1e222e;
  border: 1px solid #333a4c;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Select Dropdown */
.pref-select-wrap {
  position: relative;
  display: inline-block;
}

.pref-select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 34px 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  min-width: 110px;
}

.pref-select:hover,
.pref-select:focus {
  border-color: #94a3b8;
  outline: none !important;
  box-shadow: none !important;
}

.dark .pref-select:focus {
  border-color: #3b3b44 !important;
  outline: none !important;
  box-shadow: none !important;
}

.pref-select-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
}

/* Reset Button */
.pref-reset-row {
  margin-top: 10px;
}

.pref-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pref-reset-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* ==========================================================================
   DARK MODE OVERRIDES (NO HARSH SECTION BORDER, VIOLET ACCENT)
   ========================================================================== */
.dark .settings-drawer {
  background-color: #000000 !important;
  background: #000000 !important;
  border-left: 1px solid #2a3245 !important;
  color: #ffffff !important;
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.95) !important;
}

.dark .settings-drawer-header {
  border-bottom-color: #2a3245 !important;
  background: #000000 !important;
  background-color: #000000 !important;
}

.dark .settings-drawer-title h2 {
  color: #ffffff !important;
}

.dark .settings-drawer-close-btn {
  background-color: #1f2432 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .settings-drawer-close-btn:hover {
  background-color: #2a3245 !important;
  color: #ffffff !important;
}

.dark .pref-section {
  border: none !important;
  outline: none !important;
}

.dark .pref-section-title {
  color: #ffffff !important;
}

.dark .theme-card-btn {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .theme-card-btn:hover {
  background-color: #202636 !important;
  border-color: #3f3f46 !important;
}

.dark .theme-card-icon-wrap {
  background-color: #1f2432 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .theme-card-btn.active {
  border-color: #333a4c !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
}

.dark .theme-card-btn.active .theme-card-icon-wrap {
  background-color: #282e3f !important;
  color: #ffffff !important;
}

.dark .pref-card-row {
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  outline: none !important;
}

.dark .pref-card-row:hover {
  background-color: #202636 !important;
}

.dark .pref-icon-box {
  background-color: #1f2432 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .pref-title {
  color: #ffffff !important;
}

.dark .pref-subtitle {
  color: #949aa6 !important;
}

.dark .pref-toggle-slider {
  background-color: #27272a !important;
}

.dark .pref-toggle-label input:checked + .pref-toggle-slider {
  background-color: #8B5CF6 !important;
}

.dark .pref-pill-group {
  background-color: #131722 !important;
  border: 1px solid #2a3245 !important;
}

.dark .pref-pill-btn {
  color: #ffffff !important;
}

.dark .pref-pill-btn:hover {
  color: #ffffff !important;
}

.dark .pref-pill-btn.active {
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .pref-select {
  background-color: #131722 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .pref-select option {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark .pref-select-icon {
  color: #ffffff !important;
}

.dark .pref-reset-btn {
  background-color: #1f2432 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .pref-reset-btn:hover {
  background-color: #2a3245 !important;
  border-color: #3f3f46 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   HIGH CONTRAST MODE FOR THE ENTIRE UI
   ========================================================================== */
[data-high-contrast="true"],
.high-contrast {
  --border-subtle: #000000 !important;
  --text-muted: #000000 !important;
}

[data-high-contrast="true"] .sidebar-action-card,
[data-high-contrast="true"] .sidebar-section-card,
[data-high-contrast="true"] .main-card,
[data-high-contrast="true"] .admin-card,
[data-high-contrast="true"] .profile-panel,
[data-high-contrast="true"] .pref-card-row,
[data-high-contrast="true"] .theme-card-btn,
[data-high-contrast="true"] .unit-card,
[data-high-contrast="true"] .device-card,
[data-high-contrast="true"] button,
[data-high-contrast="true"] input,
[data-high-contrast="true"] select {
  border: 2px solid #000000 !important;
  color: #000000 !important;
  font-weight: 600 !important;
}

[data-high-contrast="true"].dark,
.dark[data-high-contrast="true"],
.dark.high-contrast,
.dark [data-high-contrast="true"] {
  background-color: #000000 !important;
}

[data-high-contrast="true"].dark .sidebar,
[data-high-contrast="true"].dark .app-header,
[data-high-contrast="true"].dark .breadcrumb-bar,
[data-high-contrast="true"].dark .app-body,
[data-high-contrast="true"].dark .main-content,
[data-high-contrast="true"].dark .main-card,
[data-high-contrast="true"].dark .sidebar-section-card,
[data-high-contrast="true"].dark .admin-card,
[data-high-contrast="true"].dark .profile-panel,
[data-high-contrast="true"].dark .pref-card-row,
[data-high-contrast="true"].dark .theme-card-btn,
[data-high-contrast="true"].dark .unit-card,
[data-high-contrast="true"].dark .device-card {
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-high-contrast="true"].dark th,
[data-high-contrast="true"].dark td {
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

[data-high-contrast="true"].dark p,
[data-high-contrast="true"].dark span,
[data-high-contrast="true"].dark label,
[data-high-contrast="true"].dark h1,
[data-high-contrast="true"].dark h2,
[data-high-contrast="true"].dark h3,
[data-high-contrast="true"].dark button,
[data-high-contrast="true"].dark input,
[data-high-contrast="true"].dark select {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Eye Comfort Filter Modes */
[data-eye-comfort="warm"] {
  filter: sepia(0.18) hue-rotate(-10deg) !important;
}

[data-eye-comfort="sepia"] {
  filter: sepia(0.38) !important;
}

[data-eye-comfort="dim"] {
  filter: brightness(0.85) contrast(0.95) !important;
}

/* Font Size Modifiers */
[data-font-size="S"] {
  font-size: 13px !important;
}

[data-font-size="M"] {
  font-size: 14px !important;
}

[data-font-size="L"] {
  font-size: 16px !important;
}

/* Underline Links Mode */
[data-underline-links="true"] a,
[data-underline-links="true"] .nav-link,
[data-underline-links="true"] .tab {
  text-decoration: underline !important;
}
/* ==========================================================================
   DATRA PLATFORM - SEARCH MODAL (TWO-PANEL QUICK SEARCH & COMMAND PALETTE)
   Matching Image 1 with dynamic theme-responsive left panel
   ========================================================================== */

.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  animation: searchFadeIn 0.15s ease-out;
}

.search-modal-container {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: 820px;
  height: 520px;
  max-height: 80vh;
  background-color: var(--theme-surface, #1e1e24);
  border: 1px solid var(--theme-border, #33333d);
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  animation: searchSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes searchSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -15px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Modal Search Input Header */
.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-color: var(--theme-header, var(--left-panel-bg, #18181e));
  border-bottom: 1px solid var(--theme-border, #2a2a35);
}

.search-modal-header-icon {
  color: var(--theme-text-muted, #717784);
  flex-shrink: 0;
}

.search-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--theme-text-primary, #ffffff);
  font-size: 1.05rem;
  font-weight: 500;
}

.search-modal-input::-moz-placeholder {
  color: var(--theme-text-muted, #64748b);
  font-size: 0.95rem;
}

.search-modal-input::placeholder {
  color: var(--theme-text-muted, #64748b);
  font-size: 0.95rem;
}

.search-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-modal-clear-btn {
  background: transparent;
  border: none;
  color: var(--theme-text-muted, #94a3b8);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.search-modal-clear-btn:hover {
  color: var(--theme-text-primary, #ffffff);
  background: rgba(255, 255, 255, 0.08);
}

.search-modal-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--theme-text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--theme-border, #3a3a48);
  border-radius: 6px;
}

/* Modal Two-Panel Body */
.search-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LEFT PANEL - DYNAMIC THEME BACKGROUND */
.search-modal-left-panel {
  width: 230px;
  background-color: var(--left-panel-bg, #121216) !important;
  border-right: 1px solid var(--left-panel-border, #24242d);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--left-panel-text-muted, #717784);
  padding: 4px 10px 8px;
}

.search-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--left-panel-text, #94a3b8);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.search-cat-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-cat-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.search-cat-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--left-panel-badge-bg, rgba(255, 255, 255, 0.08));
  color: var(--left-panel-badge-text, #94a3b8);
  transition: all 0.15s ease;
}

.search-cat-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--theme-text-primary, #ffffff);
}

/* Active Category item - Teal rounded accent matching Image 1 */
.search-cat-item.active {
  background: var(--left-panel-active-bg, rgba(20, 184, 166, 0.15));
  border-color: var(--left-panel-active-border, #14b8a6);
  color: var(--left-panel-active-text, #ffffff);
}

.search-cat-item.active .search-cat-icon {
  opacity: 1;
  color: var(--left-panel-active-border, #14b8a6);
}

.search-cat-item.active .search-cat-badge {
  background: var(--left-panel-active-border, #14b8a6);
  color: #000000;
  font-weight: 700;
}

.search-cat-divider {
  height: 1px;
  background: var(--left-panel-border, #262633);
  margin: 8px 6px;
}

/* RIGHT PANEL - CONTENT & RESULTS */
.search-modal-right-panel {
  flex: 1;
  background-color: var(--theme-surface, #18181f);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.search-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--theme-border, #242430);
}

.search-right-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--theme-text-primary, #f1f5f9);
}

.search-right-count {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--theme-text-muted, #717784);
}

/* Empty Placeholder View matching Image 1 */
.search-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  text-align: center;
}

.search-empty-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1.5px solid var(--theme-border, #333342);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-muted, #717784);
  margin-bottom: 18px;
}

.search-empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--theme-text-primary, #f1f5f9);
  margin-bottom: 8px;
}

.search-empty-subtitle {
  font-size: 0.86rem;
  color: var(--theme-text-muted, #8b92a2);
  max-width: 380px;
  line-height: 1.45;
}

/* Search Results List */
.search-results-list {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 4px;
}

.search-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.search-result-row:hover {
  background: var(--theme-surface-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--theme-border, #2d2d3c);
}

.search-result-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-violet, #8b5cf6);
  flex-shrink: 0;
}

.search-result-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-result-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--theme-text-primary, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-sub {
  font-size: 0.76rem;
  color: var(--theme-text-muted, #717784);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.search-tag-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--theme-text-secondary, #94a3b8);
  border: 1px solid var(--theme-border, #333342);
}

.search-pin-btn {
  background: transparent;
  border: none;
  color: var(--theme-text-muted, #717784);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s;
}

.search-pin-btn:hover,
.search-pin-btn.pinned {
  color: #f59e0b;
}

/* Light Theme Adaptations for Search Modal */
:root[data-theme="light"] .search-modal-container {
  background-color: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .search-modal-header {
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .search-modal-input {
  color: #0f172a;
}

:root[data-theme="light"] .search-modal-right-panel {
  background-color: #ffffff;
}

:root[data-theme="light"] .search-right-header {
  border-bottom-color: #e2e8f0;
}

:root[data-theme="light"] .search-empty-icon-wrap {
  border-color: #e2e8f0;
}

:root[data-theme="light"] .search-result-row:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
/* ==========================================================================
   DATRA PLATFORM - RIGHT PANEL DRAWER (SLIDE-OVER PANELS)
   ========================================================================== */

/* Backdrop Overlay */
.right-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
  animation: rpFadeIn 0.2s ease-out;
}

@keyframes rpFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rpSlideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Base Right Panel Drawer */
.right-panel-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
  animation: rpSlideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 94vw;
  overflow: hidden;
}

/* ==========================================================================
   CONTEXT-BASED AUTO-ADJUSTING WIDTHS
   ========================================================================== */

/* Quick Access: spacious grid for shortcut tiles & links */
.right-panel-drawer.context-quickAccess {
  width: clamp(480px, 34vw, 580px);
}

/* Notifications: spacious list for multi-line notifications */
.right-panel-drawer.context-notifications {
  width: clamp(420px, 30vw, 500px);
}

/* To Do: compact task-oriented layout */
.right-panel-drawer.context-todos {
  width: clamp(380px, 26vw, 450px);
}

/* Account & Profile: focused identity & navigation menu */
.right-panel-drawer.context-profile {
  width: clamp(340px, 22vw, 400px);
}

/* Settings Drawer (Preferences) */
.settings-drawer {
  width: clamp(460px, 30vw, 520px) !important;
  max-width: 94vw !important;
}

/* Mobile & Tablet adjustments */
@media (max-width: 640px) {
  .right-panel-drawer,
  .right-panel-drawer.context-quickAccess,
  .right-panel-drawer.context-notifications,
  .right-panel-drawer.context-todos,
  .right-panel-drawer.context-profile,
  .settings-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
  }
}

/* ==========================================================================
   DRAWER HEADER
   ========================================================================== */
.right-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  gap: 12px;
}

.right-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.right-panel-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
}

.right-panel-title-text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.right-panel-title-text h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
}

.right-panel-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.right-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.right-panel-text-btn {
  background: transparent;
  border: none;
  color: #8b5cf6;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.right-panel-text-btn:hover {
  background: rgba(139, 92, 246, 0.1);
}

.right-panel-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.right-panel-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ==========================================================================
   DRAWER BODY
   ========================================================================== */
.right-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rp-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rp-section-title {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  margin: 0;
}

/* ==========================================================================
   INPUTS & BUTTONS
   ========================================================================== */
.rp-input {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #d9e0e7;
  padding: 0 12px;
  font-size: 0.85rem;
  background: #ffffff;
  color: #1f2937;
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.rp-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.rp-submit-btn {
  height: 38px;
  border-radius: 8px;
  border: 1px solid #333a4c;
  background: #1e222e;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.rp-submit-btn:hover:not(:disabled) {
  background: #282e3f;
  border-color: #444d64;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.rp-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   NOTIFICATIONS CONTEXT STYLES
   ========================================================================== */
.rp-notification-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.rp-notification-tab {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  text-align: center;
}

.rp-notification-tab:hover:not(.active) {
  border-color: #cbd5e1;
  color: #0f172a;
}

.rp-notification-tab.active {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  font-weight: 700;
}

.rp-notification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.rp-notification-item.unread {
  background: #fbf9ff;
  border-color: rgba(139, 92, 246, 0.3);
}

.rp-notification-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.rp-sev-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.rp-sev-dot.info { background: #3b82f6; }
.rp-sev-dot.success { background: #22c55e; }
.rp-sev-dot.warning { background: #f59e0b; }
.rp-sev-dot.error { background: #ef4444; }

.rp-notification-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rp-notification-title {
  font-size: 0.85rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.3;
}

.rp-notification-body {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rp-notification-link-hint {
  font-size: 0.72rem;
  color: #8b5cf6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.rp-action-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rp-action-icon-btn:hover {
  background: #e2e8f0;
  color: #ef4444;
}

/* ==========================================================================
   TO DO CONTEXT STYLES
   ========================================================================== */
.rp-todo-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-todo-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.rp-todo-item:hover {
  border-color: #cbd5e1;
}

.rp-todo-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rp-todo-checkbox {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #8b5cf6;
}

.rp-todo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rp-todo-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.rp-todo-title.completed {
  text-decoration: line-through;
  color: #94a3b8;
}

.rp-todo-notes {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
}

/* ==========================================================================
   QUICK ACCESS CONTEXT STYLES
   ========================================================================== */
.rp-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 520px) {
  .right-panel-drawer.context-quickAccess .rp-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rp-quick-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.rp-quick-tile:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: none;
  transform: translateY(-1px);
}

.rp-quick-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-quick-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-quick-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #8b5cf6;
  color: #ffffff;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  border: 2px solid #ffffff;
}

.rp-custom-link-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-custom-link-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rp-saved-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-saved-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.rp-saved-link-item:hover {
  border-color: #cbd5e1;
}

.rp-saved-link-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  min-width: 0;
}

.rp-saved-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rp-saved-link-title {
  font-size: 0.82rem;
  font-weight: 650;
  color: #0f172a;
}

.rp-saved-link-url {
  font-size: 0.72rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   ACCOUNT & PROFILE CONTEXT STYLES
   ========================================================================== */
.rp-profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rp-profile-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

.rp-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rp-profile-name {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-profile-email {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-profile-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: #8b5cf6;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 4px;
}

.rp-profile-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-menu-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rp-menu-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rp-menu-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateX(2px);
}

.rp-menu-arrow {
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.rp-menu-btn:hover .rp-menu-arrow {
  transform: translateX(3px);
  color: #64748b;
}

.rp-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rp-logout-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

/* ==========================================================================
   EMPTY STATE STYLING
   ========================================================================== */
.rp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 16px;
  color: #94a3b8;
  text-align: center;
}

.rp-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  margin-bottom: 4px;
}

.rp-empty-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
}

.rp-empty-subtitle {
  font-size: 0.78rem;
  color: #94a3b8;
  max-width: 240px;
}

/* ==========================================================================
   DARK THEME OVERRIDES (TRUE SOLID BLACK #000000 & #2A3245 BORDER)
   ========================================================================== */
.dark .right-panel-drawer,
[data-theme="dark"] .right-panel-drawer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-left: 1px solid #2a3245 !important;
  color: #ffffff !important;
  box-shadow: -14px 0 44px rgba(0, 0, 0, 0.95) !important;
}

.dark .right-panel-header,
[data-theme="dark"] .right-panel-header {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .right-panel-title-text h2,
[data-theme="dark"] .right-panel-title-text h2 {
  color: #ffffff !important;
}

.dark .right-panel-close-btn,
[data-theme="dark"] .right-panel-close-btn {
  background: #1f2432 !important;
  background-color: #1f2432 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .right-panel-close-btn:hover,
[data-theme="dark"] .right-panel-close-btn:hover {
  background: #2a3245 !important;
  background-color: #2a3245 !important;
  color: #ffffff !important;
}

.dark .rp-section-title,
[data-theme="dark"] .rp-section-title {
  color: #94a3b8 !important;
}

.dark .rp-input,
[data-theme="dark"] .rp-input {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .rp-input:focus,
[data-theme="dark"] .rp-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.dark .rp-notification-tabs,
[data-theme="dark"] .rp-notification-tabs {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #2a3245 !important;
}

.dark .rp-notification-tab,
[data-theme="dark"] .rp-notification-tab {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #949aa6 !important;
}

.dark .rp-notification-tab:hover:not(.active),
[data-theme="dark"] .rp-notification-tab:hover:not(.active) {
  background: #181d2a !important;
  border-color: #3b455c !important;
  color: #ffffff !important;
}

.dark .rp-notification-tab.active,
[data-theme="dark"] .rp-notification-tab.active {
  background: #1e222e !important;
  background-color: #1e222e !important;
  border: 1px solid #333a4c !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.dark .rp-notification-item,
[data-theme="dark"] .rp-notification-item {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .rp-notification-item.unread,
[data-theme="dark"] .rp-notification-item.unread {
  background: #12141a !important;
  background-color: #12141a !important;
  border-color: #2a3245 !important;
}

.dark .rp-notification-title,
[data-theme="dark"] .rp-notification-title {
  color: #ffffff !important;
}

.dark .rp-notification-body,
[data-theme="dark"] .rp-notification-body {
  color: #94a3b8 !important;
}

.dark .rp-action-icon-btn,
[data-theme="dark"] .rp-action-icon-btn {
  color: #64748b !important;
}

.dark .rp-action-icon-btn:hover,
[data-theme="dark"] .rp-action-icon-btn:hover {
  background: #2a3245 !important;
  color: #ef4444 !important;
}

.dark .rp-todo-item,
[data-theme="dark"] .rp-todo-item {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .rp-todo-item:hover,
[data-theme="dark"] .rp-todo-item:hover {
  border-color: #3b455c !important;
}

.dark .rp-todo-title,
[data-theme="dark"] .rp-todo-title {
  color: #ffffff !important;
}

.dark .rp-todo-title.completed,
[data-theme="dark"] .rp-todo-title.completed {
  color: #64748b !important;
}

.dark .rp-todo-notes,
[data-theme="dark"] .rp-todo-notes {
  color: #94a3b8 !important;
}

.dark .rp-quick-tile,
[data-theme="dark"] .rp-quick-tile {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #cbd5e1 !important;
}

.dark .rp-quick-tile:hover,
[data-theme="dark"] .rp-quick-tile:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.dark .rp-quick-label,
[data-theme="dark"] .rp-quick-label {
  color: #ffffff !important;
}

.dark .rp-quick-badge,
[data-theme="dark"] .rp-quick-badge {
  border-color: #000000 !important;
}

.dark .rp-saved-link-item,
[data-theme="dark"] .rp-saved-link-item {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .rp-saved-link-title,
[data-theme="dark"] .rp-saved-link-title {
  color: #ffffff !important;
}

.dark .rp-saved-link-url,
[data-theme="dark"] .rp-saved-link-url {
  color: #94a3b8 !important;
}

.dark .rp-profile-hero,
[data-theme="dark"] .rp-profile-hero {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
}

.dark .rp-profile-name,
[data-theme="dark"] .rp-profile-name {
  color: #ffffff !important;
}

.dark .rp-profile-email,
[data-theme="dark"] .rp-profile-email {
  color: #94a3b8 !important;
}

.dark .rp-menu-btn,
[data-theme="dark"] .rp-menu-btn {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2a3245 !important;
  color: #ffffff !important;
}

.dark .rp-menu-btn:hover,
[data-theme="dark"] .rp-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #3b3b44 !important;
  color: #ffffff !important;
}

.dark .rp-menu-btn:hover .rp-menu-arrow,
[data-theme="dark"] .rp-menu-btn:hover .rp-menu-arrow {
  color: #ffffff !important;
}

.dark .rp-logout-btn,
[data-theme="dark"] .rp-logout-btn {
  background: #180d0d !important;
  border: 1px solid #5a1e1e !important;
  color: #f87171 !important;
}

.dark .rp-logout-btn:hover,
[data-theme="dark"] .rp-logout-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.dark .rp-empty-icon,
[data-theme="dark"] .rp-empty-icon {
  background: #12151d !important;
  color: #64748b !important;
}

.dark .rp-empty-title,
[data-theme="dark"] .rp-empty-title {
  color: #ffffff !important;
}

.dark .rp-empty-subtitle,
[data-theme="dark"] .rp-empty-subtitle {
  color: #64748b !important;
}
/* =========================================================
   TOP PERSISTENT IMPERSONATION BANNER
   Reduced height compact strip (30px)
   Lavender banner (#a289b8), deep violet typography (#3b1560),
   live timer badge, and vibrant violet Exit Impersonation button (#7c3aed)
   ========================================================= */

.impersonation-banner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 30px;
  max-height: 30px;
  z-index: 10000;
  box-sizing: border-box;
  animation: slideDownBanner 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownBanner {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  background-color: #a289b8 !important;
  background: #a289b8 !important;
  color: #3b1560 !important;
  font-family: inherit;
  font-size: 11.5px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border-bottom: 1px solid rgba(59, 21, 96, 0.18);
  box-sizing: border-box;
  overflow: hidden;
}

.dark .impersonation-banner,
[data-theme='dark'] .impersonation-banner {
  background-color: #a289b8 !important;
  background: #a289b8 !important;
  color: #3b1560 !important;
}

.impersonation-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.impersonation-avatar-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(59, 21, 96, 0.12);
  border: 1px solid rgba(59, 21, 96, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b1560;
  flex-shrink: 0;
}

.impersonation-banner-text {
  font-size: 11.5px;
  color: #3b1560 !important;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.impersonation-mode-label {
  font-weight: 700;
  color: #3b1560 !important;
}

.impersonation-viewing-text {
  font-weight: 400;
  color: #3b1560 !important;
}

.impersonation-target-user {
  font-weight: 700;
  color: #1f0836 !important;
}

.impersonation-target-email-paren {
  font-weight: 400;
  color: #3b1560 !important;
  opacity: 0.9;
}

.impersonation-dash-sep {
  margin: 0 4px;
  color: #3b1560 !important;
  opacity: 0.75;
}

.impersonation-initiated-text {
  font-weight: 400;
  color: #3b1560 !important;
}

.impersonation-initiator-user {
  font-weight: 700;
  color: #1f0836 !important;
}

.impersonation-banner-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Live Session Timer Pill */
.impersonation-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(59, 21, 96, 0.12);
  border: 1px solid rgba(59, 21, 96, 0.22);
  border-radius: 4px;
  padding: 1px 7px;
  height: 20px;
  box-sizing: border-box;
  color: #240b3c;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.impersonation-timer-icon {
  color: #3b1560;
  opacity: 0.85;
}

.impersonation-timer-text {
  line-height: 1;
}

/* Compact Exit Button */
.impersonation-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1e222e !important;
  background-color: #1e222e !important;
  color: #ffffff !important;
  border: 1px solid #333a4c !important;
  border-radius: 4px;
  padding: 0 9px;
  height: 22px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.impersonation-exit-btn:hover {
  background: #282e3f !important;
  background-color: #282e3f !important;
  border-color: #444d64 !important;
  opacity: 0.95;
}
/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--color-amber-50:oklch(98.7% .022 95.277);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-950:oklch(27.9% .077 45.635);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-950:oklch(26.2% .051 172.552);--color-cyan-50:oklch(98.4% .019 200.873);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-500:oklch(71.5% .143 215.221);--color-cyan-600:oklch(60.9% .126 221.723);--color-cyan-950:oklch(30.2% .056 229.695);--color-sky-50:oklch(97.7% .013 236.62);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-600:oklch(58.8% .158 241.966);--color-sky-950:oklch(29.3% .066 243.157);--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-950:oklch(28.2% .091 267.935);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-950:oklch(29.1% .149 302.717);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-rose-950:oklch(27.1% .105 12.094);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-300:oklch(87.2% .01 258.338);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-sm:0 1px 2px #00000026;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::-moz-placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.-inset-2\.5{inset:calc(var(--spacing) * -2.5)}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.top-\[50\%\]{top:50%}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.bottom-3{bottom:calc(var(--spacing) * 3)}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.left-3\.5{left:calc(var(--spacing) * 3.5)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.container{margin-inline:auto;padding-inline:2rem}@media (min-width:40rem){.container{max-width:none}}@media (min-width:1400px){.container{max-width:1400px}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-1\.5{margin-inline:calc(var(--spacing) * 1.5)}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.my-1{margin-block:calc(var(--spacing) * 1)}.my-2{margin-block:calc(var(--spacing) * 2)}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3\.5{margin-bottom:calc(var(--spacing) * 3.5)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.h-px{height:1px}.max-h-\[480px\]{max-height:480px}.min-h-\[90px\]{min-height:90px}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[280px\]{min-height:280px}.min-h-\[520px\]{min-height:520px}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-30{width:calc(var(--spacing) * 30)}.w-40{width:calc(var(--spacing) * 40)}.w-80{width:calc(var(--spacing) * 80)}.w-100{width:calc(var(--spacing) * 100)}.w-full{width:100%}.w-px{width:1px}.max-w-\[420px\]{max-width:420px}.max-w-\[460px\]{max-width:460px}.max-w-lg{max-width:var(--container-lg)}.min-w-\[8rem\]{min-width:8rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[42px\]{min-width:42px}.min-w-\[140px\]{min-width:140px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-0{rotate:0deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize{resize:both}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[\#2a3245\]>:not(:last-child)){border-color:#2a3245}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-\[\#2a3245\]{border-color:#2a3245}.border-amber-200{border-color:var(--color-amber-200)}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/20{border-color:color-mix(in oklab, var(--color-amber-500) 20%, transparent)}}.border-amber-500\/30{border-color:#f99c004d}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/30{border-color:color-mix(in oklab, var(--color-amber-500) 30%, transparent)}}.border-blue-500\/20{border-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/20{border-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.border-border,.border-border\/50{border-color:hsl(var(--border))}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, hsl(var(--border)) 50%, transparent)}}.border-border\/60{border-color:hsl(var(--border))}@supports (color:color-mix(in lab, red, red)){.border-border\/60{border-color:color-mix(in oklab, hsl(var(--border)) 60%, transparent)}}.border-border\/80{border-color:hsl(var(--border))}@supports (color:color-mix(in lab, red, red)){.border-border\/80{border-color:color-mix(in oklab, hsl(var(--border)) 80%, transparent)}}.border-destructive\/20{border-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/20{border-color:color-mix(in oklab, hsl(var(--destructive)) 20%, transparent)}}.border-emerald-200{border-color:var(--color-emerald-200)}.border-emerald-500\/20{border-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/20{border-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/30{border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.border-indigo-300{border-color:var(--color-indigo-300)}.border-input{border-color:hsl(var(--input))}.border-primary\/20{border-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, hsl(var(--primary)) 20%, transparent)}}.border-purple-500\/20{border-color:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.border-purple-500\/20{border-color:color-mix(in oklab, var(--color-purple-500) 20%, transparent)}}.border-rose-200{border-color:var(--color-rose-200)}.border-rose-900\/60{border-color:#8b083699}@supports (color:color-mix(in lab, red, red)){.border-rose-900\/60{border-color:color-mix(in oklab, var(--color-rose-900) 60%, transparent)}}.border-success\/20{border-color:hsl(var(--success))}@supports (color:color-mix(in lab, red, red)){.border-success\/20{border-color:color-mix(in oklab, hsl(var(--success)) 20%, transparent)}}.border-warning\/20{border-color:hsl(var(--warning))}@supports (color:color-mix(in lab, red, red)){.border-warning\/20{border-color:color-mix(in oklab, hsl(var(--warning)) 20%, transparent)}}.border-white{border-color:var(--color-white)}.bg-\[\#181a20\]{background-color:#181a20}.bg-\[\#181c26\]{background-color:#181c26}.bg-\[\#27272a\]{background-color:#27272a}.bg-accent{background-color:hsl(var(--accent))}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-50\/30{background-color:#fffbeb4d}@supports (color:color-mix(in lab, red, red)){.bg-amber-50\/30{background-color:color-mix(in oklab, var(--color-amber-50) 30%, transparent)}}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-amber-500\/15{background-color:#f99c0026}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/15{background-color:color-mix(in oklab, var(--color-amber-500) 15%, transparent)}}.bg-background{background-color:hsl(var(--background))}.bg-black{background-color:var(--color-black)}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.bg-blue-500\/15{background-color:#3080ff26}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/15{background-color:color-mix(in oklab, var(--color-blue-500) 15%, transparent)}}.bg-border,.bg-border\/60{background-color:hsl(var(--border))}@supports (color:color-mix(in lab, red, red)){.bg-border\/60{background-color:color-mix(in oklab, hsl(var(--border)) 60%, transparent)}}.bg-card{background-color:hsl(var(--card))}.bg-cyan-50{background-color:var(--color-cyan-50)}.bg-destructive,.bg-destructive\/10{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, hsl(var(--destructive)) 10%, transparent)}}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-50\/30{background-color:#ecfdf54d}@supports (color:color-mix(in lab, red, red)){.bg-emerald-50\/30{background-color:color-mix(in oklab, var(--color-emerald-50) 30%, transparent)}}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/15{background-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-500\/25{background-color:#625fff40}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/25{background-color:color-mix(in oklab, var(--color-indigo-500) 25%, transparent)}}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-muted,.bg-muted\/30{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, hsl(var(--muted)) 30%, transparent)}}.bg-muted\/50{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, hsl(var(--muted)) 50%, transparent)}}.bg-popover{background-color:hsl(var(--popover))}.bg-primary,.bg-primary\/10{background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, hsl(var(--primary)) 10%, transparent)}}.bg-purple-50{background-color:var(--color-purple-50)}.bg-purple-500\/10{background-color:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/10{background-color:color-mix(in oklab, var(--color-purple-500) 10%, transparent)}}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-50\/30{background-color:#fff1f24d}@supports (color:color-mix(in lab, red, red)){.bg-rose-50\/30{background-color:color-mix(in oklab, var(--color-rose-50) 30%, transparent)}}.bg-rose-500{background-color:var(--color-rose-500)}.bg-rose-500\/10{background-color:#ff23571a}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/10{background-color:color-mix(in oklab, var(--color-rose-500) 10%, transparent)}}.bg-rose-500\/15{background-color:#ff235726}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/15{background-color:color-mix(in oklab, var(--color-rose-500) 15%, transparent)}}.bg-rose-950\/30{background-color:#4d02184d}@supports (color:color-mix(in lab, red, red)){.bg-rose-950\/30{background-color:color-mix(in oklab, var(--color-rose-950) 30%, transparent)}}.bg-secondary{background-color:hsl(var(--secondary))}.bg-sky-50{background-color:var(--color-sky-50)}.bg-sky-600{background-color:var(--color-sky-600)}.bg-slate-400{background-color:var(--color-slate-400)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-success\/10{background-color:hsl(var(--success))}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, hsl(var(--success)) 10%, transparent)}}.bg-transparent{background-color:#0000}.bg-warning\/10{background-color:hsl(var(--warning))}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, hsl(var(--warning)) 10%, transparent)}}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-emerald-500{--tw-gradient-from:var(--color-emerald-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-rose-500{--tw-gradient-from:var(--color-rose-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-emerald-600{--tw-gradient-to:var(--color-emerald-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-rose-600{--tw-gradient-to:var(--color-rose-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.stroke-\[3\]{stroke-width:3px}.object-contain{-o-object-fit:contain;object-fit:contain}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-4{padding-block:calc(var(--spacing) * 4)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-8{padding-left:calc(var(--spacing) * 8)}.pl-10{padding-left:calc(var(--spacing) * 10)}.pl-101{padding-left:calc(var(--spacing) * 101)}.pl-102{padding-left:calc(var(--spacing) * 102)}.pl-103{padding-left:calc(var(--spacing) * 103)}.pl-104{padding-left:calc(var(--spacing) * 104)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#71717a\]{color:#71717a}.text-\[\#a1a1aa\]{color:#a1a1aa}.text-\[\#f4f4f5\]{color:#f4f4f5}.text-amber-300{color:var(--color-amber-300)}.text-amber-400{color:var(--color-amber-400)}.text-amber-500{color:var(--color-amber-500)}.text-amber-600{color:var(--color-amber-600)}.text-amber-700{color:var(--color-amber-700)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-card-foreground{color:hsl(var(--card-foreground))}.text-cyan-500{color:var(--color-cyan-500)}.text-cyan-600{color:var(--color-cyan-600)}.text-destructive{color:hsl(var(--destructive))}.text-destructive-foreground{color:hsl(var(--destructive-foreground))}.text-emerald-400{color:var(--color-emerald-400)}.text-emerald-500{color:var(--color-emerald-500)}.text-emerald-600{color:var(--color-emerald-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-foreground,.text-foreground\/80{color:hsl(var(--foreground))}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, hsl(var(--foreground)) 80%, transparent)}}.text-indigo-400{color:var(--color-indigo-400)}.text-indigo-500{color:var(--color-indigo-500)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-muted{color:hsl(var(--muted))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-popover-foreground{color:hsl(var(--popover-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-purple-400{color:var(--color-purple-400)}.text-purple-500{color:var(--color-purple-500)}.text-purple-600{color:var(--color-purple-600)}.text-rose-300{color:var(--color-rose-300)}.text-rose-400{color:var(--color-rose-400)}.text-rose-500{color:var(--color-rose-500)}.text-rose-600{color:var(--color-rose-600)}.text-rose-700{color:var(--color-rose-700)}.text-rose-800{color:var(--color-rose-800)}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-sky-400{color:var(--color-sky-400)}.text-sky-500{color:var(--color-sky-500)}.text-sky-600{color:var(--color-sky-600)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-success{color:hsl(var(--success))}.text-warning{color:hsl(var(--warning))}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.accent-amber-500{accent-color:var(--color-amber-500)}.accent-indigo-400{accent-color:var(--color-indigo-400)}.accent-primary{accent-color:hsl(var(--primary))}.accent-slate-900{accent-color:var(--color-slate-900)}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-emerald-500\/30{--tw-ring-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.ring-emerald-500\/30{--tw-ring-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.ring-rose-500\/30{--tw-ring-color:#ff23574d}@supports (color:color-mix(in lab, red, red)){.ring-rose-500\/30{--tw-ring-color:color-mix(in oklab, var(--color-rose-500) 30%, transparent)}}.ring-white\/80{--tw-ring-color:#fffc}@supports (color:color-mix(in lab, red, red)){.ring-white\/80{--tw-ring-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.animate-in{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.duration-300{animation-duration:.3s}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.fade-in{--tw-enter-opacity:0}.running{animation-play-state:running}.peer-checked\:bg-purple-600:is(:where(.peer):checked~*){background-color:var(--color-purple-600)}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::-moz-placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-slate-500::-moz-placeholder{color:var(--color-slate-500)}.placeholder\:text-slate-500::placeholder{color:var(--color-slate-500)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:h-4:after{content:var(--tw-content);height:calc(var(--spacing) * 4)}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing) * 5)}.after\:w-4:after{content:var(--tw-content);width:calc(var(--spacing) * 4)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing) * 5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:border-gray-300:after{content:var(--tw-content);border-color:var(--color-gray-300)}.after\:bg-white:after{content:var(--tw-content);background-color:var(--color-white)}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-checked\:after\:border-white:is(:where(.peer):checked~*):after{content:var(--tw-content);border-color:var(--color-white)}@media (hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-\[\#8b5cf6\]:hover{border-color:#8b5cf6}.hover\:bg-\[\#1f2432\]:hover{background-color:#1f2432}.hover\:bg-\[\#2a3245\]:hover{background-color:#2a3245}.hover\:bg-\[\#111318\]:hover{background-color:#111318}.hover\:bg-\[\#202636\]:hover{background-color:#202636}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-destructive\/10:hover{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/10:hover{background-color:color-mix(in oklab, hsl(var(--destructive)) 10%, transparent)}}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, hsl(var(--destructive)) 90%, transparent)}}.hover\:bg-muted:hover,.hover\:bg-muted\/30:hover{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/30:hover{background-color:color-mix(in oklab, hsl(var(--muted)) 30%, transparent)}}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, hsl(var(--primary)) 90%, transparent)}}.hover\:bg-secondary\/90:hover{background-color:hsl(var(--secondary))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab, hsl(var(--secondary)) 90%, transparent)}}.hover\:bg-sky-500:hover{background-color:var(--color-sky-500)}.hover\:text-destructive:hover{color:hsl(var(--destructive))}.hover\:text-foreground:hover{color:hsl(var(--foreground))}.hover\:text-primary\/80:hover{color:hsl(var(--primary))}@supports (color:color-mix(in lab, red, red)){.hover\:text-primary\/80:hover{color:color-mix(in oklab, hsl(var(--primary)) 80%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:brightness-105:hover{--tw-brightness:brightness(105%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:border-\[\#3b3b44\]:focus{border-color:#3b3b44}.focus\:border-\[\#4c4c55\]:focus{border-color:#4c4c55}.focus\:border-sky-500:focus{border-color:var(--color-sky-500)}.focus\:bg-muted\/30:focus{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.focus\:bg-muted\/30:focus{background-color:color-mix(in oklab, hsl(var(--muted)) 30%, transparent)}}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-sky-500:focus{--tw-ring-color:var(--color-sky-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:hsl(var(--ring))}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-\[0\.99\]:active{scale:.99}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[state\=closed\]\:animate-out[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\[state\=open\]\:bg-muted\/30[data-state=open]{background-color:hsl(var(--muted))}@supports (color:color-mix(in lab, red, red)){.data-\[state\=open\]\:bg-muted\/30[data-state=open]{background-color:color-mix(in oklab, hsl(var(--muted)) 30%, transparent)}}.data-\[state\=open\]\:animate-in[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}@media (min-width:40rem){.sm\:h-4{height:calc(var(--spacing) * 4)}.sm\:h-6{height:calc(var(--spacing) * 6)}.sm\:h-8{height:calc(var(--spacing) * 8)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:p-7{padding:calc(var(--spacing) * 7)}.sm\:p-8{padding:calc(var(--spacing) * 8)}.sm\:text-left{text-align:left}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.dark\:border-amber-800\/40:is(.dark *){border-color:#953d0066}@supports (color:color-mix(in lab, red, red)){.dark\:border-amber-800\/40:is(.dark *){border-color:color-mix(in oklab, var(--color-amber-800) 40%, transparent)}}.dark\:border-amber-800\/60:is(.dark *){border-color:#953d0099}@supports (color:color-mix(in lab, red, red)){.dark\:border-amber-800\/60:is(.dark *){border-color:color-mix(in oklab, var(--color-amber-800) 60%, transparent)}}.dark\:border-emerald-800\/40:is(.dark *){border-color:#005f4666}@supports (color:color-mix(in lab, red, red)){.dark\:border-emerald-800\/40:is(.dark *){border-color:color-mix(in oklab, var(--color-emerald-800) 40%, transparent)}}.dark\:border-emerald-800\/60:is(.dark *){border-color:#005f4699}@supports (color:color-mix(in lab, red, red)){.dark\:border-emerald-800\/60:is(.dark *){border-color:color-mix(in oklab, var(--color-emerald-800) 60%, transparent)}}.dark\:border-rose-800\/40:is(.dark *){border-color:#a3003766}@supports (color:color-mix(in lab, red, red)){.dark\:border-rose-800\/40:is(.dark *){border-color:color-mix(in oklab, var(--color-rose-800) 40%, transparent)}}.dark\:border-rose-800\/60:is(.dark *){border-color:#a3003799}@supports (color:color-mix(in lab, red, red)){.dark\:border-rose-800\/60:is(.dark *){border-color:color-mix(in oklab, var(--color-rose-800) 60%, transparent)}}.dark\:bg-amber-950\/10:is(.dark *){background-color:#4619011a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-amber-950\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-amber-950) 10%, transparent)}}.dark\:bg-amber-950\/40:is(.dark *){background-color:#46190166}@supports (color:color-mix(in lab, red, red)){.dark\:bg-amber-950\/40:is(.dark *){background-color:color-mix(in oklab, var(--color-amber-950) 40%, transparent)}}.dark\:bg-blue-950\/40:is(.dark *){background-color:#16245666}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-950\/40:is(.dark *){background-color:color-mix(in oklab, var(--color-blue-950) 40%, transparent)}}.dark\:bg-blue-950\/50:is(.dark *){background-color:#16245680}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-950\/50:is(.dark *){background-color:color-mix(in oklab, var(--color-blue-950) 50%, transparent)}}.dark\:bg-cyan-950\/50:is(.dark *){background-color:#05334580}@supports (color:color-mix(in lab, red, red)){.dark\:bg-cyan-950\/50:is(.dark *){background-color:color-mix(in oklab, var(--color-cyan-950) 50%, transparent)}}.dark\:bg-emerald-950\/10:is(.dark *){background-color:#002c221a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-950\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-emerald-950) 10%, transparent)}}.dark\:bg-emerald-950\/40:is(.dark *){background-color:#002c2266}@supports (color:color-mix(in lab, red, red)){.dark\:bg-emerald-950\/40:is(.dark *){background-color:color-mix(in oklab, var(--color-emerald-950) 40%, transparent)}}.dark\:bg-purple-950\/40:is(.dark *){background-color:#3c036666}@supports (color:color-mix(in lab, red, red)){.dark\:bg-purple-950\/40:is(.dark *){background-color:color-mix(in oklab, var(--color-purple-950) 40%, transparent)}}.dark\:bg-purple-950\/50:is(.dark *){background-color:#3c036680}@supports (color:color-mix(in lab, red, red)){.dark\:bg-purple-950\/50:is(.dark *){background-color:color-mix(in oklab, var(--color-purple-950) 50%, transparent)}}.dark\:bg-rose-950\/10:is(.dark *){background-color:#4d02181a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-rose-950\/10:is(.dark *){background-color:color-mix(in oklab, var(--color-rose-950) 10%, transparent)}}.dark\:bg-rose-950\/40:is(.dark *){background-color:#4d021866}@supports (color:color-mix(in lab, red, red)){.dark\:bg-rose-950\/40:is(.dark *){background-color:color-mix(in oklab, var(--color-rose-950) 40%, transparent)}}.dark\:bg-sky-950\/50:is(.dark *){background-color:#052f4a80}@supports (color:color-mix(in lab, red, red)){.dark\:bg-sky-950\/50:is(.dark *){background-color:color-mix(in oklab, var(--color-sky-950) 50%, transparent)}}.dark\:bg-slate-100:is(.dark *){background-color:var(--color-slate-100)}.dark\:text-amber-300:is(.dark *){color:var(--color-amber-300)}.dark\:text-amber-400:is(.dark *){color:var(--color-amber-400)}.dark\:text-blue-400:is(.dark *){color:var(--color-blue-400)}.dark\:text-cyan-400:is(.dark *){color:var(--color-cyan-400)}.dark\:text-emerald-300:is(.dark *){color:var(--color-emerald-300)}.dark\:text-emerald-400:is(.dark *){color:var(--color-emerald-400)}.dark\:text-purple-400:is(.dark *){color:var(--color-purple-400)}.dark\:text-rose-300:is(.dark *){color:var(--color-rose-300)}.dark\:text-rose-400:is(.dark *){color:var(--color-rose-400)}.dark\:text-sky-400:is(.dark *){color:var(--color-sky-400)}.dark\:text-slate-900:is(.dark *){color:var(--color-slate-900)}.dark\:accent-slate-100:is(.dark *){accent-color:var(--color-slate-100)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}}:root{--radius:1rem;--background:210 40% 98%;--foreground:222 47% 11%;--card:0 0% 100%;--card-foreground:222 47% 11%;--popover:0 0% 100%;--popover-foreground:222 47% 11%;--primary:262 83% 58%;--primary-foreground:210 40% 98%;--secondary:262 83% 58%;--secondary-foreground:210 40% 98%;--muted:210 40% 96%;--muted-foreground:215 16% 47%;--accent:210 40% 96%;--accent-foreground:222 47% 11%;--destructive:0 74% 42%;--destructive-foreground:210 40% 98%;--success:142 71% 45%;--success-foreground:210 40% 98%;--warning:38 92% 50%;--warning-foreground:222 47% 11%;--border:214 32% 91%;--input:214 32% 91%;--ring:262 83% 58%;--chart-1:262 83% 58%;--chart-2:142 71% 45%;--chart-3:38 92% 50%;--chart-4:262 83% 58%;--chart-5:0 74% 42%}.dark{--background:0 0% 0%;--foreground:0 0% 95%;--card:0 0% 0%;--card-foreground:0 0% 95%;--popover:0 0% 0%;--popover-foreground:0 0% 95%;--primary:263 70% 60%;--primary-foreground:0 0% 98%;--secondary:0 0% 0%;--secondary-foreground:0 0% 95%;--muted:0 0% 0%;--muted-foreground:0 0% 64%;--accent:0 0% 0%;--accent-foreground:0 0% 95%;--destructive:0 62% 45%;--destructive-foreground:0 0% 98%;--success:142 70% 45%;--success-foreground:0 0% 98%;--warning:38 92% 50%;--warning-foreground:0 0% 98%;--border:0 0% 18%;--input:0 0% 18%;--ring:263 70% 60%;--chart-1:262 83% 65%;--chart-2:142 70% 50%;--chart-3:38 92% 55%;--chart-4:217 90% 65%;--chart-5:0 74% 55%}*,:before,:after,body,button,input,select,textarea,optgroup,option{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}body{background-color:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;margin:0}html,body,#root{height:100%}*{-webkit-tap-highlight-color:transparent}input::-ms-reveal{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}input::-ms-clear{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}input[type=password]::-ms-reveal{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}input[type=password]::-ms-clear{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}input[type=text]::-ms-reveal{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}input[type=text]::-ms-clear{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}::-ms-reveal{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}::-ms-clear{visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;display:none!important}button[aria-label*=password i],button[aria-label*=Password i],.password-toggle-btn{box-shadow:none!important;background:0 0!important;border:none!important;outline:none!important}button[aria-label*=password i]:focus,button[aria-label*=password i]:focus-visible,button[aria-label*=Password i]:focus,button[aria-label*=Password i]:focus-visible{box-shadow:none!important;border:none!important;outline:none!important}.text-title{letter-spacing:-.025em;font-size:1.5rem;font-weight:700;line-height:2rem}.text-table-header{letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground));font-size:.75rem;font-weight:600;line-height:1rem}.text-muted-label{color:hsl(var(--muted-foreground));font-size:.875rem;line-height:1.25rem}.text-mono-value{color:hsl(var(--muted-foreground));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;line-height:1rem}.dark{color-scheme:dark}.dark .app{color:#f4f4f5!important;background-color:#000!important}.dark .app-header{color:#f4f4f5!important;background-color:#000!important;border-bottom-color:#27272a!important}.dark .main-content{color:#f4f4f5!important;background-color:#000!important}.sidebar{background-color:var(--left-panel-bg,#fff)!important;border-right-color:var(--left-panel-border,#e2e8f0)!important}.dark .sidebar,[data-theme=dark] .sidebar{background-color:#000!important;border-right-color:#2a3245!important}.sidebar-header{background-color:var(--left-panel-bg,#fff)!important;border-bottom-color:var(--left-panel-border,#e2e8f0)!important}.dark .sidebar-header,[data-theme=dark] .sidebar-header{background-color:#000!important;border-bottom-color:#2a3245!important}.sidebar-footer{color:var(--left-panel-text-muted,#64748b)!important;background-color:#0000!important}.dark .sidebar-footer,[data-theme=dark] .sidebar-footer{color:var(--left-panel-text-muted,#5d636f)!important;background-color:#0000!important}.sidebar-version{color:var(--left-panel-text-muted,#64748b)!important}.dark .sidebar-version,[data-theme=dark] .sidebar-version{color:var(--left-panel-text-muted,#5d636f)!important}.nav-section-title{color:#64748b!important}.dark .nav-section-title{color:#5d636f!important}.nav-section-title:hover,.dark .nav-section-title:hover{color:#94a3b8!important}.nav-item,.dark .nav-item{color:#94a3b8!important;background:0 0!important;border-color:#0000!important}.nav-item:hover,.dark .nav-item:hover{color:#fff!important;background-color:#ffffff0f!important}.nav-item.active,.dark .nav-item.active{color:#fff!important;box-shadow:none!important;background:#2e2d6b!important;border-radius:10px!important}.nav-item.active .nav-icon,.dark .nav-item.active .nav-icon{color:#fff!important}.nav-beta-badge,.dark .nav-beta-badge{color:#a855f7!important;background-color:#1f2432!important;border-color:#2a3245!important}.dark .nav-chevron{color:#52525b!important}.dark .breadcrumb-bar{background-color:#000!important;border-bottom-color:#27272a!important}.dark .breadcrumb{color:#a1a1aa!important}.dark .breadcrumb-item{color:#71717a!important}.dark .breadcrumb-item:last-child{color:#f4f4f5!important}.dark .breadcrumb-sep{color:#52525b!important}.dark .breadcrumb-refresh-btn{color:#a1a1aa!important;background-color:#000!important;border-color:#2a3245!important}.dark .breadcrumb-refresh-btn:hover{color:#f4f4f5!important;background-color:#ffffff14!important}.dark .header-user{box-shadow:none!important;background:#000!important;border:1px solid #2a3245!important}.dark .header-user:hover{background-color:#ffffff14!important;border-color:#3b3b44!important}.dark .user-name{color:#f4f4f5!important}.dark .user-email{color:#a1a1aa!important}.dark .user-chevron{color:#71717a!important}.dark .icon-btn{color:#a1a1aa!important;box-shadow:none!important;background-color:#000!important;border-color:#2a3245!important}.dark .icon-btn:hover{color:#fff!important;background-color:#22242b!important;border-color:#353842!important}.dark .icon-btn.active{background-color:var(--left-panel-active-bg,#8b5cf638)!important;color:#fff!important;box-shadow:none!important;border-color:#0000!important}.dark .icon-btn.active svg,.dark .icon-btn.active .icon-sm{color:#fff!important;stroke:#fff!important}.dark .search-input:not(.header-search .search-input):not(.search-input-wrap .search-input){color:#f4f4f5!important;box-shadow:none!important;background-color:#131722!important;border-color:#2a3245!important}.search-input-wrap .search-input,.dark .search-input-wrap .search-input,.reports-search-input-box .reports-search-input,.dark .reports-search-input-box .reports-search-input{box-shadow:none!important;background:0 0!important;border:0!important;outline:none!important}.dark .search-input:not(.header-search .search-input):focus{box-shadow:none!important;background-color:#131722!important;border-color:#3b3b44!important;outline:none!important}.header-search .search-input,.dark .header-search .search-input{box-shadow:none!important;background:0 0!important;border:none!important;outline:none!important}.dark .profile-card,.dark .header-popover,.dark .settings-card{color:#f4f4f5!important;box-shadow:none!important;background:#000!important;border:1px solid #2a3245!important}.dark .profile-header,.dark .header-popover-head{background:#000!important;border-bottom:1px solid #2a3245!important}.dark .profile-name-text{color:#f4f4f5!important}.dark .profile-email-text{color:#a1a1aa!important}.dark .profile-menu-item{color:#d4d4d8!important}.dark .profile-menu-item:hover{color:#fff!important;background-color:#222225!important}.dark .profile-divider{background-color:#27272a!important}.dark .header-item{color:#f4f4f5!important;border-bottom-color:#27272a!important}.dark .header-item:hover{background-color:#1c1c1f!important}.dark .units-page{color:#f4f4f5!important;background:#000!important}.dark .units-container{background:0 0!important}.dark .units-sidebar{box-shadow:none!important;background:0 0!important;border:none!important}.dark .sidebar-section{background-color:#0000!important}.dark .sidebar-section-flush{border-bottom-color:#2a3245!important}.dark .units-panel-header{color:#f4f4f5!important;background:#000!important;border-bottom:1px solid #2a3245!important}.dark .locations-panel-header{background:#000!important;border-bottom:1px solid #2a3245!important}.dark .locations-header-title{color:#f4f4f5!important}.dark .sidebar-action-card,.dark .sidebar-section-card,.dark .sidebar-action-card:hover,.dark .sidebar-section-card:hover{box-shadow:none!important;color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important;outline:none!important}.dark .units-table-card{box-shadow:none!important;background:#000!important;border:1px solid #2a3245!important}.page-header-card,.player-main-header,.hero-card,.dark .page-header-card,.dark .player-main-header,.dark .hero-card{box-shadow:none!important;background:0 0!important;border:none!important;border-radius:0!important;margin-bottom:16px!important;padding:0 0 6px!important}.selection-header-card{background:var(--units-surface,#fff);border:1px solid var(--units-border,#e5e7eb)!important;box-sizing:border-box!important;border-radius:12px!important;width:100%!important;margin-bottom:16px!important;padding:16px 20px!important;box-shadow:0 1px 3px #1018280d!important}.dark .selection-header-card{box-shadow:none!important;box-sizing:border-box!important;background:#000!important;border:1px solid #2a3245!important;border-radius:12px!important;width:100%!important;margin-bottom:16px!important;padding:16px 20px!important}.dark .main-card,.dark .units-main-card,.dark .units-main-content{box-shadow:none!important;background:0 0!important;border:none!important}.dark .overview-table-wrap{background:0 0!important;border:none!important}.dark .overview-table{color:#f4f4f5!important;background:#000!important}.dark,.dark body,.dark #root,.dark .app,.dark .app-body,.dark .main-content,.dark p,.dark span,.dark label,.dark a,.dark button,.dark input,.dark select,.dark textarea,.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,.dark .sidebar .nav-item,.dark .sidebar .nav-item .nav-label,.dark .sidebar .nav-item .nav-icon,.dark .nav-item,.dark .nav-label,.dark .nav-icon,.dark .nav-section-title,.dark .sidebar-footer,.dark .sidebar-version,.dark .breadcrumb,.dark .breadcrumb-item,.dark .breadcrumb-sep,.dark .breadcrumb-refresh-btn,.dark .sidebar-card-title,.dark .sidebar-section-title,.dark .sidebar-section h3,.dark .filter-label,.dark .display-options label,.dark .filter-sub,.dark .checkbox-label,.dark .status-option-label,.dark .overview-btn,.dark .locations-overview-btn,.dark .locations-list button,.dark .location-name,.dark .location-count-badge,.dark .selection-title-section h2,.dark .selection-subtitle,.dark .health-stat .stat-label,.dark .health-stat .stat-value,.dark .locations-header-title,.dark .locations-header-subtitle,.dark .overview-table thead th,.dark .overview-table tbody tr,.dark .overview-table td,.dark .overview-table th,.dark .overview-location,.dark .overview-row-name,.dark .overview-health-percent,.dark .overview-health-foot,.dark .overview-health-count strong,.dark .overview-health-count span,.dark .user-name,.dark .user-email,.dark .user-chevron,.dark .icon-btn,.dark .muted,.dark .text-muted,.dark .group-select,.dark .units-quickbar-btn,.dark .units-quickbar-btn.active,.dark .sidebar .nav-item.active,.dark .sidebar .nav-item.active .nav-label,.dark .nav-item.active,.dark .nav-item.active .nav-label,.dark .location-item,.dark .location-item.active,.dark .location-item .location-name,.dark .location-item.active .location-name,.dark .location-item .location-count,.dark .location-item.active .location-count,.dark .selection-header-card h2,.dark .selection-header-card p,.dark .selection-header-card span,.dark .selection-header-card button{color:#fff!important}.dark .overview-table thead th{color:#fff!important;background:#000!important;border-bottom-color:#27272a!important}.dark .overview-table tbody tr{color:#fff!important;background:#000!important;border-bottom-color:#222225!important}.dark .overview-table tbody tr:hover{background-color:#ffffff0d!important}.dark .overview-location,.dark .overview-row-name,.dark .overview-health-count strong,.dark .overview-health-count span,.dark .overview-health-percent,.dark .overview-health-foot{color:#fff!important}.dark .overview-bar{background-color:#27272a!important}.dark .pagination-select,.dark .units-page-size select{color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important}.dark .units-page-buttons button{color:#a1a1aa!important}.dark .units-page-buttons button:hover:not(:disabled):not(.active){color:#fff!important;background-color:#202636!important;border-color:#2a3245!important}.dark .overview-btn{color:#a1a1aa!important;background-color:#222225!important;border-color:#2e2e32!important}.dark .overview-btn:hover:not(:disabled){color:#f4f4f5!important;background-color:#2d2d32!important}.dark .location-item{color:#a1a1aa!important;background:0 0!important;border:1px solid #0000!important}.dark .location-item:hover{color:#fff!important;background:#202636!important;border-color:#0000!important}.dark .location-item.active{color:#fff!important;background:#202636!important;border-color:#2a3245!important}.dark .location-name{color:#fff!important}.dark .location-count,.dark .location-count-badge,.dark .dash-location-count,.dark .location-item .location-count{color:#71717a!important;background:0 0!important;border:none!important;font-weight:600!important}.dark .location-item.active .location-count,[data-theme=dark] .location-item.active .location-count{color:#fff!important;background:#22242b!important;border:1px solid #3b3b44!important;font-weight:700!important}.dark .group-select,.dark .location-select,.dark select{color:#fff!important;background:#000!important;border:1px solid #2a3245!important}.dark select option,.dark select optgroup,.dark .group-select option,.dark .group-select optgroup,.dark .location-select option,.dark .dash-group-select option,.dark .pagination-select option,.dark .scope-select option,.dark .pref-select option,.dark option,.dark optgroup{color:#fff!important;background:#000!important}.dark .group-select:focus,.dark .location-select:focus,.dark select:focus{color:#fff!important;background-color:#1f1f23!important;border-color:#2e2d6b!important}.dark .filter-group{border-top-color:#27272a!important}.dark .filter-label{color:#71717a!important}.dark .filter-toggle-options{background-color:#0000!important;border:none!important;flex-direction:column!important;gap:.55rem!important;display:flex!important}.dark .filter-toggle-item{color:#e4e4e7!important;border-bottom:none!important}.dark .filter-toggle-item:hover{color:#fff!important;background-color:#0000!important}.dark .units-quickbar-section{background:#000!important;border-color:#2a3245!important}.dark .units-quickbar-btn{color:#a1a1aa!important}.dark .units-quickbar-btn:hover{color:#fff!important;background-color:#ffffff14!important}.dark .units-quickbar-btn.active{color:#fff!important;background-color:#1e222e!important;border-color:#333a4c!important;box-shadow:0 1px 3px #00000040!important}.dark .unit-card,.dark .device-card,.dark .device-item{color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important}.dark .unit-card:hover,.dark .device-card:hover{background-color:#111318!important;border-color:#2e313b!important}.dark .unit-card-head,.dark .device-card-head{color:#f4f4f5!important;border-bottom-color:#2a3245!important}.dark .unit-card-title,.dark .device-card-title{color:#f4f4f5!important}.dark .unit-card-meta,.dark .device-card-meta{color:#a1a1aa!important}.dark .dashboard-topbar-right,.dark .dash-view-toggle,.dark .dash-card,.dark .dash-metric-card,.dark .stat-card,.dark .office-card,.dark .sites-card,.dark .admin-card,.dark .panel,.dark .card,.dark .list-card{color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important}.dark .dashboard-page,.dark .office-page,.dark .sites-page,.dark .admin-page{color:#f4f4f5!important;background:0 0!important}.dark .admin-header h2,.dark .section-title,.dark .dash-card-title{color:#f4f4f5!important}.dark .admin-header p,.dark .section-subtitle,.dark .muted{color:#a1a1aa!important}.dark input,.dark textarea{color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important}.dark table{color:#f4f4f5!important}.dark tr:hover{background-color:#202636!important}.dark th{color:#a1a1aa!important;background:#000!important;border-bottom-color:#2a3245!important}.dark td{color:#f4f4f5!important;border-bottom-color:#2a3245!important}.dark .permission-item,.dark .api-key-item,.dark .audit-row{color:#f4f4f5!important;background:#000!important;border-color:#2a3245!important}.dark .thumb-caption{color:#fff!important;background:#000!important;border:1px solid #2a3245!important}.dark .diag-ui-tabs{background:#000!important;border:1px solid #27272a!important}.dark .diag-ui-tabs .diag-tab{color:#a1a1aa!important;background:0 0!important;border-color:#0000!important}.dark .diag-ui-tabs .diag-tab.active{color:#fff!important;background-color:#1f1f23!important;border:1px solid #3f3f46!important}.dark .diag-ui-card,.dark .diag-ui-stack{color:#fff!important;background:#000!important;border:1px solid #2a3245!important}.dark .diag-ui-card-head{background:#000!important;border-bottom:1px solid #2a3245!important}.dark .diag-ui-title{color:#fff!important}.dark .diag-ui-title-icon,.dark .diag-ui-metric-icon{color:#8b5cf6!important;background-color:#1f1f23!important}.dark .diag-range-pills{background:#000!important;border:1px solid #27272a!important}.dark .diag-range-pills button{color:#a1a1aa!important}.dark .diag-range-pills button.active{color:#fff!important;background-color:#ffffff1a!important}.dark .diag-ui-chart,.dark .diag-ui-chart-wrap{background:#000!important}.dark .diag-ui-metrics,.dark .diag-ui-metric,.dark .diag-ui-table-wrap,.dark .diag-ui-table,.dark .diag-ui-table th,.dark .diag-ui-table td,.dark .activity-panel,.dark .activity-list,.dark .activity-entry{color:#fff!important;background:#000!important;border-color:#27272a!important}.dark .empty-activity{color:#a1a1aa!important;background:#000!important;border:1px solid #27272a!important;border-radius:8px!important}.dark .activity-textarea,.dark .scope-select{color:#fff!important;background:#000!important;border:1px solid #27272a!important}.dark .delete-activity{color:#fff!important;background-color:#1f1f23!important;border:1px solid #27272a!important}.dark .screenshot-placeholder,.dark .livecam-placeholder,.dark .liveview-placeholder{color:#a1a1aa!important;background:#000!important;border-color:#27272a!important}.dark .control-panel-content,.dark .control-panel-content .btn{color:#fff!important;background:#000!important;border-color:#27272a!important}.dark .control-panel-content .btn:hover{color:#fff!important;background-color:#ffffff14!important}.dark .telemetry-card,.dark .telemetry-metric,.dark .telemetry-chart,.dark .telemetry-chart-wrap,.dark .telemetry-history{color:#fff!important;background:#000!important;border-color:#2a3245!important}.dark .devices-container.techdesk-old,.dark .techdesk-old,.dark.techdesk-old{background:0 0!important}.dark .techdesk-old .devices-left-panel,.dark .techdesk-old .devices-center-panel,.dark .techdesk-old .devices-right-panel,.dark .techdesk-old .device-section,.dark .techdesk-old .control-section,.dark .techdesk-old .players-panel.techdesk-players,.dark .techdesk-old .player-card,.dark .devices-right-panel,.dark .players-panel,.dark .player-card{box-shadow:none!important;color:#fff!important;background:#000!important;border-color:#2a3245!important}.dark .techdesk-old .players-panel.techdesk-players .info-grid .row,.dark .info-grid .row,.dark .player-system-info .info-grid .row{color:#fff!important;border-bottom:1px solid #27272a!important}.dark .techdesk-old .device-section-header,.dark .techdesk-old .control-section-header,.dark .techdesk-old .system-info-header{color:#fff!important;background:#000!important;border-bottom-color:#27272a!important}.dark .diag-ui-events,.dark .diag-ui-event{color:#fff!important;background:#000!important;border:1px solid #27272a!important}.dark .diag-ui-events-title{color:#fff!important;border-bottom:1px solid #27272a!important}.dark .diag-ui-event strong,.dark .diag-ui-event em{color:#fff!important}.dark .profile-permission-list,.dark .profile-panel,.dark .profile-security-list{box-shadow:none!important;color:#fff!important;background:#000!important;border:none!important;border-radius:12px!important;outline:none!important}.dark .profile-security-row{color:#fff!important;background:0 0!important;border:none!important;border-bottom:1px solid #27272a!important;border-radius:0!important}.dark .profile-security-row:last-child{border-bottom:none!important}.dark .profile-permission-row{color:#fff!important;border-bottom:1px solid #27272a!important}.dark .profile-permission-row:last-child{border-bottom:none!important}.dark .profile-permission-icon{color:#8b5cf6!important;background-color:#241838!important}.dark .profile-permission-name,.dark .profile-permission-section h3,.dark .profile-permissions-summary{color:#fff!important}.dark .profile-permission-access{color:#a1a1aa!important}.dark .profile-row{color:#fff!important;border-bottom:1px solid #27272a!important}.dark .profile-row:last-child{border-bottom:none!important}.dark .profile-row-label{color:#a1a1aa!important}.dark .profile-row-value,.dark .profile-security-copy strong{color:#fff!important}.dark .profile-security-copy span,.dark .profile-security-status{color:#a1a1aa!important}.dark .profile-security-action{color:#c084fc!important;background-color:#241838!important;border:1px solid #2e2d6b!important}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}