/* ========================================
   DESIGN SYSTEM - INSTITUT NOUN (SCHOOL)
   Blue variant of Materialize framework
   Adapted from freescout production theme
   ======================================== */

/* ======================================
   DESIGN SYSTEM - UNIFIED VARIABLES
   ====================================== */

:root {
    /* Primary Colors - Teal/Cyan (from logo) */
    --school-primary: #0891b2;
    --school-primary-dark: #0e7490;
    --school-primary-light: #22d3ee;
    --school-primary-pale: #cffafe;

    /* Semantic Colors */
    --school-success: #10b981;
    --school-success-dark: #059669;
    --school-success-pale: #d1fae5;
    --school-warning: #f59e0b;
    --school-warning-dark: #d97706;
    --school-warning-pale: #fef3c7;
    --school-danger: #ef4444;
    --school-danger-dark: #dc2626;
    --school-danger-pale: #fee2e2;
    --school-info: #06b6d4;
    --school-info-dark: #0891b2;
    --school-info-pale: #cffafe;

    /* Neutral Colors */
    --school-gray-50: #f9fafb;
    --school-gray-100: #f3f4f6;
    --school-gray-200: #e5e7eb;
    --school-gray-300: #d1d5db;
    --school-gray-400: #9ca3af;
    --school-gray-500: #6b7280;
    --school-gray-600: #4b5563;
    --school-gray-700: #374151;
    --school-gray-800: #1f2937;
    --school-gray-900: #111827;

    /* Bootstrap Overrides */
    --bs-primary: #0891b2;
    --bs-primary-rgb: 8, 145, 178;
    --bs-primary-dark: #0e7490;
    --bs-primary-light: #22d3ee;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-info: #0891b2;
    --bs-info-rgb: 8, 145, 178;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-light: #f8fafc;
    --bs-dark: #1e293b;
    --bs-body-color: #334155;
    --bs-heading-color: #1e293b;
    --bs-border-color: #e2e8f0;

    /* Typography */
    --school-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --school-font-size-base: 1rem;
    --school-font-size-sm: 0.875rem;
    --school-font-size-xs: 0.75rem;
    --school-font-size-lg: 1.125rem;
    --school-font-size-xl: 1.25rem;
    --school-font-size-2xl: 1.5rem;
    --school-font-size-3xl: 1.875rem;
    --school-font-size-4xl: 2.25rem;
    --school-line-height-tight: 1.25;
    --school-line-height-normal: 1.5;
    --school-line-height-relaxed: 1.75;
    --school-font-weight-normal: 400;
    --school-font-weight-medium: 500;
    --school-font-weight-semibold: 600;
    --school-font-weight-bold: 700;

    /* Spacing Scale (rem) */
    --school-space-0: 0;
    --school-space-1: 0.25rem;
    --school-space-2: 0.5rem;
    --school-space-3: 0.75rem;
    --school-space-4: 1rem;
    --school-space-5: 1.25rem;
    --school-space-6: 1.5rem;
    --school-space-8: 2rem;
    --school-space-10: 2.5rem;
    --school-space-12: 3rem;
    --school-space-16: 4rem;

    /* Border Radius */
    --school-radius-sm: 0.25rem;
    --school-radius: 0.375rem;
    --school-radius-md: 0.5rem;
    --school-radius-lg: 0.75rem;
    --school-radius-xl: 1rem;
    --school-radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Touch Target Minimum Size */
    --school-touch-target: 44px;

    /* Transitions */
    --school-transition-fast: 150ms ease-in-out;
    --school-transition-base: 200ms ease-in-out;
    --school-transition-slow: 300ms ease-in-out;

    /* Z-index Scale */
    --school-z-dropdown: 1000;
    --school-z-sticky: 1020;
    --school-z-fixed: 1030;
    --school-z-modal-backdrop: 1040;
    --school-z-modal: 1050;
    --school-z-popover: 1060;
    --school-z-tooltip: 1070;
    --school-z-toast: 10000;
}

/* ======================================
   GLOBAL FONT CONFIGURATION
   ====================================== */

body,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.navbar-brand {
    font-family: var(--school-font-family) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html body {
    background-color: #f8fafc !important;
    min-height: 100vh;
    position: relative;
    font-family: var(--school-font-family);
    font-size: var(--school-font-size-base);
    line-height: var(--school-line-height-normal);
    color: var(--school-gray-800);
}

html {
    scroll-behavior: smooth;
}

/* Ensure body background is visible through layout wrappers */
.layout-wrapper,
.layout-container,
.layout-page {
    background-color: transparent !important;
}

.layout-wrapper {
    position: relative;
    z-index: auto;
}

/* ======================================
   TYPOGRAPHY SYSTEM
   ====================================== */

h1, .h1 {
    font-size: var(--school-font-size-4xl);
    font-weight: var(--school-font-weight-bold);
    line-height: var(--school-line-height-tight);
    margin-bottom: var(--school-space-6);
    color: var(--bs-heading-color);
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: var(--school-font-size-3xl);
    font-weight: var(--school-font-weight-semibold);
    line-height: var(--school-line-height-tight);
    margin-bottom: var(--school-space-5);
    color: var(--bs-heading-color);
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: var(--school-font-size-2xl);
    font-weight: var(--school-font-weight-semibold);
    line-height: var(--school-line-height-tight);
    margin-bottom: var(--school-space-4);
    color: var(--bs-heading-color);
}

h4, .h4 {
    font-size: var(--school-font-size-xl);
    font-weight: var(--school-font-weight-semibold);
    line-height: var(--school-line-height-normal);
    margin-bottom: var(--school-space-4);
    color: var(--bs-heading-color);
}

h5, .h5 {
    font-size: var(--school-font-size-lg);
    font-weight: var(--school-font-weight-medium);
    line-height: var(--school-line-height-normal);
    margin-bottom: var(--school-space-3);
    color: var(--bs-heading-color);
}

h6, .h6 {
    font-size: var(--school-font-size-base);
    font-weight: var(--school-font-weight-medium);
    line-height: var(--school-line-height-normal);
    margin-bottom: var(--school-space-3);
    color: var(--bs-heading-color);
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1, .h1 { font-size: var(--school-font-size-3xl); }
    h2, .h2 { font-size: var(--school-font-size-2xl); }
    h3, .h3 { font-size: var(--school-font-size-xl); }
    h4, .h4 { font-size: var(--school-font-size-lg); }
}

/* Text Utilities */
.text-xs { font-size: var(--school-font-size-xs) !important; }
.text-sm { font-size: var(--school-font-size-sm) !important; }
.text-base { font-size: var(--school-font-size-base) !important; }
.text-lg { font-size: var(--school-font-size-lg) !important; }
.text-xl { font-size: var(--school-font-size-xl) !important; }

.text-muted {
    color: #64748b !important;
}

/* ======================================
   NAVBAR - GLASSMORPHISM
   ====================================== */

.layout-navbar {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    z-index: 1200 !important;
}

/* layout-menu base bg is set in the SIDEBAR MENU section below */

/* ======================================
   CARD SYSTEM
   ====================================== */

.card {
    border: 1px solid var(--school-gray-200);
    border-radius: var(--school-radius-lg);
    box-shadow: var(--shadow-sm);
    background-color: rgba(255, 255, 255, 0.95);
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

.card-header {
    background-color: var(--school-gray-50);
    border-bottom: 1px solid var(--school-gray-200);
    font-weight: var(--school-font-weight-semibold);
    padding: 1rem 1.5rem !important;
    margin-bottom: 0 !important;
}

.card-header + .card-body,
.card-header + div > .card-body {
    padding-top: 1.5rem !important;
}

.card-body {
    padding: 1.5rem !important;
}

/* Card entrance animations with stagger */
.row > [class*='col']:nth-child(1) .card { animation-delay: 0s; }
.row > [class*='col']:nth-child(2) .card { animation-delay: 0.05s; }
.row > [class*='col']:nth-child(3) .card { animation-delay: 0.1s; }
.row > [class*='col']:nth-child(4) .card { animation-delay: 0.15s; }
.row > [class*='col']:nth-child(n+5) .card { animation-delay: 0.2s; }

/* ======================================
   BUTTON SYSTEM
   ====================================== */

.btn {
    font-weight: var(--school-font-weight-medium);
    border-radius: var(--school-radius);
    padding: var(--school-space-2) var(--school-space-4);
    min-height: var(--school-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.025em;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    padding: var(--school-space-1) var(--school-space-3);
    font-size: var(--school-font-size-sm);
    min-height: 36px;
}

.btn-lg {
    padding: var(--school-space-3) var(--school-space-6);
    font-size: var(--school-font-size-lg);
    min-height: 52px;
}

.btn-icon {
    padding: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Primary Button - Gradient */
.btn-primary {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px 0 rgba(8, 145, 178, 0.39);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0e7490 0%, #164e63 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(8, 145, 178, 0.23);
}

.btn-secondary {
    background-color: #64748b;
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: #475569;
    color: #ffffff;
}

.btn-success {
    background-color: #10b981;
    color: #ffffff;
}

.btn-success:hover {
    background-color: #059669;
    color: #ffffff;
}

.btn-outline-primary {
    border: 2px solid #0891b2;
    color: #0891b2;
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: #0891b2;
    color: #ffffff;
    border-color: #0891b2;
}

/* Button loading state */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Icon wiggle on hover */
.btn i,
.dropdown-item i {
    transition: transform 0.3s ease;
}

.btn:hover i,
.dropdown-item:hover i {
    transform: scale(1.2);
}

/* ======================================
   FORM SYSTEM
   ====================================== */

.form-label {
    font-size: var(--school-font-size-sm);
    font-weight: var(--school-font-weight-medium);
    color: var(--school-gray-700);
    margin-bottom: var(--school-space-2);
}

.form-control,
.form-select {
    min-height: var(--school-touch-target);
    border-radius: var(--school-radius);
    border: 1px solid var(--school-gray-300);
    padding: var(--school-space-2) var(--school-space-3);
    font-size: var(--school-font-size-base);
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--school-primary);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
    transform: scale(1.01);
    outline: none;
}

.form-control::placeholder {
    color: var(--school-gray-400);
}

/* Checkbox & Radio animations */
.form-check-input {
    transition: all 0.2s ease;
}

.form-check-input:checked {
    animation: scaleIn 0.3s ease;
}

/* Disabled Form Inputs */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: #f5f5f5 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    border: 1px solid #ddd !important;
}

/* Required field indicator */
.required::after {
    content: ' *';
    color: var(--school-danger);
    font-weight: 700;
}

/* Help text */
.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--school-gray-600);
}

/* ======================================
   FORM VALIDATION
   ====================================== */

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--school-danger);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--school-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.25);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--school-danger);
    animation: fadeInDown 0.3s ease-out;
}

.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--school-success);
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--school-success);
}

.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
    display: block;
}

/* Field-level error hint */
.field-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--school-danger);
}

.field-error::before {
    content: '\eb99';
    font-family: 'remixicon';
    font-size: 1rem;
}

/* ======================================
   BADGE SYSTEM
   ====================================== */

.badge {
    font-size: var(--school-font-size-xs);
    font-weight: var(--school-font-weight-medium);
    padding: var(--school-space-1) var(--school-space-2);
    border-radius: var(--school-radius);
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

.badge i {
    font-size: 1em;
    vertical-align: middle;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.badge-lg {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
}

/* Badge Label Colors - WCAG AA Compliant */
.bg-label-primary { background-color: #cffafe !important; color: #1e3a5f !important; }
.bg-label-success { background-color: #d1fae5 !important; color: #065f46 !important; }
.bg-label-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.bg-label-danger { background-color: #fee2e2 !important; color: #7f1d1d !important; }
.bg-label-info { background-color: #cffafe !important; color: #164e63 !important; }
.bg-label-secondary { background-color: #e5e7eb !important; color: #374151 !important; }

/* ======================================
   ALERT SYSTEM - With Icons
   ====================================== */

.alert {
    position: relative;
    padding: 1rem 1rem 1rem 3.5rem;
    border-radius: var(--school-radius-lg);
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
    animation: fadeInUp 0.4s ease-out;
}

.alert::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'remixicon';
    font-size: 1.5rem;
    line-height: 1;
}

.alert-success {
    background-color: var(--school-success-pale);
    color: var(--school-success-dark);
}

.alert-success::before {
    content: '\eb7b';
    color: var(--school-success);
}

.alert-danger {
    background-color: var(--school-danger-pale);
    color: var(--school-danger-dark);
}

.alert-danger::before {
    content: '\eb99';
    color: var(--school-danger);
}

.alert-warning {
    background-color: var(--school-warning-pale);
    color: var(--school-warning-dark);
}

.alert-warning::before {
    content: '\eb90';
    color: var(--school-warning);
}

.alert-info {
    background-color: var(--school-info-pale);
    color: var(--school-info-dark);
}

.alert-info::before {
    content: '\eb9b';
    color: var(--school-info);
}

/* ======================================
   TABLE SYSTEM
   ====================================== */

.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: #f8fafc;
    border-bottom: 2px solid var(--bs-border-color);
    font-weight: 600;
    color: var(--bs-heading-color);
    padding: 1rem;
}

.table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: rgba(8, 145, 178, 0.02);
}

/* Mobile Card View for Tables */
@media (max-width: 768px) {
    .table-mobile-cards,
    .card .table-responsive .table:not(.keep-table-desktop) {
        border: 0;
    }

    .table-mobile-cards thead,
    .card .table-responsive .table:not(.keep-table-desktop) thead {
        display: none;
    }

    .table-mobile-cards tbody tr,
    .card .table-responsive .table:not(.keep-table-desktop) tbody tr {
        display: block;
        margin-bottom: var(--school-space-4);
        border: 1px solid var(--school-gray-200);
        border-radius: var(--school-radius-lg);
        background: white;
        box-shadow: var(--shadow-sm);
    }

    .table-mobile-cards tbody td,
    .card .table-responsive .table:not(.keep-table-desktop) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--school-space-3) var(--school-space-4);
        border-bottom: 1px solid var(--school-gray-100);
        text-align: right !important;
    }

    .table-mobile-cards tbody td:last-child,
    .card .table-responsive .table:not(.keep-table-desktop) tbody td:last-child {
        border-bottom: 0;
    }

    .table-mobile-cards tbody td::before,
    .card .table-responsive .table:not(.keep-table-desktop) tbody td::before {
        content: attr(data-label);
        font-weight: var(--school-font-weight-semibold);
        color: var(--school-gray-700);
        text-align: left;
        flex: 1;
    }
}

/* ======================================
   SIDEBAR MENU - Clean Professional
   ====================================== */

.layout-menu {
    width: 260px !important;
    border-right: 1px solid var(--school-gray-200) !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
}

.layout-menu .menu-inner {
    padding: 0.25rem 0.75rem !important;
}

.layout-menu .menu-item {
    margin-bottom: 1px;
}

.layout-menu .menu-link {
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.15s ease !important;
    color: var(--school-gray-600) !important;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

.layout-menu .menu-link:hover {
    background-color: var(--school-gray-100) !important;
    color: var(--school-gray-800) !important;
}

.layout-menu .menu-link:hover .menu-icon {
    color: var(--school-primary) !important;
}

.layout-menu .menu-icon {
    color: var(--school-gray-400) !important;
    font-size: 1.05rem;
    width: 1.375rem;
    text-align: center;
    flex-shrink: 0;
    margin-right: 0.625rem;
    transition: color 0.15s ease;
}

/* Section headers */
.layout-menu .menu-header {
    padding: 0.375rem 0.75rem 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.125rem;
}

.layout-menu .menu-header-text {
    font-size: 0.625rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--school-gray-400) !important;
    font-weight: 600;
}

/* Active menu item - subtle left accent + light bg */
.menu-item.active {
    background-color: transparent !important;
    border-left: none !important;
}

.menu-item.active > .menu-link {
    background-color: rgba(8, 145, 178, 0.08) !important;
    color: var(--school-primary) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    position: relative;
}

.menu-item.active > .menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background-color: var(--school-primary);
    border-radius: 0 3px 3px 0;
}

.menu-item.active > .menu-link .menu-icon,
.menu-item.active > .menu-link i {
    color: var(--school-primary) !important;
}

.menu-item.active > .menu-link span.menu-icon {
    background-color: var(--school-primary) !important;
    color: #ffffff !important;
}

/* Session day badge (teacher menu) */
.session-day-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    background-color: rgba(8, 145, 178, 0.1) !important;
    color: var(--day-color, #0891b2) !important;
    border-radius: 4px !important;
    line-height: 1;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

/* Day-specific background tints via inline --day-color */
.session-day-badge[style*="--day-color: #0891b2"] { background-color: rgba(8, 145, 178, 0.1) !important; }
.session-day-badge[style*="--day-color: #7c3aed"] { background-color: rgba(124, 58, 237, 0.1) !important; }
.session-day-badge[style*="--day-color: #059669"] { background-color: rgba(5, 150, 105, 0.1) !important; }
.session-day-badge[style*="--day-color: #d97706"] { background-color: rgba(217, 119, 6, 0.1) !important; }
.session-day-badge[style*="--day-color: #dc2626"] { background-color: rgba(220, 38, 38, 0.1) !important; }
.session-day-badge[style*="--day-color: #0891b2"] { background-color: rgba(8, 145, 178, 0.1) !important; }
.session-day-badge[style*="--day-color: #6366f1"] { background-color: rgba(99, 102, 241, 0.1) !important; }

.menu-item.active .session-day-badge {
    background-color: var(--day-color, var(--school-primary)) !important;
    color: #ffffff !important;
}
.menu-item.active .session-day-badge[style*="--day-color: #0891b2"] { background-color: #0891b2 !important; }
.menu-item.active .session-day-badge[style*="--day-color: #7c3aed"] { background-color: #7c3aed !important; }
.menu-item.active .session-day-badge[style*="--day-color: #059669"] { background-color: #059669 !important; }
.menu-item.active .session-day-badge[style*="--day-color: #d97706"] { background-color: #d97706 !important; }
.menu-item.active .session-day-badge[style*="--day-color: #dc2626"] { background-color: #dc2626 !important; }
.menu-item.active .session-day-badge[style*="--day-color: #0891b2"] { background-color: #0891b2 !important; }
.menu-item.active .session-day-badge[style*="--day-color: #6366f1"] { background-color: #6366f1 !important; }

/* Session shift icon (sun/moon) */
.session-shift-icon {
    font-size: 0.7rem;
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.menu-link:hover .session-shift-icon {
    opacity: 0.7;
}

.menu-item.active .session-shift-icon {
    opacity: 0.7;
    color: var(--school-primary) !important;
}

/* Child avatar badge (family menu) */
.child-avatar-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    background-color: var(--school-primary-pale) !important;
    color: var(--school-primary) !important;
    border-radius: 50% !important;
    line-height: 1;
    flex-shrink: 0;
}

.menu-item.active .child-avatar-badge {
    background-color: var(--school-primary) !important;
    color: #ffffff !important;
}

/* App brand in sidebar */
.app-brand {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--school-gray-200);
    min-height: auto !important;
}

.app-brand-logo img {
    border-radius: 6px;
}

.app-brand-text {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--school-gray-800) !important;
    letter-spacing: -0.01em;
}

/* ======================================
   PROFILE DROPDOWN
   ====================================== */

.navbar-dropdown.dropdown-user .dropdown-menu,
.profile-dropdown {
    min-width: 15rem !important;
    max-width: 18rem;
    border-radius: 10px !important;
    border: 1px solid var(--school-gray-200) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: visible !important;
    padding: 0.375rem 0 !important;
}

.layout-navbar .dropdown-menu {
    overflow: visible !important;
}

/* Dropdown header */
.dropdown-header-user {
    padding: 0.75rem 1rem;
}

/* Dropdown items */
.navbar-dropdown .dropdown-item,
.profile-dropdown .dropdown-item {
    font-size: 0.8125rem;
    border-radius: 6px;
    margin: 1px 0.375rem;
    padding: 0.5rem 0.625rem;
    transition: background-color 0.12s ease, color 0.12s ease;
    color: var(--school-gray-600);
}

.navbar-dropdown .dropdown-item:hover,
.profile-dropdown .dropdown-item:hover {
    background-color: var(--school-gray-100) !important;
    color: var(--school-gray-800) !important;
}

.navbar-dropdown .dropdown-item:hover i,
.profile-dropdown .dropdown-item:hover i {
    color: var(--school-primary) !important;
}

.navbar-dropdown .dropdown-item i,
.profile-dropdown .dropdown-item i {
    font-size: 1rem;
    color: var(--school-gray-400);
    transition: color 0.12s ease;
    width: 1.25rem;
    text-align: center;
}

/* Dropdown dividers */
.profile-dropdown .dropdown-divider {
    margin: 0.25rem 0;
    border-color: var(--school-gray-100);
}

/* Dropdown action buttons (logout, stop logAs) */
.dropdown-action-btn {
    padding: 0.375rem 0.75rem;
}

.dropdown-action-btn .btn {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    min-height: 34px;
    border-radius: 6px;
}

/* Navbar user info */
.navbar-user-info {
    line-height: 1.3;
}

.navbar-user-name {
    font-size: 0.8125rem;
}

.navbar-user-role {
    font-size: 0.6875rem;
}

.navbar-chevron {
    font-size: 0.875rem;
    color: var(--school-gray-400);
}

.navbar-brand-mobile {
    font-size: 1rem;
}

/* ======================================
   ANIMATIONS & TRANSITIONS
   ====================================== */

/* Container entrance */
.container-xxl {
    animation: fadeIn 0.4s ease-out;
}

/* Fade animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes shimmer-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Modal entrance */
.modal.fade .modal-dialog {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
    animation: scaleIn 0.3s ease-out;
}

/* Dropdown */
.dropdown-menu {
    animation: fadeInDown 0.2s ease-out;
}

/* Toast */
.toast {
    animation: slideInRight 0.3s ease-out;
}

/* Pagination */
.pagination .page-link {
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    transform: translateY(-2px);
}

/* Progress bar */
.progress-bar {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Avatar hover */
.avatar {
    transition: all 0.3s ease;
}

.avatar:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Offcanvas */
.offcanvas {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================
   LOADING STATES & SKELETONS
   ====================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--school-gray-200) 25%,
        var(--school-gray-100) 50%,
        var(--school-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--school-radius-md);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    background: linear-gradient(90deg, var(--school-gray-100) 0%, var(--school-gray-200) 50%, var(--school-gray-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--school-radius-sm);
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 100%; }

.skeleton-circle,
.skeleton-avatar {
    border-radius: 50%;
    background: linear-gradient(90deg, var(--school-gray-100) 0%, var(--school-gray-200) 50%, var(--school-gray-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
}

.skeleton-card {
    padding: var(--school-space-5);
    background: white;
    border: 1px solid var(--school-gray-200);
    border-radius: var(--school-radius-lg);
}

/* Page loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    color: var(--school-primary);
}

.loading-overlay .loading-text {
    margin-top: var(--school-space-4);
    color: var(--school-gray-600);
    font-size: 0.875rem;
}

/* Card loading shimmer */
.card.loading {
    position: relative;
    overflow: hidden;
}

.card.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-sweep 2s infinite;
    z-index: 1;
}

/* Table loading */
.table-loading {
    position: relative;
    min-height: 200px;
}

.table-loading tbody tr {
    opacity: 0.3;
    pointer-events: none;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid var(--school-gray-200);
    border-top-color: var(--school-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Form loading */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.form-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid var(--school-gray-300);
    border-top-color: var(--school-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 2;
}

/* Spinner component */
.spinner {
    animation: spin 1s linear infinite;
}

/* Dots loading */
.loading-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    animation: pulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

/* Pulse loading for avatars */
.loading-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Inline loader */
.inline-loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ======================================
   EMPTY STATES
   ====================================== */

.empty-state {
    text-align: center;
    padding: var(--school-space-8) var(--school-space-4);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--school-gray-300);
    margin-bottom: var(--school-space-4);
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--school-gray-600);
    margin-bottom: var(--school-space-2);
}

.empty-state-description {
    color: var(--school-gray-500);
    margin-bottom: var(--school-space-4);
}

/* ======================================
   ERROR & SUCCESS MESSAGES
   ====================================== */

.error-message {
    display: flex;
    align-items: start;
    gap: var(--school-space-3);
    padding: var(--school-space-4);
    background-color: var(--school-danger-pale);
    border-left: 4px solid var(--school-danger);
    border-radius: var(--school-radius-md);
    color: var(--school-danger-dark);
    animation: fadeInUp 0.4s ease-out;
}

.error-message-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--school-danger);
}

.error-message-content { flex: 1; }

.error-message-title {
    font-weight: 600;
    margin-bottom: var(--school-space-1);
}

.success-message {
    display: flex;
    align-items: start;
    gap: var(--school-space-3);
    padding: var(--school-space-4);
    background-color: var(--school-success-pale);
    border-left: 4px solid var(--school-success);
    border-radius: var(--school-radius-md);
    color: var(--school-success-dark);
    animation: fadeInUp 0.4s ease-out;
}

.warning-message {
    display: flex;
    align-items: start;
    gap: var(--school-space-3);
    padding: var(--school-space-4);
    background-color: var(--school-warning-pale);
    border-left: 4px solid var(--school-warning);
    border-radius: var(--school-radius-md);
    color: var(--school-warning-dark);
    animation: fadeInUp 0.4s ease-out;
}

/* Toastr overrides */
.toast-container { z-index: var(--school-z-toast); }
.toast-success { background-color: var(--school-success) !important; }
.toast-error { background-color: var(--school-danger) !important; }
.toast-warning { background-color: var(--school-warning) !important; }
.toast-info { background-color: var(--school-info) !important; }

/* ======================================
   UTILITY CLASSES
   ====================================== */

/* Spacing */
.mt-safe { margin-top: var(--school-space-4); }
.mb-safe { margin-bottom: var(--school-space-4); }
.p-safe { padding: var(--school-space-4); }

/* Touch Target */
.touch-target {
    min-width: var(--school-touch-target);
    min-height: var(--school-touch-target);
}

/* Text Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Links */
a { text-decoration: none !important; }
a:hover { text-decoration: none !important; }
.menu-link { text-decoration: none !important; }

/* Focus States */
.btn:focus,
.dropdown-item:focus,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0891b2 !important;
    outline-offset: 2px !important;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--school-primary);
    outline-offset: 2px;
}

/* Dropdown Hover */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(8, 145, 178, 0.15) !important;
    color: #0891b2 !important;
}

/* Select2 */
.select2-results__option--highlighted[aria-selected] {
    background-color: #0891b2 !important;
    color: #ffffff !important;
}

/* ======================================
   MOBILE OPTIMIZATIONS
   ====================================== */

@media (max-width: 767.98px) {
    .layout-page {
        padding-bottom: 70px !important;
    }

    body {
        font-size: 16px;
    }

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md {
        padding-left: var(--school-space-4) !important;
        padding-right: var(--school-space-4) !important;
    }

    .card {
        border-radius: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card-header {
        padding: var(--school-space-3) var(--school-space-4) !important;
    }

    /* Better touch targets */
    .btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dropdown-item {
        justify-content: flex-start;
    }

    .btn {
        min-height: var(--school-touch-target);
        padding: var(--school-space-3) var(--school-space-5);
    }

    .btn-icon {
        min-width: var(--school-touch-target);
        min-height: var(--school-touch-target);
        padding: var(--school-space-2);
    }

    a:not(.btn) {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        padding: var(--school-space-1) 0;
    }

    .form-check-input {
        min-width: 24px;
        min-height: 24px;
        margin-right: var(--school-space-2);
    }

    /* Full width buttons on mobile */
    .d-grid-mobile {
        display: grid !important;
        width: 100% !important;
    }

    /* Adjust font sizes */
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.1rem !important; }

    /* Hide desktop elements */
    .hide-on-mobile { display: none !important; }

    /* Responsive Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack columns on mobile */
    .row.mobile-stack > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: var(--school-space-3);
    }

    /* Modal improvements */
    .modal-dialog {
        margin: var(--school-space-2);
    }
}

/* Fix Mobile Menu Z-Index and Width */
@media (max-width: 1199.98px) {
    #layout-menu, .layout-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 100000 !important;
        width: 260px !important;
        max-width: 85vw !important;
        transition: transform 0.25s ease !important;
    }

    .layout-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .layout-wrapper, .layout-container {
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        z-index: auto !important;
    }

    /* Ensure mobile menu scrolls properly */
    #layout-menu .menu-inner {
        overflow-y: auto;
        max-height: calc(100vh - 60px);
    }
}

/* Glassmorphism Bottom Nav */
.glass-nav-bottom {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

/* ======================================
   ACCESSIBILITY
   ====================================== */

/* Skip to main content */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--school-primary);
    color: white;
    padding: var(--school-space-2) var(--school-space-4);
    text-decoration: none;
    z-index: 9999;
}

.skip-to-main:focus {
    top: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .card {
        border-width: 2px;
    }

    .btn {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================================
   PRINT STYLES
   ====================================== */

@media print {
    .no-print,
    .layout-navbar,
    .layout-menu,
    footer,
    .btn,
    .navbar,
    .glass-nav-bottom {
        display: none !important;
    }

    body {
        background: white !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}

/* ========================================
   AUTH PAGES - Login/Register specific
   ======================================== */
.auth-bg {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 50%, #164e63 100%);
    min-height: 100vh;
}

.auth-card {
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: var(--shadow-2xl);
    max-width: 440px;
    width: 100%;
    padding: 2.5rem;
    animation: scaleIn 0.4s ease-out;
}

.auth-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1.5rem;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    font-size: 0.9375rem;
    color: #64748b;
    margin-bottom: 2rem;
}

.btn-google {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-weight: 500;
}

.btn-google:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* ========================================
   ERROR PAGES
   ======================================== */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--school-space-6);
}

.error-page-code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--school-primary);
    opacity: 0.1;
    margin-bottom: var(--school-space-4);
}

.error-page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--school-space-3);
}

.error-page-description {
    font-size: 1.125rem;
    color: var(--school-gray-600);
    margin-bottom: var(--school-space-6);
}