/* ========================================================================== 
   V20 — Premium mobile web app experience
   IMPORTANT: Everything in this file is mobile-only. Desktop/laptop styling
   remains entirely controlled by site.css and is intentionally untouched.
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --m-bg: #f5f6f8;
    --m-card: #ffffff;
    --m-text: #17191d;
    --m-muted: #727983;
    --m-line: #e6e8ec;
    --m-red: #c9151e;
    --m-red-soft: #fff2f3;
    --m-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    --m-radius: 18px;
    --m-top: 64px;
  }

  html { background: var(--m-bg); -webkit-text-size-adjust: 100%; }
  body {
    min-width: 320px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--m-bg);
    color: var(--m-text);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
  }
  body.sidebar-open { overflow: hidden; touch-action: none; }

  /* ---------- Mobile app chrome ---------- */
  .main-content { margin-left: 0 !important; min-width: 0; }
  .mobile-topbar {
    height: calc(var(--m-top) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    display: grid !important;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 80;
    border-bottom: 1px solid rgba(226,229,234,.88);
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 1px 0 rgba(17,24,39,.02);
  }
  .mobile-menu-button {
    width: 42px; height: 42px; padding: 0;
    border: 1px solid #e7e9ed; border-radius: 13px;
    background: #fff; display: grid; place-content: center; gap: 4px;
    box-shadow: 0 3px 10px rgba(17,24,39,.035);
  }
  .mobile-menu-button span { display:block; width:17px; height:1.8px; border-radius:2px; background:#282d34; }
  .mobile-brand { display:flex; align-items:center; gap:9px; min-width:0; color:var(--m-text); }
  .mobile-brand-mark {
    flex:0 0 auto; width:32px; height:32px; border-radius:10px;
    display:grid; place-items:center; background:var(--m-red); color:#fff;
    font-size:11px; font-weight:900; letter-spacing:.05em;
    box-shadow:0 5px 12px rgba(201,21,30,.18);
  }
  .mobile-brand-copy { display:flex; align-items:baseline; gap:4px; white-space:nowrap; overflow:hidden; }
  .mobile-brand-copy strong { font-size:14px; font-weight:760; }
  .mobile-brand-copy b { font-size:14px; color:var(--m-red); font-weight:820; }
  .mobile-live-indicator { display:flex; align-items:center; gap:5px; color:#6d7580; font-size:9px; font-weight:850; letter-spacing:.08em; }
  .mobile-live-indicator i { width:6px; height:6px; border-radius:50%; background:#19a653; box-shadow:0 0 0 3px rgba(25,166,83,.10); }



  /* ---------- Drawer ---------- */
  .sidebar {
    width:min(320px,86vw); padding:calc(18px + env(safe-area-inset-top)) 18px 22px;
    border-right:0; border-radius:0 24px 24px 0;
    transform:translateX(-104%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow:none; z-index:110; background:#fff;
  }
  .sidebar.open { transform:translateX(0); box-shadow:0 0 0 100vmax rgba(12,18,28,.40), 18px 0 50px rgba(12,18,28,.14) !important; }
  .sidebar .brand { padding:4px 4px 15px; font-size:17px; }
  .sidebar .brand-mark { width:40px; height:40px; border-radius:12px; }
  .sidebar nav { margin-top:18px; gap:5px; }
  .sidebar .nav-link { min-height:48px; display:flex; align-items:center; padding:0 14px; border-radius:13px; font-size:14px; font-weight:650; }
  .sidebar-footer { padding:17px 5px 0; }

  /* ---------- Global page rhythm ---------- */
  .page { width:100%; max-width:none; padding:18px 14px 24px !important; }
  .page-header { margin:0 0 16px; gap:10px; align-items:flex-start; }
  .page-header h1 { font-size:27px !important; line-height:1.12; letter-spacing:-.025em; }
  .page-header p { font-size:13px; line-height:1.5; margin-top:6px; }
  .panel {
    border:1px solid #e7e9ed; border-radius:var(--m-radius); padding:16px !important; margin-bottom:14px;
    box-shadow:var(--m-shadow); background:var(--m-card);
  }
  .panel h2 { font-size:18px; line-height:1.25; }
  .panel-title-row { margin-bottom:14px; gap:10px; }
  .muted { font-size:12px; line-height:1.45; }
  .btn { min-height:44px; border-radius:12px; padding:10px 14px; font-size:13px; font-weight:760; }
  .btn.primary { box-shadow:0 5px 14px rgba(201,21,30,.13); }
  input, select, .select2-container .select2-selection--single { min-height:46px; font-size:14px !important; }
  input, select { border-radius:12px !important; }
  input:focus, select:focus { box-shadow:0 0 0 3px rgba(201,21,30,.08) !important; border-color:#d8b4b7 !important; }

  /* ---------- Dashboard: executive glance first ---------- */
  .dashboard-page { padding-top:16px !important; }
  .dashboard-hero { margin-bottom:16px; gap:14px; }
  .dashboard-v11 .dashboard-eyebrow { font-size:10px !important; letter-spacing:.12em; }
  .dashboard-v11 .dashboard-hero h1 { font-size:29px !important; line-height:1.08; margin-top:5px; letter-spacing:-.035em; }
  .dashboard-v11 .dashboard-hero p { font-size:13px !important; line-height:1.5; max-width:34ch; }
  .dashboard-hero-actions { width:100%; display:grid !important; grid-template-columns:1fr auto; align-items:center !important; gap:10px; }
  .dashboard-sync-note { justify-self:start; }
  .dashboard-refresh-btn { min-width:0 !important; width:auto !important; min-height:42px; padding-inline:14px; }
  .executive-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; margin-bottom:14px; }
  .executive-kpi {
    min-height:126px !important; padding:15px 13px !important; border-radius:17px !important;
    box-shadow:0 7px 22px rgba(15,23,42,.045); overflow:hidden;
  }
  .executive-kpi-icon { width:34px !important; height:34px !important; font-size:16px !important; border-radius:11px !important; }
  .dashboard-v11 .executive-kpi-copy>span { font-size:10px !important; line-height:1.3; }
  .dashboard-v11 .executive-kpi-copy strong { font-size:25px !important; line-height:1.05; letter-spacing:-.03em; }
  .dashboard-v11 .executive-kpi-copy small { font-size:10px !important; line-height:1.35; }
  .dashboard-insight-grid,.dashboard-analytics-grid { grid-template-columns:1fr !important; gap:0 !important; }
  .dashboard-value-panel,.dashboard-receiving-panel,.dashboard-eta-panel,.dashboard-chart-panel { padding:16px !important; }
  .dashboard-panel-head { align-items:flex-start; gap:10px; }
  .dashboard-v11 .panel-kicker { font-size:9px !important; letter-spacing:.1em; }
  .dashboard-v11 .dashboard-panel-head h2,.dashboard-v11 .dashboard-section-title h2 { font-size:19px !important; }
  .dashboard-v11 .panel-head-number { font-size:19px !important; }
  .value-stage { gap:15px; }
  .dashboard-v11 .value-stage-label span { font-size:12px !important; }
  .dashboard-v11 .value-stage-label strong { font-size:13px !important; }
  .value-stage-track { height:8px; }
  .receiving-position { grid-template-columns:126px 1fr !important; gap:16px !important; justify-items:stretch !important; }
  .receiving-donut { width:122px !important; height:122px !important; }
  .receiving-donut:before { width:90px !important; height:90px !important; }
  .receiving-stats { width:100%; gap:7px; }
  .receiving-stats>div { padding:8px 0; }
  .dashboard-section-title { display:flex; align-items:flex-end !important; }
  .dashboard-section-title .btn { min-height:38px; padding:8px 10px; font-size:11px; white-space:nowrap; }
  .dashboard-section-title p { display:none; }
  .rich-status-chart .status-row { grid-template-columns:96px 1fr 24px !important; gap:8px; }
  .rich-bar-row { grid-template-columns:96px 1fr !important; gap:8px; }
  .group-metric { grid-column:2; text-align:left; }

  /* Dashboard ETA cards: prioritize shipment, ETA, route and status */
  .dashboard-eta-table-wrap .responsive-table tr { padding:13px 13px 10px; border-radius:16px; }
  .dashboard-eta-table-wrap .responsive-table td { grid-template-columns:92px minmax(0,1fr); padding:7px 1px; }
  .dashboard-eta-table-wrap td[data-label="Shipment"] { order:-5; grid-template-columns:1fr; padding-bottom:10px; border-bottom:1px solid #eceef1; }
  .dashboard-eta-table-wrap td[data-label="Shipment"]::before { display:none; }
  .dashboard-eta-table-wrap td[data-label="Shipment"] .ship-link { font-size:16px; }
  .dashboard-eta-table-wrap td[data-label="ETA"] { order:-4; }
  .dashboard-eta-table-wrap td[data-label="Days"] { order:-3; }
  .dashboard-eta-table-wrap td[data-label="Status"] { order:-2; }
  .dashboard-eta-table-wrap td[data-label="Details"] { position:absolute; right:13px; top:12px; }
  .dashboard-eta-table-wrap .responsive-table tr { position:relative; }
  .dashboard-eta-table-wrap .row-arrow { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:var(--m-red-soft); }

  /* ---------- Shipments listing ---------- */
  .shipments-page { padding-top:14px !important; }
  .shipments-page-header { margin-bottom:12px; }
  .shipments-page-header h1 { font-size:28px !important; }
  .shipments-list-panel { padding:12px !important; overflow:visible; }
  .shipment-list-toolbar { gap:8px; margin-bottom:11px; z-index:35; }
  .shipment-main-search { height:48px !important; border-radius:14px !important; font-size:14px !important; box-shadow:0 2px 8px rgba(15,23,42,.025); }
  .shipment-filter-button { width:48px !important; height:48px; border-radius:14px; flex:0 0 48px; }
  .shipment-filter-menu {
    position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
    width:100% !important; min-width:0 !important; max-height:min(82vh,720px); overflow:auto;
    padding:11px 16px calc(15px + env(safe-area-inset-bottom)) !important;
    border:0 !important; border-radius:22px 22px 0 0 !important;
    box-shadow:0 -18px 55px rgba(10,16,26,.22) !important;
    transform:translateY(12px) !important; opacity:0; z-index:150 !important;
  }
  .shipment-filter-menu.is-open { transform:translateY(0) !important; opacity:1; }
  .shipment-filter-menu::before { content:""; display:block; width:38px; height:4px; border-radius:99px; background:#d9dce1; margin:0 auto 11px; }
  .shipment-filter-menu-head { position:sticky; top:-11px; z-index:2; background:#fff; padding:10px 0 13px; margin-bottom:13px; }
  .shipment-filter-menu-head strong { font-size:18px; }
  .shipment-filter-menu-head small { font-size:11px; }
  .shipment-filter-grid { grid-template-columns:1fr !important; gap:11px; }
  .shipment-filter-field>span { font-size:10px; }
  .shipment-filter-field input,.shipment-filter-field select { height:46px; font-size:14px; border-radius:12px; }
  .shipment-filter-menu-actions { position:sticky; bottom:calc(-15px - env(safe-area-inset-bottom)); margin:13px -16px -15px; padding:12px 16px calc(15px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.98); box-shadow:0 -8px 18px rgba(15,23,42,.045); }
  .shipment-filter-menu-actions .btn { flex:1; min-width:0; }
  .active-filter-summary { gap:6px; margin:0 0 10px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .active-filter-summary::-webkit-scrollbar{display:none}
  .active-filter-summary span { flex:0 0 auto; font-size:10px; padding:5px 9px; }

  .shipments-list-panel .mobile-cards .responsive-table tbody { gap:11px; }
  .shipments-list-panel .mobile-cards .responsive-table tr {
    position:relative; border-radius:17px; padding:13px 13px 10px; box-shadow:0 5px 18px rgba(15,23,42,.045);
  }
  .shipments-list-panel .mobile-cards .responsive-table td { grid-template-columns:105px minmax(0,1fr); gap:10px; padding:7px 1px; }
  .shipments-list-panel td[data-label="#"] { position:absolute; top:14px; right:52px; opacity:.55; }
  .shipments-list-panel td[data-label="Shipment"] { order:-10; grid-template-columns:1fr; padding:0 42px 11px 0; border-bottom:1px solid #eceef1; }
  .shipments-list-panel td[data-label="Shipment"]::before { display:none; }
  .shipments-list-panel td[data-label="Shipment"] .ship-link { font-size:17px; letter-spacing:-.01em; }
  .shipments-list-panel td[data-label="Status"] { order:-9; }
  .shipments-list-panel td[data-label="ETA"] { order:-8; }
  .shipments-list-panel td[data-label="Days Left"] { order:-7; }
  .shipments-list-panel td[data-label="Details"] { position:absolute; top:11px; right:12px; padding:0; }
  .shipments-list-panel td[data-label="Details"] .row-arrow { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--m-red-soft); }
  .tracking-action .btn { min-height:38px; width:100%; }
  .tracking-action small { max-width:none; }

  /* ---------- All responsive data cards ---------- */
  .table-wrap.mobile-cards { overflow:visible !important; border:0 !important; }
  .mobile-cards .responsive-table { border-spacing:0 10px !important; }
  .mobile-cards .responsive-table tbody { gap:10px; }
  .mobile-cards .responsive-table tr { border-radius:16px !important; padding:11px 12px !important; border:1px solid #e7e9ed !important; box-shadow:0 5px 18px rgba(15,23,42,.04) !important; }
  .mobile-cards .responsive-table td { font-size:13px; grid-template-columns:105px minmax(0,1fr); gap:10px; padding:7px 1px; border-bottom:1px solid #eef0f2; }
  .mobile-cards .responsive-table td::before { font-size:9px; letter-spacing:.055em; color:#8a9098; }
  .mobile-cards .responsive-table .ship-link { font-size:14px; }
  .status { font-size:10px; padding:5px 8px; }
  .pager { gap:6px; margin-top:13px; }
  .pager button { min-width:38px; min-height:38px; border-radius:11px; }

  /* ---------- Shipment details ---------- */
  .shipment-detail-page { padding-top:14px !important; }
  .shipment-detail-heading { margin-bottom:13px; }
  .back-link { display:inline-flex; align-items:center; min-height:34px; font-size:12px; font-weight:700; }
  .shipment-title-line { gap:8px; align-items:center; }
  .shipment-title-line h1 { font-size:27px !important; line-height:1.1; letter-spacing:-.03em; }
  .shipment-route-card { border-radius:20px !important; padding:15px !important; box-shadow:var(--m-shadow); }
  .shipment-route-main { gap:15px; }
  .route-endpoint strong { font-size:17px; line-height:1.25; }
  .route-label { font-size:9px; letter-spacing:.07em; }
  .route-progress-area { padding:0; }
  .route-progress-top,.route-progress-bottom { font-size:11px; }
  .route-track { height:7px; }
  .shipment-route-facts { grid-template-columns:1fr 1fr !important; gap:0; margin-top:14px; }
  .tracking-fact { padding:10px 8px !important; border-top:1px solid #edf0f2; }
  .tracking-fact span { font-size:9px; }
  .tracking-fact strong { font-size:12px; }
  .commercial-kpi-grid { grid-template-columns:1fr 1fr !important; gap:9px; }
  .commercial-kpi { min-height:96px !important; border-radius:15px; padding:12px !important; }
  .commercial-kpi-value { font-size:19px !important; }
  .tracking-section-heading { gap:10px; }
  .tracking-refresh-btn { width:auto !important; min-width:128px; }
  .tracking-map-shell { gap:10px; }
  .shipment-map { height:290px !important; border-radius:16px !important; }
  .vessel-card { padding:14px !important; border-radius:16px; }
  .vessel-detail-list { grid-template-columns:1fr !important; }
  .vessel-detail-list>div { grid-template-columns:102px 1fr !important; padding:8px 0; }
  .po-breakdown-panel,.products-panel { padding:15px !important; }
  .po-count-badge { flex:0 0 auto; }
  .shipment-product-filters { padding:12px !important; border-radius:14px; }
  .mobile-filter-toggle { min-height:44px; border-radius:12px; }
  .container-chip-rich { max-width:100%; }

  /* ---------- Product search ---------- */
  .product-search-panel { padding:14px !important; }
  .field-label { font-size:12px; }
  .product-search-input { height:50px !important; font-size:15px !important; border-radius:14px !important; }
  .product-search-help { font-size:11px; line-height:1.45; }
  .product-search-results { max-height:none; overflow:visible; gap:8px; }
  .product-search-result { min-height:68px; padding:12px; border-radius:14px; box-shadow:0 3px 12px rgba(15,23,42,.025); }
  .product-search-result-main strong { font-size:14px; }
  .product-search-result-main small { font-size:11px; }
  .product-summary-strip { gap:8px; }
  .product-summary-strip>div { border-radius:14px; padding:11px 12px; }

  /* ---------- History / users / security ---------- */
  .setup-steps { padding-left:20px; line-height:1.65; font-size:13px; }
  .setup-steps li { margin-bottom:9px; }
  .setup-steps code { font-size:11px; }
  .recovery { gap:6px; }
  .recovery code { font-size:11px; }
  .users-page .analytics-grid { gap:0; }
  .users-page .panel form { gap:11px !important; }

  /* Generic non-card tables (for admin screens) remain horizontally scrollable,
     but with better touch size so nothing desktop-specific is rewritten. */
  .table-wrap:not(.mobile-cards) { -webkit-overflow-scrolling:touch; border-radius:14px; }
  .table-wrap:not(.mobile-cards) .data-table th,
  .table-wrap:not(.mobile-cards) .data-table td { padding:12px 11px; }

  /* ---------- Authentication ---------- */
  .auth-shell { min-height:100dvh; padding:18px 14px calc(18px + env(safe-area-inset-bottom)); align-items:center; }
  .auth-card { width:100%; border-radius:22px; padding:22px 18px !important; box-shadow:0 18px 50px rgba(15,23,42,.08); }
  .auth-card h1 { font-size:27px; letter-spacing:-.025em; }
  .auth-card p { font-size:13px; line-height:1.5; }
  .auth-card label { font-size:12px; }
  .auth-card .btn { min-height:48px; }

  /* ---------- Touch/accessibility quality ---------- */
  a,button,input,select { -webkit-tap-highlight-color:transparent; }
  button,a.btn,.row-arrow,.ship-link { touch-action:manipulation; }
  :focus-visible { outline:3px solid rgba(201,21,30,.18); outline-offset:2px; }
  .hidden { display:none !important; }
}

@media (max-width: 420px) {
  .mobile-brand-copy b { display:none; }
  .mobile-live-indicator { font-size:8px; }
  .page { padding-left:12px !important; padding-right:12px !important; }
  .executive-kpi-grid { grid-template-columns:1fr 1fr !important; }
  .executive-kpi { min-height:116px !important; padding:13px 11px !important; }
  .dashboard-v11 .executive-kpi-copy strong { font-size:23px !important; }
  .receiving-position { grid-template-columns:1fr !important; justify-items:center !important; }
  .receiving-stats { width:100%; }
  .shipment-route-facts { grid-template-columns:1fr 1fr !important; }
  .commercial-kpi-grid { grid-template-columns:1fr !important; }
  .mobile-cards .responsive-table td { grid-template-columns:96px minmax(0,1fr); }
  .shipments-list-panel .mobile-cards .responsive-table td { grid-template-columns:96px minmax(0,1fr); }
  .dashboard-eta-table-wrap .responsive-table td { grid-template-columns:84px minmax(0,1fr); }
}

@media (max-width: 350px) {
  .executive-kpi-grid { grid-template-columns:1fr !important; }
  .mobile-live-indicator { display:none; }
  .mobile-topbar { grid-template-columns:42px 1fr; }
}