/* ── Update-available inline banner — sits inside header to left of Sync, 2026-04-26 -sae ───── */
    .sw-update-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      margin-right: 10px;
      color: #fff;
    }
    .sw-update-inline[hidden] { display: none; }
    .sw-update-text {
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    .sw-update-refresh {
      background: transparent;
      color: #fff;
      border: 1.5px solid #fff;
      border-radius: 6px;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      min-height: 26px;
      -webkit-tap-highlight-color: transparent;
    }
    .sw-update-refresh:active { opacity: 0.7; }

    /* ── Design tokens ─────────────────────────────────── */
    :root {
      --color-navy:    #1b2a4a;
      --color-blue:    #2e7bc4;
      --color-bg:      #f4f6f9;
      --color-success: #2d9e6b;
      --color-warning: #e6a817;
      --color-danger:  #d94040;

      --tab-bar-height: 60px;
      --run-bar-height: 56px;
      --header-height:  62px;   /* increased ~1.25x for presence — 2026-04-16 -sae */
      --font-min: 13px;
    }

    /* ── Reset / base ──────────────────────────────────── */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: var(--font-min);
      background: var(--color-bg);
      color: var(--color-navy);
      padding-bottom: var(--tab-bar-height);
      min-height: 100vh;
    }

    /* ── App header — split navy/white, 2026-04-16 -sae */
    .app-header {
      height: var(--header-height);
      display: flex;
      flex-shrink: 0;
      overflow: hidden;
    }

    .app-header-left {
      flex: 1;
      background: var(--color-navy);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-right: 2px solid rgba(255,255,255,0.25);
    }

    .app-header-title {
      font-family: 'Raleway', sans-serif;
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 0.4px;
      color: #fff;
      /* Allow shrink + ellipsis on narrow screens — 2026-04-26 -sae */
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Hide company text below 600px viewport (logo stays visible) — 2026-04-26 -sae */
    @media (max-width: 600px) {
      .app-header-company { display: none; }
    }

    /* Bump Leaflet zoom +/− controls to 44px tap target — 2026-04-26 -sae */
    .leaflet-bar a {
      width: 44px;
      height: 44px;
      line-height: 44px;
    }

    .app-header-right {
      flex: 0 0 auto;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 4px 0 10px;
      gap: 6px;
      overflow: hidden;
    }

    .app-header-company {
      font-family: 'Raleway', sans-serif;
      font-size: 19px;
      font-weight: 600;
      letter-spacing: 0.4px;
      color: var(--color-navy);
      white-space: nowrap;
      flex-shrink: 1;
      min-width: 0;
    }

    .app-header-logo {
      height: 100%;
      width: auto;
      display: block;
      object-fit: contain;
      flex-shrink: 0;
    }

    /* ── Tab panels — hidden by default ────────────────── */
    .tab-panel {
      display: none;
    }

    /* Current + Records use simple block layout */
    .tab-panel.active {
      display: block;
      padding: 20px 16px;
    }

    .tab-panel h2 {
      font-size: 18px;
      font-weight: 600;
      color: var(--color-navy);
      margin-bottom: 8px;
    }

    .tab-panel p {
      color: #666;
      font-size: 13px;
    }

    /* ── Planning panel overrides — flex column fills screen */
    #panel-planning.active {
      display: flex;
      flex-direction: column;
      padding: 0;
      /* fill between header and tab bar */
      height: calc(100vh - var(--header-height) - var(--tab-bar-height));
      height: calc(100dvh - var(--header-height) - var(--tab-bar-height));
      overflow: hidden;
    }

    /* ── Planning toolbar (import + search row) ─────────── */
    .planning-toolbar {
      flex-shrink: 0;
      padding: 12px 16px 10px;
      background: var(--color-bg);
      border-bottom: 1px solid #dde1ea;
    }

    .import-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    /* Hidden real file input; visible label acts as button */
    .import-file-input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .import-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
      white-space: nowrap;
      user-select: none;
      -webkit-user-select: none;
    }

    .import-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .import-btn:active { opacity: 0.85; }

    .import-status {
      font-size: 12px;
      color: #666;
      flex: 1;
    }

    .import-status.success { color: var(--color-success); font-weight: 500; }
    .import-status.error   { color: var(--color-danger);  font-weight: 500; }

    /* ── Search + filter row ────────────────────────────── */
    .search-row {
      display: flex;
      gap: 8px;
    }

    .search-input {
      flex: 1;
      height: 44px;
      padding: 0 12px;
      border: 1px solid #ccd1de;
      border-radius: 6px;
      font-size: 14px;
      background: #fff;
      color: var(--color-navy);
      -webkit-appearance: none;
    }

    .search-input:focus {
      outline: 2px solid var(--color-blue);
      outline-offset: 1px;
    }

    .filter-select {
      height: 44px;
      padding: 0 28px 0 10px;
      border: 1px solid #ccd1de;
      border-radius: 6px;
      font-size: 13px;
      background: #fff;
      color: var(--color-navy);
      -webkit-appearance: none;
      /* down-arrow indicator */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b2a4a'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }

    .filter-select:focus {
      outline: 2px solid var(--color-blue);
      outline-offset: 1px;
    }

    /* ── Tank list — scrollable flex child ──────────────── */
    .tank-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
    }

    .empty-msg {
      padding: 40px 16px;
      color: #888;
      text-align: center;
      font-size: 14px;
    }

    /* ── Site group ─────────────────────────────────────── */
    .site-group {
      margin-bottom: 2px;
    }

    .site-group-header {
      padding: 8px 16px 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #888;
      background: var(--color-bg);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    /* ── Status group — collapsible -sae ───────────────── */
    .status-group { margin-bottom: 2px; }

    .status-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 7px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #555;
      background: var(--color-bg);
      position: sticky;
      top: 0;
      z-index: 10;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .status-group-header:active { opacity: 0.7; }

    .group-chevron {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.2s ease;
    }

    .status-group.collapsed .group-chevron { transform: rotate(-90deg); }

    .group-label { flex: 1; }
    .group-count { color: #999; font-weight: 500; }

    .status-group.collapsed .status-group-body { display: none; }

    /* ── Tank row title line (address4 — serial) ────────── */
    .tank-row-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-navy);
    }

    .tank-row-customer {
      font-size: 12px;
      color: #888;
      margin-top: 1px;
    }

    .tank-row-extras {
      font-size: 12px;
      color: #777;
      margin-top: 2px;
    }

    /* ── Tank row ───────────────────────────────────────── */
    .tank-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 16px;
      background: #fff;
      border-bottom: 1px solid #eef0f4;
      cursor: pointer;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }

    .tank-row:active    { background: #f0f4fa; }
    .tank-row.selected  { background: #e8f1fb; }

    .tank-checkbox {
      margin-top: 3px;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      accent-color: var(--color-blue);
      cursor: pointer;
    }

    .tank-info {
      flex: 1;
      min-width: 0;
    }

    .tank-serial {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-navy);
    }

    .tank-address {
      font-size: 12px;
      color: #666;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Old comments — amber accent, prominent */
    .tank-comments {
      font-size: 12px;
      color: #7a5800;
      background: #fff8e1;
      border-left: 3px solid var(--color-warning);
      padding: 3px 6px;
      margin-top: 5px;
      border-radius: 0 3px 3px 0;
      word-break: break-word;
    }

    /* ── Tank row metadata badges — appointment/visit/status, 2026-04-17 -sae */
    .tank-row-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    .badge-appt {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      background: var(--color-warning);
      color: #fff;
      white-space: nowrap;
    }

    .badge-info {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 600;
      background: #e4e8f2;
      color: #444;
      white-space: nowrap;
    }

    /* Manually-added tank badge — Planning tab, 2026-04-17 -sae */
    .badge-manual {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      background: #e6a817;
      color: #fff;
      white-space: nowrap;
    }

    .tank-row-visits {
      font-size: 12px;
      color: #777;
      margin-top: 2px;
    }

    .tank-row-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex-shrink: 0;
    }

    /* ── Status badges ──────────────────────────────────── */
    .status-badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      white-space: nowrap;
    }

    .status-badge.pending   { background: #d5d9e4; color: #555; }
    .status-badge.in-route  { background: var(--color-blue);   color: #fff; }
    .status-badge.completed { background: var(--color-success); color: #fff; }
    .status-badge.reattempt { background: var(--color-warning); color: #fff; }
    /* legacy aliases — migrate away via v4 upgrade -sae */
    .status-badge.today            { background: var(--color-blue);   color: #fff; }
    .status-badge.revisit          { background: var(--color-warning); color: #fff; }
    /* noAccessCompleted — red badge, Stage 6, 2026-04-17 -sae */
    .status-badge.noAccessCompleted { background: var(--color-danger);  color: #fff; }
    /* noncomplete — dark charcoal, distinct from pending grey, 2026-04-18 -sae */
    .status-badge.noncomplete { background: #3d4a5c; color: #fff; }

    /* ── "Add to today's run" bar — slides up above tab bar */
    .add-run-bar {
      position: fixed;
      bottom: var(--tab-bar-height);
      left: 0;
      right: 0;
      height: var(--run-bar-height);
      background: var(--color-navy);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      z-index: 99;
      transform: translateY(110%);
      transition: transform 0.2s ease;
    }

    .add-run-bar.visible {
      transform: translateY(0);
    }

    .run-count-label {
      font-size: 14px;
      font-weight: 500;
    }

    .add-run-btn {
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    .add-run-btn:active   { opacity: 0.85; }
    .add-run-btn:disabled { opacity: 0.5; cursor: default; }

    /* Multi-select action bar — remove button + wrapper — stage 6, 2026-04-16 -sae */
    .run-bar-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .remove-run-btn {
      background: transparent;
      color: #ff8080;
      border: 1px solid #ff8080;
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    .remove-run-btn:active   { opacity: 0.85; }
    .remove-run-btn:disabled { opacity: 0.4; cursor: default; }

    /* ── Bottom tab bar ─────────────────────────────────── */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--tab-bar-height);
      background: var(--color-navy);
      display: flex;
      align-items: stretch;
      z-index: 100;
    }

    .tab-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      min-height: 44px;
      transition: color 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .tab-btn svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tab-btn.active {
      color: #fff;
      background: var(--color-blue);
    }

    /* ══════════════════════════════════════════════════
       Stage 4: Current tab styles -sae
    ══════════════════════════════════════════════════ */

    /* Current panel — flex column fills screen */
    #panel-current.active {
      display: flex;
      flex-direction: column;
      padding: 0;
      height: calc(100vh - var(--header-height) - var(--tab-bar-height));
      height: calc(100dvh - var(--header-height) - var(--tab-bar-height));
      overflow: hidden;
    }

    /* ── Progress indicator ───────────────────────── */
    .progress-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: var(--color-bg);
      border-bottom: 1px solid #dde1ea;
    }

    .progress-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-navy);
      white-space: nowrap;
    }

    .progress-track {
      flex: 1;
      height: 6px;
      background: #d5d9e4;
      border-radius: 3px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: var(--color-success);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* ── Run card list ────────────────────────────── */
    .run-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── Tank card ────────────────────────────────── */
    .tank-card {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e4ee;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      /* Keep natural height in column flex parent — let .run-list scroll instead of shrinking cards, 2026-04-26 -sae */
      flex-shrink: 0;
    }

    /* Completed / revisit cards fade back */
    .tank-card.is-done {
      opacity: 0.6;
    }

    /* Drag-to-reorder states — 2026-04-25 -sae */
    .tank-card.dragging {
      opacity: 0.35;
    }
    .tank-card.drag-over {
      border-color: var(--color-blue);
      box-shadow: 0 0 0 2px rgba(46,123,196,0.25);
    }

    /* Drag handle — three-line icon on left — 2026-04-25 -sae */
    .drag-handle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      flex-shrink: 0;
      cursor: grab;
      color: #bbb;
      border-right: 1px solid #e8eaf0;
    }
    .drag-handle:active { cursor: grabbing; }

    /* Card content area (right of handle) — 2026-04-25 -sae */
    .tank-card-body {
      flex: 1;
      padding: 14px;
      min-width: 0;
    }

    .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 2px;
    }

    .card-site-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      flex: 1;
      line-height: 1.25;
      /* Ellipsis on long site names — 2026-04-26 -sae */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card-serial {
      font-size: 12px;
      color: #666;
      margin-top: 3px;
    }

    .card-address {
      font-size: 13px;
      color: #555;
      margin-top: 3px;
    }

    /* Old comments — PROMINENT amber block */
    .card-comments {
      font-size: 13px;
      font-weight: 500;
      color: #7a5800;
      background: #fff8e1;
      border-left: 4px solid var(--color-warning);
      padding: 7px 10px;
      margin: 8px 0 4px;
      border-radius: 0 4px 4px 0;
      word-break: break-word;
      line-height: 1.4;
    }

    /* ── Card action buttons ──────────────────────── */
    .card-actions {
      display: flex;
      gap: 2.5%;
      margin-top: 10px;
      align-items: center;
    }

    /* Navigate — 25% of card width — 2026-04-25 -sae */
    .btn-navigate {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 23.75%;
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 0;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      min-height: 38px;
      text-decoration: none;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-navigate svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .btn-navigate:active { opacity: 0.8; }

    /* Inspection — 50% of card width — 2026-04-25 -sae */
    .btn-start-inspection {
      width: 47.5%;
      background: transparent;
      color: var(--color-blue);
      border: 1.5px solid var(--color-blue);
      border-radius: 6px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-start-inspection:active { opacity: 0.75; }

    /* Completed card — inspection button turns green */
    .tank-card.is-done .btn-start-inspection {
      color: var(--color-success);
      border-color: var(--color-success);
    }

    /* ── Navigate choice modal — 2026-04-18 -sae ── */
    .nav-modal-box {
      background: #fff;
      border-radius: 14px;
      width: min(92vw, 440px);
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    }

    .nav-modal-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      padding: 16px 18px 13px;
      border-bottom: 1px solid #e8e8e8;
    }

    .nav-option-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      text-decoration: none;
      color: var(--color-navy);
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      min-height: 62px;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
    }

    .nav-option-row:active { background: #f5f5f5; }

    .nav-option-row.nav-option-disabled {
      opacity: 0.38;
      pointer-events: none;
    }

    .nav-option-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-option-icon img { width: 20px; height: 20px; display: block; }

    .nav-option-label {
      flex: 1;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.3;
    }

    .nav-option-label small {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: #888;
      margin-top: 2px;
    }

    .nav-option-arrow {
      font-size: 22px;
      color: #c8c8c8;
      flex-shrink: 0;
      line-height: 1;
    }

    .nav-cancel-btn {
      display: block;
      width: 100%;
      padding: 15px;
      background: none;
      border: none;
      border-top: 1px solid #e0e0e0;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-blue);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
    }

    .nav-cancel-btn:active { background: #f5f5f5; }

    /* ── Empty state ──────────────────────────────── */
    .current-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      text-align: center;
      gap: 14px;
    }

    .current-empty p {
      font-size: 14px;
      color: #888;
      line-height: 1.6;
    }

    .btn-go-planning {
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 10px 22px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    /* ── Inspection form overlay ──────────────────── */
    .inspection-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: var(--color-bg);
      display: flex;
      flex-direction: column;
      /* slides in from the right */
      transform: translateX(100%);
      transition: transform 0.25s ease;
      pointer-events: none;
    }

    .inspection-overlay.open {
      transform: translateX(0);
      pointer-events: auto;
    }

    .inspection-overlay-header {
      background: var(--color-navy);
      color: #fff;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      height: var(--header-height);
      flex-shrink: 0;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: transparent;
      color: #fff;
      border: none;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      padding: 8px 0;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }

    .back-btn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .overlay-title {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .inspection-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px;
      /* leave room for tab bar so content isn't clipped */
      padding-bottom: calc(var(--tab-bar-height) + 16px);
    }

    .inspection-meta-card {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e4ee;
      padding: 16px;
      margin-bottom: 14px;
    }

    .inspection-meta-card h2 {
      font-size: 17px;
      font-weight: 700;
      color: var(--color-navy);
      margin-bottom: 4px;
    }

    .inspection-meta-card .meta-line {
      font-size: 13px;
      color: #666;
      margin-top: 3px;
    }

    /* ══════════════════════════════════════════════════
       Stage 5: Inspection form fields — 2026-04-16 -sae
    ══════════════════════════════════════════════════ */

    .inspector-name-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 12px;
      background: #fff;
      border-bottom: 1px solid #e8ebf2;
    }

    .inspector-name-label {
      font-size: 13px;
      color: #666;
      flex-shrink: 0;
    }

    .inspector-name-input {
      flex: 1;
      min-height: 44px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 14px;
      padding: 0 10px;
      background: #fff;
      color: var(--color-navy);
      font-family: inherit;
    }

    .inspector-name-input:focus {
      outline: none;
      border-color: var(--color-blue);
    }

    /* Inspection date out-of-range warning — Route tab, 2026-04-25 -sae */
    .inspection-date-warning {
      width: 100%;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-danger);
      margin-top: 4px;
    }

    /* Add Extra Tank button — Route tab, 2026-04-17 -sae */
    .btn-add-extra-tank {
      flex-shrink: 0;
      height: 44px;
      padding: 0 14px;
      border: 1.5px solid var(--color-blue);
      border-radius: 6px;
      background: #fff;
      color: var(--color-blue);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      white-space: nowrap;
      cursor: pointer;
    }
    .btn-add-extra-tank:active { opacity: 0.75; }

    /* Extra Tank full-screen overlay — same slide-in as inspection overlay -sae */
    .extra-tank-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: var(--color-bg);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.28s ease;
    }
    .extra-tank-overlay.open { transform: translateX(0); }

    .extra-tank-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      padding-bottom: 32px;
    }

    /* Link section styles -sae */
    .et-link-search {
      width: 100%;
      box-sizing: border-box;
      min-height: 44px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 14px;
      padding: 0 10px;
      background: #fff;
      color: var(--color-navy);
      font-family: inherit;
      margin-top: 10px;
    }
    .et-link-results {
      margin-top: 8px;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid #e8ebf2;
      border-radius: 6px;
      background: #fff;
    }
    .et-link-result-row {
      padding: 10px 12px;
      border-bottom: 1px solid #f0f2f7;
      cursor: pointer;
      font-size: 14px;
      color: var(--color-navy);
    }
    .et-link-result-row:last-child { border-bottom: none; }
    .et-link-result-row.selected { background: #eef4fd; font-weight: 600; }
    .et-link-result-row:active { background: #ddeaf8; }

    /* Serial hint note -sae */
    .et-serial-note {
      font-size: 12px;
      color: #888;
      margin: 4px 0 12px 0;
    }

    /* Duplicate warning modal — reuses confirm-overlay pattern -sae */
    .et-dup-modal { }
    .et-dup-modal .confirm-modal-header { color: var(--color-warning); }

    /* Serial confirm row in inspection meta card — Stage 5f, 2026-04-17 -sae */
    .serial-confirm-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      padding: 10px 12px;
      background: #eef4fd;
      border: 1.5px solid var(--color-blue);
      border-radius: 8px;
    }

    .serial-confirm-cb {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      cursor: pointer;
      accent-color: var(--color-blue);
    }

    .serial-confirm-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-navy);
      cursor: pointer;
    }

    .serial-confirm-value {
      font-weight: 700;
      color: var(--color-blue);
    }

    /* Secondary site name in meta card */
    .form-customer-name {
      font-size: 13px;
      color: #666;
      margin-top: 2px;
    }

    .form-section {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e4ee;
      padding: 16px;
      margin-bottom: 14px;
    }

    .form-section-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      margin-bottom: 12px;
    }

    /* Additional Actions collapsible — Stage 5i, 2026-04-17 -sae */
    .addl-actions-section {
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e0e4ee;
      margin-bottom: 14px;
      overflow: hidden;
    }

    .addl-actions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      min-height: 44px;
    }

    .addl-actions-chevron {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      transition: transform 0.2s;
      stroke: var(--color-navy);
    }

    .addl-actions-section.open .addl-actions-chevron {
      transform: rotate(180deg);
    }

    .addl-actions-body {
      display: none;
      padding: 0 16px 14px;
    }

    .addl-actions-section.open .addl-actions-body {
      display: block;
    }

    .form-section-subtitle {
      font-size: 12px;
      font-weight: 600;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    .reading-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      border-bottom: 1px solid #f0f2f6;
    }

    .reading-row:last-child { border-bottom: none; }

    .reading-label {
      flex: 1;
      font-size: 13px;
      color: #555;
    }

    .reading-input {
      width: 86px;
      min-height: 44px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 15px;
      text-align: right;
      padding: 0 8px;
      background: #fff;
      color: var(--color-navy);
      -moz-appearance: textfield;
      box-sizing: border-box;
    }

    .reading-input::-webkit-outer-spin-button,
    .reading-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .reading-input:focus {
      outline: none;
      border-color: var(--color-blue);
    }

    .reading-input.input-disabled {
      opacity: 0.45;
      background: #f0f0f0;
    }

    .reading-unit {
      font-size: 12px;
      color: #888;
      width: 22px;
      flex-shrink: 0;
    }

    .two-col-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .notes-textarea {
      width: 100%;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 14px;
      padding: 10px;
      resize: vertical;
      min-height: 80px;
      background: #fff;
      color: var(--color-navy);
      font-family: inherit;
      box-sizing: border-box;
    }

    .notes-textarea:focus {
      outline: none;
      border-color: var(--color-blue);
    }

    .action-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
    }

    .action-cb {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      cursor: pointer;
      accent-color: var(--color-blue);
    }

    .action-label {
      font-size: 14px;
      color: var(--color-navy);
      cursor: pointer;
      flex: 1;
    }

    .action-expand {
      padding: 4px 0 8px 30px;
    }

    /* Stage 5c: depol summary/result — 2026-04-17 -sae */
    .depol-summary-text {
      font-size: 13px;
      color: #555;
      margin: 6px 0 4px;
      line-height: 1.4;
    }
    .depol-result-text {
      font-size: 14px;
      font-weight: 700;
      margin: 0 0 6px;
    }
    .depol-result-text.depol-result-pass    { color: var(--color-success); }
    .depol-result-text.depol-result-fail    { color: var(--color-danger); }
    .depol-result-text.depol-result-ongoing { color: var(--color-warning); }
    /* Incomplete-reason dropdowns in inspection form — Stage 5e, 2026-04-17 -sae */
    .form-select {
      width: 100%;
      height: 44px;
      padding: 0 28px 0 10px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 14px;
      background: #fff;
      color: var(--color-navy);
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231b2a4a'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      box-sizing: border-box;
      margin-top: 10px;
    }
    .form-select:focus { outline: none; border-color: var(--color-blue); }
    .form-select-label {
      display: block;
      font-size: 13px;
      color: #555;
      margin-top: 10px;
    }
    .form-select-comment {
      margin-top: 6px;
    }
    .depol-comments-label {
      display: block;
      font-size: 13px;
      color: #555;
      margin: 8px 0 4px;
    }
    /* JB sub-option rows — Stage 5d, 2026-04-17 -sae */
    .jb-sub-expand {
      padding: 4px 0 4px 30px;
    }

    .photo-confirm {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .photo-confirm .action-label {
      font-size: 13px;
      color: #555;
      flex: none;
    }

    .hidden { display: none !important; }

    .no-access-section {
      background: #fff8e1;
      border-left: 4px solid var(--color-warning);
      border-radius: 8px;
      padding: 14px 16px;
      margin-bottom: 14px;
    }

    .no-access-banner {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #7a5800;
    }

    /* No-access reason dropdown + other comment — Stage 5g, 2026-04-17 -sae */
    .no-access-extra {
      margin-top: 10px;
    }

    .no-access-reason-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #7a5800;
      margin-bottom: 4px;
    }

    .no-access-reason-select {
      width: 100%;
      min-height: 44px;
      padding: 0 10px;
      border: 1.5px solid var(--color-warning);
      border-radius: 6px;
      font-size: 13px;
      background: #fff;
      color: var(--color-navy);
      font-family: inherit;
      -webkit-appearance: none;
    }

    .no-access-other-input {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid var(--color-warning);
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      color: var(--color-navy);
      background: #fff;
      resize: vertical;
      min-height: 80px;
    }

    /* Remove from Route — 25% of card width — 2026-04-25 -sae */
    .btn-card-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 23.75%;
      background: var(--color-danger);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 0;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-card-remove:active { opacity: 0.8; }

    .btn-save-inspection {
      display: block;
      width: 100%;
      background: var(--color-success);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 14px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      min-height: 52px;
      margin-bottom: 16px;
    }

    .btn-save-inspection:active { opacity: 0.85; }

    /* Override Save — subtle outline below normal Save, 2026-04-25 -sae */
    .btn-override-save {
      display: block;
      width: 60%;
      margin: 0 auto 16px;
      background: transparent;
      color: #888;
      border: 1px solid #c8d0dc;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-override-save:active { opacity: 0.7; }

    /* Stage 5b: polarity toggle + error display — 2026-04-16 -sae */
    .polarity-toggle {
      min-width: 44px;
      min-height: 44px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      background: #f0f2f6;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      color: var(--color-navy);
    }

    .polarity-toggle.polarity-neg { border-color: #c0b8b0; color: #7a5800; }
    .polarity-toggle.polarity-pos { border-color: var(--color-blue); color: var(--color-blue); }
    .polarity-toggle:active { opacity: 0.75; }
    .polarity-toggle.input-disabled { opacity: 0.45; pointer-events: none; }

    .insp-error-msg {
      background: #fde8e8;
      border-left: 4px solid var(--color-danger);
      border-radius: 6px;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #8b0000;
      margin-bottom: 14px;
    }

    .insp-error-msg ul {
      margin: 4px 0 0 16px;
      padding: 0;
      font-weight: 600;
    }

    .insp-error-msg ul li {
      margin-bottom: 3px;
    }

    /* ══════════════════════════════════════════════════
       Stage 5: Map view — layout, pins, popup, modal -sae
    ══════════════════════════════════════════════════ */

    /* ── Finalise Day — Route tab banner — Stage 6, 2026-04-17 -sae */
    .finalise-banner {
      flex-shrink: 0;
      background: var(--color-navy);
      padding: 10px 16px 12px;
      display: none;
    }

    .finalise-banner.visible { display: block; }

    .finalise-count-text {
      font-size: 13px;
      color: rgba(255,255,255,0.8);
      margin-bottom: 8px;
    }

    .btn-finalise {
      display: block;
      width: 100%;
      background: var(--color-success);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      min-height: 44px;
    }

    .btn-finalise:active { opacity: 0.85; }

    /* ── Route info bar — Stage 6, 2026-04-17 -sae */
    .route-info-bar {
      flex-shrink: 0;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      background: #fff;
      border-bottom: 1px solid #dde1ea;
      color: var(--color-navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .route-info-bar.no-route { color: #999; font-weight: 400; }

    /* ── Records tab — collapsible day cards, Stage 6 extended, 2026-04-17 -sae */
    .records-list { display: flex; flex-direction: column; gap: 10px; }

    .record-card {
      background: #fff;
      border: 1px solid #e0e4ee;
      border-radius: 8px;
      overflow: hidden;
    }

    .record-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .record-card-header:active { background: #f5f7fc; }

    .record-card-chevron {
      width: 18px; height: 18px; flex-shrink: 0;
      fill: none; stroke: #888; stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round;
      transition: transform 0.2s ease;
    }
    .record-card.open .record-card-chevron { transform: rotate(90deg); }

    .record-card-info  { flex: 1; min-width: 0; }
    .record-card-date  { font-size: 14px; font-weight: 700; color: var(--color-navy); }
    .record-card-meta  { font-size: 12px; color: #666; margin-top: 2px; }
    .record-card-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

    .btn-download {
      background: var(--color-blue); color: #fff; border: none;
      border-radius: 6px; padding: 8px 14px; font-size: 13px;
      font-weight: 600; cursor: pointer; min-height: 44px;
      white-space: nowrap;
    }
    .btn-download:active { opacity: 0.85; }

    /* ── Restore button — Records tab archived allocations, 2026-04-18 -sae */
    .btn-restore-alloc {
      background: #fff; color: var(--color-navy);
      border: 1.5px solid var(--color-navy); border-radius: 6px;
      padding: 8px 14px; font-size: 13px; font-weight: 600;
      cursor: pointer; min-height: 44px; white-space: nowrap; font-family: inherit;
    }
    .btn-restore-alloc:active { background: var(--color-navy); color: #fff; }

    .record-card-body { display: none; border-top: 1px solid #e8ecf4; }
    .record-card.open .record-card-body { display: block; }

    /* ── Archived allocations section header, 2026-04-18 -sae */
    .archived-section-hdr {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      padding: 6px 0 10px;
      border-bottom: 2px solid var(--color-navy);
      margin-bottom: 8px;
    }

    /* ── Divider between archived allocs and day records -sae */
    .records-section-divider {
      height: 1px;
      background: #dde1ea;
      margin: 16px 0;
    }

    /* ── Archived allocation card — slightly different border -sae */
    .archived-alloc-card {
      border-left: 4px solid var(--color-navy);
    }

    /* ── Archived alloc body table -sae */
    .alloc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .alloc-record-table { border-collapse: collapse; width: 100%; font-size: 12px; }
    .alloc-record-table thead th {
      background: var(--color-navy); color: #fff; font-weight: 700;
      padding: 6px 8px; text-align: left; white-space: nowrap;
      border-right: 1px solid rgba(255,255,255,0.15);
      position: sticky; top: 0;
    }
    .alloc-record-table tbody td {
      padding: 5px 8px; border-bottom: 1px solid #e8ecf4;
      vertical-align: top; white-space: nowrap;
    }

    /* Allocation row colours */
    .alloc-row-completed   { background: #e8f6ee; }
    .alloc-row-noaccess    { background: #fde8e8; }
    .alloc-row-noncomplete { background: #edeef2; }

    .record-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .record-table {
      border-collapse: collapse; font-size: 12px; min-width: 100%;
    }
    .record-table th {
      background: var(--color-navy); color: #fff; font-size: 11px;
      font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
      padding: 8px 10px; text-align: left; white-space: nowrap;
    }
    .record-table td {
      padding: 7px 10px; border-bottom: 1px solid #eef0f4;
      white-space: nowrap; max-width: 200px; overflow: hidden;
      text-overflow: ellipsis; vertical-align: middle;
    }
    .record-table tbody tr { cursor: pointer; }
    .record-table tbody tr:active td { filter: brightness(0.95); }
    .record-table .cell-dash    { color: #ccc; }
    .record-table .cell-reading { text-align: right; font-variant-numeric: tabular-nums; }
    .record-table tr.row-completed td { background: #f0faf4; }
    .record-table tr.row-reattempt  td { background: #fef6e4; }
    .record-table tr.row-noaccess   td { background: #fde8e8; }

    .depol-pass { color: var(--color-success); font-weight: 700; }
    .depol-fail { color: var(--color-danger);  font-weight: 700; }

    .records-empty { color: #666; font-size: 13px; padding: 24px 0; text-align: center; }

    /* ── Inspection detail modal — Records tab, 2026-04-17 -sae */
    .insp-detail-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      z-index: 400; display: none; align-items: flex-end; justify-content: center;
    }
    .insp-detail-overlay.open { display: flex; }

    .insp-detail-box {
      background: #fff; border-radius: 16px 16px 0 0; width: 100%;
      max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    }

    .insp-detail-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px 12px; border-bottom: 1px solid #e8ecf4; flex-shrink: 0;
    }
    .insp-detail-title { font-size: 15px; font-weight: 700; color: var(--color-navy); flex: 1; min-width: 0; }
    .insp-detail-close {
      background: none; border: none; font-size: 22px; color: #888;
      cursor: pointer; padding: 0 0 0 12px; min-height: 44px; min-width: 44px;
      display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
    }

    .insp-detail-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 14px 18px; }

    .insp-detail-section { margin-bottom: 16px; }
    .insp-detail-section-title {
      font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
      color: #888; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eef0f4;
    }
    .insp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
    @media (max-width: 400px) { .insp-detail-grid { grid-template-columns: 1fr; } }
    .insp-detail-field { display: flex; flex-direction: column; padding: 4px 0; }
    .insp-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #999; margin-bottom: 1px; }
    .insp-detail-value { font-size: 13px; color: var(--color-navy); word-break: break-word; }

    .insp-detail-footer { padding: 12px 18px; border-top: 1px solid #e8ecf4; flex-shrink: 0; }
    .btn-redownload {
      width: 100%; background: var(--color-blue); color: #fff; border: none;
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px;
    }
    .btn-redownload:active { opacity: 0.85; }

    /* ── View toggle row ────────────────────────────── */
    .view-toggle-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .map-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      color: var(--color-blue);
      border: 1.5px solid var(--color-blue);
      border-radius: 6px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .map-toggle-btn.active {
      background: var(--color-blue);
      color: #fff;
    }

    .map-toggle-btn:active { opacity: 0.85; }

    .deselect-all-btn {
      background: transparent;
      color: #666;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .deselect-all-btn:active { opacity: 0.7; }

    .viewport-filter-label {
      display: none;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--color-navy);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }

    .viewport-filter-label input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--color-blue);
      flex-shrink: 0;
    }

    /* ── Planning body — wraps list + map ───────────── */
    .planning-body {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* Map container — hidden by default on portrait */
    .map-container {
      display: none;
      flex: 1;
      position: relative;
      min-height: 0;
      overflow: hidden;
    }

    /* Portrait toggle: show map, hide list */
    .planning-body.map-active .map-container { display: block; }
    .planning-body.map-active .tank-list     { display: none;  }

    /* Leaflet fills its container */
    #leaflet-map {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* Reload Map button — manual fallback overlay, top-right of map -sae */
    .reload-map-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 1001;
      background: rgba(255,255,255,0.92);
      border: 1px solid #ccd1de;
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-navy);
      cursor: pointer;
      min-height: 36px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
      -webkit-tap-highlight-color: transparent;
    }
    .reload-map-btn:active { opacity: 0.7; }

    /* Offline overlay on top of map */
    .map-offline-banner {
      display: none;
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: var(--color-navy);
      color: #fff;
      padding: 10px 16px;
      font-size: 13px;
      text-align: center;
      line-height: 1.5;
    }

    /* ── Draggable split divider — hidden on portrait -sae */
    .split-divider {
      display: none;
      flex-shrink: 0;
      width: 24px;
      cursor: col-resize;
      background: #eef0f4;
      border-left:  1px solid #dde1ea;
      border-right: 1px solid #dde1ea;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      transition: background 0.1s;
      z-index: 5;
    }

    .split-divider:hover,
    .split-divider.dragging { background: #d0d5e2; }

    .split-divider-grip {
      width: 4px;
      height: 20px;
      flex-shrink: 0;
      overflow: visible;
    }

    /* ── iPad landscape split view ──────────────────── */
    @media (min-width: 900px) and (orientation: landscape) {
      .planning-body {
        flex-direction: row;
      }
      .planning-body .tank-list {
        display: flex !important;
        flex-direction: column;
        width: 380px;
        flex: none;
        overflow-y: auto;
        /* border removed — split-divider provides the visual separator */
      }
      .planning-body .map-container {
        display: block !important;
        flex: 1;
      }
      .split-divider         { display: flex; }
      .map-toggle-btn        { display: none; }
      .viewport-filter-label { display: flex; }
    }

    /* ── Custom map pins — 2026-04-16 -sae */
    .map-pin-wrapper { background: none; border: none; }

    .map-pin {
      width: 28px;
      height: 28px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      border: 2px solid rgba(0,0,0,0.2);
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }

    /* ── Custom cluster markers — navy circle, white count -sae */
    .cluster-pin-wrapper { background: none; border: none; }

    .cluster-pin {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--color-navy);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    }

    /* ── Map popup ──────────────────────────────────── */
    .map-popup-header {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-navy);
      margin-bottom: 4px;
    }

    .map-popup-addr {
      font-size: 12px;
      color: #555;
      margin-bottom: 6px;
      line-height: 1.45;
    }

    /* Old comments in popup — matches list card style -sae */
    .map-popup-comments {
      font-size: 12px;
      color: #7a5800;
      background: #fff8e1;
      border-left: 3px solid var(--color-warning);
      padding: 5px 8px;
      margin-bottom: 6px;
      border-radius: 0 3px 3px 0;
      line-height: 1.4;
    }

    .map-popup-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .popup-add-route-btn {
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 5px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      min-height: 32px;
      white-space: nowrap;
    }

    .popup-add-route-btn:disabled { opacity: 0.5; cursor: default; }

    /* Remove from route — list row -sae */
    .btn-remove-route {
      margin-top: 5px;
      background: transparent;
      color: var(--color-danger);
      border: 1.5px solid var(--color-danger);
      border-radius: 5px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      min-height: 30px;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-remove-route:active { opacity: 0.75; }

    /* Remove-from-route confirmation modal — stage 4, 2026-04-16 -sae */
    .confirm-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }
    .confirm-overlay.open { display: flex; }
    .confirm-modal {
      background: #fff;
      border-radius: 10px;
      width: min(320px, 90vw);
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    .confirm-modal-header {
      background: var(--color-navy);
      color: #fff;
      padding: 14px 18px;
      font-size: 16px;
      font-weight: 700;
    }
    .confirm-modal-body {
      padding: 18px;
      font-size: 14px;
      color: #333;
      line-height: 1.5;
    }
    .confirm-modal-footer {
      display: flex;
      gap: 10px;
      padding: 0 18px 18px;
      justify-content: flex-end;
    }
    .confirm-cancel-btn {
      min-height: 44px;
      padding: 0 20px;
      border: 1px solid #ccc;
      background: #fff;
      color: #333;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .confirm-cancel-btn:active { background: #f0f0f0; }
    .confirm-remove-btn {
      min-height: 44px;
      padding: 0 20px;
      border: none;
      background: var(--color-danger);
      color: #fff;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .confirm-remove-btn:active { opacity: 0.8; }

    /* Remove from route — map popup -sae */
    .popup-remove-route-btn {
      background: transparent;
      color: var(--color-danger);
      border: 1.5px solid var(--color-danger);
      border-radius: 5px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      min-height: 32px;
      white-space: nowrap;
    }

    .popup-remove-route-btn:active { opacity: 0.75; }

    /* Cross-highlight: list row highlighted from map tap */
    .tank-row.map-highlighted {
      background: #dceeff;
      outline: 2px solid var(--color-blue);
      outline-offset: -2px;
    }

    /* ── Multi-tank modal ───────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      /* Must exceed Leaflet's highest pane (popupPane = 700) — bugfix 2026-04-16 -sae */
      z-index: 9998;
      background: rgba(0,0,0,0.5);
      display: none;
      pointer-events: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal-overlay.open { display: flex; pointer-events: auto; }

    /* Delete alloc modal must sit above alloc-manage-modal (z-index 9999) — 2026-04-25 -sae */
    #delete-alloc-modal { z-index: 10000; }

    .modal-box {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      max-width: 340px;
      width: 100%;
    }

    .modal-msg {
      font-size: 14px;
      color: var(--color-navy);
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .modal-actions { display: flex; flex-direction: column; gap: 8px; }

    .btn-modal-primary {
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    .btn-modal-secondary {
      background: transparent;
      color: var(--color-blue);
      border: 1.5px solid var(--color-blue);
      border-radius: 6px;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    .btn-modal-ghost {
      background: transparent;
      color: #666;
      border: 1.5px solid #ccd1de;
      border-radius: 6px;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      min-height: 44px;
    }

    /* ── Move Tank button — toolbar, 2026-04-17 -sae */
    .btn-move-tank {
      display: inline-flex; align-items: center; gap: 6px;
      background: transparent; color: var(--color-blue);
      border: 1.5px solid var(--color-blue); border-radius: 6px;
      padding: 10px 14px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; white-space: nowrap;
      user-select: none; -webkit-user-select: none;
    }
    .btn-move-tank:active { opacity: 0.8; }

    /* ── Move Tank modal — 2026-04-17 -sae */
    .move-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      z-index: 9999; display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .move-modal-overlay.open { display: flex; }

    .move-modal-box {
      background: #fff; border-radius: 12px; width: 100%;
      max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    }

    .move-modal-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px 12px; border-bottom: 1px solid #e8ecf4; flex-shrink: 0;
    }
    .move-modal-title { font-size: 15px; font-weight: 700; color: var(--color-navy); flex: 1; }
    .move-modal-close {
      background: none; border: none; font-size: 22px; color: #888;
      cursor: pointer; min-height: 44px; min-width: 44px;
      display: flex; align-items: center; justify-content: flex-end;
    }

    .move-modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px; }

    .move-search-input {
      width: 100%; height: 44px; padding: 0 12px;
      border: 1px solid #ccd1de; border-radius: 6px; font-size: 14px;
      background: #fff; color: var(--color-navy); margin-bottom: 10px;
      -webkit-appearance: none;
    }
    .move-search-input:focus { outline: 2px solid var(--color-blue); outline-offset: 1px; }

    .move-results { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }

    .move-result-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 10px 12px; border-radius: 6px; cursor: pointer;
      border: 1.5px solid transparent; background: #f8f9fc;
    }
    .move-result-row:active { background: #eef2fb; }
    .move-result-row.selected { border-color: var(--color-blue); background: #e8f1fb; }

    .move-result-info { flex: 1; min-width: 0; }
    .move-result-title { font-size: 13px; font-weight: 700; color: var(--color-navy); }
    .move-result-sub   { font-size: 11px; color: #777; margin-top: 1px; }
    .move-result-alloc {
      font-size: 11px; font-weight: 600;
      color: var(--color-blue); background: #e8f1fb;
      border-radius: 4px; padding: 2px 6px;
      white-space: nowrap; flex-shrink: 0;
    }

    .move-current-info {
      background: #f4f6f9; border-radius: 6px; padding: 10px 12px;
      margin-bottom: 14px; font-size: 13px; color: var(--color-navy);
    }
    .move-current-label { font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.4px; color: #999; margin-bottom: 2px; }

    .move-dest-list { display: flex; flex-direction: column; gap: 8px; }

    .move-dest-btn {
      width: 100%; padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
      cursor: pointer; text-align: left; border: 1.5px solid #dde1ea;
      background: #fff; color: var(--color-navy); transition: border-color 0.1s;
    }
    .move-dest-btn:active { background: #f0f4fa; }
    .move-dest-btn.current { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
    .move-dest-btn.selected { border-color: var(--color-blue); background: #e8f1fb; color: var(--color-blue); }
    .move-dest-divider { height: 1px; background: #e0e4ed; margin: 6px 0; }
    .move-dest-btn.remove { border-color: #f0c0c0; color: var(--color-danger); }
    .move-dest-btn.remove.selected { border-color: var(--color-danger); background: #fdf0f0; }
    .move-dest-btn.remove:active { background: #fae6e6; }
    /* Two-stage remove confirm — warning text in step 3 -sae */
    .move-confirm-warn { font-size: 13px; color: var(--color-danger); margin-top: 10px; font-weight: 600; }

    .move-confirm-msg {
      font-size: 14px; line-height: 1.55; color: var(--color-navy);
      padding: 12px 0 4px;
    }
    .move-confirm-msg strong { color: var(--color-blue); }

    .move-modal-footer {
      padding: 12px 18px; border-top: 1px solid #e8ecf4; flex-shrink: 0;
      display: flex; flex-direction: column; gap: 8px;
    }
    .btn-confirm-move {
      background: var(--color-blue); color: #fff; border: none;
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; width: 100%;
    }
    .btn-confirm-move:active { opacity: 0.85; }
    .btn-cancel-move {
      background: transparent; color: #666; border: 1.5px solid #ccd1de;
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; width: 100%;
    }
    .btn-cancel-move:active { opacity: 0.8; }

    .move-success-toast {
      position: fixed; bottom: calc(var(--tab-bar-height) + 12px); left: 50%; transform: translateX(-50%);
      background: var(--color-success); color: #fff; padding: 10px 20px;
      border-radius: 8px; font-size: 13px; font-weight: 600;
      z-index: 10000; opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
      white-space: nowrap;
    }
    .move-success-toast.show { opacity: 1; }

    /* ── Tank detail overlay — Planning tab, 2026-04-17 -sae */
    .tank-detail-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      z-index: 9999; display: none; align-items: flex-end; justify-content: center;
    }
    .tank-detail-overlay.open { display: flex; }

    .tank-detail-box {
      background: #fff; border-radius: 16px 16px 0 0; width: 100%;
      max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
    }

    .tank-detail-hdr {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px 12px; border-bottom: 1px solid #e8ecf4; flex-shrink: 0;
    }
    .tank-detail-title { font-size: 15px; font-weight: 700; color: var(--color-navy); flex: 1; min-width: 0; }
    .tank-detail-close {
      background: none; border: none; font-size: 22px; color: #888;
      cursor: pointer; padding: 0 0 0 12px; min-height: 44px; min-width: 44px;
      display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
    }

    .tank-detail-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 14px 18px; }

    .tank-detail-footer {
      padding: 12px 18px; border-top: 1px solid #e8ecf4;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
    }

    .btn-detail-add {
      background: var(--color-blue); color: #fff; border: none;
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; width: 100%;
    }
    .btn-detail-add:active { opacity: 0.85; }

    .btn-detail-remove {
      background: transparent; color: var(--color-danger);
      border: 1.5px solid var(--color-danger);
      border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; width: 100%;
    }
    .btn-detail-remove:active { opacity: 0.85; }

    .insp-detail-amber { color: #7a5800; }

    /* ══════════════════════════════════════════════════
       Multi-allocation tab system — 2026-04-18 -sae
    ══════════════════════════════════════════════════ */

    /* Replace .search-row — tabs left, search right on same line */
    .alloc-search-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Horizontally scrollable tab strip */
    .alloc-tab-scroll {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 2px 0;
    }
    .alloc-tab-scroll::-webkit-scrollbar { display: none; }

    /* When tabs are present, shrink search input so tabs have room */
    .alloc-search-row:has(.alloc-tab) .search-input {
      flex: 0 0 120px;
      width: 120px;
    }

    /* Individual allocation tab pill */
    .alloc-tab {
      flex-shrink: 0;
      height: 36px;
      padding: 0 10px;
      border: 1.5px solid #ccd1de;
      border-radius: 18px;
      background: #fff;
      color: var(--color-navy);
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
      -webkit-user-select: none;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    /* Single active tab — navy fill */
    .alloc-tab.active {
      background: var(--color-navy);
      color: #fff;
      border-color: var(--color-navy);
    }
    /* One of multiple selected tabs — blue fill */
    .alloc-tab.multi-active {
      background: var(--color-blue);
      color: #fff;
      border-color: var(--color-blue);
    }
    .alloc-tab:active { opacity: 0.75; }

    /* ── Alloc tab group wrapper — holds tab + archive btn together -sae */
    .alloc-tab-group {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      gap: 2px;
    }

    /* ── Archive icon button on allocation tabs -sae */
    .alloc-archive-btn {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border: 1.5px solid #b0baca;
      border-radius: 5px;
      background: #fff;
      color: var(--color-navy);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 4px;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .alloc-archive-btn svg { width: 14px; height: 14px; display: block; }
    .alloc-archive-btn:not(.arch-disabled):active { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
    .alloc-archive-btn.arch-disabled { opacity: 0.35; cursor: default; }

    .alloc-tab-count {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.7;
    }

    /* Three-dots manage button */
    .alloc-manage-btn {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border: 1.5px solid #ccd1de;
      border-radius: 6px;
      background: #fff;
      color: var(--color-navy);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .alloc-manage-btn:active { opacity: 0.7; }

    /* ── Naming modal — input + conflict warning ── */
    .alloc-name-modal-box { max-width: 360px; }

    .alloc-name-input {
      width: 100%;
      height: 44px;
      border: 1.5px solid #d0d5e4;
      border-radius: 6px;
      font-size: 14px;
      padding: 0 10px;
      background: #fff;
      color: var(--color-navy);
      font-family: inherit;
      margin: 10px 0 10px;
      box-sizing: border-box;
    }
    .alloc-name-input:focus {
      outline: none;
      border-color: var(--color-blue);
    }

    #alloc-name-warning {
      font-size: 13px;
      line-height: 1.4;
      padding: 8px 10px;
      margin-bottom: 10px;
      border-radius: 0 4px 4px 0;
      border-left: 3px solid var(--color-warning);
      background: #fff8e1;
      color: #7a5800;
    }

    #alloc-name-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .alloc-conflict-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .btn-alloc-rename {
      background: var(--color-blue); color: #fff;
      border: none; border-radius: 6px;
      padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; font-family: inherit; width: 100%;
    }
    .btn-alloc-add-exist {
      background: #fff; color: var(--color-navy);
      border: 1.5px solid var(--color-navy); border-radius: 6px;
      padding: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; min-height: 44px; font-family: inherit; width: 100%;
    }
    .btn-alloc-cancel-import {
      background: transparent; color: #888; border: none;
      padding: 10px; font-size: 13px; cursor: pointer;
      font-family: inherit; width: 100%;
    }
    .btn-alloc-rename:active,
    .btn-alloc-add-exist:active { opacity: 0.85; }

    /* ── Management bottom-sheet modal ── */
    .alloc-manage-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.45);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .alloc-manage-modal[hidden] { display: none; }

    .alloc-manage-box {
      background: #fff;
      border-radius: 14px 14px 0 0;
      width: 100%;
      max-width: 640px;
      max-height: 72vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .alloc-manage-hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 16px 12px;
      border-bottom: 1px solid #e8ebf2;
      flex-shrink: 0;
    }
    .alloc-manage-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-navy);
    }
    .alloc-manage-close-btn {
      background: transparent; border: none;
      font-size: 20px; color: #666;
      cursor: pointer; padding: 4px 8px;
      line-height: 1; min-height: 44px; min-width: 44px;
    }

    .alloc-manage-list {
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
    }

    .alloc-manage-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid #eef0f4;
    }
    .alloc-manage-info { flex: 1; min-width: 0; }
    .alloc-manage-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .alloc-manage-meta {
      font-size: 12px;
      color: #888;
      margin-top: 2px;
    }

    .alloc-manage-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .alloc-rename-btn {
      height: 36px; padding: 0 12px;
      border: 1.5px solid var(--color-blue);
      border-radius: 6px; background: #fff;
      color: var(--color-blue);
      font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit;
    }
    .alloc-delete-btn {
      height: 36px; padding: 0 12px;
      border: 1.5px solid var(--color-danger);
      border-radius: 6px; background: #fff;
      color: var(--color-danger);
      font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit;
    }
    .alloc-rename-btn:active,
    .alloc-delete-btn:active { opacity: 0.75; }

    /* ── Settings gear button — Stage 7, 2026-04-18 -sae ── */
    .btn-settings-gear {
      margin-left: auto;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--color-navy);
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-settings-gear:active { background: rgba(0,0,0,0.06); }
    .btn-settings-gear svg {
      width: 22px;
      height: 22px;
    }

    /* ── Settings overlay — Stage 7, 2026-04-18 -sae ── */
    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: var(--color-bg);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.25s ease;
      pointer-events: none;
    }
    .settings-overlay.open {
      transform: translateX(0);
      pointer-events: auto;
    }

    .settings-tabs {
      display: flex;
      background: #fff;
      border-bottom: 2px solid var(--color-bg);
      flex-shrink: 0;
    }
    .settings-tab {
      flex: 1;
      height: 44px;
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      color: #888;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: color 0.15s, border-color 0.15s;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .settings-tab.active {
      color: var(--color-navy);
      border-bottom-color: var(--color-blue);
    }

    .settings-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 24px 16px;
    }
    .settings-panel { display: none; }
    .settings-panel.active { display: block; }

    .settings-section-heading {
      font-size: 17px;
      font-weight: 700;
      color: var(--color-navy);
      margin: 0 0 12px;
    }
    .settings-placeholder-text {
      font-size: 14px;
      color: #666;
      margin: 0;
    }

    /* ── Guide tab content — Stage 7 updated, 2026-04-18 -sae ── */
    .guide-main-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-navy);
      margin: 0 0 10px;
      line-height: 1.3;
    }
    .guide-intro {
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      margin: 0 0 10px;
    }
    .guide-section {
      margin-top: 24px;
    }
    .guide-section-heading {
      font-size: 15px;
      font-weight: 700;
      color: var(--color-navy);
      margin: 0 0 8px;
      padding-bottom: 4px;
      border-bottom: 2px solid var(--color-blue);
    }
    .guide-section p {
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      margin: 0 0 8px;
    }
    .guide-section p:last-child { margin-bottom: 0; }
    .guide-list-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-navy);
      margin: 8px 0 4px;
    }
    .guide-list {
      font-size: 14px;
      color: #444;
      line-height: 1.6;
      margin: 0 0 8px;
      padding-left: 20px;
    }
    .guide-link {
      color: var(--color-blue);
      text-decoration: underline;
    }
    .guide-link--light {
      color: #fff;
    }
    .guide-alert {
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.55;
      margin: 10px 0;
    }
    .guide-alert p { margin: 0 0 6px; font-size: 13px; }
    .guide-alert p:last-child { margin-bottom: 0; }
    .guide-alert--amber {
      background: #fff8e6;
      border-left: 4px solid var(--color-warning);
      color: #7a5200;
    }
    .guide-alert--blue {
      background: #e8f2fb;
      border-left: 4px solid var(--color-blue);
      color: #1a4a7a;
    }
    .guide-disclaimer {
      margin-top: 28px;
      padding: 12px 14px;
      background: #f0f2f5;
      border-radius: 6px;
      border-top: 2px solid #d0d4dc;
    }
    .guide-disclaimer p {
      font-size: 12px;
      color: #777;
      line-height: 1.55;
      margin: 0;
    }
    .guide-disclaimer .guide-link { color: #888; }

    .guide-alert--danger {
      background: #fdf0f0;
      border-left: 4px solid var(--color-danger);
      color: #5a1a1a;
    }

    /* ── Excel settings tab — Stage 7, 2026-04-18 -sae ── */
    .excel-setting-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 0;
      border-bottom: 1px solid #e0e4ea;
    }
    .excel-setting-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .excel-setting-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-navy);
    }
    .excel-setting-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
    }

    /* Toggle switch */
    .toggle-switch {
      flex-shrink: 0;
      width: 48px;
      height: 28px;
      border-radius: 14px;
      border: none;
      background: #bbb;
      position: relative;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s;
      -webkit-tap-highlight-color: transparent;
      margin-top: 2px;
    }
    .toggle-switch[aria-checked="true"] {
      background: var(--color-navy);
    }
    .toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      transition: transform 0.2s;
      pointer-events: none;
    }
    .toggle-switch[aria-checked="true"] .toggle-knob {
      transform: translateX(20px);
    }

    /* ── Login screen — Stage 8, 2026-04-19 -sae ──────── */
    .login-screen {
      position: fixed;
      inset: 0;
      background: var(--color-navy);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 24px 20px;
      gap: 16px;
    }
    .login-screen[aria-hidden="true"] {
      display: none;
    }
    .login-logo-wrap {
      display: flex;
      justify-content: center;
    }
    .login-logo {
      height: 72px;
      width: auto;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .login-app-title {
      font-family: 'Raleway', sans-serif;
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      text-align: center;
      letter-spacing: 0.3px;
    }
    .login-card {
      background: #fff;
      border-radius: 12px;
      padding: 24px 20px;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .login-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-navy);
    }
    .login-input {
      width: 100%;
      height: 48px;
      border: 1.5px solid #c8d0dc;
      border-radius: 8px;
      padding: 0 14px;
      font-size: 15px;
      color: var(--color-navy);
      background: #fff;
      outline: none;
    }
    .login-input:focus {
      border-color: var(--color-blue);
    }
    .login-submit-btn {
      height: 50px;
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 4px;
      -webkit-tap-highlight-color: transparent;
    }
    .login-submit-btn:active {
      opacity: 0.85;
    }
    .login-forgot-btn {
      background: none;
      border: none;
      color: var(--color-blue);
      font-size: 14px;
      cursor: pointer;
      padding: 4px 0;
      text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .login-error {
      background: #fde8e8;
      border: 1px solid #f5c6c6;
      color: var(--color-danger);
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 13px;
    }
    .login-reset-msg {
      background: #e8f4ed;
      border: 1px solid #b7dfc8;
      color: var(--color-success);
      border-radius: 6px;
      padding: 10px 12px;
      font-size: 13px;
      text-align: center;
    }

    /* ── Sync indicator — Stage 8, 2026-04-19 -sae ─────── */
    .sync-refresh-btn {
      background: none;
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      padding: 6px 10px;
      flex-shrink: 0;
      border-radius: 6px;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.15s;
    }
    .sync-refresh-btn:active { opacity: 0.6; }
    .sync-refresh-icon {
      font-size: 18px;
      line-height: 1;
      display: inline-block;
    }
    .sync-refresh-label {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .sync-refresh-btn.spinning .sync-refresh-icon {
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .sync-indicator-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .sync-indicator {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      background: #aab0c0;
      -webkit-tap-highlight-color: transparent;
    }
    .sync-indicator.sync-ok      { background: var(--color-success); }
    .sync-indicator.sync-busy    { background: var(--color-warning); }
    .sync-indicator.sync-error   { background: var(--color-danger); }
    .sync-indicator.sync-offline { background: var(--color-danger); }
    .sync-indicator.sync-unknown { background: #aab0c0; }
    /* Tooltip is positioned via JS using getBoundingClientRect — Stage 8 fix -sae */
    .sync-tooltip {
      position: fixed;
      background: var(--color-navy);
      color: #fff;
      font-size: 13px;
      padding: 8px 12px;
      border-radius: 6px;
      white-space: nowrap;
      z-index: 9999;
      pointer-events: none;
    }
    .sync-tooltip::before {
      content: '';
      position: absolute;
      top: -5px;
      right: 10px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid var(--color-navy);
    }

    /* ── Account tab — Stage 8, 2026-04-19 -sae ────────── */
    .account-info-block {
      border: 1px solid #e0e4ea;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 4px;
    }
    .account-info-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid #e0e4ea;
    }
    .account-info-row:last-child {
      border-bottom: none;
    }
    .account-info-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-navy);
      min-width: 100px;
      flex-shrink: 0;
    }
    .account-info-value {
      font-size: 13px;
      color: #444;
      word-break: break-all;
    }
    .account-inspector-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: stretch;
      min-width: 160px;
      flex-shrink: 0;
    }
    .account-inspector-input {
      height: 44px;
      border: 1.5px solid #c8d0dc;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 14px;
      color: var(--color-navy);
      outline: none;
    }
    /* Inspector name display in Settings (replaces inline input) — 2026-04-25 -sae */
    .account-inspector-display {
      min-height: 44px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      border: 1.5px solid #c8d0dc;
      border-radius: 8px;
      background: #f4f6f9;
      font-size: 14px;
      color: var(--color-navy);
      word-break: break-word;
    }
    .account-inspector-input:focus {
      border-color: var(--color-blue);
    }
    .btn-account-primary {
      height: 44px;
      background: var(--color-blue);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .account-status-msg {
      font-size: 13px;
      color: var(--color-success);
      padding: 4px 0 0;
    }
    .account-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px;
    }
    /* Outlined style to match Start Inspection — 2026-04-25 -sae */
    .btn-account-action {
      min-height: 44px;
      background: transparent;
      color: var(--color-navy);
      border: 1.5px solid var(--color-navy);
      border-radius: 6px;
      padding: 0 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-account-action:active { opacity: 0.75; }
    .btn-account-danger {
      min-height: 44px;
      background: transparent;
      color: var(--color-danger);
      border: 1.5px solid var(--color-danger);
      border-radius: 6px;
      padding: 0 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-account-danger:active { opacity: 0.75; }

    /* ── Manage Allocations -sae */
    .manage-alloc-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .manage-alloc-row {
      background: #fff;
      border: 1px solid #dde3ef;
      border-radius: 8px;
      padding: 12px 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .manage-alloc-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .manage-alloc-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-navy);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .manage-alloc-count {
      font-size: 13px;
      color: #6b7a99;
    }
    .manage-alloc-del-btn {
      height: 40px;
      padding: 0 16px;
      font-size: 14px;
      flex-shrink: 0;
    }
    .manage-alloc-confirm {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding-top: 4px;
    }
    .manage-alloc-confirm-msg {
      flex: 1;
      font-size: 13px;
      color: var(--color-danger);
      font-weight: 500;
    }
    .manage-alloc-confirm-btn,
    .manage-alloc-cancel-btn {
      height: 40px;
      padding: 0 14px;
      font-size: 14px;
      flex-shrink: 0;
    }