:root {
    --reef-navy: #0b1f33;
    --reef-deep: #081624;
    --reef-ocean: #114366;
    --reef-teal: #1bb6ad;
    --reef-mint: #7ce7db;
    --reef-cyan: #45d1d8;
    --reef-coral: #ff9c2a;
    --reef-sand: #ffe8c6;
    --reef-bg: #eef6f9;
    --reef-surface: #ffffff;
    --reef-text: #1a2a3a;
    --reef-muted: #5e6f7f;
    --reef-border: rgba(12, 40, 64, 0.14);
    --reef-shadow: 0 20px 45px rgba(9, 28, 48, 0.12);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Prevent overscroll bounce revealing blank space on iOS */
html, body {
    overscroll-behavior: none;
}

/* iOS Capacitor app safe area handling */
@supports (padding-top: env(safe-area-inset-top)) {
    html {
        /* Ensure body extends behind status bar */
        height: 100%;
    }

    body {
        /* Add padding for safe area on iOS */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }

    /* When body has padding, navbar doesn't need extra top padding */
    body .navbar {
        padding-top: 0.6rem;
    }

    /* Modals are position:fixed and bypass body padding, so apply safe area directly */
    .modal {
        padding-top: env(safe-area-inset-top);
    }

    /* Android status bar overlay for dark mode */
    [data-theme="dark"] html.capacitor-android::before {
        background: #0f1824;
    }
}

body {
    background-color: var(--reef-bg);
    background-image:
        radial-gradient(circle at 8% 12%, rgba(69, 209, 216, 0.12), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(124, 231, 219, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(238, 246, 249, 0.9));
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--reef-text);
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
}

h1, h2, h3, h4, h5 {
    color: var(--reef-navy);
    font-weight: 700;
}

.text-navy {
    color: var(--reef-navy) !important;
}

.text-muted {
    color: var(--reef-muted) !important;
}

/* Button vertical text alignment fix */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon spacing - add margin between icons and text */
.btn > .bi:first-child,
.dropdown-item > .bi:first-child,
.nav-link > .bi:first-child,
.list-group-item > .bi:first-child,
.badge > .bi:first-child,
a > .bi:first-child,
button > .bi:first-child,
label > .bi:first-child,
span > .bi:first-child,
h1 > .bi:first-child,
h2 > .bi:first-child,
h3 > .bi:first-child,
h4 > .bi:first-child,
h5 > .bi:first-child,
h6 > .bi:first-child {
    margin-right: 0.35em;
}

/* Icon at end of element (less common) */
.btn > .bi:last-child:not(:first-child),
a > .bi:last-child:not(:first-child) {
    margin-left: 0.35em;
    margin-right: 0;
}

/* Navigation */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(12, 40, 64, 0.08);
    box-shadow: 0 12px 28px rgba(10, 34, 54, 0.1);
    backdrop-filter: blur(16px);
    padding: calc(0.6rem + var(--safe-area-top)) 1.1rem 0.6rem;
    z-index: 10000 !important;
}

.navbar.sticky-top {
    z-index: 10000 !important;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

.brand-logo-img {
    height: 50px;
    width: auto;
    max-width: 200px;
    transition: transform 0.2s ease;
}

.navbar-brand:hover .brand-logo-img {
    transform: translateY(-1px) scale(1.02);
}

.nav-link {
    color: var(--reef-navy) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.9rem !important;
    transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--reef-ocean) !important;
    background-color: rgba(27, 182, 173, 0.12);
}

/* Nav tabs - override pill styling for proper tab appearance */
.nav-tabs .nav-link {
    border-radius: 0.375rem 0.375rem 0 0;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent;
    border-bottom-color: var(--reef-teal);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--reef-teal) !important;
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--reef-teal);
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.dropdown-menu {
    border-radius: 16px;
    border: 1px solid rgba(12, 40, 64, 0.08);
    box-shadow: 0 18px 30px rgba(12, 40, 64, 0.12);
    z-index: 1050 !important;
    position: absolute !important;
    max-height: none !important;
    pointer-events: auto !important;
}

.dropdown-item {
    pointer-events: auto !important;
    position: relative !important;
}

.dropdown {
    position: relative;
}

/* Navbar dropdowns need higher z-index to appear above everything */
.navbar .dropdown {
    position: relative;
}

.navbar .dropdown-menu {
    z-index: 1060 !important;
    position: absolute !important;
}

/* Fix navbar-nav dropdown positioning - override Popper.js */
.navbar-nav .dropdown-menu {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    top: 100% !important;
}

.dropdown-menu.show {
    z-index: 1060 !important;
    display: block !important;
}

/* Notification dropdown needs highest z-index */
.notification-menu {
    z-index: 1070 !important;
}

/* Ensure page content doesn't overlap dropdowns */
.card,
.metrics-card,
.card-body,
main,
.container,
section,
.tank-card {
    z-index: auto !important;
}

/* Ensure parent containers don't clip dropdown */
.tank-action-bar {
    overflow: visible !important;
}

.d-flex.flex-wrap {
    overflow: visible !important;
}

.dropdown-item {
    font-weight: 500;
}

/* Global Button Overrides */
.btn-primary {
    background: linear-gradient(135deg, #21c0b6 0%, #1698b5 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #18a99f 0%, #117f97 100%) !important;
    color: white !important;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    color: var(--reef-navy);
    border-color: rgba(12, 40, 64, 0.25);
    border-radius: 999px;
    font-weight: 600;
}

.btn-outline-secondary:hover {
    background-color: var(--reef-navy);
    color: white;
}

.btn-outline-primary {
    border-radius: 999px;
}

/* Card Styling */
.card {
    border: 1px solid var(--reef-border);
    border-radius: 18px;
    box-shadow: var(--reef-shadow);
    background-color: var(--reef-surface);
}

.card-hover {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 40px rgba(9, 28, 48, 0.16);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(12, 40, 64, 0.08);
    color: var(--reef-navy);
    font-weight: 700;
}

.card-title a {
    color: var(--reef-navy);
}

.card-title a:hover {
    color: var(--reef-ocean);
}

/* Badge Styling */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge.bg-primary {
    background-color: rgba(27, 182, 173, 0.18) !important;
    color: var(--reef-navy) !important;
}

.badge.text-bg-success,
.badge.text-bg-warning,
.badge.text-bg-info {
    color: var(--reef-navy);
}

.badge.text-bg-success {
    background-color: rgba(124, 231, 219, 0.4) !important;
}

.badge.text-bg-warning {
    background-color: rgba(255, 156, 42, 0.25) !important;
}

.badge.text-bg-info {
    background-color: rgba(69, 209, 216, 0.24) !important;
}

.offline-banner {
    border-radius: 16px;
    border: 1px solid rgba(255, 156, 42, 0.25);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(9, 28, 48, 0.08);
}

/* Alert/Status Indicators */
.bg-danger-subtle {
    background-color: #fff5f5 !important;
    border: 1px solid #feb2b2 !important;
}

.bg-warning-subtle {
    background-color: #fff7e8 !important;
    border: 1px solid rgba(255, 156, 42, 0.3) !important;
}

.bg-success-subtle {
    background-color: #f0fffb !important;
    border: 1px solid rgba(27, 182, 173, 0.3) !important;
}

/* Forms */
.form-control,
.form-select {
    border-radius: 14px;
    border: 1px solid rgba(12, 40, 64, 0.18);
    padding: 0.6rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(27, 182, 173, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(27, 182, 173, 0.2);
}

/* Hero + Dashboard */
.reef-hero {
    background: linear-gradient(120deg, rgba(17, 67, 102, 0.12), rgba(27, 182, 173, 0.2));
    border: 1px solid rgba(27, 182, 173, 0.18);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.reef-hero::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -80px;
    top: -80px;
    background: radial-gradient(circle, rgba(124, 231, 219, 0.5), transparent 70%);
    pointer-events: none;
}

.reef-hero .reef-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--reef-ocean);
    font-weight: 700;
}

.reef-hero .reef-heading {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 0.75rem;
}

.reef-hero .reef-subtitle {
    font-size: 1rem;
    color: var(--reef-muted);
    max-width: 32rem;
}

.reef-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
}

.reef-stat {
    background: white;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(12, 40, 64, 0.08);
    box-shadow: 0 12px 24px rgba(12, 40, 64, 0.08);
}

.reef-stat .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--reef-muted);
}

.reef-stat .value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--reef-navy);
}

.pwa-banner {
    border-radius: 16px;
    border: 1px solid rgba(27, 182, 173, 0.2);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(9, 28, 48, 0.08);
}

.parameter-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(12, 40, 64, 0.12);
}

.parameter-search .input-group-text {
    background: #fff;
    border-right: 0;
}

.parameter-search .form-control {
    border-left: 0;
}

[data-skeleton] {
    position: relative;
    color: transparent !important;
    background: linear-gradient(100deg, #e6eef3 30%, #f4f8fb 45%, #e6eef3 60%);
    background-size: 200% 100%;
    border-radius: 10px;
    overflow: hidden;
    animation: shimmer 1.4s infinite;
}

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

.reef-add-card {
    min-height: 250px;
    border: 2px dashed rgba(12, 40, 64, 0.2);
    background: linear-gradient(160deg, rgba(27, 182, 173, 0.08), rgba(69, 209, 216, 0.12));
    color: var(--reef-navy);
}

.reef-add-card .display-4 {
    color: var(--reef-ocean);
}

/* Utility */
.shadow-soft {
    box-shadow: 0 18px 32px rgba(12, 40, 64, 0.12);
}

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: calc(100% - 1.5rem);
    max-width: 720px;
    z-index: 1030;
    background: var(--reef-surface);
    border-top: 1px solid var(--reef-border);
    box-shadow: 0 -6px 18px rgba(15, 45, 69, 0.08);
    padding: 0.6rem 0.75rem;
    border-radius: 16px;
}

@media (max-width: 991.98px) {
    .bottom-nav .nav-link {
        color: var(--reef-muted) !important;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0;
        white-space: nowrap;
    }

    .bottom-nav > div > * {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .bottom-nav .nav-link i {
        font-size: 1.2rem;
        margin-right: 0;
    }

    .bottom-nav .nav-link.active {
        color: var(--reef-teal) !important;
    }
}

@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }

    .btn,
    .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0.7rem 0.75rem !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-info,
    .btn-success {
        padding: 0.7rem 0.75rem !important;
    }

    .brand-logo-img {
        height: 40px;
        max-width: 160px;
    }

    .notification-menu {
        position: fixed !important;
        top: 72px !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto;
        max-width: calc(100vw - 1.5rem);
        min-width: auto;
        margin: 0 auto;
        transform: none !important;
    }

    .mobile-content-pad {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }

    .reef-hero {
        padding: 1.5rem;
    }
}

/* Onboarding system styles */
.onboarding-highlight {
    animation: pulse-highlight 2s infinite;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.3);
    border-radius: 4px;
}

@keyframes pulse-highlight {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(13, 110, 253, 0.15);
    }
}

.onboarding-tooltip {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode Styles */
[data-theme="dark"] {
    --reef-navy: #e0f1ff;
    --reef-deep: #1a2b3f;
    --reef-ocean: #5ca3d1;
    --reef-teal: #2dd4cc;
    --reef-mint: #9df5ee;
    --reef-cyan: #66e0e7;
    --reef-coral: #ffb558;
    --reef-sand: #3a4556;
    --reef-bg: #0f1824;
    --reef-surface: #1a2332;
    --reef-text: #e8f0f7;
    --reef-muted: #8a9aa9;
    --reef-border: rgba(100, 150, 200, 0.18);
    --reef-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
    background-color: var(--reef-bg);
    background-image:
        radial-gradient(circle at 8% 12%, rgba(27, 182, 173, 0.08), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(69, 209, 216, 0.1), transparent 38%),
        linear-gradient(180deg, rgba(26, 35, 50, 0.95), rgba(15, 24, 36, 0.98));
    color: var(--reef-text);
}

[data-theme="dark"] .navbar {
    background: rgba(26, 35, 50, 0.86);
    border-bottom: 1px solid rgba(100, 150, 200, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Dark mode - Cards */
[data-theme="dark"] .card {
    background-color: #1f2937 !important;
    border-color: var(--reef-border);
    color: var(--reef-text) !important;
}

[data-theme="dark"] .card-header {
    background-color: rgba(27, 182, 173, 0.08) !important;
    border-bottom-color: var(--reef-border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #1a2332 !important;
    border-color: var(--reef-border);
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1f2937 !important;
    border-color: var(--reef-teal);
    color: #ffffff !important;
}

/* Dark mode - Date/time input calendar and clock icons */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .form-control[type="date"],
[data-theme="dark"] .form-control[type="datetime-local"],
[data-theme="dark"] .form-control[type="time"] {
    color-scheme: dark;
}

[data-theme="dark"] .btn-primary {
    background-color: var(--reef-teal);
    border-color: var(--reef-teal);
    color: #0b1f33;
}

[data-theme="dark"] .btn-primary:hover {
    background-color: var(--reef-cyan);
    border-color: var(--reef-cyan);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--reef-teal) !important;
    border-color: var(--reef-teal) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--reef-teal) !important;
    color: #0b1f33 !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--reef-surface);
    border-color: var(--reef-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--reef-text);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(27, 182, 173, 0.12);
}

[data-theme="dark"] .tank-card {
    background: linear-gradient(145deg, var(--reef-surface) 0%, rgba(26, 35, 50, 0.8) 100%);
}

[data-theme="dark"] .reef-stat {
    background: rgba(27, 182, 173, 0.08);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 181, 88, 0.15);
    border-color: rgba(255, 181, 88, 0.3);
    color: #ffb558;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(92, 163, 209, 0.15);
    border-color: rgba(92, 163, 209, 0.3);
    color: #5ca3d1;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
}

[data-theme="dark"] .text-muted {
    color: var(--reef-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom {
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light-subtle {
    background-color: rgba(27, 182, 173, 0.05) !important;
}

/* Dark mode - Bootstrap subtle backgrounds for tips/recommendation boxes */
[data-theme="dark"] .bg-warning-subtle {
    background-color: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .bg-primary-subtle {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .bg-info-subtle {
    background-color: rgba(14, 165, 233, 0.12) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

/* Dark mode - Bootstrap emphasis text colors for tips/recommendation content */
[data-theme="dark"] .text-warning-emphasis {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-danger-emphasis {
    color: #f87171 !important;
}

[data-theme="dark"] .text-success-emphasis {
    color: #4ade80 !important;
}

[data-theme="dark"] .text-primary-emphasis {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-info-emphasis {
    color: #60d5f8 !important;
}

[data-theme="dark"] .table {
    color: var(--reef-text) !important;
    border-color: var(--reef-border) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .table thead,
[data-theme="dark"] .table thead th {
    background-color: rgba(100, 150, 200, 0.1) !important;
    color: var(--reef-text) !important;
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: transparent !important;
    color: var(--reef-text) !important;
}

[data-theme="dark"] .table tbody td {
    color: var(--reef-text) !important;
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(100, 150, 200, 0.06) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(15, 24, 36, 0.3) !important;
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--reef-text) !important;
}

/* Dark mode - Code and pre elements */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: rgba(15, 24, 36, 0.6) !important;
    color: var(--reef-teal) !important;
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .text-pink,
[data-theme="dark"] .text-body-secondary {
    color: #f0abfc !important;
}

/* Dark mode - Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--reef-text);
}

/* Dark mode - Badges */
[data-theme="dark"] .badge {
    background-color: rgba(27, 182, 173, 0.2);
    color: var(--reef-teal);
    border: 1px solid var(--reef-teal);
}

[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.text-bg-success {
    background-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.text-bg-warning {
    background-color: rgba(251, 191, 36, 0.35) !important;
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.text-bg-info {
    background-color: rgba(14, 165, 233, 0.3) !important;
    color: #60d5f8 !important;
    border-color: #60d5f8 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .badge.bg-light {
    background-color: rgba(100, 150, 200, 0.15) !important;
    color: var(--reef-text);
    border-color: var(--reef-border);
}

/* Dark mode - Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--reef-text);
    border-color: var(--reef-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(27, 182, 173, 0.12);
    border-color: var(--reef-teal);
    color: var(--reef-teal);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--reef-sand);
    border-color: var(--reef-sand);
    color: var(--reef-text);
}

[data-theme="dark"] .btn-link {
    color: var(--reef-teal);
}

[data-theme="dark"] .btn-link:hover {
    color: var(--reef-cyan);
}

[data-theme="dark"] .btn-success {
    background-color: #22c55e;
    border-color: #22c55e;
}

[data-theme="dark"] .btn-success:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

[data-theme="dark"] .btn-outline-success {
    color: #4ade80 !important;
    border-color: #4ade80 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #ff5c5c !important;
    border-color: #ff5c5c !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: rgba(255, 92, 92, 0.25) !important;
    color: #ff5c5c !important;
    border-color: #ff5c5c !important;
}

[data-theme="dark"] .btn-outline-danger i {
    color: #ff5c5c !important;
}

/* Dark mode - List groups */
[data-theme="dark"] .list-group-item {
    background-color: transparent !important;
    border-color: var(--reef-border) !important;
    color: var(--reef-text) !important;
}

[data-theme="dark"] .list-group-flush .list-group-item {
    background-color: transparent !important;
}

[data-theme="dark"] .list-group-item-action:hover {
    background-color: rgba(27, 182, 173, 0.08) !important;
}

/* Dark mode - Parameter cards and colored backgrounds */
[data-theme="dark"] .param-card,
[data-theme="dark"] .parameter-card {
    background-color: var(--reef-surface) !important;
    border-color: var(--reef-border);
    color: var(--reef-text) !important;
}

[data-theme="dark"] .param-value {
    color: var(--reef-text) !important;
}

[data-theme="dark"] .param-name {
    color: var(--reef-muted) !important;
}

/* Dark mode - Stat cards (tank report) */
[data-theme="dark"] .stat-card {
    background-color: var(--reef-surface) !important;
    border-color: var(--reef-border) !important;
    color: var(--reef-text) !important;
}

[data-theme="dark"] .stat-card .fw-bold,
[data-theme="dark"] .stat-card .fs-4 {
    color: var(--reef-text) !important;
}

/* Dark mode - Dose plan parameter names */
[data-theme="dark"] .dose-item .fw-bold,
[data-theme="dark"] .dose-item .dose-name,
[data-theme="dark"] .calculated-dose-row .fw-bold,
[data-theme="dark"] .dose-name {
    color: var(--reef-text) !important;
}

/* Dark mode - Dose plan current/target values inside bg-white containers */
[data-theme="dark"] .calculated-dose-row .bg-white .fw-medium {
    color: var(--reef-text) !important;
}

/* Modal z-index - must be above navbar (z-index: 10100) */
.modal-backdrop {
    z-index: 10150 !important;
}

.modal {
    z-index: 10200 !important;
}

/* Dark mode - Modal */
[data-theme="dark"] .modal-content {
    background-color: var(--reef-surface);
    border-color: var(--reef-border);
}

[data-theme="dark"] .modal-header {
    background-color: rgba(27, 182, 173, 0.08);
    border-bottom-color: var(--reef-border);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--reef-border);
}

/* Dark mode - Nav tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--reef-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--reef-muted);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--reef-text);
    border-color: var(--reef-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--reef-teal);
    background-color: var(--reef-surface);
    border-color: var(--reef-border) var(--reef-border) transparent;
}

/* Dark mode - Input groups */
[data-theme="dark"] .input-group-text {
    background-color: var(--reef-sand);
    border-color: var(--reef-border);
    color: var(--reef-text);
}

/* Dark mode - Small text */
[data-theme="dark"] .small,
[data-theme="dark"] small,
[data-theme="dark"] .form-text {
    color: var(--reef-muted);
}

/* Dark mode - Links */
[data-theme="dark"] a {
    color: var(--reef-teal);
}

[data-theme="dark"] a:hover {
    color: var(--reef-cyan);
}

/* Dark mode - Ensure standalone links in cards/forms are clearly visible */
[data-theme="dark"] .card-body a.text-decoration-none {
    color: var(--reef-teal) !important;
}

[data-theme="dark"] .card-body a.text-decoration-none:hover {
    color: var(--reef-cyan) !important;
}

/* Dark mode - Dropdown divider */
[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--reef-border);
}

/* Dark mode - Close button */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark mode - Text navy class */
[data-theme="dark"] .text-navy {
    color: var(--reef-text) !important;
}

/* Dark mode - Display text */
[data-theme="dark"] .display-1,
[data-theme="dark"] .display-2,
[data-theme="dark"] .display-3,
[data-theme="dark"] .display-4,
[data-theme="dark"] .display-5,
[data-theme="dark"] .display-6 {
    color: #ffffff !important;
}

[data-theme="dark"] .display-6.fw-bold {
    color: #ffffff !important;
}

/* Dark mode - Lead text */
[data-theme="dark"] .lead {
    color: var(--reef-muted);
}

/* Dark mode - Accordion */
[data-theme="dark"] .accordion-item {
    background-color: var(--reef-surface);
    border-color: var(--reef-border);
}

[data-theme="dark"] .accordion-button {
    background-color: rgba(27, 182, 173, 0.08);
    color: var(--reef-text);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(27, 182, 173, 0.15);
    color: var(--reef-teal);
}

/* Theme toggle button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--reef-navy);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
    background-color: rgba(27, 182, 173, 0.12);
    color: var(--reef-ocean);
}

[data-theme="dark"] .theme-toggle-btn {
    color: var(--reef-teal);
}

.theme-toggle-btn i {
    transition: transform 0.3s ease;
}

.theme-toggle-btn:hover i {
    transform: rotate(20deg);
}

/* Dark mode - Force light text on all colored backgrounds */
[data-theme="dark"] .bg-light-green,
[data-theme="dark"] .bg-light-blue,
[data-theme="dark"] .bg-light-pink,
[data-theme="dark"] .bg-light-yellow,
[data-theme="dark"] [style*="background-color: rgb(220, 252, 231)"],
[data-theme="dark"] [style*="background-color: rgb(219, 234, 254)"],
[data-theme="dark"] [style*="background-color: rgb(252, 231, 243)"],
[data-theme="dark"] [style*="background-color: rgb(254, 249, 195)"],
[data-theme="dark"] [style*="background: linear-gradient"],
[data-theme="dark"] [class*="bg-"][class*="light"] {
    background-color: var(--reef-surface) !important;
    background: var(--reef-surface) !important;
    color: var(--reef-text) !important;
}

/* Dark mode - Dashboard parameter cards */
[data-theme="dark"] .card[style*="background"],
[data-theme="dark"] .parameter-card,
[data-theme="dark"] .param-tile {
    background-color: var(--reef-surface) !important;
    border: 1px solid var(--reef-border) !important;
}

[data-theme="dark"] .card[style*="background"] *,
[data-theme="dark"] .parameter-card *,
[data-theme="dark"] .param-tile * {
    color: var(--reef-text) !important;
}

[data-theme="dark"] .card[style*="background"] .text-muted,
[data-theme="dark"] .parameter-card .text-muted,
[data-theme="dark"] .param-tile .text-muted {
    color: var(--reef-muted) !important;
}

/* Dark mode - Specific badge colors that need text adjustment */
[data-theme="dark"] .badge.text-dark {
    color: var(--reef-text) !important;
}

/* Dark mode - Volume badges and similar */
[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--reef-sand) !important;
    color: var(--reef-text) !important;
}

/* Dark mode - "out of range" badges */
[data-theme="dark"] .badge[class*="bg-"][class*="warning"].text-dark {
    color: #1a2332 !important;
}

/* Dark mode - Ensure all card text is visible */
[data-theme="dark"] .card * {
    color: inherit;
}

[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card .card-title {
    color: var(--reef-text);
}

/* Dark mode - Tank action buttons */
[data-theme="dark"] .tank-action-bar .btn {
    border-color: var(--reef-border);
}

/* Dark mode - Small muted text in cards */
[data-theme="dark"] .card .small.text-muted,
[data-theme="dark"] .card small.text-muted {
    color: var(--reef-muted) !important;
}

/* Dark mode - Display numbers and values */
[data-theme="dark"] .display-1,
[data-theme="dark"] .display-2,
[data-theme="dark"] .display-3,
[data-theme="dark"] .display-4,
[data-theme="dark"] .display-5,
[data-theme="dark"] .display-6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--reef-text);
}

/* Dark mode - Text secondary/muted overrides */
[data-theme="dark"] .text-secondary {
    color: #c8d5e0 !important;
}

[data-theme="dark"] .text-secondary.small {
    color: #9ca3af !important;
}

/* Dark mode - Notification/alert badges */
[data-theme="dark"] .badge.rounded-pill {
    background-color: #ef4444 !important;
    color: white !important;
}

/* Dark mode - Ensure icons inherit text color */
[data-theme="dark"] i,
[data-theme="dark"] .bi {
    color: inherit;
}

/* Dark mode - Tank volume badges */
[data-theme="dark"] .badge.border {
    border-color: var(--reef-border) !important;
}

/* Dark mode - Lead/subtitle text */
[data-theme="dark"] .lead,
[data-theme="dark"] [class*="subtitle"] {
    color: var(--reef-muted) !important;
}

/* Dark mode - Aggressively override all dashboard parameter cards */
[data-theme="dark"] .tank-card .card[style],
[data-theme="dark"] .tank-overview .card[style],
[data-theme="dark"] div[class*="col"] > .card[style],
[data-theme="dark"] .row .card[style*="background"] {
    background: var(--reef-surface) !important;
    background-color: var(--reef-surface) !important;
    background-image: none !important;
    /* Use individual border sides to preserve inline border-left color indicators */
    border-top: 1px solid var(--reef-border) !important;
    border-right: 1px solid var(--reef-border) !important;
    border-bottom: 1px solid var(--reef-border) !important;
}

/* Dark mode - Override any inline styles on parameter values */
[data-theme="dark"] .card[style] h1,
[data-theme="dark"] .card[style] h2,
[data-theme="dark"] .card[style] h3,
[data-theme="dark"] .card[style] h4,
[data-theme="dark"] .card[style] h5,
[data-theme="dark"] .card[style] h6,
[data-theme="dark"] .card[style] .h1,
[data-theme="dark"] .card[style] .h2,
[data-theme="dark"] .card[style] .h3,
[data-theme="dark"] .card[style] .h4,
[data-theme="dark"] .card[style] .h5,
[data-theme="dark"] .card[style] .h6,
[data-theme="dark"] .card[style] strong,
[data-theme="dark"] .card[style] b {
    color: var(--reef-text) !important;
}

/* Dark mode - Parameter card small text and labels */
[data-theme="dark"] .card[style] .small,
[data-theme="dark"] .card[style] small,
[data-theme="dark"] .card[style] .text-muted {
    color: var(--reef-muted) !important;
}

/* Dark mode - Chart text and SVG text */
[data-theme="dark"] text,
[data-theme="dark"] tspan {
    fill: var(--reef-text) !important;
}

/* Dark mode - Override Bootstrap's text-dark utility */
[data-theme="dark"] .text-dark {
    color: var(--reef-text) !important;
}

/* Dark mode - Cards with rounded corners */
[data-theme="dark"] .card.rounded,
[data-theme="dark"] .card.rounded-3,
[data-theme="dark"] .card.shadow-sm {
    background-color: var(--reef-surface) !important;
}

/* Dark mode - Text on any background color */
[data-theme="dark"] [style*="background-color"] {
    color: var(--reef-text) !important;
}

/* Dark mode - Dosing container cards */
[data-theme="dark"] .dosing-container-card,
[data-theme="dark"] .container-status {
    background-color: var(--reef-surface) !important;
    color: var(--reef-text) !important;
}

/* Dark mode - All heading text regardless of nesting */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--reef-text) !important;
}

/* Dark mode - Text inside cards with classes */
[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-body div,
[data-theme="dark"] .card-body span {
    color: inherit;
}

/* Dark mode - Ensure primary text color is maintained */
[data-theme="dark"] .text-primary {
    color: var(--reef-teal) !important;
}

/* Dark mode - Success text */
[data-theme="dark"] .text-success {
    color: #4ade80 !important;
}

/* Dark mode - Warning text should be bright */
[data-theme="dark"] .text-warning {
    color: #fbbf24 !important;
}

/* Dark mode - Danger text */
[data-theme="dark"] .text-danger {
    color: #ff5c5c !important;
}

[data-theme="dark"] .text-danger i,
[data-theme="dark"] .text-danger .bi {
    color: #ff5c5c !important;
}

/* Dark mode - Info text */
[data-theme="dark"] .text-info {
    color: #38bdf8 !important;
}

/* Dark mode - Card footer and header backgrounds */
[data-theme="dark"] .card-footer {
    background-color: var(--reef-surface) !important;
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .card-footer.bg-white,
[data-theme="dark"] .card-header.bg-white {
    background-color: var(--reef-surface) !important;
}

/* Dark mode - Force ALL inline background styles to dark */
[data-theme="dark"] [style*="background: rgb"],
[data-theme="dark"] [style*="background:rgb"],
[data-theme="dark"] [style*="background: linear-gradient"],
[data-theme="dark"] [style*="background:linear-gradient"],
[data-theme="dark"] [style*="background-color: rgb"],
[data-theme="dark"] [style*="background-color:rgb"] {
    background: var(--reef-surface) !important;
    background-color: var(--reef-surface) !important;
    background-image: none !important;
}

/* Dark mode - bg-white and bg-light utilities */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--reef-surface) !important;
}

/* Dark mode - Text inside bg-white/light elements */
[data-theme="dark"] .bg-white *:not(.text-muted),
[data-theme="dark"] .bg-light *:not(.text-muted) {
    color: var(--reef-text);
}

/* Dark mode - Cards with inline styles more specific */
[data-theme="dark"] .card.shadow-sm[style],
[data-theme="dark"] .card.rounded[style],
[data-theme="dark"] div.card[style] {
    background: var(--reef-surface) !important;
    background-color: var(--reef-surface) !important;
    background-image: none !important;
    /* Use individual border sides to preserve inline border-left color indicators */
    border-top-color: var(--reef-border) !important;
    border-right-color: var(--reef-border) !important;
    border-bottom-color: var(--reef-border) !important;
}

/* Dark mode - Any div with inline background */
[data-theme="dark"] div[style*="background"] {
    background: var(--reef-surface) !important;
    background-color: var(--reef-surface) !important;
    background-image: none !important;
}

/* Dark mode - Form elements */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--reef-text);
}

[data-theme="dark"] option {
    background-color: var(--reef-surface);
    color: var(--reef-text);
}

[data-theme="dark"] ::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

[data-theme="dark"] .form-check-input {
    background-color: #121a26;
    border-color: var(--reef-border);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--reef-teal);
    border-color: var(--reef-teal);
}

[data-theme="dark"] .form-check-label {
    color: var(--reef-text);
}

/* Dark mode - Ensure CURRENT and TARGET labels are visible */
[data-theme="dark"] .text-uppercase {
    color: var(--reef-muted) !important;
}

/* Dark mode - Schedule text and totals */
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--reef-text) !important;
}

/* Dark mode - Dashboard "days ago" badges should have dark background and light text */
[data-theme="dark"] .badge.bg-white.text-secondary.border,
[data-theme="dark"] .badge.bg-light.text-secondary.border {
    background-color: rgba(27, 182, 173, 0.3) !important;
    color: #ffffff !important;
    border-color: var(--reef-teal) !important;
    font-weight: 600 !important;
}

/* Dark mode - Stability and other light badges */
[data-theme="dark"] .badge.text-bg-light {
    background-color: rgba(27, 182, 173, 0.2) !important;
    color: var(--reef-text) !important;
    border-color: var(--reef-border) !important;
}

/* Dark mode - Navbar toggler icon (hamburger menu) */
[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    filter: none !important;
}

[data-theme="dark"] .navbar-toggler {
    border-color: var(--reef-teal) !important;
    background-color: rgba(45, 212, 204, 0.15) !important;
}

[data-theme="dark"] .navbar-toggler:hover {
    background-color: rgba(45, 212, 204, 0.25) !important;
}

[data-theme="dark"] .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(45, 212, 204, 0.25) !important;
}

/* Dark mode - Dosing calculator and form inputs */
[data-theme="dark"] .input-group-text {
    background-color: var(--reef-sand);
    border-color: var(--reef-border);
    color: var(--reef-text);
}

/* Dark mode - Enhance checkbox visibility */
[data-theme="dark"] .form-check-input {
    background-color: #1f2937 !important;
    border-color: var(--reef-teal) !important;
    border-width: 2px !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--reef-teal) !important;
    border-color: var(--reef-teal) !important;
}

[data-theme="dark"] .form-check-input:focus {
    border-color: var(--reef-cyan) !important;
    box-shadow: 0 0 0 0.25rem rgba(45, 212, 204, 0.25) !important;
}

/* Dark mode - Dose plan checkbox containers */
[data-theme="dark"] .dose-mobile-container label.bg-white,
[data-theme="dark"] label.bg-white.border {
    background-color: var(--reef-surface) !important;
    border-color: var(--reef-border) !important;
}

[data-theme="dark"] .dose-mobile-container label.bg-white:hover {
    background-color: rgba(27, 182, 173, 0.08) !important;
}

/* Dark mode - Dose plan checkbox labels text */
[data-theme="dark"] .dose-mobile-container .fw-medium,
[data-theme="dark"] .form-check-label {
    color: var(--reef-text) !important;
}

/* Dark mode - Dose plan ml badges */
[data-theme="dark"] .dose-mobile-container .badge.bg-light {
    background-color: rgba(27, 182, 173, 0.15) !important;
    color: var(--reef-teal) !important;
    border-color: var(--reef-teal) !important;
}

/* Dark mode - SVG and container graphics */
[data-theme="dark"] svg {
    color: var(--reef-text);
}

[data-theme="dark"] svg path,
[data-theme="dark"] svg rect,
[data-theme="dark"] svg circle {
    stroke: var(--reef-text);
}

/* Dark mode - Table headings */
[data-theme="dark"] .table thead {
    background-color: var(--reef-surface);
    color: var(--reef-text);
}

[data-theme="dark"] .table-light {
    background-color: rgba(100, 150, 200, 0.1) !important;
    color: var(--reef-text) !important;
}

/* Dark mode - Badge adjustments for better contrast */
[data-theme="dark"] .badge.bg-light.text-dark.border {
    background-color: rgba(27, 182, 173, 0.15) !important;
    color: var(--reef-text) !important;
    border-color: var(--reef-border) !important;
}

/* Dark mode - Card headers with bg-white */
[data-theme="dark"] .card-header.bg-white {
    background-color: rgba(27, 182, 173, 0.08) !important;
    color: var(--reef-text);
}

/* Dark mode - Alert boxes */
[data-theme="dark"] .alert-primary {
    background-color: rgba(45, 212, 204, 0.15);
    border-color: rgba(45, 212, 204, 0.3);
    color: var(--reef-teal);
}

[data-theme="dark"] .alert-light {
    background-color: var(--reef-surface);
    border-color: var(--reef-border);
    color: var(--reef-text);
}

/* Dark mode - Ensure all text in forms is visible */
[data-theme="dark"] .form-text {
    color: var(--reef-muted) !important;
}

/* Dark mode - Select options */
[data-theme="dark"] select option {
    background-color: var(--reef-surface);
    color: var(--reef-text);
}

[data-theme="dark"] optgroup {
    background-color: var(--reef-deep);
    color: var(--reef-text);
    font-weight: bold;
}

/* Dark mode - Ensure button text contrast */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--reef-text);
    border-color: var(--reef-border);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(27, 182, 173, 0.12);
    border-color: var(--reef-teal);
    color: var(--reef-teal);
}

/* Dark mode - Dosing container graphics (from tank_detail.html) */
[data-theme="dark"] .dose-container {
    border-color: var(--reef-cyan) !important;
    border-width: 2px !important;
    background: rgba(5, 10, 20, 1) !important;
    box-shadow: 0 0 10px rgba(45, 212, 204, 0.2) !important;
    position: relative !important;
}

[data-theme="dark"] .dose-liquid {
    opacity: 1 !important;
    position: absolute !important;
    bottom: 0 !important;
    z-index: 1 !important;
    border: none !important;
}

/* Target Bootstrap CSS variable colors and enhance them for dark mode */
[data-theme="dark"] .dose-liquid[style*="var(--bs-primary)"] {
    background: #00d4ff !important;
    filter: brightness(1.2) !important;
}

[data-theme="dark"] .dose-liquid[style*="var(--bs-warning)"] {
    background: #ffa500 !important;
    filter: brightness(1.3) saturate(1.2) !important;
}

[data-theme="dark"] .dose-liquid[style*="var(--bs-danger)"] {
    background: #ff3333 !important;
    filter: brightness(1.2) saturate(1.1) !important;
}

[data-theme="dark"] .dose-markings {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.7) 0 2px,
        transparent 2px 9px
    ) !important;
    position: absolute !important;
    top: 12px !important;
    bottom: 8px !important;
    right: 6px !important;
    width: 12px !important;
    z-index: 2 !important;
    pointer-events: none;
}

/* Text overlay inside dosing containers - vertical text rotation */
.dose-container-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    z-index: 3;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
    color: #333;
    text-shadow: 0 0 3px rgba(255,255,255,0.8), 0 0 5px rgba(255,255,255,0.6);
}

[data-theme="dark"] .dose-container-text {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.6) !important;
}

/* Dark mode - Dosing container text (ml remaining, days remaining) */
[data-theme="dark"] .dose-container + div .text-muted,
[data-theme="dark"] .d-flex.align-items-start.gap-2 .text-muted {
    color: #b8c5d1 !important;
}

/* Dark mode - Additive name labels and solution names */
[data-theme="dark"] .dose-solution-name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .text-muted.small.text-uppercase {
    color: #9ca3af !important;
}

/* Dark mode - Ensure "Refill" button text and small text are visible */
[data-theme="dark"] .text-muted.small {
    color: #9ca3af !important;
}

/* Dark mode - Daily dosing card label headings */
[data-theme="dark"] .text-muted.small.text-uppercase.fw-bold {
    color: #7ec8c4 !important;
}

/* Dark mode - Daily dosing card backgrounds */
[data-theme="dark"] .shadow-sm.border-0 {
    border: 1px solid var(--reef-border) !important;
}

/* Dark mode - Estimated daily consumption section */
[data-theme="dark"] .fw-semibold {
    color: var(--reef-text) !important;
}

[data-theme="dark"] .fw-bold.fs-5.text-dark,
[data-theme="dark"] .card-body .text-dark {
    color: #ffffff !important;
}

/* Dark mode - Estimated daily consumption heading */
[data-theme="dark"] .text-muted.text-uppercase.small.fw-semibold {
    color: #7ec8c4 !important;
}

/* Dark mode - Onboarding guide completed tasks - use specific selector to avoid affecting dashboard */
[data-theme="dark"] [data-guide-task].bg-success-subtle {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] [data-guide-task].border-success {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

/* Dosing cards grid - auto-fit to fill available space */
.dosing-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.dosing-grid > .col {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

@media (min-width: 768px) {
    .dosing-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (min-width: 1200px) {
    .dosing-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Consumption cards grid - auto-fit to fill available space */
.consumption-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.consumption-grid > .col {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/* Stack consumption card content vertically on narrow screens */
.consumption-grid .card-body .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem;
}

/* Keep the value and unit together */
.consumption-grid .card-body .fw-bold.fs-5 {
    white-space: nowrap;
}

@media (min-width: 576px) {
    .consumption-grid .card-body .d-flex.justify-content-between {
        flex-direction: row;
        align-items: center !important;
        gap: 0;
    }
}

/* Readings cards - auto-fit to fill space, but cap individual card width */
.readings-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr));
    gap: 1rem;
}

.readings-grid > .col {
    width: 100% !important;
    max-width: none !important;
}

/* Range bar labels */
.readings-grid .param-range-bar + .d-flex {
    font-size: 0.8rem;
    gap: 4px;
}

.readings-grid .param-range-bar + .d-flex > span {
    white-space: nowrap;
}

/* Readings card header - stack name and badge on narrow cards */
.readings-grid .card-body > .d-flex:first-child {
    flex-wrap: wrap;
    gap: 4px;
}

.readings-grid .card-body > .d-flex:first-child .fw-bold {
    flex: 1 1 auto;
    min-width: 0;
}

.readings-grid .card-body > .d-flex:first-child .badge {
    flex-shrink: 0;
}

/* Readings card footer - stack time and stability on narrow cards */
.readings-grid .card-footer {
    flex-wrap: wrap;
    gap: 4px 12px;
    border-radius: 0 0 18px 18px !important;
}

.readings-grid .card-footer > span {
    white-space: nowrap;
}