/* ================================================================
   Universal Mobile Responsive — LU-CCS-ODTS
   Covers: LOGIN-PAGE | FACULTY_PAGE | DEAN-PAGE | PROGRAM_CHAIR_PAGE
   ================================================================ */

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-brown, #8f371d); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   LAYOUT — Sidebar + Header + Main Content
   The core rule: on ≤1200px, sidebar slides off-screen and
   EVERYTHING (header + main content) becomes full-width.
   ================================================================ */

@media (max-width: 1200px) {
    /* Sidebar: hidden by default, shown when JS adds .active */
    .sidebar {
        transform: translateX(-100%) !important;
        z-index: 1001 !important;
    }
    .sidebar.active {
        transform: translateX(0) !important;
    }
    /* .hidden is a desktop-only toggle — irrelevant on mobile */
    .sidebar.hidden {
        transform: translateX(-100%) !important;
    }

    /* Main content: always full-width, no sidebar offset */
    .main-content {
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    .main-content.sidebar-hidden {
        left: 0 !important;
        margin-left: 0 !important;
    }

    /* Header: always full-width, no sidebar padding-left indent */
    .header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .header.sidebar-hidden { left: 0 !important; }

    /* Overlay backdrop for sidebar */
    .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    .overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hide search bar — not enough space */
    .search-container,
    .search-input { display: none !important; }

    /* iframe always full-width */
    #contentContainer, #contentFrame { width: 100% !important; }
}

/* ── Mobile 768px ── */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    /* Sidebar width on mobile */
    .sidebar { width: 75vw !important; max-width: 300px !important; }

    /* Header shrinks */
    .header { height: 60px !important; padding: 0 1rem !important; }
    .header-logo-text h1 { font-size: 0.95rem !important; }
    .breadcrumb { display: none !important; }
    .logo-full { display: none !important; }
    .logo-short { display: inline !important; }

    /* Main content top offset matches 60px header */
    .main-content { padding-top: 60px !important; }
    #contentContainer { height: calc(100vh - 60px) !important; }
    #contentFrame { height: calc(100vh - 60px) !important; min-height: calc(100vh - 60px) !important; }

    /* Notification modal */
    .notification-modal {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
        top: 60px !important;
        max-height: 70vh !important;
    }

    /* Profile / user dropdowns */
    .profile-dropdown,
    .user-dropdown {
        right: 0.5rem !important;
        top: 60px !important;
        min-width: 180px !important;
        width: auto !important;
    }

    /* ── Fluid Typography & Spacing ── */
    :root {
        --mobile-padding: 1rem;
        --mobile-gap: 0.75rem;
    }
    h1 { font-size: 1.5rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    p { font-size: 0.95rem !important; line-height: 1.5 !important; }
}

/* ── Small phones 480px ── */
@media (max-width: 480px) {
    .sidebar { width: 85vw !important; max-width: 280px !important; }
    .header { height: 56px !important; }
    .main-content { padding-top: 56px !important; }
    #contentContainer { height: calc(100vh - 56px) !important; }
    #contentFrame { height: calc(100vh - 56px) !important; min-height: calc(100vh - 56px) !important; }
}

/* ================================================================
   LOGIN PAGE
   ================================================================ */
@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    .info-panel { order: -1; }
}

@media (max-width: 640px) {
    .top-header { padding: 1rem !important; }
    .header-container { flex-direction: column !important; gap: 0.75rem !important; align-items: center !important; }
    .header-logos { justify-content: center !important; }
    .header-actions { width: 100% !important; justify-content: center !important; }
    .login-card { padding: 1.5rem 1rem !important; }
    .card-header h1 { font-size: 1.75rem !important; }
    .form-options { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; }
    .portal-grid, .info-cards { grid-template-columns: 1fr !important; }
    /* Login page main-content is NOT the dashboard layout */
    .login-page .main-content {
        position: static !important;
        margin: 0 !important;
        padding: 1.5rem 1rem !important;
        height: auto !important;
    }
}

/* ================================================================
   PAGE CONTAINERS — all roles
   ================================================================ */
@media (max-width: 1200px) {
    .container, .dashboard-container, .pending-container, .approved-container,
    .rejected-container, .archived-container, .tasks-container, .documents-container,
    .profile-container, .calendar-container, .help-container, .faculty-container,
    .tracking-container, .auditlogs-container, .announcements-container,
    .resources-container, .add-task-container, .add-task-form-container {
        padding: 1.25rem 1rem !important;
    }
    .stats-grid, .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 768px) {
    /* Containers */
    .container, .dashboard-container, .pending-container, .approved-container,
    .rejected-container, .archived-container, .tasks-container, .documents-container,
    .profile-container, .calendar-container, .help-container, .faculty-container,
    .tracking-container, .auditlogs-container, .announcements-container,
    .resources-container, .add-task-container, .add-task-form-container {
        padding: 0.75rem !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Page section headers */
    .page-header, .welcome-header, .documents-header, .tasks-header,
    .tracking-header, .announcements-header, .resources-header,
    .add-task-header, .calendar-header, .help-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
    .header-content, .welcome-info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    .header-left {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .header-content h1, .main-greeting, .header-text h1 { font-size: 1.25rem !important; }
    .header-stats, .stat-cards {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    .stat-card { flex: 1 1 120px !important; min-width: 100px !important; justify-content: center !important; }

    /* Grids → single column */
    .stats-grid, .dashboard-grid, .library-categories, .folders-grid,
    .info-cards, .actions-grid, .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Tables — Premium Card Transformation */
    .table-wrapper, .table-container, .document-table-wrapper,
    .documents-table-container, .faculty-grid {
        overflow-x: visible !important;
        display: block !important;
        width: 100% !important;
    }

    table.document-table, table.documents-table, table.tasks-table, 
    table.logs-table, table.faculty-table, table.chair-table, table.files-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
    }

    table.document-table thead, table.documents-table thead, 
    table.tasks-table thead, table.logs-table thead, 
    table.faculty-table thead, table.chair-table thead {
        display: none !important; /* Hide headers on mobile */
    }

    table.document-table tr, table.documents-table tr, 
    table.tasks-table tr, table.logs-table tr, 
    table.faculty-table tr, table.chair-table tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    }

    table.document-table td, table.documents-table td, 
    table.tasks-table td, table.logs-table td, 
    table.faculty-table td, table.chair-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.6rem 0 !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        text-align: right !important;
        font-size: 0.9rem !important;
    }

    table.document-table td:last-child, table.documents-table td:last-child {
        border-bottom: none !important;
    }

    /* Use data-label for the pseudo-header */
    table.document-table td::before, table.documents-table td::before,
    table.tasks-table td::before, table.logs-table td::before,
    table.faculty-table td::before, table.chair-table td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-size: 0.75rem !important;
        color: #6b7280 !important;
        float: left !important;
        margin-right: 1rem !important;
        text-align: left !important;
    }

    /* Complex cell content alignment */
    table.document-table td > div, table.documents-table td > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Exceptions for large action rows */
    .action-buttons, .action-btns {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 0.5rem !important;
    }
    .action-btn, .btn-view, .btn-approve, .btn-reject {
        flex: 1 !important;
        min-width: 80px !important;
    }

    /* Toolbars */
    .toolbar, .filter-section, .filter-controls, .search-and-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    .search-box, .search-box input, .search-bar, .search-bar input { width: 100% !important; }
    .filter-buttons { flex-wrap: wrap !important; gap: 0.4rem !important; }
    .filter-btn { font-size: 0.8rem !important; padding: 0.4rem 0.75rem !important; }

    /* Buttons */
    .form-actions, .action-btns, .doc-actions, .selection-controls {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .btn, .action-btn, .btn-primary, .btn-secondary,
    .btn-view, .btn-download, .btn-restore, .btn-reject,
    .pagination-btn, .select-all-btn, .clear-selection-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Modals */
    .modal-content, .modal-container, .password-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
        max-height: 90vh !important;
        border-radius: 12px !important;
    }
    .modal-body { padding: 1rem !important; }
    .modal-footer { padding: 1rem !important; flex-direction: column !important; gap: 0.5rem !important; }

    /* Pagination */
    .pagination-container {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
        padding: 1rem !important;
    }
    .pagination-controls { flex-wrap: wrap !important; justify-content: center !important; }

    /* Forms */
    .form-row, .form-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
    .form-group { width: 100% !important; }
    .form-card, .form-content { padding: 1rem !important; }

    /* Profile */
    .profile-content { grid-template-columns: 1fr !important; }
    .profile-info { grid-template-columns: 1fr !important; }

    /* Calendar */
    .calendar-nav { flex-wrap: wrap !important; gap: 0.5rem !important; }
    .nav-center { flex-wrap: wrap !important; justify-content: center !important; }
    #currentPeriod { font-size: 1rem !important; }
    .calendar-day { min-height: 60px !important; padding: 0.3rem !important; }
    .day-header { padding: 0.5rem 0.2rem !important; font-size: 0.7rem !important; }

    /* Faculty task/participant grid */
    .faculty-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .container, .dashboard-container, .pending-container, .approved-container,
    .rejected-container, .archived-container, .tasks-container, .documents-container,
    .profile-container, .calendar-container, .help-container, .faculty-container,
    .tracking-container, .auditlogs-container, .announcements-container,
    .resources-container { padding: 0.5rem !important; }

    .page-header, .welcome-header, .documents-header, .tasks-header { padding: 1rem !important; }
    .header-content h1, .main-greeting, .header-text h1 { font-size: 1.1rem !important; }
    .stat-number { font-size: 1.1rem !important; }
    .stat-card { padding: 0.5rem 0.6rem !important; }
    .faculty-grid { grid-template-columns: 1fr !important; }
    .calendar-day { min-height: 48px !important; }
    .day-number { font-size: 0.68rem !important; width: 20px !important; height: 20px !important; }
    .task-highlight { font-size: 0.55rem !important; padding: 1px 3px !important; }

    /* Fix scanner viewports */
    .scanner-container { padding: 0.5rem !important; }
    .camera-container video, .camera-container canvas { 
        width: 100% !important; 
        height: auto !important;
        border-radius: 8px !important;
    }
    .captured-images { max-height: 250px !important; }
    .btn-preview-doc { font-size: 0.9rem !important; padding: 0.75rem !important; }
}

/* ================================================================
   UTILITY
   ================================================================ */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .breadcrumb { display: none !important; }
    .logo-full { display: none !important; }
    .logo-short { display: inline !important; }
}
.show-mobile { display: none !important; }
@media (max-width: 768px) {
    .show-mobile { display: block !important; }
}