/* 
    Antiddos Dashboard - CSS Variables & Theming 
    Defines semantic colors for Light (Default) and Dark modes.
*/

:root {
    /* --- Light Mode (Default) --- */

    /* Backgrounds */
    --bg-body: #f0f2f5;
    /* Main page background */
    --bg-card: #ffffff;
    /* Widget/Card background */
    --bg-header: #ffffff;
    /* Navbar background */
    --bg-sidebar: #0e1726;
    /* Sidebar background (Always dark in this theme) */
    --bg-input: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-table-header: #1b2e4b;
    /* Dark Navy for light mode headers */

    /* Text Colors */
    --text-main: #3b3f5c;
    /* Headings, Strong text */
    --text-body: #888ea8;
    /* General content text */
    --text-muted: #bfc9d4;
    /* Muted/Placeholder text */
    --text-on-dark: #e0e6ed;
    /* Text on dark backgrounds (sidebar) */

    /* Borders */
    --border-color: #e0e6ed;
    --border-light: #f1f2f3;

    /* Semantic Colors */
    --primary: #4361ee;
    --primary-dark: #3651d4;
    --success: #1abc9c;
    --warning: #e2a03f;
    --warning-dark: #d18a22;
    --danger: #e7515a;
    --danger-dark: #dc2626;
    --info: #2196f3;

    /* Shadows */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* RGB Helpers (for opacity) */
    --bg-card-rgb: 255, 255, 255;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-body: #060818;
    /* Deep dark blue/black */
    --bg-card: #0e1726;
    /* Slightly lighter dark for cards */
    --bg-header: #0e1726;
    --bg-sidebar: #0e1726;
    --bg-input: #1b2e4b;
    --bg-dropdown: #0e1726;
    --bg-table-header: #151f30;
    /* Slightly darker than card for dark mode */

    /* RGB Helpers (for opacity) */
    --bg-card-rgb: 14, 23, 38;

    /* Text Colors */
    --text-main: #e0e6ed;
    /* Light text for headings */
    --text-body: #bfc9d4;
    /* Light grey for body */
    --text-muted: #888ea8;
    --text-on-dark: #e0e6ed;

    /* Borders */
    --border-color: #1b2e4b;
    --border-light: #191e3a;

    /* Shadows - Adjusted for visibility on dark */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* Helper Class to test instantly */
body.dark-mode-test {
    background-color: var(--bg-body) !important;
    color: var(--text-body) !important;
}