/* ================================================================
   DYNAMIC THEME.PHP — Unified design tokens
   Generated: 2026-07-22 04:17:31
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&display=swap');



:root {

    /* ── Brand Colors ── */
    --theme-primary-color:        #1b1260;
    --theme-primary-hover-color:  #0f0a3d;
    --theme-primary-dark-color:   #0f0a3d;
    --theme-secondary-color:      #ff6a1a;
    --theme-secondary-hover-color: color-mix(in srgb, #ff6a1a 70%, white);
    --theme-success-color:        #0b933a;
    --theme-blue-color:           #2196F3;

    /* ── Text & Background ── */
    --theme-body-bg-color:        #f7f9fc;
    --theme-body-text-color:      #444444;
    --theme-heading-text-color:   #061c3a;
    --theme-white-color:          #ffffff;
    --theme-black-color:          #000000;

    /* ── Advanced Colors ── */
    --theme-border-color:         #e9ecef;
    --theme-link-color:           #1b1260;
    --theme-link-hover-color:     #ff6a1a;
    --theme-card-bg:              #ffffff;
    --theme-input-focus-color:    #1b1260;
    --theme-sidebar-bg:           #ffffff;
    --theme-header-bg:            #ffffff;
    --theme-footer-bg:            #1b1260;
    --theme-footer-text:          #ffffff;

    /* ── RGB Utilities for rgba() ── */
    --theme-primary-rgb:   27, 18, 96;
    --theme-secondary-rgb: 255, 106, 26;
    --theme-footer-bg-rgb: 27, 18, 96;
    --theme-white-rgb:     255, 255, 255;
    --theme-black-rgb:     0, 0, 0;

    /* ── Typography ── */
    --theme-font-heading:        'Inter', sans-serif;
    --theme-font-body:           'Poppins', sans-serif;
    --theme-font-size-base:      16px;
    --theme-font-size-h1:        2.2rem;
    --theme-font-size-h2:        1.8rem;
    --theme-font-weight-heading: 700;
    --theme-line-height:         1.65;
    --theme-letter-spacing:      0.3px;

    /* ── Layout & Spacing ── */
    --theme-border-radius:       8px;
    --theme-border-radius-lg:    5px;
    --theme-border-radius-pill:  50px;
    --theme-card-shadow:         0px 5px 30px rgba(0,0,0,0.08);
    --theme-card-shadow-hover:   0px 15px 40px rgba(0,0,0,0.15);
    --theme-section-padding:     80px;
    --theme-transition-speed:    0.3s;

    /* ── Global Layout Specific ── */
    --theme-sidebar-width:       340px;
    --theme-header-height:       70px;
    --theme-modal-backdrop-blur: 8px;
    --theme-modal-close-color:   #ffffff;
    --theme-modal-close-size:    18px;
    --theme-modal-close-icon:    'fas fa-times';

    /* Header */
    --modal-hdr-bg:        #0f0a3d;
    --modal-hdr-fs:        1.1rem;
    --modal-hdr-color:     #ffffff;
    --modal-hdr-px:        25px;
    --modal-hdr-py:        20px;
    --modal-hdr-align:     left;
    --modal-hdr-font:      'Poppins', sans-serif;
    --modal-hdr-style:     normal;
    --modal-hdr-transform: none;

    /* Body */
    --modal-body-bg:        #ffffff;
    --modal-body-fs:        14px;
    --modal-body-color:     #444444;
    --modal-body-px:        15px;
    --modal-body-py:        15px;
    --modal-body-align:     left;
    --modal-body-font:      'Inter', sans-serif;
    --modal-body-style:     normal;
    --modal-body-transform: none;
    --modal-body-max-height:60vh;

    /* Headings */
    --modal-h-color:     #0f0a3d;
    --modal-h-bg:        transparent;
    --modal-h-px:        0px;
    --modal-h-py:        10px;
    --modal-h-transform: uppercase;
    --modal-h-style:     normal;

    /* Footer */
    --modal-ftr-bg:        #f8f9fa;
    --modal-ftr-fs:        14px;
    --modal-ftr-color:     #444444;
    --modal-ftr-px:        25px;
    --modal-ftr-py:        15px;
    --modal-ftr-align:     right;
    --modal-ftr-font:      'Inter', sans-serif;
    --modal-ftr-style:     normal;
    --modal-ftr-transform: none;

    /* Buttons */
    --btn-cancel-bg: #6c757d;
    --btn-close-bg:  #6c757d;
    --btn-edit_bg:   #ffc107;
    --btn-update-bg: #0d6efd;
    --btn-delete-bg: #dc3545;

    /* ── Admin CSS Aliases (admin.css compatibility) ── */
    --primary-color:    #1b1260;
    --primary-dark:     #0f0a3d;
    --secondary-color:  #ff6a1a;
    --success-color:    #0b933a;
    --bg-light:         #f7f9fc;
    --sidebar-width:    340px;
    --header-height:    70px;
    --card-shadow:      0px 5px 30px rgba(0,0,0,0.08);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Student/Login Portal Aliases ── */
    --student-primary:   #1b1260;
    --student-secondary: #ff6a1a;
    --login-primary:     #1b1260;
}

/* ── Global Utility Styles ── */
.modal-header .btn-close::before,
.btn-custom-close::before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    content: '00d';
    color: var(--theme-modal-close-color) !important;
    font-size: var(--theme-modal-close-size) !important;
}

body {
    font-family: var(--theme-font-body);
    font-size: var(--theme-font-size-base);
    line-height: var(--theme-line-height);
    color: var(--theme-body-text-color);
    background-color: var(--theme-body-bg-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--theme-font-heading);
    font-weight: var(--theme-font-weight-heading);
    color: var(--theme-heading-text-color);
    letter-spacing: var(--theme-letter-spacing);
}

a {
    color: var(--theme-link-color);
    transition: color var(--theme-transition-speed) ease;
}
a:hover { color: var(--theme-link-hover-color); }

.card { border-radius: var(--theme-border-radius) !important; overflow: hidden; }
.card-header, .modal-header {
    background: var(--modal-hdr-bg, var(--theme-primary-color)) !important;
    padding: var(--modal-hdr-py, 20px) var(--modal-hdr-px, 25px) !important;
    color: var(--modal-hdr-color, #ffffff) !important;
    text-align: var(--modal-hdr-align, left) !important;
}
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6, .modal-header .modal-title {
    color: var(--modal-hdr-color, #ffffff) !important;
    font-size: var(--modal-hdr-fs, inherit) !important;
    font-family: var(--modal-hdr-font, inherit) !important;
    font-style: var(--modal-hdr-style, normal) !important;
    text-transform: var(--modal-hdr-transform, none) !important;
    margin: 0 !important;
}

/* Body Styling */
.modal-body {
    background: var(--modal-body-bg, #ffffff) !important;
    color: var(--modal-body-color, #444444) !important;
    padding: var(--modal-body-py, 30px) var(--modal-body-px, 30px) !important;
    text-align: var(--modal-body-align, left) !important;
    font-family: var(--modal-body-font, inherit) !important;
    font-size: var(--modal-body-fs, inherit) !important;
    font-style: var(--modal-body-style, normal) !important;
    text-transform: var(--modal-body-transform, none) !important;
    max-height: var(--modal-body-max-height, 70vh) !important;
    overflow-y: auto !important;
}

/* Modal Body Headings */
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6 {
    color: var(--modal-h-color, inherit) !important;
    background: var(--modal-h-bg, transparent) !important;
    padding: var(--modal-h-py, 10px) var(--modal-h-px, 0px) !important;
    text-transform: var(--modal-h-transform, none) !important;
    font-style: var(--modal-h-style, normal) !important;
}

/* Footer Styling */
.modal-footer {
    background: var(--modal-ftr-bg, #f8f9fa) !important;
    padding: var(--modal-ftr-py, 15px) var(--modal-ftr-px, 25px) !important;
    text-align: var(--modal-ftr-align, right) !important;
    display: block !important; /* Allow text-align to work */
}

/* Button Styling Intent Classes */
.btn-modal-cancel { background-color: var(--btn-cancel-bg) !important; border: none !important; color: #fff !important; }
.btn-modal-close { background-color: var(--btn-close-bg) !important; border: none !important; color: #fff !important; }
.btn-modal-edit { background-color: var(--btn-edit-bg) !important; border: none !important; color: #fff !important; }
.btn-modal-update { background-color: var(--btn-update-bg) !important; border: none !important; color: #fff !important; }
.btn-modal-delete { background-color: var(--btn-delete-bg) !important; border: none !important; color: #fff !important; }

.modal-header.bg-danger { background: #dc3545 !important; }

.sidebar { background-color: var(--theme-sidebar-bg) !important; width: var(--theme-sidebar-width) !important; }
.header  { background-color: var(--theme-header-bg) !important; }

@media (min-width: 1200px) {
    #main, #footer {
        margin-left: var(--theme-sidebar-width);
        width: calc(100% - var(--theme-sidebar-width));
    }
    .toggle-sidebar #main, .toggle-sidebar #footer {
        margin-left: 0;
        width: 100%;
    }
    .toggle-sidebar .sidebar {
        left: calc(-1 * var(--theme-sidebar-width));
    }
}