/* Mobile Optimization - Final Comprehensive Fix */
@media (max-width: 768px) {
    
    /* 1. Global Layout & Scrolling */
    html {
        height: auto !important;
        overflow: visible !important;
    }
    body {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--bg-color);
        display: block !important;
        position: static !important;
        -webkit-overflow-scrolling: touch;
    }

    main {
        margin-left: 0 !important;
        margin-top: 138px !important; /* Reduced bottom gap from 150px */
        height: auto !important;
        min-height: calc(100vh - 138px);
        overflow: visible !important; 
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        z-index: 10;
    }
    
    section.status-section,
    section.category-content {
        margin-top: 0 !important;
        padding: 10px 0.5rem 5rem 0.5rem !important;
        overflow: visible !important;
        height: auto !important;
        transform: none !important; /* Critical: prevent sticky issues */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #intro-section { padding-top: 0 !important; }
    
    /* 2. Fixed Header & Centered Elements */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 138px !important; /* Reduced bottom gap to tighten layout */
        z-index: 5000 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
        display: block !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    body.dark-mode header {
        background: rgba(15, 23, 42, 0.95) !important;
    }

    .header-container {
        padding: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Centered Title & Clock Area */
    .clock-widget-container {
        position: fixed !important;
        top: 25px !important; /* Pushed down for better top whitespace */
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        z-index: 6000 !important;
        pointer-events: none;
        margin: 0 !important;
    }

    .side-site-title {
        font-size: 1.4rem !important; /* Increased font size */
        font-weight: 800 !important;
        margin-bottom: 2px !important;
        pointer-events: auto;
        opacity: 1 !important;
        transform: none !important;
        color: var(--primary-color) !important;
    }

    .modern-clock {
        display: none !important; /* Hide digital clock on mobile */
    }
    

    /* Navigation Menu */
    #category-nav {
        margin-top: 80px !important; /* Pushed down to maintain gap from title */
        margin-bottom: 5px !important;
        display: flex !important;
        flex-wrap: nowrap !important; /* Forced single line */
        overflow-x: auto !important; /* Scrolloable if absolutely necessary */
        justify-content: center !important; /* Center if fits */
        align-items: center !important;
        gap: 3px !important; /* Reduced gap */
        padding: 0 4px !important;
        width: 100% !important;
        pointer-events: auto !important;
        scrollbar-width: none; /* Hide scrollbar */
        -ms-overflow-style: none;
    }
    
    #category-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-item {
        padding: 3px 8px !important; /* Reduced padding */
        font-size: 0.75rem !important; /* Reduced font size ~1pt (approx) */
        height: 26px !important; /* Reduced height */
        border-radius: 13px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        letter-spacing: -0.5px !important; /* Reduce width slightly */
        transform: scaleX(0.97) !important; /* Slight Jangpyeong reduction */
        transform-origin: center !important;
    }

    /* Hide Bus Request Tab on Mobile */
    .nav-item[data-category="bus"] {
        display: none !important;
    }

    /* Theme Switch */
    .theme-switch-wrapper {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 7000 !important;
        margin: 0 !important;
    }
    
    .theme-switch {
        transform: scale(0.8) !important;
    }

    /* 3. School Status (학교현황) Section Fixes */
    /* 3. School Status (학교현황) Section Fixes */
    .status-section {
        margin: 0 !important;
        padding: 0 0.5rem 2rem 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        position: relative !important;
        left: 0 !important;
        margin-top: 5px !important; /* Adjusted from -20px to give a little breathing room */
    }

    /* Hide Edit Buttons & Controls on Mobile */
    #status-section .status-controls #status-edit-mode-btn,
    #status-section .status-controls .btn-primary,
    #status-section #edit-mode-btn,
    #status-controls-area {
        display: none !important;
    }

    .status-header {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    #status-tabs-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .status-tab {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }

    #status-panels-container {
        width: 100% !important;
        display: block !important;
    }

    .editable-table-wrapper {
        width: 100% !important;
        margin-bottom: 2rem !important;
        overflow-x: auto !important; /* Prevent clipping by allowing horizontal scroll */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }

    .status-table {
        width: 100% !important; 
        min-width: 100% !important;
        table-layout: auto !important; /* Change fixed to auto to prevent clipping content */
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .status-table thead th {
        position: static !important; /* Disable sticky header as requested */
        background: var(--table-header) !important;
        border-bottom: 2px solid var(--border-color) !important;
    }

    .status-table th, .status-table td {
        padding: 6px 4px !important;
        font-size: 0.75rem !important;
        white-space: normal !important;
        word-break: break-all;
    }

    /* 4. Other Sections Optimization */
    .category-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        padding: 0 0.5rem 5rem 0.5rem !important;
        margin-top: -20px !important; /* Pull up to reduce header gap */
    }
    
    #account-section, #bus-section {
        margin-top: -20px !important;
    }

    /* Account Section - Restriction & Sticky Header */
    #account-edit-mode-btn,
    #account-controls,
    .account-table .edit-col {
        display: none !important;
    }

    .account-table-wrapper {
        overflow: visible !important; /* Important for sticky */
        width: 100% !important;
    }
    .account-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 0.75rem !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .account-table thead th {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 138px !important; 
        z-index: 2000 !important;
        background: var(--table-header) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-bottom: 2px solid var(--border-color) !important;
    }
    
    .account-table th, .account-table td {
        padding: 8px 4px !important;
        word-break: break-all;
    }
    .account-table th:nth-child(1), .account-table td:nth-child(1) { width: 30px !important; }
    .account-table th:nth-child(5), .account-table td:nth-child(5) { display: none !important; } /* Hide Notes to save space */

    /* Curriculum (학사일정) Section - Restriction */
    #curr-add-btn,
    .curr-export-group,
    .view-switcher,
    #curr-member-confirm-bar,
    .curr-cell .cell-add-btn,
    .curr-cell:hover .cell-add-btn,
    .chip-controls,
    .duplicate,
    .th-doc, 
    .curr-row .curr-cell:nth-child(6) {
        display: none !important;
    }

    .curriculum-container {
        gap: 0.5rem !important;
    }

    .curriculum-header-area {
        padding: 4px !important; /* Reduced padding ~40% */
        margin-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .curriculum-title-group {
        display: none !important;
    }

    .curriculum-nav-group {
        margin-bottom: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .period-display {
        font-size: 0.95rem !important; /* Reduced font size */
        padding: 0.35rem 1.2rem !important; /* Reduced padding ~40% */
        min-width: 120px !important;
        border-radius: 8px !important;
    }

    .nav-arrow-btn, .nav-today-btn {
        padding: 4px 10px !important; /* Reduced padding */
        font-size: 0.75rem !important;
        height: 28px !important; /* Fixed height for consistency */
        min-width: 32px !important;
    }

    .nav-today-btn {
        margin-left: 5px !important;
    }

    .content-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    /* Table View Alignment Fix & Responsive */
    .curr-table-header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 138px !important;
        z-index: 2000 !important;
        background: var(--table-header) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-bottom: 2px solid var(--border-color) !important;
        border-top: 1px solid var(--border-color) !important;
    }

    .curr-table-header, .curr-row {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        /* Forced uniform columns for mobile - Edu column expanded, Doc removed */
        grid-template-columns: 35px 30px 1fr 4fr 1.2fr !important;
    }

    .th, .curr-cell {
        padding: 4px 2px !important;
        font-size: 0.7rem !important;
        border-right: 1px solid rgba(203, 213, 225, 0.4) !important;
        min-width: 0 !important;
    }

    .curr-event-chip,
    body.dark-mode .curr-event-chip {
        padding: 2px 0 !important; /* Side padding removed for text alignment */
        font-size: 0.68rem !important;
        margin-bottom: 3px !important;
        border-radius: 0 !important;
        line-height: 1.3 !important;
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important; /* Strictly no borders */
        outline: none !important;
        color: var(--text-color) !important;
        border-bottom: none !important; 
    }

    /* Bus Section - Restriction */
    #bus-section #bus-controls,
    #bus-section #bus-request-btn {
        display: none !important;
    }
    .bus-table-wrapper {
        overflow: visible !important;
        padding-top: 5px !important;
        width: 100% !important;
    }
    .bus-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        font-size: 0.7rem !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .bus-table thead th {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 138px !important; 
        z-index: 2000 !important;
        background: var(--table-header) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-bottom: 2px solid var(--border-color) !important;
    }
    .bus-table th, .bus-table td {
        padding: 6px 2px !important;
        word-break: break-all;
    }
    /* Hide specific columns: Confirm, Status, Region, BusType, Count, Teachers, TeacherCount, StudentCount, Total, Manage */
    .bus-table th:nth-child(1), .bus-table td:nth-child(1),
    .bus-table th:nth-child(2), .bus-table td:nth-child(2),
    .bus-table th:nth-child(5), .bus-table td:nth-child(5),
    .bus-table th:nth-child(6), .bus-table td:nth-child(6),
    .bus-table th:nth-child(7), .bus-table td:nth-child(7),
    .bus-table th:nth-child(10), .bus-table td:nth-child(10),
    .bus-table th:nth-child(11), .bus-table td:nth-child(11),
    .bus-table th:nth-child(12), .bus-table td:nth-child(12),
    .bus-table th:nth-child(13), .bus-table td:nth-child(13),
    .bus-table th:nth-child(15), .bus-table td:nth-child(15) {
        display: none !important;
    }
    /* Width adjustments for remaining columns: Date, Time, Dest, BusOwn, Purpose */
    .bus-table th:nth-child(3), .bus-table td:nth-child(3) { width: 55px !important; }
    .bus-table th:nth-child(4), .bus-table td:nth-child(4) { width: 60px !important; }
    .bus-table th:nth-child(8), .bus-table td:nth-child(8) { width: 80px !important; }
    .bus-table th:nth-child(9), .bus-table td:nth-child(9) { width: 45px !important; }

    /* Datayard (자료마당) & Helppage (온학교 e지원) Refinements */
    #datayard-edit-mode-btn,
    .datayard-controls,
    .helppage-controls {
        display: none !important;
    }
    
    .helppage-header h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
        word-break: keep-all;
    }
    
    .helppage-header p {
        font-size: 0.8rem !important;
    }

    .helppage-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Home (Intro) Section Adjustments */
    .intro-landing-container {
        padding: 1rem !important;
        height: auto !important;
    }
    .intro-header-bar {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
    
    /* Shortcuts (바로가기) Refinements - Group-based Accordion */
    #shortcut-section {
        display: block !important;
        margin-top: 1rem !important;
        padding: 0 1rem !important;
    }
    
    #shortcut-section .mobile-hide {
        display: none !important;
    }

    .shortcut-toggle-btn {
        display: none !important; /* Hide previous global toggle */
    }

    .shortcut-group {
        margin-bottom: 0.5rem !important;
        padding: 0.8rem !important;
        background: rgba(255, 255, 255, 0.6) !important;
    }

    .group-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        margin: 0 !important;
        font-size: 0.95rem !important;
    }

    .group-header .toggle-icon {
        font-size: 0.8rem;
        color: #6366f1;
    }

    .shortcut-items.hidden {
        display: none !important;
    }

    .shortcut-grid {
        grid-template-columns: 1fr !important; /* Stack groups vertically */
        gap: 0.5rem !important;
    }

    .links-grid {
        margin: 0 !important;
        padding: 1rem !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 1rem !important;
    }
    
    /* Side Widgets - Clear Hide */
    #left-sidebar {
        display: none !important;
    }

    /* 5. Generic Modal Fixes for Mobile */
    .modal-content {
        width: 95% !important;
        margin: 20% auto 10% auto !important;
        padding: 1.2rem !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 7. Datayard & On-School e-Support Toggle Table Optimizations */
    .helppage-main-toggle {
        padding: 1.2rem 1.2rem !important; /* ~20% Reduction */
    }
    
    .title-group h3 {
        font-size: 1rem !important; /* Reduced font size */
    }
    
    .title-group p {
        font-size: 0.8rem !important;
    }

    .icon-box {
        width: 2.8rem !important; /* Reduced from 3.5rem */
        height: 2.8rem !important;
        font-size: 1.1rem !important;
    }

    .header-info {
        gap: 1rem !important;
    }

    /* Sub-toggle and Content */
    .sub-section-toggle {
        padding: 0.7rem 0.5rem !important; /* ~20%+ Reduction */
    }

    .sub-header-left {
        gap: 0.6rem !important;
    }

    .sub-header-left span {
        font-size: 0.9rem !important;
    }

    .sub-icon-box {
        width: 2rem !important; /* Reduced from 2.5rem */
        height: 2rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
    }

    .sub-icon-box i {
        font-size: 0.9rem !important;
    }

    /* File List Items */
    .sub-items-list {
        padding: 0.4rem 0 0.8rem 2.5rem !important; /* Reduced indentation */
        gap: 0.4rem !important;
    }

    .file-item {
        padding: 0.5rem 0.8rem !important; /* Reduced padding */
        font-size: 0.8rem !important; /* Reduced font-size */
        gap: 0.4rem !important;
        min-height: 0 !important;
    }
    
    .file-item i {
        font-size: 0.85rem !important;
    }
}

/* Dark Mode Overrides for Mobile Shortcuts */
@media (max-width: 768px) {
    body.dark-mode .shortcut-group {
        background: rgba(30, 41, 59, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    }
    
    body.dark-mode .shortcut-group h3 {
        color: #f1f5f9 !important;
    }
    
    body.dark-mode .group-header .toggle-icon {
        color: #818cf8 !important;
    }

    body.dark-mode .shortcut-item span {
        color: #e2e8f0 !important;
    }
    
    /* Ensure icons look good on mobile dark mode too */
    body.dark-mode .shortcut-icon {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #94a3b8 !important;
    }

    /* Override dynamic colors for mobile dark mode too */
    body.dark-mode .shortcut-group:nth-child(4n + 1) .shortcut-icon {
        background: rgba(59, 130, 246, 0.2) !important;
        color: #60a5fa !important;
    }
    body.dark-mode .shortcut-group:nth-child(4n + 2) .shortcut-icon {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #34d399 !important;
    }
    body.dark-mode .shortcut-group:nth-child(4n + 3) .shortcut-icon {
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
    }
    body.dark-mode .shortcut-group:nth-child(4n + 4) .shortcut-icon {
        background: rgba(139, 92, 246, 0.2) !important;
        color: #a78bfa !important;
    }
}