/* =============================================================
     THEME TOKENS (Light / Dark)
     Edit values here to adjust global colors (background, text, icons, primary, sidebar, navbar)
     ============================================================= */
:root {
    /* Core palette per spec */
    --color-bg: #FFFFFF;                 /* Background */
    --color-bg-alt: #FFFFFF;             /* Background alt (inputs, etc.) */
    --color-surface: #F6F6F6;            /* Surface (cards, panels) */
    --color-surface-alt: #FFFFFF;        /* Surface alt */
    --color-text: #212121;               /* Text Primary */
    --color-text-muted: #757575;         /* Text Secondary */
    --color-border: #E0E0E0;             /* Neutral Accent */
    --color-border-strong: #BBBBBB;      /* Stronger divider */
    --color-primary: #007BFF;            /* Primary */
    --color-primary-hover: #0069d9;      /* Primary hover */
    --color-secondary: #6C757D;          /* Secondary */
    --color-success: #28A745;            /* Accent/Success */
    --color-warning: #FFC107;            /* Warning */
    --color-error: #DC3545;              /* Error */
    --color-info: #17A2B8;               /* Info */
    --color-neutral-accent: #E0E0E0;     /* Neutral Accent (dividers, inactive) */

    /* Iconography */
    --color-icon: #757575;               /* General icon color */
    --color-icon-soft: #E0E0E0;          /* Inactive icon */

    /* Navigation / Sidebar */
    --color-nav-bg: #FFFFFF;
    --color-nav-text: #212121;
    --color-sidebar-bg: #F6F6F6;
    --color-sidebar-text: #343a40;
    --color-sidebar-active-bg: var(--color-primary);
    --color-sidebar-active-text: #FFFFFF;

    /* Effects */
    --color-focus-ring: rgba(0,123,255,.35);
    --shadow-elevated: 0 4px 10px rgba(0,0,0,.06);
    --transition-fast: .15s ease;
    --transition-med: .25s ease;
}

html[data-bs-theme='dark'] {
    /* Core palette per spec (Dark) */
    --color-bg: #121212;                 /* Background */
    --color-bg-alt: #121212;             /* Background alt */
    --color-surface: #1E1E1E;            /* Surface */
    --color-surface-alt: #2A2A2A;        /* Surface alt */
    --color-text: #FFFFFF;               /* Text Primary */
    --color-text-muted: #BBBBBB;         /* Text Secondary */
    --color-border: #333333;             /* Neutral Accent */
    --color-border-strong: #444444;      /* Stronger divider */
    --color-primary: #0D6EFD;            /* Primary */
    --color-primary-hover: #3d8bfd;      /* Primary hover */
    --color-secondary: #A0A0A0;          /* Secondary */
    --color-success: #198754;            /* Accent/Success */
    --color-warning: #FFCA2C;            /* Warning */
    --color-error: #FF4D4F;              /* Error */
    --color-info: #17A2B8;               /* Info */
    --color-neutral-accent: #333333;     /* Neutral Accent */

    /* Iconography */
    --color-icon: #BBBBBB;
    --color-icon-soft: #333333;

    /* Navigation / Sidebar */
    --color-nav-bg: #1E1E1E;
    --color-nav-text: #FFFFFF;
    --color-sidebar-bg: #1E1E1E;
    --color-sidebar-text: #BBBBBB;
    --color-sidebar-active-bg: var(--color-primary);
    --color-sidebar-active-text: #FFFFFF;

    /* Effects */
    --color-focus-ring: rgba(13,110,253,.4);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,.5);
}

/* Base structural usage */
body { background: var(--color-bg); color: var(--color-text); }

/* Utility classes */
.text-muted { color: var(--color-text-muted) !important; }
.app-surface { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; }
.app-surface-alt { background: var(--color-surface-alt); }
.app-border { border-color: var(--color-border) !important; }
.app-icon { color: var(--color-icon); }
.app-icon-soft { color: var(--color-icon-soft); }
.app-link { color: var(--color-primary); }
.app-link:hover { color: var(--color-primary-hover); }
.focus-ring:focus { outline: 0; box-shadow: 0 0 0 .2rem var(--color-focus-ring); }

/* Button helpers (if not overridden by Bootstrap/DevExpress) */
.btn-app-primary { background: var(--color-primary); color:#fff; border:1px solid var(--color-primary); transition: var(--transition-fast); }
.btn-app-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* Sidebar / Navbar variable-driven colors - Moved to INS.DXComponents/css/adminlte-sidebar.css and adminlte-navbar.css */


/* Card / Panel */
.card, .dx-card { background: var(--color-surface); color: var(--color-text); border:1px solid var(--color-border); box-shadow: var(--shadow-elevated); }
.card-primary .card-header { background-color: var(--color-primary); }

/* Forms */
input.form-control, textarea.form-control, select.form-control, .dx-textbox, .dx-textarea { background: var(--color-bg-alt); color: var(--color-text); border-color: var(--color-border); }
input.form-control:focus, textarea.form-control:focus, select.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .15rem var(--color-focus-ring); }

/* Links inside muted areas */
.text-muted a { color: var(--color-primary); }
.text-muted a:hover { color: var(--color-primary-hover); }

/* AdminLTE Login/Register Pages */
.login-page, .register-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box, .register-box {
    width: 400px;
    margin: 0 auto;
}

.login-box .card, .register-box .card {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: none;
    border-radius: 10px;
}

.login-box .card-header, .register-box .card-header {
    background: transparent;
    border-bottom: none;
    text-align: center;
    padding: 30px 0 20px 0;
}

.login-box-msg {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.login-box h1, .register-box h1 {
    color: var(--color-text);
    font-weight: 300;
    margin-bottom: 10px;
}

/* DevExpress Controls Styling */
.dx-textbox {
    margin-bottom: 15px;
}

.dx-textbox.form-control-lg {
    height: 45px;
}

.dx-textbox .dx-texteditor-input {
    padding: 12px 15px;
    font-size: 16px;
}

.dx-button.w-100 {
    width: 100% !important;
}

.dx-button-large {
    padding: 12px 24px;
    font-size: 16px;
    height: 45px;
}

.dx-button-medium {
    padding: 8px 16px;
    font-size: 14px;
    height: 38px;
}

.dx-checkbox {
    margin: 10px 0;
}

.dx-checkbox-text {
    margin-left: 8px;
}

/* Form groups */
.form-group {
    margin-bottom: 20px;
}

.form-group label { font-weight:500; margin-bottom:8px; color: var(--color-text); display:block; }

/* Alert styling */
.alert-dismissible {
    border-radius: 5px;
}

/* Profile Page Cards */
.card-primary .card-header { background-color: var(--color-primary); color:#fff; border-radius:5px 5px 0 0; }

/* Social auth links */
.social-auth-links {
    padding-top: 15px;
}

.social-auth-links p {
    margin-bottom: 15px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 576px) {
    .login-box, .register-box {
        width: 90%;
        margin: 20px auto;
    }
    
    .login-page, .register-page {
        padding: 20px;
    }
}

/* DevExpress Theme Customizations */
.dx-theme-bootstrap4 .dx-textbox,
.dx-theme-bootstrap4 .dx-textarea {
    border-radius: 5px;
}

.dx-theme-bootstrap4 .dx-button {
    border-radius: 5px;
    transition: all 0.3s ease;
}

.dx-theme-bootstrap4 .dx-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Sidebar smooth collapse - Moved to INS.DXComponents/css/adminlte-sidebar.css */


/* Mobile overlay mode - Moved to INS.DXComponents/css/adminlte-sidebar.css */


    /* Immediate theme sync (pre-JS) */
    html[data-bs-theme='dark'] .main-header.navbar.navbar-white.navbar-light { background: var(--color-nav-bg) !important; color: var(--color-nav-text) !important; }
    html[data-bs-theme='dark'] .main-header.navbar .nav-link { color: var(--color-nav-text) !important; }
    html[data-bs-theme='dark'] .main-header.navbar .nav-link:hover { color: var(--color-nav-text) !important; filter: brightness(1.2); }
    html[data-bs-theme='dark'] body { background: var(--color-bg); color: var(--color-text); }
    /* Optional smooth transition after first paint */
    html[data-bs-theme] body { transition: background-color .25s ease, color .25s ease; }