/* ===== UNIFIED DARK MODE — deep teal base, orange/copper accents ===== */

html.dark {
    color-scheme: dark;
}

/* Base page — deep, moody teal */
html.dark body {
    background: linear-gradient(135deg, #0a1f1c 0%, #0f2b26 100%) !important;
    color: #ffffff !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0) !important;
    background-size: 28px 28px !important;
}

/* ---- Cards: a lighter teal, clearly standing out from the page behind them ---- */
html.dark .glass-card,
html.dark .premium-card,
html.dark .settings-card,
html.dark .stat-box,
html.dark .message-card,
html.dark .category-card {
    background: #163b34 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

html.dark .premium-card:hover,
html.dark .settings-card:hover,
html.dark .message-card:hover,
html.dark .category-card:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

/* ---- Headings stay white ---- */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

html.dark .elegant-heading-accent {
    background: #e0925f !important;
}

html.dark .elegant-divider span {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.dark .elegant-divider::before,
html.dark .elegant-divider::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
}

html.dark nav a::after {
    background: #e0925f !important;
}

html.dark .elegant-input:focus {
    border-color: #e0925f !important;
    box-shadow: 0 0 0 4px rgba(224, 146, 95, 0.15) !important;
}

/* ---- Bottom mobile nav ---- */
html.dark nav {
    background: rgba(10, 31, 28, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Inputs ---- */
html.dark .elegant-input,
html.dark input,
html.dark textarea,
html.dark select {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- Force every hardcoded text colour used across the app to plain white ---- */
html.dark [class*="text-[#1c1c19]"],
html.dark [class*="text-[#1c1c19]"]:hover,
html.dark [class*="text-[#737970]"],
html.dark [class*="text-[#737970]"]:hover,
html.dark [class*="text-[#07290c]"],
html.dark [class*="text-[#07290c]"]:hover,
html.dark [class*="text-[#faf9f7]"],
html.dark [class*="text-[#1e3f20]"],
html.dark [class*="text-[#aad1a5]"],
html.dark [class*="text-[#e5e2dd]"],
html.dark p, html.dark span, html.dark label, html.dark a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark a:hover {
    text-decoration: underline !important;
}

/* ---- Buttons: orange/copper fill, dark text ---- */
html.dark [class*="bg-[#07290c]"],
html.dark .premium-btn {
    background: #e0925f !important;
    border: none !important;
    box-shadow: none !important;
    color: #0a1f1c !important;
}

html.dark [class*="bg-[#07290c]"] *,
html.dark .premium-btn * {
    color: #0a1f1c !important;
    -webkit-text-fill-color: #0a1f1c !important;
}

/* Small tinted icon backgrounds get a gentler treatment than solid buttons */
html.dark [class*="bg-[#07290c]/5"],
html.dark [class*="bg-[#07290c]/10"],
html.dark [class*="bg-[#07290c]/20"] {
    background: rgba(224, 146, 95, 0.18) !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark [class*="bg-[#07290c]/5"] *,
html.dark [class*="bg-[#07290c]/10"] *,
html.dark [class*="bg-[#07290c]/20"] * {
    color: #e0925f !important;
    -webkit-text-fill-color: #e0925f !important;
}

/* ---- Avatar circles ---- */
html.dark .avatar-circle {
    background: #163b34 !important;
    color: #ffffff !important;
}

/* ---- Force hardcoded light backgrounds to the same deep teal ---- */
html.dark [class*="bg-white "],
html.dark [class*="bg-white/5"],
html.dark [class*="bg-white/50"],
html.dark [class*="bg-white/70"],
html.dark [class*="bg-white/80"],
html.dark [class*="bg-white/85"],
html.dark [class*="bg-white/90"] {
    background-color: rgba(10, 31, 28, 0.92) !important;
}

/* ---- Borders ---- */
html.dark [class*="border-[#e5e2dd]"] {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---- Icons: orange/copper, the hero accent ---- */
html.dark .material-symbols-outlined {
    color: #e0925f !important;
}

/* ---- Fix Safari/Chrome's yellow autofill background clashing with our text colours ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1c1c19 !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.95) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.1) inset !important;
}

/* ============================================================
   TOP HEADER — same deep teal as the page, so it blends in with
   no visible edge, and the logo stays clearly visible against it.

   ⚠️ IMPORTANT: the logo itself has its OWN white patch behind it,
   set directly in each HTML file (a wrapping <span> around the
   <img> tag). This is intentional and permanent — don't remove it,
   even if a future theme colour seems safe. The logo contains teal,
   copper, AND near-black elements, so no single background colour
   can ever guarantee contrast against all of them. The white patch
   is what makes the logo visibility survive any future colour change.
   ============================================================ */
html.dark header,
html.dark header[class*="bg-white"] {
    background: rgba(10, 31, 28, 0.92) !important;
    background-color: rgba(10, 31, 28, 0.92) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html.dark header a,
html.dark header a:hover,
html.dark header span,
html.dark header p,
html.dark header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark header .material-symbols-outlined {
    color: #e0925f !important;
}

html.dark header a[class*="premium-btn"],
html.dark header a[class*="premium-btn"] span {
    color: #0a1f1c !important;
    -webkit-text-fill-color: #0a1f1c !important;
}