/* Global theme variables and dark mode support */
:root{
    --bg: #ffffff;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --text: #0f172a;
    --muted: #6b7280;
    --muted-2: #9ca3af;
    --link: #4f46e5;

    /* color tokens */
    --primary: #f6c94f;
    --primary-contrast: #ffffff;
    --success: #16a34a;
    --success-contrast: #ffffff;
    --success-rgb: 22,163,74;
    --warning: #f97316; /* orange-500 */
    --warning-contrast: #000000;
    --warning-rgb: 249,115,22;

    --card-border: #e6eaf0;

    --chip-pending-bg: #fff7ed;
    --chip-pending-color: #92400e;
    --chip-pending-border: #fcd34d;

    --chip-active-bg: #fffbeb;
    --chip-active-color: #92400e;
    --chip-active-border: #f97316;

    --chip-completed-bg: #ecfdf5;
    --chip-completed-color: #065f46;
    --chip-completed-border: #34d399;
}

/* Dark theme optimized for OLED/battery saving: default to dark when user prefers it */
.dark-theme, :root.dark-theme {
    /* Dark theme with improved contrast for readability */
    --bg: #071226;            /* slightly lighter than pure black for less strain */
    --header-bg: #071226;
    --card-bg: #07182a;       /* deeper but readable card background */
    --text: #f0f8ff;          /* brighter text for improved contrast */
    --muted: #b8c7d8;         /* lighter muted color for legibility */
    --muted-2: #9fb3c8;
    --link: #93c5fd;          /* visible link color */

    /* dark-mode color tokens tuned for contrast */
    --primary: #16a34a; /* green-600 */
    --primary-contrast: #ffffff;
    --success: #16a34a; /* use green for main accent/success */
    --success-contrast: #ffffff;
    --success-rgb: 22,163,74;
    --warning: #f97316;
    --warning-contrast: #000000;
    --warning-rgb: 249,115,22;

    --card-border: rgba(255,255,255,0.06);

    --chip-pending-bg: rgba(249,250,252,0.02);
    --chip-pending-color: var(--success);
    --chip-pending-border: rgba(249,115,22,0.12);

    --chip-active-bg: rgba(236,254,255,0.02);
    --chip-active-color: var(--success);
    --chip-active-border: rgba(94,234,212,0.12);

    --chip-completed-bg: rgba(236,254,255,0.02);
    --chip-completed-color: var(--success);
    --chip-completed-border: rgba(45,212,191,0.12);
}

/* Honor system preference by default (will be overridden by explicit .dark-theme class) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --header-bg: #000000;
        --card-bg: #000000;
        --text: #e6eef8;
        --muted: #9ca3af;
        --muted-2: #9ca3af;
        --link: #f6c35c;
    }
}

/* Apply variables globally */
html, body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

header {
    background-color: var(--header-bg) !important;
    color: var(--text) !important;
}

/* Default link color for plain anchors. Exclude action/button-style anchors so
    `.btn-accent` and `.brand-title` can control their own colors. Avoid using
    !important so component classes can override link color. */
a:not(.btn-accent):not(.brand-title):not(.brand-accent) { color: var(--link); }

/* Reduce glow and shadows on dark to save battery */
.dark-theme .dd-card, :root[style] .dd-card { box-shadow: none !important; }

/* Make bordered elements more subtle in dark */
.dark-theme .dd-card { border-color: rgba(255,255,255,0.06) !important; }

/* Inputs / buttons: ensure sufficient contrast in dark mode */
.dark-theme .dd-primary-btn { box-shadow: none; }

/*
 Override common light utility/background classes in dark mode so status
 background utilities (e.g. `bg-green-100`, `bg-yellow-50`, `bg-white`) do not
 produce washed/colored cards. In dark mode we prefer the neutral card background
 and readable text colors.
*/
.dark-theme .bg-white,
.dark-theme .bg-teal-100,
.dark-theme .bg-yellow-50,
.dark-theme .bg-amber-50,
.dark-theme .bg-gray-50 {
    background: var(--card-bg) !important;
}

.dark-theme .text-gray-800,
.dark-theme .text-teal-700,
.dark-theme .text-yellow-700,
.dark-theme .text-yellow-800 {
    color: var(--muted) !important;
}

.dark-theme .border-teal-200,
.dark-theme .border-yellow-300,
.dark-theme .border-gray-200,
.dark-theme .border-amber-200 {
    border-color: var(--card-border) !important;
}

/* Make chips more legible in dark */
.dark-theme .dd-chip { box-shadow: none; }
.dark-theme .dd-chip.pending { background: rgba(249,115,22,0.07); color: var(--chip-pending-color); border-color: var(--chip-pending-border); }
.dark-theme .dd-chip.active { background: rgba(249,115,22,0.06); color: var(--chip-active-color); border-color: var(--chip-active-border); }
.dark-theme .dd-chip.completed { background: rgba(var(--success-rgb),0.06); color: var(--chip-completed-color); border-color: var(--chip-completed-border); }

/* Improve contrast for secondary controls in dark */
.dark-theme .dd-secondary a { border-color: rgba(255,255,255,0.06); color: var(--text); background: rgba(255,255,255,0.02); }

/* Ensure headings and important text are bright enough */
.dark-theme h1, .dark-theme h2, .dark-theme .dd-title { color: var(--text) !important; }

/* Improve contrast for small meta lines inside the card details (payment/totals/instructions) */
.dark-theme .dd-details .text-sm,
.dark-theme .dd-details .text-gray-700,
.dark-theme .dd-meta {
    color: rgba(230,238,248,0.86) !important; /* near-white for legibility but slightly muted */
}

/* Appearance controls (profile) */
.theme-toggle-btn { background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.theme-toggle-active { background: var(--success); color: var(--success-contrast); border-color: rgba(var(--success-rgb),0.16); box-shadow: 0 0 0 3px rgba(var(--success-rgb),0.08); }

/* Brand helper classes to replace purple/indigo utilities */
.brand-accent { color: var(--success) !important; }
.brand-badge { color: var(--success); border: 1px solid rgba(var(--success-rgb),0.16); background: rgba(var(--success-rgb),0.06); padding: 0.25rem 0.6rem; border-radius: 9999px; font-weight:600; }
.brand-accent-bg { background: rgba(var(--success-rgb),0.04); border: 1px solid rgba(var(--success-rgb),0.06); }
.btn-accent { background: var(--success); color: var(--success-contrast); }
.btn-accent:hover { filter: brightness(0.95); }
.btn-accent:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--success-rgb),0.14); }
/* Ensure prominent links (brand/title) are not overridden by global anchor color */
.brand-title { color: var(--text) !important; font-weight:700; }