/*
 * Dark mode for the pages that ask for it (owner 2026-10-26).
 *
 * A page sets data-color-scheme="auto" on <html> (base.html html_attrs
 * block). The script in base.html turns "auto" into "dark" or "light": the
 * theme saved in Tvarka Sign (localStorage tvarkaSignTheme) wins, and the
 * visitor's system setting decides when nothing is saved. Today these are the
 * entity selection (core/dashboard.html) and the product selection
 * (accounts/product_picker.html). The rules recolour the shared header,
 * banners, footer and the Tailwind colour classes those pages use; the
 * committed Tailwind build is left as it is.
 */
:root[data-color-scheme="dark"] {
    color-scheme: dark;

    --dk-page: #0f1517;
    --dk-surface: #172023;
    --dk-raised: #1e292c;
    --dk-line: #2b3a3e;
    --dk-line-strong: #3a4b50;
    --dk-text: #eef2f3;
    --dk-text-2: #c6cfd1;
    --dk-text-3: #9aa7aa;
    --dk-text-4: #75858a;
    --dk-brand-text: #5fd3c4;

    /* brand.css reads these: the header links, dropdowns and inputs follow. */
    --color-neutral-900: #f4f7f7;
    --color-neutral-800: #dfe5e6;
    --color-neutral-700: #c6cfd1;
    --color-neutral-600: #a8b3b6;
    --color-neutral-500: #8b989b;
    --color-neutral-400: #6f7c80;
    --color-neutral-300: #3a4b50;
    --color-neutral-200: #2b3a3e;
    --color-neutral-100: #1e292c;
    --color-neutral-50: #0f1517;
    --color-primary-50: #12302f;
    --color-primary-100: #17403e;
    --color-primary-200: #1f5a58;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

:root[data-color-scheme="dark"] body { background: var(--dk-page); color: var(--dk-text-2); }
:root[data-color-scheme="dark"] .nav-brand { background: var(--dk-surface); border-bottom-color: var(--dk-line); }
:root[data-color-scheme="dark"] .app-logo { content: url("../img/tvarka-logo-dark-closer.b7a474af8483.svg"); }
:root[data-color-scheme="dark"] .profile-dropdown,
:root[data-color-scheme="dark"] .help-drawer,
:root[data-color-scheme="dark"] .brand-card,
:root[data-color-scheme="dark"] .action-card,
:root[data-color-scheme="dark"] .tv-lang-panel { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-color-scheme="dark"] .tv-lang > summary:hover { background: var(--dk-raised); color: var(--dk-text); }
:root[data-color-scheme="dark"] input,
:root[data-color-scheme="dark"] select,
:root[data-color-scheme="dark"] textarea,
:root[data-color-scheme="dark"] .input-brand,
:root[data-color-scheme="dark"] input:focus,
:root[data-color-scheme="dark"] select:focus,
:root[data-color-scheme="dark"] textarea:focus { background-color: var(--dk-raised); color: var(--dk-text); }

/* Surfaces */
:root[data-color-scheme="dark"] .bg-white,
:root[data-color-scheme="dark"] .focus\:bg-white:focus { background-color: var(--dk-surface); }
:root[data-color-scheme="dark"] .bg-gray-50,
:root[data-color-scheme="dark"] .bg-gray-50\/50 { background-color: var(--dk-page); }
:root[data-color-scheme="dark"] .bg-gray-100,
:root[data-color-scheme="dark"] .hover\:bg-gray-50:hover { background-color: var(--dk-raised); }
:root[data-color-scheme="dark"] .hover\:bg-gray-100:hover,
:root[data-color-scheme="dark"] .hover\:bg-gray-200:hover { background-color: var(--dk-line); }

/* Text */
:root[data-color-scheme="dark"] .text-gray-900 { color: var(--dk-text); }
:root[data-color-scheme="dark"] .text-gray-800,
:root[data-color-scheme="dark"] .text-gray-700,
:root[data-color-scheme="dark"] .hover\:text-gray-800:hover,
:root[data-color-scheme="dark"] .hover\:text-gray-700:hover { color: var(--dk-text-2); }
:root[data-color-scheme="dark"] .text-gray-600,
:root[data-color-scheme="dark"] .text-gray-500,
:root[data-color-scheme="dark"] .hover\:text-gray-600:hover,
:root[data-color-scheme="dark"] .hover\:text-gray-500:hover { color: var(--dk-text-3); }
:root[data-color-scheme="dark"] .text-gray-400,
:root[data-color-scheme="dark"] .text-gray-300 { color: var(--dk-text-4); }

/* Lines */
:root[data-color-scheme="dark"] .border-gray-100,
:root[data-color-scheme="dark"] .border-gray-200 { border-color: var(--dk-line); }
:root[data-color-scheme="dark"] .border-gray-300,
:root[data-color-scheme="dark"] .hover\:border-gray-300:hover { border-color: var(--dk-line-strong); }
:root[data-color-scheme="dark"] .ring-black\/5 { --tw-ring-color: rgba(255, 255, 255, 0.08); }

/* Brand tints */
:root[data-color-scheme="dark"] .bg-brand-50,
:root[data-color-scheme="dark"] .bg-brand-50\/60,
:root[data-color-scheme="dark"] .hover\:bg-brand-50:hover { background-color: #12302f; }
:root[data-color-scheme="dark"] .bg-brand-100,
:root[data-color-scheme="dark"] .hover\:bg-brand-100:hover { background-color: #17403e; }
:root[data-color-scheme="dark"] .border-brand-200,
:root[data-color-scheme="dark"] .hover\:border-brand-200:hover { border-color: #1f5a58; }
:root[data-color-scheme="dark"] .ring-brand-200 { --tw-ring-color: #1f5a58; }
:root[data-color-scheme="dark"] .text-brand-800,
:root[data-color-scheme="dark"] .text-brand-700,
:root[data-color-scheme="dark"] .text-brand-600,
:root[data-color-scheme="dark"] .hover\:text-brand-800:hover,
:root[data-color-scheme="dark"] .hover\:text-brand-700:hover,
:root[data-color-scheme="dark"] .hover\:text-brand-600:hover { color: var(--dk-brand-text); }
:root[data-color-scheme="dark"] .text-brand-500,
:root[data-color-scheme="dark"] .text-brand-400,
:root[data-color-scheme="dark"] .group:hover .group-hover\:text-brand-500 { color: #3dbdad; }

/* Status tints */
:root[data-color-scheme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18); }
:root[data-color-scheme="dark"] .text-blue-700 { color: #93c5fd; }
:root[data-color-scheme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); }
:root[data-color-scheme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18); }
:root[data-color-scheme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.35); }
:root[data-color-scheme="dark"] .text-amber-700,
:root[data-color-scheme="dark"] .text-amber-800,
:root[data-color-scheme="dark"] .hover\:text-amber-800:hover,
:root[data-color-scheme="dark"] .hover\:text-amber-700:hover { color: #fcd34d; }
:root[data-color-scheme="dark"] .bg-red-50,
:root[data-color-scheme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.1); }
:root[data-color-scheme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.18); }
:root[data-color-scheme="dark"] .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }
:root[data-color-scheme="dark"] .text-red-600,
:root[data-color-scheme="dark"] .text-red-700,
:root[data-color-scheme="dark"] .text-red-800,
:root[data-color-scheme="dark"] .hover\:text-red-700:hover { color: #fca5a5; }
:root[data-color-scheme="dark"] .bg-green-100,
:root[data-color-scheme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.18); }
:root[data-color-scheme="dark"] .text-green-700,
:root[data-color-scheme="dark"] .text-emerald-700 { color: #86efac; }