/* ==========================================================================
   FleetFlow - media.css  |  Full mobile responsiveness
   Covers: page header + Add buttons (icon-only on mobile), stat cards,
           filter bar, tables, pagination, layout (appbar/drawer), dialogs
   Breakpoints: 992 / 768 / 600 / 480 / 360 + coarse pointer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared helper class (added to Add Truck/Trip/Driver buttons):
   .add-entity-btn / .btn-add-truck / .btn-add-trip / .btn-add-driver
   Fallback: .page-header .mud-button-root
   -------------------------------------------------------------------------- */

/* ---------- Global: prevent horizontal overflow on mobile ---------- */
html, body { overflow-x: hidden; }
.mud-main-content { overflow-x: hidden; }
.page-wrap { overflow-x: hidden; }

/* =========================  Tablet landscape (<=992px)  ================ */
@media (max-width: 992px) {
    .page-wrap { padding: 12px !important; }
    .filter-bar { padding: 10px 12px !important; gap: 10px !important; }
    .html-table thead th { padding: 10px 12px !important; font-size: 10.5px !important; }
    .html-table tbody td { padding: 8px 12px !important; font-size: 12.5px !important; }
}

/* =========================  Tablet portrait (601-768px)  ================ */
@media (max-width: 768px) and (min-width: 601px) {
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 14px !important;
    }
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root,
    .btn-add-truck.mud-button-root,
    .btn-add-trip.mud-button-root,
    .btn-add-driver.mud-button-root {
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .stat-card { height: 72px !important; padding: 12px 14px !important; }
    .stat-icon { width: 36px !important; height: 36px !important; }
    .stat-value { font-size: 19px !important; }
    .stat-label { font-size: 13px !important; }

    /* Filter: search full width, selects wrap 2 per row */
    .filter-bar { flex-wrap: wrap !important; }
    .filter-bar .search-input { flex: 1 1 100% !important; min-width: 0 !important; }
    .filter-bar .mud-input-control,
    .filter-bar .filter-select,
    .filter-bar .mud-select { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
    .filter-bar .mud-button-root { flex: 0 0 auto !important; }

    /* Table: allow horizontal scroll, keep min-width */
    .table-card > div[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
    .html-table { min-width: 720px; }

    /* Pagination: wrap */
    .pagination-footer { gap: 10px !important; }

    /* AppBar: shrink search */
    .header-search { max-width: 200px !important; }
    .mud-appbar .mud-input-control { max-width: 200px !important; }

    /* Dialog: 90vw */
    .mud-dialog { max-width: 90vw !important; }
}

/* =========================  Phones (<= 600px)  ========================== */
@media (max-width: 600px) {
    /* Page shell */
    .page-wrap { padding: 10px !important; min-height: calc(100vh - 48px) !important; }
    .mud-container.pa-0 { padding: 10px !important; }

    /* Header: row, title left, icon-only button right */
    .page-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .page-header-left { flex: 1 1 auto !important; min-width: 0 !important; gap: 10px !important; }
    .page-header-left > div:last-child { min-width: 0; overflow: hidden; }
    .page-header > div:last-child,
    .page-header authorizeview {
        margin-left: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root,
    .btn-add-truck.mud-button-root,
    .btn-add-trip.mud-button-root,
    .btn-add-driver.mud-button-root {
        width: 44px !important; min-width: 44px !important; max-width: 44px !important;
        height: 44px !important; min-height: 44px !important;
        padding: 0 !important; border-radius: 10px !important;
        justify-content: center !important; align-items: center !important;
        box-shadow: 0 2px 8px rgba(37,99,235,0.28) !important;
        margin-left: auto !important; float: right !important; flex-shrink: 0 !important; line-height: 1 !important;
    }
    .page-header .mud-button-root .mud-button-label,
    .add-entity-btn .mud-button-label {
        font-size: 0 !important; line-height: 0 !important; gap: 0 !important;
        justify-content: center !important; align-items: center !important; width: 100% !important; color: transparent !important;
    }
    .page-header .mud-button-root .mud-button-label-text,
    .add-entity-btn .mud-button-label-text,
    .btn-add-truck .mud-button-label-text,
    .btn-add-trip .mud-button-label-text,
    .btn-add-driver .mud-button-label-text {
        display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important;
        overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
    }
    .page-header .mud-button-root .mud-button-icon-start,
    .add-entity-btn .mud-button-icon-start {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        margin: 0 !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important;
        font-size: 20px !important; color: #fff !important; visibility: visible !important; opacity: 1 !important;
        width: 20px !important; height: 20px !important;
    }
    .page-header .mud-button-root .mud-button-icon-start .mud-icon-root,
    .add-entity-btn .mud-button-icon-start .mud-icon-root {
        font-size: 20px !important; width: 20px !important; height: 20px !important; margin: 0 auto !important; display: block !important;
    }
    .page-header .mud-typography-h6 { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .page-header .mud-typography-caption {
        font-size: 11px !important; line-height: 1.3 !important; display: -webkit-box !important;
        -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
    }
    .page-title-icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; flex-shrink: 0 !important; }

    /* Stat cards: 2-col compact, hide chevron */
    .mud-grid { margin-top: 0 !important; }
    .stat-card { height: 66px !important; min-height: 66px !important; padding: 10px 12px !important; border-radius: 10px !important; gap: 8px !important; }
    .stat-left { gap: 8px !important; }
    .stat-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; flex-shrink: 0 !important; }
    .stat-icon .mud-icon-root { font-size: 16px !important; width: 16px !important; height: 16px !important; }
    .stat-value { font-size: 17px !important; line-height: 1 !important; }
    .stat-label { font-size: 13px !important; margin-top: 1px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .stat-card > .mud-icon-root, .stat-card > .mud-icon { display: none !important; }
    .mud-grid-item-xs-6 { padding-left: 6px !important; padding-top: 6px !important; }

    /* Filter bar: vertical stack, full-width controls */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }
    .filter-bar .search-input { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }
    .filter-bar .search-input .mud-input-control { width: 100% !important; }
    .filter-bar .mud-input-control,
    .filter-bar .filter-select,
    .filter-bar .mud-select,
    .filter-bar .mud-select .mud-input-control { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; }
    .filter-bar .mud-button-root {
        width: 100% !important; justify-content: center !important; min-height: 38px !important;
        border-radius: 8px !important; font-size: 13px !important;
    }
    .filter-bar .mud-input { font-size: 14px !important; }

    /* Table: compact cells, horizontal scroll cue */
    .table-card { border-radius: 10px !important; }
    .table-card > div[style*="overflow-x:auto"] {
        overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
    }
    .html-table { min-width: 680px; table-layout: auto !important; }
    .html-table thead th { padding: 10px 10px !important; font-size: 10px !important; letter-spacing: 0.04em !important; }
    .html-table tbody td { padding: 8px 10px !important; font-size: 12px !important; }
    .cell { gap: 8px !important; }
    .thumb { width: 30px !important; height: 22px !important; border-radius: 6px !important; font-size: 14px !important; }
    .status-pill { padding: 3px 8px !important; font-size: 10px !important; }
    .ins-expiry, .expiry-warn { font-size: 11px !important; }

    /* Pagination: stack, centered, wrap page numbers */
    .pagination-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    .pagination-footer > div { width: 100% !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; justify-content: center !important; }
    .pagination-footer > div:first-child { justify-content: center !important; order: 2; }
    .pagination-footer > div:last-child { justify-content: center !important; order: 1; }
    .page-btn { min-width: 30px !important; height: 30px !important; font-size: 12px !important; border-radius: 6px !important; }
    .rows-select { padding: 6px 8px !important; font-size: 12px !important; width: 100% !important; max-width: 140px; }

    /* AppBar: hide search, tighten icons */
    .mud-appbar { padding: 0 8px !important; height: 56px !important; }
    .header-search, .mud-appbar .header-search { display: none !important; }
    .mud-appbar .mud-icon-button { padding: 6px !important; }
    .mud-appbar .mud-divider { display: none !important; }
    .link-profile { padding: 0 !important; }
    .link-profile .mud-button { padding: 4px 6px !important; font-size: 13px !important; }

    /* Drawer: already overlay on mobile, ensure full height scroll */
    .mud-drawer { max-width: 82vw !important; }
    .left-menu-item { height: calc(100vh - 56px) !important; }

    /* Dialogs & forms: full-width on mobile */
    .mud-dialog { max-width: 96vw !important; width: 96vw !important; margin: 8px auto !important; max-height: 92vh !important; }
    .mud-dialog-title { padding: 12px 16px !important; font-size: 16px !important; }
    .mud-dialog-content { padding: 12px 16px !important; max-height: 70vh !important; overflow-y: auto !important; }
    .mud-dialog-actions { padding: 8px 16px 12px !important; flex-wrap: wrap !important; gap: 8px !important; }
    .mud-dialog-actions .mud-button-root { flex: 1 1 auto !important; min-width: 0 !important; }

    /* Mud overlay & snackbar */
    .mud-snackbar-location-top-right { left: 8px !important; right: 8px !important; top: 8px !important; }

    /* MudGrid spacing reduction for all pages */
    .mud-grid-spacing-xs-2 { width: calc(100% + 6px) !important; margin: -6px 0 0 -6px !important; }
    .mud-grid-spacing-xs-2 > .mud-grid-item { padding: 6px 0 0 6px !important; }
}

/* =========================  Small phones (<= 480px)  ==================== */
@media (max-width: 480px) {
    .page-wrap { padding: 8px !important; }
    .mud-container.pa-0 { padding: 8px !important; }
    .page-header { padding: 10px 12px !important; margin-bottom: 8px !important; }
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root,
    .btn-add-truck.mud-button-root,
    .btn-add-trip.mud-button-root,
    .btn-add-driver.mud-button-root {
        width: 40px !important; min-width: 40px !important; max-width: 40px !important;
        height: 40px !important; min-height: 40px !important; border-radius: 9px !important;
    }
    .page-header .mud-button-root .mud-button-icon-start,
    .add-entity-btn .mud-button-icon-start { font-size: 18px !important; width: 18px !important; height: 18px !important; }
    .page-header .mud-button-root .mud-button-icon-start .mud-icon-root,
    .add-entity-btn .mud-button-icon-start .mud-icon-root { font-size: 18px !important; width: 18px !important; height: 18px !important; }

    .stat-card { height: 60px !important; min-height: 60px !important; padding: 9px 10px !important; border-radius: 9px !important; }
    .stat-icon { width: 28px !important; height: 28px !important; }
    .stat-icon .mud-icon-root { font-size: 14px !important; width: 14px !important; height: 14px !important; }
    .stat-value { font-size: 15px !important; }
    .stat-label { font-size: 13px !important; font-weight: 700 !important; }
    .mud-grid-item-xs-6 { padding-left: 5px !important; padding-top: 5px !important; }

    .filter-bar { padding: 8px 10px !important; gap: 6px !important; }
    .html-table { min-width: 620px; }
    .html-table thead th { padding: 8px 8px !important; font-size: 9.5px !important; }
    .html-table tbody td { padding: 7px 8px !important; font-size: 11.5px !important; }
    .thumb { width: 28px !important; height: 20px !important; }
    .pagination-footer { padding: 8px 10px !important; }
    .page-btn { min-width: 28px !important; height: 28px !important; font-size: 11px !important; }

    .mud-dialog { width: 98vw !important; max-width: 98vw !important; }
}

/* =========================  Very small (<= 360px)  ====================== */
@media (max-width: 360px) {
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 8px !important; }
    .page-header .mud-typography-h6 { font-size: 14px !important; }
    .stat-card { height: auto !important; min-height: 56px !important; padding: 8px 10px !important; }
    .stat-value { font-size: 14px !important; }
    .stat-label { font-size: 13px !important; }
    .filter-bar .mud-input input, .filter-bar .mud-input-slot { font-size: 13px !important; }
    .html-table { min-width: 580px; }
    .pagination-footer { font-size: 11px !important; }
}

/* =========================  Landscape / foldables  ====================== */
@media (max-width: 900px) and (orientation: landscape) {
    .stat-card { height: 62px !important; }
    .header-search { display: none !important; }
    .mud-dialog { max-height: 88vh !important; }
}

/* =========================  Touch / accessibility  ====================== */
@media (pointer: coarse) {
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root { -webkit-tap-highlight-color: rgba(37,99,235,0.15); touch-action: manipulation; }
    .page-header .mud-button-root:active,
    .add-entity-btn.mud-button-root:active { transform: scale(0.96); opacity: 0.92; }
    .stat-card:active { transform: scale(0.99); }
    .filter-bar .mud-button-root:active,
    .pagination-footer .page-btn:active { transform: scale(0.97); }
}

/* =========================  Reduced motion  ============================= */
@media (prefers-reduced-motion: reduce) {
    .page-header .mud-button-root,
    .add-entity-btn.mud-button-root,
    .stat-card { transition: none !important; transform: none !important; }
}

/* =========================  Print / high-contrast fallback  ============= */
@media print {
    .page-header .mud-button-root, .filter-bar, .pagination-footer, .mud-appbar, .mud-drawer { display: none !important; }
}