/* Follow the device theme. Keep action colors tied to their role. */
:root {
    color-scheme: light dark;
    --page: #f9fafb;
    --surface: #ffffff;
    --subtle: #f1f5f9;
    --text: #0f172a;
    --muted: #475569;
    --line: #cbd5e1;
    --link: #075985;
    --primary: #075985;
    --primary-hover: #0c4a6e;
    --primary-text: #ffffff;
    --danger: #b91c1c;
}
:is(.history-statistics-link, .create-recipe-button, .auto-plan-button,
    .meal-plan-button, .account-form button, .admin-page-link, .section-edit-toggle,
    .start-cooking-button, .recipe-create-actions button, #import-url-form button,
    .calendar-scale-apply, .side-suggestion-add-button) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text) !important;
}
:is(.history-statistics-link, .create-recipe-button, .auto-plan-button,
    .meal-plan-button, .account-form button, .admin-page-link, .section-edit-toggle,
    .start-cooking-button, .recipe-create-actions button, #import-url-form button,
    .calendar-scale-apply, .side-suggestion-add-button):hover {
    background: var(--primary-hover) !important;
}
:is(.auto-plan-regenerate, .auto-plan-cancel) {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--link) !important;
}
button:disabled { opacity: .55; cursor: not-allowed; }
#import-url-form input { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
#import-url-form button { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; }

:root[data-theme="dark"] {
        --page: #0b1220;
        --surface: #111c2f;
        --subtle: #1e293b;
        --text: #e2e8f0;
        --muted: #a8b6ca;
        --line: #475569;
        --link: #7dd3fc;
        --primary: #0369a1;
        --primary-hover: #075985;
        --danger: #fca5a5;
    }

:root[data-theme="dark"] body, :root[data-theme="dark"] .account-page { background: var(--page) !important; color: var(--text) !important; }

:root[data-theme="dark"] :is(p,span,small,li,div) { color: var(--text) !important; }

:root[data-theme="dark"] :is(h1,h2,h3,h4,h5,label,legend,strong) { color: var(--text) !important; }

:root[data-theme="dark"] a, :root[data-theme="dark"] a:visited { color: var(--link); }

:root[data-theme="dark"] :is(.dashboard-layout > div, .weekly-panel, .account-shell, .auth-screen,
        .recipe-create-page, .page-shell, .recipe-detail-card, .recipe-card,
        .matching-meal-suggestion-cards article, .statistics-period, .admin-card,
        .add-sides-panel, .cook-step-panel, .cook-ingredients, dialog,
        .side-suggestion-dialog, .filter-dialog, .calendar-scale-sheet) {
        background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important;
    }

:root[data-theme="dark"] :is(.week-day, .history-entry, .calendar-meal, .grocery-item, .grocery-removed-panel,
        .recipe-meta-grid, .plan-narrowing, .home-calendar-preview, .home-calendar-preview-day,
        .recipe-search-matches, .recipe-search-match, .recipe-side-suggestions,
        .calendar-scale-preset, .calendar-collision-option) {
        background: var(--subtle) !important; color: var(--text) !important; border-color: var(--line) !important;
    }

:root[data-theme="dark"] :is(p,span,div,li,label)[style*="color:"] { color: var(--text) !important; }

:root[data-theme="dark"] :is(p,span,div)[style*="background: #f"], :root[data-theme="dark"] :is(p,span,div)[style*="background-color: #f"] {
        background: var(--subtle) !important;
    }

:root[data-theme="dark"] span[style*="background:"] { background: var(--subtle) !important; }

:root[data-theme="dark"] :is(.weekly-header p, .calendar-help, .empty-day, .calendar-sides, .calendar-custom-notes,
        .catalog-card-time, .statistics-intro, .statistics-count, .plan-rules,
        .recipe-search-status, .grocery-item-detail, .grocery-help, .cook-progress,
        .recipe-scope-label, .side-suggestion-scope, .hint) { color: var(--muted) !important; }

:root[data-theme="dark"] :is(.calendar-recipe-link, .calendar-sides a, .matching-meal-suggestion-cards article > a,
        .history-entry a, .plan-narrowing summary, .custom-dinner-entry summary,
        .calendar-suggestion-action, .empty-day-actions a, .matching-meal-suggestion-cards summary,
        .side-suggestion-list a, .recipe-detail-card a:not([class])) { color: var(--link) !important; }

:root[data-theme="dark"] a[style*="color:"]:not(.nav-button) { color: var(--link) !important; }

:root[data-theme="dark"] :is(input,select,textarea) { background: var(--page) !important; color: var(--text) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: 1; }

:root[data-theme="dark"] .matching-meal-suggestion-cards article > p, :root[data-theme="dark"] .history-entry-content, :root[data-theme="dark"] .calendar-scale-help, :root[data-theme="dark"] .calendar-scale-recipe, :root[data-theme="dark"] .grocery-item-meta, :root[data-theme="dark"] .recipe-meta-grid span { color: var(--muted) !important; }

:root[data-theme="dark"] :is(.meal-suggest-button, .import-recipe-button, .week-navigation a, .move-meal-form button,
        .clear-filter-button, .recipe-card a[href^="/recipe/"], .print-list-button,
        .restore-grocery-button, .calendar-scale-close, .custom-dinner-form button,
        .ingredient-scale-form button, .cook-scale-form button, .account-signout button,
        .recipe-create-actions a, .filter-dialog-close, .filter-dialog-actions button) {
        background: var(--surface) !important; color: var(--link) !important; border-color: var(--line) !important;
    }

:root[data-theme="dark"] .cook-step-controls button:first-child { background: var(--surface) !important; color: var(--link) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] :is(.meal-suggest-button, .import-recipe-button, .week-navigation a,
        .recipe-card a[href^="/recipe/"]):hover { background: var(--subtle) !important; }

:root[data-theme="dark"] :is(.recipe-section, .matching-meal-suggestions, .account-shell section, fieldset,
        .admin-email-list li, .admin-audit-row) { border-color: var(--line) !important; }

:root[data-theme="dark"] :is(.history-delete-button, .grocery-delete-removed) {
        background: var(--surface) !important; color: var(--danger) !important; border-color: #7f1d1d !important;
    }

:root[data-theme="dark"] .calendar-delete-button { color: var(--danger) !important; }

:root[data-theme="dark"] .calendar-delete-button span { color: var(--danger) !important; }

:root[data-theme="dark"] .calendar-scale-trigger { color: var(--link) !important; }

:root[data-theme="dark"] .calendar-scale-preset[aria-pressed="true"] { background: var(--primary) !important; color: var(--primary-text) !important; border-color: #38bdf8 !important; }

:root[data-theme="dark"] .calendar-drag-hint { color: var(--muted) !important; }

:root[data-theme="dark"] .grocery-remove-cue { background: var(--surface) !important; color: var(--link) !important; border-color: var(--line) !important; }

:root[data-theme="dark"] :is(.error, .error-message, .calendar-alert, .recipe-edit-error) {
        background: #351820 !important; color: #fecaca !important; border-color: #991b1b !important;
    }

:root[data-theme="dark"] :is(.success-message, .calendar-success, .recipe-save-status) { background: #12352a !important; color: #a7f3d0 !important; }

:root[data-theme="dark"] .site-header :is(a,span), :root[data-theme="dark"] .cook-header :is(a,span) { color: #f8fafc !important; }

:root[data-theme="dark"] .site-nav .nav-button { background: var(--subtle) !important; border-color: var(--line) !important; color: var(--text) !important; }

:root[data-theme="dark"] .site-nav .nav-button[aria-current="page"] { background: #fbbf24 !important; border-color: #fbbf24 !important; color: #0f172a !important; }

:root[data-theme="dark"] .site-nav .nav-button :is(span,svg) { color: inherit !important; }

:root[data-theme="dark"] .grocery-item:hover { background: #25364d !important; }

:root[data-theme="dark"] dialog::backdrop { background: rgb(0 0 0 / 65%); }

:root[data-theme="dark"] :focus-visible { outline-color: #38bdf8 !important; }


@media (max-width: 760px) {
:root[data-theme="dark"] .site-nav .nav-button { border: 0 !important; }

}
@media print {
    :root { color-scheme: light; }
    body, .weekly-panel, .grocery-item { background: #fff !important; color: #000 !important; }
    :is(h1,h2,h3,p,span,a) { color: #000 !important; }
}