/* ═══════════════════════════════════════════════════════════════
   DMSC Maintenance — Mobile Application Styles
   Separate CSS for mobile viewport. Same content as web, but
   layout adjusted so all buttons and details are visible.
   Loaded after global.css. Applies only on screens ≤ 768px.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Prevent horizontal overflow ───────────────────────────── */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ── Buttons: always visible, adequate tap targets ─────────── */
    button, .btn, a.btn, a.btn-submit, a.btn-cancel,
    .btn-print, .btn-print-request, .btn-filter, .btn-clear,
    input[type="submit"], input[type="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
        white-space: normal !important;
        word-break: break-word;
    }

    /* Button groups: wrap so all are visible */
    .btn-group, .header-actions, .content-header > div:last-child,
    [style*="display:flex"][style*="gap"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Action column in tables: ensure buttons visible */
    td button, td .btn, td a.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 4px 2px !important;
        min-width: 80px !important;
    }

    /* Print button next to Request #: prominent on mobile */
    .btn-print-inline, .btn-print-request {
        min-height: 44px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Driver requests table: scroll hint */
    .drv-requests-table-wrap {
        margin-bottom: 8px;
    }

    /* ── Tables: horizontal scroll so all columns visible ───────── */
    .table-wrap, .table-responsive, .table-card,
    div[style*="overflow"] table,
    main table, .card table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .table-wrap table, .table-responsive table, table {
        min-width: 500px !important;
        width: max-content !important;
        font-size: 13px !important;
    }
    table th, table td {
        padding: 10px 8px !important;
    }

    /* Table containers: pad so scroll doesn't cut off */
    .table-wrap, .table-responsive {
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: calc(100vw - 0px) !important;
    }

    /* ── Filter bars: stack on mobile ───────────────────────────── */
    .filter-bar form, .filters form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .filter-bar .filter-group, .filters .filter-group,
    .filter-bar [style*="flex"], .filters [style*="flex"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    .filter-bar input, .filter-bar select,
    .filters input, .filters select {
        width: 100% !important;
    }

    /* ── Request cards / job cards: full width, wrap ────────────── */
    .request-card, .job-card, .card, .panel, .box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    /* Card action buttons: stack vertically for visibility */
    .request-card .btn-group, .job-card .btn-group,
    .card .btn-group, .request-card .header-actions {
        flex-direction: column !important;
    }
    .request-card .btn, .job-card .btn, .card .btn {
        width: 100% !important;
    }

    /* ── Pagination: wrap and visible ───────────────────────────── */
    [style*="pagination"], .pagination,
    div[style*="justify-content:space-between"][style*="flex-wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .pagination a, .pagination span {
        padding: 10px 14px !important;
        min-height: 44px !important;
    }

    /* ── Main content: adequate padding ─────────────────────────── */
    .main-content, .page-body, .content-area {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 24px !important;
        max-width: 100vw !important;
    }

    /* ── Container: fit viewport ────────────────────────────────── */
    .container {
        padding: 12px 14px !important;
        margin: 0 8px !important;
        max-width: calc(100vw - 28px) !important;
    }

    /* ── Form rows: single column ───────────────────────────────── */
    .form-row, .form-grid, .row, .approval-row {
        flex-direction: column !important;
        display: flex !important;
        gap: 12px !important;
    }
    .form-group, .form-group input, .form-group select {
        width: 100% !important;
    }

    /* ── Modal / overlay: fit screen ────────────────────────────── */
    .modal-content, .modal-box, #dmsc-confirm-overlay .dmsc-confirm-box {
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }

    /* ── Work assignment / info boxes: full width ───────────────── */
    div[style*="display:flex"][style*="align-items:center"][style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* ── Signature / approval rows ──────────────────────────────── */
    .signature-row, .approval-row, .form-section .form-row {
        flex-direction: column !important;
    }

    /* ── Print / Add Items buttons in warehouse history ─────────── */
    td button, td a[href*="print_receipt"], td a[href*="Add Items"] {
        margin: 4px !important;
    }

    /* ── Table action buttons: keep horizontal ───────────────────── */
    td div[style*="display:flex"] {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    
    td .btn-action,
    td button[type="submit"] {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        min-width: auto !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* ── Change '+ Add Row' button to just 'Add' on mobile ────────── */
    .btn-add-row {
        color: transparent !important;
        position: relative !important;
        padding: 10px 20px !important;
        min-width: 60px !important;
    }
    .btn-add-row::after {
        content: 'Add';
        color: #fff !important;
        font-size: 13px !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* ── Job Order work rows: stack vertically on mobile ───────────── */
    
    /* Hide column headers on mobile - very specific selectors */
    .work-row-header,
    div.work-row-header,
    body .work-row-header,
    html body .work-row-header,
    #workRowsContainer + .work-row-header,
    .form-section > .work-row-header,
    div[class="work-row-header"],
    div.work-row-header[style*="grid"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Work rows - stack vertically */
    .work-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        border: 1px solid #e9ecef !important;
    }
    
    /* Hide the inline style grid on mobile - force flex column */
    .work-row[style*="display:grid"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Mobile input groups - each label + input pair */
    .work-row > .mobile-input-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .work-row > .mobile-input-group:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Show mobile field labels */
    .mobile-field-label {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #001b5e !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 6px !important;
    }
    
    /* Style all inputs */
    .work-row input[type="text"],
    .work-row input[type="time"] {
        padding: 12px 14px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure time inputs show placeholder text */
    .work-row input[type="time"]::placeholder {
        color: #6b7280 !important;
        opacity: 1 !important;
    }
}

/* ── Extra small phones (< 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    button, .btn { font-size: 13px !important; padding: 10px 12px !important; }
    .main-content, .page-body { padding-left: 10px !important; padding-right: 10px !important; }
    .container { padding: 10px !important; margin: 0 6px !important; }
    table th, table td { padding: 8px 6px !important; font-size: 12px !important; }
}