/* ═══════════════════════════════════════════════════════════════
   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 ── */
    button,
    [role="button"],
    a,
    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;
    }

    /* ── 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;
    }

    /* Session timer — compact on mobile */
    .session-timer {
        font-size: 0.72rem;
        padding: 3px 8px;
    }

    /* 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 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. */
    .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;
        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 {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 28px 20px !important;
        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
        animation: slideUpSheet 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .modal-box::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(128, 128, 128, 0.3);
        border-radius: 2px;
        margin: 0 auto 16px;
    }

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

    /* 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 */
    .op-chat-popup {
        height: 100vh !important;
        max-height: 100vh !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;
    }
}