/*
 * SHARED DARK MODE (2026-10-20)
 *
 * One stylesheet any page can link to get a real dark mode, instead of every page re-declaring its own palette.
 * It is driven by the `dark-mode` class on <html> (set by shared/dark-mode-head.php from the saved `reap-theme`, and flipped by
 * the sidebar's Appearance switch via shared/sidebar-theme.php). Nothing happens without that class.
 *
 * What it covers, so a page does not have to:
 *   1. the --rf-* tokens that shared/reap-native.css (.rn-*) is built on,
 *   2. the Tailwind utility classes the older pages are written in (bg-white, text-gray-900, border-gray-200, ...),
 *   3. form controls,
 *   4. inline style="background:#fff" / style="color:#111827" colours, which older pages use heavily.
 * Anything still unusual on a page stays that page's job: add a small `.dark-mode .thing { ... }` rule next to it.
 *
 * Palette (neutral black, matches the sidebar and header): page #000000, card #1c1c1e, raised/input #2c2c2e, border #38383a,
 * text #f2f2f7, secondary #d1d1d6, muted #a1a1aa, accent #2dd4bf. (Changed from slate navy #0f172a on 2026-10-20.)
 */

/* ---------- 1. tokens + page ---------- */
html.dark-mode, html.dark-mode body {
    --rf-bg: #000000; --rf-bg-card: #1c1c1e; --rf-bg-input: #2c2c2e;
    --rf-text: #f2f2f7; --rf-text-dim: #a1a1aa; --rf-text-muted: #8e8e93; --rf-border: #38383a;
    --rf-sub: #a1a1aa; --rf-muted: #8e8e93; --rf-card: #1c1c1e;
    /* REAP Fit icon circles: the light-mode tints (8-12% alpha) vanish on black, so use stronger tints and bright accent icons */
    --rf-bg-card-alt: #2c2c2e;
    --rf-teal-dim: rgba(45,212,191,.18); --rf-teal-glow: rgba(45,212,191,.30);
    --rf-green-glow: rgba(74,222,128,.18); --rf-amber-glow: rgba(251,191,36,.18);
    --rf-red-glow: rgba(248,113,113,.18); --rf-purple-glow: rgba(167,139,250,.20);
    --rf-teal-ic: #2dd4bf; --rf-green-ic: #4ade80; --rf-amber-ic: #fbbf24; --rf-red-ic: #f87171; --rf-purple-ic: #a78bfa; --rf-muted-ic: #a1a1aa;
    color-scheme: dark;
}
html.dark-mode body, html.dark-mode body.bg-gray-50, html.dark-mode body.bg-gray-100, html.dark-mode body.bg-gray-200, html.dark-mode body.bg-white { background-color: #000000 !important; color: #f2f2f7; }
/* a page that paints its own inline body background must still land on pure black, not the card grey the inline-colour remap gives it */
html.dark-mode body[style*="background"] { background: #000000 !important; }

/* ---------- 2. Tailwind utilities ---------- */
html.dark-mode .bg-white { background-color: #1c1c1e !important; }
html.dark-mode .bg-gray-50 { background-color: #111113 !important; }
html.dark-mode .bg-gray-100 { background-color: #2c2c2e !important; }
html.dark-mode .bg-gray-200 { background-color: #38383a !important; }
html.dark-mode .bg-gray-300 { background-color: #48484a !important; }
html.dark-mode .hover\:bg-gray-50:hover, html.dark-mode .hover\:bg-gray-100:hover { background-color: #2c2c2e !important; }

html.dark-mode .text-gray-900, html.dark-mode .text-gray-800, html.dark-mode .text-black { color: #f2f2f7 !important; }
html.dark-mode .text-gray-700 { color: #e5e5ea !important; }
html.dark-mode .text-gray-600 { color: #d1d1d6 !important; }
html.dark-mode .text-gray-500, html.dark-mode .text-gray-400 { color: #a1a1aa !important; }
html.dark-mode .text-gray-300 { color: #8e8e93 !important; }

html.dark-mode .border-gray-100, html.dark-mode .border-gray-200, html.dark-mode .border-gray-300 { border-color: #38383a !important; }
html.dark-mode .divide-gray-100 > * + *, html.dark-mode .divide-gray-200 > * + * { border-color: #38383a !important; }
html.dark-mode .shadow-sm, html.dark-mode .shadow, html.dark-mode .shadow-md, html.dark-mode .shadow-lg { box-shadow: 0 1px 3px rgba(0,0,0,.45) !important; }

/* tinted callouts: dark tinted surface, light readable text */
html.dark-mode .bg-teal-50, html.dark-mode .bg-teal-100 { background-color: rgba(45,212,191,.14) !important; }
html.dark-mode .bg-green-50, html.dark-mode .bg-green-100 { background-color: rgba(74,222,128,.14) !important; }
html.dark-mode .bg-blue-50, html.dark-mode .bg-blue-100 { background-color: rgba(96,165,250,.14) !important; }
html.dark-mode .bg-amber-50, html.dark-mode .bg-yellow-50, html.dark-mode .bg-yellow-100, html.dark-mode .bg-amber-100 { background-color: rgba(251,191,36,.14) !important; }
html.dark-mode .bg-red-50, html.dark-mode .bg-red-100 { background-color: rgba(248,113,113,.14) !important; }
html.dark-mode .bg-purple-50, html.dark-mode .bg-purple-100 { background-color: rgba(192,132,252,.14) !important; }
html.dark-mode .text-teal-600, html.dark-mode .text-teal-700, html.dark-mode .text-teal-800 { color: #2dd4bf !important; }
html.dark-mode .text-green-600, html.dark-mode .text-green-700, html.dark-mode .text-green-800, html.dark-mode .text-green-900 { color: #86efac !important; }
html.dark-mode .text-blue-600, html.dark-mode .text-blue-700, html.dark-mode .text-blue-800, html.dark-mode .text-blue-900 { color: #93c5fd !important; }
html.dark-mode .text-red-600, html.dark-mode .text-red-700, html.dark-mode .text-red-800 { color: #fca5a5 !important; }
html.dark-mode .text-amber-500, html.dark-mode .text-amber-600, html.dark-mode .text-amber-700, html.dark-mode .text-yellow-600, html.dark-mode .text-yellow-800 { color: #fcd34d !important; }
html.dark-mode .border-teal-200, html.dark-mode .border-green-200, html.dark-mode .border-blue-200, html.dark-mode .border-red-200, html.dark-mode .border-amber-200 { border-color: #38383a !important; }

/* ---------- 3. form controls ---------- */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
html.dark-mode select, html.dark-mode textarea {
    background-color: #2c2c2e; color: #f2f2f7; border-color: #38383a;
}
/* Inline title inputs (Mind Bank note title) are meant to sit flat in the header, no box */
html.dark-mode input.title-input { background-color: transparent; border-color: transparent; }
html.dark-mode input::placeholder, html.dark-mode textarea::placeholder { color: #8e8e93; }
html.dark-mode option { background: #1c1c1e; color: #f2f2f7; }
html.dark-mode hr { border-color: #38383a; }

/* ---------- 4. inline colours (older pages set these in style="...") ---------- */
html.dark-mode [style*="background: #fff"], html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #ffffff"], html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: white"], html.dark-mode [style*="background:white"],
html.dark-mode [style*="background-color: #fff"], html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: white"], html.dark-mode [style*="background-color:white"] { background: #1c1c1e !important; }
html.dark-mode [style*="background: #f8fafc"], html.dark-mode [style*="background:#f8fafc"],
html.dark-mode [style*="background: #f9fafb"], html.dark-mode [style*="background:#f9fafb"],
html.dark-mode [style*="background: #fafafa"], html.dark-mode [style*="background:#fafafa"],
html.dark-mode [style*="background: #f1f5f9"], html.dark-mode [style*="background:#f1f5f9"],
html.dark-mode [style*="background: #f3f4f6"], html.dark-mode [style*="background:#f3f4f6"],
html.dark-mode [style*="background: #eef1f4"], html.dark-mode [style*="background:#eef1f4"],
html.dark-mode [style*="background: #f0fdfa"], html.dark-mode [style*="background:#f0fdfa"] { background: #2c2c2e !important; }
/* The browser rewrites a style attribute as rgb() the moment script touches any other inline property, so the hex selectors
   above stop matching. Mirror them in rgb form so a re-serialised element stays dark. */
html.dark-mode [style*="background: rgb(255, 255, 255)"], html.dark-mode [style*="background-color: rgb(255, 255, 255)"] { background: #1c1c1e !important; }
html.dark-mode [style*="background: rgb(248, 250, 252)"], html.dark-mode [style*="background-color: rgb(248, 250, 252)"],
html.dark-mode [style*="background: rgb(249, 250, 251)"], html.dark-mode [style*="background-color: rgb(249, 250, 251)"],
html.dark-mode [style*="background: rgb(250, 250, 250)"], html.dark-mode [style*="background-color: rgb(250, 250, 250)"],
html.dark-mode [style*="background: rgb(241, 245, 249)"], html.dark-mode [style*="background-color: rgb(241, 245, 249)"],
html.dark-mode [style*="background: rgb(243, 244, 246)"], html.dark-mode [style*="background-color: rgb(243, 244, 246)"],
html.dark-mode [style*="background: rgb(240, 253, 250)"], html.dark-mode [style*="background-color: rgb(240, 253, 250)"] { background: #2c2c2e !important; }
html.dark-mode [style*="color: rgb(17, 24, 39)"], html.dark-mode [style*="color: rgb(31, 41, 55)"],
html.dark-mode [style*="color: rgb(15, 23, 42)"] { color: #f2f2f7 !important; }
html.dark-mode [style*="color: rgb(55, 65, 81)"], html.dark-mode [style*="color: rgb(71, 85, 105)"] { color: #d1d1d6 !important; }
html.dark-mode [style*="color: #111827"], html.dark-mode [style*="color:#111827"],
html.dark-mode [style*="color: #0f1720"], html.dark-mode [style*="color:#0f1720"],
html.dark-mode [style*="color: #0f172a"], html.dark-mode [style*="color:#0f172a"],
html.dark-mode [style*="color: #1e293b"], html.dark-mode [style*="color:#1e293b"],
html.dark-mode [style*="color: #1f2937"], html.dark-mode [style*="color:#1f2937"] { color: #f2f2f7 !important; }
html.dark-mode [style*="color: #334155"], html.dark-mode [style*="color:#334155"],
html.dark-mode [style*="color: #374151"], html.dark-mode [style*="color:#374151"],
html.dark-mode [style*="color: #475569"], html.dark-mode [style*="color:#475569"] { color: #d1d1d6 !important; }
html.dark-mode [style*="color: #64748b"], html.dark-mode [style*="color:#64748b"],
html.dark-mode [style*="color: #6b7280"], html.dark-mode [style*="color:#6b7280"],
html.dark-mode [style*="color: #9ca3af"], html.dark-mode [style*="color:#9ca3af"],
html.dark-mode [style*="color: #94a3b8"], html.dark-mode [style*="color:#94a3b8"] { color: #a1a1aa !important; }
html.dark-mode [style*="border: 1px solid #e"], html.dark-mode [style*="border:1px solid #e"],
html.dark-mode [style*="border-color: #e"], html.dark-mode [style*="border-bottom: 1px solid #e"], html.dark-mode [style*="border-top: 1px solid #e"] { border-color: #38383a !important; }

/* ---------- 5. pastel tints typed inline (icon tiles, chips, badges): keep the hue, drop the glare ---------- */
html.dark-mode [style*="background: #ccfbf1"], html.dark-mode [style*="background:#ccfbf1"], html.dark-mode [style*="background: #ecfeff"], html.dark-mode [style*="background:#ecfeff"],
html.dark-mode [style*="background: #cffafe"], html.dark-mode [style*="background:#cffafe"], html.dark-mode [style*="background: #f0fdfa"], html.dark-mode [style*="background:#f0fdfa"] { background: rgba(45,212,191,.16) !important; }
html.dark-mode [style*="background: #d1fae5"], html.dark-mode [style*="background:#d1fae5"], html.dark-mode [style*="background: #dcfce7"], html.dark-mode [style*="background:#dcfce7"],
html.dark-mode [style*="background: #ecfdf5"], html.dark-mode [style*="background:#ecfdf5"], html.dark-mode [style*="background: #f0fdf4"], html.dark-mode [style*="background:#f0fdf4"] { background: rgba(74,222,128,.16) !important; }
html.dark-mode [style*="background: #dbeafe"], html.dark-mode [style*="background:#dbeafe"], html.dark-mode [style*="background: #eff6ff"], html.dark-mode [style*="background:#eff6ff"],
html.dark-mode [style*="background: #e0f2fe"], html.dark-mode [style*="background:#e0f2fe"], html.dark-mode [style*="background: #f0f9ff"], html.dark-mode [style*="background:#f0f9ff"] { background: rgba(96,165,250,.16) !important; }
html.dark-mode [style*="background: #ede9fe"], html.dark-mode [style*="background:#ede9fe"], html.dark-mode [style*="background: #f5f3ff"], html.dark-mode [style*="background:#f5f3ff"],
html.dark-mode [style*="background: #e0e7ff"], html.dark-mode [style*="background:#e0e7ff"], html.dark-mode [style*="background: #eef2ff"], html.dark-mode [style*="background:#eef2ff"] { background: rgba(167,139,250,.16) !important; }
html.dark-mode [style*="background: #fef3c7"], html.dark-mode [style*="background:#fef3c7"], html.dark-mode [style*="background: #fefce8"], html.dark-mode [style*="background:#fefce8"],
html.dark-mode [style*="background: #fff7ed"], html.dark-mode [style*="background:#fff7ed"], html.dark-mode [style*="background: #ffedd5"], html.dark-mode [style*="background:#ffedd5"] { background: rgba(251,191,36,.16) !important; }
html.dark-mode [style*="background: #fee2e2"], html.dark-mode [style*="background:#fee2e2"], html.dark-mode [style*="background: #fef2f2"], html.dark-mode [style*="background:#fef2f2"] { background: rgba(248,113,113,.16) !important; }
html.dark-mode [style*="background: #fce7f3"], html.dark-mode [style*="background:#fce7f3"], html.dark-mode [style*="background: #fdf2f8"], html.dark-mode [style*="background:#fdf2f8"] { background: rgba(244,114,182,.16) !important; }

/* ---------- 6. pressed / hover states that are hard-coded near-white in a page's own CSS ----------
   The shared script recolours resting surfaces but not :active / :hover rules, so these flashed white on tap. */
html.dark-mode .cm-pin-bar:active, html.dark-mode .cm-pin-x:active, html.dark-mode .cm-proj-card:active,
html.dark-mode .cm-lp-em:active, html.dark-mode .cm-lp-act:active, html.dark-mode .cm-tray-grid .cm-tray-em:active,
html.dark-mode .fd-pick:active, html.dark-mode .mention-tile:hover, html.dark-mode .mention-tile:active,
html.dark-mode .partner-item:active, html.dark-mode .rf-appbar-action:active, html.dark-mode .rf-row-item:active,
html.dark-mode .rf-list-item:active, html.dark-mode .rf-btn-ghost:active, html.dark-mode .rf-routine-card:active { background: #2c2c2e !important; }

/* ---------- 7. SVG progress-ring tracks (2026-10-21) ----------
   The shared script skips <svg>, so a ring's pale "empty" track stayed near-white on black (workouts index weekly ring and the
   3 for 30 card). Recolour the usual light track strokes; the coloured progress arc is untouched. */
html.dark-mode svg [stroke="#e6f7f4"], html.dark-mode svg [stroke="#e5e7eb"], html.dark-mode svg [stroke="#e2e8f0"],
html.dark-mode svg [stroke="#f1f5f9"], html.dark-mode svg [stroke="#f3f4f6"], html.dark-mode svg [stroke="#e0e0e0"],
html.dark-mode svg [stroke="#eee"], html.dark-mode svg [stroke="#eeeeee"], html.dark-mode .rf-progress-ring .ring-bg { stroke: #38383a !important; }

/* ---------- 8. Tailwind warm-tone text the sweep found unreadable on black (2026-10-21) ---------- */
html.dark-mode .text-yellow-900, html.dark-mode .text-yellow-700, html.dark-mode .text-amber-800, html.dark-mode .text-amber-900,
html.dark-mode .text-orange-700, html.dark-mode .text-orange-800 { color: #fcd34d !important; }

/* ---------- 10. Dim teal section labels (2026-10-21) ----------
   Small uppercase labels ("ACTIVITY FEED", "SUBTASKS", "DESCRIPTION") are written as dark teal at 35-60% opacity. On black that is
   almost invisible. Same hue, brighter, still quieter than body text. (Elements that set their own background are left alone.) */
html.dark-mode [style*="color:rgba(13,148,136,"]:not([style*="background"]),
html.dark-mode [style*="color: rgba(13, 148, 136,"]:not([style*="background"]),
html.dark-mode .feed-label { color: rgba(94,234,212,.82) !important; }