/* =====================================================
   THEME SYSTEM - CSS Custom Properties
   Shared variables for all custom admin styles
   ===================================================== */

/* Universal Layout Variables (theme-independent) */
:root {
    /* Table dimensions for scrolling calculation */
    --table-row-height: 3.3125rem;
    --table-header-height: 3.125rem;
    --table-visible-rows: 10;

    /* Sidebar dimensions */
    --sidebar-width: 21.875rem;

    --nav-tab-height: 4.0625rem;

    /* Header padding values */
    --header-padding-normal: 1.875rem;
    --header-padding-shrunk: 0.3125rem;

    /* Header margin bottom */
    --header-margin-bottom-normal: 1.875rem;
    --header-margin-bottom-shrunk: 0;

    /* Header gap (space between logo and text) */
    --header-gap-normal: 18.75rem;
    --header-gap-shrunk: 1.875rem;

    /* Header h1 font size */
    --header-h1-size-normal: 2.5rem;
    --header-h1-size-shrunk: 1.1rem;

    /* Header h1 margin bottom */
    --header-h1-margin-normal: 0.625rem;
    --header-h1-margin-shrunk: 0;

    /* Header p font size */
    --header-p-size-normal: 1.1rem;
    --header-p-size-shrunk: 0;

    /* Header logo width */
    --header-logo-width-normal: 12.5rem;
    --header-logo-width-shrunk: 3.125rem;

    /* Spacer compensation height (how much the spacer grows) */
    --header-spacer-max-height: 8.75rem;
}

/* Light Theme Variables */
html[data-theme='light'] {
    --primary-color: #3a8dde;
    --secondary-color: #1e3c72;

    /* Background colors */
    --body-bg-color: linear-gradient(135deg, #3a8dde 0%, #1e3c72 100%);
    --container-bg-color: rgba(255, 255, 255, 0.95);
    --header-bg-color: rgba(255, 255, 255, 1);
    --nav-tab-bg-color: #e8ecf1;
    --nav-tab-button-bg-color: #ffffff;
    --tab-content-bg-color: rgba(255, 255, 255, 0.95);

    /* Text colors */
    --text-primary-color: #333;
    --text-secondary-color: #666;
    --text-header-color: #2c3e50;
    --text-muted-color: #7f8c8d;

    /* Table colors (Light theme) */
    --table-bg-color: #ffffff;
    --table-row-alt-bg-color: #f9f9f9;
    --table-text-color: #333;
    --table-border-color: #eee;
    --table-hover-bg-color: rgba(58, 141, 222, 0.05);
    --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
    --table-header-text-color: white;
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --link-color: #0a84ff;
    --link-fg: #0a84ff; /* Override Django's link color variable */
    --link-hover-color: #0051d5;

    /* Form colors */
    --form-bg-color: #fff;
    --form-text-color: #333;
    --form-border-color: #e0e6ed;
    --form-focus-border-color: #3a8dde;
    --form-placeholder-color: #999;

    /* Alert colors */
    --alert-base-bg-color: #f8fafc;
    --alert-success-bg-color: #d4edda;
    --alert-success-text-color: #155724;
    --alert-success-border-color: #c3e6cb;
    --alert-warning-bg-color: #fff3cd;
    --alert-warning-text-color: #856404;
    --alert-warning-border-color: #ffeaa7;
    --alert-danger-bg-color: #f8d7da;
    --alert-danger-text-color: #721c24;
    --alert-danger-border-color: #f5c6cb;
    --alert-info-bg-color: #e7f3ff;
    --alert-info-text-color: #004085;
    --alert-info-border-color: #b3d9ff;

    /* Sidebar toggle button colors */
    --sidebar-toggle-bg-color: white;
    --sidebar-toggle-border-color: #3a8dde;
    --sidebar-toggle-icon-color: #3a8dde;

    /* Primary button colors */
    --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
    --primary-button-text: white;
    --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
    --button-shadow-color: rgba(58, 141, 222, 0.3);

    /* Filter colors */
    --filter-selected-bg: rgba(58, 141, 222, 0.2);
    --filter-selected-hover-bg: rgba(58, 141, 222, 0.25);
    --filter-selected-shadow: rgba(58, 141, 222, 0.15);

    /* Stat card colors - Bright for light theme */
    --color-blue-from: #3a8dde;
    --color-blue-to: #2980b9;
    --color-green-from: #56ca00;
    --color-green-to: #4caf50;
    --color-red-from: #e74c3c;
    --color-red-to: #c22a1a;
    --color-yellow-from: #ffd93d;
    --color-yellow-to: #f9ca24;
    --color-orange-from: #f59f58;
    --color-orange-to: #e56c2e;
    --color-purple-from: #a55eea;
    --color-purple-to: #8e44ad;
    --color-pink-from: #fd79a8;
    --color-pink-to: #e84393;
    --color-teal-from: #26de81;
    --color-teal-to: #20bf6b;
    --color-gray-from: #95a5a6;
    --color-gray-to: #7f8c8d;
    --color-black-from: #485460;
    --color-black-to: #2c3e50;
    --color-white-from: #f8f9fa;
    --color-white-to: #e9ecef;
    --color-white-text: #2c3e50;
}

/* Dark Theme Variables */
html[data-theme='dark'] {
    --primary-color: #3a8dde;
    --secondary-color: #1e3c72;

    /* Background colors */
    --body-bg-color: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
    --container-bg-color: rgba(44, 62, 80, 0.95);
    --header-bg-color: rgba(52, 73, 94, 0.95);
    --nav-tab-bg-color: rgba(35, 50, 65, 0.9);
    --nav-tab-button-bg-color: rgba(52, 73, 94, 0.95);
    --tab-content-bg-color: rgba(44, 62, 80, 0.95);

    /* Text colors */
    --text-primary-color: #ecf0f1;
    --text-secondary-color: #bdc3c7;
    --text-header-color: #ecf0f1;
    --text-muted-color: #95a5a6;

    /* Table colors (Dark theme) */
    --table-bg-color: #2c3e50;
    --table-row-alt-bg-color: #34495e;
    --table-text-color: #ecf0f1;
    --table-border-color: #34495e;
    --table-hover-bg-color: rgba(58, 141, 222, 0.15);
    --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
    --table-header-text-color: white;
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    --link-color: #64b5f6;
    --link-fg: #64b5f6; /* Override Django's link color variable */
    --link-hover-color: #90caf9;

    /* Form colors */
    --form-bg-color: #34495e;
    --form-text-color: #ecf0f1;
    --form-border-color: #4a6070;
    --form-focus-border-color: #3a8dde;
    --form-placeholder-color: #95a5a6;

    /* Alert colors */
    --alert-base-bg-color: #34495e;
    --alert-success-bg-color: #27ae60;
    --alert-success-text-color: white;
    --alert-success-border-color: #2ecc71;
    --alert-warning-bg-color: #f39c12;
    --alert-warning-text-color: white;
    --alert-warning-border-color: #e67e22;
    --alert-danger-bg-color: #e74c3c;
    --alert-danger-text-color: white;
    --alert-danger-border-color: #c0392b;
    --alert-info-bg-color: #3498db;
    --alert-info-text-color: white;
    --alert-info-border-color: #5dade2;

    /* Sidebar toggle button colors */
    --sidebar-toggle-bg-color: #34495e;
    --sidebar-toggle-border-color: #64b5f6;
    --sidebar-toggle-icon-color: #64b5f6;

    /* Primary button colors */
    --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
    --primary-button-text: white;
    --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
    --button-shadow-color: rgba(58, 141, 222, 0.4);

    /* Filter colors */
    --filter-selected-bg: rgba(100, 181, 246, 0.2);
    --filter-selected-hover-bg: rgba(100, 181, 246, 0.25);
    --filter-selected-shadow: rgba(100, 181, 246, 0.15);

    /* Stat card colors - Muted for dark theme */
    --color-blue-from: #2c6ba8;
    --color-blue-to: #1e4d7a;
    --color-green-from: #3a8c00;
    --color-green-to: #2d6e2d;
    --color-red-from: #a23529;
    --color-red-to: #7a1a12;
    --color-yellow-from: #b8a02d;
    --color-yellow-to: #8f7d1c;
    --color-orange-from: #b57542;
    --color-orange-to: #8f5621;
    --color-purple-from: #7a46b8;
    --color-purple-to: #5e3380;
    --color-pink-from: #b8567a;
    --color-pink-to: #8f3d5e;
    --color-teal-from: #1ca566;
    --color-teal-to: #17804f;
    --color-gray-from: #6a7577;
    --color-gray-to: #54595a;
    --color-black-from: #3a434a;
    --color-black-to: #232e36;
    --color-white-from: #525a62;
    --color-white-to: #3e4750;
    --color-white-text: #ecf0f1;
}

/* Auto Theme Variables (Default to light) */
html[data-theme='auto'] {
    /* Same as light theme initially */
    --primary-color: #3a8dde;
    --secondary-color: #1e3c72;

    --body-bg-color: linear-gradient(135deg, #3a8dde 0%, #1e3c72 100%);
    --container-bg-color: rgba(255, 255, 255, 0.95);
    --header-bg-color: rgba(255, 255, 255, 1);
    --nav-tab-bg-color: #e8ecf1;
    --nav-tab-button-bg-color: #ffffff;
    --tab-content-bg-color: rgba(255, 255, 255, 0.95);
    --text-primary-color: #333;
    --text-secondary-color: #666;
    --text-header-color: #2c3e50;
    --text-muted-color: #7f8c8d;
    --table-bg-color: #ffffff;
    --table-row-alt-bg-color: #f9f9f9;
    --table-text-color: #333;
    --table-border-color: #eee;
    --table-hover-bg-color: rgba(58, 141, 222, 0.05);
    --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
    --table-header-text-color: white;
    --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --link-color: #0a84ff;
    --link-fg: #0a84ff; /* Override Django's link color variable */
    --link-hover-color: #0051d5;
    --form-bg-color: #fff;
    --form-text-color: #333;
    --form-border-color: #e0e6ed;
    --form-focus-border-color: #3a8dde;
    --form-placeholder-color: #999;
    --alert-base-bg-color: #f8fafc;
    --alert-success-bg-color: #d4edda;
    --alert-success-text-color: #155724;
    --alert-success-border-color: #c3e6cb;
    --alert-warning-bg-color: #fff3cd;
    --alert-warning-text-color: #856404;
    --alert-warning-border-color: #ffeaa7;
    --alert-danger-bg-color: #f8d7da;
    --alert-danger-text-color: #721c24;
    --alert-danger-border-color: #f5c6cb;
    --alert-info-bg-color: #e7f3ff;
    --alert-info-text-color: #004085;
    --alert-info-border-color: #b3d9ff;

    /* Sidebar toggle button colors */
    --sidebar-toggle-bg-color: white;
    --sidebar-toggle-border-color: #3a8dde;
    --sidebar-toggle-icon-color: #3a8dde;

    /* Primary button colors */
    --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
    --primary-button-text: white;
    --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
    --button-shadow-color: rgba(58, 141, 222, 0.3);

    /* Filter colors */
    --filter-selected-bg: rgba(58, 141, 222, 0.2);
    --filter-selected-hover-bg: rgba(58, 141, 222, 0.25);
    --filter-selected-shadow: rgba(58, 141, 222, 0.15);

    /* Stat card colors - Bright for light theme */
    --color-blue-from: #3a8dde;
    --color-blue-to: #2980b9;
    --color-green-from: #56ca00;
    --color-green-to: #4caf50;
    --color-red-from: #e74c3c;
    --color-red-to: #c22a1a;
    --color-yellow-from: #ffd93d;
    --color-yellow-to: #f9ca24;
    --color-orange-from: #f59f58;
    --color-orange-to: #e56c2e;
    --color-purple-from: #a55eea;
    --color-purple-to: #8e44ad;
    --color-pink-from: #fd79a8;
    --color-pink-to: #e84393;
    --color-teal-from: #26de81;
    --color-teal-to: #20bf6b;
    --color-gray-from: #95a5a6;
    --color-gray-to: #7f8c8d;
    --color-black-from: #485460;
    --color-black-to: #2c3e50;
    --color-white-from: #f8f9fa;
    --color-white-to: #e9ecef;
    --color-white-text: #2c3e50;
}

/* Auto theme dark mode media query */
@media (prefers-color-scheme: dark) {
    html[data-theme='auto'] {
        --primary-color: #3a8dde;
        --secondary-color: #1e3c72;

        --body-bg-color: linear-gradient(135deg, #2c3e50 0%, #1a1a1a 100%);
        --container-bg-color: rgba(44, 62, 80, 0.95);
        --header-bg-color: rgba(52, 73, 94, 0.95);
        --nav-tab-bg-color: rgba(35, 50, 65, 0.9);
        --nav-tab-button-bg-color: rgba(52, 73, 94, 0.95);
        --tab-content-bg-color: rgba(44, 62, 80, 0.95);
        --text-primary-color: #ecf0f1;
        --text-secondary-color: #bdc3c7;
        --text-header-color: #ecf0f1;
        --text-muted-color: #95a5a6;
        /* Table follows dark theme in auto mode */
        --table-bg-color: #2c3e50;
        --table-row-alt-bg-color: #34495e;
        --table-text-color: #ecf0f1;
        --table-border-color: #34495e;
        --table-hover-bg-color: rgba(58, 141, 222, 0.15);
        --table-header-bg-color: linear-gradient(135deg, #3a8dde, #2980b9);
        --table-header-text-color: white;
        --table-container-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        --link-color: #64b5f6;
        --link-fg: #64b5f6; /* Override Django's link color variable */
        --link-hover-color: #90caf9;
        --form-bg-color: #34495e;
        --form-text-color: #ecf0f1;
        --form-border-color: #4a6070;
        --form-focus-border-color: #3a8dde;
        --form-placeholder-color: #95a5a6;
        --alert-base-bg-color: #34495e;
        --alert-success-bg-color: #27ae60;
        --alert-success-text-color: white;
        --alert-success-border-color: #2ecc71;
        --alert-warning-bg-color: #f39c12;
        --alert-warning-text-color: white;
        --alert-warning-border-color: #e67e22;
        --alert-danger-bg-color: #e74c3c;
        --alert-danger-text-color: white;
        --alert-danger-border-color: #c0392b;
        --alert-info-bg-color: #3498db;
        --alert-info-text-color: white;
        --alert-info-border-color: #5dade2;

        /* Sidebar toggle button colors */
        --sidebar-toggle-bg-color: #34495e;
        --sidebar-toggle-border-color: #64b5f6;
        --sidebar-toggle-icon-color: #64b5f6;

        /* Primary button colors */
        --primary-button-bg: linear-gradient(135deg, #3a8dde, #2980b9);
        --primary-button-text: white;
        --primary-button-hover-bg: linear-gradient(135deg, #2980b9, #1e6ba8);
        --button-shadow-color: rgba(58, 141, 222, 0.4);

        /* Filter colors */
        --filter-selected-bg: rgba(100, 181, 246, 0.2);
        --filter-selected-hover-bg: rgba(100, 181, 246, 0.25);
        --filter-selected-shadow: rgba(100, 181, 246, 0.15);

        /* Stat card colors - Muted for dark theme */
        --color-blue-from: #2c6ba8;
        --color-blue-to: #1e4d7a;
        --color-green-from: #3a8c00;
        --color-green-to: #2d6e2d;
        --color-red-from: #a23529;
        --color-red-to: #7a1a12;
        --color-yellow-from: #b8a02d;
        --color-yellow-to: #8f7d1c;
        --color-orange-from: #b57542;
        --color-orange-to: #8f5621;
        --color-purple-from: #7a46b8;
        --color-purple-to: #5e3380;
        --color-pink-from: #b8567a;
        --color-pink-to: #8f3d5e;
        --color-teal-from: #1ca566;
        --color-teal-to: #17804f;
        --color-gray-from: #6a7577;
        --color-gray-to: #54595a;
        --color-black-from: #3a434a;
        --color-black-to: #232e36;
        --color-white-from: #525a62;
        --color-white-to: #3e4750;
        --color-white-text: #ecf0f1;
    }
}