/* ═══════════════════════════════════════════════════════
   CLEARANCE SYSTEM — MOBILE CSS
   Covers student-dashboard, admin-dashboard, staff-dashboard,
   login, and register pages.
   ═══════════════════════════════════════════════════════ */

/* ───────────────────────────────────
   GLOBAL: show/hide helpers
─────────────────────────────────── */
.mobile-header,
.mob-bottom-nav,
.mob-more-panel,
.mob-panel-overlay {
    display: none;
}

/* ───────────────────────────────────
   MOBILE ONLY  (≤ 768px)
─────────────────────────────────── */
@media (max-width: 768px) {

    /* === ROOT OVERFLOW === */
    html {
        overflow-x: hidden !important;
    }
    * { box-sizing: border-box; max-width: 100%; }
    h1,h2,h3,h4,h5,h6,p,span,a,label,td,th,li,strong {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Prevent iOS auto-zoom on inputs */
    input, select, textarea { font-size: 16px !important; }
    body { background-attachment: scroll !important; }

    /* === BODY / LAYOUT === */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Student body is a flex row (sidebar + main) — reset to column */
    body {
        flex-direction: column !important;
        display: flex;
    }

    /* Admin uses .dashboard-container wrapper */
    .dashboard-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    /* === HIDE DESKTOP SIDEBAR === */
    .sidebar {
        display: none !important;
    }

    /* === MOBILE TOP HEADER === */
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 300;
        background: linear-gradient(135deg, #4a7053 0%, #5d8a67 100%);
        border-bottom: none;
        box-shadow: 0 2px 12px rgba(74, 112, 83, 0.25);
        padding: 0 16px;
        height: 56px;
        flex-shrink: 0;
        width: 100%;
    }

    .mobile-header-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-header-logo img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.15);
        padding: 3px;
        object-fit: contain;
    }

    .mobile-header-title {
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.01em;
    }

    .mobile-notif-btn {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        position: relative;
        min-width: 40px;
        min-height: 40px;
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
    }

    .mobile-notif-btn:active {
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-notif-icon svg {
        width: 20px;
        height: 20px;
        stroke: #ffffff;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-notif-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #ef4444;
        color: white;
        font-size: 9px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        padding: 0 3px;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 2px solid #5d8a67;
    }

    /* Hide existing topbars / headers — replaced by .mobile-header */
    .topbar,
    .header {
        display: none !important;
    }

    /* === MAIN CONTENT === */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        flex: 1 !important;
        height: auto !important;
        overflow: visible !important;
        /* Reset desktop padding, apply mobile padding */
        padding: 16px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Admin content area */
    .content-area {
        padding: 16px !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    /* Admin uses padding inside main-content directly */
    .main-content[style*="padding"],
    .main-content.admin-main {
        padding: 16px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Content header (admin) -- scrolls with content, NOT sticky.
       Sticky caused action buttons below to slide underneath it. */
    .content-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 16px !important;
        background: #fff;
        border-radius: 12px !important;
        border-bottom: none !important;
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        margin-bottom: 16px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    .content-header h1,
    .content-header h2 {
        font-size: 18px !important;
        white-space: normal !important;
        overflow: visible !important;
        max-width: 100%;
    }

    .content-header p { font-size: 13px !important; color: #6b7280; }

    .content-header > * { max-width: 100%; }
    .content-header > button,
    .content-header > .btn { width: 100%; justify-content: center; }

    /* === BOTTOM NAV === */
    .mob-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(60px + env(safe-area-inset-bottom));
        align-items: stretch;
    }

    .mob-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: transparent;
        color: #9ca3af;
        cursor: pointer;
        padding: 6px 2px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
        transition: color 0.15s;
        min-height: 60px;
        text-decoration: none;
    }

    .mob-tab.mob-tab-active { color: #4a7053; }

    .mob-tab.mob-tab-active::after {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 28px; height: 3px;
        background: #4a7053;
        border-radius: 0 0 3px 3px;
    }

    .mob-tab-icon svg {
        width: 22px; height: 22px;
        stroke: currentColor; fill: none;
        stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
        display: block;
    }

    .mob-tab-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
    }

    .mob-tab-badge {
        position: absolute;
        top: 5px;
        right: calc(50% - 20px);
        background: #ef4444;
        color: white;
        font-size: 9px;
        font-weight: 700;
        min-width: 15px; height: 15px;
        border-radius: 8px;
        padding: 0 3px;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* === MORE PANEL === */
    .mob-panel-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 490;
    }
    .mob-panel-overlay.mob-overlay-active { display: block; }

    .mob-more-panel {
        display: block;
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom));
        left: 0; right: 0;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
        z-index: 495;
        padding: 8px 0 12px;
        transform: translateY(110%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    }

    .mob-more-panel.mob-panel-open {
        transform: translateY(0);
    }

    .mob-panel-handle {
        width: 36px; height: 4px;
        background: #e5e7eb;
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .mob-more-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 600;
        color: #374151;
        background: transparent;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s;
    }

    .mob-more-item:active { background: #f3f4f6; }

    .mob-more-item.mob-more-danger { color: #ef4444; }

    .mob-more-divider {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9ca3af;
        padding: 10px 24px 4px;
        margin-top: 4px;
        border-top: 1px solid #f3f4f6;
    }

    .mob-more-icon svg {
        width: 20px; height: 20px;
        stroke: currentColor; fill: none;
        stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0;
    }

    /* Notification dropdown — above bottom nav */
    .notif-dropdown,
    .notification-dropdown,
    #staffNotificationDropdown,
    #notificationDropdown {
        position: fixed !important;
        top: auto !important;
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.12) !important;
        z-index: 600 !important;
    }

    /* Toast / notifications — above bottom nav */
    .notification, .toast {
        top: auto !important;
        bottom: calc(68px + env(safe-area-inset-bottom)) !important;
        left: 12px !important; right: 12px !important;
        transform: none !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .notification.show, .toast.show {
        transform: none !important; opacity: 1 !important;
    }

    /* ── STATS GRID ── */
    .stats-grid, .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card, .overview-card {
        padding: 14px 12px !important;
        overflow: hidden;
    }
    .stat-number, .stat-value, .stat-info h3 { font-size: 26px !important; }
    .stat-label, .stat-info p               { font-size: 11px !important; }
    .stat-icon { width: 40px !important; height: 40px !important; }

    /* ── TABLES ── */
    .table-container, .table-wrapper,
    .users-table-wrapper, .clearances-table-wrapper,
    .student-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
        width: 100% !important;
    }
    .data-table, .admin-table, .student-table table {
        min-width: 540px;
        font-size: 13px !important;
        white-space: nowrap;
    }
    .data-table th, .data-table td,
    .admin-table th, .admin-table td { padding: 10px !important; }

    /* ── MODALS — bottom sheet ── */
    .modal-overlay.open {
        align-items: flex-end !important;
    }
    .modal-overlay.open > .modal,
    .modal-overlay.open > div {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important; overflow-x: hidden !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }
    .modal-content {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important; overflow-x: hidden !important;
    }
    .modal-header { padding: 0 0 14px 0 !important; }
    .modal-header h3, .modal-header h2 { font-size: 18px !important; }
    .modal-body { padding: 14px 0 !important; overflow-x: hidden; }
    .modal-footer {
        padding: 14px 0 0 0 !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-footer button, .modal-btn {
        width: 100% !important;
        min-height: 46px;
        font-size: 14px !important;
    }

    /* ── FORMS ── */
    .form-row, .form-grid-2, .form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .form-group { width: 100% !important; }
    .search-bar, .filter-row, .search-filters, .filters-bar {
        flex-direction: column !important; gap: 10px !important;
    }
    .search-bar input, .filter-row input, .filter-row select,
    .search-filters input, .search-filters select,
    .filters-bar input, .filters-bar select,
    .filter-select, .filter-input { width: 100% !important; }
    .form-actions {
        flex-direction: column !important; gap: 8px !important;
    }
    .form-actions button {
        width: 100% !important; min-height: 46px;
    }

    /* ── BUTTONS ── */
    button { -webkit-tap-highlight-color: transparent; }
    .btn-primary, .btn-secondary, .btn-danger, .btn-success {
        min-height: 44px;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
    .bulk-actions { flex-direction: column !important; gap: 8px !important; }
    .bulk-actions button { width: 100% !important; }

    /* ── CARDS / GRIDS ── */
    .offices-grid, .cards-grid, .templates-grid {
        grid-template-columns: 1fr !important; gap: 12px !important;
    }
    .office-card { padding: 16px !important; overflow: hidden; }
    .office-card-actions { flex-direction: column !important; gap: 8px !important; }
    .office-card-actions button { width: 100% !important; }
    .completed-grid, .history-grid { grid-template-columns: 1fr !important; }
    .details-grid, .info-grid, .profile-layout {
        grid-template-columns: 1fr !important; gap: 12px !important;
    }

    /* ── TABS ── */
    .tab-nav, .tabs {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn, .tab-item {
        padding: 10px 14px !important; font-size: 13px !important;
        white-space: nowrap; display: inline-flex;
        min-height: 44px; align-items: center;
    }

    /* ── PROFILE / ACTIVITY ── */
    .profile-stats { grid-template-columns: 1fr 1fr !important; }
    .profile-header, .profile-top {
        flex-direction: column; align-items: center;
        text-align: center; gap: 16px;
    }
    .activity-item { padding: 12px !important; }
    .user-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .user-actions { width: 100%; }

    /* ── LOGIN / REGISTER ── */
    .login-container { grid-template-columns: 1fr !important; }
    .login-left { display: none !important; }
    .login-right { padding: 32px 20px !important; }
    .login-btn, .google-btn, .custom-google-btn { min-height: 48px; font-size: 16px !important; }
    .input-group input, .modal-input { min-height: 46px; }
    .form-options { flex-direction: column; gap: 14px; align-items: flex-start; }
    .modal-buttons { flex-direction: column; gap: 8px; }
    .modal-buttons .modal-btn { width: 100% !important; }
    .register-container { flex-direction: column !important; border-radius: 16px; }
    .register-left { padding: 24px 20px; flex: none; }
    .register-left h1 { font-size: 22px; }
    .register-right { padding: 24px 20px; max-height: none; }
    .input-row { grid-template-columns: 1fr !important; }
    .radio-group { flex-direction: column !important; }
    .register-btn { min-height: 48px; }

    /* ── PROGRESS SECTION ── */
    .progress-section, .clearance-progress-section { padding: 14px !important; }
    .progress-top { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* ══════════════════════════════════════════════
       JS-GENERATED INLINE STYLE OVERRIDES
       (dashboard.js writes inline styles we can't
       change without modifying the JS, so we target
       them with attribute selectors here)
    ══════════════════════════════════════════════ */

    /* Clearance info card header row — stack title + badge */
    .clearance-info-card > div[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .clearance-info-card > div[style*="space-between"] > div[style*="flex: 1"] {
        min-width: 0 !important; width: 100% !important;
    }
    .clearance-info-card h3 {
        font-size: 19px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Custom data fields grid: repeat(2,1fr) → 1 col */
    .clearance-info-card div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .clearance-info-card div[style*="grid-template-columns"] p {
        margin: 0 !important;
        padding: 10px 12px;
        background: #f8faf9;
        border-radius: 8px;
        font-size: 14px !important;
        word-break: break-word;
    }

    /* Progress stats pill row: gap 20px → wrap to grid */
    .clearance-progress-section .progress-stats > div[style*="gap: 20px"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .stat-approved, .stat-rejected, .stat-pending {
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .progress-percentage, .progress-pct { font-size: 26px !important; }

    /* Offices grid: minmax(350px) → 1 col */
    .offices-grid[style*="minmax(350px"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Office card inner */
    .office-card-large {
        padding: 16px !important;
        overflow: hidden !important;
    }
    .office-card-large > div[style*="space-between"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    .office-card-large h4 {
        font-size: 16px !important;
        word-break: break-word !important;
        white-space: normal !important;
        flex: 1 !important; min-width: 0 !important;
    }
    .office-card-large span[class*="status-"],
    .office-card-large .office-status {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Document action buttons */
    .document-actions[style*="flex"] {
        flex-direction: column !important; gap: 8px !important;
    }
    .document-actions button {
        width: 100% !important; justify-content: center !important;
        min-height: 44px !important;
    }

    /* Uploaded docs modal — document item row */
    .document-item[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .document-item > div[style*="flex: 1"] {
        width: 100% !important; min-width: 0 !important;
    }
    .document-item strong { word-break: break-all !important; display: block !important; font-size: 13px !important; }
    .document-item div[style*="margin-left: 34px"] {
        flex-wrap: wrap !important; gap: 6px !important; margin-left: 0 !important;
    }
    .document-item > div[style*="gap: 8px"] {
        width: 100% !important; display: flex !important; gap: 8px !important;
    }
    .document-item > div[style*="gap: 8px"] button {
        flex: 1 !important; justify-content: center !important; min-height: 40px !important;
    }
    .documents-list[style*="max-height: 400px"] { max-height: 50vh !important; }

    /* Completed/history cards grid */
    div[style*="minmax(320px, 1fr)"] {
        grid-template-columns: 1fr !important; gap: 12px !important;
    }

    /* Resubmit / cancel buttons */
    .btn-resubmit, .btn-cancel {
        width: 100% !important; justify-content: center !important; min-height: 46px !important;
    }
    .clearance-info-card > div[style*="space-between"] > div[style*="flex-direction: column"] {
        align-items: flex-start !important; width: 100% !important;
    }

    /* Rejection alert text */
    .alert-body, .alert-note { font-size: 13px !important; word-break: break-word !important; }

} /* end @media (max-width: 768px) */

/* ═══════════════════════════════════════════════════════
   STAFF DASHBOARD — HISTORY FILTER SECTION
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Filter card padding */
    .history-filters-content {
        padding: 16px !important;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Row 1: search + 2 selects → stacked */
    .history-filter-row-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .history-search-input {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        border: 1px solid #d1d5db;
        outline: none;
    }

    .history-filter-row-1 .filter-select {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        border: 1px solid #d1d5db;
        background: #fff;
        appearance: auto;
    }

    /* Row 2: from/to date + clear button → stacked */
    .history-filter-row-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .history-date-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .history-date-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }

    .history-date-field .filter-select {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        border: 1px solid #d1d5db;
        background: #fff;
    }

    .history-filter-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        flex-direction: row !important;
        gap: 12px !important;
    }

    .history-result-count {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #4a7053 !important;
        flex: 1;
    }

    .history-clear-btn {
        white-space: nowrap !important;
        padding: 10px 18px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    /* ═══════════════════════════════════════════════════════
       MOBILE REQUEST / HISTORY CARDS
       ═══════════════════════════════════════════════════════ */

    /* Select-all row */
    .mob-pending-select-all {
        padding: 12px 0 8px;
    }

    .mob-select-all-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
    }

    /* Card list container */
    .mob-request-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 0 8px;
    }

    /* Individual card */
    .mob-request-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }

    /* Card header — avatar + name + status badge */
    .mob-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px 10px;
        gap: 10px;
        border-bottom: 1px solid #f3f4f6;
    }

    .mob-card-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .mob-avatar {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .mob-student-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .mob-student-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1f2937 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 160px;
    }

    .mob-student-id {
        font-size: 12px !important;
        color: #9ca3af !important;
        display: block;
    }

    /* Card body — key/value rows */
    .mob-card-body {
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mob-card-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
    }

    .mob-card-key {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0;
        min-width: 90px;
    }

    .mob-card-val {
        font-size: 13px !important;
        color: #374151 !important;
        font-weight: 500 !important;
        text-align: right;
        word-break: break-word;
    }

    .mob-card-row-remarks {
        align-items: flex-start !important;
        margin-top: 4px;
    }

    .mob-remarks {
        text-align: left !important;
        font-style: italic;
        color: #6b7280 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Card footer — review button */
    .mob-card-footer {
        padding: 10px 14px 14px;
        border-top: 1px solid #f3f4f6;
    }

    .mob-review-btn {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }

    /* History cards — no footer needed */
    .mob-history-card .mob-card-header {
        border-bottom: 1px solid #f3f4f6;
    }

    /* Status badge sizing on cards */
    .mob-request-card .status-badge {
        font-size: 10px !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Hide desktop table on mobile (inside historyContent / pendingContent) */
    #historyContent .requests-table,
    #pendingRequestsContent .requests-table {
        display: none !important;
    }

    /* Bulk action bar on mobile */
    .bulk-actions-bar,
    .bulk-actions {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }

    .bulk-actions-bar button,
    .bulk-actions button {
        width: 100% !important;
        min-height: 46px !important;
    }

    /* Section card padding fix */
    .section-card > .card-content {
        padding: 0 !important;
    }

    .mob-request-cards {
        padding: 12px !important;
    }

} /* end mobile staff fixes */




input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}



img {
    -webkit-user-drag: none;
    pointer-events: none;
}

a img, button img {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════
   EMPLOYEE DASHBOARD — MOBILE FIXES
   (employee-dashboard.css uses slightly different class
    names from dashboard.css — patch them here)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Employee sidebar uses inline horizontal scroll on mobile —
       mobile.js hides it anyway, but belt-and-suspenders */
    body > .sidebar {
        display: none !important;
    }

    /* Employee main content needs same bottom padding as student */
    body > .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
    }

    /* Employee content area padding */
    body > .main-content > .content-area {
        padding: 16px !important;
        overflow-x: hidden !important;
    }

    /* Employee topbar — hidden, replaced by mobile-header */
    body > .main-content > .topbar {
        display: none !important;
    }

    /* Employee stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Employee offices grid */
    .offices-grid {
        grid-template-columns: 1fr !important;
    }

    /* Employee modals */
    .modal-content, .modal-box {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        margin: 8px !important;
        border-radius: 16px !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }

    /* Employee history/messages tables */
    .history-table,
    .messages-table,
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }
    .history-table table,
    .messages-table table {
        min-width: 500px;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Employee notification dropdown */
    .notif-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
        z-index: 600 !important;
    }

    /* Employee profile grid */
    .profile-grid,
    .profile-layout {
        grid-template-columns: 1fr !important;
    }

    /* Employee page headers */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .page-header h2 {
        font-size: 18px !important;
    }
    .page-header button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Employee filter bars */
    .filters-bar,
    .filter-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .filters-bar input,
    .filters-bar select,
    .filter-row input,
    .filter-row select {
        width: 100% !important;
    }

    /* Employee message header */
    .message-header {
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Employee clearance header */
    .clearance-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Employee rejection alert */
    .rejection-alert {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Employee office card actions */
    .office-card-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .office-card-actions button {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* Employee completed grid */
    .completed-grid {
        grid-template-columns: 1fr !important;
    }

    /* Employee progress stats */
    .progress-stats {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .stat-approved,
    .stat-rejected,
    .stat-pending {
        flex: 1 1 calc(50% - 8px) !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

} /* end employee mobile fixes */
/* ═══════════════════════════════════════════════════════
   ADMIN DASHBOARD — MOBILE CARD LAYOUTS
   Replaces wide data-tables on screens ≤ 768px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mob-admin-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 4px 0 8px;
    }

    .mob-admin-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }

    .mob-admin-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 14px 10px;
        gap: 10px;
        border-bottom: 1px solid #f3f4f6;
    }

    .mob-admin-card-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
    }

    .mob-admin-card-name {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .mob-admin-card-sub {
        font-size: 12px;
        color: #9ca3af;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-admin-card-body {
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mob-admin-card-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-height: 22px;
    }

    .mob-admin-card-key {
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
        min-width: 90px;
    }

    .mob-admin-card-val {
        font-size: 13px;
        color: #374151;
        font-weight: 500;
        text-align: right;
        word-break: break-word;
        flex: 1;
    }

    .mob-admin-card-footer {
        padding: 10px 14px 14px;
        border-top: 1px solid #f3f4f6;
        display: flex;
        gap: 8px;
    }

    .mob-admin-card-footer .btn-sm {
        min-height: 40px !important;
        font-size: 13px !important;
        justify-content: center !important;
        text-align: center !important;
    }

} /* end admin mobile cards */

/* ═══════════════════════════════════════════════════════
   ADMIN TABLE SCROLL FALLBACK
   If card layout doesn't trigger, tables at minimum
   scroll horizontally instead of getting cut off
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Wrap any .data-table that wasn't replaced with cards */
    #usersTableContent,
    #allStaffTableContent,
    #officesContent,
    #clearancesListContent {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
        width: 100% !important;
    }

    #usersTableContent .data-table,
    #allStaffTableContent .data-table,
    #officesContent .data-table,
    #clearancesListContent .data-table {
        min-width: 580px;
        font-size: 13px !important;
        white-space: nowrap;
    }

    #usersTableContent .data-table td,
    #usersTableContent .data-table th,
    #allStaffTableContent .data-table td,
    #allStaffTableContent .data-table th,
    #officesContent .data-table td,
    #officesContent .data-table th,
    #clearancesListContent .data-table td,
    #clearancesListContent .data-table th {
        padding: 10px 12px !important;
    }

    /* Make action buttons in table cells stack */
    #usersTableContent .data-table td:last-child,
    #allStaffTableContent .data-table td:last-child,
    #officesContent .data-table td:last-child,
    #clearancesListContent .data-table td:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
        white-space: normal !important;
    }

} /* end admin table scroll fallback */

/* ═══════════════════════════════════════════════════════
   FIX: Native <select> dropdown clipping on mobile
   .card and .main-content have overflow:hidden which
   clips the native dropdown popup on iOS/Android.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Allow native select dropdowns to render outside card bounds */
    .card,
    .content-card,
    .section-card,
    .card-body,
    .main-content,
    .content-area,
    .page-section,
    #new-request-page,
    #templateSelectionStep {
        overflow: visible !important;
    }

    /* But keep horizontal overflow locked to prevent page-wide scroll */
    .main-content {
        overflow-x: hidden !important;
    }

    /* The select itself — make it full width and easy to tap */
    .template-select,
    select#templateSelect {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }

} /* end select dropdown fix */

/* ═══════════════════════════════════════════════════════
   FIX: Same select dropdown clip fix for employee dashboard
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Employee dashboard uses same card/main-content pattern */
    body > .main-content,
    body > .main-content > .content-area,
    body > .main-content .card,
    body > .main-content .card-body {
        overflow: visible !important;
    }

    body > .main-content {
        overflow-x: hidden !important;
    }

} /* end employee select dropdown fix */

/* =====================================================================
   SUPER ADMIN — mobile responsive fixes
   ===================================================================== */
@media (max-width: 768px) {

    /* Issue 1: tab row — wrap instead of clip */
    #manage-admins-page .sa-tab-row {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
        padding-bottom: 0;
    }

    .sa-tab {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        text-align: center;
        font-size: 12px;
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* Issue 2: settings grid — single column on mobile */
    #sa-tab-settings .sa-settings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Issue 4: Sessions & Audit Log header rows — stack vertically */
    .sa-tab-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sa-tab-header-row p {
        margin: 0;
    }

    /* Issue 5: general manage-admins spacing */
    #manage-admins-page {
        padding: 0 2px;
    }

    #superAdminStatsStrip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Make content-cards inside super admin full-width */
    #manage-admins-page .content-card {
        border-radius: 10px;
    }

    /* Create New Admin button — full width on mobile */
    #sa-tab-admins > div:first-child {
        display: flex;
    }

    #sa-tab-admins > div:first-child button {
        width: 100%;
        justify-content: center;
    }

} /* end super admin mobile */
/* ═══════════════════════════════════════════════════════
   USER DETAIL MODAL — Mobile fixes
   (admin-dashboard.js & super-admin-dashboard.js both
    generate this modal with inline styles; we override
    using the CSS classes we added to those JS files)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Modal container — snap to bottom sheet */
    .user-detail-modal-content,
    #userViewModal .modal-content,
    #userViewModal > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Profile header row — wrap so status badge doesn't get clipped */
    .user-detail-header-row {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* Status badge — shrink-proof and no-wrap */
    .user-status-badge {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        align-self: flex-start !important;
    }

    /* Stats grid: 4-col → 2-col on mobile */
    .user-detail-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Info grid: 2-col → 1-col on small screens */
    .user-detail-info-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Action buttons row — full width stack */
    .user-detail-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .user-detail-actions button {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

} /* end user detail modal mobile */

@media (max-width: 400px) {
    /* Very small screens: info grid also goes 1-col */
    .user-detail-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════
   SUPER ADMIN — Additional mobile layout fixes
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Overview two-column sections → single column */
    .sa-overview-grid,
    .sa-two-col {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Stats strip → 2 columns */
    #superAdminStatsStrip,
    .sa-stats-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Audit log filter bar — stack inputs vertically */
    #auditFilterBar,
    .audit-filter-bar,
    .sa-filter-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #auditFilterBar input,
    #auditFilterBar select,
    .audit-filter-bar input,
    .audit-filter-bar select,
    .sa-filter-bar input,
    .sa-filter-bar select {
        width: 100% !important;
    }

    /* JS-generated inline 4-col grids (sessions, reports, etc.) → 2-col */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* JS-generated inline 3-col grids → 1-col */
    div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Audit log table — horizontal scroll + hide Description on tiny screens */
    #auditLogTableWrap,
    .audit-log-wrap,
    #auditContent .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }

    /* Active sessions table */
    #sessionsContent .table-container,
    #activeSessionsWrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }

    /* Page actions (Add New Office, etc.) — full-width button */
    .page-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .page-actions button,
    .page-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }

    /* Super admin modals — same bottom-sheet treatment */
    .modal[id$="Modal"] .modal-content,
    #userViewModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
    }

    /* Clearance detail / office detail modals in super admin */
    #clearanceDetailModal .modal-body,
    #officeDetailModal .modal-body,
    #userViewModal .modal-body {
        overflow-x: hidden !important;
    }

} /* end super admin additional mobile fixes */

@media (max-width: 480px) {
    /* Hide Description column in audit table on very small screens */
    .audit-log-table th:nth-child(4),
    .audit-log-table td:nth-child(4) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   STUDENT & EMPLOYEE DASHBOARD — Missing Mobile Fixes
   (dashboard.css classes not yet covered in mobile.css)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Card head: title + button side-by-side → stack ── */
    .card-head {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 16px !important;
        align-items: flex-start !important;
    }
    .card-head h2 { font-size: 17px !important; }
    .card-head > button,
    .card-head > .btn-primary,
    .card-head > .btn-ghost {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
    /* Inbox/Sent tabs row inside card-head — don't crush them */
    .card-head > div[style*="margin-left:auto"],
    .card-head > div[style*="margin-left: auto"] {
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .card-head > div[style*="margin-left:auto"] button,
    .card-head > div[style*="margin-left: auto"] button {
        flex: 1 !important;
        min-height: 40px !important;
    }

    /* Card body padding */
    .card-body { padding: 16px !important; }

    /* ── Profile layout: 320px + 1fr → single column ── */
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .profile-right { gap: 16px !important; }

    /* ── Profile mini-stats: gap 48px → evenly spaced ── */
    .profile-mini-stats {
        gap: 16px !important;
        padding-top: 16px !important;
        margin-top: 16px !important;
    }
    .mini-val { font-size: 22px !important; }

    /* ── Details grid: 2-col → 1-col ── */
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .detail-item { padding: 14px !important; }

    /* ── Welcome section ── */
    .welcome-section h2 { font-size: 20px !important; }
    .welcome-section p  { font-size: 13px !important; }

    /* ── Modal actions: side-by-side → stacked full-width ── */
    .modal-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
    }
    .modal-actions .btn-primary,
    .modal-actions .btn-secondary,
    .modal-actions button {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    /* ── Upload dropzone: trim heavy padding ── */
    .dropzone {
        padding: 20px 16px !important;
    }
    .dropzone p { font-size: 13px !important; }

    /* ── Messages page: history filter bar ── */
    .filters-bar {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .filters-bar select,
    .filters-bar input { width: 100% !important; min-height: 46px !important; }

    /* ── Password wrapper inputs ── */
    .pwd-wrapper input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Crop photo modal (inline-styled) ── */
    #cropModalOverlay > div {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        padding: 18px 16px 16px !important;
        border-radius: 16px !important;
    }
    #cropCanvas {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }

} /* end student/employee mobile fixes */


/* ═══════════════════════════════════════════════════════
   STAFF DASHBOARD — Missing Mobile Fixes
   (staff-dashboard.css classes not yet covered)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Filters section (pending page search + select) ── */
    .filters-section {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .filters-section .search-input,
    .filters-section .filter-select {
        width: 100% !important;
        min-height: 46px !important;
    }

    /* ── Bulk action toolbar ── */
    .bulk-actions-toolbar { margin-bottom: 12px !important; }
    .bulk-toolbar-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .bulk-toolbar-left {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .bulk-toolbar-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .bulk-selection-info {
        justify-content: center !important;
        font-size: 14px !important;
    }
    .bulk-util-btn,
    .bulk-approve-btn,
    .bulk-reject-btn,
    .bulk-export-btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
        font-size: 14px !important;
    }

    /* ── Staff profile edit modal (prof-modal) ── */
    .prof-modal-overlay {
        align-items: flex-end !important;
    }
    .prof-modal-box {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .prof-modal-body { padding: 16px !important; }
    .prof-modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .prof-modal-actions button {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

    /* ── Review modal (modal-large) ── */
    .modal.modal-large .modal-content,
    #reviewModal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
    }

    /* ── reviewModal body: prevent any inline-grid from overflowing ── */
    #reviewModalBody,
    #reviewModal .modal-body {
        overflow-x: hidden !important;
    }

    /* ── The review-details header rows (Requestor / Type / Date)
       keep side-by-side but allow value to wrap cleanly ── */
    #reviewModal .review-details .detail-row strong,
    .modal.modal-large .review-details .detail-row strong {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: 110px !important;
    }
    #reviewModal .review-details .detail-row span,
    .modal.modal-large .review-details .detail-row span {
        text-align: right !important;
        word-break: break-word !important;
    }

    /* ── Message send modal — quick template buttons ── */
    div[style*="display: flex"][style*="flex-wrap: wrap"] > button.btn-secondary {
        flex: 1 1 calc(50% - 8px) !important;
        min-height: 40px !important;
        justify-content: center !important;
        font-size: 12px !important;
    }

    /* ── Completed requests — search wrapper ── */
    .card-header > div[style*="display:flex"],
    .card-header > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .card-header input[style*="width:220px"],
    .card-header input[style*="width: 220px"] {
        width: 100% !important;
    }

    /* ── Staff stats grid: already 1-col in staff CSS but ensure ── */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── Office badge in sidebar (hidden on mobile anyway) ── */
    .office-badge { display: none !important; }

} /* end staff mobile fixes */


/* ═══════════════════════════════════════════════════════
   ADMIN DASHBOARD — Clearances & Reports Mobile Fixes
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Clearances action bar: right-aligned → stacked full-width ── */
    .clearances-actions-bar {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        margin-bottom: 16px !important;
    }
    .clearances-actions-bar button,
    .btn-create-template {
        width: 100% !important;
        justify-content: center !important;
        min-height: 46px !important;
    }

    /* ── Clearance section header + filter actions ── */
    .clearance-section-card .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .section-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .section-actions input,
    .section-actions select,
    .section-actions .filter-select,
    .clearance-search-input {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    /* Inline search wrapper inside section-actions */
    .section-actions > div[style*="position: relative"],
    .section-actions > div[style*="position:relative"] {
        width: 100% !important;
    }
    .section-actions > div[style*="position: relative"] input,
    .section-actions > div[style*="position:relative"] input {
        width: 100% !important;
    }

    /* ── Reports: KPI strip 5-col → 2-col ── */
    .analytics-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .akpi-card { padding: 14px 12px !important; }
    .akpi-value { font-size: 22px !important; }

    /* ── Reports: chart rows → single column ── */
    .analytics-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .analytics-chart-card { padding: 16px !important; }
    .analytics-chart-wrap { min-height: 200px !important; }
    .analytics-chart-wrap.analytics-chart-tall { min-height: 220px !important; }
    .analytics-section-label { margin-top: 8px !important; }

    /* ── Reports grid: export cards ── */
    .reports-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .report-card { padding: 20px 14px !important; }
    .report-icon svg { width: 36px !important; height: 36px !important; }
    .report-card h3 { font-size: 14px !important; }
    .report-card p  { font-size: 12px !important; }

    /* ── Activity logs refresh button ── */
    #activity-page .page-actions button[style*="padding:10px"] {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Modal actions for admin modals ── */
    .modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-actions button {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

} /* end admin clearances/reports mobile fixes */


/* ═══════════════════════════════════════════════════════
   ADMIN — Template / Clearance Detail Modal Mobile Fixes
   Fixes overflow in #templateModal (create/edit) and
   #viewClearanceModal / #clearanceModal (view details)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Bottom-sheet snap for all admin modals ── */
    #templateModal      .modal-content,
    #viewClearanceModal .modal-content,
    #clearanceModal     .modal-content,
    #officeModal        .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Prevent any inner content from breaking out horizontally */
    #templateModal .modal-body,
    #viewClearanceModal #viewClearanceContent,
    #clearanceModal #clearanceModalBody {
        overflow-x: hidden !important;
    }

    /* field-item: desktop 5-col grid → single column stack */
    #templateModal .field-item {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #templateModal .field-item select { width: 100% !important; }
    #templateModal .field-remove-btn {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
    }

} /* end admin template/clearance modal mobile fixes */


/* ═══════════════════════════════════════════════════════
   SUPER ADMIN — Toolbar, Audit, Sessions Mobile Fixes
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Toolbar (admins, sessions, audit, activity pages) ── */
    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .toolbar-left {
        flex-direction: column !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
    .toolbar .search-input,
    .toolbar .filter-select {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
    }
    .toolbar > button,
    .toolbar .btn-secondary,
    .toolbar .btn-primary {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }
    .toolbar > p {
        font-size: 12px !important;
        margin: 0 !important;
        color: #6b7280 !important;
    }

    /* ── Audit log JS-generated filter bar ── */
    #auditLogContent > div[style*="display:flex"],
    #auditLogContent > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #auditLogContent input[style*="flex:1"],
    #auditLogContent input[style*="flex: 1"],
    #auditLogContent select {
        width: 100% !important;
        min-height: 46px !important;
        font-size: 16px !important;
        min-width: 0 !important;
    }

    /* ── Audit table wrapper scroll ── */
    #auditTableWrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }
    #auditTableWrap .data-table {
        min-width: 620px;
        font-size: 13px !important;
    }

    /* ── Sessions table scroll ── */
    #sessionsTableContent {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }
    #sessionsTableContent .data-table {
        min-width: 520px;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* ── Activity logs toolbar inner flex ── */
    #activity-page .toolbar > div[style*="display:flex"],
    #activity-page .toolbar > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #activity-page .toolbar .search-input,
    #activity-page .toolbar .filter-select {
        width: 100% !important;
    }
    #activity-page .toolbar > button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Maintenance warning banner ── */
    .warning-banner {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        align-items: flex-start !important;
    }

    /* ── Settings grid already uses auto-fit but ensure cards are readable ── */
    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .setting-card { padding: 18px !important; }
    .setting-card.full-width { grid-column: auto !important; }

    /* ── Admins page table ── */
    #adminsTableContent {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
    }
    #adminsTableContent .data-table {
        min-width: 540px;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* ── Super admin modal-actions ── */
    .modal-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-actions button {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }

} /* end super admin toolbar/audit/sessions mobile fixes */