/*
 * Flat Black & White Theme Override
 * Enforces a flat design, no gradients, no shadows, and restricted color palette.
 */

:root {
    /* --- COLOR OVERRIDES (Grayscale) --- */
    
    /* Primary Colors -> Black/Dark Gray */
    --color-primary-50: #f5f5f5;
    --color-primary-100: #e5e5e5;
    --color-primary-200: #d4d4d4;
    --color-primary-300: #a3a3a3;
    --color-primary-400: #737373;
    --color-primary-500: #000000; /* Main actions -> Black */
    --color-primary-600: #171717;
    --color-primary-700: #262626;
    --color-primary-800: #404040;

    /* Secondary Colors -> Medium Gray */
    --color-secondary-50: #fafafa;
    --color-secondary-100: #f4f4f5;
    --color-secondary-200: #e4e4e7;
    --color-secondary-300: #d4d4d8;
    --color-secondary-400: #a1a1aa;
    --color-secondary-500: #71717a;
    --color-secondary-600: #52525b;

    /* Success -> Dark Gray/Black (with icon distinction) */
    --color-success-50: #f0fdf4; /* Very light gray/white in this theme context usually, but keeping slight tint for difference if needed, or strictly B&W */
    --color-success-50: #ffffff;
    --color-success-100: #f5f5f5;
    --color-success-500: #000000; /* Success actions -> Black */
    --color-success-600: #1a1a1a;
    
    /* Danger -> Dark Gray/Black (often distinguished by border or icon) */
    --color-danger-50: #ffffff;
    --color-danger-100: #f5f5f5;
    --color-danger-500: #000000;
    --color-danger-600: #1a1a1a;

    /* Warning -> Gray */
    --color-warning-50: #ffffff;
    --color-warning-500: #404040;
    --color-warning-600: #262626;

    /* Info -> Gray */
    --color-info-50: #ffffff;
    --color-info-500: #52525b;

    /* Orange overrides -> Gray */
    --color-orange-50: #ffffff;
    --color-orange-100: #f5f5f5;
    --color-orange-500: #262626;
    
    /* Purple overrides -> Gray */
    --color-purple-50: #ffffff;
    --color-purple-500: #171717;

    /* --- SHADOW REMOVAL --- */
    --drop-shadow-xl: none;
    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-inner: none;
}

/* --- GLOBAL STYLE RESTRICTIONS --- */

/* Remove all shadows */
*, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Remove background gradients */
[class*="bg-gradient-"],
.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-tr,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-tl {
    background-image: none !important;
    background-color: #ffffff; /* Default fallback */
}

/* Force solid colors for specific elements usually having gradients */
.btn, button, .badge {
    background-image: none !important;
}

/* --- COMPONENT OVERRIDES --- */

/* Cards - Simple Border, No Shadow */
.trezo-card, .card {
    border: 1px solid #e5e5e5 !important;
    background-color: #ffffff !important;
}
.dark .trezo-card, .dark .card {
    background-color: #000000 !important;
    border: 1px solid #333333 !important;
}

/* Buttons - Flat Black/White */
button.bg-primary-500, .bg-primary-500 {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}
button.bg-primary-500:hover, .bg-primary-500:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Dark mode button overrides */
.dark button.bg-primary-500, .dark .bg-primary-500 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
}
.dark button.bg-primary-500:hover, .dark .bg-primary-500:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Inputs - Square or minimal radius, black border */
input, select, textarea {
    border: 1px solid #d4d4d4 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
}
.dark input, .dark select, .dark textarea {
    background-color: #000000 !important;
    border: 1px solid #525252 !important;
    color: #ffffff !important;
}
input:focus, select:focus, textarea:focus {
    border-color: #000000 !important;
    outline: none !important;
}

/* Force grayscale on images to match the theme */
img {
    filter: grayscale(100%) !important;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: #ffffff !important;
}

/* Sidebar & Header */
.sidebar-area, .header-area {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
.dark .sidebar-area, .dark .header-area {
    background-color: #000000 !important;
    border-right: 1px solid #333333 !important;
    border-bottom: 1px solid #333333 !important;
}

/* Table Stripes removal/simplification */
tr:nth-child(even) {
    background-color: transparent !important;
}
th {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
}
.dark th {
    background-color: #171717 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
}
td {
    border-bottom: 1px solid #e5e5e5 !important;
}
.dark td {
    border-bottom: 1px solid #333333 !important;
}

/* Text Colors */
.text-primary-500 { color: #000000 !important; }
.dark .text-primary-500 { color: #ffffff !important; }

.text-gray-500 { color: #525252 !important; }
.dark .text-gray-500 { color: #a3a3a3 !important; }

/* Status Badges */
.bg-success-50 {
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
}
.text-success-500, .text-success-600 {
    color: #000000 !important;
}

.dark .bg-success-50 {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
.dark .text-success-500, .dark .text-success-600 {
    color: #ffffff !important;
}

/* Icons background circles (Dashboard stats) */
[class*="bg-primary-50"], [class*="dark:bg-primary-500/10"] {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}
.dark [class*="bg-primary-50"], .dark [class*="dark:bg-primary-500/10"] {
    background-color: #262626 !important;
    color: #ffffff !important;
}

[class*="bg-success-50"], [class*="dark:bg-success-500/10"] {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}
.dark [class*="bg-success-50"], .dark [class*="dark:bg-success-500/10"] {
    background-color: #262626 !important;
    color: #ffffff !important;
}

[class*="bg-orange-50"], [class*="dark:bg-orange-500/10"] {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}
.dark [class*="bg-orange-50"], .dark [class*="dark:bg-orange-500/10"] {
    background-color: #262626 !important;
    color: #ffffff !important;
}

/* Charts (Attempt to affect ApexCharts via CSS if possible, though mostly JS) */
.apexcharts-tooltip {
    background: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
}
.dark .apexcharts-tooltip {
    background: #000 !important;
    border-color: #fff !important;
}

/* Backgrounds */
body, .main-content {
    background-color: #ffffff !important;
}
.dark body, .dark .main-content {
    background-color: #000000 !important; /* Extremely dark/black background */
}