/* =========================================================
   MAHA SHIKSHAN AWAAZ
   COMMON LIGHT / DARK THEME
   ---------------------------------------------------------
   IMPORTANT:
   - Global colors belong here.
   - Global shadows belong here.
   - Global hover/focus colors belong here.
   - Page-specific CSS should use these variables.
   - Avoid hard-coded theme colors in page-specific files.
   ========================================================= */


/* =========================================================
   LIGHT THEME - DEFAULT
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    --color-primary: #1769e0;
    --color-primary-hover: #0f58bf;
    --color-primary-active: #0b489e;
    --color-primary-soft: #eaf2ff;

    --color-secondary: #475569;
    --color-secondary-hover: #334155;

    --color-accent: #0ea5e9;
    --color-accent-hover: #0284c7;


    /* -----------------------------------------------------
       PAGE BACKGROUNDS
       ----------------------------------------------------- */

    --bg-page: #f5f7fb;
    --bg-page-alt: #eef2f7;

    --bg-surface: #ffffff;
    --bg-surface-hover: #f8fafc;

    --bg-surface-2: #f1f5f9;
    --bg-surface-3: #e9eef5;

    --bg-header: rgba(255, 255, 255, 0.96);
    --bg-footer: #ffffff;

    --bg-overlay: rgba(15, 23, 42, 0.52);


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --text-primary: #172033;
    --text-secondary: #536174;
    --text-muted: #7b8798;
    --text-disabled: #a5adba;

    --text-on-primary: #ffffff;
    --text-on-dark: #ffffff;

    --text-link: #1769e0;
    --text-link-hover: #0f58bf;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border-color: #dce3ec;
    --border-color-light: #e8edf3;
    --border-color-hover: #b8c5d6;
    --border-color-focus: #1769e0;

    --border-danger: #dc3545;
    --border-success: #198754;
    --border-warning: #d88a00;


    /* -----------------------------------------------------
       INPUTS / FORMS
       ----------------------------------------------------- */

    --input-bg: #ffffff;
    --input-bg-disabled: #f1f4f8;

    --input-text: #172033;
    --input-placeholder: #929cab;

    --input-border: #ccd5e2;
    --input-border-hover: #9eafc3;
    --input-border-focus: #1769e0;

    --input-focus-ring:
        0 0 0 3px rgba(23, 105, 224, 0.14);


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    --button-primary-bg: #1769e0;
    --button-primary-hover: #0f58bf;
    --button-primary-active: #0b489e;
    --button-primary-text: #ffffff;

    --button-secondary-bg: #eef2f7;
    --button-secondary-hover: #e0e7ef;
    --button-secondary-text: #334155;

    --button-danger-bg: #dc3545;
    --button-danger-hover: #bb2d3b;
    --button-danger-text: #ffffff;

    --button-success-bg: #198754;
    --button-success-hover: #157347;
    --button-success-text: #ffffff;


    /* -----------------------------------------------------
       STATUS COLORS
       ----------------------------------------------------- */

    --success: #198754;
    --success-hover: #157347;
    --success-bg: #e8f6ee;
    --success-text: #12653f;

    --danger: #dc3545;
    --danger-hover: #bb2d3b;
    --danger-bg: #fcecee;
    --danger-text: #a32632;

    --warning: #d98a00;
    --warning-hover: #b87400;
    --warning-bg: #fff4dc;
    --warning-text: #8c5900;

    --info: #1677c8;
    --info-hover: #1062a7;
    --info-bg: #e8f3fc;
    --info-text: #105b96;

    --neutral: #64748b;
    --neutral-bg: #edf1f5;
    --neutral-text: #475569;


    /* -----------------------------------------------------
       MODERATION STATUS
       ----------------------------------------------------- */

    --pending-bg: #fff4dc;
    --pending-text: #8c5900;
    --pending-border: #e5b856;

    --approved-bg: #e8f6ee;
    --approved-text: #12653f;
    --approved-border: #75bd91;

    --rejected-bg: #fcecee;
    --rejected-text: #a32632;
    --rejected-border: #dd8991;

    --hidden-bg: #edf1f5;
    --hidden-text: #536174;
    --hidden-border: #b6c0cc;


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    --card-bg: #ffffff;
    --card-bg-hover: #fbfcfe;

    --card-border: #dfe6ee;
    --card-border-hover: #bfcbd8;

    --card-shadow:
        0 3px 12px rgba(30, 41, 59, 0.07);

    --card-shadow-hover:
        0 9px 25px rgba(30, 41, 59, 0.12);


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    --table-bg: #ffffff;
    --table-header-bg: #f1f5f9;
    --table-header-text: #334155;

    --table-row-hover: #f7f9fc;
    --table-border: #e0e6ee;


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    --nav-bg: #ffffff;
    --nav-text: #536174;
    --nav-text-hover: #1769e0;

    --nav-active-bg: #eaf2ff;
    --nav-active-text: #1769e0;


    /* -----------------------------------------------------
       SCROLLBAR
       ----------------------------------------------------- */

    --scrollbar-track: #eef2f7;
    --scrollbar-thumb: #bcc7d5;
    --scrollbar-thumb-hover: #94a3b8;


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-xs:
        0 1px 3px rgba(15, 23, 42, 0.05);

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.07);

    --shadow-md:
        0 6px 18px rgba(15, 23, 42, 0.10);

    --shadow-lg:
        0 12px 32px rgba(15, 23, 42, 0.14);

    --shadow-modal:
        0 20px 55px rgba(15, 23, 42, 0.22);


    /* -----------------------------------------------------
       BORDER RADIUS
       ----------------------------------------------------- */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;


    /* -----------------------------------------------------
       SPACING
       ----------------------------------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;


    /* -----------------------------------------------------
       FONT SIZES
       ----------------------------------------------------- */

    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;


    /* -----------------------------------------------------
       TRANSITIONS
       ----------------------------------------------------- */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;


    /* -----------------------------------------------------
       LAYOUT
       ----------------------------------------------------- */

    --header-height: 68px;

    --content-width: 1200px;
    --content-wide: 1400px;

    --mobile-padding: 16px;
    --tablet-padding: 24px;
    --desktop-padding: 32px;


    /* -----------------------------------------------------
       Z-INDEX
       ----------------------------------------------------- */

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] {

    /* -----------------------------------------------------
       BRAND
       ----------------------------------------------------- */

    --color-primary: #4d94ff;
    --color-primary-hover: #70a8ff;
    --color-primary-active: #8ab8ff;
    --color-primary-soft: #182b47;

    --color-secondary: #a6b0bf;
    --color-secondary-hover: #c4ccd7;

    --color-accent: #38bdf8;
    --color-accent-hover: #7dd3fc;


    /* -----------------------------------------------------
       PAGE BACKGROUNDS
       ----------------------------------------------------- */

    --bg-page: #0d1117;
    --bg-page-alt: #111821;

    --bg-surface: #151b23;
    --bg-surface-hover: #1a222c;

    --bg-surface-2: #1b2430;
    --bg-surface-3: #222d3a;

    --bg-header: rgba(13, 17, 23, 0.96);
    --bg-footer: #11161d;

    --bg-overlay: rgba(0, 0, 0, 0.72);


    /* -----------------------------------------------------
       TEXT
       ----------------------------------------------------- */

    --text-primary: #f2f5f8;
    --text-secondary: #b3bdca;
    --text-muted: #8793a3;
    --text-disabled: #616c7b;

    --text-on-primary: #ffffff;

    --text-link: #69a7ff;
    --text-link-hover: #93c0ff;


    /* -----------------------------------------------------
       BORDERS
       ----------------------------------------------------- */

    --border-color: #2c3744;
    --border-color-light: #232d38;
    --border-color-hover: #49586a;
    --border-color-focus: #4d94ff;


    /* -----------------------------------------------------
       INPUTS / FORMS
       ----------------------------------------------------- */

    --input-bg: #111821;
    --input-bg-disabled: #1a222c;

    --input-text: #f2f5f8;
    --input-placeholder: #758194;

    --input-border: #344152;
    --input-border-hover: #526176;
    --input-border-focus: #4d94ff;

    --input-focus-ring:
        0 0 0 3px rgba(77, 148, 255, 0.18);


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    --button-primary-bg: #347fef;
    --button-primary-hover: #5596f7;
    --button-primary-active: #72a8f8;
    --button-primary-text: #ffffff;

    --button-secondary-bg: #26313d;
    --button-secondary-hover: #324052;
    --button-secondary-text: #e0e6ed;

    --button-danger-bg: #c6414e;
    --button-danger-hover: #df5965;

    --button-success-bg: #208c5a;
    --button-success-hover: #2ca66c;


    /* -----------------------------------------------------
       STATUS COLORS
       ----------------------------------------------------- */

    --success: #3dc27b;
    --success-hover: #59d391;
    --success-bg: #153726;
    --success-text: #85e2ac;

    --danger: #ef6a75;
    --danger-hover: #f2828b;
    --danger-bg: #3a1b20;
    --danger-text: #ff9aa3;

    --warning: #f0ae42;
    --warning-hover: #f7bf62;
    --warning-bg: #3d2b12;
    --warning-text: #ffd078;

    --info: #58a9e8;
    --info-hover: #7bbdf0;
    --info-bg: #152e42;
    --info-text: #8bcef9;

    --neutral: #98a5b5;
    --neutral-bg: #27313c;
    --neutral-text: #c0c9d4;


    /* -----------------------------------------------------
       MODERATION STATUS
       ----------------------------------------------------- */

    --pending-bg: #3d2b12;
    --pending-text: #ffd078;
    --pending-border: #7e5f2a;

    --approved-bg: #153726;
    --approved-text: #85e2ac;
    --approved-border: #347b53;

    --rejected-bg: #3a1b20;
    --rejected-text: #ff9aa3;
    --rejected-border: #7c3941;

    --hidden-bg: #27313c;
    --hidden-text: #c0c9d4;
    --hidden-border: #4a5968;


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    --card-bg: #151b23;
    --card-bg-hover: #1a222c;

    --card-border: #2b3643;
    --card-border-hover: #475667;

    --card-shadow:
        0 4px 14px rgba(0, 0, 0, 0.24);

    --card-shadow-hover:
        0 10px 28px rgba(0, 0, 0, 0.38);


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    --table-bg: #151b23;
    --table-header-bg: #1d2631;
    --table-header-text: #d6dde6;

    --table-row-hover: #1a222c;
    --table-border: #2b3643;


    /* -----------------------------------------------------
       NAVIGATION
       ----------------------------------------------------- */

    --nav-bg: #151b23;
    --nav-text: #aab4c1;
    --nav-text-hover: #72a8f8;

    --nav-active-bg: #1a2d49;
    --nav-active-text: #79adfb;


    /* -----------------------------------------------------
       SCROLLBAR
       ----------------------------------------------------- */

    --scrollbar-track: #111821;
    --scrollbar-thumb: #3c4858;
    --scrollbar-thumb-hover: #566578;


    /* -----------------------------------------------------
       SHADOWS
       ----------------------------------------------------- */

    --shadow-xs:
        0 1px 4px rgba(0, 0, 0, 0.20);

    --shadow-sm:
        0 3px 10px rgba(0, 0, 0, 0.26);

    --shadow-md:
        0 7px 20px rgba(0, 0, 0, 0.34);

    --shadow-lg:
        0 14px 36px rgba(0, 0, 0, 0.44);

    --shadow-modal:
        0 22px 60px rgba(0, 0, 0, 0.62);
}


/* =========================================================
   SYSTEM-LEVEL THEME TRANSITIONS
   ========================================================= */

html {
    background: var(--bg-page);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body,
header,
footer,
main,
section,
article,
aside,
nav,
div,
input,
textarea,
select,
button,
table,
th,
td {
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* =========================================================
   USER ACCESSIBILITY
   Reduce animation if requested by operating system
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}