/**
 * Mobile CSS for Madani Maktab PWA
 * Optimized for Android devices
 * Level 2: Comprehensive mobile-first experience
 * 
 * Breakpoints:
 * - Mobile: 0-768px
 * - Tablet: 769-1024px
 * - Desktop: 1025px+
 */

/* ============================================================================
   BASE MOBILE STYLES
   ============================================================================ */

@media (max-width: 768px) {
    
    /* Reset mobile defaults */
    * {
        -webkit-tap-highlight-color: rgba(76, 175, 80, 0.2);
        -webkit-touch-callout: none;
    }
    
    html {
        font-size: 16px;
        overflow-x: hidden;
    }
    
    body {
        overflow-x: hidden;
        padding-bottom: 80px; /* Space for bottom navigation */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hide desktop navigation */
    .nav {
        display: none !important;
    }
    
    /* Full-width mobile containers - ULTRA COMPACT */
    .container, .main-content {
        width: 100%;
        max-width: 100vw;
        padding: 0 !important;  /* REMOVED padding - no empty space */
        margin: 0;
    }
    
    /* Mobile sections - ULTRA COMPACT (Remove Red Areas) */
    .section {
        padding: 0 0 60px 0 !important;  /* REMOVED top/side padding - no empty space */
        min-height: auto !important;
        margin: 0 !important;
    }
    
    /* Dashboard Section - ZERO Padding (Remove Red Empty Space) */
    #dashboard.section {
        padding: 0 !important;
        margin: 0 !important;
        background: #fafafa !important;
    }
    
    /* Section titles - Ultra compact */
    .section h2 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        padding: 6px 8px !important;  /* Minimal padding */
        font-weight: 700;
        background: white !important;
    }
    
    /* Dashboard title - Hidden or ultra compact */
    #dashboard h2 {
        display: none !important;  /* Remove title if not needed */
    }
    
    /* Reduce all vertical spacing on mobile - ULTRA COMPACT */
    .section > * {
        margin-top: 4px !important;  /* Reduced from 8px */
    }
    
    .section > *:first-child {
        margin-top: 0 !important;
    }
    
    /* Dashboard direct children - minimal spacing */
    #dashboard > * {
        margin-top: 4px !important;
    }
    
    #dashboard > *:first-child {
        margin-top: 0 !important;
    }
    
    /* ============================================================================
       FOOTER - HIDE ON MOBILE (Remove Red Area)
       ============================================================================ */
    
    /* Hide footer completely on mobile to save space */
    .footer {
        display: none !important;
    }
    
    /* Remove footer spacing from body */
    body {
        padding-bottom: 30px !important;  /* Only bottom nav space, no footer */
    }
    
    /* ============================================================================
       TYPOGRAPHY - Mobile Optimized
       ============================================================================ */
    
    h1 {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    
    h2 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    
    h3 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    h4 {
        font-size: 16px;
        line-height: 1.4;
    }
    
    p, span, div {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* ============================================================================
       TOUCH-FRIENDLY BUTTONS
       ============================================================================ */
    
    button, 
    .btn, 
    .btn-primary, 
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Delete All Button - Mobile */
    .btn-danger.delete-all {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
    
    .btn-danger.delete-all i {
        font-size: 12px !important;
        margin-right: 6px !important;
    }
    
    button:active, .btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    /* Small buttons (for action groups) */
    .btn-sm, button.small {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    /* Icon-only buttons */
    .btn-icon {
        min-width: 48px;
        min-height: 48px;
        padding: 12px !important;
        border-radius: 50%;
    }
    
    /* ============================================================================
       DASHBOARD - Mobile Optimized (COMPACT DESIGN)
       ============================================================================ */
    
    /* Stats cards - 2 column grid for ULTRA COMPACT layout */
    /* Admin Dashboard Stats Grid - 2 Column (Option A Implementation) */
    /* IMPORTANT: This only affects #dashboard, NOT #teachers-corner-section */
    #dashboard .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;  /* Reduced from 10px - REMOVE RED SPACE */
        width: 100% !important;
        padding: 4px 8px !important;  /* Minimal padding */
        margin: 0 !important;
    }
    
    /* Keep other stats containers as is (for compatibility) */
    .dashboard-stats,
    .stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        width: 100%;
    }
    
    /* Admin Dashboard Stat Cards - Ultra-Compact (Everything Smaller) */
    /* IMPORTANT: Only affects #dashboard, NOT #teachers-corner-section */
    #dashboard .stat-card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 8px 6px !important;  /* Reduced from 12px 10px */
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        margin: 0 !important;
        background: white;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 90px !important;
        height: 90px !important;
        align-self: stretch !important;
        position: relative;
        overflow: hidden;
    }
    
    #dashboard .stat-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    }
    
    /* Smaller icons - Ultra-compact */
    #dashboard .stat-card i {
        font-size: 14px !important;  /* Reduced from 18px */
        margin-bottom: 2px !important;  /* Reduced from 4px */
        opacity: 0.6 !important;
    }
    
    /* Smaller numbers - Ultra-compact */
    #dashboard .stat-card h3 {
        font-size: 1.3em !important;  /* Reduced from 1.5em */
        margin: 1px 0 !important;  /* Reduced from 2px */
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    
    /* Smaller labels - Ultra-compact */
    #dashboard .stat-card p {
        font-size: 9px !important;  /* Reduced from 11px */
        opacity: 0.7 !important;
        margin: 0 !important;
        line-height: 1.1 !important;  /* Reduced from 1.2 */
    }
    
    /* Ultra-compact mode for very small screens (400px and below) */
    @media (max-width: 400px) {
        /* Admin Dashboard */
        #dashboard .stat-card {
            min-height: 85px !important;  /* Slightly smaller but not too much */
            height: 85px !important;
            padding: 6px 4px !important;
        }
        
        #dashboard .stat-card h3 {
            font-size: 1.2em !important;  /* Even smaller */
        }
        
        #dashboard .stat-card i {
            font-size: 12px !important;  /* Even smaller icons */
        }
        
        #dashboard .stat-card p {
            font-size: 8px !important;  /* Even smaller labels */
        }
        
        #dashboard .stats-grid {
            gap: 6px !important;  /* Tighter gaps */
        }
        
        /* Attendance card - now uses same structure as performance card */
        /* Rules are handled by performance card CSS above */
        
        /* Performance tiers - even smaller */
        #dashboard .stat-card.performance-card .tier-count {
            font-size: 11px !important;
        }
        
        #dashboard .stat-card.performance-card .tier-label {
            font-size: 6px !important;
        }
        
        /* Teachers Corner - Slightly more compact for very small screens (400px) */
        #teachers-corner-section .grid {
            padding: 2px !important;
        }
    }
    
    /* Attendance card - Now uses same structure as performance card */
    #dashboard .stat-card.attendance-combined-card {
        grid-column: auto !important;
        padding: 6px 4px !important;  /* Reduced padding */
        min-height: 90px !important;
        height: 90px !important;
        justify-content: center !important;  /* Match performance card */
    }
    
    /* Use performance card structure - same classes */
    #dashboard .stat-card.attendance-combined-card .performance-tiers {
        display: flex !important;
        justify-content: space-around !important;
        width: 100% !important;
        gap: 2px !important;  /* Match performance card gap */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Use performance card tier structure - same classes */
    #dashboard .stat-card.attendance-combined-card .tier {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;  /* Match performance card gap */
        flex: 1 !important;  /* Equal width like performance tiers */
    }
    
    /* Use performance card tier count - same classes */
    #dashboard .stat-card.attendance-combined-card .tier-count {
        font-size: 13px !important;  /* Match performance tier-count */
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* Use performance card tier label - same classes */
    #dashboard .stat-card.attendance-combined-card .tier-label {
        font-size: 7px !important;  /* Match performance tier-label */
        opacity: 0.7 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;  /* Match performance card */
    }
    
    /* Hide icon if present */
    #dashboard .stat-card.attendance-combined-card > i {
        display: none !important;
    }

    /* Book Progress card - Ultra-compact */
    #dashboard #book-progress-counts { 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        min-height: auto !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide large icon on mobile to save space */
    #dashboard .stat-card[onclick*="openBookProgressWindow"] > i {
        display: none !important;
    }
    
    #dashboard .stat-card[onclick*="openBookProgressWindow"] > p {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }
    
    #dashboard #book-progress-content {
        width: 100% !important;
        gap: 3px !important;  /* Reduced gap */
    }
    
    #dashboard #book-progress-overall {
        font-size: 16px !important;  /* Reduced from 20px+ */
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    #dashboard #book-progress-content .h-2,
    #dashboard #book-progress-bar {
        height: 4px !important;  /* Reduced from 6px */
    }
    
    #dashboard #book-progress-stats {
        font-size: 7px !important;  /* Ultra small */
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* Communications card - Ultra-compact */
    #dashboard .stat-card[onclick*="openCommunicationsWindow"] > i {
        font-size: 12px !important;  /* Smaller icon */
        margin-bottom: 2px !important;
    }
    
    #dashboard .stat-card[onclick*="openCommunicationsWindow"] > p {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }
    
    #dashboard .stat-card .text-4xl {
        font-size: 14px !important;  /* Reduced from 18px */
        margin-bottom: 2px !important;  /* Reduced from 4px */
    }
    
    #dashboard .stat-card .text-3xl {
        font-size: 16px !important;  /* Reduced from 20px */
        margin: 1px 0 !important;  /* Reduced from 2px */
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    
    #dashboard .stat-card .text-2xl {
        font-size: 14px !important;  /* Reduced from 18px */
        margin: 1px 0 !important;  /* Reduced from 2px */
        font-weight: 700 !important;
        line-height: 1 !important;
    }
    
    #dashboard .stat-card .text-lg {
        font-size: 11px !important;  /* Reduced from 13px */
    }
    
    #dashboard .stat-card .text-sm {
        font-size: 8px !important;  /* Reduced from 10px */
        opacity: 0.7 !important;
        margin: 0 !important;
        line-height: 1.1 !important;  /* Reduced from 1.2 */
    }
    
    #dashboard #communications-content {
        gap: 6px !important;  /* Reduced gap */
    }
    
    /* Alerts card - Ultra-compact */
    #dashboard #alerts-card .alerts-preview { 
        display: none !important; 
    }
    
    #dashboard #alerts-card .alerts-header { 
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    #dashboard #alerts-card .alerts-header > i {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    
    #dashboard #alerts-card h3 {
        font-size: 1.3em !important;  /* Match other cards */
        margin: 1px 0 !important;
    }
    
    #dashboard #alerts-card p {
        font-size: 9px !important;
    }
    
    /* Performance card - Ultra-compact (3 tiers) */
    #dashboard .stat-card.performance-card {
        min-height: 90px !important;
        height: 90px !important;
        padding: 6px 4px !important;  /* Reduced padding */
        justify-content: center !important;
    }
    
    #dashboard .stat-card.performance-card .performance-tiers {
        display: flex !important;
        justify-content: space-around !important;
        width: 100% !important;
        gap: 2px !important;  /* Reduced from 4px */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #dashboard .stat-card.performance-card .tier {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;  /* Reduced from 2px */
        flex: 1 !important;
    }

    /* Ultra-small tier counts and labels */
    #dashboard .stat-card.performance-card .tier-count {
        font-size: 13px !important;  /* Reduced from 16px */
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    #dashboard .stat-card.performance-card .tier-label {
        font-size: 7px !important;  /* Reduced from 9px */
        opacity: 0.7 !important;
        margin: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
    }
    
    /* Hide star icon to save space */
    #dashboard .stat-card.performance-card > i {
        display: none !important;
    }
    
    /* Admin Dashboard Only - Reduce section padding for more space */
    #dashboard.section {
        padding: 10px 0 !important;
        margin-bottom: 10px !important;
    }
    
    /* Dashboard h2 already hidden above - this rule is redundant but kept for compatibility */
    
    /* General Container & Stats - Mobile */
    .container {
        padding: 0 15px !important;
    }
    
    /* Admin Dashboard Only - Reduce container padding for more space */
    #dashboard .container {
        padding: 0 10px !important;
    }
    
    #dashboard.section {
        padding: 10px 0 !important;
    }
    
    /* Header styles moved to 768px section for better control */
    
    /* Hijri Date Badge - Full Width Bar Under Header for Mobile */
    .hijri-date-dashboard {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 15px !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        text-align: center !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        box-sizing: border-box !important;
    }
    
    .hijri-date-dashboard .date-display {
        flex-direction: row !important;
        gap: 8px !important;
        font-size: 12px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .hijri-date-dashboard .date-display i {
        font-size: 13px !important;
        margin-right: 0 !important;
    }
    
    .hijri-date-dashboard .date-text {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    .hijri-date-dashboard .hijri-main {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    
    .hijri-date-dashboard .gregorian-sub {
        font-size: 11px !important;
        opacity: 0.85 !important;
        font-weight: 400 !important;
    }
    
    /* Even more compact on very small screens */
    @media (max-width: 480px) {
        .hijri-date-dashboard {
            padding: 5px 12px !important;
            font-size: 11px !important;
        }
        
        .hijri-date-dashboard .date-display {
            gap: 6px !important;
            font-size: 11px !important;
        }
        
        .hijri-date-dashboard .date-display i {
            font-size: 12px !important;
        }
        
        .hijri-date-dashboard .hijri-main {
            font-size: 11px !important;
        }
        
        .hijri-date-dashboard .gregorian-sub {
            font-size: 10px !important;
        }
    }
    
    /* ============================================================================
       TEACHERS CORNER STATS - 3 Row Layout (768px and above in mobile)
       ============================================================================ */
    
    /* Teachers Corner Stats - Compact Cards Layout */
    #teachers-corner-section #tc-stats-row-1,
    #teachers-corner-section #tc-stats-row-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;  /* Force 2 columns */
        gap: 6px !important;
        margin-bottom: 6px !important;
    }
    
    #teachers-corner-section #tc-stats-row-2 {
        margin-bottom: 6px !important;
        width: 100% !important;
    }
    
    /* Row 1 & Row 3: 2-column cards (Total/Inactive, Messages/Performance) */
    #teachers-corner-section #tc-stats-row-1 .stat-card,
    #teachers-corner-section #tc-stats-row-3 .stat-card {
        min-height: 80px !important;
        height: 80px !important;
        padding: 6px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;  /* Consistent gap between elements */
    }
    
    #teachers-corner-section #tc-stats-row-1 .stat-card i,
    #teachers-corner-section #tc-stats-row-3 .stat-card i {
        font-size: 22px !important;  /* Slightly smaller for better balance */
        margin: 0 !important;  /* Remove margin, use gap instead */
        line-height: 1 !important;
    }
    
    #teachers-corner-section #tc-stats-row-1 .stat-card h3,
    #teachers-corner-section #tc-stats-row-3 .stat-card h3,
    #teachers-corner-section #tc-stats-row-3 .stat-card #tc-messages-count {
        font-size: 18px !important;  /* Slightly smaller for better balance */
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* Messages card styling */
    #teachers-corner-section #tc-stats-row-3 .stat-card #tc-messages-count {
        color: #6366f1 !important; /* Indigo color */
    }
    
    #teachers-corner-section #tc-stats-row-1 .stat-card p,
    #teachers-corner-section #tc-stats-row-3 .stat-card p {
        font-size: 10px !important;  /* Slightly smaller */
        margin: 0 !important;  /* Remove margin, use gap instead */
        line-height: 1.2 !important;
        text-align: center !important;
        opacity: 0.8 !important;
    }
    
    /* Row 2: Full-width attendance card (Present, Absent, Percentage) */
    #teachers-corner-section #tc-stats-row-2 .stat-card {
        min-height: 80px !important;
        height: 80px !important;
        padding: 8px 4px !important;  /* Slightly more vertical padding */
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        display: flex !important;
    }
    
    /* Hide any icon or extra content in attendance card - only show performance tiers */
    #teachers-corner-section #tc-stats-row-2 .stat-card > i,
    #teachers-corner-section #tc-stats-row-2 .stat-card i:not(.tier-count):not(.tier-label),
    #teachers-corner-section #tc-stats-row-2 .stat-card i.fas,
    #teachers-corner-section #tc-stats-row-2 .stat-card i.fa,
    #teachers-corner-section #tc-stats-row-2 .stat-card .attendance-values-mobile,
    #teachers-corner-section #tc-stats-row-2 .stat-card .attendance-value-item {
        display: none !important;
    }
    
    /* Ensure only performance-tiers content shows - hide everything else */
    #teachers-corner-section #tc-stats-row-2 .stat-card > *:not(.performance-tiers) {
        display: none !important;
    }
    
    /* Make sure performance-tiers is visible and properly positioned */
    #teachers-corner-section #tc-stats-row-2 .stat-card .performance-tiers {
        display: flex !important;
    }
    
    /* Attendance card uses same structure as main dashboard */
    #teachers-corner-section #tc-stats-row-2 .performance-tiers {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        gap: 4px !important;  /* Slightly more gap for better spacing */
        margin: 0 !important;
        padding: 0 8px !important;  /* Horizontal padding for better balance */
        height: 100% !important;
    }
    
    #teachers-corner-section #tc-stats-row-2 .tier {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;  /* Slightly more gap between count and label */
        flex: 1 !important;
    }
    
    #teachers-corner-section #tc-stats-row-2 .tier-count {
        font-size: 14px !important;  /* Slightly larger for better visibility */
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    #teachers-corner-section #tc-stats-row-2 .tier-label {
        font-size: 8px !important;  /* Slightly larger for readability */
        opacity: 0.75 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* Performance tiers in Row 3 - compact */
    #teachers-corner-section #tc-stats-row-3 .performance-tiers {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        gap: 4px !important;  /* Slightly more gap for better spacing */
        padding: 0 8px !important;  /* Horizontal padding for better balance */
        margin: 0 !important;
        height: 100% !important;
    }
    
    #teachers-corner-section #tc-stats-row-3 .tier {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;  /* Slightly more gap between count and label */
        flex: 1 !important;
    }
    
    #teachers-corner-section #tc-stats-row-3 .tier-count {
        font-size: 13px !important;  /* Slightly larger for better visibility */
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    #teachers-corner-section #tc-stats-row-3 .tier-label {
        font-size: 7px !important;  /* Slightly larger for readability */
        opacity: 0.75 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* Admin Dashboard Only - 2 Column Grid (Option A) */
    /* Note: Teachers Corner has its own separate styling - DO NOT affect it */
    #dashboard .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    #dashboard .stat-card {
        padding: 12px 10px !important;
        height: 90px !important;
        min-height: 90px !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    #dashboard .stat-card h3 {
        font-size: 1.5em !important;
        margin: 2px 0 !important;
    }
    
    #dashboard .stat-card p {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    #dashboard .stat-card i {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }
    
    /* Hide Dashboard title on mobile to save space */
    #dashboard h2 {
        display: none !important;
    }
    
    .form,
    .recent-activity {
        padding: 12px 16px !important;  /* Reduced from 20px */
    }
    
    .settings-content {
        padding: 0 !important;  /* Ultra compact - no padding */
    }
    
    /* ============================================================================
       STUDENT PHOTO POPUP MODAL
       ============================================================================ */
    
    #student-photo-popup-modal {
        z-index: 99999 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(0,0,0,0.9) !important;
    }
    
    #student-photo-popup-modal img {
        max-width: 95vw !important;
        max-height: 90vh !important;
        width: auto !important;
        height: auto !important;
        min-width: 300px !important; /* Minimum size to ensure visibility */
        min-height: 300px !important;
        border-radius: 12px !important;
        object-fit: contain !important;
    }
    
    /* Ensure the container allows full size */
    #student-photo-popup-modal > div {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    
    #student-photo-popup-modal button {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
        background: rgba(255,255,255,0.25) !important;
        border: 2px solid rgba(255,255,255,0.5) !important;
    }
    
    #student-photo-popup-modal button:active {
        background: rgba(255,255,255,0.4) !important;
        transform: scale(0.95) !important;
    }

    /* ============================================================================
       MODALS - Ultra Compact with Overflow Fixes
       ============================================================================ */
    
    .modal-content {
        margin: 5% auto !important;           /* Reduced from 20% - more space */
        padding: 12px 16px !important;        /* Reduced from 20px - more compact */
        max-height: 90vh !important;           /* Prevent overflow */
        overflow-y: auto !important;          /* Enable scrolling */
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        position: relative !important;
        width: 95% !important;
        max-width: 500px !important;
        box-sizing: border-box !important;
    }
    
    /* Modal Header - Compact */
    .modal-content h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-right: 32px !important;       /* Space for close button */
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }
    
    /* Close Button - Always Visible and Accessible */
    .modal-content .close,
    .modal-content button.close,
    .modal-content .close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 24px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        z-index: 1001 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #666 !important;
        transition: all 0.2s ease !important;
        border-radius: 50% !important;
        line-height: 1 !important;
    }
    
    .modal-content .close:hover,
    .modal-content .close:active,
    .modal-content button.close:hover,
    .modal-content button.close:active {
        background: #f5f5f5 !important;
        color: #333 !important;
        transform: scale(1.1) !important;
    }
    
    /* Modal Buttons Container - Compact and Sticky */
    .modal-buttons,
    .modal-actions,
    .form-actions {
        display: flex !important;
        gap: 8px !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e0e0e0 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 10 !important;
    }
    
    /* Modal Buttons - Compact */
    .modal-buttons .btn,
    .modal-actions .btn,
    .form-actions .btn {
        flex: 1 !important;
        min-height: 40px !important;          /* Reduced from 48px */
        padding: 8px 12px !important;         /* Reduced from default */
        font-size: 14px !important;           /* Reduced from 16px */
        border-radius: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    
    /* Modal Body - Scrollable */
    .modal-body,
    .modal-content > div:not(.modal-buttons):not(.modal-actions):not(.form-actions) {
        max-height: calc(90vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }
    
    /* Modal Form Elements - Compact */
    .modal-content .form-group {
        margin-bottom: 12px !important;
    }
    
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        min-height: 36px !important;
        padding: 8px 12px !important;
        font-size: 15px !important;
    }
    
    /* Modal Text - Compact */
    .modal-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    
    /* Modal Lists - Compact */
    .modal-content ul,
    .modal-content ol {
        margin: 12px 0 !important;
        padding-left: 24px !important;
    }
    
    .modal-content li {
        margin-bottom: 6px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Dashboard alerts - ULTRA COMPACT (Admin Dashboard Only) */
    #dashboard .dashboard-alerts-section {
        margin-top: 4px !important;  /* Reduced from 10px */
        margin-bottom: 4px !important;  /* Reduced from 10px */
        padding: 0 8px !important;  /* Minimal side padding */
    }
    
    #dashboard .dashboard-alerts-section h3 {
        font-size: 13px !important;  /* Reduced from 1.1em */
        margin-bottom: 6px !important;  /* Reduced from 8px */
        padding: 4px 8px !important;
    }
    
    #dashboard .alert-card {
        padding: 10px !important;
        margin-bottom: 6px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }
    
    /* Class-wise stats - ULTRA COMPACT (Remove Red Area) */
    #dashboard .class-wise-stats {
        margin-top: 4px !important;  /* Reduced from 8px */
        margin-bottom: 4px !important;  /* Reduced from 8px */
        padding: 0 8px !important;  /* Minimal side padding */
    }
    
    #dashboard .class-wise-stats h3 {
        font-size: 13px !important;  /* Reduced from 1em */
        margin-bottom: 4px !important;  /* Reduced from 6px */
        padding: 4px 8px !important;  /* Minimal padding */
        font-weight: 600 !important;
        background: white !important;
        border-radius: 6px 6px 0 0 !important;
    }
    
    #dashboard .class-stats-container {
        margin-top: 0 !important;  /* REMOVED - no gap after title */
        background: white;
        border-radius: 0 0 8px 8px !important;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    
    .class-stats-scrollable {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .class-stats-table {
        display: table;
        width: max-content;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    .class-stats-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #4CAF50;
        color: white;
    }
    
    .class-stats-table thead th {
        padding: 6px 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }
    
    /* Admin Dashboard Only - Ultra Compact class stats table */
    #dashboard .class-stats-table th,
    #dashboard .class-stats-table td {
        padding: 6px 8px !important;
        text-align: center;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        white-space: nowrap;
        min-width: 55px !important;
        font-size: 11px !important;
        line-height: 1.3;
    }
    
    /* Admin Dashboard Only - STICKY LEFT COLUMN (Class Names) - Excel Frozen Pane Effect */
    #dashboard .class-stats-table th:first-child,
    #dashboard .class-stats-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 11 !important;
        background: #4CAF50 !important;
        color: white !important;
        font-weight: 600 !important;
        min-width: 90px !important;
        text-align: left !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-right: 2px solid #388E3C;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
        font-size: 11px !important;
    }
    
    .class-stats-table tbody tr td:first-child {
        background: white;
        color: #333;
        font-weight: 500;
        border-right: 2px solid #e0e0e0;
        padding: 6px 8px !important;
    }
    
    .class-stats-table tbody tr:nth-child(even) td:first-child {
        background: #f8f9fa;
    }
    
    .class-stats-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }
    
    /* Data cells styling - Compact */
    .class-stats-table td:not(:first-child) {
        background: white;
        color: #333;
        font-weight: 500;
        padding: 6px 8px !important;
    }
    
    .class-stats-table tbody tr:nth-child(even) td:not(:first-child) {
        background: #f8f9fa;
    }
    
    /* Scroll indicator - Compact */
    .class-stats-container::after {
        content: "← Scroll horizontally →";
        display: block;
        text-align: center;
        padding: 4px 8px;
        font-size: 10px;
        color: #666;
        background: #f5f5f5;
        border-top: 1px solid #e0e0e0;
    }
    
    /* Hide scroll indicator on larger screens */
    /* Desktop View - Preserve Original Layout */
@media (min-width: 769px) {
    /* Student Profile Modal - Desktop View */
    #student-profile-modal .student-profile-modal-content {
        width: 85% !important;
        max-width: 1200px !important;
        height: 90vh !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 12px !important;
        position: relative !important;
        animation: none !important;
    }
    
    /* Hide mobile header on desktop */
    #student-profile-modal .student-profile-mobile-header {
        display: none !important;
    }
    
    /* Show desktop header */
    #student-profile-modal .student-profile-desktop-header {
        display: block !important;
    }
    
    /* Hide bottom tabs on desktop */
    #student-profile-modal .student-profile-bottom-tabs {
        display: none !important;
    }
    
    /* Show desktop tabs */
    #student-profile-modal .student-profile-desktop-tabs {
        display: block !important;
    }
    
    /* Adjust content padding for desktop */
    #student-profile-modal #student-profile-content {
        padding-bottom: 20px !important;
    }
}

@media (min-width: 768px) {
        .class-stats-container::after {
            display: none;
        }
    }
    
    /* Old grid layout - hide on mobile */
    .class-stats-grid {
        display: none !important;
    }
    
    /* Book progress - compact */
    .book-progress-summary {
        padding: 12px !important;
        border-radius: 10px !important;
        margin-top: 12px;
    }
    
    .book-progress-summary h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    /* ============================================================================
       COLLAPSIBLE SECTIONS (Reduce Scrolling)
       ============================================================================ */
    
    .collapsible-section {
        background: white;
        border-radius: 12px;
        margin-bottom: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    
    .collapsible-header {
        padding: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background: white;
        border: none;
        width: 100%;
        text-align: left;
        transition: background 0.2s ease;
    }
    
    .collapsible-header:active {
        background: #f5f5f5;
    }
    
    .collapsible-header h3 {
        font-size: 15px !important;
        margin: 0 !important;
        font-weight: 600;
        color: #333;
    }
    
    .collapsible-icon {
        font-size: 14px;
        color: #666;
        transition: transform 0.3s ease;
    }
    
    .collapsible-section.expanded .collapsible-icon {
        transform: rotate(180deg);
    }
    
    .collapsible-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding: 0 14px;
    }
    
    .collapsible-section.expanded .collapsible-content {
        max-height: 2000px;
        padding: 0 14px 14px 14px;
    }
    
    /* Hide detailed sections by default on mobile */
    .dashboard-alerts-section,
    .class-stats-section,
    .performance-section,
    .book-progress-section {
        background: white;
        border-radius: 12px;
        margin-top: 10px;
        padding: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    
    .dashboard-alerts-section h3,
    .class-stats-section h3,
    .performance-section h3,
    .book-progress-section h3 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
        color: #4CAF50;
        font-weight: 600;
    }
    
    /* Compact section headers */
    #dashboard .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    #dashboard .section-header h3 {
        font-size: 14px !important;
        margin: 0 !important;
        font-weight: 600;
        color: #4CAF50;
    }
    
    /* View All buttons - compact */
    #dashboard .view-all-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-height: 32px !important;
        border-radius: 16px;
    }
    
    /* ============================================================================
       FORMS - Mobile Optimized
       ============================================================================ */
    
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 10px !important;
        border: 2px solid #e0e0e0 !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s ease;
    }
    
    input:focus, select:focus, textarea:focus {
        border-color: #4CAF50 !important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }
    
    /* Labels */
    label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
        color: #333;
    }
    
    /* Form groups */
    .form-group {
        margin-bottom: 20px;
    }
    
    /* Select dropdowns */
    select {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 12px;
        padding-right: 40px !important;
    }
    
    /* Checkboxes and radios - bigger touch targets */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        width: 24px;
        height: 24px;
        cursor: pointer;
    }
    
    /* ============================================================================
       TABLES - Compact with Horizontal Scroll (keep table structure)
       ============================================================================ */
    
    /* Make all tables horizontally scrollable on mobile */
    table:not(.class-stats-table) {
        display: table !important;
        width: 100%;
        font-size: 13px !important;
    }
    
    table:not(.class-stats-table) thead {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #f8f9fa;
    }
    
    table:not(.class-stats-table) th,
    table:not(.class-stats-table) td {
        padding: 10px 8px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    
    table:not(.class-stats-table) th {
        font-weight: 600 !important;
        background: #f8f9fa !important;
    }
    
    /* Table containers need horizontal scroll */
    .students-table-container,
    .table-container,
    .students-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Make buttons in tables smaller */
    table button, table .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
    }

    /* Ensure the class-wise stats table remains a real table on mobile */
    .class-stats-table { display: table !important; }
    .class-stats-table thead { display: table-header-group !important; }
    .class-stats-table tbody { display: table-row-group !important; }
    .class-stats-table tr { display: table-row !important; }
    .class-stats-table th, .class-stats-table td { display: table-cell !important; }
    .class-stats-table td:before { content: none !important; }
    
    /* ============================================================================
       BOTTOM NAVIGATION BAR
       ============================================================================ */
    
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: white;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
        z-index: 1000;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        gap: 4px;
    }
    
    .mobile-bottom-nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #666;
        font-size: 10px;
        padding: 6px 12px;
        transition: all 0.2s ease;
        position: relative;
        gap: 2px;
        flex-shrink: 0;
        white-space: nowrap;
        min-width: 60px;
        border-radius: 8px;
    }
    
    .mobile-bottom-nav .nav-item i {
        font-size: 18px;
        transition: all 0.2s ease;
    }
    
    .mobile-bottom-nav .nav-item span {
        font-size: 10px;
        font-weight: 500;
    }
    
    .mobile-bottom-nav .nav-item.active {
        color: #667eea;
        background: rgba(102, 126, 234, 0.1);
    }
    
    .mobile-bottom-nav .nav-item.active i {
        transform: scale(1.05);
        color: #667eea;
    }
    
    .mobile-bottom-nav .nav-item:active {
        background: rgba(102, 126, 234, 0.15);
        transform: scale(0.95);
    }
    
    .mobile-bottom-nav .nav-item:hover {
        background: rgba(0, 0, 0, 0.03);
    }
    
    /* Badge for notifications */
    .mobile-bottom-nav .nav-item .badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 16px);
        background: #f44336;
        color: white;
        border-radius: 10px;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: bold;
        min-width: 18px;
        text-align: center;
    }
    
    /* ============================================================================
       TEACHERS CORNER BOTTOM NAVIGATION
       ============================================================================ */
    
    /* Teachers Corner Bottom Nav - Match Main Dashboard Design */
    .teachers-corner-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px !important;  /* Match main nav height */
        background: white;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -1px 3px rgba(0,0,0,0.08) !important;  /* Match main nav shadow */
        z-index: 1000;
        padding: 8px 12px !important;  /* Match main nav padding */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
        overflow-x: auto !important;  /* Match main nav horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Firefox */
        gap: 4px !important;  /* Match main nav gap */
    }
    
    .teachers-corner-bottom-nav::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari - Match main nav */
    }
    
    /* STRICT: Hide TC nav for admin users always */
    .teachers-corner-bottom-nav.admin-hidden {
        display: none !important;
    }
    
    /* Hide TC nav by default - only show when explicitly enabled for normal users */
    body.admin-role .teachers-corner-bottom-nav {
        display: none !important;
    }
    
    .teachers-corner-bottom-nav .tc-nav-item {
        display: flex !important;  /* Match main nav */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #666 !important;  /* Match main nav color */
        font-size: 10px !important;  /* Match main nav font size */
        padding: 6px 12px !important;  /* Match main nav padding */
        transition: all 0.2s ease !important;
        position: relative !important;
        gap: 2px !important;  /* Match main nav gap */
        flex-shrink: 0 !important;  /* Match main nav */
        white-space: nowrap !important;  /* Match main nav */
        min-width: 60px !important;  /* Match main nav */
        border-radius: 8px !important;  /* Match main nav border radius */
        cursor: pointer !important;
        background: transparent !important;
    }
    
    .teachers-corner-bottom-nav .tc-nav-item i {
        font-size: 18px !important;  /* Match main nav icon size */
        transition: all 0.2s ease !important;
    }
    
    .teachers-corner-bottom-nav .tc-nav-item span {
        font-size: 10px !important;  /* Match main nav */
        font-weight: 500 !important;  /* Match main nav */
    }
    
    .teachers-corner-bottom-nav .tc-nav-item.active {
        color: #667eea !important;  /* Match main nav active color (purple) */
        background: rgba(102, 126, 234, 0.1) !important;  /* Match main nav active background */
    }
    
    .teachers-corner-bottom-nav .tc-nav-item.active i {
        transform: scale(1.05) !important;  /* Match main nav */
        color: #667eea !important;  /* Match main nav active color */
    }
    
    .teachers-corner-bottom-nav .tc-nav-item:active {
        background: rgba(102, 126, 234, 0.15) !important;  /* Match main nav */
        transform: scale(0.95) !important;  /* Match main nav */
    }
    
    .teachers-corner-bottom-nav .tc-nav-item:hover {
        background: rgba(0, 0, 0, 0.03) !important;  /* Match main nav */
    }
    
    /* ============================================================================
       MOBILE MORE MENU
       ============================================================================ */
    
    .mobile-more-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
    }
    
    .mobile-more-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        animation: fadeIn 0.2s ease;
    }
    
    .mobile-more-content {
        position: absolute;
        bottom: 65px;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        max-height: 70vh;
        overflow-y: auto;
        animation: slideUpMenu 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    }
    
    @keyframes slideUpMenu {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .mobile-more-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .mobile-more-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
    
    .mobile-more-header .close-btn {
        background: #f5f5f5;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .mobile-more-header .close-btn:active {
        background: #e0e0e0;
    }
    
    .mobile-more-list {
        padding: 8px 0;
    }
    
    .mobile-more-item {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        text-decoration: none;
        color: #333;
        font-size: 16px;
        transition: background 0.2s ease;
        cursor: pointer;
    }
    
    .mobile-more-item:active {
        background: #f5f5f5;
    }
    
    .mobile-more-item i {
        font-size: 20px;
        width: 32px;
        color: #4CAF50;
    }
    
    .mobile-more-item span {
        flex: 1;
        margin-left: 12px;
    }
    
    /* ============================================================================
       MOBILE HEADER
       ============================================================================ */
    
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        z-index: 999;
        height: 60px;
    }
    
    .mobile-header-title {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin: 0;
    }
    
    .mobile-header .menu-icon {
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    
    .mobile-header .menu-icon:active {
        background: rgba(0,0,0,0.05);
    }
    
    /* Ultra Compact Header - REMOVE RED AREA */
    .header { 
        padding: 4px 0 !important;  /* Reduced from 6px */
        min-height: 36px !important;  /* Reduced from auto */
        margin-bottom: 0 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    }
    
    .header .container {
        padding: 0 8px !important;  /* Reduced from 15px - minimal padding */
    }
    
    /* Remove any spacing after hijri date bar */
    .hijri-date-dashboard + nav,
    .hijri-date-dashboard + .main,
    .hijri-date-dashboard + * {
        margin-top: 0 !important;
    }
    
    /* Ensure nav doesn't have extra top margin */
    .nav {
        margin-top: 0 !important;
    }
    
    .header h1 { 
        font-size: 1.1em !important;  /* Reduced from 1.3em */
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }
    
    .header h1 i {
        font-size: 1em !important;  /* Reduced from 1.1em */
        margin-right: 4px !important;  /* Reduced from 6px */
    }
    
    .header p {
        display: none !important;  /* HIDE subtitle to save space */
    }
    
    .header-content { 
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        gap: 6px !important;  /* Reduced from 8px */
        min-height: 36px !important;  /* Reduced from 40px */
        padding: 2px 0 !important;
    }
    
    /* Header controls - Ultra compact */
    .header-controls {
        gap: 4px !important;
    }
    
    .language-selector,
    .user-info {
        font-size: 11px !important;
    }
    
    .header-text {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .header p { 
        display: none !important; 
    }
    
    .header-controls {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .language-selector { 
        padding: 4px 8px !important; 
        border-radius: 12px !important;
        min-height: 32px !important;
    }
    
    .language-selector label { 
        font-size: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .language-selector select { 
        font-size: 11px !important; 
        padding: 0 !important;
        min-height: auto !important;
    }
    
    .user-info { 
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .user-info span {
        display: none !important; /* Hide username text on mobile to save space */
    }
    
    .logout-btn { 
        padding: 6px 10px !important; 
        font-size: 12px !important; 
        border-radius: 12px !important;
        min-height: 32px !important;
        min-width: 32px !important;
    }
    
    /* Even more compact on very small screens */
    @media (max-width: 480px) {
        .header { 
            padding: 5px 0 !important; 
        }
        
        .header h1 { 
            font-size: 1.2em !important;
        }
        
        .header h1 i {
            font-size: 1em !important;
            margin-right: 4px !important;
        }
        
        .header-content {
            gap: 6px !important;
            min-height: 36px !important;
        }
        
        .language-selector { 
            padding: 3px 6px !important; 
            min-height: 28px !important;
        }
        
        .language-selector label { 
            font-size: 12px !important;
        }
        
        .logout-btn { 
            padding: 5px 8px !important;
            min-height: 28px !important;
            min-width: 28px !important;
        }
    }
    
    /* Mobile Menu Toggle - Desktop nav hides on mobile */
    .mobile-menu-toggle {
        display: block !important;
    }
    
    /* Navigation List - Hidden by default, shown when active */
    .nav-list {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        background: white !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
    
    .nav-list.active {
        display: flex !important;
    }
    
    /* Navigation Links - Touch-friendly */
    .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
        border-left: none !important;
        white-space: nowrap !important;
        min-height: 48px !important;
    }
    
    .nav-link:hover,
    .nav-link.active,
    .nav-link.dropdown-toggle:hover,
    .nav-link.dropdown-toggle.active {
        border-bottom: 1px solid #eee !important;
        border-left: 4px solid #3498db !important;
    }

    /* ============================================================================
       CARDS & LAYOUTS
       ============================================================================ */
    
    .card, .info-card, .content-card {
        background: white;
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
    }
    
    .card-header {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .card-title {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }
    
    /* ============================================================================
       MODALS - Mobile Full-Screen (opt-in via .mobile-fullscreen)
       ============================================================================ */
    
    .mobile-fullscreen.modal, .mobile-fullscreen.modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Fullscreen Modal - Compact */
    .mobile-fullscreen .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-fullscreen .modal-header {
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 10 !important;
        padding: 12px 16px !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    
    /* Student Profile Modal - Mobile */
    /* ============================================================================
       STUDENT PROFILE MODAL - Ultra Compact (Like Attendance Page)
       ============================================================================ */
    
    /* ============================================================================
       STUDENT PROFILE MODAL - Mobile Full-Screen Redesign
       ============================================================================ */
    
    /* Modal Container - Full Screen on Mobile */
    #student-profile-modal {
        z-index: 9999 !important; /* Lower than photo popup (99999) */
    }
    
    #student-profile-modal .student-profile-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        animation: slideUpModal 0.3s ease-out !important;
    }
    
    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes slideDownModal {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(100%);
            opacity: 0;
        }
    }
    
    #student-profile-modal.closing .student-profile-modal-content {
        animation: slideDownModal 0.3s ease-in !important;
    }
    
    /* Mobile Header - Sticky at Top */
    #student-profile-modal .student-profile-mobile-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        min-height: 64px !important;
    }
    
    #student-profile-modal .student-profile-back-btn,
    #student-profile-modal .student-profile-close-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
        flex-shrink: 0 !important;
    }
    
    #student-profile-modal .student-profile-back-btn:active,
    #student-profile-modal .student-profile-close-btn:active {
        background: rgba(255, 255, 255, 0.3) !important;
    }
    
    #student-profile-modal .student-profile-mobile-header-info {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 12px !important;
    }
    
    /* Desktop Header - Hidden on Mobile */
    #student-profile-modal .student-profile-desktop-header {
        display: none !important;
    }
    
    /* Old header styles - keep for backward compatibility */
    #student-profile-modal .p-4.border-b.student-profile-desktop-header {
        display: none !important;
    }
    
    /* Close Button - Compact */
    #student-profile-modal .flex.justify-end button {
        width: 28px !important;
        height: 28px !important;
        font-size: 20px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }
    
    /* Student Profile Tabs - Sticky (also matches #student-profile-content selector above) */
    
    #student-profile-modal nav.flex {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    #student-profile-modal nav.flex::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Student Header Content - Ultra Compact */
    #student-profile-modal #student-header-content {
        margin-bottom: 0 !important;
    }
    
    #student-profile-modal #student-header-content > div {
        padding: 8px 10px !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    
    /* Photo Section - Compact */
    #student-profile-modal .relative {
        flex-shrink: 0 !important;
    }
    
    #student-profile-modal .w-24 {
        width: 3.5rem !important;  /* 56px instead of 96px */
        height: 3.5rem !important;
        min-width: 3.5rem !important;
        min-height: 3.5rem !important;
    }
    
    #student-profile-modal .flex.justify-center.space-x-1 {
        margin-top: 2px !important;
        gap: 4px !important;
    }
    
    #student-profile-modal .flex.justify-center.space-x-1 button {
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
    
    /* Student Name - Compact */
    #student-profile-modal .flex.items-center.space-x-4 {
        gap: 8px !important;
        align-items: center !important;
    }
    
    #student-profile-modal h2.text-xl {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    
    #student-profile-modal .text-sm {
        font-size: 11px !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }
    
    /* Header Layout - Compact (Photo + Info on left, Print buttons on right) */
    #student-profile-modal .flex.items-center.justify-between {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    /* Student Info Section - Takes available space */
    #student-profile-modal .flex.items-center.space-x-4 {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Print Buttons - Ultra Compact (Horizontal on mobile) */
    #student-profile-modal .flex.space-x-2 {
        gap: 4px !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
    
    #student-profile-modal #print-student-detail-btn,
    #student-profile-modal #show-custom-print-modal-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        min-height: 26px !important;
        border-radius: 6px !important;
        gap: 3px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    #student-profile-modal #print-student-detail-btn i,
    #student-profile-modal #show-custom-print-modal-btn i {
        font-size: 10px !important;
    }
    
    #student-profile-modal #print-student-detail-btn span,
    #student-profile-modal #show-custom-print-modal-btn span {
        font-size: 10px !important;
    }
    
    /* Profile Content - Full Screen Scrollable */
    #student-profile-modal #student-profile-content {
        flex: 1 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 80px !important; /* Space for bottom tabs */
        max-height: none !important;
    }
    
    /* Bottom Tab Navigation - Fixed at Bottom */
    #student-profile-modal .student-profile-bottom-tabs {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
        z-index: 100 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        min-height: 60px !important;
        justify-content: space-around !important;
        align-items: center !important;
    }
    
    #student-profile-modal .student-profile-bottom-tab {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        min-height: 60px !important;
        border: none !important;
        background: transparent !important;
        color: #666 !important;
        font-size: 10px !important;
        cursor: pointer !important;
        transition: color 0.2s ease !important;
        gap: 4px !important;
    }
    
    #student-profile-modal .student-profile-bottom-tab i {
        font-size: 20px !important;
        margin-bottom: 2px !important;
    }
    
    #student-profile-modal .student-profile-bottom-tab span {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    
    #student-profile-modal .student-profile-bottom-tab.active {
        color: #667eea !important;
    }
    
    #student-profile-modal .student-profile-bottom-tab:active {
        background: rgba(102, 126, 234, 0.1) !important;
    }
    
    /* Desktop Tab Navigation - Hidden on Mobile */
    #student-profile-modal .student-profile-desktop-tabs {
        display: none !important;
    }
    
    /* Tab Content - Show/Hide with Transitions */
    #student-profile-modal .profile-tab-content {
        display: none !important;
        animation: fadeInTab 0.3s ease-in !important;
    }
    
    #student-profile-modal .profile-tab-content.active {
        display: block !important;
    }
    
    @keyframes fadeInTab {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Loading State */
    #student-profile-modal .student-profile-loading {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 3rem !important;
        color: #666 !important;
    }
    
    /* Hide loading when hidden class is added */
    #student-profile-modal .student-profile-loading.hidden {
        display: none !important;
    }
    
    #student-profile-modal .student-profile-loading .loading-spinner {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
        color: #667eea !important;
    }
    
    /* Swipe Container Styles */
    #student-profile-modal .student-profile-swipe-container {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Student Info Cards - Modern Card Design */
    #student-profile-modal .bg-gray-50 {
        background: white !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    #student-profile-modal .space-y-2,
    #student-profile-modal .space-y-4,
    #student-profile-modal .space-y-6 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Overview Tab - Card Grid */
    #student-profile-modal #profile-overview .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    #student-profile-modal #profile-overview .grid > div {
        background: white !important;
        border-radius: 10px !important;
        padding: 12px !important;
        text-align: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #f0f0f0 !important;
    }
    
    #student-profile-modal #profile-overview .text-lg {
        font-size: 18px !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }
    
    #student-profile-modal #profile-overview .text-xs {
        font-size: 11px !important;
        color: #666 !important;
    }
    
    /* Attendance Tab - Card Layout */
    #student-profile-modal #profile-attendance .bg-green-100,
    #student-profile-modal #profile-attendance .bg-red-100,
    #student-profile-modal #profile-attendance .bg-yellow-100,
    #student-profile-modal #profile-attendance .bg-blue-100 {
        border-radius: 10px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    #student-profile-modal #profile-attendance .text-2xl {
        font-size: 24px !important;
        font-weight: bold !important;
    }
    
    /* Logs Tab - Modern Card Design (Like Communications) */
    #student-profile-modal #profile-logs .bg-gray-50 {
        background: white !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        border-left: 4px solid #667eea !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
    }
    
    #student-profile-modal #profile-logs .bg-gray-50:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    #student-profile-modal #profile-logs .border-l-4.border-red-500 {
        border-left-color: #F44336 !important;
    }
    
    #student-profile-modal #profile-logs .border-l-4.border-blue-500 {
        border-left-color: #667eea !important;
    }
    
    /* Score History Tab - Timeline Style */
    #student-profile-modal #profile-score-history .bg-gray-50 {
        background: white !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        border-left: 4px solid #4CAF50 !important;
        position: relative !important;
    }
    
    #student-profile-modal #profile-score-history .bg-gray-50::before {
        content: '' !important;
        position: absolute !important;
        left: -2px !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 2px !important;
        background: #4CAF50 !important;
    }
    
    /* Empty States */
    #student-profile-modal .text-center.text-gray-500 {
        padding: 3rem 1rem !important;
        text-align: center !important;
    }
    
    #student-profile-modal .text-center.text-gray-500 i {
        font-size: 3rem !important;
        margin-bottom: 1rem !important;
        opacity: 0.3 !important;
    }
    
    /* Floating Action Buttons (FAB) - Print/Edit */
    #student-profile-modal .student-profile-fab {
        position: fixed !important;
        bottom: 80px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: #667eea !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        cursor: pointer !important;
        z-index: 99 !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
    }
    
    #student-profile-modal .student-profile-fab:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
    }
    
    #student-profile-modal .student-profile-fab-menu {
        position: fixed !important;
        bottom: 150px !important;
        right: 20px !important;
        display: none !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 98 !important;
    }
    
    #student-profile-modal .student-profile-fab-menu.show {
        display: flex !important;
        animation: slideUpFAB 0.3s ease-out !important;
    }
    
    @keyframes slideUpFAB {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    #student-profile-modal .student-profile-fab-item {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: white !important;
        color: #667eea !important;
        border: 2px solid #667eea !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
        transition: transform 0.2s !important;
    }
    
    #student-profile-modal .student-profile-fab-item:active {
        transform: scale(0.9) !important;
    }
    
    /* Desktop: Hide FAB, show buttons in header */
    @media (min-width: 769px) {
        #student-profile-modal .student-profile-fab,
        #student-profile-modal .student-profile-fab-menu {
            display: none !important;
        }
    }
    
    /* Ensure tabs container is sticky within scrollable content */
    #student-profile-modal #student-profile-content > div {
        padding: 0 !important;
    }
    
    /* Tab navigation sticky positioning */
    #student-profile-modal #student-profile-content .border-b.border-gray-200 {
        position: sticky !important;
        top: 0 !important;
        background: white !important;
        z-index: 50 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        margin-bottom: 0 !important;
        padding: 8px 12px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }
    
    /* Tabs Navigation - Horizontal Scroll (Like Attendance Quick Actions) */
    /* Note: Sticky positioning is handled by #student-profile-content .border-b.border-gray-200 above */
    
    #student-profile-modal nav.flex {
        display: flex !important;
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 12px !important;
    }
    
    #student-profile-modal nav.flex::-webkit-scrollbar {
        display: none !important;
    }
    
        #student-profile-modal .profile-tab {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #student-profile-modal .profile-tab.active {
        border-bottom-color: #667eea !important;
        color: #667eea !important;
        font-weight: 600 !important;
    }
    
    /* Tab Content - Compact */
    #student-profile-modal .profile-tab-content {
        padding: 8px 0 !important;
    }
    
    #student-profile-modal .space-y-6 > * {
        margin-bottom: 12px !important;
    }
    
    #student-profile-modal .space-y-6 > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Overview Section - Compact */
    #student-profile-modal .bg-gray-50 {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
    }
    
    #student-profile-modal .mb-3 {
        margin-bottom: 8px !important;
    }
    
    #student-profile-modal h4.font-semibold {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin: 0 0 8px 0 !important;
    }
    
    #student-profile-modal .grid.gap-4 {
        gap: 8px !important;
    }
    
    #student-profile-modal .text-lg {
        font-size: 16px !important;
    }
    
    #student-profile-modal .text-xs {
        font-size: 10px !important;
    }
    
    /* Basic Info Sections - Compact */
    #student-profile-modal .space-y-2 > * {
        margin-bottom: 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    #student-profile-modal .space-y-2 > *:last-child {
        margin-bottom: 0 !important;
    }
    
    #student-profile-modal .mb-2 {
        margin-bottom: 6px !important;
    }
    
    /* Attendance Cards - Compact */
    #student-profile-modal .bg-green-100,
    #student-profile-modal .bg-red-100,
    #student-profile-modal .bg-yellow-100,
    #student-profile-modal .bg-blue-100 {
        padding: 8px !important;
        border-radius: 8px !important;
    }
    
    #student-profile-modal .text-2xl {
        font-size: 18px !important;
    }
    
    /* Log Cards - Compact */
    #student-profile-modal .bg-gray-50.p-4 {
        padding: 10px 12px !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }
    
    #student-profile-modal .border-l-4 {
        border-left-width: 3px !important;
    }
    
    /* Student Profile Modal - Very Small Screens */
    @media (max-width: 480px) {
        #student-profile-modal .modal-content {
            width: 100% !important;
            margin: 0 !important;
            max-height: 100vh !important;
            border-radius: 0 !important;
        }
        
        #student-profile-modal .w-24 {
            width: 3rem !important;  /* 48px on very small screens */
            height: 3rem !important;
        }
        
        #student-profile-modal h2.text-xl {
            font-size: 13px !important;
        }
        
        #student-profile-modal .profile-tab {
            font-size: 10px !important;
            padding: 5px 8px !important;
        }
    }
    
    /* Book Progress Modal - Mobile */
    .book-progress-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        max-height: 200px !important;
    }
    
    #book-progress-modal .modal-body {
        flex-direction: column !important;
        height: auto !important;
    }
    
    /* Book Progress Modal - Compact */
    #book-progress-modal .modal-content {
        margin: 3% auto !important;
        max-height: 92vh !important;
        padding: 12px 16px !important;
        overflow-y: auto !important;
    }
    
    /* Student Photo - Mobile */
    #student-photo-display,
    img[alt="Student Photo"] {
        width: 5rem !important; /* 80px - slightly smaller on mobile */
        height: 5rem !important;
        min-width: 5rem !important;
        min-height: 5rem !important;
        max-width: 5rem !important;
        max-height: 5rem !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    #student-photo-placeholder,
    div[id="student-photo-placeholder"] {
        width: 5rem !important;
        height: 5rem !important;
        min-width: 5rem !important;
        min-height: 5rem !important;
        max-width: 5rem !important;
        max-height: 5rem !important;
        border-radius: 50% !important;
    }
    
    /* Ensure the flex container doesn't distort the image */
    #student-header-content .flex.items-center.space-x-4 {
        flex-wrap: nowrap !important;
    }
    
    #student-header-content .relative {
        flex-shrink: 0 !important;
    }
    
    /* Fix for Tailwind utility classes on mobile */
    .w-24 {
        width: 5rem !important;
    }
    
    .h-24 {
        height: 5rem !important;
    }
    
    /* Student Photo - Very Small Screens */
    @media (max-width: 480px) {
        #student-photo-display,
        img[alt="Student Photo"] {
            width: 4rem !important; /* 64px - even smaller on very small screens */
            height: 4rem !important;
            min-width: 4rem !important;
            min-height: 4rem !important;
            max-width: 4rem !important;
            max-height: 4rem !important;
            border-radius: 50% !important;
            object-fit: cover !important;
            aspect-ratio: 1 / 1 !important;
        }
        
        #student-photo-placeholder,
        div[id="student-photo-placeholder"] {
            width: 4rem !important;
            height: 4rem !important;
            min-width: 4rem !important;
            min-height: 4rem !important;
            max-width: 4rem !important;
            max-height: 4rem !important;
            border-radius: 50% !important;
        }
        
        /* Fix for Tailwind utility classes on very small screens */
        .w-24 {
            width: 4rem !important;
        }
        
        .h-24 {
            height: 4rem !important;
        }
    }
    
    /* Permission Modal - Mobile */
    .permission-modal-content {
        width: 95% !important;
        max-height: 90vh !important;
    }
    
    .permission-grid {
        grid-template-columns: 1fr !important;
    }
    
    .template-buttons {
        flex-direction: column !important;
    }
    
    .btn-template {
        width: 100% !important;
    }
    
    .class-checkboxes {
        grid-template-columns: 1fr !important;
    }
    
    .permission-actions {
        flex-direction: column !important;
    }
    
    .btn-large {
        width: 100% !important;
    }
    
    /* Permission Modal - Very Small Screens */
    @media (max-width: 480px) {
        .permission-modal-content {
            width: 98% !important;
            padding: 10px !important;
        }
        
        .permission-editor-body {
            padding: 15px !important;
        }
        
        .permission-item {
            padding: 12px !important;
        }
    }
    
    /* ============================================================================
       ATTENDANCE SECTION - Mobile Optimized & Compact
       ============================================================================ */
    
    #attendance .attendance-controls {
        display: flex;
        flex-direction: column;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    #attendance .attendance-header {
        margin-bottom: 10px !important;
    }
    
    #attendance .attendance-header h2 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    #attendance select,
    #attendance input[type="date"] {
        width: 100%;
        padding: 10px 12px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    #attendance .bulk-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    #attendance .bulk-actions button {
        padding: 8px 10px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }
    
    #attendance .class-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    #attendance .class-filter label {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }
    
    #attendance .class-filter select {
        flex: 1;
        min-width: 150px;
    }
    
    .attendance-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .student-row {
        background: white !important;
        padding: 12px !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        margin-bottom: 0 !important;
    }
    
    .student-row .student-info-with-toggle {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .student-row .student-info h4 {
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 1.4;
    }
    
    .student-row .attendance-toggle {
        align-self: flex-start;
        min-height: 38px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .student-row .reason-input-inline {
        margin-top: 6px;
        display: block;
    }
    
    .student-row .reason-input-inline input {
        width: 100%;
        padding: 8px 10px !important;
        font-size: 13px !important;
        min-height: 38px !important;
    }
    
    .student-attendance-item {
        background: white;
        padding: 12px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .student-attendance-item .student-info {
        flex: 1;
    }
    
    .student-attendance-item .student-name {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 3px;
    }
    
    .student-attendance-item .student-class {
        font-size: 12px;
        color: #666;
    }
    
    .student-attendance-item .attendance-checkbox {
        min-width: 28px !important;
        min-height: 28px !important;
        width: 28px;
        height: 28px;
    }
    
    /* Attendance Summary Header - Mobile */
    .attendance-summary-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .summary-period-toggle {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .period-btn {
        flex: 1 !important;
        text-align: center !important;
    }
    
    /* ============================================================================
       REGISTRATION SECTION - Mobile Compact
       ============================================================================ */
    
    #registration h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    /* Bulk Import - Mobile */
    .bulk-import-header {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }
    
    .format-table {
        font-size: 0.9em !important;
    }
    
    .upload-drop-zone {
        padding: 30px 20px !important;
    }
    
    .upload-drop-zone i {
        font-size: 2em !important;
    }
    
    .import-summary {
        grid-template-columns: 1fr !important;
    }
    
    /* Old registration styles removed - using new ultra-compact styles below */
    
    #registration .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    
    /* Action Buttons - Compact */
    #registration .action-buttons {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 12px !important;
    }
    
    #registration .action-buttons::-webkit-scrollbar {
        display: none !important;
    }
    
    #registration .action-buttons button {
        flex: 1 !important;
        min-width: 80px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    #registration .action-buttons button i {
        font-size: 11px !important;
    }
    
    /* ============================================================================
       STUDENT REGISTRATION FORM - Ultra Compact (Like Attendance Page)
       ============================================================================ */
    
    /* Student Form Container - Compact */
    #registration .student-form-container {
        background: #fafafa !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: auto !important;
    }
    
    /* Form Header - Ultra Compact (Like Attendance Header) */
    #registration .form-header {
        background: #fff !important;
        padding: 8px 12px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid #e0e0e0 !important;
        margin-bottom: 0 !important;
    }
    
    #registration .form-header h3 {
        font-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    #registration .form-header .btn {
        padding: 6px 12px !important;
        min-height: 32px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    #registration .form-header .btn i {
        font-size: 12px !important;
    }
    
    /* Form Container - Compact */
    #registration .form {
        padding: 12px 16px !important;
        background: #fff !important;
        margin: 0 !important;
    }
    
    /* Form Rows - Compact */
    #registration .form-row {
        flex-direction: column !important;
        gap: 10px !important;               /* Reduced from 16px */
        margin-bottom: 10px !important;     /* Reduced from default */
    }
    
    /* Form Groups - Ultra Compact */
    #registration .form-group {
        margin-bottom: 12px !important;    /* Reduced from 16px */
    }
    
    #registration .form-group label {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;    /* Reduced spacing */
        color: #333 !important;
        display: block !important;
    }
    
    /* Form Inputs - Ultra Compact (Like Attendance) */
    #registration .form-group input,
    #registration .form-group select,
    #registration .form-group textarea {
        min-height: 36px !important;        /* Reduced from 48px */
        padding: 8px 12px !important;       /* Reduced from 12px 16px */
        font-size: 15px !important;         /* Reduced from 16px */
        border-radius: 8px !important;
        border: 1px solid #e0e0e0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #registration .form-group input:focus,
    #registration .form-group select:focus,
    #registration .form-group textarea:focus {
        border-color: #667eea !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    }
    
    /* File Input - Compact */
    #registration .form-group input[type="file"] {
        padding: 6px 8px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
    
    /* Small Text - Compact */
    #registration .form-group small {
        font-size: 11px !important;
        color: #666 !important;
        margin-top: 4px !important;
        display: block !important;
        line-height: 1.3 !important;
    }
    
    /* Form Actions - Ultra Compact (Like Attendance Quick Actions) */
    #registration .form-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;                /* Reduced from 10px */
        margin-top: 16px !important;        /* Reduced from 20px */
        padding-top: 12px !important;
        border-top: 1px solid #e0e0e0 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 10 !important;
    }
    
    #registration .form-actions button {
        width: 100% !important;
        min-height: 40px !important;        /* Reduced from 48px */
        padding: 8px 12px !important;       /* Reduced from default */
        font-size: 14px !important;         /* Reduced from 16px */
        border-radius: 10px !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    #registration .form-actions button i {
        font-size: 14px !important;
    }
    
    /* Students List Header - Compact */
    /* Students List Header - Ultra Compact */
    #registration .students-list-header {
        padding: 8px 12px !important;     /* Reduced padding */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    #registration .students-list-header h3 {
        font-size: 15px !important;         /* Reduced from 16px */
        margin: 0 !important;
        font-weight: 600 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    #registration .students-list-header h3 i {
        font-size: 13px !important;        /* Reduced icon size */
        margin-right: 6px !important;
    }
    
    #registration .students-list-buttons {
        display: flex !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    #registration .students-list-buttons .btn {
        padding: 5px 10px !important;
        min-height: 30px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
    
    #registration .students-list-buttons .btn i {
        font-size: 11px !important;
    }
    
    /* Students Table - Ultra Compact (Like Class-wise Table) */
    #registration .students-table th,
    #registration .students-table td {
        padding: 6px 8px !important;       /* Ultra compact like class-wise table */
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    #registration .students-table th {
        font-size: 11px !important;
        font-weight: 600 !important;
        background: #f8f9fa !important;
    }
    
    #registration .students-table td {
        font-size: 12px !important;
    }
    
    /* Student Table Container - Scrollable */
    #registration .students-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin: 0 !important;
    }
    
    #registration .students-table-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Student search */
    #studentSearch,
    input[type="search"] {
        width: 100% !important;
        margin-bottom: 12px;
        border-radius: 20px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    /* Filter row in tables */
    .filter-row th {
        padding: 6px 4px !important;
    }
    
    .filter-row input,
    .filter-row select {
        padding: 6px 8px !important;
        font-size: 12px !important;
        min-height: 36px !important;
    }
    
    /* ============================================================================
       REPORTS SECTION - Ultra Compact (No Scrolling Needed)
       ============================================================================ */
    
    /* Reports Section - ZERO Padding */
    #reports.section {
        padding: 0 !important;
        margin: 0 !important;
        background: #fafafa !important;
    }
    
    /* Reports Title - Hidden or Ultra Compact */
    #reports h2 {
        display: none !important;  /* Hide title to save space */
    }
    
    /* Calendar Toggle - Ultra Compact */
    #reports .calendar-toggle {
        padding: 8px 10px !important;  /* Reduced from 12px */
        margin-bottom: 6px !important;  /* Reduced from 14px */
        border-radius: 8px !important;
        background: white !important;
        margin: 4px 8px !important;
    }
    
    #reports .calendar-toggle button {
        width: 100% !important;
        margin-bottom: 4px !important;  /* Reduced from 8px */
        padding: 6px 10px !important;  /* Reduced from default */
        font-size: 12px !important;
        min-height: 36px !important;  /* Reduced from default */
    }
    
    #reports .calendar-toggle p {
        font-size: 11px !important;  /* Reduced from 13px */
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Report Filters - Ultra Compact */
    #reports .report-filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;  /* Reduced from 10px */
        margin-bottom: 6px !important;  /* Reduced from 14px */
        background: white !important;
        padding: 8px 10px !important;  /* Reduced from 12px */
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        margin: 4px 8px !important;
    }
    
    #reports .report-filters label {
        font-size: 12px !important;  /* Reduced from 13px */
        font-weight: 600 !important;
        margin-bottom: 4px !important;  /* Reduced from 6px */
    }
    
    #reports .report-filters select,
    #reports .report-filters input {
        padding: 6px 10px !important;  /* Reduced from 10px 12px */
        font-size: 13px !important;  /* Reduced from 14px */
        min-height: 36px !important;  /* Reduced from 44px */
        border-radius: 6px !important;
    }
    
    /* Report Controls - Ultra Compact */
    #reports .report-controls {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;  /* Reduced from 8px */
        margin-bottom: 6px !important;  /* Reduced from 14px */
        padding: 0 8px !important;
    }
    
    #reports .report-controls button {
        width: 100% !important;
        padding: 8px 12px !important;  /* Reduced from 12px 16px */
        font-size: 13px !important;  /* Reduced from 14px */
        min-height: 38px !important;  /* Reduced from 46px */
        border-radius: 8px !important;
    }
    
    /* Date Restriction Notice - Compact */
    #reports .date-restriction-notice {
        padding: 6px 10px !important;
        font-size: 11px !important;
        margin-bottom: 6px !important;
        border-radius: 6px !important;
    }
    
    /* Form Rows in Reports - Compact */
    #reports .form-row {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }
    
    #reports .form-group {
        margin-bottom: 6px !important;
    }
    
    #reports .form-group label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    /* Report Summary - Ultra Compact */
    #reports .report-summary {
        background: white !important;
        padding: 8px 10px !important;  /* Reduced from 12px */
        border-radius: 8px !important;
        margin-bottom: 6px !important;  /* Reduced from 14px */
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        margin: 4px 8px !important;
    }
    
    #reports .report-summary h3 {
        font-size: 13px !important;  /* Reduced from 15px */
        margin-bottom: 6px !important;  /* Reduced from 10px */
        font-weight: 600 !important;
    }
    
    /* Report Tables - Ultra Compact (Like Class-wise Table) */
    #reports table {
        font-size: 11px !important;  /* Reduced from 12px */
        width: 100% !important;
    }
    
    #reports table th,
    #reports table td {
        padding: 5px 6px !important;  /* Reduced from 8px 6px */
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    #reports table th {
        font-size: 10px !important;
        font-weight: 600 !important;
        background: #f8f9fa !important;
    }
    
    /* Report Results Container - Compact */
    #reports .report-results,
    #reports #reportResults {
        margin-top: 4px !important;
        padding: 0 8px !important;
    }
    
    /* Report Table Container - Scrollable but Compact */
    #reports .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin: 0 8px !important;
    }
    
    #reports .table-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* ============================================================================
       SETTINGS SECTION - Ultra Compact (No Scrolling Needed)
       ============================================================================ */
    
    /* Settings Section - ZERO Padding */
    #settings.section {
        padding: 0 !important;
        margin: 0 !important;
        background: #fafafa !important;
    }
    
    /* Settings Title - Hidden or Ultra Compact */
    #settings h2 {
        display: none !important;  /* Hide title to save space */
    }
    
    /* Settings Tabs - Horizontal Scroll (Like Attendance Quick Actions) */
    #settings .settings-tabs {
        display: flex !important;
        gap: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #e0e0e0 !important;
        background: white !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 90 !important;
    }
    
    #settings .settings-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    #settings .tab,
    #settings .tab-button {
        padding: 6px 12px !important;  /* Reduced from 10px 16px */
        border-radius: 8px !important;  /* Reduced from 20px */
        white-space: nowrap !important;
        font-size: 11px !important;  /* Reduced from 13px */
        min-height: 32px !important;  /* Reduced from 38px */
        border: none !important;
        background: #f5f5f5 !important;
        color: #666 !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    #settings .tab i,
    #settings .tab-button i {
        font-size: 11px !important;
    }
    
    #settings .tab.active,
    #settings .tab-button.active {
        background: #4CAF50 !important;
        color: white !important;
        font-weight: 600 !important;
    }
    
    /* Tab Content - Ultra Compact */
    #settings .tab-content {
        padding: 8px 12px !important;
        margin: 0 !important;
    }
    
    #settings .tab-content h3 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        padding: 6px 0 !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    /* Settings Groups - Ultra Compact */
    #settings .settings-group,
    #settings .setting-group {
        background: white !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;  /* Reduced from 14px */
        margin-bottom: 6px !important;  /* Reduced from 10px */
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    
    #settings .settings-group h3,
    #settings .setting-group label {
        font-size: 13px !important;  /* Reduced from 15px */
        margin-bottom: 6px !important;  /* Reduced from 10px */
        color: #4CAF50 !important;
        font-weight: 600 !important;
    }
    
    #settings .settings-group label,
    #settings .setting-group label {
        font-size: 12px !important;  /* Reduced from 13px */
        margin-bottom: 4px !important;  /* Reduced from 6px */
        display: block !important;
    }
    
    #settings .help-text {
        font-size: 11px !important;
        color: #666 !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }
    
    /* Settings Input Groups - Ultra Compact */
    #settings .input-group {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
        flex-wrap: wrap !important;
    }
    
    #settings .settings-group input,
    #settings .settings-group select,
    #settings .settings-group textarea,
    #settings .setting-group input,
    #settings .setting-group select,
    #settings .setting-group textarea {
        font-size: 13px !important;  /* Reduced from 14px */
        padding: 6px 10px !important;  /* Reduced from 10px 12px */
        min-height: 36px !important;  /* Reduced from 44px */
        border-radius: 6px !important;
        border: 1px solid #e0e0e0 !important;
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    #settings .settings-group textarea,
    #settings .setting-group textarea {
        min-height: 60px !important;
        resize: vertical !important;
    }
    
    #settings .settings-group button,
    #settings .setting-group button {
        padding: 6px 12px !important;  /* Reduced from 10px 16px */
        font-size: 12px !important;  /* Reduced from 14px */
        min-height: 36px !important;  /* Reduced from 44px */
        border-radius: 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    #settings .settings-group button i,
    #settings .setting-group button i {
        font-size: 12px !important;
    }
    
    /* Item Lists - Ultra Compact */
    #settings .item-list,
    #settings .list-container {
        margin-top: 8px !important;
        padding: 0 !important;
    }
    
    #settings .item-list > *,
    #settings .list-container > * {
        padding: 8px 10px !important;
        margin-bottom: 4px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
    }
    
    /* Settings Tables - Ultra Compact (Like Class-wise Table) */
    #settings table {
        font-size: 11px !important;  /* Reduced from 12px */
        width: 100% !important;
    }
    
    #settings table th,
    #settings table td {
        padding: 5px 6px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    #settings table th {
        font-size: 10px !important;
        font-weight: 600 !important;
        background: #f8f9fa !important;
    }
    
    #settings table button {
        padding: 4px 8px !important;  /* Reduced from 6px 10px */
        font-size: 10px !important;  /* Reduced from 11px */
        min-height: 28px !important;  /* Reduced from 32px */
    }
    
    /* Educational Year List - Ultra Compact */
    #settings #educationalYearsList,
    #settings #classesList,
    #settings #settingsBooksList {
        margin-top: 6px !important;
        padding: 0 !important;
    }
    
    #settings #educationalYearsList > *,
    #settings #classesList > *,
    #settings #settingsBooksList > * {
        padding: 8px 10px !important;
        margin-bottom: 4px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        background: #f8f9fa !important;
    }
    
    /* Hijri Preview - Compact */
    #settings .hijri-preview {
        margin-top: 8px !important;  /* Reduced from 15px */
        padding: 6px 8px !important;
        background: #f8f9fa !important;
        border-radius: 6px !important;
        font-size: 12px !important;
    }
    
    #settings .hijri-date-display {
        font-size: 12px !important;
        margin-top: 4px !important;
    }
    
    /* Account Info - Ultra Compact */
    #settings #accountInfo {
        padding: 8px 10px !important;  /* Reduced from 15px */
        border-radius: 6px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
    }
    
    #settings #accountInfo p {
        margin-bottom: 4px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* Password Change Form - Ultra Compact */
    #settings .password-change-form {
        margin-top: 8px !important;
    }
    
    #settings .password-change-form .form-group {
        margin-bottom: 8px !important;
    }
    
    /* ============================================================================
       MESSAGING - Mobile Chat Style Compact
       ============================================================================ */
    
    #messages h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    #messages .messaging-container {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 140px);
        max-height: calc(100vh - 140px);
    }
    
    #messages .conversations-sidebar {
        width: 100% !important;
        border-right: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ============================================================================
       COMMUNICATIONS MODAL - Mobile WhatsApp/Telegram Style Redesign
       ============================================================================ */
    
    /* Hamburger Menu Button - Show on mobile, hide on desktop */
    #communications-window .comm-hamburger-btn {
        display: none !important;
    }
    
    @media (max-width: 768px) {
        #communications-window .comm-hamburger-btn {
            display: block !important;
            background: none;
            border: none;
            font-size: 24px;
            padding: 8px;
            cursor: pointer;
            color: #333;
            min-width: 44px;
            min-height: 44px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        
        #communications-window .comm-hamburger-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        
        #communications-window .comm-hamburger-btn:active {
            background: rgba(0, 0, 0, 0.1);
        }
        
        /* Sidebar Close Button - Show on mobile when sidebar is open */
        #communications-window .sidebar-close-btn {
            display: block !important;
            min-width: 32px;
            min-height: 32px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        
        /* Sidebar Backdrop */
        #communications-window .comm-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            transition: opacity 0.3s ease-in-out;
        }
        
        #communications-window .comm-backdrop.show {
            display: block;
            opacity: 1;
        }
        
        /* Sidebar - Hidden by default, slide-in when open */
        #communications-window #messages-sidebar,
        #communications-window #teacher-logs-sidebar {
            position: fixed !important;
            left: -280px !important;
            top: 0 !important;
            height: 100vh !important;
            width: 280px !important;
            min-width: 280px !important;
            max-width: 280px !important;
            z-index: 10000 !important;
            transition: transform 0.3s ease-in-out !important;
            display: flex !important;
            flex-direction: column !important;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }
        
        /* Sidebar Open State */
        #communications-window #messages-sidebar.sidebar-open,
        #communications-window #teacher-logs-sidebar.sidebar-open {
            transform: translateX(280px) !important;
        }
        
        /* Main Content - Full screen when sidebar is hidden */
        #communications-window .messages-main,
        #communications-window .teacher-logs-main {
            width: 100% !important;
            flex: 1 !important;
            transition: margin-left 0.3s ease-in-out;
        }
        
        /* Container - Full width on mobile */
        #communications-window .messages-container,
        #communications-window .teacher-logs-container {
            width: 100% !important;
        }
        
        /* Ensure sidebar content is readable */
        #communications-window .sidebar-content {
            padding: 12px !important;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Conversation/Class Items - Touch-friendly */
        #communications-window .conversation-item,
        #communications-window .class-item {
            padding: 12px !important;
            margin-bottom: 8px !important;
            font-size: 14px !important;
            min-height: 44px !important;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        #communications-window .conversation-item:active,
        #communications-window .class-item:active {
            background: rgba(0, 0, 0, 0.05) !important;
        }
        
        #communications-window .conversation-name,
        #communications-window .class-name {
            font-size: 15px !important;
            line-height: 1.4 !important;
            margin-bottom: 4px !important;
            font-weight: 500;
        }
        
        #communications-window .conversation-class {
            font-size: 12px !important;
            opacity: 0.7;
        }
    }
    
    /* Desktop View - Keep side-by-side layout */
    @media (min-width: 769px) {
        #communications-window .comm-hamburger-btn {
            display: none !important;
        }
        
        #communications-window .sidebar-close-btn {
            display: none !important;
        }
        
        #communications-window #messages-sidebar,
        #communications-window #teacher-logs-sidebar {
            position: relative !important;
            left: 0 !important;
            transform: none !important;
            width: 400px !important;
            min-width: 350px !important;
            max-width: 500px !important;
            height: 100% !important;
        }
        
        #communications-window .comm-backdrop {
            display: none !important;
        }
    }
    
    /* Ensure proper z-index layering */
    #communications-window {
        z-index: 9999 !important;
    }
    
    #communications-window .comm-backdrop {
        z-index: 9999 !important;
    }
    
    #communications-window #messages-sidebar,
    #communications-window #teacher-logs-sidebar {
        z-index: 10000 !important;
    }
    
    #communications-window .messages-main,
    #communications-window .teacher-logs-main {
        z-index: 1 !important;
    }
    
    #communications-window .messages-input-container {
        z-index: 100 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
    }
    
    /* Smooth fade-in animations for messages/logs */
    #communications-window .message,
    #communications-window .log-card {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Loading states with spinner */
    #communications-window .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        color: #666;
    }
    
    #communications-window .loading-state i {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: #999;
    }
    
    /* Text overflow handling for long names */
    #communications-window .conversation-name,
    #communications-window .class-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    /* Student Profile - Text overflow handling */
    #student-profile-modal h2,
    #student-profile-modal h3,
    #student-profile-modal h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    #student-profile-modal .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Handle missing data gracefully */
    #student-profile-modal .text-gray-500:empty::before {
        content: 'N/A';
        color: #999;
    }
    
    /* Empty states */
    #communications-window .empty-messages,
    #communications-window .empty-logs {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
        text-align: center;
        color: #999;
    }
    
    #communications-window .empty-messages i,
    #communications-window .empty-logs i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.3;
    }
    
    #messages .conversation-item {
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 6px;
        min-height: 64px;
        transition: background 0.2s ease;
    }
    
    #messages .conversation-item:active {
        background: #f5f5f5;
    }
    
    #messages .conversation-item h4 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    #messages .conversation-item p {
        font-size: 13px !important;
    }
    
    /* Modern Message Bubbles - WhatsApp/Telegram Style */
    #communications-window .message-bubble,
    #messages .message-bubble {
        max-width: 75% !important;
        padding: 12px 16px !important;
        border-radius: 18px !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        word-wrap: break-word;
    }
    
    #communications-window .message-bubble.own,
    #messages .message-bubble.own {
        background: #0088FF !important; /* Telegram blue */
        color: white !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        border-bottom-right-radius: 4px !important;
    }
    
    #communications-window .message-bubble.other,
    #messages .message-bubble.other {
        background: white !important;
        color: #333 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        border-bottom-left-radius: 4px !important;
        border: 1px solid #e0e0e0 !important;
    }
    
    /* Message Time Styling */
    #communications-window .message-time,
    #messages .message-time {
        font-size: 11px !important;
        opacity: 0.7 !important;
        margin-top: 4px !important;
        text-align: right !important;
    }
    
    #communications-window .message-bubble.other .message-time,
    #messages .message-bubble.other .message-time {
        text-align: left !important;
    }
    
    /* Modern Teacher Log Cards - WhatsApp/Telegram Style */
    #communications-window .log-card {
        background: white !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        border-left: 4px solid #4CAF50 !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
    }
    
    #communications-window .log-card.unread,
    #communications-window .log-card[data-status="unread"] {
        border-left-color: #F44336 !important;
        background: #FFF5F5 !important;
    }
    
    #communications-window .log-card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    #communications-window .log-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Unread Badge */
    #communications-window .unread-badge {
        background: #F44336 !important;
        color: white !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        display: inline-block !important;
        margin-left: 8px !important;
    }
    
    /* Log Card Content */
    #communications-window .log-card-header {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: #333 !important;
    }
    
    #communications-window .log-card-content {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin-bottom: 8px !important;
    }
    
    #communications-window .log-card-footer {
        font-size: 12px !important;
        color: #999 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    #messages .message-input-container {
        padding: 10px;
        background: white;
        border-top: 1px solid #e0e0e0;
    }
    
    #messages textarea {
        min-height: 42px !important;
        max-height: 100px;
        resize: none;
        border-radius: 20px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    
    #messages button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }
    
    /* ============================================================================
       TEACHERS CORNER - Mobile Compact
       ============================================================================ */
    
    #teachers-corner-section h2,
    #teachers-corner-section .section-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    #teachers-corner-section h3 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    /* ============================================================================
       TEACHERS CORNER - Modern Android Compact Design (Zero Wasted Space)
       ============================================================================ */
    
    /* Transform grid to ultra-compact single column - minimal spacing */
    /* Override Tailwind grid-cols-1, grid-cols-2, grid-cols-5 and gap-6 */
    #teachers-corner-section .grid {
        display: flex !important;  /* Override Tailwind grid */
        flex-direction: column !important;
        gap: 0 !important;  /* Override Tailwind gap-6 */
        margin-bottom: 6px;
        background: #f9fafb;
        border-radius: 6px;
        padding: 2px !important;  /* Ultra-minimal padding */
        overflow: visible !important;  /* Allow content to show */
    }
    
    /* Override all Tailwind grid classes */
    #teachers-corner-section .grid.grid-cols-1,
    #teachers-corner-section .grid.md\:grid-cols-2,
    #teachers-corner-section .grid.lg\:grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
    
    /* Ultra-compact list items - Beautiful Modern Android Material Design */
    #teachers-corner-section .stat-card {
        width: 100%;
        padding: 8px 12px !important;  /* Consistent horizontal padding */
        border-radius: 0;  /* Flat design, no rounded corners */
        box-shadow: none;
        margin: 0 !important;
        background: white;
        cursor: pointer;
        transition: background 0.15s ease;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;  /* Icon+Label LEFT | Number RIGHT */
        gap: 0 !important;  /* No gap - use margins instead */
        min-height: 44px !important;  /* Material Design touch target */
        height: 44px !important;
        max-height: 44px !important;
        border: none;
        border-bottom: 1px solid #e5e7eb;  /* Subtle divider */
        position: relative;
        overflow: hidden;
    }
    
    /* Remove border from last item */
    #teachers-corner-section .stat-card:last-child {
        border-bottom: none;
    }
    
    /* Active/Hover state - Material Design ripple effect */
    #teachers-corner-section .stat-card:active,
    #teachers-corner-section .stat-card:hover {
        background: #f5f5f5;
    }
    
    /* Left side container: Icon */
    #teachers-corner-section .stat-card > i:first-child {
        font-size: 20px !important;  /* Consistent icon size */
        margin: 0 !important;
        margin-right: 12px !important;  /* Fixed space after icon */
        padding: 0 !important;
        opacity: 0.87 !important;  /* Material Design opacity */
        flex-shrink: 0 !important;
        width: 20px !important;  /* Fixed width for alignment */
        text-align: center !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* Tailwind color classes still work */
    }
    
    /* If no icon, create invisible placeholder to maintain alignment */
    #teachers-corner-section .stat-card:not(:has(> i))::before {
        content: '';
        width: 20px;
        margin-right: 12px;
        flex-shrink: 0;
        display: inline-block;
    }
    
    /* Label - After icon, takes available space */
    #teachers-corner-section .stat-card > p {
        font-size: 14px !important;  /* Material Design body2 */
        opacity: 0.87 !important;  /* Material Design opacity */
        margin: 0 !important;
        padding: 0 !important;
        line-height: 20px !important;  /* Material Design line-height */
        flex: 1 !important;  /* Take available space */
        text-align: left !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block !important;
        min-width: 0;  /* Allow shrinking */
        /* Tailwind text-gray-500 color still works */
    }
    
    /* Number - Right side, aligned right, fixed width */
    #teachers-corner-section .stat-card > h3 {
        font-size: 16px !important;  /* Material Design body1 */
        margin: 0 !important;
        margin-left: 8px !important;  /* Space from label */
        padding: 0 !important;
        font-weight: 500 !important;  /* Material Design medium weight */
        line-height: 20px !important;
        flex-shrink: 0 !important;
        text-align: right !important;
        min-width: 40px !important;  /* Fixed width for alignment */
        white-space: nowrap;
        display: block !important;
        /* Tailwind text-gray-800 color still works */
    }
    
    /* Override desktop CSS from style.css that might conflict */
    #teachers-corner-section .stat-card {
        height: 44px !important;  /* Override desktop 180px */
        min-width: auto !important;  /* Override desktop 250px */
        padding: 8px 12px !important;  /* Override desktop 25px 15px */
        flex-direction: row !important;  /* Override desktop column */
        text-align: left !important;  /* Override desktop center */
        justify-content: space-between !important;
    }
    
    /* ===================================================================
       COMBINED CARDS - Multiple values in ONE row (Performance & Attendance)
       =================================================================== */
    
    /* Performance Card - Star icon + 3 tier values inline */
    #teachers-corner-section .stat-card.performance-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    
    /* Star icon in performance card */
    #teachers-corner-section .stat-card.performance-card > i {
        font-size: 20px !important;
        margin: 0 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        width: 20px !important;
        opacity: 0.87 !important;
    }
    
    /* Performance tiers container - horizontal layout */
    #teachers-corner-section .stat-card.performance-card .performance-tiers {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;  /* Align tiers to right */
        gap: 16px !important;  /* Space between tiers */
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Each tier (Mustaid, Mutawassit, Mujtahid) */
    #teachers-corner-section .stat-card.performance-card .tier {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 45px !important;
    }
    
    /* Tier count (number) */
    #teachers-corner-section .stat-card.performance-card .tier-count {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    /* Tier label (Mustaid, Mutawassit, Mujtahid text) */
    #teachers-corner-section .stat-card.performance-card .tier-label {
        font-size: 10px !important;
        opacity: 0.7 !important;
        line-height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        white-space: nowrap;
    }
    
    /* Hide any p or h3 that might exist in performance card */
    #teachers-corner-section .stat-card.performance-card > p,
    #teachers-corner-section .stat-card.performance-card > h3 {
        display: none !important;
    }
    
    /* ===================================================================
       ATTENDANCE COMBINED - Present, Absent, Percentage in ONE HORIZONTAL ROW
       JavaScript transforms 3 cards into 1 card with 3 values (like Performance card)
       =================================================================== */
    
    /* Combined attendance card - styled like performance card */
    #teachers-corner-section .stat-card.attendance-combined-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    
    /* Icon in combined attendance card */
    #teachers-corner-section .stat-card.attendance-combined-mobile > i {
        font-size: 20px !important;
        margin: 0 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        width: 20px !important;
        opacity: 0.87 !important;
    }
    
    /* Container for the 3 attendance values - horizontal layout */
    #teachers-corner-section .attendance-values-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Each attendance value item (number + label stacked) */
    #teachers-corner-section .attendance-value-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-width: 50px !important;
    }
    
    /* Number in each value item */
    #teachers-corner-section .attendance-number {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        margin: 0 !important;
        display: block !important;
        color: #1f2937 !important;
    }
    
    /* Label in each value item */
    #teachers-corner-section .attendance-label {
        font-size: 10px !important;
        opacity: 0.7 !important;
        line-height: 14px !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap;
        color: #6b7280 !important;
    }
    
    /* Attendance combined card - spans full width in Teachers Corner */
    /* Note: Teachers Corner doesn't use attendance-combined-card currently, but keep for compatibility */
    #teachers-corner-section .attendance-combined-card {
        grid-column: span 2 !important;
        min-height: 140px !important;  /* Original size */
    }
    
    /* Student categories card - spans full width */
    /* Note: Teachers Corner doesn't use student-categories-card currently, but keep for compatibility */
    #teachers-corner-section .student-categories-card {
        grid-column: span 2 !important;
        min-height: 120px !important;  /* Original size */
    }
    
    #teachers-corner-section .bg-white {
        padding: 14px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    
    #teachers-corner-section .logbook-entry {
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 8px;
        background: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    
    #teachers-corner-section .logbook-entry h4 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    #teachers-corner-section .logbook-entry p {
        font-size: 13px !important;
    }
    
    #teachers-corner-section .logbook-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #e0e0e0;
    }
    
    #teachers-corner-section .tab-button {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        white-space: nowrap;
    }
    
    #teachers-corner-section button:not(.stat-card button) {
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 42px !important;
    }
    
    #teachers-corner-section table {
        font-size: 12px !important;
    }
    
    #teachers-corner-section table th,
    #teachers-corner-section table td {
        padding: 8px 6px !important;
    }
    
    /* ============================================================================
       EDUCATION & BOOK MANAGEMENT - Mobile Compact
       ============================================================================ */
    
    /* Education Actions - Mobile */
    .education-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Education Header - Mobile */
    .education-header {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }
    
    .books-grid {
        grid-template-columns: 1fr !important;
    }
    
    .book-stats {
        grid-template-columns: 1fr !important;
    }
    
    .book-actions {
        flex-direction: column !important;
    }
    
    /* Book Management - Mobile */
    .add-book .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .add-book .form-group:last-child {
        flex: 1 !important;
    }
    
    .book-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .book-actions {
        width: 100% !important;
        justify-content: flex-end !important;
    }
    
    /* Edit Book Modal - Mobile */
    /* Edit Book Modal - Compact */
    #editBookModal .modal-content {
        width: 95% !important;
        margin: 3% auto !important;
        max-height: 92vh !important;
        padding: 12px 16px !important;
        overflow-y: auto !important;
    }
    
    /* Form Actions - Compact */
    .form-actions {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e0e0e0 !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    /* ============================================================================
       EXAM MANAGEMENT - Mobile Compact
       ============================================================================ */
    
    #exam-management h2 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    #exam-management h3 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    #exam-management .exam-card {
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 10px;
        background: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    
    #exam-management .exam-card h4 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    
    #exam-management .exam-card p {
        font-size: 13px !important;
    }
    
    #exam-management .exam-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    
    #exam-management .exam-form label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    #exam-management .exam-form input,
    #exam-management .exam-form select,
    #exam-management .exam-form textarea {
        font-size: 14px !important;
        padding: 10px 12px !important;
        min-height: 44px !important;
    }
    
    #exam-management .book-selection {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    #exam-management .book-item {
        padding: 10px;
        border-radius: 8px;
        background: #f8f9fa;
    }
    
    #exam-management button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    #exam-management table {
        font-size: 12px !important;
    }
    
    #exam-management table th,
    #exam-management table td {
        padding: 8px 6px !important;
    }
    
    #exam-management table input {
        padding: 6px 8px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
    
    /* ============================================================================
       SEARCH & FILTERS - Mobile
       ============================================================================ */
    
    .search-container {
        position: sticky;
        top: 0;
        background: white;
        padding: 12px;
        z-index: 100;
        margin: -12px -12px 12px -12px;
    }
    
    .search-input {
        width: 100%;
        padding: 12px 16px 12px 44px !important;
        border-radius: 24px;
        border: 2px solid #e0e0e0;
        font-size: 16px;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM19 19l-4.35-4.35' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 12px center;
        background-size: 20px;
    }
    
    /* ============================================================================
       FLOATING ACTION BUTTON (FAB)
       ============================================================================ */
    
    .fab {
        position: fixed;
        bottom: 85px; /* Above bottom nav */
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #4CAF50;
        color: white;
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        z-index: 999;
        transition: all 0.3s ease;
        border: none;
    }
    
    .fab:active {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
    }
    
    .fab-extended {
        width: auto;
        padding: 0 24px;
        border-radius: 28px;
        gap: 8px;
    }
    
    .fab-extended span {
        font-size: 16px;
        font-weight: 600;
    }
    
    /* ============================================================================
       BOTTOM SHEET
       ============================================================================ */
    
    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10000;
        max-height: 90vh;
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    
    .bottom-sheet.active {
        transform: translateY(0);
    }
    
    .bottom-sheet-handle {
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 12px auto 20px;
    }
    
    .bottom-sheet-content {
        padding: 0 20px 20px;
    }
    
    .bottom-sheet-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 9999;
        pointer-events: none;
    }
    
    .bottom-sheet-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    
    /* ============================================================================
       TOAST NOTIFICATIONS
       ============================================================================ */
    
    .mobile-toast {
        position: fixed;
        bottom: 90px; /* Above bottom nav */
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        background: #333;
        color: white;
        padding: 14px 24px;
        border-radius: 24px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        z-index: 10001;
        font-size: 15px;
        max-width: 90%;
        text-align: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-toast.show {
        transform: translateX(-50%) translateY(0);
    }
    
    .mobile-toast.success {
        background: #4CAF50;
    }
    
    .mobile-toast.error {
        background: #f44336;
    }
    
    .mobile-toast.warning {
        background: #ff9800;
    }
    
    /* ============================================================================
       LOADING STATES
       ============================================================================ */
    
    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading-shimmer 1.5s infinite;
        border-radius: 8px;
    }
    
    @keyframes loading-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    .skeleton-card {
        height: 100px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    
    /* ============================================================================
       PULL TO REFRESH
       ============================================================================ */
    
    .pull-to-refresh {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        transform: translateY(-60px);
        transition: transform 0.2s ease;
        z-index: 998;
    }
    
    .pull-to-refresh.pulling {
        transform: translateY(0);
    }
    
    .pull-to-refresh-icon {
        font-size: 24px;
        color: #4CAF50;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        100% { transform: rotate(360deg); }
    }
    
    /* ============================================================================
       LISTS & SCROLLING
       ============================================================================ */
    
    .mobile-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-list-item {
        background: white;
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        overflow: hidden;
    }
    
    .mobile-list-item:active {
        background: #f5f5f5;
    }
    
    /* Swipe actions */
    .swipe-actions {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    
    .mobile-list-item.swiped .swipe-actions {
        transform: translateX(0);
    }
    
    .swipe-action {
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .swipe-action.edit {
        background: #2196F3;
    }
    
    .swipe-action.delete {
        background: #f44336;
    }
    
    /* ============================================================================
       ANIMATIONS & TRANSITIONS
       ============================================================================ */
    
    .fade-in {
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .slide-up {
        animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Page transitions */
    .section {
        animation: pageTransition 0.2s ease;
    }
    
    @keyframes pageTransition {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* ============================================================================
       UTILITY CLASSES
       ============================================================================ */
    
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-stack {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
    
    /* Touch target sizing */
    .touch-target {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* ============================================================================
       SAFE AREA SUPPORT (Notched Phones)
       ============================================================================ */
    
    @supports (padding: env(safe-area-inset-top)) {
        body {
            padding-top: env(safe-area-inset-top);
            padding-bottom: calc(80px + env(safe-area-inset-bottom));
        }
        
        .mobile-header {
            padding-top: calc(12px + env(safe-area-inset-top));
        }
        
        .mobile-bottom-nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
            height: calc(60px + env(safe-area-inset-bottom));
        }
    }
    
    /* ============================================================================
       RTL SUPPORT (Urdu/Arabic)
       ============================================================================ */
    
    [dir="rtl"] .mobile-bottom-nav .nav-item .badge {
        right: auto;
        left: calc(50% - 16px);
    }
    
    [dir="rtl"] .fab {
        right: auto;
        left: 20px;
    }
    
    [dir="rtl"] .swipe-actions {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }
    
    /* ============================================================================
       SPECIFIC ELEMENT OVERRIDES
       ============================================================================ */
    
    /* Login page */
    .login-container {
        padding: 20px !important;
    }
    
    .login-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 20px !important;
        border-radius: 16px !important;
    }
    
    /* Navigation menu items */
    .nav-link, .menu-item {
        min-height: 52px;
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 8px;
    }
    
    /* Navigation Links - Additional small screen adjustments */
    .nav-link {
        padding: 12px 15px !important;
        font-size: 0.9em !important;
    }
    
    /* Tabs */
    .tab-content {
        padding: 16px 0;
    }
    
    /* ============================================================================
       CALENDAR RESPONSIVE - Mobile Optimized
       ============================================================================ */
    
    .attendance-tracking-section {
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    .calendar-container {
        max-width: 350px !important;
    }
    
    .calendar-grid {
        max-width: 350px !important;
        padding: 6px !important;
        gap: 1px !important;
    }
    
    .calendar-day {
        min-height: 28px !important;
        max-height: 28px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    .day-number {
        font-size: 0.75rem !important;
    }
    
    .calendar-header {
        padding: 6px 2px !important;
        font-size: 0.75rem !important;
        min-height: 28px !important;
        max-height: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    .summary-stats .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .legend-item {
        font-size: 0.75rem !important;
    }
    
    .stat-number {
        font-size: 1.3rem !important;
    }
    
    .calendar-legend {
        gap: 8px !important;
    }
    
    /* Very small screens - 480px */
    @media (max-width: 480px) {
        .calendar-container {
            max-width: 300px !important;
        }
        
        .calendar-grid {
            max-width: 300px !important;
            padding: 4px !important;
        }
        
        .calendar-day {
            min-height: 24px !important;
            max-height: 24px !important;
            width: 24px !important;
            height: 24px !important;
            font-size: 0.7rem !important;
        }
        
        .calendar-header {
            min-height: 24px !important;
            max-height: 24px !important;
            width: 24px !important;
            height: 24px !important;
            font-size: 0.7rem !important;
        }
        
        /* Calendar Navigation - Very Small Screens */
        .calendar-navigation {
            gap: 10px !important;
            padding: 10px !important;
        }
        
        .nav-btn {
            width: 32px !important;
            height: 32px !important;
            font-size: 12px !important;
        }
        
        .month-selector {
            min-width: 100px !important;
            font-size: 12px !important;
            padding: 5px 6px !important;
        }
        
        .year-selector {
            width: 60px !important;
            font-size: 12px !important;
            padding: 5px 6px !important;
        }
    }
    
    /* Grid layouts → single column */
    .grid, .grid-2, .grid-3, .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }
    
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Charts */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ============================================================================
       ACCESSIBILITY
       ============================================================================ */
    
    /* Focus states for keyboard navigation */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus {
        outline: 3px solid #4CAF50;
        outline-offset: 2px;
    }
    
    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* ============================================================================
       LANDSCAPE ORIENTATION
       ============================================================================ */
    
    @media (max-width: 768px) and (orientation: landscape) {
        .mobile-bottom-nav {
            height: 56px;
            padding: 6px 10px;
        }
        
        .mobile-bottom-nav .nav-item {
            font-size: 9px;
            padding: 5px 10px;
            min-width: 55px;
        }
        
        .mobile-bottom-nav .nav-item i {
            font-size: 16px;
        }
        
        .mobile-bottom-nav .nav-item span {
            font-size: 9px;
        }
        
        body {
            padding-bottom: 60px;
        }
    }
    
    /* ============================================================================
       ATTENDANCE PAGE - Mobile Redesign
       ============================================================================ */
    
    /* Attendance page mobile header */
    #attendance.section {
        padding: 0 !important;
        background: #fafafa !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }
    
    #attendance h2 {
        display: none !important;
    }
    
    /* Hide desktop attendance header (contains duplicate date input) */
    #attendance .attendance-header {
        display: none !important;
    }
    
    #attendance .attendance-date-selector {
        display: none !important;
    }
    
    #attendance .attendance-date-selector input {
        display: none !important;
    }
    
    /* Mobile attendance header */
    .mobile-attendance-header {
        background: #fff !important;
        padding: 6px 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        display: block !important;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .mobile-attendance-header .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        gap: 8px;
    }
    
    /* Compact student count in header */
    .mobile-attendance-header .student-count-compact {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 7px;
        background: #e3f2fd;
        border-radius: 10px;
        font-size: 10px;
        font-weight: 600;
        color: #1976d2;
        white-space: nowrap;
    }
    
    .mobile-attendance-header .student-count-compact .count-icon {
        font-size: 10px;
    }
    
    /* Hide old student-count location if it exists */
    .mobile-attendance-header .student-count {
        display: none !important;
    }
    
    .mobile-attendance-header .back-btn {
        background: none;
        border: none;
        font-size: 18px;
        color: #667eea;
        cursor: pointer;
        padding: 4px;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-attendance-header .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }
    
    .mobile-attendance-header .menu-btn {
        background: none;
        border: none;
        font-size: 18px;
        color: #667eea;
        cursor: pointer;
        padding: 4px;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ultra Compact date and class selector - side by side */
    .mobile-attendance-header .header-filters {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-bottom: 0;
    }
    
    .mobile-attendance-header .date-info-mobile {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 6px;
        background: #f5f5f5;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
    }
    
    .mobile-attendance-header .date-icon {
        color: #667eea;
        font-size: 12px;
        flex-shrink: 0;
    }
    
    .mobile-attendance-header .date-info-mobile input[type="date"] {
        flex: 1;
        padding: 4px 2px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        min-height: 28px !important;
        color: #333 !important;
    }
    
    .mobile-attendance-header .class-selector-mobile {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 6px;
        background: #f5f5f5;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
    }
    
    .mobile-attendance-header .class-icon {
        color: #667eea;
        font-size: 12px;
        flex-shrink: 0;
    }
    
    .mobile-attendance-header .class-selector-mobile select {
        flex: 1;
        padding: 4px 2px !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        min-height: 28px !important;
        color: #333 !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Ultra Compact Quick Actions Card - Horizontal Layout */
    .mobile-attendance-actions {
        background: #fff;
        margin: 6px 10px;
        padding: 6px 8px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
        border: 1px solid #f0f0f0;
    }
    
    .mobile-attendance-actions .actions-title {
        display: none !important; /* Hide title for compactness */
    }
    
    /* Horizontal scrollable layout for ultra compact */
    .mobile-attendance-actions .actions-grid {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .mobile-attendance-actions .actions-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .mobile-attendance-actions .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 10px;
        border: none;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        min-height: 32px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .mobile-attendance-actions .action-btn i {
        font-size: 11px;
    }
    
    .mobile-attendance-actions .action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    
    .mobile-attendance-actions .action-btn:active {
        transform: scale(0.98);
    }
    
    .mobile-attendance-actions .present-btn {
        background: #e8f5e8;
        color: #2e7d32;
        border: 1px solid #c8e6c9;
    }
    
    .mobile-attendance-actions .absent-btn {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ffcdd2;
    }
    
    .mobile-attendance-actions .holiday-btn {
        background: #fff3e0;
        color: #ef6c00;
        border: 1px solid #ffcc02;
    }
    
    .mobile-attendance-actions .clear-btn {
        background: #f5f5f5;
        color: #616161;
        border: 1px solid #e0e0e0;
    }
    
    .mobile-attendance-actions .copy-btn {
        background: #e3f2fd;
        color: #1976d2;
        border: 1px solid #90caf9;
    }
    
    .mobile-attendance-actions .save-btn {
        background: #667eea;
        color: #fff;
        border: 1px solid #667eea;
    }
    
    /* Student List - Mobile Cards - Scrollable Container - Ultra Compact */
    /* No bottom bar, so more space for students! */
    .mobile-attendance-list {
        margin: 0 10px 20px !important; /* Reduced bottom margin - no bottom bar */
        max-height: calc(100vh - 250px) !important; /* More space for students without bottom bar */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px;
        min-height: 200px;
    }
    
    .mobile-student-card {
        background: #fff;
        margin-bottom: 8px;
        padding: 12px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.2s;
        min-height: auto;
        position: relative;
        z-index: 1;
        border: 1px solid #f0f0f0;
    }
    
    .mobile-student-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
    }
    
    .mobile-student-card:active {
        transform: scale(0.99);
    }
    
    .mobile-student-card .student-info {
        flex: 1;
        min-width: 0;
        padding-right: 8px;
    }
    
    /* Student name and roll in one line */
    .mobile-student-card .student-name-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .mobile-student-card .student-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 0;
        line-height: 1.3;
        flex: 1;
        min-width: 0;
    }
    
    /* Compact roll number badge - beside name */
    .mobile-student-card .student-roll-compact {
        font-size: 10px;
        font-weight: 600;
        color: #666;
        background: #f5f5f5;
        padding: 2px 6px;
        border-radius: 8px;
        white-space: nowrap;
        line-height: 1.2;
        flex-shrink: 0;
    }
    
    /* Right side container for dropdown only */
    .mobile-student-card .mobile-attendance-right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    
    .mobile-student-card .student-reason {
        font-size: 11px !important;
        color: #666 !important;
        margin-top: 6px !important;
        padding-top: 6px;
        border-top: 1px solid #f0f0f0;
        line-height: 1.4;
    }
    
    .mobile-student-card .reason-input-mobile {
        margin-top: 6px;
    }
    
    .mobile-status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        transition: all 0.2s;
        min-height: 32px;
    }
    
    .mobile-status-badge:hover {
        transform: scale(1.05);
    }
    
    .mobile-status-present {
        background: #e8f5e8;
        color: #2e7d32;
    }
    
    .mobile-status-absent {
        background: #ffebee;
        color: #c62828;
    }
    
    .mobile-status-holiday {
        background: #fff3e0;
        color: #ef6c00;
    }
    
    .mobile-status-neutral {
        background: #f5f5f5;
        color: #616161;
    }
    
    .mobile-status-arrow {
        margin-left: 5px;
        font-size: 10px;
        color: #999;
    }
    
    /* Mobile Attendance Dropdown */
    .mobile-attendance-dropdown {
        position: relative !important;
        flex-shrink: 0;
        z-index: 10;
    }
    
    /* When dropdown is open, raise the card's z-index */
    .mobile-student-card.dropdown-open {
        z-index: 100 !important;
        position: relative;
    }
    
    .mobile-student-card.dropdown-open .mobile-attendance-dropdown {
        z-index: 10000 !important;
    }
    
    .mobile-dropdown-toggle {
        padding: 5px 9px;
        border-radius: 16px;
        font-size: 10px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 3px;
        cursor: pointer;
        transition: all 0.15s;
        min-height: 28px;
        border: 1px solid transparent;
        position: relative;
        z-index: 1;
        white-space: nowrap;
    }
    
    .mobile-dropdown-toggle i {
        font-size: 10px;
    }
    
    .mobile-dropdown-toggle .mobile-status-arrow {
        font-size: 8px;
        margin-left: 2px;
    }
    
    .mobile-dropdown-toggle span {
        font-size: 10px;
    }
    
    .mobile-dropdown-toggle:hover {
        transform: scale(1.05);
    }
    
    .mobile-dropdown-toggle.mobile-status-present {
        background: #e8f5e8;
        color: #2e7d32;
        border-color: #c8e6c9;
    }
    
    .mobile-dropdown-toggle.mobile-status-absent {
        background: #ffebee;
        color: #c62828;
        border-color: #ffcdd2;
    }
    
    .mobile-dropdown-toggle.mobile-status-holiday {
        background: #fff3e0;
        color: #ef6c00;
        border-color: #ffcc02;
    }
    
    .mobile-dropdown-toggle.mobile-status-neutral {
        background: #f5f5f5;
        color: #616161;
        border-color: #e0e0e0;
    }
    
    .mobile-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        right: 0 !important;
        left: auto !important;
        background: white !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08) !important;
        z-index: 99999 !important;
        display: none !important;
        min-width: 130px !important;
        overflow: hidden !important;
    }
    
    .mobile-dropdown-menu.show {
        display: block !important;
        animation: mobileDropdownSlide 0.2s ease;
    }
    
    @keyframes mobileDropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .mobile-dropdown-item {
        padding: 10px 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.15s;
        font-size: 12px;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .mobile-dropdown-item:last-child {
        border-bottom: none;
    }
    
    .mobile-dropdown-item:hover {
        background: #f8f8f8;
    }
    
    .mobile-dropdown-item:active {
        background: #f0f0f0;
    }
    
    .mobile-dropdown-item .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .mobile-dropdown-item .status-dot.present {
        background: #27ae60;
    }
    
    .mobile-dropdown-item .status-dot.absent {
        background: #e74c3c;
    }
    
    .mobile-dropdown-item .status-dot.holiday {
        background: #ffc107;
    }
    
    .mobile-dropdown-item .status-dot.neutral {
        background: #6c757d;
    }
    
    .mobile-reason-input {
        width: 100%;
        padding: 6px 8px !important;
        margin-top: 6px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        background: #fafafa !important;
    }
    
    /* Bottom Action Bar - Hidden (buttons moved to quick actions) */
    .mobile-attendance-bottom {
        display: none !important;
    }
    
    .mobile-bottom-btn {
        flex: 1;
        padding: 10px 12px;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.15s;
        min-height: 40px;
    }
    
    .mobile-bottom-btn i {
        font-size: 14px;
    }
    
    .mobile-copy-btn {
        background: #f5f5f5;
        color: #616161;
        border: 1px solid #e0e0e0;
    }
    
    .mobile-save-btn {
        background: #667eea;
        color: #fff;
        border: 1px solid #667eea;
    }
    
    .mobile-bottom-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }
    
    .mobile-bottom-btn:active {
        transform: scale(0.98);
    }
    
    /* Hide desktop attendance elements on mobile */
    #attendance .attendance-header,
    #attendance .attendance-date-selector,
    #attendance .attendance-controls,
    #attendance .attendance-summary,
    #attendance .bulk-actions,
    #attendance .attendance-list,
    #attendanceList,
    #attendance .attendance-list .student-row {
        display: none !important;
    }
    
    /* Animation for status changes */
    .mobile-status-changing {
        animation: mobilePulse 0.5s ease-in-out;
    }
    
    @keyframes mobilePulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
    
    /* Responsive adjustments for very small screens - Compact version */
    @media (max-width: 375px) {
        .mobile-attendance-header {
            padding: 6px 10px !important;
        }
        
        .mobile-attendance-header .header-title {
            font-size: 14px;
        }
        
        .mobile-attendance-header .date-info-mobile,
        .mobile-attendance-header .class-selector-mobile {
            padding: 5px 6px;
        }
        
        .mobile-attendance-header .date-info-mobile input[type="date"],
        .mobile-attendance-header .class-selector-mobile select {
            font-size: 12px !important;
            min-height: 30px !important;
        }
        
        .mobile-attendance-actions {
            margin: 6px 10px !important;
            padding: 8px !important;
        }
        
        .mobile-attendance-actions .action-btn {
            padding: 6px 8px !important;
            font-size: 11px !important;
            min-height: 32px !important;
        }
        
        .mobile-attendance-list {
            margin-left: 10px !important;
            margin-right: 10px !important;
        }
        
        .mobile-attendance-bottom {
            padding: 10px 12px !important;
        }
        
        .mobile-bottom-btn {
            padding: 8px 10px !important;
            font-size: 12px !important;
            min-height: 36px !important;
        }
        
        .mobile-student-card {
            padding: 10px !important;
        }
        
        .mobile-student-card .student-name {
            font-size: 13px;
        }
        
        .mobile-student-card .student-roll {
            font-size: 11px;
        }
    }
}

/* ============================================================================
   SCORE MODAL - Score History Section (Mobile)
   ============================================================================ */

@media (max-width: 768px) {
    /* Score Modal - Compact */
    #score-modal .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        margin: 2% auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Score History Section - Compact */
    #score-history-section {
        margin-bottom: 12px !important;
    }

    #score-history-section label {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    #score-history-list {
        max-height: 120px !important;
        padding: 8px !important;
        font-size: 11px !important;
    }

    #score-history-list > div {
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
    }

    #score-history-list .text-xs {
        font-size: 10px !important;
    }

    /* Score input fields - Compact */
    #score-modal input[type="number"],
    #score-modal textarea {
        font-size: 14px !important;
        padding: 8px !important;
    }

    #score-modal label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* Score modal buttons - Compact */
    #score-modal .px-6.py-4 {
        padding: 10px 12px !important;
    }

    #score-modal button {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* Tablet-specific overrides removed to avoid impacting desktop layouts. */

/* ============================================================================
   PRINT STYLES (Don't print mobile UI elements)
   ============================================================================ */

@media print {
    .mobile-bottom-nav,
    .mobile-header,
    .fab,
    .bottom-sheet,
    .mobile-toast,
    .pull-to-refresh {
        display: none !important;
    }
}