/* Modern admin theme: non-destructive overrides and variables */
:root {
  --bg: #0f172a;             /* slate-900 */
  --surface: #111827;        /* gray-900 */
  --surface-2: #1f2937;      /* gray-800 */
  --text: #e5e7eb;           /* gray-200 */
  --muted: #9ca3af;          /* gray-400 */
  --primary: #5E72E4;        /* existing brand */
  --accent: #22c55e;         /* emerald-500 */
  --danger: #ef4444;         /* red-500 */
  --warning: #f59e0b;        /* amber-500 */
  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Light mode defaults */
html:not(.theme-dark) {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --shadow: 0 10px 25px rgba(17,24,39,.08);
}

/* Global background/text */
body { background: var(--bg) !important; color: var(--text); }

/* Panel and content wrappers */
.main-panel-wrapper, .content-wrapper { background: var(--bg) !important; }
.card { background: var(--surface) !important; border: 1px solid rgba(148,163,184,0.15) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; }
.card .card-header { background: transparent !important; border-bottom: 1px solid rgba(148,163,184,0.15) !important; }

/* Dashboard metric tiles */
.dashboard-w2 { border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; position: relative; overflow: hidden; }
.dashboard-w2 .details h2, .dashboard-w2 .details h3, .dashboard-w2 .details h6 { color: #fff; }
.dashboard-w2 .btn.btn-neutral { background: rgba(255,255,255,.15); color: #fff; border: 0; }
.dashboard-w2 .btn.btn-neutral:hover { background: rgba(255,255,255,.25); }

/* Navbar */
.navbar-menu-wrapper { background: var(--surface-2) !important; border-bottom: 1px solid rgba(148,163,184,0.15); }
.navbar-menu-wrapper input[type="search"] { background: var(--surface); color: var(--text); border-color: rgba(148,163,184,0.25); }
.navbar-menu-wrapper .dropdown-menu { background: var(--surface); border: 1px solid rgba(148,163,184,0.25); }
.navbar-menu-wrapper .dropdown-item { color: var(--text); }

/* Sidenav: solid black background */
.main-sidebar { background: #000 !important; border-right: 1px solid rgba(255,255,255,.08); }
.main-sidebar .navbar-brand-wrapper { background: transparent !important; }
.main-sidebar .nav .nav-link { color: #e5e7eb !important; }
.main-sidebar .nav .nav-link .menu-title { color: #e5e7eb !important; }
.main-sidebar .nav .nav-link .menu-icon i { color: #e5e7eb !important; }
.main-sidebar .nav .nav-link:hover { background: rgba(255,255,255,.06); }
.main-sidebar .sub-menu { background: #0a0a0a !important; }
.main-sidebar .sub-menu .nav-link { color: #d1d5db !important; }
.main-sidebar .sub-menu .nav-link:hover { background: rgba(255,255,255,.06); }

/* Breadcrumb/footer */
.breadcrumb, .footer { background: transparent !important; color: var(--muted); }

/* Page header (title area) */
.page-header { background: #000 !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.page-header .page-title { color: #fff !important; }

/* Dashboard greeting strip */
.hero-strip { background: #000 !important; color: #fff; border-radius: 0; padding: 12px 16px; box-shadow: none; margin: 0 0 12px; }
.hero-strip h3 { color: #fff !important; margin: 0; }

/* Buttons */
.btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; }
.btn-success { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; }

/* Forms */
.form-control { background: var(--surface) !important; color: var(--text) !important; border: 1px solid rgba(148,163,184,0.25) !important; }
.form-control::placeholder { color: var(--muted) !important; }

/* Table */
.table { color: var(--text); }
.table thead th { background: var(--surface-2); color: var(--muted); border-bottom-color: rgba(148,163,184,0.2); }
.table tbody tr { background: var(--surface); }
.table tbody tr:hover { background: rgba(148,163,184,0.06); }

/* Dark mode specific: ensure high contrast and dark surfaces */
html.theme-dark .bg-white,
html.theme-dark .card.bg-white,
html.theme-dark .content-wrapper.bg-white { background-color: var(--surface) !important; color: var(--text) !important; }
html.theme-dark .table,
html.theme-dark .table td,
html.theme-dark .table th { color: var(--text) !important; }
html.theme-dark .table thead th { background: var(--surface-2) !important; color: var(--text) !important; }
html.theme-dark .table tbody tr { background: var(--surface) !important; }
html.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; }
html.theme-dark .table-striped tbody tr:nth-of-type(even) { background-color: rgba(255,255,255,0.04) !important; }
html.theme-dark .table a,
html.theme-dark table a,
html.theme-dark table.dataTable tbody td a { color: var(--text) !important; }

/* Dark mode: DataTables UI */
html.theme-dark table.dataTable thead th,
html.theme-dark table.dataTable tbody td,
html.theme-dark table.dataTable tbody th { color: var(--text) !important; }
html.theme-dark table.dataTable tbody tr { background: var(--surface) !important; }
html.theme-dark .dataTables_wrapper .dataTables_info,
html.theme-dark .dataTables_wrapper .dataTables_length label,
html.theme-dark .dataTables_wrapper .dataTables_filter label { color: var(--text) !important; }
html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text) !important; border-color: rgba(255,255,255,0.15) !important; }
html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; color: #fff !important; }
html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(255,255,255,0.12) !important; }
html.theme-dark .dataTables_wrapper .dataTables_filter input,
html.theme-dark .dataTables_wrapper .dataTables_length select { background: var(--surface) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,0.18) !important; }

/* Dark mode: force all table and wrapper backgrounds to dark surfaces */
html.theme-dark table,
html.theme-dark .table { background-color: var(--surface) !important; }
html.theme-dark .table > thead > tr > th,
html.theme-dark table thead th { background-color: var(--surface-2) !important; color: var(--text) !important; }
html.theme-dark .table > tbody > tr > td,
html.theme-dark table tbody td,
html.theme-dark table tfoot th,
html.theme-dark table tfoot td { background-color: var(--surface) !important; color: var(--text) !important; }
html.theme-dark .table-responsive,
html.theme-dark .dataTables_wrapper,
html.theme-dark .dataTables_wrapper .row,
html.theme-dark .dataTables_wrapper .dataTables_scroll,
html.theme-dark .dataTables_wrapper .dataTables_scrollHead,
html.theme-dark .dataTables_wrapper .dataTables_scrollBody,
html.theme-dark .dataTables_wrapper .dataTables_scrollFoot { background: var(--surface) !important; }

/* Dark mode: DataTables striping/hover overrides */
html.theme-dark table.dataTable.stripe tbody tr.odd,
html.theme-dark table.dataTable.display tbody tr.odd,
html.theme-dark .table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,0.03) !important;
}
html.theme-dark table.dataTable.stripe tbody tr.even,
html.theme-dark table.dataTable.display tbody tr.even,
html.theme-dark .table.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255,255,255,0.05) !important;
}
html.theme-dark table.dataTable.hover tbody tr:hover,
html.theme-dark table.dataTable.display tbody tr:hover,
html.theme-dark .table tbody tr:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

/* Dark/light toggle button */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 20px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); cursor: pointer; }
.theme-toggle:hover { background: rgba(255,255,255,.2); }

/* Make toggle visible on light header */
html:not(.theme-dark) .theme-toggle {
  color: var(--text);
  background: rgba(17,24,39,.06);
  border: 1px solid rgba(17,24,39,.12);
}
html:not(.theme-dark) .theme-toggle:hover {
  background: rgba(17,24,39,.1);
}

/* Smooth transitions */
* { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* Ensure strong contrast on light (white) backgrounds */
html:not(.theme-dark) body,
html:not(.theme-dark) .main-panel-wrapper,
html:not(.theme-dark) .content-wrapper,
html:not(.theme-dark) .card,
html:not(.theme-dark) .card-body { color: var(--text) !important; }
html:not(.theme-dark) .text-muted { color: var(--muted) !important; }
html:not(.theme-dark) .table,
html:not(.theme-dark) .table td,
html:not(.theme-dark) .table th { color: var(--text) !important; }
html:not(.theme-dark) .table thead th { background: #f3f4f6 !important; color: #374151 !important; }
html:not(.theme-dark) .table-striped tbody tr:nth-of-type(odd) { background-color: #f9fafb !important; }
html:not(.theme-dark) .table-striped tbody tr:nth-of-type(even) { background-color: #ffffff !important; }
html:not(.theme-dark) .table a,
html:not(.theme-dark) table a,
html:not(.theme-dark) table.dataTable tbody td a { color: #1f2937 !important; text-decoration: none; }
html:not(.theme-dark) .table a:hover,
html:not(.theme-dark) table a:hover,
html:not(.theme-dark) table.dataTable tbody td a:hover { text-decoration: underline; }
html:not(.theme-dark) table.dataTable thead th,
html:not(.theme-dark) table.dataTable tbody td,
html:not(.theme-dark) table.dataTable tbody th { color: #111827 !important; }
html:not(.theme-dark) table.dataTable tbody tr { background: #ffffff !important; }
html:not(.theme-dark) .dataTables_wrapper .dataTables_info,
html:not(.theme-dark) .dataTables_wrapper .dataTables_length label,
html:not(.theme-dark) .dataTables_wrapper .dataTables_filter label { color: #111827 !important; }
html:not(.theme-dark) .dataTables_wrapper .dataTables_paginate .paginate_button { color: #111827 !important; }
html:not(.theme-dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #e5e7eb !important; border-color: #d1d5db !important; }

/* Light-mode forms clarity */
html:not(.theme-dark) .form-control { background: #ffffff !important; color: #111827 !important; border-color: #d1d5db !important; }
html:not(.theme-dark) .input-group-text,
html:not(.theme-dark) label { color: #111827 !important; }

/* Chart skeleton loader */
.skeleton {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(148,163,184,.15) 25%, rgba(148,163,184,.25) 50%, rgba(148,163,184,.15) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}