/* Final customer-facing mobile layer. Loaded after each page's original styles. */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body.customer-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.customer-page img,
body.customer-page video,
body.customer-page canvas,
body.customer-page svg {
    max-width: 100%;
}

/* Keep the two global utility buttons together. Inline settings styles are
   overridden intentionally because that button is created by JavaScript. */
.customer-app .settings-button {
    top: 20px !important;
    right: 70px !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
}

@media (pointer: coarse) {
    body.customer-page button,
    body.customer-page input,
    body.customer-page select,
    body.customer-page textarea,
    body.customer-page a.start-button,
    body.customer-page a.back-link {
        touch-action: manipulation;
    }

    body.customer-page button,
    body.customer-page select,
    body.customer-page input:not([type="checkbox"]):not([type="radio"]) {
        min-height: 44px;
    }

    body.customer-page input,
    body.customer-page select,
    body.customer-page textarea { font-size: 16px; }
}

@media (max-width: 768px) {
    body.customer-index {
        min-height: 100dvh;
        justify-content: flex-start;
        padding: max(14px, env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom));
    }

    .customer-index .landing-container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 20px;
        padding: 24px 16px;
    }

    .customer-index .start-button { width: 100%; max-width: 360px; }
    .customer-index .footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

    .customer-index .disclaimer-modal {
        align-items: stretch;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .customer-index .disclaimer-modal .modal-content {
        width: 100%;
        height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: none;
        margin: 0;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
    }

    .customer-index .modal-header { flex: 0 0 auto; padding: 14px 16px; }
    .customer-index .modal-header h2 { font-size: clamp(1.25rem, 6vw, 1.75rem); }
    .customer-index .modal-body { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: scroll; overscroll-behavior: contain; }
    .customer-index .modal-footer { position: sticky; bottom: 0; flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
    .customer-index .modal-footer button { width: 100%; }

    body.customer-app .container { width: 100%; padding: 8px; }
    .customer-app .settings-button {
        top: 15px !important;
        right: 60px !important;
        width: 35px !important;
        height: 35px !important;
    }
    .customer-app header { padding-inline: 42px; }
    .customer-app .main-content { grid-template-columns: minmax(0, 1fr); }
    .customer-app .panel,
    .customer-app .visualization-area { width: 100%; min-width: 0; padding: 12px; }
    .customer-app .truck-options { grid-template-columns: minmax(0, 1fr); }
    .customer-app .truck-option .truck-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 86px;
        width: 86px;
        height: 54px;
        overflow: visible;
    }
    .customer-app .truck-option .truck-img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
    }

    .customer-app .truck-adjustments .adjustment-row,
    .customer-app .truck-weight-section .adjustment-row {
        display: grid;
        grid-template-columns: minmax(150px, .72fr) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .customer-app .truck-adjustments .adjustment-row label,
    .customer-app .truck-weight-section .adjustment-row label {
        min-width: 0;
        margin: 0;
        line-height: 1.25;
    }
    .customer-app .field-unit { white-space: nowrap; font-weight: 500; }
    .customer-app .pallet-form .form-row {
        display: grid;
        grid-template-columns: minmax(130px, .55fr) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 9px;
    }
    .customer-app .pallet-form .form-row label {
        min-width: 0;
        margin: 0;
        line-height: 1.25;
    }
    .customer-app .adjustment-row input,
    .customer-app .adjustment-row select,
    .customer-app .pallet-form input,
    .customer-app .pallet-form select { width: 100%; min-width: 0; }

    .customer-app .truck-views,
    .customer-app .truck-views.double-stacking-disabled {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        overflow: visible;
        gap: 12px;
    }

    .customer-app .truck-view-panel,
    .customer-app .projection-view-stack {
        position: static;
        width: 100%;
        min-width: 0;
    }

    .customer-app .truck-bed-container,
    .customer-app .projection-frame { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
    .customer-app .load-visual-legend { grid-template-columns: minmax(0, 1fr); }
    .customer-app .load-visual-legend-title,
    .customer-app .load-visual-legend .legend-wide { grid-column: 1; }
    .customer-app .controls { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .customer-app .controls > *,
    .customer-app .save-menu,
    .customer-app .save-menu > button { width: 100%; min-width: 0; }
    .customer-app .save-menu-panel { width: 100%; max-width: 100%; }
    .customer-app .ad-banner { display: none !important; }

    .customer-app .load-history-modal,
    .customer-app .bol-modal,
    .customer-app .guided-loading-modal {
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
        overflow: hidden;
    }

    .customer-app .load-history-modal .modal-content,
    .customer-app .bol-modal .modal-content,
    .customer-app .guided-modal-content {
        width: 100% !important;
        max-width: none !important;
        height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: none !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .customer-app .load-history-modal .modal-body,
    .customer-app .bol-modal .modal-body,
    .customer-app .guided-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .customer-app .guided-modal-header { gap: 8px; padding: 12px; }
    .customer-app .guided-modal-footer { position: sticky; bottom: 0; padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
    .customer-app .navigation-buttons { margin: 0; gap: 8px; }
    .customer-app .btn-guided { width: 100%; justify-content: center; }
    .customer-app .mini-truck-bed { width: 100%; max-width: none; }

    body.customer-info .container { width: 100%; max-width: 100%; padding: max(12px, env(safe-area-inset-top)) 10px max(20px, env(safe-area-inset-bottom)); }
    body.customer-info .disclaimer-content,
    body.customer-info .advertising-info,
    body.customer-info .advertising-form { width: 100%; max-width: 100%; padding: 18px 14px; overflow-wrap: anywhere; }
    body.customer-info .header { padding-inline: 4px; }
    body.customer-info .ad-packages,
    body.customer-info .form-row { grid-template-columns: minmax(0, 1fr); }
    body.customer-info input,
    body.customer-info select,
    body.customer-info textarea { width: 100%; min-width: 0; }
}

@media (max-width: 768px) and (orientation: portrait) {
    .customer-app .truck-option { overflow: visible; }
}

@media (max-width: 950px) and (orientation: landscape) {
    body.customer-index { justify-content: flex-start; padding-top: 8px; }
    .customer-index .landing-container { max-width: 820px; margin: 0 auto 12px; padding: 14px 20px; }
    .customer-index h1 { font-size: 1.65rem; margin-bottom: 6px; }
    .customer-index .subtitle,
    .customer-index .description { margin-bottom: 10px; }
    .customer-index .features { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
    .customer-index .start-button { padding: 12px 24px; font-size: 1rem; }

    .customer-app .container { padding: 6px; }
    .customer-app .settings-button {
        top: 6px !important;
        right: 42px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
    }
    .customer-app .settings-icon { font-size: 15px; }
    .customer-app .main-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .customer-app .truck-views,
    .customer-app .truck-views.double-stacking-disabled { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .customer-app .projection-view-stack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-app .controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .customer-app .controls #start-guided-loading { grid-column: 1 / -1; }
    .customer-app .guided-modal-content { height: calc(100dvh - 12px); }
    .customer-app .guided-modal-header { flex-direction: row; }
    .customer-app .guided-modal-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; }
    .customer-app .navigation-buttons { flex-direction: row; }

    body.customer-info .container { padding: 8px 12px; }
    body.customer-info .header { margin-bottom: 12px; }
    body.customer-info .ad-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
    .customer-app .panel,
    .customer-app .visualization-area { padding: 9px; }
    .customer-app .stats { gap: 6px; }
    .customer-app .stats span { padding: 7px; font-size: .75rem; }
    .customer-app .view-panel-header h3 { padding-right: 64px; font-size: .9rem; }
    .customer-app .truck-adjustments .adjustment-row,
    .customer-app .truck-weight-section .adjustment-row { grid-template-columns: minmax(126px, .65fr) minmax(0, 1fr); }
    .customer-app .truck-adjustments .adjustment-row label,
    .customer-app .truck-weight-section .adjustment-row label { font-size: .86rem; }
    .customer-app .pallet-form .form-row { grid-template-columns: minmax(112px, .55fr) minmax(0, 1fr); }
    .customer-app .pallet-form .form-row label { font-size: .86rem; }
    .customer-index .landing-container { padding-inline: 12px; }
}