/* =====================================================================
   VipRix Dashboard Theme — applies the cyan/dark-navy aesthetic from
   customer-auth/privacy/terms/pricing/refund to the three operational
   pages: customer-portal.html, dashboard.html, employee.html.

   Aesthetic direction: confident, angular, dark navy panels framed in
   glowing cyan borders, with a faint diagonal cyan-tint shimmer on key
   cards. Sharp 0-radius cards, 40px pill buttons, white-on-navy text
   with cyan accents. Outfit/Poppins for headings, Inter for body.
   ===================================================================== */

/* ---- Page surface ---- */
body {
  background: #FFFFFF !important;
  color: #0F172A;
  font-family: 'Inter', sans-serif !important;
}
html[data-theme="dark"] body {
  background: #0d0d1a !important;
  color: #F1F5F9;
}

/* Kill the old blue/red orb gradients on body::before/::after */
body::before, body::after { display: none !important; content: none !important; }
.hero-grid-bg, .hero-orb { display: none !important; }

/* ---- Container spacing ---- */
.container { color: inherit; }

/* ---- Typography ---- */
h1, h2, h3, h4, .section-title, .panel-header h2,
.dashboard h1, .dashboard h2, .dashboard h3,
.topbar h1, .topbar h2 {
  font-family: 'Outfit', 'Poppins', 'Inter', sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 800 !important;
}
.section-title { color: #00d4ff !important; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .12em !important; }
html:not([data-theme="dark"]) .section-title { color: #0d0d1a !important; }
.panel-header h2 { color: #fff !important; }
html:not([data-theme="dark"]) .panel-header h2 { color: #0d0d1a !important; }

/* ============================================================
   SIDEBAR (dashboard.html) — already dark, refine cyan accents
   ============================================================ */
.sidebar {
  background: #0d0d1a !important;
  border-right: 2px solid #00d4ff !important;
  box-shadow: 4px 0 25px rgba(0,212,255,.18) !important;
  backdrop-filter: none !important;
}
.sidebar, .sidebar * { color: #F1F5F9 !important; }
.sidebar-logo { border-bottom-color: rgba(0,212,255,.2) !important; }
.sidebar-logo span { color: #fff !important; font-family: 'Poppins', sans-serif !important; }
.sidebar-logo span b { color: #00d4ff !important; }
.nav-section { color: rgba(0,212,255,.6) !important; font-family: 'Outfit', sans-serif !important; letter-spacing: .15em !important; font-size: .68rem !important; }
.nav-item {
  color: rgba(255,255,255,.72) !important;
  border-left: 3px solid transparent !important;
  font-weight: 500 !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #00d4ff;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.nav-item:hover { color: #00d4ff !important; background: rgba(0,212,255,.08) !important; }
.nav-item:hover::before, .nav-item.active::before { transform: scaleY(1); }
.nav-item.active {
  color: #00d4ff !important;
  background: linear-gradient(90deg, rgba(0,212,255,.18) 0%, rgba(0,212,255,0) 80%) !important;
  border-left-color: #00d4ff !important;
}
.nav-badge {
  background: #00d4ff !important;
  color: #0d0d1a !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  font-family: 'Outfit', sans-serif !important;
}
.sidebar-footer { border-top-color: rgba(0,212,255,.2) !important; }
.sidebar .btn-logout:hover { color: #ff5e78 !important; }

/* ============================================================
   TOPBAR (customer-portal & employee)
   ============================================================ */
.topbar, .topbar-main {
  background: #0d0d1a !important;
  border-bottom: 1px solid rgba(0,212,255,.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar *, .topbar-main * { color: #F1F5F9 !important; }
.topbar .user-role, .topbar-main .user-role,
.emp-badge .info .role { color: rgba(0,212,255,.7) !important; }
.topbar-left .brand, .topbar-left span,
.emp-badge .info .name, .user-name {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}
.topbar-left .brand b, .topbar-left span b { color: #00d4ff !important; background: none !important; -webkit-text-fill-color: #00d4ff !important; }

/* avatars — cyan gradient */
.user-avatar, .admin-avatar, .emp-avatar, .avatar {
  background: linear-gradient(135deg, #00d4ff, #0097b2) !important;
  color: #fff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  border: 2px solid rgba(0,212,255,.35) !important;
  box-shadow: 0 0 12px rgba(0,212,255,.3) !important;
}

/* ============================================================
   PORTAL / DASHBOARD — header clearance
   This file loads AFTER responsive.css, so these rules win the
   cascade and prevent responsive.css from overriding padding.
   ============================================================ */
body:has(> .topbar),
body:has(> .topbar-main),
body:has(> #app > .topbar-main) {
  padding-top: 130px !important;
}
@media (max-width: 700px) {
  body:has(> .topbar),
  body:has(> .topbar-main),
  body:has(> #app > .topbar-main) {
    padding-top: 130px !important;
  }
  /* Prevent topbar from wrapping to 2 lines (responsive.css sets flex-wrap:wrap) */
  .topbar, .topbar-main {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .topbar .topbar-left,
  .topbar-main .topbar-left {
    min-width: 0;
    flex-shrink: 1;
  }
  .topbar .logo-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .topbar .btn-logout {
    padding: .3rem .6rem !important;
    font-size: .75rem !important;
  }
}
@media (max-width: 500px) {
  body:has(> .topbar),
  body:has(> .topbar-main),
  body:has(> #app > .topbar-main) {
    padding-top: 120px !important;
  }
}

/* ============================================================
   STAT CARDS (customer-portal)
   ============================================================ */
.stats-row { gap: 1.2rem !important; }
.stat-card {
  background: #0d0d1a !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 22px rgba(0,212,255,.28) !important;
  border-radius: 0 !important;
  padding: 1.4rem 1.2rem !important;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.stat-card::before {
  content: '';
  position: absolute;
  right: -40%; top: -40%;
  width: 140%; height: 140%;
  background: linear-gradient(45deg, #0d0d1a 40%, rgba(0,212,255,.18) 55%, transparent 70%);
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 36px rgba(0,212,255,.55) !important;
}
.stat-card .stat-info * { color: #fff !important; }
.stat-card .stat-info .num,
.stat-card .num,
.stat-card .value {
  font-family: 'Outfit', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #00d4ff 0%, #0097b2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.stat-card .stat-info .label,
.stat-card .label,
.stat-card .text-muted {
  color: rgba(255,255,255,.6) !important;
  font-size: .82rem !important;
  text-transform: uppercase;
  letter-spacing: .1em !important;
  font-weight: 600 !important;
}

/* All stat-icon variants → cyan glass */
.stat-icon, .stat-icon.blue, .stat-icon.green, .stat-icon.orange, .stat-icon.purple, .stat-icon.gray {
  background: rgba(0,212,255,.12) !important;
  border: 1px solid rgba(0,212,255,.4) !important;
  color: #00d4ff !important;
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
}

/* ============================================================
   PANELS (cards that hold sections)
   ============================================================ */
.panel {
  background: #0d0d1a !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 22px rgba(0,212,255,.25) !important;
  border-radius: 0 !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: '';
  position: absolute;
  right: -40%; top: -40%;
  width: 140%; height: 140%;
  background: linear-gradient(45deg, #0d0d1a 40%, rgba(0,212,255,.12) 55%, transparent 70%);
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0;
}
.panel > * { position: relative; z-index: 1; }
.panel-header {
  border-bottom: 1px solid rgba(0,212,255,.3) !important;
  padding: 1.2rem 1.4rem !important;
}

/* ============================================================
   REQUEST / TASK / EMPLOYEE CARDS (the list rows)
   ============================================================ */
.request-card, .task-card, .emp-card {
  background: rgba(0,212,255,.04) !important;
  border: 1px solid rgba(0,212,255,.3) !important;
  box-shadow: 0 0 12px rgba(0,212,255,.15) !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.2rem !important;
  color: #fff !important;
  transition: all .25s ease !important;
  position: relative;
  overflow: hidden;
}
.request-card::after, .task-card::after, .emp-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, #00d4ff 0%, transparent 100%);
  opacity: .6;
}
.request-card:hover, .task-card:hover, .emp-card:hover {
  border-color: #00d4ff !important;
  box-shadow: 0 0 24px rgba(0,212,255,.45), 0 8px 28px rgba(0,0,0,.35) !important;
  transform: translateY(-2px);
  background: rgba(0,212,255,.08) !important;
}
.request-card * , .task-card *, .emp-card * { color: #fff !important; }
.request-card .text-muted, .task-card .text-muted,
.request-card .request-preview, .task-card .task-message,
.task-meta, .request-bottom, .task-bottom { color: rgba(255,255,255,.6) !important; }
.request-subject, .task-client, .emp-name {
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.request-card.is-unread {
  background: rgba(0,212,255,.10) !important;
  border-color: #00d4ff !important;
}
.request-card.is-unread::before {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 8px; height: 8px;
  background: #00d4ff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,212,255,.25);
  animation: viprix-pulse 1.6s ease-in-out infinite;
}
@keyframes viprix-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,212,255,.25); }
  50%     { box-shadow: 0 0 0 9px rgba(0,212,255,0); }
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  background: rgba(0,212,255,.12) !important;
  border: 1px solid rgba(0,212,255,.5) !important;
  color: #00d4ff !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-family: 'Outfit', sans-serif !important;
}
.badge.unread, .badge.in_progress, .badge.in-progress {
  background: rgba(245,158,11,.15) !important;
  border-color: #F59E0B !important;
  color: #F59E0B !important;
}
.badge.read, .badge.completed, .badge.done, .badge.paid, .badge.delivered {
  background: rgba(52,211,153,.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}
.badge.replied, .badge.assigned, .badge.active {
  background: rgba(0,212,255,.18) !important;
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}
.badge.unpaid, .badge.cancelled, .badge.failed {
  background: rgba(255,94,120,.12) !important;
  border-color: #ff5e78 !important;
  color: #ff5e78 !important;
}
.badge.not_started, .badge.pending {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.3) !important;
  color: rgba(255,255,255,.7) !important;
}

.assigned-pill {
  background: rgba(0,212,255,.12) !important;
  border: 1px solid rgba(0,212,255,.4) !important;
  color: #00d4ff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  font-size: .76rem !important;
}
.assigned-dot {
  background: #00d4ff !important;
  box-shadow: 0 0 8px rgba(0,212,255,.6) !important;
}

/* ============================================================
   FORM FIELDS — cyan underline like auth-card
   ============================================================ */
.field input, .field select, .field textarea,
.quote-form input, .quote-form select, .quote-form textarea,
.modal input, .modal select, .modal textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid rgba(255,255,255,.35) !important;
  border-radius: 0 !important;
  color: #fff !important;
  padding: .65rem 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  transition: border-bottom-color .2s ease !important;
}
.field input:focus, .field input:valid,
.field select:focus, .field textarea:focus,
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-bottom-color: #00d4ff !important;
  outline: none !important;
}
.field input::placeholder, .field textarea::placeholder,
.modal input::placeholder, .modal textarea::placeholder { color: rgba(255,255,255,.35) !important; }
.field label, .modal label {
  color: var(--text, #fff) !important;
  font-size: .8rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ============================================================
   BUTTONS — refine on top of cyan-buttons.css
   ============================================================ */
.btn-refresh, .btn-close {
  background: transparent !important;
  border: 1px solid rgba(0,212,255,.4) !important;
  color: #00d4ff !important;
  border-radius: 999px !important;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.btn-refresh:hover, .btn-close:hover {
  background: rgba(0,212,255,.15) !important;
  border-color: #00d4ff !important;
  transform: rotate(180deg);
}
.btn-close:hover { transform: rotate(90deg); }

.btn-danger {
  border-color: #ff5e78 !important;
  color: #ff5e78 !important;
}
.btn-success {
  border-color: #34d399 !important;
  color: #34d399 !important;
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.7) !important;
}
.btn-ghost:hover { border-color: #00d4ff !important; color: #00d4ff !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination, .page-btns { gap: 6px !important; }
.page-btn {
  background: transparent !important;
  border: 1px solid rgba(0,212,255,.3) !important;
  color: rgba(255,255,255,.7) !important;
  border-radius: 8px !important;
  width: 36px; height: 36px;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  transition: all .2s ease;
}
.page-btn:hover { border-color: #00d4ff !important; color: #00d4ff !important; }
.page-btn.active, .page.active {
  background: #00d4ff !important;
  border-color: #00d4ff !important;
  color: #0d0d1a !important;
  font-weight: 800 !important;
}

/* ============================================================
   DEPOSIT / DETAIL BLOCKS
   ============================================================ */
.deposit-box, .detail-row {
  background: rgba(0,212,255,.05) !important;
  border: 1px solid rgba(0,212,255,.25) !important;
  border-radius: 0 !important;
  padding: 1rem 1.2rem !important;
}
.dep-icon {
  background: rgba(0,212,255,.15) !important;
  color: #00d4ff !important;
  border: 1px solid #00d4ff !important;
  border-radius: 12px !important;
}
.dep-amount, .value {
  color: #00d4ff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
}
.dep-label, .dlabel {
  color: rgba(255,255,255,.6) !important;
  font-size: .78rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar {
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  height: 6px !important;
  overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg, #00d4ff 0%, #0097b2 100%) !important;
  box-shadow: 0 0 12px rgba(0,212,255,.5) !important;
  height: 100% !important;
  transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}

/* ============================================================
   MESSAGES (chat bubbles)
   ============================================================ */
.cmsg-bubble {
  border-radius: 14px !important;
  padding: .8rem 1rem !important;
  max-width: 78% !important;
  font-size: .92rem !important;
}
.cmsg-customer {
  background: rgba(0,212,255,.12) !important;
  border: 1px solid rgba(0,212,255,.35) !important;
  color: #fff !important;
  margin-left: auto !important;
}
.cmsg-admin {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.cmsg-meta { color: rgba(255,255,255,.45) !important; font-size: .72rem !important; }
.cmsg-sender { color: #00d4ff !important; font-weight: 700 !important; font-family: 'Outfit', sans-serif !important; }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-state {
  text-align: center !important;
  padding: 3rem 1rem !important;
  color: rgba(255,255,255,.55) !important;
}
.empty-state i {
  font-size: 3rem !important;
  color: #00d4ff !important;
  opacity: .55 !important;
  margin-bottom: 1rem !important;
  display: block !important;
}
.empty-state * { color: rgba(255,255,255,.6) !important; }

/* ============================================================
   MODAL OVERLAYS
   ============================================================ */
.modal-overlay, .modal-backdrop {
  background: rgba(0,0,0,.7) !important;
  backdrop-filter: blur(8px) !important;
}
.modal, .modal-content, .modal-card {
  background: #0d0d1a !important;
  border: 2px solid #00d4ff !important;
  box-shadow: 0 0 35px rgba(0,212,255,.5) !important;
  border-radius: 0 !important;
  color: #fff !important;
  position: relative;
  /* Internal scroll when content is taller than the modal */
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #00d4ff rgba(0,212,255,0.08);
}
/* Custom cyan scrollbar for WebKit browsers */
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-card::-webkit-scrollbar { width: 10px; }
.modal::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track {
  background: rgba(0,212,255,0.08);
  border-left: 1px solid rgba(0,212,255,0.18);
}
.modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00d4ff, #0097b2);
  border-radius: 999px;
  border: 2px solid #0d0d1a;
}
.modal::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover {
  background: #00d4ff;
}

.modal::before, .modal-content::before, .modal-card::before {
  content: '';
  position: absolute;
  right: -40%; top: -40%;
  width: 140%; height: 140%;
  background: linear-gradient(45deg, #0d0d1a 40%, rgba(0,212,255,.12) 55%, transparent 70%);
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0;
}
.modal > *, .modal-content > *, .modal-card > * { position: relative; z-index: 1; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  border: 1px solid rgba(0,212,255,.25) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.table-wrap table { width: 100%; border-collapse: collapse; color: #fff; }
.table-wrap th {
  background: rgba(0,212,255,.1) !important;
  color: #00d4ff !important;
  font-family: 'Outfit', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  padding: .8rem 1rem !important;
  border-bottom: 1px solid rgba(0,212,255,.3) !important;
}
.table-wrap td {
  padding: .8rem 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  font-size: .9rem !important;
}
.table-wrap tr:hover td { background: rgba(0,212,255,.05) !important; }

/* ============================================================
   LIGHT MODE — keep dark navy panels but lighten the page background
   ============================================================ */
html:not([data-theme="dark"]) body {
  color: #0F172A;
}
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .topbar-main,
html:not([data-theme="dark"]) .sidebar {
  background: #0d0d1a !important;
}
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .request-card,
html:not([data-theme="dark"]) .task-card,
html:not([data-theme="dark"]) .emp-card,
html:not([data-theme="dark"]) .deposit-box,
html:not([data-theme="dark"]) .detail-row,
html:not([data-theme="dark"]) .modal {
  background: #0d0d1a !important;
  color: #fff !important;
}
html:not([data-theme="dark"]) .stat-card *,
html:not([data-theme="dark"]) .panel *:not(.section-title):not(.panel-header h2),
html:not([data-theme="dark"]) .request-card *,
html:not([data-theme="dark"]) .task-card *,
html:not([data-theme="dark"]) .emp-card * { color: #fff !important; }
html:not([data-theme="dark"]) .panel-header h2 { color: #fff !important; }

/* ============================================================
   FINE DETAILS
   ============================================================ */
.truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.text-muted { color: rgba(255,255,255,.55) !important; }
.text-small { font-size: .82rem !important; }

/* link to fire footer breathing room — applied only when a fire-wrap follows */
body > .viprix-fire-wrap { margin-top: auto !important; }

/* ============================================================
   DROPDOWN / SELECT MENUS — readable in both light & dark mode
   Dark  : navy bg + cyan text
   Light : white bg + dark navy text
   ============================================================ */
select,
.field select,
.sort-bar select,
#filter-select,
#sort-select,
#modal-task-status,
#modal-assign-select,
#filter-emp-select {
  background-color: #FFFFFF !important;
  color: #0d0d1a !important;
  -webkit-text-fill-color: #0d0d1a !important;
  border: 1px solid rgba(13,13,26,0.2) !important;
  border-radius: 8px !important;
  padding: .55rem .8rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}
select:focus,
.field select:focus { outline: 2px solid #00d4ff !important; outline-offset: 1px; }

select option,
select optgroup {
  background: #00d4ff !important;
  color: #0d0d1a !important;
  -webkit-text-fill-color: #0d0d1a !important;
  font-weight: 600;
}
select option:checked,
select option:hover {
  background: #0097b2 !important;
  color: #0d0d1a !important;
  -webkit-text-fill-color: #0d0d1a !important;
}

/* DARK mode */
html[data-theme="dark"] select,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .sort-bar select,
html[data-theme="dark"] #filter-select,
html[data-theme="dark"] #sort-select,
html[data-theme="dark"] #modal-task-status,
html[data-theme="dark"] #modal-assign-select,
html[data-theme="dark"] #filter-emp-select {
  background-color: #0d0d1a !important;
  color: #00d4ff !important;
  border: 1px solid #00d4ff !important;
}
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background: #0d0d1a !important;
  color: #00d4ff !important;
}
html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover {
  background: #00d4ff !important;
  color: #0d0d1a !important;
}