/**
 * Dark theme for logged-in app areas (/app, /admin).
 * Light defaults live in main.css :root. Public/marketing pages stay light (inline head script).
 */

html[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #1e2431;
    --color-bg-alt: #171c26;
    --color-text: #e8eaef;
    --color-text-light: #a8b4c4;
    --color-text-muted: #8b95a8;
    --color-border: #2f3848;
    --color-border-dark: #3d4a5e;
    --color-primary-tint: rgba(11, 151, 72, 0.18);

    --color-header-bg: rgba(12, 22, 34, 0.96);
    --color-header-border: rgba(255, 255, 255, 0.08);
    --color-nav-mobile-bg: rgba(10, 18, 28, 0.98);

    --color-footer-gradient-start: #121826;
    --color-footer-gradient-end: #0c1018;
    --color-footer-border: rgba(255, 255, 255, 0.1);
    --color-footer-text: rgba(255, 255, 255, 0.88);
    --color-footer-text-muted: rgba(255, 255, 255, 0.68);
    --color-footer-heading: rgba(255, 255, 255, 0.55);
    --color-footer-link: rgba(255, 255, 255, 0.78);
    --color-footer-link-hover: #ffffff;
    --color-footer-contact-name: rgba(255, 255, 255, 0.92);
    --color-footer-request-border: rgba(255, 255, 255, 0.1);
    --color-footer-request-text: rgba(255, 255, 255, 0.65);
    --color-footer-copyright: rgba(255, 255, 255, 0.55);

    --color-table-header-bg: #222a38;
    --color-table-row-hover: #252e3d;

    --color-input-focus-ring: rgba(11, 151, 72, 0.35);
    --color-error-focus-ring: rgba(252, 165, 165, 0.25);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Alerts — readable on dark surfaces */
html[data-theme="dark"] .alert-success {
    color: #9ae6b4;
    background: rgba(34, 84, 61, 0.55);
    border: 1px solid rgba(72, 187, 120, 0.35);
}

html[data-theme="dark"] .alert-error {
    color: #feb2b2;
    background: rgba(74, 30, 36, 0.55);
    border: 1px solid rgba(245, 101, 101, 0.35);
}

html[data-theme="dark"] .alert-warning {
    color: #fbd38d;
    background: rgba(90, 66, 20, 0.5);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

html[data-theme="dark"] .alert-info {
    color: #90cdf4;
    background: rgba(30, 58, 95, 0.55);
    border: 1px solid rgba(59, 130, 246, 0.35);
}

/* Buttons on dark app surfaces */
html[data-theme="dark"] .btn-outline {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .btn-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(203, 213, 225, 0.45);
    color: var(--color-text);
}

html[data-theme="dark"] .btn-text {
    color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .btn-text:hover {
    color: #ffffff;
}

html[data-theme="dark"] .site-header .btn-text {
    color: rgba(255, 255, 255, 0.82);
}

/* Stat / dashboard cards */
html[data-theme="dark"] .stat-card {
    box-shadow: var(--shadow-sm);
}

/* Plan builder — editable fields: blend into meal card (avoid native dark “sheet” look) */
html[data-theme="dark"] .meal-block .ingredient-input,
html[data-theme="dark"] .meal-block .serve-input {
    background-color: transparent;
    color: var(--color-text);
    border-color: transparent;
    -webkit-text-fill-color: var(--color-text);
}

html[data-theme="dark"] .meal-block .ingredient-input::placeholder,
html[data-theme="dark"] .meal-block .serve-input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

html[data-theme="dark"] .meal-block .ingredient-input:hover,
html[data-theme="dark"] .meal-block .serve-input:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .meal-block .ingredient-input:focus,
html[data-theme="dark"] .meal-block .serve-input:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--color-primary);
}

html[data-theme="dark"] .meal-block .ingredient-input:-webkit-autofill,
html[data-theme="dark"] .meal-block .ingredient-input:-webkit-autofill:hover,
html[data-theme="dark"] .meal-block .ingredient-input:-webkit-autofill:focus,
html[data-theme="dark"] .meal-block .serve-input:-webkit-autofill,
html[data-theme="dark"] .meal-block .serve-input:-webkit-autofill:hover,
html[data-theme="dark"] .meal-block .serve-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    transition: background-color 9999s ease-out;
    box-shadow: inset 0 0 0 100px var(--color-bg);
}

html[data-theme="dark"] .meal-block .notes-input {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .meal-block .notes-input:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-primary);
}

html[data-theme="dark"] .meal-block .notes-input::placeholder {
    color: var(--color-text-muted);
}

/* Meal header inputs — same idea as body fields: transparent on the navy bar, no grey “blocks” */
html[data-theme="dark"] .meal-header .meal-name-input,
html[data-theme="dark"] .meal-header .scale-goal-input {
    background-color: transparent;
    color: #fff;
    -webkit-text-fill-color: #fff;
    border: 1px solid transparent;
    box-shadow: none;
}

html[data-theme="dark"] .meal-header .meal-name-input::placeholder,
html[data-theme="dark"] .meal-header .scale-goal-input::placeholder {
    color: rgba(255, 255, 255, 0.62);
    opacity: 1;
}

html[data-theme="dark"] .meal-header .meal-name-input:hover,
html[data-theme="dark"] .meal-header .scale-goal-input:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .meal-header .meal-name-input:focus,
html[data-theme="dark"] .meal-header .scale-goal-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Keep calorie-goal input visibly editable without going blocky */
html[data-theme="dark"] .meal-header .scale-goal-input {
    border-color: rgba(255, 255, 255, 0.26);
    background-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .meal-header .scale-goal-input:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .meal-header .scale-goal-input:focus {
    border-color: rgba(11, 151, 72, 0.75);
    box-shadow: 0 0 0 2px rgba(11, 151, 72, 0.25);
}

html[data-theme="dark"] .meal-header .meal-name-input:-webkit-autofill,
html[data-theme="dark"] .meal-header .meal-name-input:-webkit-autofill:hover,
html[data-theme="dark"] .meal-header .meal-name-input:-webkit-autofill:focus,
html[data-theme="dark"] .meal-header .scale-goal-input:-webkit-autofill,
html[data-theme="dark"] .meal-header .scale-goal-input:-webkit-autofill:hover,
html[data-theme="dark"] .meal-header .scale-goal-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    transition: background-color 9999s ease-out;
    box-shadow: inset 0 0 0 100px var(--color-secondary);
}

/* Plan builder: micronutrients summary accent */
html[data-theme="dark"] .totals-micronutrients .total-row-summary {
    border-left-color: #94a3b8;
}

html[data-theme="dark"] .totals-micronutrients .total-row-summary::before {
    border-left-color: #94a3b8;
}

html[data-theme="dark"] .totals-micronutrients-inner {
    border-left-color: #94a3b8;
}

/* Proximity indicators — keep semantics, improve contrast on dark */
html[data-theme="dark"] .proximity-row.prox-green {
    background: rgba(72, 187, 120, 0.14);
}

html[data-theme="dark"] .proximity-row.prox-green .proximity-badge {
    background: rgba(34, 84, 61, 0.85);
    color: #c6f6d5;
}

html[data-theme="dark"] .proximity-row.prox-yellow {
    background: rgba(237, 183, 62, 0.12);
}

html[data-theme="dark"] .proximity-row.prox-yellow .proximity-badge {
    background: rgba(113, 85, 20, 0.75);
    color: #fefcbf;
}

html[data-theme="dark"] .proximity-row.prox-red .proximity-badge {
    background: rgba(90, 35, 40, 0.85);
    color: #fed7d7;
}

/* Meal table footer row */
html[data-theme="dark"] .meal-table .totals-row {
    background: var(--color-bg-alt);
}

/* Modals */
html[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* Status badges (inline styles on some app pages) */
html[data-theme="dark"] .badge-success {
    background: rgba(34, 84, 61, 0.75) !important;
    color: #9ae6b4 !important;
}

html[data-theme="dark"] .badge-muted {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-text-muted) !important;
}

html[data-theme="dark"] .badge-warning {
    background: rgba(90, 66, 20, 0.65) !important;
    color: #fbd38d !important;
}