/* ============================================================================
   ROUTERBOX MOBILE — TEMA TERANG (LIGHT THEME) & APK MOBILE-ONLY LOCK
   Berlaku saat html[data-theme="light"] aktif pada halaman mobile.html
   ============================================================================ */

/* 1. KUNCI KHUSUS APK: Sembunyikan semua tombol pindah ke Desktop & Unduh APK */
body.apk-only-mode .desktop-back-floating-pill,
body.apk-only-mode .drawer-logout-group,
body.apk-only-mode a[href*="/index.html"],
body.apk-only-mode a[href*="RouterBox.apk"] {
  display: none !important;
}

/* Tombol Switch Tema Terang / Gelap di Header Mobile */
.btn-theme-toggle-mob {
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.btn-theme-toggle-mob:active {
  transform: scale(0.95);
}

.btn-theme-toggle-mob i {
  font-size: 13px;
  color: #fde047;
}

/* ============================================================================
   2. VARIABEL UTAMA & LATAR BELAKANG TEMA TERANG (html[data-theme="light"])
   ============================================================================ */
html[data-theme="light"] {
  --primary-navy: #1e3a8a;
  --primary-blue: #2563eb;
  --primary-electric: #0284c7;
  --accent-cyan: #0891b2;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #dc2626;
  --accent-purple: #7c3aed;

  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafc;
  --bg-surface-subtle: #e2e8f0;

  --border-color: #cbd5e1;
  --border-light: rgba(37, 99, 235, 0.22);

  --text-main: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-inverse: #ffffff;

  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 6px 20px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(203, 213, 225, 0.8);
  --shadow-elevated: 0 14px 32px -8px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .mobile-app-wrapper {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  box-shadow: 0 0 50px rgba(15, 23, 42, 0.12) !important;
}

/* ============================================================================
   3. HEADER UTAMA & SUBVIEW HEADER (ROYAL BLUE CERAH)
   ============================================================================ */
html[data-theme="light"] .hero-header {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #0284c7 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.24) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .header-brand-subtitle {
  color: #fde047 !important;
}

html[data-theme="light"] .subview-header {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 65%, #0284c7 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .subview-title-sub {
  color: #e0f2fe !important;
}

/* ============================================================================
   4. KARTU, PANEL, TABEL, & PERMUKAAN KONTEN
   ============================================================================ */
html[data-theme="light"] .router-card-item,
html[data-theme="light"] .preflight-hero-card,
html[data-theme="light"] .info-spec-card,
html[data-theme="light"] .cockpit-pppoe-card,
html[data-theme="light"] .resources-card,
html[data-theme="light"] .interface-cockpit-card,
html[data-theme="light"] .winbox-menu-card,
html[data-theme="light"] .setting-row-card,
html[data-theme="light"] .table-card-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .router-card-item:hover,
html[data-theme="light"] .winbox-menu-card:hover,
html[data-theme="light"] .setting-row-card:hover {
  border-color: #3b82f6 !important;
  background: #f8fafc !important;
}

html[data-theme="light"] .router-card-name,
html[data-theme="light"] .preflight-model-title,
html[data-theme="light"] .section-title,
html[data-theme="light"] .spec-val,
html[data-theme="light"] .gauge-val-center,
html[data-theme="light"] .chip-val,
html[data-theme="light"] .iface-name,
html[data-theme="light"] .wb-menu-title,
html[data-theme="light"] .winbox-card-title,
html[data-theme="light"] .setting-title,
html[data-theme="light"] .setting-title-main,
html[data-theme="light"] .iface-card-title {
  color: #0f172a !important;
}

html[data-theme="light"] .router-card-meta,
html[data-theme="light"] .spec-key,
html[data-theme="light"] .gauge-lbl,
html[data-theme="light"] .wb-menu-desc,
html[data-theme="light"] .winbox-card-desc,
html[data-theme="light"] .setting-desc,
html[data-theme="light"] .setting-title-sub,
html[data-theme="light"] .iface-card-sub {
  color: #64748b !important;
}

html[data-theme="light"] .pill-tab-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .pill-tab-btn.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .iface-card-row {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .iface-strip-item,
html[data-theme="light"] .telemetry-chip,
html[data-theme="light"] .router-picker-card {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .iface-strip-item:hover,
html[data-theme="light"] .router-picker-card:hover {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
}

html[data-theme="light"] .router-picker-card.active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
}

html[data-theme="light"] .router-picker-card-title {
  color: #0f172a !important;
}

html[data-theme="light"] .router-picker-card-sub {
  color: #0284c7 !important;
}

/* Search Box & Tabs */
html[data-theme="light"] .search-filter-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .search-filter-box input {
  color: #0f172a !important;
}

html[data-theme="light"] .btn-search-filter {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .winbox-nav-tabs {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .winbox-tab-item {
  color: #475569 !important;
}

html[data-theme="light"] .winbox-tab-item.active {
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
}

html[data-theme="light"] .gauge-bg {
  stroke: #e2e8f0 !important;
}

/* ============================================================================
   5. MONITORING CLIENT PPPOE & TOMBOL PINTASAN COCKPIT
   ============================================================================ */
html[data-theme="light"] .pppoe-kpi-item.total {
  background: #f0f9ff !important;
  border: 1px solid #7dd3fc !important;
}
html[data-theme="light"] .pppoe-kpi-item.total .kpi-num { color: #0284c7 !important; }
html[data-theme="light"] .pppoe-kpi-item.total .kpi-lbl { color: #0369a1 !important; }

html[data-theme="light"] .pppoe-kpi-item.online {
  background: #ecfdf5 !important;
  border: 1px solid #6ee7b7 !important;
}
html[data-theme="light"] .pppoe-kpi-item.online .kpi-num { color: #059669 !important; }
html[data-theme="light"] .pppoe-kpi-item.online .kpi-lbl { color: #047857 !important; }

html[data-theme="light"] .pppoe-kpi-item.offline {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
}
html[data-theme="light"] .pppoe-kpi-item.offline .kpi-num { color: #dc2626 !important; }
html[data-theme="light"] .pppoe-kpi-item.offline .kpi-lbl { color: #b91c1c !important; }

html[data-theme="light"] .pppoe-kpi-item.disabled {
  background: #fffbeb !important;
  border: 1px solid #fcd34d !important;
}
html[data-theme="light"] .pppoe-kpi-item.disabled .kpi-num { color: #d97706 !important; }
html[data-theme="light"] .pppoe-kpi-item.disabled .kpi-lbl { color: #b45309 !important; }

html[data-theme="light"] .btn-see-all-pppoe,
html[data-theme="light"] .btn-secondary-detail {
  background: #f8fafc !important;
  border: 1px solid #93c5fd !important;
  color: #1d4ed8 !important;
}

html[data-theme="light"] #cockpitBtnCustomerList {
  background: #f0f9ff !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
}
html[data-theme="light"] #cockpitBtnCustomerList i { color: #0284c7 !important; }

html[data-theme="light"] #cockpitBtnBilling {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}
html[data-theme="light"] #cockpitBtnBilling i { color: #d97706 !important; }

html[data-theme="light"] #cockpitBtnCustomerMap {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #6ee7b7 !important;
}
html[data-theme="light"] #cockpitBtnCustomerMap i { color: #059669 !important; }

html[data-theme="light"] #cockpitBtnOltBox {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}
html[data-theme="light"] #cockpitBtnOltBox i { color: #2563eb !important; }

html[data-theme="light"] #cockpitBtnAcs {
  background: #ecfeff !important;
  color: #0e7490 !important;
  border: 1px solid #67e8f9 !important;
}
html[data-theme="light"] #cockpitBtnAcs i { color: #0891b2 !important; }

/* Status Badges & Table Rows */
html[data-theme="light"] .badge-status-pill.online {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #6ee7b7 !important;
}

html[data-theme="light"] .badge-status-pill.offline {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fcd34d !important;
}

html[data-theme="light"] .table-card-header {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #1e40af !important;
}

html[data-theme="light"] .table-card-row {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .table-card-row:hover,
html[data-theme="light"] .table-card-row:active {
  background: #eff6ff !important;
}

html[data-theme="light"] .spec-row {
  border-bottom-color: #e2e8f0 !important;
}

/* ============================================================================
   6. BOTTOM NAVIGATION BAR 5-TAB & DRAWER SAMPING
   ============================================================================ */
html[data-theme="light"] .fixed-bottom-bar,
html[data-theme="light"] #globalMobileBottomNav {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid #cbd5e1 !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .nav-tab-item,
html[data-theme="light"] .nav-tab-item i {
  color: #64748b !important;
}

html[data-theme="light"] .nav-tab-item.active,
html[data-theme="light"] .nav-tab-item.active i,
html[data-theme="light"] .nav-tab-item.active span {
  color: #2563eb !important;
}

html[data-theme="light"] .nav-tab-item.active {
  background: #eff6ff !important;
  border: 1px solid #93c5fd !important;
}

html[data-theme="light"] .nav-tab-badge {
  border-color: #ffffff !important;
}

/* Sidebar Drawer di Tema Terang */
html[data-theme="light"] .drawer-sidebar {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 16px 0 45px rgba(15, 23, 42, 0.18) !important;
  border-right: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .drawer-header {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #0284c7 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="light"] .drawer-nav-body {
  background: #ffffff !important;
  scrollbar-color: #93c5fd #f1f5f9 !important;
}

html[data-theme="light"] .drawer-nav-body::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

html[data-theme="light"] .drawer-section-title {
  color: #2563eb !important;
}

html[data-theme="light"] .drawer-menu-item,
html[data-theme="light"] .drawer-menu-item .menu-label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .drawer-menu-item .menu-icon {
  color: #2563eb !important;
}

html[data-theme="light"] .drawer-menu-item .menu-arrow {
  color: #94a3b8 !important;
}

html[data-theme="light"] .drawer-menu-item:hover,
html[data-theme="light"] .drawer-menu-item:active {
  background: #eff6ff !important;
}

html[data-theme="light"] .drawer-logout-group {
  border-top: 1px solid #e2e8f0 !important;
}

/* ============================================================================
   7. BOTTOM SHEETS & MODAL FORM
   ============================================================================ */
html[data-theme="light"] .modal-bottom-sheet {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .sheet-handle-bar {
  background: #cbd5e1 !important;
}

html[data-theme="light"] .sheet-header-title {
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .sheet-header-title h3 {
  color: #0f172a !important;
}

html[data-theme="light"] .btn-close-sheet {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .qs-group-card {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .qs-group-title {
  color: #1d4ed8 !important;
}

html[data-theme="light"] .qs-label {
  color: #475569 !important;
}

html[data-theme="light"] .qs-input-text,
html[data-theme="light"] .qs-input-select,
html[data-theme="light"] #routerInstanceForm input[type="text"],
html[data-theme="light"] #routerInstanceForm input[type="number"],
html[data-theme="light"] #routerInstanceForm input[type="password"],
html[data-theme="light"] #wbItemForm input,
html[data-theme="light"] #wbItemForm select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* ============================================================================
   8. MODUL OLTBOX (MULTI-OLT) DALAM TEMA TERANG MOBILE
   ============================================================================ */
html[data-theme="light"] #view-oltbox-manager,
html[data-theme="light"] #oltboxMobileRoot {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-toolbar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .oltbox-toolbar-title {
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-owner-select,
html[data-theme="light"] .oltbox-search-input,
html[data-theme="light"] .oltbox-input,
html[data-theme="light"] .oltbox-select,
html[data-theme="light"] .oltbox-form-input,
html[data-theme="light"] .oltbox-form-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-kpi-card,
html[data-theme="light"] .oltbox-card,
html[data-theme="light"] .oltbox-device-card,
html[data-theme="light"] .oltbox-mob-item-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-kpi-label,
html[data-theme="light"] .oltbox-section-label {
  color: #475569 !important;
}

html[data-theme="light"] .oltbox-kpi-val,
html[data-theme="light"] .oltbox-kpi-val.c-white,
html[data-theme="light"] .oltbox-card-title,
html[data-theme="light"] .oltbox-dev-name,
html[data-theme="light"] .oltbox-mob-item-name,
html[data-theme="light"] .oltbox-mini-val,
html[data-theme="light"] .oltbox-mstat-val {
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-kpi-val.c-emerald { color: #059669 !important; }
html[data-theme="light"] .oltbox-kpi-val.c-amber { color: #d97706 !important; }
html[data-theme="light"] .oltbox-kpi-val.c-rose { color: #dc2626 !important; }

html[data-theme="light"] .oltbox-kpi-sub,
html[data-theme="light"] .oltbox-card-meta,
html[data-theme="light"] .oltbox-card-foot-meta,
html[data-theme="light"] .oltbox-mini-lbl,
html[data-theme="light"] .oltbox-dev-host,
html[data-theme="light"] .oltbox-dev-meta-row,
html[data-theme="light"] .oltbox-mob-item-sn {
  color: #64748b !important;
}

html[data-theme="light"] .oltbox-mini-stats,
html[data-theme="light"] .oltbox-mini-stat,
html[data-theme="light"] .oltbox-mob-rx-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .oltbox-health-row span:first-child,
html[data-theme="light"] .oltbox-pon-health-head {
  color: #1e293b !important;
}

html[data-theme="light"] .oltbox-progress-track,
html[data-theme="light"] .oltbox-pon-bar-track {
  background: #e2e8f0 !important;
}

html[data-theme="light"] .oltbox-btn,
html[data-theme="light"] .oltbox-btn-secondary,
html[data-theme="light"] .oltbox-card-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .oltbox-btn.primary,
html[data-theme="light"] .oltbox-card-btn.primary {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .oltbox-btn.danger,
html[data-theme="light"] .oltbox-card-btn.danger {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* Modal OLTBox (Rangkuman Global, Kelola ONU, CRUD OLT) di Tema Terang */
html[data-theme="light"] .oltbox-modal,
html[data-theme="light"] .oltbox-modal-box,
html[data-theme="light"] .oltbox-modal-body {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-modal-header {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="light"] .oltbox-modal-header .oltbox-btn:not(.primary) {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .oltbox-modal-title {
  color: #ffffff !important;
}

html[data-theme="light"] .oltbox-modal-sub,
html[data-theme="light"] #oltboxOnuModalSub,
html[data-theme="light"] #oltboxGlobalModalSub {
  color: #dbeafe !important;
}

html[data-theme="light"] .oltbox-onu-summary-strip,
html[data-theme="light"] .oltbox-onu-filter-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .oltbox-onu-sum-item {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .oltbox-onu-sum-item .lbl {
  color: #475569 !important;
}

html[data-theme="light"] .oltbox-onu-sum-item .val {
  color: #0f172a !important;
}

html[data-theme="light"] .oltbox-pon-pill,
html[data-theme="light"] .oltbox-pon-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html[data-theme="light"] .oltbox-pon-pill.active,
html[data-theme="light"] .oltbox-pon-chip.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .oltbox-mob-pon-badge {
  background: #eff6ff !important;
  border: 1px solid #93c5fd !important;
  color: #1d4ed8 !important;
}

html[data-theme="light"] .oltbox-modal-footer {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
}

/* ============================================================================
   9. MODUL DAFTAR PELANGGAN & ACS (TR-069) DALAM TEMA TERANG MOBILE
   ============================================================================ */
html[data-theme="light"] #view-customer-list,
html[data-theme="light"] #view-acs-manager {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .customer-list-toolbar,
html[data-theme="light"] .acs-stats-grid {
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .customer-card,
html[data-theme="light"] .acs-card-item,
html[data-theme="light"] .acs-stat-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .customer-card-title,
html[data-theme="light"] .customer-card-item span.val,
html[data-theme="light"] .acs-stat-val,
html[data-theme="light"] .acs-info-v {
  color: #0f172a !important;
}

html[data-theme="light"] .customer-card-item span.val.highlight,
html[data-theme="light"] .acs-model-badge {
  color: #0284c7 !important;
}

html[data-theme="light"] .customer-card-grid {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .acs-sn-pill {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .customer-map-toolbar,
html[data-theme="light"] .customer-pagination-bar {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .customer-search-box,
html[data-theme="light"] .customer-area-select {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .customer-search-input {
  background: transparent !important;
  color: #0f172a !important;
}

html[data-theme="light"] .customer-search-input::placeholder {
  color: #64748b !important;
}

html[data-theme="light"] .cust-modal-content {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .cust-modal-header {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .cust-form-label {
  color: #334155 !important;
}

html[data-theme="light"] .cust-form-input,
html[data-theme="light"] .cust-form-select {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .cust-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .status-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

html[data-theme="light"] .status-pill.active {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-page-nav {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .customer-sheet {
  background: #ffffff !important;
  color: #0f172a !important;
  border-top: 1px solid #cbd5e1 !important;
}