@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

/* 
  Tailwind v4 Configuration via CSS.
  We explicitly define sources to ensure it finds the classes.
*/
@source "../../views/**/*.html.erb";
@source "../../views/**/*.erb";
@source "../../helpers/**/*.rb";
@source "../../javascript/**/*.js";
@source "../../assets/stylesheets/**/*.css";

/* 
  Define the Theme mapping.
  This tells Tailwind: "When I use 'bg-brand-green', use the value of 'var(--color-brand-green)'."
*/
/* 
  Manual Utility Definitions for Brand Colors.
  This ensures they work even if usage scanning or theme auto-gen fails.
*/
@layer utilities {
    .bg-brand-green {
        background-color: var(--color-brand-green);
    }

    .text-brand-green {
        color: var(--color-brand-green);
    }

    .border-brand-green {
        border-color: var(--color-brand-green);
    }

    .bg-brand-sidebar {
        background-color: var(--color-brand-sidebar);
    }

    .text-brand-sidebar {
        color: var(--color-brand-sidebar);
    }

    .hover\:bg-brand-sidebar:hover {
        background-color: var(--color-brand-sidebar);
    }

    .bg-brand-icon {
        background-color: var(--color-brand-icon);
    }

    .text-brand-icon {
        color: var(--color-brand-icon);
    }

    .bg-brand-bg {
        background-color: var(--color-brand-bg);
    }

    .text-brand-bg {
        color: var(--color-brand-bg);
    }

    .bg-brand-card {
        background-color: var(--color-brand-card);
    }

    .text-brand-card {
        color: var(--color-brand-card);
    }

    .bg-brand-metric1 {
        background-color: var(--color-brand-metric1);
    }

    .text-brand-metric1 {
        color: var(--color-brand-metric1);
    }

    .bg-brand-metric2 {
        background-color: var(--color-brand-metric2);
    }

    .text-brand-metric2 {
        color: var(--color-brand-metric2);
    }

    .hover\:bg-brand-metric2:hover {
        background-color: var(--color-brand-metric2);
    }

    .hover\:text-brand-metric2:hover {
        color: var(--color-brand-metric2);
    }

    .bg-brand-metric3 {
        background-color: var(--color-brand-metric3);
    }

    .text-brand-metric3 {
        color: var(--color-brand-metric3);
    }
}

/* 
  CSS Variables (The Values) 
*/
:root,
html {
    --color-brand-green: #1a3c34;
    --color-brand-sidebar: #0f2922;
    --color-brand-icon: #aebdb8;
    --color-brand-bg: #f5f0e6;
    --color-brand-card: #ffffff;
    --color-brand-metric1: #efe8d8;
    --color-brand-metric2: #c4a468;
    --color-brand-metric3: #7d8c56;
}

html[data-theme="ocean"] {
    --color-brand-green: #0c4a6e;
    --color-brand-sidebar: #082f49;
    --color-brand-icon: #bae6fd;
    --color-brand-bg: #f0f9ff;
    --color-brand-card: #ffffff;
    --color-brand-metric1: #e0f2fe;
    --color-brand-metric2: #7dd3fc;
    --color-brand-metric3: #38bdf8;
}

@layer utilities {
    /* ... existing references ... */
}

/* 
  Variable Definitions 
*/

html[data-theme="sunset"] {
    --color-brand-green: #ea580c;
    /* Orange 600 */
    --color-brand-sidebar: #431407;
    /* Orange 950 */
    --color-brand-icon: #fdba74;
    /* Orange 300 */
    --color-brand-bg: #fff7ed;
    /* Orange 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #ffedd5;
    /* Orange 100 */
    --color-brand-metric2: #ea580c;
    --color-brand-metric3: #c2410c;
}

html[data-theme="grape"] {
    --color-brand-green: #9333ea;
    /* Purple 600 */
    --color-brand-sidebar: #3b0764;
    /* Purple 950 */
    --color-brand-icon: #d8b4fe;
    /* Purple 300 */
    --color-brand-bg: #faf5ff;
    /* Purple 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #f3e8ff;
    /* Purple 100 */
    --color-brand-metric2: #9333ea;
    --color-brand-metric3: #7e22ce;
}

html[data-theme="minimal"] {
    --color-brand-green: #171717;
    /* Neutral 900 */
    --color-brand-sidebar: #171717;
    /* Neutral 900 */
    --color-brand-icon: #a3a3a3;
    /* Neutral 400 */
    --color-brand-bg: #ffffff;
    /* White */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #f5f5f5;
    /* Neutral 100 */
    --color-brand-metric2: #525252;
    /* Neutral 600 */
    --color-brand-metric3: #262626;
    /* Neutral 800 */
}


html[data-theme="midnight"] {
    --color-brand-green: #312e81;
    /* Indigo 900 */
    --color-brand-sidebar: #020617;
    /* Slate 950 */
    --color-brand-icon: #6366f1;
    /* Indigo 500 */
    --color-brand-bg: #0f172a;
    /* Slate 900 */
    --color-brand-card: #1e293b;
    /* Slate 800 */
    --color-brand-metric1: #334155;
    /* Slate 700 */
    --color-brand-metric2: #475569;
    /* Slate 600 */
    --color-brand-metric3: #64748b;
    /* Slate 500 */
}

html[data-theme="forest"] {
    --color-brand-green: #15803d;
    /* Green 700 */
    --color-brand-sidebar: #14532d;
    /* Green 900 */
    --color-brand-icon: #4ade80;
    /* Green 400 */
    --color-brand-bg: #f0fdf4;
    /* Green 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #dcfce7;
    /* Green 100 */
    --color-brand-metric2: #16a34a;
    /* Green 600 */
    --color-brand-metric3: #15803d;
    /* Green 700 */
}

html[data-theme="rose"] {
    --color-brand-green: #be123c;
    /* Rose 700 */
    --color-brand-sidebar: #881337;
    /* Rose 900 */
    --color-brand-icon: #fb7185;
    /* Rose 400 */
    --color-brand-bg: #fff1f2;
    /* Rose 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #ffe4e6;
    /* Rose 100 */
    --color-brand-metric2: #e11d48;
    /* Rose 600 */
    --color-brand-metric3: #be123c;
    /* Rose 700 */
}

html[data-theme="brown"] {
    --color-brand-green: #57534e;
    /* Stone 600 */
    --color-brand-sidebar: #292524;
    /* Stone 800 */
    --color-brand-icon: #a8a29e;
    /* Stone 400 */
    --color-brand-bg: #fafaf9;
    /* Stone 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #f5f5f4;
    /* Stone 100 */
    --color-brand-metric2: #78716c;
    /* Stone 500 */
    --color-brand-metric3: #44403c;
    /* Stone 700 */
}

html[data-theme="sky"] {
    --color-brand-green: #0ea5e9;
    /* Sky 500 */
    --color-brand-sidebar: #0c4a6e;
    /* Sky 900 */
    --color-brand-icon: #38bdf8;
    /* Sky 400 */
    --color-brand-bg: #f0f9ff;
    /* Sky 50 */
    --color-brand-card: #ffffff;
    --color-brand-metric1: #e0f2fe;
    /* Sky 100 */
    --color-brand-metric2: #0284c7;
    /* Sky 600 */
    --color-brand-metric3: #0369a1;
    /* Sky 700 */
}

html[data-theme="neon"] {
    --color-brand-green: #a3e635;
    /* Lime 400 */
    --color-brand-sidebar: #000000;
    /* Black */
    --color-brand-icon: #d9f99d;
    /* Lime 200 */
    --color-brand-bg: #111;
    /* Near Black */
    --color-brand-card: #000000;
    --color-brand-metric1: #1a1a1a;
    --color-brand-metric2: #84cc16;
    /* Lime 500 */
    --color-brand-metric3: #65a30d;
    /* Lime 600 */
}

html[data-theme="luxury"] {
    --color-brand-green: #d4af37;
    /* Gold */
    --color-brand-sidebar: #000000;
    /* Black */
    --color-brand-icon: #facc15;
    /* Yellow 400 */
    --color-brand-bg: #09090b;
    /* Zinc 950 */
    --color-brand-card: #18181b;
    /* Zinc 900 */
    --color-brand-metric1: #27272a;
    /* Zinc 800 */
    --color-brand-metric2: #a16207;
    /* Yellow 700 */
    --color-brand-metric3: #854d0e;
    /* Yellow 800 */
}

html[data-theme="synthwave"] {
    --color-brand-green: #d946ef;
    /* Fuchsia 500 */
    --color-brand-sidebar: #4a044e;
    /* Fuchsia 950 */
    --color-brand-icon: #22d3ee;
    /* Cyan 400 */
    --color-brand-bg: #2a0a2e;
    /* Deep Purple */
    --color-brand-card: #4c0519;
    /* Rose 950 variant */
    --color-brand-metric1: #701a75;
    /* Fuchsia 800 */
    --color-brand-metric2: #c026d3;
    /* Fuchsia 600 */
    --color-brand-metric3: #86198f;
    /* Fuchsia 700 */
}

/* ... existing themes ... */
@theme {
    /* This block logic was moved to manual utilities above, 
     but we can keep specific theme logic here if needed or remove it.
     Since we rely on :root variables driving manual utility classes, 
     we just ensure variables are set.
  */
}

@media print {

    /* Hide sidebar, top nav, and action buttons */
    aside,
    nav,
    .no-print,
    button,
    a[href^="/"],
    .fa-print {
        display: none !important;
    }

    /* Reset layout for print */
    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Show only the relevant content */
    #transactions-header,
    #transactions-list {
        display: block !important;
    }

    /* Ensure background colors print */
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: white !important;
    }

    /* Hide shadows for cleaner print */
    .shadow-sm,
    .shadow-md,
    .shadow-lg {
        box-shadow: none !important;
        border: 1px solid #eee !important;
    }
}