/**
 * DoughPoint2 - Dark Mode
 * Feature: dashboard-redesign
 *
 * Remaps all CSS custom properties when html.dark is present.
 * Single source of truth for dark palette. html.dark has higher
 * specificity than :root for all tokens.
 *
 * Loaded after all other stylesheets in base.html.
 */

html.dark {
    /* ── Neutral / structural ───────────────────────────────────────── */
    --color-canvas:         #1a1714;
    --color-surface:        #211e1b;
    --color-light:          #2a2522;
    --color-light-hover:    #332e2a;
    --color-dark:           #f0ede9;
    --color-dark-secondary: #e0d9d3;
    --color-muted:          #9e958e;

    /* ── Borders ────────────────────────────────────────────────────── */
    --color-border:       rgba(255, 240, 220, 0.12);
    --color-border-dark:  rgba(255, 240, 220, 0.20);

    /* ── Brand ──────────────────────────────────────────────────────── */
    --color-brand-text:   #f0ede9;

    /* ── Primary (blue) — brightened for contrast on dark bg ─────── */
    --color-primary:         #4da3ff;
    --color-primary-dark:    #3385d6;
    --color-primary-light:   #6ab8ff;
    --color-primary-lighter: #0d2340;

    /* ── Semantic: success ──────────────────────────────────────────── */
    --color-success:      #34d058;
    --color-success-bg:   #0a2e14;
    --color-success-text: #6ee38a;

    /* ── Semantic: danger ───────────────────────────────────────────── */
    --color-danger:       #f87171;
    --color-danger-bg:    #2c0d0f;
    --color-danger-text:  #fca5a5;

    /* ── Semantic: warning ──────────────────────────────────────────── */
    --color-warning:      #fbbf24;
    --color-warning-bg:   #2d1f04;
    --color-warning-text: #fcd34d;

    /* ── Semantic: info ─────────────────────────────────────────────── */
    --color-info:         #38bdf8;
    --color-info-bg:      #062d3a;
    --color-info-text:    #7dd3fc;

    /* ── Dashboard accent colors — brightened for dark bg visibility ── */
    --color-accent-plum: #8b7aa0;

    /* ── Badge colors ───────────────────────────────────────────────── */
    --color-badge-active:      #6ee38a;
    --color-badge-active-bg:   #0a2e14;
    --color-badge-pending:     #fcd34d;
    --color-badge-pending-bg:  #2d1f04;
    --color-badge-expired:     #fca5a5;
    --color-badge-expired-bg:  #2c0d0f;

    /* ── Shadows — more opaque on dark surfaces ─────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow:    0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.55);
}

/* ── Donut gauge bg ring ───────────────────────────────────────────── */
html.dark .donut-gauge circle:first-child {
    stroke: var(--color-light);
}

/* ── Sidebar header: intentionally dark, keep near-black in dark mode ── */
html.dark .sidebar-tw__header {
    background-color: #0f0d0c;
    border-bottom-color: rgba(255, 240, 220, 0.10);
}

html.dark .sidebar-tw__brand-text {
    color: #f0ede9;
}

/* ── Form inputs: override white bg to surface in dark mode ──────────── */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark .form-input-tw {
    background-color: var(--color-surface);
    color: var(--color-dark);
}

/* ── Flatpickr readonly input ────────────────────────────────────────── */
html.dark input[readonly].flatpickr-input {
    background: var(--color-surface);
    color: var(--color-dark);
}

/* ── Flatpickr weekday headers — boost contrast on dark bg ───────────── */
html.dark .flatpickr-weekday {
    color: var(--color-dark-secondary);
}

/* ── Flatpickr selected day text stays white ─────────────────────────── */
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.startRange,
html.dark .flatpickr-day.endRange {
    color: #ffffff;
}

html.dark .flatpickr-day.inRange:hover {
    color: #ffffff;
}

/* ── Flatpickr preset sidebar ────────────────────────────────────────── */
html.dark .fp-preset-sidebar {
    background: var(--color-light);
}

html.dark .fp-preset-btn--active {
    color: #ffffff;
}

/* ── Popovers and tooltips: use lighter surface in dark mode ─────────── */
html.dark .popover {
    background-color: var(--color-light);
    color: var(--color-dark);
}

html.dark .popover::before {
    border-bottom-color: var(--color-light);
}

html.dark .sidebar-tw__tooltip {
    background-color: var(--color-light);
    color: var(--color-dark);
}

html.dark .sidebar-tw__tooltip::before {
    border-right-color: var(--color-light);
}

/* ── Modal overlay ───────────────────────────────────────────────────── */
html.dark .modal__overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

html.dark .modal__content {
    background-color: var(--color-surface);
}

/* ── Notification adjustments ────────────────────────────────────────── */
html.dark .notification--success { border-left-color: var(--color-success); }
html.dark .notification--error   { border-left-color: var(--color-danger); }
html.dark .notification--warning { border-left-color: var(--color-warning); }
html.dark .notification--info    { border-left-color: var(--color-info); }

/* ── Mobile nav ──────────────────────────────────────────────────────── */
html.dark .site-header {
    background-color: var(--color-surface);
    border-bottom-color: var(--color-border);
}

html.dark .nav-drawer {
    background-color: var(--color-surface);
}

html.dark .nav-drawer__header {
    border-bottom-color: var(--color-border);
}

/* ── Tailwind semantic color overrides (hardcoded in templates) ─────── */
/* Amber (warning) */
html.dark .bg-amber-50  { background-color: var(--color-warning-bg); }
html.dark .border-amber-200 { border-color: rgba(251, 191, 36, 0.25); }
html.dark .text-amber-600 { color: var(--color-warning); }
html.dark .text-amber-700 { color: var(--color-warning-text); }
html.dark .text-amber-800 { color: var(--color-warning-text); }

/* Blue (info) */
html.dark .bg-blue-50   { background-color: var(--color-info-bg); }
html.dark .bg-blue-100  { background-color: rgba(56, 189, 248, 0.12); }
html.dark .border-blue-200 { border-color: rgba(56, 189, 248, 0.20); }
html.dark .border-blue-300 { border-color: rgba(56, 189, 248, 0.30); }
html.dark .text-blue-600 { color: var(--color-info); }
html.dark .text-blue-700 { color: var(--color-info-text); }
html.dark .text-blue-800 { color: var(--color-info-text); }

/* Red (danger) */
html.dark .bg-red-50    { background-color: var(--color-danger-bg); }
html.dark .bg-red-100   { background-color: rgba(248, 113, 113, 0.12); }
html.dark .border-red-200 { border-color: rgba(248, 113, 113, 0.25); }
html.dark .border-red-300 { border-color: rgba(248, 113, 113, 0.30); }
html.dark .text-red-400  { color: #fca5a5; }
html.dark .text-red-600  { color: var(--color-danger); }
html.dark .text-red-700  { color: var(--color-danger-text); }
html.dark .text-red-800  { color: var(--color-danger-text); }

/* Green (success) */
html.dark .bg-green-50   { background-color: var(--color-success-bg); }
html.dark .bg-green-100  { background-color: rgba(52, 208, 88, 0.12); }
html.dark .border-green-200 { border-color: rgba(52, 208, 88, 0.20); }
html.dark .border-green-300 { border-color: rgba(52, 208, 88, 0.30); }
html.dark .text-green-500 { color: var(--color-success); }
html.dark .text-green-600 { color: var(--color-success); }
html.dark .text-green-700 { color: var(--color-success-text); }
html.dark .text-green-800 { color: var(--color-success-text); }

/* ── Sensor cards: swap white bg to surface, boost sparkline contrast ── */
html.dark .sensor-card {
    background-color: var(--color-surface);
}

html.dark .sensor-card--high {
    background: linear-gradient(to bottom, rgba(248, 113, 113, 0.12), transparent);
}

html.dark .sensor-card--low {
    background: linear-gradient(to bottom, rgba(56, 189, 248, 0.12), transparent);
}

html.dark .battery-indicator__icon {
    background-color: var(--color-light);
}

html.dark .sensor-card__link:hover {
    background-color: rgba(77, 163, 255, 0.10);
}

/* Sparkline: brighten stroke & text for dark surfaces */
html.dark .sparkline polyline {
    stroke: var(--color-muted);
}

html.dark .sparkline circle[fill="#7a716a"] {
    fill: var(--color-muted);
}

html.dark .sparkline text {
    fill: var(--color-muted);
}

/* Sensor detail page */
html.dark .report-chart {
    background-color: var(--color-surface);
}

html.dark .readings-pagination__btn {
    background-color: var(--color-surface);
}

html.dark .readings-table__row--high {
    background-color: rgba(248, 113, 113, 0.10);
}

html.dark .readings-table__row--high:hover {
    background-color: rgba(248, 113, 113, 0.18);
}

html.dark .readings-table__row--low {
    background-color: rgba(56, 189, 248, 0.10);
}

html.dark .readings-table__row--low:hover {
    background-color: rgba(56, 189, 248, 0.18);
}

/* ── Role modals: override hardcoded light-mode colors in HTMX fragments ── */
html.dark .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

html.dark .modal {
    background: var(--color-surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

html.dark .modal-header {
    border-bottom-color: var(--color-border);
}

html.dark .modal-header h2 {
    color: var(--color-dark);
}

html.dark .btn-close {
    color: var(--color-muted);
}

html.dark .btn-close:hover {
    background: var(--color-light);
    color: var(--color-dark);
}

html.dark .role-summary {
    background: var(--color-light);
}

html.dark .users-section h3 {
    color: var(--color-dark);
}

html.dark .empty-state--compact {
    background: var(--color-light);
}

html.dark .empty-state--compact svg {
    color: var(--color-muted);
}

html.dark .badge--light {
    background: var(--color-light);
    color: var(--color-dark-secondary);
}

html.dark .detail-group label {
    color: var(--color-muted);
}

html.dark .detail-value {
    color: var(--color-dark);
}

html.dark .form-group > label {
    color: var(--color-dark-secondary);
}

html.dark .form-help {
    color: var(--color-muted);
}

html.dark .form-group input[type="text"],
html.dark .form-group textarea {
    background-color: var(--color-light);
    border-color: var(--color-border-dark);
    color: var(--color-dark);
}

html.dark .form-group input[type="text"]:focus,
html.dark .form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

html.dark .permission-group {
    border-color: var(--color-border);
}

html.dark .permission-group legend {
    color: var(--color-dark-secondary);
}

html.dark .checkbox-label:hover {
    background: var(--color-light);
}

html.dark .form-actions {
    border-top-color: var(--color-border);
}

html.dark .data-table--compact th {
    color: var(--color-dark-secondary);
}

html.dark .data-table--compact td {
    border-bottom-color: var(--color-border);
}

html.dark .link {
    color: var(--color-primary);
}

/* Role modal alerts (hardcoded in inline styles) */
html.dark .modal .alert--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: rgba(251, 191, 36, 0.25);
}

html.dark .modal .alert--info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: rgba(56, 189, 248, 0.20);
}

html.dark .modal .pagination {
    border-top-color: var(--color-border);
}

/* ── Tenant pages: detail-card, form-card, and inline form styles ───── */
html.dark .detail-card,
html.dark .form-card {
    background: var(--color-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

html.dark .section,
html.dark .form-section {
    border-bottom-color: var(--color-border);
}

html.dark .section h2,
html.dark .form-section h2 {
    color: var(--color-dark);
}

html.dark .detail-label {
    color: var(--color-muted);
}

html.dark .detail-value {
    color: var(--color-dark);
}

html.dark .detail-value.empty {
    color: var(--color-muted);
}

html.dark .detail-value a {
    color: var(--color-primary);
}

html.dark .status-badge.active {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

html.dark .status-badge.deleted {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

html.dark .metadata {
    background-color: var(--color-light);
}

/* Tenant delete confirmation modal */
html.dark .modal-content {
    background-color: var(--color-surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

html.dark .modal-content h3 {
    color: var(--color-dark);
}

html.dark .modal-content p {
    color: var(--color-muted);
}

html.dark .modal-actions {
    border-top-color: var(--color-border);
}

/* Tenant form inputs (select, email, tel, etc. not covered by role modal rules) */
html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea {
    background-color: var(--color-light);
    border-color: var(--color-border-dark);
    color: var(--color-dark);
}

html.dark .form-group input:focus,
html.dark .form-group select:focus,
html.dark .form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

html.dark .form-group input::placeholder {
    color: var(--color-muted);
}

html.dark .form-group label {
    color: var(--color-dark-secondary);
}

html.dark .help-text {
    color: var(--color-muted);
}

/* Tenant edit page banners */
html.dark .info-banner {
    background: var(--color-info-bg);
    border-color: rgba(56, 189, 248, 0.20);
    color: var(--color-info-text);
}

html.dark .error-message {
    background: var(--color-danger-bg);
    border-color: rgba(248, 113, 113, 0.25);
    color: var(--color-danger-text);
}

html.dark .conflict-message {
    background: var(--color-warning-bg);
    border-color: rgba(251, 191, 36, 0.25);
    color: var(--color-warning-text);
}

/* ── Tailwind bg-white override: surface color in dark mode ────────── */
/* Safe global override — bg-white is only used for surface/card backgrounds.
   Text-on-buttons uses text-white (color: #fff), which is unaffected. */
html.dark .bg-white {
    background-color: var(--color-surface);
}

/* ── Tailwind gray utility overrides ───────────────────────────────── */
/* Safe global overrides — these grays appear in cards, toggles, pills,
   form displays, progress bars, borders, and text throughout templates.
   Maps to existing dark-mode design tokens for consistency. */
html.dark .bg-gray-50  { background-color: var(--color-light); }
html.dark .bg-gray-100 { background-color: var(--color-light); }
html.dark .bg-gray-200 { background-color: var(--color-light-hover); }

html.dark .border-gray-100 { border-color: var(--color-border); }
html.dark .border-gray-200 { border-color: var(--color-border); }
html.dark .border-gray-300 { border-color: var(--color-border-dark); }

html.dark .text-gray-300 { color: var(--color-border-dark); }
html.dark .text-gray-400 { color: var(--color-muted); }
html.dark .text-gray-500 { color: var(--color-muted); }
html.dark .text-gray-600 { color: var(--color-dark-secondary); }
html.dark .text-gray-700 { color: var(--color-dark-secondary); }
html.dark .text-gray-800 { color: var(--color-dark); }
html.dark .text-gray-900 { color: var(--color-dark); }

/* ── Mapping modal: form inputs using .input class (no CSS definition) ── */
html.dark .input {
    background-color: var(--color-light);
    border: 1px solid var(--color-border-dark);
    color: var(--color-dark);
}

html.dark .input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

/* ── Smooth transition on toggle ─────────────────────────────────────── */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        transition: none;
    }
}