/* =============================================================================
   LIGHT MARINE THEME OVERRIDE
   Converts deep-ocean dark theme to light with marine accents preserved.
   ALL rules scoped under html[data-theme="light-marine"] so deep-ocean
   is the default and light-marine only applies when explicitly selected.
   ============================================================================= */

/* --- CSS Variable Overrides (scoped to html element) --- */
html[data-theme="light-marine"] {
  --ocean-abyss: #f0f5fa;
  --ocean-deep: #e8eef5;
  --ocean-mid: #dce5ef;
  --ocean-surface: #1a6b8a;
  --ocean-shallow: #2d8aab;
  --bioluminescent: #009d80;
  --bioluminescent-glow: rgba(0, 157, 128, 0.2);
  --foam-white: #1a2332;
  --mist: #334155;
  --seafoam: #64748b;
  --slate-deep: #94a3b8;
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(0, 0, 0, 0.04);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-deep: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px var(--bioluminescent-glow);
}

/* --- Body & Background --- */
html[data-theme="light-marine"] body,
html[data-theme="light-marine"] .wrapper {
  color: var(--foam-white);
  background: linear-gradient(135deg, #f0f5fa 0%, #e8eef5 50%, #f5f8fb 100%);
}

html[data-theme="light-marine"] body::before {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0, 157, 128, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(45, 138, 171, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(220, 229, 239, 0.3) 0%, transparent 70%);
}

html[data-theme="light-marine"] body::after {
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(0, 157, 128, 0.15), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(0, 0, 0, 0.04), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(0, 157, 128, 0.1), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(0, 0, 0, 0.03), transparent),
    radial-gradient(1px 1px at 160px 120px, rgba(0, 157, 128, 0.12), transparent);
  opacity: 0.4;
}

/* --- Typography --- */
html[data-theme="light-marine"] h1,
html[data-theme="light-marine"] h2,
html[data-theme="light-marine"] h3,
html[data-theme="light-marine"] h4,
html[data-theme="light-marine"] h5,
html[data-theme="light-marine"] h6,
html[data-theme="light-marine"] .h1,
html[data-theme="light-marine"] .h2,
html[data-theme="light-marine"] .h3,
html[data-theme="light-marine"] .h4,
html[data-theme="light-marine"] .h5,
html[data-theme="light-marine"] .h6 {
  color: #0f2a3d;
}

/* --- Header bar --- */
html[data-theme="light-marine"] .bowtie-app-header {
  background: linear-gradient(135deg, #c8dae8 0%, #dde6f0 100%);
  border-bottom-color: rgba(0, 157, 128, 0.2);
}
html[data-theme="light-marine"] .bowtie-app-header-title { color: #0f2a3d; }
html[data-theme="light-marine"] .bowtie-version-badge {
  background: rgba(0, 157, 128, 0.12);
  color: #009d80;
  border-color: rgba(0, 157, 128, 0.25);
}
html[data-theme="light-marine"] .bowtie-header-nav-link { color: #3a5a6e; }
html[data-theme="light-marine"] .bowtie-header-nav-link:hover,
html[data-theme="light-marine"] .bowtie-header-nav-link:focus-visible {
  color: #0f2a3d;
  background: rgba(0, 157, 128, 0.10);
  border-color: rgba(0, 157, 128, 0.25);
}
html[data-theme="light-marine"] .bowtie-header-nav-link.active {
  color: #009d80;
  background: rgba(0, 157, 128, 0.14);
  border-color: rgba(0, 157, 128, 0.35);
}

/* --- Sidebar --- */
html[data-theme="light-marine"] .bowtie-sidebar {
  background: linear-gradient(180deg, #dde6f0 0%, #eef3f8 100%);
  border-right-color: rgba(14, 100, 160, 0.18);
}
html[data-theme="light-marine"] .bowtie-sidebar-header { background: rgba(0, 0, 0, 0.05); }
html[data-theme="light-marine"] .bowtie-sidebar-title { color: #1a6490; }
html[data-theme="light-marine"] .bowtie-nav-group-label { color: #64748b; }
html[data-theme="light-marine"] .bowtie-nav-link { color: #4a6a8a; }
html[data-theme="light-marine"] .bowtie-nav-link:hover {
  background: rgba(0, 157, 128, 0.06);
  color: #0f2a3d;
  border-left-color: #009d80;
}
html[data-theme="light-marine"] .bowtie-nav-link.active {
  background: rgba(0, 157, 128, 0.08);
  border-left-color: #009d80;
  color: #0f2a3d;
}
html[data-theme="light-marine"] .bowtie-sidebar-settings { border-top-color: rgba(0,0,0,0.08); }
html[data-theme="light-marine"] .bowtie-sidebar-settings-label { color: #64748b; }

/* --- Cards --- */
html[data-theme="light-marine"] .card,
html[data-theme="light-marine"] .box {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--shadow-subtle);
}
html[data-theme="light-marine"] .card:hover,
html[data-theme="light-marine"] .box:hover {
  border-color: rgba(0, 157, 128, 0.2) !important;
  box-shadow: var(--shadow-medium), 0 0 20px rgba(0, 157, 128, 0.04);
}
html[data-theme="light-marine"] .card-header,
html[data-theme="light-marine"] .box-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), transparent) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light-marine"] .card-header .card-title,
html[data-theme="light-marine"] .box-header .box-title { color: #0f2a3d; }
html[data-theme="light-marine"] .card-body,
html[data-theme="light-marine"] .box-body { color: #334155; }

/* --- Buttons --- */
html[data-theme="light-marine"] .btn-primary {
  background: linear-gradient(135deg, var(--bioluminescent), #007a63) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 157, 128, 0.25);
}
html[data-theme="light-marine"] .btn-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #334155 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html[data-theme="light-marine"] .btn-outline-primary {
  border: 2px solid var(--bioluminescent) !important;
  color: var(--bioluminescent) !important;
}
html[data-theme="light-marine"] .btn-outline-primary:hover {
  background: var(--bioluminescent) !important;
  color: #ffffff !important;
}
html[data-theme="light-marine"] .btn-outline-secondary {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #475569 !important;
  background: transparent !important;
}

/* --- Form Controls --- */
html[data-theme="light-marine"] .form-control,
html[data-theme="light-marine"] .form-select,
html[data-theme="light-marine"] .selectize-input,
html[data-theme="light-marine"] .selectize-control.single .selectize-input {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1a2332 !important;
}
html[data-theme="light-marine"] .form-label,
html[data-theme="light-marine"] .control-label,
html[data-theme="light-marine"] label:not(.form-check-label) { color: #475569; }
html[data-theme="light-marine"] .selectize-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light-marine"] .selectize-dropdown .option { color: #334155; }
html[data-theme="light-marine"] .selectize-dropdown .option:hover,
html[data-theme="light-marine"] .selectize-dropdown .option.active {
  background: rgba(0, 157, 128, 0.08) !important;
  color: var(--bioluminescent);
}
html[data-theme="light-marine"] .form-check-label { color: #475569; }

/* --- Data Tables --- */
html[data-theme="light-marine"] .dataTables_wrapper { color: #475569; }
html[data-theme="light-marine"] table.dataTable thead th {
  background: linear-gradient(180deg, rgba(0, 157, 128, 0.06), transparent) !important;
  color: #0f2a3d !important;
  border-bottom: 2px solid var(--bioluminescent) !important;
}
html[data-theme="light-marine"] table.dataTable tbody tr:hover {
  background: rgba(0, 157, 128, 0.04) !important;
}
html[data-theme="light-marine"] table.dataTable tbody td {
  color: #334155;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* --- Modals --- */
html[data-theme="light-marine"] .modal-content {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="light-marine"] .modal-title { color: #0f2a3d; }
html[data-theme="light-marine"] .modal-body { color: #334155; }
html[data-theme="light-marine"] .btn-close { filter: none; }

/* --- Tabs --- */
html[data-theme="light-marine"] .nav-tabs { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
html[data-theme="light-marine"] .nav-tabs .nav-link { color: #64748b; }
html[data-theme="light-marine"] .nav-tabs .nav-link.active {
  background: rgba(0, 157, 128, 0.06);
  color: var(--bioluminescent);
}

/* --- Scrollbars (light) --- */
html[data-theme="light-marine"] ::-webkit-scrollbar-track { background: #f0f5fa; }
html[data-theme="light-marine"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html[data-theme="light-marine"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html[data-theme="light-marine"] * { scrollbar-color: #cbd5e1 #f0f5fa; }

/* --- Notifications --- */
html[data-theme="light-marine"] .shiny-notification {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a2332;
}

/* --- Bootstrap CSS variable overrides for light-marine ------------------- */
html[data-theme="light-marine"] {
  --bs-body-bg: #f0f5fa;
  --bs-body-color: #1a2332;
  --bs-border-color: rgba(0, 0, 0, 0.08);

  /* Offcanvas */
  --bs-offcanvas-bg: #ffffff;
  --bs-offcanvas-color: #1a2332;
  --bs-offcanvas-border-color: rgba(0, 0, 0, 0.1);

  /* Modal */
  --bs-modal-bg: #ffffff;
  --bs-modal-color: #1a2332;
  --bs-modal-border-color: rgba(0, 0, 0, 0.1);
  --bs-modal-header-border-color: rgba(0, 0, 0, 0.08);
  --bs-modal-footer-border-color: rgba(0, 0, 0, 0.08);

  /* Accordion */
  --bs-accordion-bg: #ffffff;
  --bs-accordion-color: #1a2332;
  --bs-accordion-border-color: rgba(0, 0, 0, 0.08);
  --bs-accordion-btn-bg: #f8fafc;
  --bs-accordion-btn-color: #334155;
  --bs-accordion-active-bg: rgba(0, 157, 128, 0.06);
  --bs-accordion-active-color: #009d80;

  /* Form */
  --bs-input-bg: #ffffff;
  --bs-input-color: #1a2332;
  --bs-input-border-color: rgba(0, 0, 0, 0.15);
}

/* Explicit overrides (Bootstrap ignores CSS vars in some components) */
html[data-theme="light-marine"] .offcanvas {
  background: #ffffff !important;
  color: #1a2332 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light-marine"] .offcanvas-title { color: #0f2a3d !important; }
html[data-theme="light-marine"] .offcanvas .btn-close { filter: none !important; }
html[data-theme="light-marine"] .offcanvas .accordion-item {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
}
html[data-theme="light-marine"] .offcanvas .accordion-button {
  background: #f0f5fa !important;
  color: #334155 !important;
}
html[data-theme="light-marine"] .offcanvas .accordion-button:not(.collapsed) {
  background: rgba(0, 157, 128, 0.06) !important;
  color: #009d80 !important;
}
html[data-theme="light-marine"] .offcanvas .accordion-body {
  background: transparent !important;
  color: #475569 !important;
}
html[data-theme="light-marine"] .offcanvas .form-check-label { color: #475569 !important; }
html[data-theme="light-marine"] .offcanvas label { color: #475569 !important; }
html[data-theme="light-marine"] .offcanvas .form-control,
html[data-theme="light-marine"] .offcanvas .form-select {
  background: #ffffff !important;
  color: #1a2332 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Auth modal in light-marine */
html[data-theme="light-marine"] .modal-content {
  background: #ffffff !important;
  color: #1a2332 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light-marine"] .modal-title { color: #0f2a3d !important; }
html[data-theme="light-marine"] .modal-body { color: #334155 !important; }
html[data-theme="light-marine"] .modal-header,
html[data-theme="light-marine"] .modal-footer {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light-marine"] .modal .btn-close { filter: none !important; }
html[data-theme="light-marine"] .modal .form-label { color: #475569 !important; }
html[data-theme="light-marine"] .modal .form-control {
  background: #f8fafc !important;
  color: #1a2332 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}