/*
 * dark.css — Night Mode Overrides for CRM20evBB
 *
 * Palette: "Ash" — neutral graphite scale sampled from the supplied Discord screenshots.
 *   Canvas:        #2C2D32
 *   Surface:       #323339
 *   Surface raised:#36373E
 *   Hover/input:   #414248 / #393A3F
 *   Teal primary:  #034F46  (fathom)
 *   Teal light:    #006858
 *   Teal bright:   #32D3D8  (links, CTA)
 *   Lavender:      #F0D7FF  (dawn)
 *   Lavender bright:#F8B0F0
 *   Primary text:  #F2F3F5
 *   Secondary text:#B5BAC1
 *   Muted text:    #949BA4
 *
 * Strategy: CSS selector overrides using `html.dark` prefix.
 * Specificity (0,2,1) beats Tailwind's single-class (0,1,0),
 * so these rules always win without !important.
 *
 * Activated by: document.documentElement.classList.add('dark')
 * Toggled by:   toggleDarkMode() in navigation.js
 * Persisted in: localStorage key 'crm-dark' = '1' | '0'
*/

html.dark {
    --ash-bg-root: #2C2D32;
    --ash-bg-surface: #323339;
    --ash-bg-raised: #36373E;
    --ash-bg-input: #393A3F;
    --ash-bg-hover: #414248;
    --ash-border: #414248;
    --ash-text-primary: #F2F3F5;
    --ash-text-secondary: #B5BAC1;
    --ash-text-muted: #949BA4;
    --ash-text-disabled: #7D7E87;
    --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   Theme transition (smooth switch, no flash)
   ═══════════════════════════════════════════════════════════ */
html.dark body,
html.dark nav,
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200 {
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════
   Page / Body
   ═══════════════════════════════════════════════════════════ */
html.dark body {
    background-color: var(--ash-bg-root);
    color: var(--ash-text-primary);
    font-family: var(--font-ui);
}

html.dark button,
html.dark input,
html.dark select,
html.dark textarea {
    font-family: var(--font-ui);
}

html.dark body.bg-gray-50,
html.dark body.bg-gray-100 {
    background-color: var(--ash-bg-root);
}

/* ═══════════════════════════════════════════════════════════
   Background Colors
   ═══════════════════════════════════════════════════════════ */

/* Cards, panels, nav bar, table bodies, modals */
html.dark .bg-white {
    background-color: var(--ash-bg-surface);
}

/* Table headers, modal footers, filter bars, section panels */
html.dark .bg-gray-50 {
    background-color: var(--ash-bg-raised);
}

/* Minor backgrounds, hover base */
html.dark .bg-gray-100 {
    background-color: var(--ash-bg-input);
}

/* Button backgrounds (Cancel, secondary) */
html.dark .bg-gray-200 {
    background-color: var(--ash-bg-hover);
}

html.dark .bg-gray-300 {
    background-color: #4E5058;
}

/* Colored row tints (balance table rows by currency) */
html.dark .bg-blue-50   { background-color: rgba(3, 79, 70, 0.20); }
html.dark .bg-amber-50  { background-color: rgba(217, 119,  6, 0.15); }
html.dark .bg-indigo-50 { background-color: rgba(240, 215, 255, 0.10); }
html.dark .bg-red-50    { background-color: rgba(239,  68,  68, 0.12); }
html.dark .bg-green-50  { background-color: rgba(3, 79, 70, 0.15); }

/* Skeleton loading pulse bars */
html.dark .bg-gray-200.rounded { background-color: var(--ash-bg-input); }

/* ═══════════════════════════════════════════════════════════
   Text Colors
   ═══════════════════════════════════════════════════════════ */
html.dark .text-gray-900 { color: var(--ash-text-primary); }
html.dark .text-gray-800 { color: #E6E6E9; }
html.dark .text-gray-700 { color: #DBDEE1; }
html.dark .text-gray-600 { color: #C6C8CD; }
html.dark .text-gray-500 { color: var(--ash-text-secondary); }
html.dark .text-gray-400 { color: var(--ash-text-muted); }
html.dark .text-gray-300 { color: var(--ash-text-disabled); }

/* Text links / actions → lavender (dawn) — interactive text elements */
html.dark .text-indigo-700 { color: #F0D7FF; }
html.dark .text-indigo-600 { color: #F0D7FF; }
html.dark .text-blue-600   { color: #F0D7FF; }
html.dark .text-blue-800   { color: #F0D7FF; }

/* Orange (pending request label) */
html.dark .text-orange-600 { color: #fb923c; }

/* ═══════════════════════════════════════════════════════════
   Accent Colors — Teal Primary
   ═══════════════════════════════════════════════════════════ */

/* Primary buttons (blue → teal) */
html.dark .bg-blue-600 {
    background-color: #034F46;
}
html.dark .bg-blue-700 {
    background-color: #006858;
}

/* Indigo buttons → teal */
html.dark .bg-indigo-600 {
    background-color: #034F46;
}
html.dark .bg-indigo-700 {
    background-color: #006858;
}

/* Indigo/blue borders → teal */
html.dark .border-indigo-600 { border-color: #034F46; }
html.dark .border-indigo-500 { border-color: #006858; }
html.dark .border-blue-600   { border-color: #034F46; }
html.dark .border-blue-500   { border-color: #006858; }

/* Focus borders & rings → teal */
html.dark .focus\:border-indigo-500:focus,
html.dark .focus\:border-blue-500:focus {
    border-color: #32D3D8;
}
html.dark .focus\:ring-blue-500:focus,
html.dark .focus\:ring-indigo-500:focus {
    --tw-ring-color: rgba(50, 211, 216, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   Accent Colors — Lavender
   ═══════════════════════════════════════════════════════════ */

/* Lavender for selected/active states */
html.dark .ring-indigo-200 { --tw-ring-color: rgba(240, 215, 255, 0.4); }

/* ═══════════════════════════════════════════════════════════
   Border Colors
   ═══════════════════════════════════════════════════════════ */
html.dark .border-gray-100 { border-color: #393A3F; }
html.dark .border-gray-200 { border-color: #3E3F45; }
html.dark .border-gray-300 { border-color: var(--ash-border); }

/* Table / list dividers */
html.dark .divide-y > * + *,
html.dark .divide-gray-200 > * + * {
    border-color: #3E3F45;
}

/* ═══════════════════════════════════════════════════════════
   Hover States
   ═══════════════════════════════════════════════════════════ */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover { background-color: var(--ash-bg-hover); }
html.dark .hover\:bg-gray-300:hover { background-color: #4E5058; }
html.dark .hover\:bg-red-50:hover   { background-color: rgba(239, 68, 68, 0.15); }

/* Gray button active/disabled states */
html.dark .bg-gray-400 { background-color: var(--ash-bg-input); }
html.dark .bg-gray-700 { background-color: #034F46; }

/* Colored buttons: lighten on hover */
html.dark .hover\:bg-gray-700:hover   { background-color: var(--ash-bg-hover); }
html.dark .hover\:bg-gray-800:hover   { background-color: var(--ash-bg-hover); }
html.dark .hover\:bg-indigo-700:hover { background-color: #006858; }
html.dark .hover\:bg-green-700:hover  { background-color: #22c55e; }
html.dark .hover\:bg-red-700:hover    { background-color: #ef4444; }
html.dark .hover\:bg-blue-700:hover   { background-color: #006858; }

html.dark .hover\:text-gray-700:hover { color: #DBDEE1; }
html.dark .hover\:text-gray-800:hover { color: #E6E6E9; }
html.dark .hover\:text-gray-900:hover { color: var(--ash-text-primary); }

/* Link hover — brighter lavender */
html.dark .hover\:text-blue-800:hover  { color: #FFFFFF; }
html.dark .hover\:text-indigo-800:hover { color: #FFFFFF; }

html.dark .hover\:border-gray-300:hover { border-color: var(--ash-border); }

/* ═══════════════════════════════════════════════════════════
   Form Inputs & Selects
   ═══════════════════════════════════════════════════════════ */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html.dark select,
html.dark textarea {
    background-color: var(--ash-bg-input);
    border-color: var(--ash-border);
    color: var(--ash-text-primary);
    font-family: var(--font-ui);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--ash-text-muted);
}

/* Highlighted edit inputs (balance update / correction forms) */
html.dark input.bg-white {
    background-color: var(--ash-bg-hover) !important;
    border-color: #4E5058 !important;
}

html.dark select option {
    background-color: var(--ash-bg-input);
    color: var(--ash-text-primary);
}

/* ═══════════════════════════════════════════════════════════
   Status / Type Badge Pills
   ═══════════════════════════════════════════════════════════ */

/* PENDING / CRITICAL / MAJOR — yellow */
html.dark .bg-yellow-100 { background-color: rgba(161, 98, 7, 0.25); }
html.dark .text-yellow-800 { color: #fcd34d; }

/* APPROVED — teal-tinted */
html.dark .bg-blue-100 { background-color: rgba(3, 79, 70, 0.30); }
html.dark .text-blue-800 { color: #32D3D8; }

/* COMPLETED / ACTIVE / DEPOSIT / MINOR — green */
html.dark .bg-green-100 { background-color: rgba(22, 163, 74, 0.22); }
html.dark .text-green-800 { color: #86efac; }

/* DECLINED / INACTIVE / WITHDRAWAL / BLOCKER — red */
html.dark .bg-red-100 { background-color: rgba(220, 38, 38, 0.22); }
html.dark .text-red-800 { color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════
   Red Buttons & Elements — softer on dark
   ═══════════════════════════════════════════════════════════ */

/* Red — keep standard Tailwind values, no override */

/* ═══════════════════════════════════════════════════════════
   Orange Status — BLOCKED / processing / pending actions
   ═══════════════════════════════════════════════════════════ */

html.dark .bg-orange-100 { background-color: rgba(240, 215, 255, 0.15); }
html.dark .text-orange-500 { color: #F0D7FF; }
html.dark .text-orange-800 { color: #F0D7FF; }
html.dark .hover\:text-orange-900:hover { color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════
   Green text — positive values, success
   ═══════════════════════════════════════════════════════════ */

html.dark .bg-green-500 { background-color: #166534; }
html.dark .bg-green-600 { background-color: #166534; }
html.dark .hover\:bg-green-600:hover { background-color: #15803D; }
html.dark .text-green-600 { color: #86EFAC; }
html.dark .text-green-700 { color: #86EFAC; }
html.dark .text-green-400 { color: #4ADE80; }

/* Green borders */
html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.25); }
html.dark .border-green-300 { border-color: rgba(34, 197, 94, 0.35); }
html.dark .border-green-500 { border-color: #22C55E; }

/* ═══════════════════════════════════════════════════════════
   Purple badges
   ═══════════════════════════════════════════════════════════ */

html.dark .bg-purple-100 { background-color: rgba(240, 215, 255, 0.15); }
html.dark .text-purple-800 { color: #F0D7FF; }
html.dark .border-purple-300 { border-color: rgba(240, 215, 255, 0.35); }

/* ═══════════════════════════════════════════════════════════
   Blue badges (indigo-100 already covered above)
   ═══════════════════════════════════════════════════════════ */

html.dark .bg-blue-500 { background-color: #034F46; }
html.dark .bg-indigo-500 { background-color: #034F46; }
html.dark .bg-indigo-100 { background-color: rgba(240, 215, 255, 0.12); }
html.dark .text-indigo-500 { color: #F0D7FF; }
html.dark .text-indigo-800 { color: #F0D7FF; }
html.dark .text-blue-400 { color: #32D3D8; }
html.dark .text-blue-700 { color: #F0D7FF; }

/* ═══════════════════════════════════════════════════════════
   Yellow (warning alerts, PENDING badges)
   ═══════════════════════════════════════════════════════════ */

html.dark .bg-yellow-50 { background-color: rgba(161, 98, 7, 0.15); }
html.dark .bg-yellow-500 { background-color: #92400E; }
html.dark .border-yellow-300 { border-color: rgba(245, 158, 11, 0.35); }
html.dark .border-yellow-400 { border-color: rgba(245, 158, 11, 0.5); }
html.dark .border-yellow-500 { border-color: #F59E0B; }

/* ═══════════════════════════════════════════════════════════
   Misc hover/states not yet covered
   ═══════════════════════════════════════════════════════════ */

html.dark .hover\:bg-blue-100:hover { background-color: rgba(3, 79, 70, 0.25); }
html.dark .hover\:bg-green-600:hover { background-color: #15803D; }
html.dark .hover\:bg-white:hover { background-color: var(--ash-bg-hover); }
html.dark .hover\:text-gray-500:hover { color: var(--ash-text-secondary); }
html.dark .hover\:text-indigo-600:hover { color: #F0D7FF; }
html.dark .hover\:text-indigo-900:hover { color: #FFFFFF; }
html.dark .hover\:border-indigo-400:hover { border-color: #F0D7FF; }
html.dark .text-white { color: var(--ash-text-primary); }
html.dark .ring-black { --tw-ring-color: rgba(255, 255, 235, 0.1); }
html.dark .divide-gray-50 > * + * { border-color: #393A3F; }
html.dark .border-blue-200 { border-color: rgba(3, 79, 70, 0.3); }
html.dark .border-blue-300 { border-color: rgba(3, 79, 70, 0.5); }
html.dark .border-gray-400 { border-color: #4E5058; }

/* ═══════════════════════════════════════════════════════════
   Navigation bar — teal brand
   ═══════════════════════════════════════════════════════════ */
html.dark nav {
    background-color: var(--ash-bg-root) !important;
    border-bottom: 1px solid var(--ash-border);
}

html.dark nav .bg-indigo-600,
html.dark nav .bg-blue-600 {
    background-color: #034F46;
}

/* ═══════════════════════════════════════════════════════════
   Shadows (teal-tinted glow on dark backgrounds)
   ═══════════════════════════════════════════════════════════ */
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    --tw-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.60);
    box-shadow: var(--tw-shadow, 0 2px 8px 0 rgba(0, 0, 0, 0.60));
}

html.dark .shadow-sm {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    box-shadow: var(--tw-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.50));
}

/* ═══════════════════════════════════════════════════════════
   Custom Tab Classes (transactions.html <style> block)
   ═══════════════════════════════════════════════════════════ */
html.dark .tab-active  { color: var(--ash-text-primary); border-color: #32D3D8; }
html.dark .tab-inactive { color: var(--ash-text-secondary); }
html.dark .tab-inactive:hover { color: var(--ash-text-primary); border-color: var(--ash-border); }

/* ═══════════════════════════════════════════════════════════
   Floating Dark Mode Toggle Button
   ═══════════════════════════════════════════════════════════ */
#crm-dark-float {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.14);
    cursor: pointer;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
    padding: 0;
}

#crm-dark-float:hover {
    background: rgba(0, 0, 0, 0.15);
}

html.dark #crm-dark-float {
    background: rgba(3, 79, 70, 0.25);
    border-color: rgba(50, 211, 216, 0.30);
}

html.dark #crm-dark-float:hover {
    background: rgba(3, 79, 70, 0.40);
}

/* Dark toggle button inside the nav bar */
.crm-dark-btn {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border: none;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   Scrollbar (WebKit) — subtle teal tint
   ═══════════════════════════════════════════════════════════ */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.dark ::-webkit-scrollbar-track {
    background: var(--ash-bg-root);
}
html.dark ::-webkit-scrollbar-thumb {
    background: var(--ash-bg-hover);
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #034F46;
}