@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Design System Colors - Reference Dashboard Theme */
        --color-surface: #ffffff;
        --color-surface-muted: #f8f9fa;
        --color-surface-hover: #f1f3f5;
        --color-sidebar: #1e3a5f;
        --color-sidebar-hover: rgba(255, 255, 255, 0.08);
        --color-sidebar-active: #fcbeff;
        --color-border: #e5e7eb;
        --color-border-light: #f1f3f5;
        --color-border-muted: #f3f4f6;
        --color-text-primary: #111418;
        --color-text-secondary: #617589;
        --color-text-muted: #9ca3af;
    }
    
    /* Global paragraph font-weight */
    p {
        font-weight: 500;
    }
}

@layer components {
    /* Admin dashboard KPI stat cards — force readable light theme (beats stray global color rules) */
    .dashboard-kpi-card {
        background-color: #ffffff !important;
        color: #0f172a !important;
    }

    .dashboard-kpi-card .kpi-metric-label {
        color: #475569 !important;
    }

    .dashboard-kpi-card .kpi-metric-value {
        color: #020617 !important;
    }

    .dashboard-kpi-card .kpi-metric-hint {
        color: #475569 !important;
    }

    .admin-dashboard-kpi-card .kpi-metric-label {
        color: #475569 !important;
    }

    .admin-dashboard-kpi-card .kpi-metric-value {
        color: #020617 !important;
    }

    .admin-dashboard-kpi-card .kpi-metric-hint {
        color: #64748b !important;
    }

    /* New admin KPI grid — backup surface */
    .admin-dashboard-kpi-card {
        background-color: #ffffff !important;
    }
}

@layer base {
    /* Global Input Text Color Fix - Force ALL inputs to have black text (except in dark mode) */
    /* Override ALL text colors including text-white, text-gray, etc. to ensure black text */
    
    /* All input types - force black text (override white text classes) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    input[type="file"],
    input[type="color"],
    input[type="range"],
    textarea,
    select {
        color: rgba(0, 0, 0, 1) !important; /* Force black text for all inputs */
    }
    
    /* Override white text classes specifically */
    input[type="text"][class*="text-white"],
    input[type="email"][class*="text-white"],
    input[type="password"][class*="text-white"],
    input[type="number"][class*="text-white"],
    input[type="tel"][class*="text-white"],
    input[type="url"][class*="text-white"],
    input[type="search"][class*="text-white"],
    input[type="date"][class*="text-white"],
    input[type="datetime-local"][class*="text-white"],
    input[type="time"][class*="text-white"],
    input[type="month"][class*="text-white"],
    input[type="week"][class*="text-white"],
    textarea[class*="text-white"],
    select[class*="text-white"] {
        color: rgba(0, 0, 0, 1) !important; /* Override white text to black */
    }
    
    /* Ensure inputs with white/light backgrounds have black text */
    input[type="text"][class*="bg-white"],
    input[type="text"][class*="bg-gray-50"],
    input[type="text"][class*="bg-slate-50"],
    input[type="text"][class*="bg-gray-100"],
    input[type="email"][class*="bg-white"],
    input[type="email"][class*="bg-gray-50"],
    input[type="email"][class*="bg-slate-50"],
    input[type="email"][class*="bg-gray-100"],
    input[type="password"][class*="bg-white"],
    input[type="password"][class*="bg-gray-50"],
    input[type="password"][class*="bg-slate-50"],
    input[type="password"][class*="bg-gray-100"],
    input[type="number"][class*="bg-white"],
    input[type="number"][class*="bg-gray-50"],
    input[type="number"][class*="bg-slate-50"],
    input[type="number"][class*="bg-gray-100"],
    textarea[class*="bg-white"],
    textarea[class*="bg-gray-50"],
    textarea[class*="bg-slate-50"],
    textarea[class*="bg-gray-100"],
    select[class*="bg-white"],
    select[class*="bg-gray-50"],
    select[class*="bg-slate-50"],
    select[class*="bg-gray-100"] {
        color: rgba(0, 0, 0, 1) !important;
    }
    
    /* Override inline styles that might set white text */
    input[style*="color"],
    textarea[style*="color"],
    select[style*="color"] {
        color: rgba(0, 0, 0, 1) !important; /* Force black even if inline style says white */
    }
    
    /* Dark mode support - preserve white text in dark mode */
    .dark input[type="text"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="email"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="password"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="number"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="tel"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="url"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="search"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="date"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="datetime-local"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="time"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="month"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark input[type="week"]:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark textarea:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]),
    .dark select:not([class*="text-"]):not([class*="text-white"]):not([class*="text-gray-"]):not([class*="text-slate-"]):not([class*="text-black"]) {
        color: #ffffff !important; /* Light text for dark backgrounds */
    }
    
    .dark input[type="text"][class*="bg-slate-800"],
    .dark input[type="text"][class*="bg-gray-800"],
    .dark input[type="email"][class*="bg-slate-800"],
    .dark input[type="email"][class*="bg-gray-800"],
    .dark input[type="password"][class*="bg-slate-800"],
    .dark input[type="password"][class*="bg-gray-800"],
    .dark textarea[class*="bg-slate-800"],
    .dark textarea[class*="bg-gray-800"],
    .dark select[class*="bg-slate-800"],
    .dark select[class*="bg-gray-800"] {
        color: #ffffff !important;
    }
    
    /* Placeholder text visibility - ensure placeholders are visible */
    input::placeholder,
    textarea::placeholder {
        color: #9ca3af !important; /* Visible but lighter than actual text */
        opacity: 1 !important;
    }
    
    /* Don't override placeholder color if explicitly set via Tailwind */
    input[class*="placeholder:text-"]::placeholder,
    textarea[class*="placeholder:text-"]::placeholder {
        opacity: 1 !important; /* Ensure opacity even if color is set */
    }
    
    .dark input::placeholder,
    .dark textarea::placeholder {
        color: #6b7280 !important; /* Lighter placeholder for dark mode */
        opacity: 1 !important;
    }
    
    /* Form control classes - ensure they have readable text */
    .form-control:not([class*="text-"]):not([class*="text-white"]),
    .form-input:not([class*="text-"]):not([class*="text-white"]) {
        color: #111827 !important;
    }
    
    .dark .form-control:not([class*="text-"]):not([class*="text-white"]),
    .dark .form-input:not([class*="text-"]):not([class*="text-white"]) {
        color: #ffffff !important;
    }
}

/*
 * Page-scoped overrides — keep OUTSIDE @layer components.
 * Element + utility-class chains (e.g. a.text-sm.text-primary) inside @layer components are
 * incorrectly variant-expanded by Tailwind, producing invalid CSS and esbuild minify warnings.
 */
div.flex.flex-col.mb-6 {
    padding-top: unset;
    padding-bottom: unset;
    background-clip: unset;
    -webkit-background-clip: unset;
}

a.text-sm.text-primary {
    color: rgba(219, 219, 215, 1) !important;
}

span.material-symbols-outlined.text-xl {
    font-size: 23px !important;
}

h1.text-3xl.font-bold.tracking-tight.text-text-primary {
    color: rgba(0, 0, 0, 1) !important;
}

p.text-text-secondary {
    color: rgba(0, 0, 0, 1) !important;
}

button.flex.items-center.gap-2.rounded-lg.border.border-border.bg-surface.px-3.py-2.text-sm.font-medium.text-text-secondary {
    border-color: rgba(222, 222, 222, 1) !important;
    background-color: rgba(22, 163, 74, 1) !important;
}

th.w-64.px-6.py-4.font-semibold {
    color: rgba(5, 5, 5, 1) !important;
}

th.w-32.px-6.py-4.font-semibold {
    color: rgba(0, 0, 0, 1) !important;
}

button.flex.h-9.w-9.items-center.justify-center.rounded-lg.border.border-border.bg-surface.text-text-muted {
    border-color: rgba(222, 222, 222, 1) !important;
    background-color: rgba(22, 163, 74, 1) !important;
}

table.w-full.min-w-\[800px\] tbody tr td.px-6.py-4 {
    color: rgba(0, 0, 0, 1) !important;
}