.notification-bell-container-responsive {
    display: none;
}

@media (max-width: 1024px) {
    /* Pagination: show info above buttons on responsive */
    .pagination-container { flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
    .pagination-info { text-align: center; width: 100%; }
    .pagination { margin-top: 0.25rem; justify-content: center; width: 100%; padding: 0 1rem; }
    /* Compact list: show prev/next, first/last, current and neighbors; add ellipsis */
    .pagination .btn { display: none; }
    .pagination .btn[aria-label="Previous"],
    .pagination .btn[aria-label="Next"],
    .pagination .btn.btn-primary, /* active */
    .pagination .btn.btn-primary + .btn, /* next after active */
    .pagination .btn:has(+ .btn.btn-primary), /* previous before active */
    .pagination .btn:first-of-type,
    .pagination .btn:last-of-type { display: inline-flex; }
    .pagination::after { content: '…'; display: inline-block; margin: 0 0.4rem; color: var(--secondary-color); }
    /* Smaller pagination buttons on responsive */
    .pagination .btn { padding: 0.4rem 0.6rem; min-width: 34px; font-size: 0.8rem; }

    /* Payment Requests table: widen only the Actions column so buttons fit */
    .table-responsive { overflow-x: auto; padding-right: 6px; }
    
    /* View button styling for non-IT dashboards */
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info i {
        margin: 0;
    }
    /* Make payment requests table wider in dashboard tabs by reducing side spacing */
    .dashboard-container .card-body .table-responsive {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .dashboard-container .card-body .table-responsive .data-table {
        width: 100%;
    }
    /* Make checkbox column narrower in dashboard tables */
    .dashboard-container .card-body .table-responsive .data-table th:first-child,
    .dashboard-container .card-body .table-responsive .data-table td:first-child {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0.5rem;
        text-align: center;
    }
    .data-table th:last-child,
    .data-table td:last-child { min-width: 160px; text-align: center; white-space: nowrap; padding-right: 12px; }
    
    /* Add gap between Completed and Amount columns */
    .data-table td:nth-last-child(3),
    .data-table th:nth-last-child(3) {
        padding-right: 20px !important;
        border-right: 1px solid #e9ecef;
    }
    /* Strong specificity to ensure Actions column expands on dashboards */
    .dashboard-container .card-body .table-responsive .data-table th:last-child,
    .dashboard-container .card-body .table-responsive .data-table td:last-child {
        min-width: 160px !important;
        width: 160px !important;
        max-width: 160px !important;
        white-space: nowrap !important;
    }
    .dashboard-container .card-body .table-responsive .data-table td:last-child form,
    .dashboard-container .card-body .table-responsive .data-table td:last-child .btn {
        display: inline-flex !important;
        vertical-align: middle;
    }
    .dashboard-container .card-body .table-responsive .data-table { table-layout: auto !important; }
    /* Prevent action buttons from stretching full-width */
    .data-table td:last-child .btn-block { width: auto !important; }
    .data-table td:last-child .btn { width: auto !important; display: inline-flex !important; }
    .data-table td:last-child .btn { margin: 0 0.25rem; display: inline-flex; }
    .data-table td:last-child form { display: inline-block; }
    /* Widen main content and dashboard tab area on responsive screens */
    .main-content { padding-left: 0; padding-right: 0; }
    /* Only remove padding from non-IT dashboards - IT dashboard needs full-bleed */
    .dashboard-container:has(> .tab-navigation) { padding-left: 0; padding-right: 0; }
    .dashboard-container:has(> .dashboard-tabs) { padding-left: 0; padding-right: 0; }

    /* Ensure tab navigation, filters, and table use full available width - only for non-IT */
    .dashboard-container:has(> .tab-navigation) .tab-navigation,
    .dashboard-container:has(> .tab-navigation) .tab-content,
    .dashboard-container:has(> .tab-navigation) .card {
        width: 100%;
    }

    /* Make the primary card span edge-to-edge - only for non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    /* IT Dashboard: Full-bleed layout for .dashboard-tabs - MUST override conflicting width rules */
    .dashboard-container .dashboard-tabs,
    .dashboard-container .dashboard-tabs + .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    /* IT Dashboard: Maintain inner gutters so filters don't hug edges */
    .dashboard-container .dashboard-tabs { padding-left: 2.5rem !important; padding-right: 0.25rem; overflow-x: auto; }
    .dashboard-container .dashboard-tabs + .card .card-header { padding-left: 3.5rem !important; padding-right: 0.25rem; }
    .dashboard-container .dashboard-tabs + .card .card-body > .card-title { margin-left: 3rem !important; }
    .dashboard-container .dashboard-tabs + .card .card-header,
    .dashboard-container .dashboard-tabs + .card .card-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* IT Dashboard: Move heading and description slightly to the right */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header h1 {
        padding-left: 2.25rem !important;
    }
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header p {
        padding-left: 2.25rem !important;
    }
    
    /* Dashboard action buttons: Make width smaller and center them */
    .dashboard-container .dashboard-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .dashboard-container .dashboard-actions .btn {
        width: auto !important;
        max-width: 92% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }
    .dashboard-container .dashboard-actions .new-request-dropdown {
        width: 100% !important;
        max-width: 95% !important;
        min-width: 0 !important;
        flex: 0 1 100% !important;
    }
    .dashboard-container .dashboard-actions .new-request-dropdown .new-request-toggle {
        width: 100% !important;
        height: 100%;
        justify-content: center;
    }
    /* IT Dashboard ONLY: Make buttons wider */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions .btn {
        max-width: 98% !important;
    }
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions .new-request-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* IT Dashboard ONLY: Move buttons to the right (centered in their section) */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions {
        margin-left: 2.5rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Make buttons wider */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions .btn {
        max-width: 97% !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions .new-request-dropdown {
        width: 100% !important;
        max-width: 99% !important;
    }
    /* Non-IT Dashboards ONLY: Move buttons to the right */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        margin-left: 1.5rem !important;
    }
    /* Non-IT Dashboards ONLY: Add side padding instead of full-bleed */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: auto;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* Filters: slightly smaller so they don't overflow edges - only for non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .card-header .form-select {
        min-width: 140px;
        max-width: 28vw;
        font-size: 13px;
        padding: 6px 10px;
        padding-right: 32px;
        flex: 0 1 auto;
    }
    /* IT Dashboard filters keep original sizing */
    .dashboard-container:has(> .dashboard-tabs) .card-header .form-select {
        min-width: 140px;
        max-width: 28vw;
        font-size: 13px;
        padding: 6px 10px;
        padding-right: 32px;
        flex: 0 1 auto;
    }
    /* Root scaling so rem-based text and headings shrink on responsive pages */
    html { font-size: 15px; }

    /* Global text scaling for responsive layouts */
    body { font-size: 93%; }
    /* Headings: ensure they scale down even if base CSS sets px/rem */
    h1 { font-size: 2.0rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1.0rem !important; }

    /* Ensure common text elements inherit the scaled size */
    body, body p, body li, body a, body span, body label, body input, body select, body textarea, body button, body th, body td, body small {
        font-size: inherit;
    }
    /* Layout: brand | bell | hamburger */
    .notification-bell-container-responsive {
        display: flex;
        align-items: center;
        order: 2;
        margin-left: auto; /* push bell + hamburger to the right */
        margin-right: 0.25rem; /* slightly smaller container width */
        position: relative;
    }

    /* Make the bell button bigger on responsive */
    .notification-bell-container-responsive .notification-bell {
        padding: 0.7rem 0.9rem;
        font-size: 1.3rem;
        gap: 0.6rem;
        width: auto;
    }

    .notification-bell-container-responsive .notification-bell i {
        font-size: 1.5rem;
    }

    .hamburger-menu {
        display: flex;
        order: 3;
        margin-left: 0.5rem;
    }

    /* Hide desktop hamburger menu on responsive */
    .hamburger-menu-desktop {
        display: none !important;
    }

    /* Hide desktop sidebar menu on responsive */
    .desktop-sidebar-menu {
        display: none !important;
    }

    /* Show Dashboard, Reports, and Item Requests on responsive (in hamburger menu) */
    .nav-menu-desktop-hidden {
        display: list-item !important;
    }

    /* Reports dropdown styling for responsive (hamburger menu) */
    .reports-dropdown .reports-menu {
        position: static !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: #f9f9f9 !important;
        min-width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0.5rem !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .reports-dropdown.open .reports-menu {
        max-height: 500px;
    }

    .reports-dropdown .reports-menu a {
        padding: 0.75rem 1.5rem !important;
        font-weight: normal !important;
        margin-left: 1rem !important;
        border-left: 3px solid transparent;
    }

    .reports-dropdown .reports-menu a:hover {
        background: var(--light-color) !important;
        border-left-color: var(--primary-color) !important;
    }

    .nav-brand {
        order: 1;
    }

    /* Hide desktop bell in collapsed menu; keep user visible */
    .nav-menu .notification-bell-container {
        display: none;
    }

    /* Show user info at top of menu */
    .nav-menu .nav-user {
        display: block;
        order: -1;
        width: 100%;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    /* Position dropdown for responsive bell */
    .notification-bell-container-responsive .notification-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        width: 86vw; /* slightly smaller than before */
        max-width: 360px;
        margin-top: 0.5rem;
        z-index: 1002;
    }

    /* --- Tabs: prevent horizontal overflow and enable swipe scroll --- */
    .tab-navigation {
        display: flex;
        gap: 0; /* no gaps between tabs on responsive */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        max-width: 100%;
    }

    .tab-navigation .tab-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Optional slimmer scrollbar */
    .tab-navigation::-webkit-scrollbar { height: 6px; }
    .tab-navigation::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
    .tab-navigation::-webkit-scrollbar-track { background: transparent; }

    /* Keep the search block from forcing overflow */
    .tab-navigation .tab-search { flex: 0 0 auto; min-width: 240px; margin-left: auto; }

    /* --- Dashboard top tabs (Requests, Users, etc.) --- */
    .dashboard-tabs {
        display: flex;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        max-width: 100%;
    }

    .dashboard-tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Non-dashboard pages: add slight side padding to content containers */
    .main-content > .card,
    .main-content > section,
    .main-content > .content-section,
    .main-content > .container,
    .main-content > div:not(.dashboard-container):not(.flash-messages):not(.maintenance-banner) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }
    /* Pages without tab-navigation (e.g., Reports): give the dashboard-container gutters */
    .dashboard-container:not(:has(.tab-navigation)) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Non-dashboard page headings: add side space */
    .main-content > h1:not(.dashboard-title),
    .main-content > div:not(.dashboard-container) > h1,
    .main-content > section > h1 {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }

    .dashboard-tabs::-webkit-scrollbar { height: 6px; }
    .dashboard-tabs::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
    .dashboard-tabs::-webkit-scrollbar-track { background: transparent; }

    /* --- Enter PIN modal responsive layout --- */
    .pin-modal .pin-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .pin-modal .pin-input-section {
        width: 100%;
    }

    .pin-modal .pin-timer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
    }

    .pin-modal .pin-timer .timer-svg {
        max-width: 160px;
        height: auto;
    }

    .pin-modal .timer-label {
        text-align: center;
        width: 100%;
    }

    /* Make selectors extra-specific to outrank inline/template styles */
    #pinModal.pin-modal .pin-modal-body .pin-content-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    #pinModal.pin-modal .pin-modal-body .pin-input-section {
        order: 1 !important;
        width: 100% !important;
    }

    #pinModal.pin-modal .pin-modal-body .pin-timer {
        order: 2 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #pinModal.pin-modal .pin-modal-body .pin-timer .timer-svg,
    #pinModal.pin-modal .pin-modal-body .pin-timer .timer-circle {
        max-width: 160px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #pinModal.pin-modal .pin-modal-body .timer-label {
        text-align: center !important;
        width: 100% !important;
    }

    /* Place Real-Time: LIVE below the page title heading on responsive */
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator,
    .dashboard-header > .refresh-indicator {
        display: block !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
    }

    /* Keep icon + title inline; wrap indicator to next line */
    .dashboard-header h1,
    .dashboard-header .dashboard-title {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator {
        order: 2;
        flex: 0 0 100%;
    }
}


@media (max-width: 768px) {
    /* Pagination: stack info above buttons */
    .pagination-container { flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
    .pagination-info { text-align: center; width: 100%; }
    .pagination { margin-top: 0.25rem; justify-content: center; width: 100%; padding: 0 1rem; }
    .pagination .btn { display: none; }
    .pagination .btn[aria-label="Previous"],
    .pagination .btn[aria-label="Next"],
    .pagination .btn.btn-primary,
    .pagination .btn.btn-primary + .btn,
    .pagination .btn:has(+ .btn.btn-primary),
    .pagination .btn:first-of-type,
    .pagination .btn:last-of-type { display: inline-flex; }
    .pagination::after { content: '…'; display: inline-block; margin: 0 0.4rem; color: var(--secondary-color); }
    .pagination .btn { padding: 0.35rem 0.55rem; min-width: 32px; font-size: 0.78rem; }

    /* Ensure action column wide enough on small screens */
    .table-responsive { overflow-x: auto; padding-right: 6px; }
    
    /* View button styling for non-IT dashboards */
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info i {
        margin: 0;
    }
    /* Make payment requests table wider in dashboard tabs by reducing side spacing */
    .dashboard-container .card-body .table-responsive {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .dashboard-container .card-body .table-responsive .data-table {
        width: 100%;
    }
    /* Make checkbox column narrower in dashboard tables */
    .dashboard-container .card-body .table-responsive .data-table th:first-child,
    .dashboard-container .card-body .table-responsive .data-table td:first-child {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0.5rem;
        text-align: center;
    }
    .data-table th:last-child,
    .data-table td:last-child { min-width: 150px; text-align: center; white-space: nowrap; padding-right: 10px; }
    
    /* Add gap between Completed and Amount columns */
    .data-table td:nth-last-child(3),
    .data-table th:nth-last-child(3) {
        padding-right: 20px !important;
        border-right: 1px solid #e9ecef;
    }
    .dashboard-container .card-body .table-responsive .data-table th:last-child,
    .dashboard-container .card-body .table-responsive .data-table td:last-child {
        min-width: 150px !important;
        width: 150px !important;
        max-width: 150px !important;
        white-space: nowrap !important;
    }
    .dashboard-container .card-body .table-responsive .data-table td:last-child .btn { margin: 0 0.2rem; }
    .data-table td:last-child .btn-block { width: auto !important; }
    .data-table td:last-child .btn { width: auto !important; display: inline-flex !important; }
    .data-table td:last-child .btn { margin: 0 0.2rem; }
    /* Even wider feel on smaller devices (no gutters) */
    .main-content { padding-left: 0; padding-right: 0; }
    /* Only remove padding from non-IT dashboards - IT dashboard needs full-bleed */
    .dashboard-container:has(> .tab-navigation) { padding-left: 0; padding-right: 0; }
    .dashboard-container:has(> .dashboard-tabs) { padding-left: 0; padding-right: 0; }
    /* Only apply to non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .tab-navigation,
    .dashboard-container:has(> .tab-navigation) .tab-content,
    .dashboard-container:has(> .tab-navigation) .card { width: 100%; }
    .dashboard-container:has(> .tab-navigation) .card { margin-left: 0; margin-right: 0; border-radius: 0; }

    /* IT Dashboard: Full-bleed layout for .dashboard-tabs */
    .dashboard-container .dashboard-tabs,
    .dashboard-container .dashboard-tabs + .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    .dashboard-container .dashboard-tabs { padding-left: 2rem !important; padding-right: 0.25rem; overflow-x: auto; }
    .dashboard-container .dashboard-tabs + .card .card-header { padding-left: 2.75rem !important; padding-right: 0.25rem; }
    .dashboard-container .dashboard-tabs + .card .card-body > .card-title { margin-left: 2.25rem !important; }
    .dashboard-container .dashboard-tabs + .card .card-header,
    .dashboard-container .dashboard-tabs + .card .card-body { padding-left: 0.4rem; padding-right: 0.4rem; }
    /* IT Dashboard: Move heading and description slightly to the right */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header h1 {
        padding-left: 2rem !important;
    }
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header p {
        padding-left: 2rem !important;
    }
    
    /* Dashboard action buttons: Make width smaller and center them */
    .dashboard-container .dashboard-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.625rem;
    }
    .dashboard-container .dashboard-actions .btn {
        width: auto !important;
        max-width: 88% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }
    /* IT Dashboard ONLY: Make buttons wider */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions .btn {
        max-width: 96% !important;
    }
    /* IT Dashboard ONLY: Move buttons to the right (centered in their section) */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions {
        margin-left: 2rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Make buttons wider */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions .btn {
        max-width: 94% !important;
    }
    /* Non-IT Dashboards ONLY: Move buttons to the right */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        margin-left: 1.25rem !important;
    }
    /* Non-IT Dashboards ONLY: Add side padding instead of full-bleed */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        overflow-x: auto;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-body {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    /* Filters: shrink more on small devices - only for non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .card-header .form-select {
        min-width: 120px;
        max-width: 40vw;
        font-size: 12px;
        padding: 6px 10px;
        padding-right: 30px;
        flex: 0 1 auto;
    }
    /* IT Dashboard filters keep original sizing */
    .dashboard-container:has(> .dashboard-tabs) .card-header .form-select {
        min-width: 120px;
        max-width: 40vw;
        font-size: 12px;
        padding: 6px 10px;
        padding-right: 30px;
        flex: 0 1 auto;
    }
    /* Stronger root scaling for tablets/phones */
    html { font-size: 14px; }

    /* Increase scaling on smaller screens */
    body { font-size: 90%; }
    /* Headings smaller on narrow screens */
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4 { font-size: 1.2rem !important; }
    h5 { font-size: 1.05rem !important; }
    h6 { font-size: 0.95rem !important; }

    body, body p, body li, body a, body span, body label, body input, body select, body textarea, body button, body th, body td, body small {
        font-size: inherit;
    }
    /* Enter PIN modal: stack vertically and center timer to prevent overflow */
    .pin-modal .pin-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* No gaps between tabs on smaller screens */
    .tab-navigation { gap: 0 !important; }
    .dashboard-tabs { gap: 0 !important; }

    .pin-modal .pin-modal-body {
        overflow: hidden; /* guard against right-side overflow */
    }

    .pin-modal .pin-input-section {
        width: 100%;
    }

    .pin-modal .pin-timer {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

    .pin-modal .timer-label {
        text-align: center;
        width: 100%;
    }

    .pin-modal .pin-timer .timer-svg {
        max-width: 160px;
        height: auto;
    }

    /* Ensure Real-Time: LIVE stays below title on smaller screens */
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator,
    .dashboard-header > .refresh-indicator {
        display: block !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
    }

    .dashboard-header h1,
    .dashboard-header .dashboard-title {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator {
        order: 2;
        flex: 0 0 100%;
    }

    /* Non-dashboard pages: add slight side padding to content containers */
    .main-content > .card,
    .main-content > section,
    .main-content > .content-section,
    .main-content > .container,
    .main-content > div:not(.dashboard-container):not(.flash-messages):not(.maintenance-banner) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }
    .dashboard-container:not(:has(.tab-navigation)) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .main-content > h1:not(.dashboard-title),
    .main-content > div:not(.dashboard-container) > h1,
    .main-content > section > h1 {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }
}

@media (max-width: 420px) {
    /* Pagination: stack vertically on very small devices */
    .pagination-container { flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
    .pagination-info { text-align: center; width: 100%; }
    .pagination { margin-top: 0.25rem; justify-content: center; width: 100%; padding: 0 0.75rem; }
    .pagination .btn { display: none; }
    .pagination .btn[aria-label="Previous"],
    .pagination .btn[aria-label="Next"],
    .pagination .btn.btn-primary,
    .pagination .btn.btn-primary + .btn,
    .pagination .btn:has(+ .btn.btn-primary),
    .pagination .btn:first-of-type,
    .pagination .btn:last-of-type { display: inline-flex; }
    .pagination::after { content: '…'; display: inline-block; margin: 0 0.35rem; color: var(--secondary-color); }
    .pagination .btn { padding: 0.3rem 0.5rem; min-width: 30px; font-size: 0.75rem; }

    /* Tightest sizing but keep buttons inside */
    .table-responsive { overflow-x: auto; padding-right: 6px; }
    
    /* View button styling for non-IT dashboards */
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-container:not(:has(.dashboard-tabs)) .btn-info i {
        margin: 0;
    }
    /* Make payment requests table wider in dashboard tabs by reducing side spacing */
    .dashboard-container .card-body .table-responsive {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .dashboard-container .card-body .table-responsive .data-table {
        width: 100%;
    }
    /* Make checkbox column narrower in dashboard tables */
    .dashboard-container .card-body .table-responsive .data-table th:first-child,
    .dashboard-container .card-body .table-responsive .data-table td:first-child {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        padding: 0.5rem;
        text-align: center;
    }
    .data-table th:last-child,
    .data-table td:last-child { min-width: 140px; text-align: center; white-space: nowrap; padding-right: 8px; }
    
    /* Add gap between Completed and Amount columns */
    .data-table td:nth-last-child(3),
    .data-table th:nth-last-child(3) {
        padding-right: 20px !important;
        border-right: 1px solid #e9ecef;
    }
    .dashboard-container .card-body .table-responsive .data-table th:last-child,
    .dashboard-container .card-body .table-responsive .data-table td:last-child {
        min-width: 140px !important;
        width: 140px !important;
        max-width: 140px !important;
        white-space: nowrap !important;
    }
    .data-table td:last-child .btn { margin: 0 0.15rem; }
    .data-table td:last-child .btn-block { width: auto !important; }
    .data-table td:last-child .btn { width: auto !important; display: inline-flex !important; }
    /* Minimal gutters on very small devices */
    .main-content { padding-left: 0; padding-right: 0; }
    /* Only remove padding from non-IT dashboards - IT dashboard needs full-bleed */
    .dashboard-container:has(> .tab-navigation) { padding-left: 0; padding-right: 0; }
    .dashboard-container:has(> .dashboard-tabs) { padding-left: 0; padding-right: 0; }
    /* Only apply to non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .tab-navigation,
    .dashboard-container:has(> .tab-navigation) .tab-content,
    .dashboard-container:has(> .tab-navigation) .card { width: 100%; }
    .dashboard-container:has(> .tab-navigation) .card { margin-left: 0; margin-right: 0; border-radius: 0; }

    /* IT Dashboard: Full-bleed layout for .dashboard-tabs */
    .dashboard-container .dashboard-tabs,
    .dashboard-container .dashboard-tabs + .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    .dashboard-container .dashboard-tabs { padding-left: 1.25rem !important; padding-right: 0.2rem; overflow-x: auto; }
    .dashboard-container .dashboard-tabs + .card .card-header { padding-left: 1.9rem !important; padding-right: 0.2rem; }
    .dashboard-container .dashboard-tabs + .card .card-body > .card-title { margin-left: 1.5rem !important; }
    .dashboard-container .dashboard-tabs + .card .card-header,
    .dashboard-container .dashboard-tabs + .card .card-body { padding-left: 0.35rem; padding-right: 0.35rem; }
    /* IT Dashboard: Move heading and description slightly to the right */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header h1 {
        padding-left: 1.75rem !important;
    }
    .dashboard-container:has(> .dashboard-tabs) .dashboard-header p {
        padding-left: 1.75rem !important;
    }
    
    /* Dashboard action buttons: Make width smaller and center them */
    .dashboard-container .dashboard-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dashboard-container .dashboard-actions .btn {
        width: auto !important;
        max-width: 85% !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }
    /* IT Dashboard ONLY: Make buttons wider */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions .btn {
        max-width: 93% !important;
    }
    /* IT Dashboard ONLY: Move buttons to the right (centered in their section) */
    .dashboard-container:has(> .dashboard-tabs) .dashboard-actions {
        margin-left: 1.5rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Make buttons wider */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions .btn {
        max-width: 90% !important;
    }
    /* Non-IT Dashboards ONLY: Move buttons to the right */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        margin-left: 1rem !important;
    }
    /* Non-IT Dashboards ONLY: Add side padding instead of full-bleed */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .dashboard-actions {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: auto;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation + .card .card-body {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Filters: tightest sizing for very small devices - only for non-IT dashboards */
    .dashboard-container:has(> .tab-navigation) .card-header .form-select {
        min-width: 110px;
        max-width: 46vw;
        font-size: 12px;
        padding: 5px 9px;
        padding-right: 28px;
        flex: 0 1 auto;
    }
    /* IT Dashboard filters keep original sizing */
    .dashboard-container:has(> .dashboard-tabs) .card-header .form-select {
        min-width: 110px;
        max-width: 46vw;
        font-size: 12px;
        padding: 5px 9px;
        padding-right: 28px;
        flex: 0 1 auto;
    }
    /* Tightest scaling for very small devices */
    html { font-size: 13px; }

    /* Tightest scaling for very small devices */
    body { font-size: 87%; }
    /* Headings smallest on very small devices */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.45rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.15rem !important; }
    h5 { font-size: 1.0rem !important; }
    h6 { font-size: 0.9rem !important; }

    body, body p, body li, body a, body span, body label, body input, body select, body textarea, body button, body th, body td, body small {
        font-size: inherit;
    }
    .pin-modal .pin-timer .timer-svg {
        max-width: 140px;
    }

    /* No gaps between tabs on very small screens */
    .tab-navigation { gap: 0 !important; }
    .dashboard-tabs { gap: 0 !important; }

    /* Maintain below-heading placement on very small devices */
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator,
    .dashboard-header > .refresh-indicator {
        display: block !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        margin-left: 0 !important;
    }

    .dashboard-header h1,
    .dashboard-header .dashboard-title {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    .dashboard-header h1 .refresh-indicator,
    .dashboard-header .dashboard-title .refresh-indicator {
        order: 2;
        flex: 0 0 100%;
    }

    /* Non-dashboard pages: add slight side padding to content containers */
    .main-content > .card,
    .main-content > section,
    .main-content > .content-section,
    .main-content > .container,
    .main-content > div:not(.dashboard-container):not(.flash-messages):not(.maintenance-banner) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }
    .dashboard-container:not(:has(.tab-navigation)) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .main-content > h1:not(.dashboard-title),
    .main-content > div:not(.dashboard-container) > h1,
    .main-content > section > h1 {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }
}


/* --- Overrides for IT dashboard layout (responsive) - only applies to .dashboard-tabs --- */
@media (max-width: 1024px) {
    /* IT Dashboard: Full-bleed even if the card is not immediately adjacent */
    .dashboard-container .dashboard-tabs ~ .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    /* IT Dashboard: Push filters/heading when the card is not adjacent */
    .dashboard-container .dashboard-tabs ~ .card .card-header {
        padding-left: 3.5rem !important;
    }
    .dashboard-container .dashboard-tabs ~ .card .card-body > .card-title {
        margin-left: 3rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Add padding when card is not adjacent */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 768px) {
    /* IT Dashboard: Full-bleed even if the card is not immediately adjacent */
    .dashboard-container .dashboard-tabs ~ .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    .dashboard-container .dashboard-tabs ~ .card .card-header {
        padding-left: 2.75rem !important;
    }
    .dashboard-container .dashboard-tabs ~ .card .card-body > .card-title {
        margin-left: 2.25rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Add padding when card is not adjacent */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-body {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
}

@media (max-width: 420px) {
    /* IT Dashboard: Full-bleed even if the card is not immediately adjacent */
    .dashboard-container .dashboard-tabs ~ .card,
    .dashboard-container .dashboard-tabs ~ .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
    .dashboard-container .dashboard-tabs ~ .card .card-header {
        padding-left: 1.9rem !important;
    }
    .dashboard-container .dashboard-tabs ~ .card .card-body > .card-title {
        margin-left: 1.5rem !important;
    }
    
    /* Non-IT Dashboards ONLY: Add padding when card is not adjacent */
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .tab-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-header,
    .dashboard-container:has(> .tab-navigation):not(:has(.dashboard-tabs)) .tab-navigation ~ .card .card-body {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}


/* Full-bleed container only for IT dashboard (.dashboard-tabs) */
@media (max-width: 1024px) {
    .dashboard-container:has(> .dashboard-tabs) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .dashboard-container:has(> .dashboard-tabs) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
}
@media (max-width: 420px) {
    .dashboard-container:has(> .dashboard-tabs) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }
}

/* Make step tabs same height on responsive screens */
@media (max-width: 1024px) {
    /* Container should NOT scroll - only the tabs list */
    .step-tabs-container {
        overflow: visible !important;
    }
    
    /* Allow horizontal scrolling for tabs list ONLY - just like dashboard tabs */
    .step-tabs {
        align-items: stretch;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
    
    .step-tab {
        display: flex;
        align-items: stretch;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    
    .step-tab-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        height: 100%;
        white-space: nowrap;
    }
    
    /* Optional slimmer scrollbar for tabs */
    .step-tabs::-webkit-scrollbar {
        height: 6px;
    }
    .step-tabs::-webkit-scrollbar-thumb {
        background: #dee2e6;
        border-radius: 3px;
    }
    .step-tabs::-webkit-scrollbar-track {
        background: transparent;
    }
    
    /* Item Request Page: Position tab icons on upper left and make smaller */
    .view-request-page .step-tab-content {
        position: relative;
    }
    
    .view-request-page .step-tab.completed .step-tab-content::before,
    .view-request-page .step-tab.warning .step-tab-content::before,
    .view-request-page .step-tab.rejected .step-tab-content::before {
        position: absolute;
        top: 8px;
        left: 8px;
        margin-right: 0 !important;
        font-size: 0.9rem !important;
    }
}