/* ═══════════════════════════════════════════════════════════════
   WEXFORD TRACKER — Mobile / Tablet responsive layer
   ═══════════════════════════════════════════════════════════════
   Loaded AFTER enterprise.css so these rules override the desktop
   defaults on small viewports. The goal is a usable Production
   Station / Inventory / Returns on phones + tablets without
   rewriting every page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared: prevent iOS Safari from zooming when an input gets focus ── */
/* iOS zooms automatically when a form control has font-size < 16px. Set
   the base input font-size to 16px on small screens so that stops. */
@media (max-width: 820px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Tablet breakpoint (phones + most tablets in portrait) ── */
@media (max-width: 820px) {

    body { -webkit-text-size-adjust: 100%; }

    /* Container widths collapse to edge-to-edge */
    .page-container,
    .page-container-wide,
    .page-container-narrow {
        max-width: 100% !important;
        padding: 0 0.75rem !important;
    }

    main.container-fluid {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Navbar brand shrinks so the hamburger has room on iPhone-width screens */
    .navbar-brand {
        font-size: 1rem !important;
    }

    /* Page headers: stack title over action buttons */
    .page-header,
    .enterprise-header .page-header,
    .enterprise-header > div[style*="justify-content"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .page-header h1,
    .enterprise-header h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    .page-header p,
    .enterprise-header p {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }

    .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }

    .page-header-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;      /* Apple HIG / Material minimum tap target */
    }

    /* Make every table horizontally scrollable on its own — without
       overflowing the page. `enterprise-table-wrap` is the project's
       own wrapper; we also cover the Bootstrap `table-responsive`. */
    .enterprise-table-wrap,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Tables themselves: tighter cells, smaller text */
    table,
    .enterprise-table {
        font-size: 0.8rem !important;
    }

    .enterprise-table th,
    .enterprise-table td {
        padding: 0.4rem 0.5rem !important;
    }

    /* Any table that forgot its wrap gets one via inline-block fallback */
    main table:not(.no-mobile-wrap) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Forms: stack inputs full-width */
    .form-row,
    .row.g-3,
    .row.g-4 {
        --bs-gutter-x: 0.75rem !important;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }

    /* Buttons: bigger tap targets and full-width in stacked toolbars */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .bulk-actions,
    .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    /* Stat cards in dashboards: one column */
    .stats-row,
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Filter bars: stack, full-width */
    .filters-bar,
    .filters-bar .row,
    .log-filters,
    .catalog-filters {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Stock / category tabs wrap and space out */
    .stock-tabs,
    .nav-tabs-custom {
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
    }

    .stock-tab {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    /* Bootstrap modals: usable on narrow screens */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    /* Cancellation / reprint modals specific widths */
    .reprint-modal,
    .cancellation-alert-modal {
        width: calc(100% - 1rem) !important;
        max-width: none !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }

    /* Station scan input deserves to be chunky on phones */
    #scan-input,
    .scan-input {
        font-size: 1.15rem !important;
        padding: 0.7rem 0.85rem !important;
    }

    /* Image thumbnails in tables stay visible but smaller */
    .inline-thumb,
    .inline-thumb-wrap img {
        max-width: 44px !important;
        max-height: 44px !important;
    }

    /* Lightbox: ensure it fills the screen */
    .lightbox-overlay.active .lightbox-content {
        padding: 1rem !important;
    }

    /* Footer actions: single column of full-width buttons */
    .d-flex.justify-content-end {
        flex-direction: column;
        align-items: stretch !important;
    }
    .d-flex.justify-content-end .btn {
        width: 100%;
    }

    /* ERP form grids become single-column */
    .erp-form-grid {
        grid-template-columns: 1fr !important;
    }
    .erp-form-grid .col-6,
    .erp-form-grid .col-4,
    .erp-form-grid .col-3 {
        grid-column: span 1 !important;
    }

    /* BOM row grid collapses to two columns on mobile */
    .bom-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    /* Generator layout (manual label generator): stack preview below form */
    .generator-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ── Phone breakpoint (iPhone-class) ── */
@media (max-width: 480px) {

    .navbar-brand .bi {
        display: none; /* icon eats width on small phones */
    }

    .page-header h1,
    .enterprise-header h1 {
        font-size: 1.1rem !important;
    }

    .enterprise-table th,
    .enterprise-table td {
        padding: 0.35rem 0.4rem !important;
        font-size: 0.75rem !important;
    }

    /* Drop optional table columns marked `.d-md-table-cell` already — this
       only affects our own custom columns tagged `.hide-on-phone`. */
    .hide-on-phone {
        display: none !important;
    }

    /* Toastify notifications shouldn't cover the whole top nav */
    .toastify {
        max-width: 85vw !important;
    }
}

/* ── Touch-device hover-state fixes ── */
/* Prevent sticky :hover states that stay on touch devices after a tap */
@media (hover: none) {
    a:hover,
    .btn:hover,
    .nav-link:hover {
        color: inherit;
        background: inherit;
    }
    .enterprise-table tbody tr:hover {
        background: inherit !important;
    }
}

/* ── Landscape tablets that are narrower than our desktop layout ── */
@media (min-width: 821px) and (max-width: 1100px) {
    .page-container-wide {
        padding: 0 1rem !important;
    }
    .stats-row,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}