/* ═══════════════════════════════════════════════════════════════
   GreenTrust® — Mobile-First Responsive Overhaul
   Comprehensive phone compatibility layer
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL TOUCH TARGETS ──
   Apple HIG & Material Design recommend minimum 44×44px tap targets */

@media (max-width: 768px) {

    /* ── Increase all interactive element minimum sizes ──
       `a` is deliberately NOT in this list — inline text links inside
       paragraphs (cookie banner, hint copy, footer) would otherwise grow
       to 44px tall and shred line spacing. Standalone link buttons that
       look like buttons should opt-in via .btn / .btn-secondary / etc. */
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    select,
    .filter-tab,
    .dropdown-item,
    .op-dropdown-item,
    .plot-option,
    .ra-score-option,
    .ra-dim-tab,
    .ra-select-card {
        min-height: 44px;
    }

    /* ── 44×44 touch target for icon-only buttons ──
       The universal rule above only constrains height; without a paired
       min-width these stay 28/32px wide, failing Apple HIG / Material on
       the horizontal axis. Scoped to ≤768px so desktop layouts keep their
       tight 28/32 chrome. */
    .gt-icon-btn,
    .gt-topbar-icon-btn,
    .notification-bell-btn,
    .chat-icon-btn,
    .chat-close-btn,
    .gt-topbar-user .header-avatar,
    .header-avatar {
        min-width: 44px;
        min-height: 44px;
    }

    /* ── Prevent iOS zoom on input focus (font-size >= 16px) ── */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* ── Smoother scrolling everywhere ── */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* ── Prevent horizontal overflow globally ── */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════
   HEADER — Compact Single-Row on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .app-header {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        height: auto;
        min-height: 56px;
        padding: 8px 12px !important;
        gap: 8px !important;
        align-items: center;
    }

    .nav-left {
        order: 0;
        flex-shrink: 0;
    }

    .nav-center {
        order: 1;
        flex: 1;
        min-width: 0;
        margin-bottom: 0 !important;
    }

    .nav-center h1 {
        font-size: 0.85rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-right {
        order: 2;
        position: static !important;
        flex-shrink: 0;
    }

    .nav-logo {
        height: 28px;
    }

    .nav-logo-left {
        height: 28px;
    }

    /* Header avatar */
    .header-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* User menu container */
    .user-menu-container {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 6px 10px !important;
        min-height: 50px;
    }

    .nav-center h1 {
        font-size: 0.75rem !important;
        letter-spacing: 0.02em;
    }

    /* Hide hamburger text on very small screens */
    .hamburger-menu {
        margin-right: 4px;
        padding: 8px;
    }
}

/* ══════════════════════════════════════════════════
   DROPDOWN MENUS — Full-width on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dropdown-content,
    .op-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25) !important;
        z-index: 5000 !important;
        max-height: 70vh;
        overflow-y: auto;
        animation: slideUpSheet 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Bottom sheet handle indicator */
    .dropdown-content::before,
    .op-dropdown::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(128, 128, 128, 0.3);
        border-radius: 2px;
        margin: 10px auto 6px;
    }

    .dropdown-item,
    .op-dropdown-item {
        padding: 16px 20px !important;
        font-size: 1rem !important;
    }

    .dropdown-header,
    .op-dropdown-header {
        padding: 16px 20px !important;
    }
}

@keyframes slideUpSheet {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════
   STEPPER — Compact Horizontal Pills on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .op-stepper {
        padding: 0 8px !important;
        gap: 0 !important;
        margin-bottom: 20px !important;
    }

    .op-step-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.8rem !important;
    }

    .op-step-circle.active {
        transform: scale(1.05) !important;
    }

    .op-step-label {
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .op-step-connector {
        min-width: 20px !important;
        max-width: 60px !important;
        margin: 0 4px !important;
    }
}

@media (max-width: 380px) {
    .op-step-label {
        display: none !important;
    }

    .op-step-circle {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.85rem !important;
    }

    .op-step-connector {
        min-width: 16px !important;
        margin: 0 6px !important;
        margin-bottom: 0 !important;
    }

    .op-step-item {
        gap: 0 !important;
    }
}

/* ══════════════════════════════════════════════════
   CARDS & LAYOUT — Edge-to-Edge on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .op-layout {
        padding: 16px 12px !important;
    }

    .op-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    .op-card h2 {
        font-size: 1.15rem !important;
    }

    .op-card .subtitle {
        font-size: 0.82rem !important;
    }

    .container {
        padding: 0 12px !important;
        margin: 12px auto !important;
    }

    .card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .op-layout {
        padding: 10px 8px !important;
    }

    .op-card {
        padding: 16px 12px !important;
        border-radius: 10px !important;
    }

    .op-card h2 {
        font-size: 1.05rem !important;
    }

    .card {
        padding: 16px 12px !important;
        border-radius: 10px !important;
    }
}

/* ══════════════════════════════════════════════════
   FORM GRIDS — Fully Stacked on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .form-grid,
    .form-grid.cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* SME Criteria — stack cards on mobile */
    .sme-options {
        grid-template-columns: 1fr !important;
    }

    .field label {
        font-size: 0.8rem !important;
    }

    .field input,
    .field select,
    .field textarea {
        padding: 12px !important;
    }
}

/* ══════════════════════════════════════════════════
   PRODUCT CARDS — Compact Mobile Layout
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .product-card {
        padding: 16px 14px !important;
        margin-bottom: 12px !important;
    }

    .product-card .card-badge {
        font-size: 0.68rem !important;
        padding: 2px 10px !important;
    }

    .product-card .btn-remove {
        top: 8px !important;
        right: 8px !important;
        font-size: 1.3rem !important;
        /* Ensure 44px touch target */
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-add {
        padding: 16px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* ══════════════════════════════════════════════════
   STEP C — Stacked Map Below Cards on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .step-c-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        min-height: auto !important;
    }

    .step-c-map {
        min-height: 300px !important;
        /* Put map above matching cards on mobile for immediate context */
        order: -1;
    }

    .map-container {
        min-height: 300px !important;
    }
}

@media (max-width: 480px) {
    .step-c-map {
        min-height: 250px !important;
        border-radius: 10px !important;
    }

    .map-container {
        min-height: 250px !important;
    }

    .map-layer-toggle {
        top: 8px;
        padding: 3px;
    }

    .map-layer-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }

    .map-legend {
        padding: 8px 10px;
        font-size: 0.7rem;
    }
}

/* ══════════════════════════════════════════════════
   MATCHING CARDS — Compact Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .matching-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .matching-card-header {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .matching-card-header h4 {
        font-size: 0.95rem !important;
    }
}

/* ══════════════════════════════════════════════════
   PLOT SELECTOR — Better Mobile UX
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .plot-selector-menu {
        max-height: 50vh !important;
        border-radius: 12px !important;
    }

    .plot-option {
        padding: 14px !important;
    }

    .plot-option .checkbox {
        width: 22px !important;
        height: 22px !important;
    }

    .chips-container {
        gap: 8px !important;
    }

    .chip {
        padding: 6px 14px !important;
        font-size: 0.8rem !important;
    }

    .chip button {
        font-size: 1rem !important;
        /* 44px touch target for chip remove */
        min-width: 28px;
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════
   NOTIFICATION PANEL — escape topbar clipping
   Desktop anchors the panel absolutely inside the bell's container.
   That container lives inside .gt-right which has `overflow: hidden`,
   so on narrow viewports the 360px panel spills into the clip zone
   and renders partially off-screen. Lifting it to position: fixed
   takes it out of the clipping chain; we gutter it to the viewport.
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .notification-panel {
        position: fixed !important;
        top: calc(52px + 8px) !important;   /* topbar height + breathing room */
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 80px) !important;
    }
}

/* ══════════════════════════════════════════════════
   CHAT POPUP — Floating Window on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Floating window on mobile — not full-screen. Sized to fit between the
       topbar (~52px) and the bottom-nav pill, aligned to the right edge so
       it reads like a true chat popup rather than taking over the entire
       screen. The max-height clamp guarantees the popup never crosses the
       topbar even on a very short viewport (e.g. iPhone SE in landscape). */
    .op-chat-popup {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: 12px !important;
        bottom: calc(165px + env(safe-area-inset-bottom, 0px)) !important;
        width: min(calc(100vw - 24px), 380px) !important;
        height: min(60vh, 480px) !important;
        max-height: calc(100dvh - 220px) !important;
        /* If the bottom anchor + height would push the top past the topbar
           (~60px), the explicit `top` cap kicks in via min(). The popup just
           gets shorter — never overlaps the topbar. */
        min-height: 240px;
        border-radius: 18px !important;
        z-index: 2400 !important;
    }

    .op-chat-popup-header {
        border-radius: 18px 18px 0 0 !important;
        padding: 12px 16px !important;
    }

    .op-chat-popup-messages {
        padding: 14px !important;
    }

    .op-chat-popup-input {
        border-radius: 0 0 18px 18px !important;
        padding: 10px 12px !important;
    }

    .op-chat-popup-input .chat-input-wrapper {
        border-radius: 24px;
    }

    .op-chat-popup-input .chat-input-wrapper input {
        padding: 10px 8px !important;
        /* 16px font-size prevents iOS Safari from auto-zooming the viewport
           when the input is focused */
        font-size: 16px !important;
    }

    .op-chat-popup-input .chat-send-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Chat floating button — larger touch target on mobile */
@media (max-width: 768px) {
    .op-chat-fab,
    [class*="chat-fab"],
    [class*="chat-toggle"] {
        width: 56px !important;
        height: 56px !important;
        bottom: 20px !important;
        right: 16px !important;
    }
}

/* ══════════════════════════════════════════════════
   MODAL — Full-screen on Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .modal-box {
        width: calc(100% - 32px) !important;
        max-width: 420px !important;
        border-radius: 18px !important;
        padding: 28px 20px !important;
    }

    .modal-overlay {
        align-items: center !important;
        padding: 16px;
    }

    /* Confirmation modals too */
    .confirm-box {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 28px 20px !important;
        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    .confirm-overlay {
        align-items: flex-end !important;
    }

    .confirm-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .confirm-actions button {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
    }

    /* Link operator modal */
    .link-operator-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 28px 20px !important;
    }
}

/* ══════════════════════════════════════════════════
   BUTTONS — Mobile Optimized
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .btn {
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
        min-height: 48px;
        border-radius: 10px !important;
    }

    /* Stack nav buttons (Back / Next) vertically on very small screens */
    .op-card > div:last-child {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
    }

    /* Make primary buttons full-width on mobile */
    .op-card .btn-primary,
    .op-layout .btn-primary {
        width: 100%;
    }

    /* Back button — full width too */
    .op-card .btn-secondary,
    .op-layout .btn-secondary {
        width: 100%;
    }

    /* Sticky submit/action bar at bottom */
    .btn-sticky-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        background: var(--card-bg, rgba(255, 255, 255, 0.95));
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border, #e2e8f0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 100;
    }
}

/* ══════════════════════════════════════════════════
   MASS UNITS TOGGLE — Wider Touch Targets
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .mass-units-toggle {
        height: 48px !important;
    }

    .mass-toggle-btn {
        padding: 10px 16px !important;
        font-size: 0.92rem !important;
    }
}

/* ══════════════════════════════════════════════════
   ACCESS CODE — Compact Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .code-display {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }

    .code-value {
        font-size: 1rem !important;
        width: 100%;
    }

    .code-copy {
        align-self: flex-end;
    }
}

/* ══════════════════════════════════════════════════
   ADMIN DASHBOARD — Mobile Card Layout
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Stats grid — force single column on phones */
    .admin-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Make stat cards horizontal (icon left, value right) */
    .stat-card {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        padding: 14px 18px !important;
    }

    .stat-value {
        font-size: 1.6rem !important;
    }

    .stat-label {
        font-size: 0.78rem !important;
    }
}

/* ── Admin Filter Tabs — Scrollable on Mobile ── */
@media (max-width: 600px) {
    .filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0 !important;
        padding-bottom: 0;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tab {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
        font-size: 0.82rem !important;
        white-space: nowrap !important;
    }
}

/* ── Admin Operator Table → Card Layout on Mobile ── */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: visible !important;
    }

    .operator-table {
        display: block !important;
    }

    .operator-table thead {
        display: none !important;
    }

    .operator-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .operator-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 12px !important;
        padding: 16px !important;
        gap: 6px !important;
    }

    .operator-table tbody tr:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .operator-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 4px 0 !important;
        border-bottom: none !important;
        font-size: 0.88rem !important;
    }

    .operator-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-secondary, #6b7c93);
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Action buttons in card — full row */
    .operator-table td:last-child {
        padding-top: 10px !important;
        border-top: 1px solid var(--border, #e2e8f0);
        margin-top: 4px;
    }

    .btn-approve,
    .btn-reject {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
        min-height: 40px;
    }

    /* History table also converts to cards */
    .history-table {
        min-width: 0 !important;
    }
}

/* ══════════════════════════════════════════════════
   RISK ASSESSMENT — Mobile Optimized
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    /* Dimension tabs — horizontal scroll */
    .ra-dim-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 2px !important;
        padding-bottom: 0;
    }

    .ra-dim-tabs::-webkit-scrollbar {
        display: none;
    }

    .ra-dim-tab {
        flex-shrink: 0 !important;
        min-width: 80px !important;
        padding: 10px 12px !important;
    }

    .ra-dim-tab-label {
        font-size: 0.62rem !important;
        white-space: nowrap !important;
    }

    /* Dimension content */
    .ra-dim-content {
        padding: 14px !important;
    }

    /* Score inputs */
    .ra-score-input {
        padding: 12px !important;
    }

    .ra-score-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .ra-score-option {
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        min-height: 48px;
    }

    /* Score reference strip — wrap */
    .ra-score-ref {
        gap: 4px !important;
    }

    .ra-ref-item {
        font-size: 0.68rem !important;
    }

    /* Results layout */
    .ra-result-dim {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .ra-result-dim-label {
        min-width: auto !important;
    }

    .ra-result-dim-bar {
        width: 100% !important;
    }

    .ra-result-dim-val {
        min-width: auto !important;
        text-align: left !important;
    }

    .ra-total-value {
        font-size: 2.2rem !important;
    }

    /* Breadcrumb — compact */
    .ra-breadcrumb {
        gap: 8px !important;
    }

    .ra-back-btn {
        padding: 8px 12px !important;
        min-height: 44px;
    }

    .ra-breadcrumb-trail {
        font-size: 0.75rem !important;
    }

    /* Map */
    .ra-map-container {
        height: 220px !important;
    }

    /* Cards grid */
    .ra-card-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ra-select-card {
        padding: 14px !important;
    }

    /* Documents grid */
    .ra-docs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Context bar — stack */
    .ra-context-bar {
        flex-direction: column !important;
        gap: 4px !important;
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
    }

    /* Hard stop alert */
    .ra-hard-stop-alert {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
    }
}

/* ══════════════════════════════════════════════════
   AUTH PAGES — Better Mobile Layout
   ══════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .auth-container {
        padding: 12px !important;
        align-items: center !important;
    }

    .auth-card {
        padding: 20px 18px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .auth-card h2 {
        font-size: 1.05rem !important;
    }

    .auth-card .login-logo-wrap img {
        max-width: 80px !important;
    }

    .btn-social {
        padding: 12px 14px !important;
        font-size: 0.88rem !important;
        min-height: 48px;
    }

    .auth-error-msg,
    .auth-success-msg {
        font-size: 0.82rem !important;
        padding: 10px 12px !important;
    }
}

/* ══════════════════════════════════════════════════
   SUPPLIER MAP — Mobile Height
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .map-canvas {
        height: 320px !important;
    }

    .map-canvas-wrap {
        padding: 0 12px 12px !important;
    }

    .map-toolbar {
        padding: 10px 12px !important;
        gap: 6px !important;
    }

    .map-btn {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        min-height: 40px;
    }

    .map-header {
        padding: 12px 12px 0 !important;
    }
}

@media (max-width: 480px) {
    .map-canvas {
        height: 260px !important;
    }
}

/* ══════════════════════════════════════════════════
   FOOTER — Compact Mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .app-rights {
        padding: 16px 12px !important;
        margin-top: 24px !important;
        font-size: 0.7rem !important;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════
   SAFE AREA INSETS (Notched Phones)
   ══════════════════════════════════════════════════ */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .app-header {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
        }

        .op-layout {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
        }

        .app-rights {
            padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ══════════════════════════════════════════════════
   LANDSCAPE MODE — Compact Heights
   ══════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    .app-header {
        min-height: 44px !important;
        padding: 4px 12px !important;
    }

    .nav-center h1 {
        font-size: 0.75rem !important;
    }

    .op-stepper {
        margin-bottom: 12px !important;
    }

    .op-step-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }

    .op-step-label {
        display: none !important;
    }

    .step-c-map,
    .map-container {
        min-height: 200px !important;
    }

    .ra-map-container {
        height: 180px !important;
    }

    /* Chat popup — use available height (dvh handles iOS URL bar) */
    .op-chat-popup {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
    }
}

/* ══════════════════════════════════════════════════
   PRINT PREVENTION — Hide UI chrome when printing
   ══════════════════════════════════════════════════ */

@media print {
    .app-header,
    .op-stepper,
    .op-chat-popup,
    .op-chat-fab,
    [class*="chat-toggle"],
    .app-rights,
    #cookieConsentBanner {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   SCROLLBAR — Hidden on Mobile (touch scroll)
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    /* But keep scrollbar for explicitly scrollable areas */
    .plot-selector-menu::-webkit-scrollbar,
    .op-chat-popup-messages::-webkit-scrollbar {
        width: 3px !important;
    }
}

/* ══════════════════════════════════════════════════
   PENDING APPROVAL — Mobile Centered
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .pending-approval,
    [class*="pending-approval"] {
        padding: 24px 16px !important;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════
   SUPPLIER PANEL — Mobile Cards
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .supplier-item,
    [class*="supplier-item"] {
        padding: 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* ══════════════════════════════════════════════════
   DARK MODE — Ensure mobile overrides work in dark mode
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body.dark-mode .operator-table tbody tr {
        background: var(--card-bg, rgba(14, 29, 8, 0.95));
        border-color: var(--border, #1e3518);
    }

    body.dark-mode .dropdown-content::before,
    body.dark-mode .op-dropdown::before {
        background: rgba(255, 255, 255, 0.15);
    }

    body.dark-mode .modal-box::before,
    body.dark-mode .confirm-box::before {
        background: rgba(255, 255, 255, 0.15);
    }

    body.dark-mode .btn-sticky-mobile {
        background: rgba(14, 29, 8, 0.95);
        border-top-color: #1e3518;
    }
}

/* ══════════════════════════════════════════════════
   PLOT UPLOAD SPECS POPOVER — Responsive on Mobile
   The 360px popover anchored at left:0 of the info button
   spills off the right side of the screen on phones. Pin
   it to the viewport edges (with a margin gutter) so the
   panel stays fully visible regardless of where the info
   icon lands inside its row.
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .plot-specs-wrap {
        position: static;
    }

    .plot-specs-popover {
        position: fixed !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        /* Sit just under the topbar; the trigger lives inside the card
           header, so anchoring to the viewport top keeps it readable
           even when the user has scrolled the card. */
        transform: translateY(0);
        animation: plotSpecsSlideIn 0.18s cubic-bezier(0.32, 0.72, 0, 1) !important;
        max-height: 70dvh;
        overflow-y: auto;
    }

    @keyframes plotSpecsSlideIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Backdrop hint so the popover reads as a focused panel on small screens. */
    .plot-specs-popover::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }
}

/* ══════════════════════════════════════════════════
   SUPPLIER — Avatar Menu (mobile, scoped)
   The shared bottom-sheet dropdown rule above turns every
   .dropdown-content into a slide-up sheet on phones. For
   the supplier topbar avatar that hid Logout below the
   fold and forced an awkward gesture. Re-anchor it as a
   top-right dropdown right under the avatar with all
   items (Profile / Support / Logout) visible without
   scrolling. Scoped to body.gt-supplier so admin and
   operator dashboards keep their existing behaviour.
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body.gt-supplier .gt-topbar-user-dropdown.dropdown-content {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
        bottom: auto !important;
        left: auto !important;
        right: 10px !important;
        width: min(280px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 80px) !important;
        border-radius: 14px !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22),
                    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
        overflow-y: auto;
        animation: gtSupplierMenuIn 0.18s cubic-bezier(0.32, 0.72, 0, 1) !important;
        padding: 6px 0 !important;
    }

    /* Hide the bottom-sheet drag handle pseudo-element for this menu only. */
    body.gt-supplier .gt-topbar-user-dropdown.dropdown-content::before {
        content: none !important;
        display: none !important;
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-header {
        padding: 14px 18px !important;
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-email {
        font-size: 0.92rem !important;
        word-break: break-all;
        line-height: 1.25;
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-item {
        padding: 13px 18px !important;
        font-size: 0.95rem !important;
        min-height: 48px;
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-divider {
        margin: 4px 12px !important;
    }

    /* Logout visual distinction so it cannot be missed. */
    body.gt-supplier .gt-topbar-user-dropdown .dropdown-logout {
        color: #c0392b !important;
        font-weight: 600;
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-logout .menu-icon {
        color: #c0392b;
        background: rgba(192, 57, 43, 0.12);
    }

    body.gt-supplier .gt-topbar-user-dropdown .dropdown-logout:hover,
    body.gt-supplier .gt-topbar-user-dropdown .dropdown-logout:active {
        background: rgba(192, 57, 43, 0.08) !important;
    }

    body.gt-supplier.dark-mode .gt-topbar-user-dropdown.dropdown-content {
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    }

    body.gt-supplier.dark-mode .gt-topbar-user-dropdown .dropdown-logout {
        color: #ff7a6c !important;
    }

    body.gt-supplier.dark-mode .gt-topbar-user-dropdown .dropdown-logout .menu-icon {
        color: #ff7a6c;
        background: rgba(255, 122, 108, 0.18);
    }
}

@keyframes gtSupplierMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Position the menu container so the dropdown can absolutely anchor
   to the top-right of the screen rather than be dragged into the
   sheet-stacking context of the topbar. */
@media (max-width: 768px) {
    body.gt-supplier .user-menu-container {
        position: static;
    }
}

/* ══════════════════════════════════════════════════
   SUPPLIER — Compact Avatar on Mobile (scoped)
   The global rule at the top of this file forces the
   topbar avatar to a 44×44 box for Apple HIG tap-target
   compliance. That makes the avatar visually heavy on
   phones. Shrink the visual disc on supplier mobile and
   inflate the surrounding clickable region instead so we
   still meet the 44×44 tap-area requirement.
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body.gt-supplier .gt-topbar-user .header-avatar,
    body.gt-supplier .gt-topbar-user-clickable .header-avatar {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 0.7rem !important;
    }

    /* Maintain ≥44px overall tap area via the wrapping clickable region. */
    body.gt-supplier .gt-topbar-user-clickable {
        min-height: 44px;
        padding: 6px 10px 6px 8px !important;
        gap: 6px !important;
    }

    /* Username chip beside the avatar — keep readable but visually quieter. */
    body.gt-supplier .gt-topbar-user-name {
        font-size: 0.78rem !important;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* On very small screens, hide the name entirely — the dropdown
       header still surfaces the email, and the avatar alone is enough
       affordance for the topbar. */
    body.gt-supplier .gt-topbar-user-name {
        display: none !important;
    }

    body.gt-supplier .gt-topbar-user .header-avatar,
    body.gt-supplier .gt-topbar-user-clickable .header-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        font-size: 0.68rem !important;
    }
}

/* ══════════════════════════════════════════════════
   SUPPORT PANEL — Stacked header on mobile
   Default .assess-header lays icon + title + CTA in a
   single flex row, which forces the title ("Submit a
   Ticket") to wrap into a narrow column and pushes the
   "View Existing Tickets" button over the card border.
   Stack everything vertically on phones so the title
   gets the full row and the CTA becomes a full-width
   secondary button beneath it.
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    body.gt-supplier .support-panel .assess-header {
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }

    body.gt-supplier .support-panel .assess-header > div[style*="flex: 1"] {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    body.gt-supplier .support-panel .assess-header .operator-profile-title {
        font-size: 1.05rem;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: break-word;
    }

    body.gt-supplier .support-panel .assess-header .operator-profile-subtitle {
        font-size: 0.78rem;
        margin-top: 4px;
    }

    /* The "View Existing Tickets" CTA — bump it onto its own row beneath
       the title block at full width so it cannot run off the card edge. */
    body.gt-supplier .support-panel .assess-header > .btn.btn-primary {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 4px;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        white-space: normal;
    }
}

/* ══════════════════════════════════════════════════
   PRODUCT LIBRARY — Meta-tag overflow on mobile
   The "Submission xxxxxxxx" chip uses marginLeft:auto
   to push to the row's right edge. On narrow cards that
   pushes the chip past the card border. Drop the auto-
   push and shrink the tag font so the chips wrap inside
   the card instead of bleeding out of it.
   ══════════════════════════════════════════════════ */

@media (max-width: 600px) {
    body.gt-supplier .gt-card-meta {
        gap: 5px !important;
        row-gap: 6px !important;
    }

    body.gt-supplier .gt-card-meta .gt-meta-tag {
        font-size: 0.7rem !important;
        padding: 2px 7px !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Cancel the marginLeft:auto inline style so the submission chip
       doesn't get pinned to its own line at the right edge and overflow. */
    body.gt-supplier .gt-card-meta .gt-meta-tag[style*="margin-left: auto"],
    body.gt-supplier .gt-card-meta .gt-meta-tag[style*="marginLeft: auto"] {
        margin-left: 0 !important;
    }

    /* Keep the action column from squeezing the title/meta to zero width. */
    body.gt-supplier .gt-card .gt-card-right {
        flex-shrink: 0;
    }
}

/* ══════════════════════════════════════════════════
   PRODUCT LIBRARY — Detail view layout on mobile
   The detail view runs a two-column grid (lot list left,
   sticky satellite map right). On phones this squeezes
   both columns to ~50% of an already-narrow viewport, so
   the cards become unreadable and the sticky map floats
   on top of the edit form below. Force a single column
   and unstick the map so it flows naturally beneath the
   lot list.
   ══════════════════════════════════════════════════ */

@media (max-width: 900px) {
    body.gt-supplier .sup-prodlib-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    body.gt-supplier .sup-prodlib-detail-map {
        position: static !important;
        top: auto !important;
        width: 100%;
    }

    /* Put the map ABOVE the lot list on phones so the user gets immediate
       geographic context, matching the StepC mobile order convention used
       elsewhere in this codebase. */
    body.gt-supplier .sup-prodlib-detail-map {
        order: -1;
    }

    body.gt-supplier .sup-prodlib-detail-grid > .gt-list {
        order: 1;
    }
}

@media (max-width: 600px) {
    /* Cap map height a bit further on small screens so the cards stay
       within reach without long scrolling. */
    body.gt-supplier .sup-prodlib-detail-map > * {
        max-height: 280px !important;
    }
}

/* ══════════════════════════════════════════════════
   PRODUCT LIBRARY — Front list on mobile
   Desktop pins the search/filters bar and scrolls only
   the inner HS-code list. On phones that nested scroll
   visually clips the last card mid-content. Switch the
   entire stack to content-sized + overflow:visible so the
   parent white card stretches to wrap header, filter bar
   AND every HS card, while the outer
   `.sup-view-scroll > .section` rule handles page-level
   scrolling.

   CRITICAL: every container in the chain (card → body →
   gt-list) must be `flex: 0 0 auto` together. If the body
   keeps its default `flex: 1 1 0` while the parent is
   content-sized and overflow:visible, the body collapses
   to 0px height and its children visually escape the
   parent's white background — that was the floating-cards
   bug we just hit.
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body.gt-supplier .sup-plotlib--products .sup-plotlib-card {
        flex: 0 0 auto !important;
        overflow: visible !important;
        min-height: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.gt-supplier .sup-plotlib--products .sup-plotlib-body {
        flex: 0 0 auto !important;
        overflow: visible !important;
        min-height: 0 !important;
        padding-bottom: 4px !important;
    }

    body.gt-supplier .sup-plotlib--products .sup-plotlib-body > .gt-list {
        flex: 0 0 auto !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }

    /* Bottom breathing room beneath the white card so the floating
       BottomNav pill doesn't paint on top of the last HS card. */
    body.gt-supplier .sup-plotlib--products {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    /* Tighten the HS card gutter so the HS pill + commodity badge +
       chevron stop crowding each other in a narrow viewport. */
    body.gt-supplier .sup-plotlib--products .gt-card.sup-plotlib-card-row {
        padding: 12px 12px !important;
        gap: 10px !important;
    }
}