/* ============================================================
   WOPMS — Centralized Mobile Design System & Responsive Supplement
   Applied to ALL role pages via sidebar / layout links.
   DO NOT replace role CSS files — this is additive only.

   CENTRALIZED UTILITY CLASS DOCUMENTATION:
   a. .table-responsive-mobile:
      Wraps data tables in a horizontally scrollable container on
      mobile (<768px) with subtle scroll cue hints & mobile-friendly scrollbar.
      Used across list/items tables in Client, Staff, QA, Delivery views.

   b. .navbar-sticky-mobile:
      Makes top navbar sticky (position: sticky; top: 0; z-index: 1020)
      on small screens (<768px) while maintaining normal desktop positioning.

   c. .modal-mobile-fit:
      Converts dialog modals to near-fullscreen responsive dialogs on
      mobile (<768px) with scrollable internal body and touch-friendly padding.

   d. .stepper-mobile-compact:
      Reflows multi-step progress indicators into compact, horizontally
      scrollable or wrapped touch elements on small viewports (<768px).

   e. .btn-back-mobile:
      Standardizes top-left back button positioning, margins, and tap target
      sizes (min 44px) across pages without colliding with titles or sticky navbar.

   f. .filter-btn-mobile:
      Standardizes filter & search buttons to stack or flex cleanly full-width
      on small screens (<768px) to eliminate overlap with date pickers/exports.

   g. .btn-group-mobile:
      Reflows inline action button rows into stacked full-width touch targets
      (min 44px tap size) on mobile screens.
   ============================================================ */

/* ── PHASE 0 CENTRALIZED MOBILE UTILITIES (max-width: 767.98px) ── */

/* a. Table Responsive Mobile Container */
@media (max-width: 767.98px) {
    .table-responsive-mobile {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        margin-bottom: 1rem !important;
        background:
            linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
        border-radius: 6px;
    }

    .table-responsive-mobile::-webkit-scrollbar {
        height: 6px;
    }
    .table-responsive-mobile::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    .table-responsive-mobile::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
}

/* Centralized Navbar Mobile Logo Behavior (Applies across all roles) */
.navbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.navbar-mobile-logo {
    display: none !important;
    height: 36px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    margin-left: 8px !important;
}

/* b. Sticky Navbar Mobile */
@media (max-width: 992px) {
    header,
    .navbar-sticky-mobile,
    header.navbar-sticky-mobile,
    .client-navbar,
    .staff-navbar,
    .admin-navbar,
    .qa-navbar,
    .delivery-navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        background-color: #ffffff !important;
    }

    .navbar-mobile-logo {
        display: block !important;
    }

    .client-sidebar,
    .staff-sidebar,
    .admin-sidebar {
        z-index: 1100 !important;
    }

    .sidebar-logo-container {
        display: flex !important;
    }
}


/* c. Modal Mobile Fit */
@media (max-width: 767.98px) {
    .modal-mobile-fit .modal-dialog,
    .modal-mobile-fit.modal-dialog {
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    .modal-mobile-fit .modal-content {
        max-height: calc(100vh - 20px) !important;
        border-radius: 12px !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 95vw !important;
        max-width: 680px !important;
        box-sizing: border-box !important;
        padding: 20px 16px !important;
    }

    /* Ensure table-responsive inside modals scrolls horizontally on mobile */
    .modal-mobile-fit .modal-content .table-responsive,
    .modal-mobile-fit .modal-content .table-responsive-mobile {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
        max-width: 100% !important;
    }

    .modal-mobile-fit .modal-body {
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1rem !important;
    }

    .modal-mobile-fit .modal-header {
        padding: 0.75rem 1rem !important;
    }

    .modal-mobile-fit .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .modal-mobile-fit .modal-footer > * {
        margin: 0 !important;
    }
}

/* d. Stepper Mobile Compact */
@media (max-width: 767.98px) {
    .stepper-mobile-compact {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 4px 12px 4px !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        scroll-snap-type: x mandatory;
    }

    .stepper-mobile-compact .step-item,
    .stepper-mobile-compact .step,
    .stepper-mobile-compact > div {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
        text-align: center !important;
    }

    .stepper-mobile-compact .step-circle,
    .stepper-mobile-compact .step-icon,
    .stepper-mobile-compact .step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        line-height: 30px !important;
        margin: 0 auto 4px auto !important;
    }

    .stepper-mobile-compact .step-label,
    .stepper-mobile-compact .step-title {
        font-size: 11px !important;
        white-space: nowrap !important;
        max-width: 85px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* e. Back Button Mobile */
@media (max-width: 767.98px) {
    .btn-back-mobile {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 44px !important;
        padding: 6px 14px !important;
        margin-bottom: 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        width: auto !important;
        align-self: flex-start !important;
        touch-action: manipulation;
    }
}

/* f. Filter Button Mobile */
@media (max-width: 767.98px) {
    .filter-btn-mobile:not(.search-filter-group) {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }

    .search-filter-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .search-filter-group .search-box,
    .search-filter-group .search-box input,
    .search-filter-group .filter-box,
    .search-filter-group .filter-box select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .filter-container-mobile,
    .filter-row-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
}

/* g. Action Button Group Mobile */
@media (max-width: 767.98px) {
    .btn-group-mobile {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .btn-group-mobile > .btn,
    .btn-group-mobile > button,
    .btn-group-mobile > a,
    .btn-group-mobile > input[type="submit"],
    .btn-group-mobile > input[type="button"] {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 14px !important;
        touch-action: manipulation;
    }
}


/* ── 1. BODY OVERFLOW FIX ────────────────────────────────────
   The role CSS files set `html, body { overflow: hidden; }`
   which blocks native scrolling on mobile. Override only for
   small screens where the sidebar is collapsed.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }
    .dashboard-wrapper {
        overflow: visible !important;
    }
    .main-content {
        height: auto !important;
        overflow: visible !important;
    }
}

/* ── 2. SIDEBAR MOBILE BACKDROP OVERLAY ─────────────────────
   A semi-transparent overlay that appears behind the sidebar
   on mobile when the sidebar is open. Clicking it closes
   the sidebar. Added via sidebar blade components.
   ─────────────────────────────────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: opacity 0.3s ease;
}

@media (max-width: 992px) {
    /* Show backdrop when sidebar is open (body NOT having sidebar-collapsed class) */
    body:not(.sidebar-collapsed) .sidebar-backdrop {
        display: block;
    }
}

/* ── 3. STATS GRID RESPONSIVE ────────────────────────────────
   Covers admin (4-col), staff/client (3-col) grids.
   Ensures they collapse properly at every breakpoint.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .stat-card {
        padding: 16px !important;
    }
    .stat-value {
        font-size: 36px !important;
        margin: 8px 0 16px !important;
    }
    .stat-title {
        font-size: 13px !important;
        height: auto !important;
    }
}

/* ── 4. BOTTOM GRID / DASHBOARD GRID RESPONSIVE ─────────────*/
@media (max-width: 992px) {
    .bottom-grid,
    .admin-dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 5. DASHBOARD CONTENT PADDING ───────────────────────────*/
@media (max-width: 992px) {
    .dashboard-content {
        padding: 20px 15px !important;
    }
}
@media (max-width: 576px) {
    .dashboard-content {
        padding: 12px 10px !important;
    }
}

/* ── 6. NAVBAR RESPONSIVE & PROFILE BUTTON ───────────────────*/
@media (max-width: 992px) {
    .client-navbar,
    .staff-navbar,
    .admin-navbar,
    .qa-navbar,
    .delivery-navbar {
        padding: 0 15px !important;
    }
}

/* Mobile Profile Button Icon & Text Hiding (<768px) */
@media (max-width: 767.98px) {
    .nav-profile .nav-profile-name,
    .nav-profile span {
        display: none !important;
    }
    .nav-profile {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .nav-profile i {
        margin: 0 !important;
        font-size: 18px !important;
    }
    .profile-dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        z-index: 1050 !important;
        min-width: 170px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    }
}

@media (min-width: 768px) {
    .d-md-inline {
        display: inline !important;
    }
}

/* ── 7. NOTIFICATION DROPDOWN — MOBILE CENTERING ────────────────*/
@media (max-width: 768px) {
    .notif-dropdown-menu {
        position: fixed !important;
        top: 75px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: 92vw !important;
        max-width: 380px !important;
        box-sizing: border-box !important;
        z-index: 10000 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }
}


/* ── 8. FORM CARD RESPONSIVE ────────────────────────────────*/
@media (max-width: 768px) {
    .form-card,
    .update-card {
        padding: 20px 15px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 480px) {
    .form-card {
        padding: 15px 12px !important;
    }
}

/* ── 9. PAGE HEADER RESPONSIVE ──────────────────────────────*/
.page-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .page-header-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── 10. SECTION HEADER / TABLE ACTIONS RESPONSIVE ──────────*/
@media (max-width: 768px) {
    .section-header,
    .table-header,
    .order-actions-bar,
    .update-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .update-header-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .info-box-grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .right-header,
    .search-filter-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .search-container,
    .search-box,
    .search-box input,
    .search-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .filter-select,
    .status-filter,
    .date-filter {
        width: 100% !important;
    }
    .btn-add-user,
    .btn-primary-action {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 11. TABLE RESPONSIVE ───────────────────────────────────
   Ensure ALL tables are wrapped in an auto-overflow container.
   If a table is NOT in .table-responsive, we add the rule
   at the CSS level.
   ─────────────────────────────────────────────────────────── */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border-radius: 8px;
}

/* Ensure table widths don't collapse — wide tables with small rows for mobile L-to-R scroll */
.data-table,
.recent-orders-table {
    width: 100%;
}

.items-table,
.modal-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

@media (max-width: 768px) {
    .data-table {
        min-width: 850px !important;
    }

    .items-table,
    .modal-table {
        min-width: 650px !important;
    }

    .data-table th,
    .data-table td,
    .recent-orders-table th,
    .recent-orders-table td,
    .items-table th,
    .items-table td,
    .modal-table th,
    .modal-table td {
        font-size: 12px !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    .items-table th,
    .modal-table th {
        background-color: #eff6ff !important;
        color: #1f2937 !important;
        font-weight: 700 !important;
    }

    /* Action buttons in table cells */
    .action-cell {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
}

/* ── 12. CARD CONTAINER RESPONSIVE ──────────────────────────*/
@media (max-width: 576px) {
    .card-container {
        padding: 15px !important;
        border-radius: 10px !important;
    }
    .card-header h3 {
        font-size: 14px !important;
    }
    .card-header p {
        font-size: 12px !important;
    }
}

/* ── 13. MODAL RESPONSIVE ───────────────────────────────────*/
@media (max-width: 768px) {
    .modal-content,
    .view-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 20px 15px !important;
        margin: 10px auto !important;
        border-radius: 10px !important;
        max-height: 92vh !important;
    }
    .modal-header-left {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .view-modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .view-modal-title {
        font-size: 17px !important;
    }
    /* Modal detail rows */
    .shaded-row,
    .detail-row,
    .info-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .info-box-grid,
    .profile-info-box-grid {
        grid-template-columns: 1fr !important;
    }
    /* Delivery modal specific */
    .delivery-modal {
        width: 95vw !important;
    }
}
@media (max-width: 480px) {
    .modal-content,
    .view-modal-content {
        padding: 15px 12px !important;
    }
}

/* ── 14. PROFILE MODAL EXTRA RESPONSIVE ────────────────────*/
@media (max-width: 640px) {
    .profile-modal-content,
    .setting-sub-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 20px 14px !important;
    }
    .profile-modal-header-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .profile-info-box-grid {
        grid-template-columns: 1fr !important;
    }
    .profile-info-label {
        width: 120px !important;
    }
    .setting-form-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }
    .setting-form-label {
        width: auto !important;
    }
    .setting-form-input,
    .setting-form-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .btn-save-setting {
        padding: 10px 30px !important;
        width: 100% !important;
    }
}

/* ── 15. STATUS BADGES ──────────────────────────────────────*/
.status-badge {
    white-space: nowrap;
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Additional status classes that might be missing in some role CSS files */
.status-badge.approved  { background-color: #dcfce7; color: #16a34a; }
.status-badge.rejected  { background-color: #fee2e2; color: #dc2626; }
.status-badge.cancelled { background-color: #fee2e2; color: #dc2626; }
.status-badge.canceled  { background-color: #fee2e2; color: #dc2626; }
.status-badge.pending   { background-color: #ffedd5; color: #ea580c; }
.status-badge.processing { background-color: #dbeafe; color: #2563eb; }
.status-badge.completed  { background-color: #dcfce7; color: #16a34a; }
.status-badge.delivered  { background-color: #dcfce7; color: #16a34a; }
.status-badge.in-transit { background-color: #fef9c3; color: #a16207; }
.status-badge.to-ship,
.status-badge.to_ship    { background-color: #ffedd5; color: #ea580c; }
.status-badge.for-delivery,
.status-badge.for_delivery { background-color: #e0e7ff; color: #4338ca; }
.status-badge.inspection  { background-color: #fef3c7; color: #b45309; }
.status-badge.active      { background-color: #dcfce7; color: #16a34a; }
.status-badge.inactive    { background-color: #fee2e2; color: #dc2626; }
.status-badge.draft       { background-color: #f3f4f6; color: #6b7280; }

/* ── 16. LONG TEXT / FILENAME OVERFLOW PREVENTION ──────────*/
.file-name-cell,
.filename-wrap {
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 250px;
}

/* Prevent long emails/names from breaking table layouts */
td {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── 17. BUTTON ACTION GROUP RESPONSIVE ─────────────────────*/
@media (max-width: 576px) {
    .action-buttons,
    .form-actions,
    .btn-group-responsive {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .action-buttons .btn,
    .form-actions .btn,
    .action-buttons button,
    .form-actions button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 18. REPORT/PRINT FOOTER RESPONSIVE ─────────────────────*/
@media (max-width: 768px) {
    .report-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .btn-print,
    .btn-export {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 19. PAGINATION RESPONSIVE ──────────────────────────────*/
@media (max-width: 576px) {
    .pagination-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .pagination {
        flex-wrap: wrap;
    }
    .page-btn {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
}

/* ── 20. CHART CANVAS RESPONSIVE ─────────────────────────── */
@media (max-width: 576px) {
    canvas {
        max-height: 220px !important;
    }
}

/* ── 21. SIDEBAR RESPONSIVE (ENSURE OVERLAY ON TABLET) ──────*/
@media (max-width: 992px) {
    /* When sidebar is open on mobile/tablet, it should overlay */
    .admin-sidebar,
    .staff-sidebar,
    .client-sidebar,
    .qa-sidebar,
    .delivery-sidebar {
        z-index: 1050 !important;
    }
    /* Main content fills full width on mobile */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── 22. TYPOGRAPHY RESPONSIVE ──────────────────────────────*/
@media (max-width: 576px) {
    .page-title {
        font-size: 18px !important;
    }
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 15px !important; }
}

/* ── 23. IMAGE RESPONSIVE ───────────────────────────────────*/
img {
    max-width: 100%;
    height: auto;
}

/* ── 24. SECTION HEADER BUTTON RESPONSIVE ───────────────────*/
@media (max-width: 768px) {
    .section-header {
        flex-direction: column !important;
    }
    .section-header button,
    .section-header a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ── 25. NOT ACCREDITED PAGE RESPONSIVE ─────────────────────*/
@media (max-width: 576px) {
    .not-accredited-wrapper {
        padding: 20px 15px !important;
    }
}

/* ── 26. COMMON UTILITY CLASSES ─────────────────────────────*/
.w-full-mobile {
    /* Use this on elements that should be full-width on mobile */
}
@media (max-width: 576px) {
    .w-full-mobile {
        width: 100% !important;
    }
}

/* Prevent global horizontal scrollbar */
body {
    overflow-x: hidden;
}

/* ── 27. TABLE WRAPPER AUTO-OVERFLOW ─────────────────────────
   Any direct-child table of .form-card that is NOT inside
   .table-responsive gets implicit overflow protection.
   ─────────────────────────────────────────────────────────── */
.form-card > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ── 28. MOBILE-VISIBLE SCROLLBAR FOR TABLES ─────────────── */
.table-responsive::-webkit-scrollbar {
    height: 5px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── 29. SIDEBAR AUTO-CLOSE ON MOBILE AFTER RESIZE ──────────
   When window resizes above 992px, remove sidebar-collapsed
   class so desktop layout restores correctly. Done via JS
   in sidebar blade components.
   ─────────────────────────────────────────────────────────── */

/* ── 30. FOCUS STATES FOR ACCESSIBILITY ─────────────────────*/
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── 31. SIDEBAR SCROLLBAR ───────────────────────────────────*/
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 5 — ADMIN & SUPERADMIN MOBILE RESPONSIVE FIXES
   Scope: max-width 768px unless noted.
   ═══════════════════════════════════════════════════════════ */

/* ── P5-1. ADMIN DASHBOARD — CHART CARD HEIGHT REDUCTION ────*/
@media (max-width: 768px) {
    .card-container [style*="height: 300px"],
    .card-container [style*="height:300px"] {
        height: 220px !important;
    }
    canvas#productionMonitorChart {
        max-height: 220px;
    }
}

/* ── P5-2. ADMIN DASHBOARD — PENDING QUOTATIONS CARD ────────*/
@media (max-width: 768px) {
    .card-container .card-header[style*="justify-content:space-between"],
    .card-container .card-header[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .recent-orders-table a[style*="padding:4px 10px"],
    .recent-orders-table a[style*="padding: 4px 10px"] {
        padding: 6px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* ── P5-3. ADMIN & SUPERADMIN REPORTS — HEADER / DATE PICKER ─*/
@media (max-width: 768px) {
    .reports-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .reports-title-section {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .reports-header > div:last-child,
    .reports-header > form {
        width: 100% !important;
        align-items: flex-start !important;
    }
    .date-picker-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .date-picker-group .date-picker,
    .date-picker,
    .date-picker-group input[type="date"] {
        flex: 1 1 120px !important;
        min-width: 110px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
}

/* ── P5-4. SUPERADMIN REPORTS — PRESET PILLS ROW ────────────*/
@media (max-width: 768px) {
    .date-presets-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
    }
    .preset-pill {
        white-space: nowrap !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    .reports-header > div[style*="flex-direction: column"],
    .reports-header > div[style*="flex-direction:column"] {
        width: 100% !important;
        align-items: flex-start !important;
    }
}

/* ── P5-5. FINANCIAL HIGHLIGHTS GRID ────────────────────────*/
@media (max-width: 900px) {
    .financial-highlights-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}
@media (max-width: 576px) {
    .financial-highlights-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .financial-card {
        padding: 14px !important;
    }
    .financial-value {
        font-size: 20px !important;
    }
    .financial-title {
        font-size: 13px !important;
    }
    .financial-sub {
        font-size: 12px !important;
    }
}

/* ── P5-6. METRIC CARDS GRID ─────────────────────────────────*/
@media (max-width: 900px) {
    .metric-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
}
@media (max-width: 640px) {
    .metric-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .metric-card {
        padding: 12px !important;
    }
    .metric-value {
        font-size: 22px !important;
    }
    .metric-label {
        font-size: 11px !important;
    }
    .metric-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

/* ── P5-7. REPORTS CHARTS GRID & DATE PICKER ──────────────────*/
@media (max-width: 900px) {
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .chart-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .chart-container {
        height: 280px !important;
        min-height: 280px !important;
        width: 100% !important;
    }
    .date-picker-group {
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    .date-picker-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
}

/* ── P5-8. REPORTS TABLE HEADER / STATUS DROPDOWN ───────────*/
@media (max-width: 768px) {
    .status-dropdown-wrapper {
        width: 100% !important;
    }
    .status-dropdown-btn {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .status-dropdown-menu {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ── P5-9. REPORTS FOOTER — TOTALS + PDF/EXCEL BUTTONS ──────*/
@media (max-width: 768px) {
    .totals-section {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .btn-print,
    .btn-export {
        flex: 1 1 140px !important;
        justify-content: center !important;
        min-height: 44px !important;
        font-size: 13px !important;
    }
}

/* ── P5-10. SUPERADMIN RESTORES — QUICK ACCESS ICON BUTTONS ──*/
@media (max-width: 768px) {
    .page-header-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .page-header-title > div[style*="gap: 8px"],
    .page-header-title > div[style*="gap:8px"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .btn-secondary-gray {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── P5-11. STORAGE METRICS GRID (SUPERADMIN RESTORES) ───────*/
@media (max-width: 576px) {
    .storage-metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .metric-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* ── P5-12. ADMIN QUOTATIONS MODAL — ITEMS TABLE SCROLL ──────*/
@media (max-width: 768px) {
    .modal-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .summary-grids {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    .summary-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .finishing-duration {
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* ── P5-13. ADMIN QUOTATIONS MODAL HEADER — DOWNLOAD/BACK ───*/
@media (max-width: 576px) {
    .view-modal-header > a.download-icon,
    .view-modal-header > button.btn-back {
        align-self: flex-end !important;
    }
}

/* ── P5-14. STATUS BADGE — FOR-CANCEL ───────────────────────*/
.status-badge.for-cancel,
.status-badge.for_cancel {
    background-color: #fef3c7;
    color: #92400e;
}

/* ── P5-15. ARCHIVE USERS — RESTORE BUTTON ──────────────────*/
@media (max-width: 768px) {
    .btn-restore,
    .action-btn.btn-restore {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
    }
}

/* ── P5-16. MODAL OVERLAY INNER CONTENT SCROLL ──────────────*/
@media (max-width: 768px) {
    .modal-overlay .view-modal-content,
    .modal-overlay .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 90vh !important;
    }
}

/* ── P5-17. NO-SHADOW TABLE SCROLL (SUPERADMIN USERS / TABLES) ─*/
@media (max-width: 767.98px) {
    .table-responsive-mobile-noshadow,
    .table-responsive-noshadow {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 6px;
    }
}

/* ── P5-18. STAFF EDITQUOTATION & FORM ACTIONS RESPONSIVE ───────*/
@media (max-width: 767.98px) {
    .form-actions.btn-group-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
    .form-actions.btn-group-mobile .btn-back-form,
    .form-actions.btn-group-mobile .btn-submit-form,
    .form-actions.btn-group-mobile button,
    .form-actions.btn-group-mobile a {
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* ── P5-19. CLIENT ADDORDER/EDITORDER PO FIELDS GRID ───────────*/
@media (max-width: 767.98px) {
    .po-fields-row,
    .signed-qtn-po-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
}

/* ── P5-20. DELIVERY EDITUPDATE COURIER INFO READABILITY ───────*/
@media (max-width: 767.98px) {
    .courier-info-card,
    .courier-details-box {
        padding: 12px !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 6 — CLIENT DASHBOARD MOBILE REFINEMENTS
   Scope: max-width 767.98px unless noted.
   ═══════════════════════════════════════════════════════════ */

/* ── P6-1. RECENT PROJECTS TABLE — HORIZONTAL SCROLL MOBILE ─*/
/* Ensures the table is wide enough to trigger horizontal
   scroll inside .table-responsive-mobile on narrow screens.  */
@media (max-width: 767.98px) {
    .recent-orders-table {
        min-width: 560px !important;
        table-layout: auto !important;
    }
}

/* ── P6-2. NOTIFICATIONS CARD — BOUNDED HEIGHT ON MOBILE ────*/
/* Caps the list height so it doesn't overflow the card and   */
/* lets the inner list scroll rather than the whole page.     */
@media (max-width: 767.98px) {
    .card-container .notifications-list {
        max-height: 300px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ── P6-3. MODAL CLOSE BUTTON — ALWAYS TOP-RIGHT IN HEADER ──*/
/* Base: X button styled for all modal header types on all viewports */
.modal-close-btn,
.close-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    padding: 0;
    font-family: inherit;
    touch-action: manipulation;
    transition: background 0.15s;
    text-decoration: none;
}
.modal-close-btn:hover,
.close-modal:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111827;
}

/* Keeps the × pinned top-right when the header content wraps */
/* on narrow viewports so it never falls below the title row. */
@media (max-width: 767.98px) {
    .view-modal-header,
    .modal-header,
    .user-modal-header,
    .stepper-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
        position: relative !important;
    }

    .view-modal-header .modal-close-btn,
    .view-modal-header .close-modal,
    .modal-header .modal-close-btn,
    .modal-header .close-modal,
    .user-modal-header .modal-close-btn,
    .user-modal-header .close-modal,
    .stepper-header .modal-close-btn,
    .stepper-header .close-modal {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        color: #374151 !important;
        flex-shrink: 0 !important;
        touch-action: manipulation;
    }

    .view-modal-header .modal-close-btn:hover,
    .view-modal-header .close-modal:hover,
    .modal-header .modal-close-btn:hover,
    .modal-header .close-modal:hover,
    .user-modal-header .modal-close-btn:hover,
    .user-modal-header .close-modal:hover,
    .stepper-header .modal-close-btn:hover,
    .stepper-header .close-modal:hover {
        background: rgba(0, 0, 0, 0.10) !important;
    }
}

/* ════════════════════════════════════════════════════════════
   PHASE 7 — COMPREHENSIVE MOBILE UI FIXES (ALL ROLES)
   Scope: max-width 992px for layout, 767.98px for detail fixes.
   ════════════════════════════════════════════════════════════ */

/* P7-1. STICKY NAVBAR FIX
   Root cause: .main-content has height:100vh + overflow-y:auto
   which makes it the scroll container on mobile, breaking sticky.
   Fix: collapse main-content height so body scroll is used. */
@media (max-width: 992px) {
    .main-content {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .client-navbar,
    .staff-navbar,
    .admin-navbar,
    .qa-navbar,
    .delivery-navbar,
    .superadmin-navbar,
    header.navbar-sticky-mobile,
    header.client-navbar,
    header.staff-navbar,
    header.admin-navbar,
    header.qa-navbar,
    header.delivery-navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
        background-color: #ffffff !important;
    }
}

/* P7-2. STEPPER - HIDE LABELS ON SMALL SCREENS */
@media (max-width: 375px) {
    .stepper-mobile-compact .step-label,
    .stepper-mobile-compact .step-title,
    .stepper-wrapper .step-label,
    .stepper-wrapper .step-title { display: none !important; }
    .stepper-mobile-compact .step-circle,
    .stepper-wrapper .step-circle {
        width: 26px !important; height: 26px !important;
        font-size: 11px !important; line-height: 26px !important;
    }
    .stepper-mobile-compact .step-line,
    .stepper-wrapper .step-line { flex: 0 0 10px !important; min-width: 10px !important; }
}
@media (min-width: 376px) and (max-width: 767.98px) {
    .stepper-wrapper .step-label {
        font-size: 10px !important; max-width: 60px !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    .stepper-wrapper .step-circle {
        width: 28px !important; height: 28px !important;
        font-size: 12px !important; line-height: 28px !important;
    }
}

/* P7-3. MODAL - VERTICAL SCROLL ONLY */
@media (max-width: 767.98px) {
    .modal-overlay {
        align-items: flex-start !important; padding: 10px 0 !important;
        overflow-y: auto !important; overflow-x: hidden !important;
    }
    .view-modal-content,
    .modal-content,
    .view-modal,
    .delivery-modal {
        width: 95vw !important; max-width: 95vw !important;
        margin: 10px auto !important; max-height: 90vh !important;
        overflow-y: auto !important; overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important; border-radius: 12px !important;
    }
    .view-modal-body, .modal-body {
        overflow-y: auto !important; overflow-x: hidden !important;
    }
}

/* P7-7. FORM CARD INPUTS - FULL WIDTH */
@media (max-width: 767.98px) {
    .form-card .form-row, .form-card .three-cols, .form-card .terms-grid {
        display: flex !important; flex-direction: column !important; gap: 12px !important;
    }
    .form-card .form-group, .form-card .remarks-group { width: 100% !important; flex: 1 1 100% !important; grid-column: 1 / -1 !important; }
    .form-card .form-control,
    .form-card input[type="text"],
    .form-card input[type="number"],
    .form-card input[type="email"],
    .form-card input[type="date"],
    .form-card textarea,
    .form-card select {
        width: 100% !important; box-sizing: border-box !important; max-width: 100% !important;
    }
    .form-card .items-table, .form-card .data-table { min-width: 600px !important; }
}

/* P7-8. TABLE MIN-WIDTHS */
@media (max-width: 767.98px) {
    .items-table { min-width: 580px !important; }
    .data-table { min-width: 560px !important; }
    .orders-table, .order-items-table, .view-table, .recent-orders-table { min-width: 500px !important; }
}

/* P7-9. BOTTOM GRID */
@media (max-width: 767.98px) {
    .bottom-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* P7-10. NOTIFICATIONS LIST */
@media (max-width: 767.98px) {
    .notifications-list {
        max-height: 250px !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
    }
}

/* P7-11. FORM ACTIONS STACK */
@media (max-width: 767.98px) {
    .form-actions { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
    .form-actions .btn-cancel,
    .form-actions .btn-submit,
    .form-actions > a,
    .form-actions > button {
        width: 100% !important; min-height: 46px !important;
        display: flex !important; align-items: center !important;
        justify-content: center !important; box-sizing: border-box !important;
        text-align: center !important; flex: unset !important;
    }
}

/* P7-12. MODAL ACTIONS STACK */
@media (max-width: 767.98px) {
    .modal-actions { flex-direction: column !important; gap: 10px !important; padding: 0 !important; }
    .modal-actions .modal-btn-back,
    .modal-actions .modal-btn-submit,
    .modal-actions > button { width: 100% !important; min-height: 46px !important; }
}

/* P7-13. INFO ROWS IN MODALS */
@media (max-width: 767.98px) {
    .info-row, .info-row.three-col { flex-direction: column !important; gap: 10px !important; }
    .info-col { width: 100% !important; }
    .shaded-row { flex-direction: column !important; gap: 6px !important; }
    .shaded-col, .detail-col { width: 100% !important; }
}

/* P7-14. REPORTS - DATE + EXPORT BUTTONS */
@media (max-width: 767.98px) {
    .date-picker-group {
        display: flex !important; flex-wrap: wrap !important;
        gap: 8px !important; width: 100% !important;
    }
    .date-picker-group input[type="date"], .date-picker-group .date-picker {
        flex: 1 1 130px !important; min-width: 120px !important;
    }
    .action-buttons { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; }
    .btn-print, .btn-export, .btn-pdf, .btn-excel {
        flex: 1 1 140px !important; min-height: 44px !important;
        justify-content: center !important; display: inline-flex !important; align-items: center !important;
    }
}

/* P7-15. BACK BUTTON IN MODAL */
@media (max-width: 767.98px) {
    .btn-back-modal, .btn-modal-back {
        min-height: 40px !important; min-width: 70px !important;
        padding: 8px 16px !important; font-size: 13px !important;
    }
}

/* P7-16. DETAIL GRID */
@media (max-width: 767.98px) {
    .info-box-grid, .detail-grid, .two-col-grid {
        grid-template-columns: 1fr !important; gap: 10px !important;
    }
}

/* P7-17. FORM CARD PADDING */
@media (max-width: 767.98px) {
    .form-card, .page-card, .update-card { padding: 16px !important; border-radius: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 8 — TABLET RESPONSIVE OVERHAUL (ALL ROLES)
   Portrait:  768px – 1024px  (iPad Air 820px, Surface Pro 7 912px, iPad Pro 1024px)
   Landscape: 1025px – 1366px (iPad Air 1180px, Surface Pro 7 1368px, iPad Pro 1366px)

   RULES:
   • Lower bound min-width: 768px — NEVER touches mobile (≤767.98px) styles.
   • Upper bound max-width: 1366px — covers all tablet landscape modes.
   • Orientation queries supplement portrait/landscape table behaviour.
   • Zero blade HTML changes — this file is already linked in all 49 blades.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   T-1. LAYOUT — MAIN CONTENT & DASHBOARD PADDING
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .dashboard-content {
        padding: 24px 20px !important;
    }
    .main-content {
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .dashboard-content {
        padding: 28px 24px !important;
    }
    .main-content {
        overflow-x: hidden !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-2. FORM CARD — TABLET PADDING
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .form-card,
    .update-card,
    .page-card {
        padding: 24px 20px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .form-card,
    .update-card,
    .page-card {
        padding: 28px 24px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-3. SECTION HEADER — SEARCH & FILTER BAR
   Handled by Phase 10 (P10-2, P10-3) for specific tablet sizes.
   These legacy rules kept for broader tablet range (901-1366px).
   ───────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1366px) {
    .section-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .right-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .search-input {
        width: 200px !important;
    }
    .filter-select {
        min-width: 120px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-4. TABLES — PRIMARY TABLET FOCUS
   Portrait 768–1024px: compact font + padding, overflow-x scroll.
   Landscape 1025–1366px: slightly looser, still scrollable.
   Orientation overrides at end of section.
   ───────────────────────────────────────────────────────────── */

/* === Portrait tablet (768–1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ensure the scroll container is active */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
    }

    /* Main data tables */
    .data-table {
        min-width: 680px !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .data-table th,
    .data-table td {
        font-size: 12.5px !important;
        padding: 10px 10px !important;
        white-space: nowrap !important;
    }

    /* Items / Quotation modal tables */
    .items-table,
    .modal-table {
        min-width: 540px !important;
        width: 100% !important;
    }

    .items-table th,
    .items-table td,
    .modal-table th,
    .modal-table td {
        font-size: 12.5px !important;
        padding: 9px 10px !important;
        white-space: nowrap !important;
    }

    /* Dashboard recent orders table */
    .recent-orders-table {
        min-width: 480px !important;
        width: 100% !important;
    }

    .recent-orders-table th,
    .recent-orders-table td {
        font-size: 12px !important;
        padding: 9px 10px !important;
        white-space: nowrap !important;
    }

    /* Orders / view / generic table aliases */
    .orders-table,
    .order-items-table,
    .view-table {
        min-width: 480px !important;
    }

    /* Action cell buttons: stay side-by-side, compact */
    .action-cell {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .action-btn {
        min-width: 30px !important;
        height: 30px !important;
        width: 30px !important;
        font-size: 12px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Status badge compact */
    .status-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        max-width: 130px !important;
    }

    /* Scrollbar hint on tablet tables */
    .table-responsive::-webkit-scrollbar {
        height: 6px !important;
    }
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
        border-radius: 4px !important;
    }
    .table-responsive::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #94a3b8 !important;
    }
}

/* === Landscape tablet (1025–1366px) === */
@media (min-width: 1025px) and (max-width: 1366px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    .data-table {
        width: 100% !important;
    }

    .data-table th,
    .data-table td {
        font-size: 13px !important;
        padding: 11px 12px !important;
    }

    .items-table th,
    .items-table td,
    .modal-table th,
    .modal-table td {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .action-cell {
        display: flex !important;
        gap: 4px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .action-btn {
        min-width: 32px !important;
        height: 32px !important;
        width: 32px !important;
        font-size: 12px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .status-badge {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }
}

/* === Orientation-specific table overrides === */

/* Portrait: always force horizontal scroll, never wrap text */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .data-table th,
    .data-table td,
    .items-table th,
    .items-table td,
    .modal-table th,
    .modal-table td,
    .recent-orders-table th,
    .recent-orders-table td {
        white-space: nowrap !important;
    }
}

/* Landscape: allow text to wrap — more horizontal space available */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .data-table {
        min-width: auto !important; /* table breathes in landscape */
        width: 100% !important;
    }
    .data-table th,
    .data-table td {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Section header stays row in landscape */
    .section-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    /* Stats grid can show 3 cols in landscape */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* Bottom grid 2-col in landscape */
    .bottom-grid,
    .admin-dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-5. STATS GRID — TABLET COLUMNS
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .stat-card {
        padding: 18px !important;
    }
    .stat-value {
        font-size: 32px !important;
        margin: 6px 0 12px !important;
    }
    .stat-title {
        font-size: 13px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1024px) {
    /* landscape override handled by orientation: landscape above */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-6. BOTTOM GRID / DASHBOARD CHARTS
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .bottom-grid,
    .admin-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .chart-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .chart-container {
        height: 260px !important;
        min-height: 260px !important;
        width: 100% !important;
    }
    canvas#productionMonitorChart {
        max-height: 260px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .chart-container {
        height: 280px !important;
        width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-7. MODALS — TABLET SIZING (portrait & landscape)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .modal-overlay {
        align-items: center !important;
        padding: 20px 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .view-modal-content,
    .modal-content,
    .delivery-modal {
        width: 90vw !important;
        max-width: 720px !important;
        margin: 20px auto !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }

    /* Info grid inside modals: keep 2-col at tablet */
    .modal-content .info-box-grid,
    .view-modal-content .info-box-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Modal tables inside modals: scrollable */
    .modal-content .table-responsive,
    .view-modal-content .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
    }

    /* Modal header: keep row at tablet */
    .view-modal-header,
    .modal-header,
    .user-modal-header,
    .stepper-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
        position: relative !important;
    }

    /* Close button: static position at tablet (not absolute) */
    .view-modal-header .modal-close-btn,
    .view-modal-header .close-modal,
    .modal-header .modal-close-btn,
    .modal-header .close-modal,
    .user-modal-header .modal-close-btn,
    .user-modal-header .close-modal,
    .stepper-header .modal-close-btn,
    .stepper-header .close-modal {
        position: static !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    /* Summary grids inside modals */
    .summary-grids {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .summary-item {
        flex: 1 1 40% !important;
    }
    .finishing-duration {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .view-modal-content,
    .modal-content,
    .delivery-modal {
        width: 80vw !important;
        max-width: 960px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .modal-content .info-box-grid,
    .view-modal-content .info-box-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .modal-overlay {
        overflow-y: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-8. PAGINATION — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .pagination-container {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .page-btn {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    .per-page-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-9. REPORTS — DATE PICKER & HEADER
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .reports-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
    }
    .reports-title-section {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .reports-header > div:last-child,
    .reports-header > form {
        width: 100% !important;
    }
    .date-picker-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: center !important;
    }
    .date-picker-group .date-picker,
    .date-picker-group input[type="date"] {
        flex: 1 1 130px !important;
        min-width: 120px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
    .date-picker-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    .date-presets-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .preset-pill {
        font-size: 12px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
    }
    /* Status dropdown in reports */
    .status-dropdown-wrapper {
        width: auto !important;
    }
    .status-dropdown-btn {
        width: auto !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .reports-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .date-picker-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .date-picker-group .date-picker,
    .date-picker-group input[type="date"] {
        min-width: 130px !important;
        box-sizing: border-box !important;
    }
    .date-presets-wrapper {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-10. SECTION HEADER ACTION BUTTONS — TABLET
   Portrait ≤900 stacks (T-3 handles it). 901–1366: auto width.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1366px) {
    .btn-add-user,
    .btn-primary-action {
        width: auto !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .btn-add-user,
    .btn-primary-action {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-11. FINANCIAL HIGHLIGHTS GRID — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .financial-highlights-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .financial-card {
        padding: 16px !important;
    }
    .financial-value {
        font-size: 22px !important;
    }
    .financial-title {
        font-size: 13px !important;
    }
    .financial-sub {
        font-size: 12px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .financial-highlights-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-12. METRIC CARDS GRID — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .metric-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .metric-card {
        padding: 14px !important;
    }
    .metric-value {
        font-size: 22px !important;
    }
    .metric-label {
        font-size: 11px !important;
    }
    .metric-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .metric-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-13. FORM INPUTS — TABLET GRID (3-col → 2-col portrait)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 3-col forms become 2-col on portrait tablet */
    .form-card .three-cols,
    .form-card .form-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .form-card .remarks-group {
        grid-column: 1 / -1 !important;
    }
    .form-card .terms-grid {
        grid-template-columns: 1fr !important;
    }
    /* All inputs fill their column */
    .form-card .form-control,
    .form-card input[type="text"],
    .form-card input[type="number"],
    .form-card input[type="email"],
    .form-card input[type="date"],
    .form-card textarea,
    .form-card select {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    /* PO / signed quotation fields row */
    .po-fields-row,
    .signed-qtn-po-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    /* Items table inside form */
    .form-card .items-table,
    .form-card .data-table {
        min-width: 540px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .form-card .form-control,
    .form-card input[type="text"],
    .form-card input[type="number"],
    .form-card input[type="email"],
    .form-card input[type="date"],
    .form-card textarea,
    .form-card select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .form-card .three-cols,
    .form-card .form-row {
        gap: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-14. NAVBAR — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .client-navbar,
    .staff-navbar,
    .admin-navbar,
    .qa-navbar,
    .delivery-navbar,
    .superadmin-navbar {
        padding: 0 20px !important;
    }
    /* Keep profile name visible on tablet (only hidden on mobile) */
    .nav-profile .nav-profile-name,
    .nav-profile span {
        display: inline !important;
    }
    .nav-profile {
        width: auto !important;
        min-width: auto !important;
        height: auto !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }
    .nav-profile i {
        margin-right: 6px !important;
        font-size: 16px !important;
    }
    /* Notification dropdown: fixed position at tablet */
    .notif-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: 340px !important;
        max-width: 340px !important;
        z-index: 10000 !important;
    }
    /* Profile dropdown */
    .profile-dropdown-menu {
        position: absolute !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        z-index: 1050 !important;
        min-width: 180px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .client-navbar,
    .staff-navbar,
    .admin-navbar,
    .qa-navbar,
    .delivery-navbar,
    .superadmin-navbar {
        padding: 0 24px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-15. STEPPERS — TABLET (client/staff multi-step flows)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .stepper-wrapper,
    .stepper-mobile-compact {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        justify-content: flex-start !important;
    }
    .stepper-wrapper .step-item,
    .stepper-mobile-compact .step-item,
    .stepper-wrapper > div {
        flex: 0 0 auto !important;
    }
    /* Step labels visible on tablet */
    .stepper-wrapper .step-label,
    .stepper-mobile-compact .step-label,
    .stepper-wrapper .step-title,
    .stepper-mobile-compact .step-title {
        display: block !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        max-width: 90px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .stepper-wrapper .step-circle,
    .stepper-mobile-compact .step-circle,
    .stepper-wrapper .step-number,
    .stepper-mobile-compact .step-number {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        line-height: 32px !important;
        margin: 0 auto 4px auto !important;
    }
    .stepper-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-16. ACTIVITY LOG / ARCHIVE USERS — WIDE TABLES (10+ cols)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Admin activity log, system logs, authentication logs */
    .activity-table th,
    .activity-table td,
    .logs-table th,
    .logs-table td,
    .archive-table th,
    .archive-table td {
        font-size: 12px !important;
        padding: 8px 8px !important;
        white-space: nowrap !important;
    }

    /* Restore button compact */
    .btn-restore,
    .action-btn.btn-restore {
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* Page header title with icon buttons (superadmin restores) */
    .page-header-title {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .page-header-title > div {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .btn-secondary-gray {
        min-height: 38px !important;
        min-width: 38px !important;
        font-size: 13px !important;
    }

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

@media (min-width: 1025px) and (max-width: 1366px) {
    .activity-table th,
    .activity-table td,
    .logs-table th,
    .logs-table td {
        font-size: 13px !important;
        padding: 9px 10px !important;
    }
    .storage-metrics-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-17. UPDATE FORMS — QA / DELIVERY / STAFF (info grids)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Update card info grid stays 2-col at tablet */
    .update-card .info-box-grid,
    .update-card .detail-grid,
    .update-card .two-col-grid,
    .info-box-grid,
    .detail-grid,
    .two-col-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* Update page header */
    .update-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .update-header-meta {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
    }

    /* Info rows: keep 2-col layout */
    .info-row,
    .info-row.three-col {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .info-col {
        flex: 1 1 45% !important;
        min-width: 200px !important;
        width: auto !important;
    }

    /* Shaded rows in modals: keep 2-col */
    .shaded-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .shaded-col,
    .detail-col {
        flex: 1 1 45% !important;
        width: auto !important;
    }

    /* Courier info box */
    .courier-info-card,
    .courier-details-box {
        padding: 14px !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    /* Back button stays inline at tablet */
    .btn-back-mobile,
    .btn-back {
        width: auto !important;
        display: inline-flex !important;
        min-height: 40px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .info-box-grid,
    .detail-grid,
    .two-col-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .update-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-18. DELIVERY TABLES — DELUPDATE / EDITUPDATE (many cols)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Delivery-specific table classes */
    .delivery-table th,
    .delivery-table td,
    .del-table th,
    .del-table td,
    .delupdate-table th,
    .delupdate-table td {
        font-size: 12px !important;
        padding: 8px 9px !important;
        white-space: nowrap !important;
    }

    /* Delivery modal: wider at tablet */
    .delivery-modal {
        width: 90vw !important;
        max-width: 720px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .delivery-table th,
    .delivery-table td,
    .del-table th,
    .del-table td {
        font-size: 13px !important;
        padding: 10px 11px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-1. FORM ACTIONS — STAY INLINE AT TABLET
   Override mobile's stack behaviour; restore row flex at tablet.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1366px) {
    .form-actions,
    .form-actions.btn-group-mobile {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: auto !important;
        margin-top: 16px !important;
    }
    .form-actions .btn-cancel,
    .form-actions .btn-submit,
    .form-actions .btn-back-form,
    .form-actions .btn-submit-form,
    .form-actions > a,
    .form-actions > button {
        width: auto !important;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    /* Modal actions: inline at tablet */
    .modal-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .modal-actions .modal-btn-back,
    .modal-actions .modal-btn-submit,
    .modal-actions > button {
        width: auto !important;
        min-height: 42px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-2. EXPORT / PRINT BUTTONS — INLINE AT TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1366px) {
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: auto !important;
    }
    .btn-print,
    .btn-export,
    .btn-pdf,
    .btn-excel {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 40px !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .totals-section {
        font-size: 13px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-3. PROFILE MODAL — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .profile-modal-content,
    .setting-sub-modal-content {
        width: 88vw !important;
        max-width: 660px !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }
    .profile-modal-header-left {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .profile-info-box-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .profile-info-label {
        width: 130px !important;
    }
    .setting-form-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .setting-form-label {
        width: 140px !important;
        flex-shrink: 0 !important;
    }
    .setting-form-input,
    .setting-form-select {
        flex: 1 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .btn-save-setting {
        padding: 10px 30px !important;
        width: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-4. PAGE TITLE & TYPOGRAPHY — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-title {
        font-size: 19px !important;
        margin-bottom: 20px !important;
    }
    .section-header h3 {
        font-size: 15px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-5. DASHBOARD CARD CONTAINER — TABLET
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .card-container {
        padding: 16px !important;
        border-radius: 10px !important;
    }
    .card-header h3 {
        font-size: 14px !important;
    }
    .card-container .card-header[style*="justify-content:space-between"],
    .card-container .card-header[style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Notifications list bounded on tablet */
    .card-container .notifications-list,
    .notifications-list {
        max-height: 320px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-6. TABLE RESPONSIVE — NO-SHADOW VARIANT (tablet)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .table-responsive-mobile-noshadow,
    .table-responsive-noshadow {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   T-EXTRA-7. SIDEBAR — TABLET Z-INDEX & OVERLAY
   Already covered by Phase 21 at ≤992px; reinforce for tablet.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .admin-sidebar,
    .staff-sidebar,
    .client-sidebar,
    .qa-sidebar,
    .delivery-sidebar,
    .superadmin-sidebar {
        z-index: 1050 !important;
    }
    body:not(.sidebar-collapsed) .sidebar-backdrop {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 9 — BLADE-SPECIFIC TABLET OVERHAUL (ALL ROLES)
   Breakpoints: min-width: 768px and max-width: 1366px
   Portrait:   768px – 1024px
   Landscape: 1025px – 1366px
   Zero impact on desktop (>1366px) and mobile (<768px)
   ═══════════════════════════════════════════════════════════ */

/* ── P9-1. UNIVERSAL TABLET SCROLLING & READABLE TABLE DETAILS ── */
@media (min-width: 768px) and (max-width: 1366px) {
    /* Ensure all responsive table wrapper variants scroll cleanly on tablet */
    .table-responsive,
    .table-responsive-mobile,
    .table-responsive-noshadow,
    .table-responsive-mobile-noshadow {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Tablet scrollbar styling */
    .table-responsive::-webkit-scrollbar,
    .table-responsive-mobile::-webkit-scrollbar,
    .table-responsive-noshadow::-webkit-scrollbar,
    .table-responsive-mobile-noshadow::-webkit-scrollbar {
        height: 6px !important;
    }
    .table-responsive::-webkit-scrollbar-track,
    .table-responsive-mobile::-webkit-scrollbar-track,
    .table-responsive-noshadow::-webkit-scrollbar-track,
    .table-responsive-mobile-noshadow::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
        border-radius: 4px !important;
    }
    .table-responsive::-webkit-scrollbar-thumb,
    .table-responsive-mobile::-webkit-scrollbar-thumb,
    .table-responsive-noshadow::-webkit-scrollbar-thumb,
    .table-responsive-mobile-noshadow::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }
    .table-responsive::-webkit-scrollbar-thumb:hover,
    .table-responsive-mobile::-webkit-scrollbar-thumb:hover,
    .table-responsive-noshadow::-webkit-scrollbar-thumb:hover,
    .table-responsive-mobile-noshadow::-webkit-scrollbar-thumb:hover {
        background: #94a3b8 !important;
    }

    /* Prevent table compression on tablet portrait and landscape */
    .data-table {
        min-width: 760px !important;
        width: 100% !important;
    }
    .orders-table,
    .delivery-table,
    .delupdate-table,
    .archive-table,
    .activity-table,
    .logs-table {
        min-width: 800px !important;
        width: 100% !important;
    }
    .items-table,
    .modal-table,
    .return-table,
    .courier-table,
    .paper-items-table {
        min-width: 620px !important;
        width: 100% !important;
    }
    .recent-orders-table,
    .view-table,
    .order-items-table {
        min-width: 580px !important;
        width: 100% !important;
    }

    /* Typography & padding for readable non-compressed cells on tablet */
    .data-table th,
    .data-table td,
    .orders-table th,
    .orders-table td,
    .delivery-table th,
    .delivery-table td,
    .delupdate-table th,
    .delupdate-table td,
    .archive-table th,
    .archive-table td,
    .activity-table th,
    .activity-table td,
    .logs-table th,
    .logs-table td,
    .items-table th,
    .items-table td,
    .modal-table th,
    .modal-table td,
    .return-table th,
    .return-table td,
    .courier-table th,
    .courier-table td,
    .recent-orders-table th,
    .recent-orders-table td {
        font-size: 12.5px !important;
        padding: 10px 12px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    /* Allow description / subject fields to breathe */
    td.desc-cell,
    td.description-cell,
    .remarks-cell {
        white-space: normal !important;
        min-width: 180px !important;
    }

    /* Action icon cells alignment */
    .action-cell,
    .action-icons {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
    .btn-action,
    .action-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }
}

/* ── P9-2. SECTION HEADERS, SEARCH BARS & FILTER WRAPPERS ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .section-header,
    .table-header,
    .order-actions-bar,
    .card-header-inner,
    .approve-header,
    .items-header,
    .page-header-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    .section-header .left-header,
    .order-actions-bar .monitoring-title,
    .table-header .table-title,
    .items-header h3 {
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .right-header,
    .search-filter-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .search-container,
    .search-box {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        min-width: 180px !important;
    }
    .search-input,
    .search-box input {
        height: 38px !important;
        padding: 6px 12px 6px 34px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .search-container i,
    .search-box i {
        position: absolute !important;
        left: 12px !important;
        color: #9ca3af !important;
        font-size: 13px !important;
    }

    .filter-select,
    .status-filter,
    .filter-wrap select {
        height: 38px !important;
        min-width: 130px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .btn-add,
    .btn-add-user,
    .btn-primary-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        cursor: pointer !important;
    }
}

/* Portrait adjustments for filters (<992px) */
@media (min-width: 768px) and (max-width: 992px) {
    .right-header,
    .search-filter-group {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .search-container,
    .search-box {
        flex: 1 1 200px !important;
    }
    .filter-select,
    .status-filter,
    .filter-wrap select {
        flex: 1 1 140px !important;
    }
}

/* ── P9-3. CLIENT & STAFF FORMS (addorder, editorder, addrequest, editrequest, requote) ── */
@media (min-width: 768px) and (max-width: 1366px) {
    /* Split layout on addorder / editorder */
    .addorder-split-row {
        display: grid !important;
        gap: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .addorder-split-row {
        grid-template-columns: 1fr !important;
    }
    .file-preview-box {
        min-height: 220px !important;
    }
    .file-preview-box iframe,
    .file-preview-box img {
        max-height: 280px !important;
    }
}

@media (min-width: 993px) and (max-width: 1366px) {
    .addorder-split-row {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1366px) {
    /* Format info in items header */
    .items-header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }
    .items-header .format-info,
    .accepted-formats {
        font-size: 12px !important;
        color: #6b7280 !important;
    }

    /* Quotation info badge in addorder */
    .quotation-info-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 12.5px !important;
        padding: 8px 12px !important;
    }

    /* Form actions */
    .form-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 24px !important;
    }
    .form-actions .btn-cancel,
    .form-actions .btn-submit,
    .form-actions .btn-back-form,
    .form-actions .btn-submit-form {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        padding: 0 22px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        width: auto !important;
    }
}

/* ── P9-4. DETAIL GRIDS & SHADED ROWS (Delivery Approve, Updateprod, Updateinspect, Delupdate) ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .detail-grid,
    .shaded-detail-row,
    .info-box-grid,
    .info-row,
    .two-col-grid,
    .update-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .detail-item,
    .info-item,
    .shaded-box {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        min-width: 0 !important;
    }
    .d-label,
    .info-label,
    .box-label {
        font-weight: 600 !important;
        color: #4b5563 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .d-value,
    .info-value,
    .box-value {
        color: #111827 !important;
        font-weight: 500 !important;
        word-break: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Courier info & details card on tablet */
    .courier-info-card,
    .courier-details-box,
    .courier-section {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 14px 16px !important;
        margin-top: 14px !important;
    }
}

/* Ensure Alpine.js x-show and hidden modals are never overridden by layout rules */
[x-cloak],
[style*="display: none"],
[style*="display:none"],
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"] {
    display: none !important;
}

/* ── P9-5. MODALS TABLET OVERHAUL (All Roles) ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 10000 !important;
        backdrop-filter: blur(2px) !important;
        overflow-y: auto !important;
    }

    .view-modal-content,
    .modal-content,
    .delivery-modal,
    .user-modal-content,
    .setting-sub-modal-content {
        margin: auto !important;
        border-radius: 14px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Modal headers */
    .view-modal-header,
    .modal-header,
    .user-modal-header,
    .stepper-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 16px !important;
    }

    .view-modal-title,
    .modal-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .modal-close-btn,
    .close-modal {
        position: static !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        background: #f3f4f6 !important;
        color: #4b5563 !important;
        flex-shrink: 0 !important;
    }

    /* Modal actions row */
    .modal-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-top: 18px !important;
        padding-top: 14px !important;
        border-top: 1px solid #e5e7eb !important;
    }
    .modal-btn-back,
    .modal-btn-submit {
        height: 38px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── P9-6. REPORTS, CHARTS & METRICS ON TABLET ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .reports-header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        gap: 14px !important;
        margin-bottom: 20px !important;
    }

    .date-picker-group {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .date-picker-group input[type="date"],
    .date-picker {
        height: 38px !important;
        min-width: 125px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .date-presets-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }
    .preset-pill {
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .action-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .btn-print,
    .btn-export,
    .btn-pdf,
    .btn-excel {
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    .financial-highlights-grid {
        display: grid !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    .metric-cards-grid {
        display: grid !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .financial-highlights-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .metric-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .financial-highlights-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .metric-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* -- P10-6. iPAD AIR PORTRAIT (801-870px)
   820px has slightly more room; wider inputs than 768px.
   ---------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 870px) {
    .search-input,
    .search-box input {
        width: 140px !important;
    }
    .filter-select,
    .status-filter {
        min-width: 110px !important;
        max-width: 140px !important;
    }
}

/* -- P10-8. iPAD PRO LOGIN CENTERING (1024x1366 Portrait & 1366x1024 Landscape) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    html:has(body.page-login),
    body.page-login {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    body.page-login .login-card {
        margin: auto !important;
    }
}


/* -- P10-7. iPAD MINI LANDSCAPE LOGIN (1024x768) ────────────
   Ensure full viewport coverage and centering with zero white gap.
   ---------------------------------------------------------- */
@media (min-width: 993px) and (max-width: 1024px) and (orientation: landscape),
       (width: 1024px) and (height: 768px) {
    body.page-login {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        background-color: #f8f9fa !important;
    }
    body.page-login::before {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-width: 100% !important;
        min-height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* ── P9-7. STEPPER PROGRESS OVERLAYS (Admin Orders, Staff Orders, Client Status) ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .stepper-wrapper,
    .stepper-container,
    .stepper-mobile-compact {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 4px !important;
        gap: 6px !important;
    }

    .stepper-wrapper .step-item,
    .stepper-mobile-compact .step-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 70px !important;
    }

    .stepper-wrapper .step-circle,
    .stepper-mobile-compact .step-circle {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    .stepper-wrapper .step-label,
    .stepper-mobile-compact .step-label {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        white-space: nowrap !important;
    }
}

/* ── P9-8. ADMIN ACTIVITY LOGS & ARCHIVED USERS OVERHAUL ── */
@media (min-width: 768px) and (max-width: 1366px) {
    .activity-table,
    .logs-table,
    .archive-table {
        min-width: 820px !important;
    }

    .btn-restore,
    .action-btn.btn-restore {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   PHASE 10 — PRECISE TABLET VIEWPORT FIXES
   Targets the exact reported issues by device & orientation:
   * iPad Mini  768x1024 portrait  / 1024x768  landscape
   * iPad Air   820x1180 portrait  / 1180x820  landscape
   * Surface Pro 7  912x1368 portrait
   RULES: Never touches mobile (max 767px) or desktop (min 1367px).
   ═══════════════════════════════════════════════════════════ */

/* -- P10-1. UNLOCK VERTICAL SCROLL ON LANDSCAPE TABLETS
   Role CSS sets html,body { overflow: hidden; height: 100% }.
   wopms-responsive.css fixes this only for max 992px (mobile).
   Landscape tablets (iPad Mini 1024w, iPad Air 1180w) are above 992px
   so they kept the lock. Override here for 993-1366px.
   ---------------------------------------------------------- */
@media (min-width: 993px) and (max-width: 1366px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
    }
    .dashboard-wrapper {
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
    }
    .main-content {
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* -- P10-2. PORTRAIT SECTION HEADER — FIX THE GIANT GAP
   On portrait tablets (768-992px), space-between in .section-header
   creates a huge empty zone between the Add button and search bar.
   Fix: keep row layout but tighten flex groups with gap.
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 992px) {
    .section-header,
    .table-header,
    .order-actions-bar,
    .approve-header,
    .card-header-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .section-header .left-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        flex: 0 1 auto !important;
    }
    .section-header .left-header h3,
    .table-header .table-title,
    .order-actions-bar .monitoring-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .section-header .right-header,
    .table-header .search-filter-group,
    .right-header.filter-btn-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        flex: 0 1 auto !important;
        width: auto !important;
    }

    .btn-add,
    .btn-add-user,
    .btn-primary-action {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .search-input,
    .search-box input {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
        width: 150px !important;
        min-width: 110px !important;
        max-width: 200px !important;
        box-sizing: border-box !important;
    }
    .search-container,
    .search-box {
        min-width: 110px !important;
        flex: 0 1 auto !important;
    }

    .filter-select,
    .status-filter,
    .filter-wrap select {
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
        min-width: 110px !important;
        max-width: 150px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
}

/* -- P10-3. LANDSCAPE TABLET HEADER (993-1366px)
   iPad Mini landscape (1024x768), iPad Air landscape (1180x820).
   Row layout, standard 38px control heights.
   ---------------------------------------------------------- */
@media (min-width: 993px) and (max-width: 1366px) {
    .section-header,
    .table-header,
    .order-actions-bar,
    .approve-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .btn-add,
    .btn-add-user,
    .btn-primary-action {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
        width: auto !important;
    }

    .search-input,
    .search-box input {
        height: 38px !important;
        min-height: 38px !important;
        padding: 6px 34px 6px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        min-width: 180px !important;
        box-sizing: border-box !important;
    }

    .filter-select,
    .status-filter,
    .filter-wrap select {
        height: 38px !important;
        min-height: 38px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        min-width: 130px !important;
        box-sizing: border-box !important;
    }
}

/* -- P10-4. SURFACE PRO 7 PORTRAIT REFINEMENTS (900-992px)
   912px portrait: sidebar collapsed, main-content full width.
   Wider controls since more horizontal room than 768px.
   ---------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 992px) {
    .client-sidebar,
    .staff-sidebar,
    .admin-sidebar,
    .qa-sidebar,
    .delivery-sidebar {
        z-index: 1050 !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .search-input,
    .search-box input {
        width: 180px !important;
        max-width: 220px !important;
    }
    .filter-select,
    .status-filter {
        min-width: 120px !important;
        max-width: 160px !important;
    }
}

/* -- P10-5. iPAD MINI PORTRAIT (768-800px) TIGHT LAYOUT
   768px is the narrowest tablet. Controls must be compact.
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 800px) {
    .search-input,
    .search-box input {
        width: 120px !important;
        min-width: 100px !important;
    }
    .filter-select,
    .status-filter {
        min-width: 100px !important;
        max-width: 120px !important;
    }
    .btn-add,
    .btn-add-user {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* -- P10-6. iPAD AIR PORTRAIT (801-870px)
   820px has slightly more room; wider inputs than 768px.
   ---------------------------------------------------------- */
@media (min-width: 801px) and (max-width: 870px) {
    .search-input,
    .search-box input {
        width: 140px !important;
    }
    .filter-select,
    .status-filter {
        min-width: 110px !important;
        max-width: 140px !important;
    }
}