/* ============================================================
   ENHANCED THEME — Shared visual polish for Light & Dark modes
   ============================================================
   Include this CSS on ALL pages after base.css / components.css.
   Uses utility classes (.et-card, .et-page-title, etc.) as hooks.
   All rules are scoped to html:not(.dark) or html.dark so both
   themes are upgraded while remaining fully independent.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   LIGHT THEME
   ──────────────────────────────────────────────────────────── */

/* L1. Gradient background */
html:not(.dark) body {
  background: linear-gradient(135deg, #f0f4ff 0%, #f6f6f8 40%, #faf8ff 100%) !important;
  background-attachment: fixed !important;
}

/* L2. Subtle dot pattern */
html:not(.dark) body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 59, 189, 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

/* L3. Page header glow banner */
html:not(.dark) .et-page-header {
  position: relative;
}
html:not(.dark) .et-page-header::before {
  content: '';
  position: absolute;
  top: -24px; left: -40px; right: -40px;
  height: 180px;
  background: linear-gradient(135deg, #0f3bbd08 0%, #667eea10 50%, #764ba208 100%);
  border-radius: 0 0 2rem 2rem;
  z-index: -1;
  pointer-events: none;
}

/* L4. Page title gradient */
html:not(.dark) .et-page-title {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f3bbd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* L5. Cards — glassmorphism */
html:not(.dark) .et-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 59, 189, 0.08) !important;
  box-shadow:
    0 1px 3px rgba(15, 59, 189, 0.04),
    0 4px 16px rgba(15, 59, 189, 0.06) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}
html:not(.dark) .et-card:hover {
  box-shadow:
    0 2px 8px rgba(15, 59, 189, 0.08),
    0 8px 32px rgba(15, 59, 189, 0.1) !important;
  border-color: rgba(15, 59, 189, 0.12) !important;
}

/* L6. Sidebar card — accent left border */
html:not(.dark) .et-sidebar-card {
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%) !important;
  border-left: 3px solid #0f3bbd !important;
  box-shadow:
    0 2px 8px rgba(15, 59, 189, 0.06),
    0 8px 24px rgba(15, 59, 189, 0.08) !important;
}

/* L7. Table header */
html:not(.dark) .et-table thead tr {
  background: linear-gradient(180deg, #f0f4ff 0%, #eef1fb 100%) !important;
  border-bottom: 2px solid rgba(15, 59, 189, 0.1) !important;
}
html:not(.dark) .et-table thead th {
  color: #0f3bbd !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
}
html:not(.dark) .et-table tbody tr:nth-child(even) {
  background: rgba(15, 59, 189, 0.015);
}
html:not(.dark) .et-table tbody tr {
  transition: all 0.2s ease;
}
html:not(.dark) .et-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(15, 59, 189, 0.04) 0%, rgba(102, 126, 234, 0.06) 100%) !important;
  box-shadow: 0 2px 8px rgba(15, 59, 189, 0.06);
}
html:not(.dark) .et-table td {
  border-bottom: 1px solid rgba(15, 59, 189, 0.04);
}

/* L8. Search input glow */
html:not(.dark) .et-search-input {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 59, 189, 0.04);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1) !important;
}
html:not(.dark) .et-search-input:focus {
  border-color: #0f3bbd !important;
  box-shadow: 0 0 0 3px rgba(15, 59, 189, 0.1), 0 2px 8px rgba(15, 59, 189, 0.08) !important;
}

/* L9. Outline buttons */
html:not(.dark) .et-btn-outline {
  background: #fff !important;
  border: 1.5px solid #dee5f0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}
html:not(.dark) .et-btn-outline:hover {
  border-color: #0f3bbd !important;
  color: #0f3bbd !important;
  box-shadow: 0 2px 12px rgba(15, 59, 189, 0.12) !important;
  transform: translateY(-1px);
}

/* L10. Primary buttons — gradient */
html:not(.dark) .et-btn-primary {
  background: linear-gradient(135deg, #0f3bbd 0%, #1d4ed8 50%, #3b63e8 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(15, 59, 189, 0.25) !important;
  transition: all 0.3s ease !important;
}
html:not(.dark) .et-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(15, 59, 189, 0.35) !important;
  transform: translateY(-1px);
}

/* L11. Badges */
html:not(.dark) .et-badge {
  background: linear-gradient(135deg, #0f3bbd, #3b63e8) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(15, 59, 189, 0.3);
}

/* L12. Toolbar / filter buttons */
html:not(.dark) .et-toolbar-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
}
html:not(.dark) .et-toolbar-btn:hover {
  border-color: #0f3bbd !important;
  color: #0f3bbd !important;
  box-shadow: 0 2px 8px rgba(15, 59, 189, 0.08) !important;
}

/* L13. Input fields */
html:not(.dark) .et-input {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  transition: all 0.25s ease !important;
}
html:not(.dark) .et-input:focus {
  border-color: #0f3bbd !important;
  box-shadow: 0 0 0 3px rgba(15, 59, 189, 0.08) !important;
}

/* L14. Dropdown */
html:not(.dark) .et-dropdown {
  background: #fff !important;
  border: 1px solid rgba(15, 59, 189, 0.12) !important;
  box-shadow: 0 8px 32px rgba(15, 59, 189, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* L15. Tabs — active tab accent */
html:not(.dark) .et-tab-active {
  border-color: #0f3bbd !important;
  color: #0f3bbd !important;
}

/* L16. Stat/metric cards */
html:not(.dark) .et-stat-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(15, 59, 189, 0.08) !important;
  box-shadow: 0 2px 8px rgba(15, 59, 189, 0.06) !important;
  transition: all 0.25s ease !important;
}
html:not(.dark) .et-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 59, 189, 0.1) !important;
  border-color: rgba(15, 59, 189, 0.15) !important;
}

/* L17. Scrollbar */
html:not(.dark) ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html:not(.dark) ::-webkit-scrollbar-track {
  background: transparent;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(15, 59, 189, 0.15);
  border-radius: 3px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 59, 189, 0.25);
}

/* L18. Checkbox accent */
html:not(.dark) input[type="checkbox"] {
  accent-color: #0f3bbd;
}

/* L19. Section headers */
html:not(.dark) .et-section-header {
  background: linear-gradient(180deg, #f8faff 0%, #fff 100%) !important;
  border-bottom-color: rgba(15, 59, 189, 0.1) !important;
}

/* L20. Links hover -> primary */
html:not(.dark) .et-link:hover {
  color: #0f3bbd !important;
}

/* ────────────────────────────────────────────────────────────
   DARK THEME
   ──────────────────────────────────────────────────────────── */

/* D1. Gradient background */
html.dark body {
  background: linear-gradient(135deg, #080c18 0%, #101522 40%, #0d1225 70%, #0a0f1d 100%) !important;
  background-attachment: fixed !important;
}

/* D2. Subtle dot pattern */
html.dark body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(99, 130, 255, 0.025) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

/* D3. Page header glow banner */
html.dark .et-page-header {
  position: relative;
}
html.dark .et-page-header::before {
  content: '';
  position: absolute;
  top: -24px; left: -40px; right: -40px;
  height: 180px;
  background: linear-gradient(135deg, rgba(15, 59, 189, 0.06) 0%, rgba(102, 126, 234, 0.08) 50%, rgba(118, 75, 162, 0.04) 100%);
  border-radius: 0 0 2rem 2rem;
  z-index: -1;
  pointer-events: none;
}

/* D4. Page title gradient */
html.dark .et-page-title {
  background: linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* D5. Cards — dark glassmorphism */
html.dark .et-card {
  background: rgba(26, 32, 46, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 130, 255, 0.08) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(15, 59, 189, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}
html.dark .et-card:hover {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(15, 59, 189, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(99, 130, 255, 0.15) !important;
}

/* D6. Sidebar card */
html.dark .et-sidebar-card {
  background: linear-gradient(180deg, rgba(26, 32, 46, 0.95) 0%, rgba(22, 27, 44, 0.95) 100%) !important;
  border-left: 3px solid #3b63e8 !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(15, 59, 189, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* D7. Table */
html.dark .et-table thead tr {
  background: linear-gradient(180deg, rgba(16, 21, 34, 0.95) 0%, rgba(12, 16, 26, 0.95) 100%) !important;
  border-bottom: 2px solid rgba(59, 99, 232, 0.15) !important;
}
html.dark .et-table thead th {
  color: #60a5fa !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.15);
}
html.dark .et-table tbody tr:nth-child(even) {
  background: rgba(99, 130, 255, 0.02);
}
html.dark .et-table tbody tr {
  transition: all 0.2s ease;
}
html.dark .et-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(15, 59, 189, 0.08) 0%, rgba(59, 99, 232, 0.1) 100%) !important;
  box-shadow: 0 2px 12px rgba(15, 59, 189, 0.1);
}
html.dark .et-table td {
  border-bottom: 1px solid rgba(99, 130, 255, 0.04);
}

/* D8. Search input */
html.dark .et-search-input {
  background: rgba(16, 21, 34, 0.8) !important;
  border: 1.5px solid rgba(35, 44, 72, 0.8) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(.4, 0, .2, 1) !important;
}
html.dark .et-search-input:focus {
  border-color: #3b63e8 !important;
  box-shadow:
    0 0 0 3px rgba(59, 99, 232, 0.15),
    0 0 20px rgba(59, 99, 232, 0.08),
    inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* D9. Outline buttons */
html.dark .et-btn-outline {
  background: rgba(26, 32, 46, 0.8) !important;
  border: 1.5px solid rgba(99, 130, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: all 0.25s ease !important;
}
html.dark .et-btn-outline:hover {
  border-color: rgba(59, 99, 232, 0.4) !important;
  color: #93c5fd !important;
  box-shadow:
    0 2px 12px rgba(59, 99, 232, 0.15),
    0 0 24px rgba(59, 99, 232, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transform: translateY(-1px);
}

/* D10. Primary buttons */
html.dark .et-btn-primary {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b63e8 100%) !important;
  box-shadow: 0 2px 12px rgba(59, 99, 232, 0.3) !important;
  transition: all 0.3s ease !important;
}
html.dark .et-btn-primary:hover {
  box-shadow: 0 4px 20px rgba(59, 99, 232, 0.4) !important;
  transform: translateY(-1px);
}

/* D11. Badges */
html.dark .et-badge {
  background: linear-gradient(135deg, #3b63e8, #818cf8) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(59, 99, 232, 0.4);
}

/* D12. Toolbar buttons */
html.dark .et-toolbar-btn {
  background: rgba(16, 21, 34, 0.6) !important;
  border: 1px solid rgba(35, 44, 72, 0.8) !important;
  transition: all 0.2s ease !important;
}
html.dark .et-toolbar-btn:hover {
  border-color: rgba(59, 99, 232, 0.3) !important;
  color: #93c5fd !important;
  box-shadow: 0 2px 8px rgba(59, 99, 232, 0.1) !important;
}

/* D13. Input fields */
html.dark .et-input {
  background: rgba(16, 21, 34, 0.8) !important;
  border: 1.5px solid rgba(35, 44, 72, 0.8) !important;
  transition: all 0.25s ease !important;
}
html.dark .et-input:focus {
  border-color: #3b63e8 !important;
  box-shadow: 0 0 0 3px rgba(59, 99, 232, 0.12) !important;
}

/* D14. Dropdown */
html.dark .et-dropdown {
  background: rgba(26, 32, 46, 0.98) !important;
  border: 1px solid rgba(59, 99, 232, 0.15) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(59, 99, 232, 0.06) !important;
}

/* D15. Tabs — active accent */
html.dark .et-tab-active {
  border-color: #3b63e8 !important;
  color: #93c5fd !important;
}

/* D16. Stat/metric cards */
html.dark .et-stat-card {
  background: rgba(25, 32, 51, 0.9) !important;
  border: 1px solid rgba(99, 130, 255, 0.08) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: all 0.25s ease !important;
}
html.dark .et-stat-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(15, 59, 189, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(99, 130, 255, 0.15) !important;
}

/* D17. Scrollbar */
html.dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.dark ::-webkit-scrollbar-track {
  background: transparent;
}
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(99, 130, 255, 0.15);
  border-radius: 3px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 130, 255, 0.3);
}

/* D18. Checkbox accent */
html.dark input[type="checkbox"] {
  accent-color: #3b63e8;
}

/* D19. Section headers */
html.dark .et-section-header {
  background: linear-gradient(180deg, rgba(35, 44, 72, 0.3) 0%, transparent 100%) !important;
  border-bottom-color: rgba(99, 130, 255, 0.08) !important;
}

/* D20. Links hover */
html.dark .et-link:hover {
  color: #93c5fd !important;
}