/* css/mobile.css — mobile "widok dyżurny" layout.
   Spec: BIZNES/projekty/otolith-hackathon/spec/2026-09-13_aneks-3-wersja-mobilna.md
   Everything lives inside this single media query; nothing touches desktop (>820px). */
/* portrait phones by width; landscape phones by height + coarse pointer (keep in sync with js/mobile.js) */
@media (max-width: 820px), (max-height: 520px) and (pointer: coarse) {

  /* header shrinks to 48px on mobile (spec A3 diagram) — scoped override,
     tokens.css itself is not touched. */
  :root { --header-h: 48px; }

  /* ---- app shell: column layout (spec A3 §1) --------------------------- */
  .body { flex-direction: column; }
  .rail, .dock { display: none; }
  /* map : alerts = 38 : 62 of the REAL app height (flex-grow ratios, basis 0). Owner review 13.09:
     42vh measured against the large viewport left the alert list a ~100px "micro window" under the
     browser chrome — vh ignores the toolbars, the fixed app shell does not. */
  .map-wrap { flex: 38 1 0px; min-height: 170px; }
  .panel-right { width: auto; flex: 62 1 0px; min-height: 0; border-left: none; border-top: 1px solid var(--line); }
  .app.map-fullscreen .map-wrap { flex: 1 1 auto; } /* fill the column once rail/panel/dock hide */

  /* ---- header: logo, sound, bell, avatar only (spec A3 §2) ------------- */
  .brand-tag, .header-center, .clock-block, .speed-switch, #night-toggle, #calib-btn, .op-name { display: none; }
  .header { padding: 0 10px; gap: 8px; }
  .header-right { gap: 6px; }
  .op-btn { padding: 4px; border: none; }
  .op-menu { max-width: calc(100vw - 20px); } /* keep #op-menu on-screen (spec A3 §2) */

  /* ---- status strip #m-stan, built by js/mobile.js (spec A3 §3) -------- */
  #m-stan {
    flex: 0 0 auto; height: 32px; display: flex; align-items: center; gap: 0;
    padding: 0 10px; background: var(--bg-1); border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 11px; color: var(--text-1);
    overflow: hidden; white-space: nowrap;
  }
  #m-stan b { color: var(--text-0); font-weight: 700; }
  #m-stan .m-stan-item { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  #m-stan .m-stan-item + .m-stan-item::before { content: '\00b7'; margin: 0 8px; color: var(--text-2); }
  #m-stan .dot { width: 7px; height: 7px; }

  /* ---- alerts list: compact header + tap-targets (spec A3 §4, owner review 13.09) ---- */
  .panel-tab { min-height: 44px; }
  .alerts-header { padding: 8px 10px; }
  .alerts-counts { margin-bottom: 0; gap: 6px; }
  .count-chip { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 5px 4px; }
  .count-chip b { display: inline; font-size: 14px; }
  .filter-row { display: none; } /* status/type filters stay a desktop tool; the phone shows everything */
  .nowy-banner { padding: 5px 8px; font-size: 11px; }
  .alert-row { padding: 10px 10px 10px 12px; }

  /* ---- drawer (spec A3 §5) ----------------------------------------------- */
  .drawer-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .drawer-tabs::-webkit-scrollbar { display: none; }
  .drawer-tabs button { flex: 0 0 auto; }
  .drawer-actions button { min-height: 44px; }
  .act-note { display: none; } /* notes stay a desktop task; keeps actions to two rows on the phone */
  /* while an alert is open, give its content room: map shrinks 42vh -> 28vh (class set by mobile.js) */
  .app.m-drawer-open .map-wrap { flex-grow: 26; min-height: 140px; }

  /* ---- drag handle between map and alerts (owner ask 13.09: resize or hide by finger) ---- */
  #m-split { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); touch-action: none; cursor: row-resize; user-select: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-1); }
  .m-split-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--c-cyan); opacity: .75; }
  #m-split.dragging .m-split-grip { opacity: 1; }
  .m-split-btn { width: 44px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--c-cyan); font-size: 12px; line-height: 1; cursor: pointer; touch-action: manipulation; }
  /* a finger-set height wins over the 38:62 default and over the drawer shrink (3 classes > 2) */
  .app.m-custom-split .map-wrap, .app.m-custom-split.m-drawer-open .map-wrap { flex: 0 0 var(--m-map-h, 38%); min-height: 0; }
  .app.map-fullscreen #m-split { display: none; }
  .app.map-fullscreen .map-wrap, .app.map-fullscreen.m-custom-split .map-wrap { flex: 1 1 auto; min-height: 0; }

  /* ---- map overlays (spec A3 §6) ----------------------------------------- */
  #map-statusbar { display: none; } /* LIVE/REPLAY mode moves into #m-stan */
  .leaflet-control-layers { display: none; } /* map.js opens it with collapsed:false — on a 42vh map it covered a quarter of the water (owner review 13.09) */
  .impact-legend { max-width: 150px; font-size: 10px; }
  .replay-bar { left: 8px; right: 8px; bottom: 8px; }
  .replay-controls { flex-wrap: wrap; }
  .alarm-toast { flex-wrap: wrap; row-gap: 6px; }
  .alarm-toast-text { white-space: normal; }
  #demo-menu { width: min(260px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; }

  /* ---- fullscreen map toggle + peek bar, built by js/mobile.js (spec A3 §7) */
  #m-map-toggle {
    position: absolute; right: 10px; bottom: 82px; z-index: 1200; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0;
    background: rgba(15,26,46,.92); border: 1px solid var(--line); color: var(--c-cyan); cursor: pointer; font-size: 17px;
  }
  .app.replay-mode #m-map-toggle { bottom: 112px; } /* clear the replay bar (91px + 8px) */
  #m-peek {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 48px; z-index: 1300;
    align-items: center; justify-content: center; gap: 16px; background: var(--bg-1); border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; color: var(--text-0); cursor: pointer;
  }
  .app.map-fullscreen #m-peek { display: flex; }
  #m-peek b { font-weight: 700; }
  #m-peek .cnt-alarm { color: var(--c-alarm); }
  #m-peek .cnt-warning { color: var(--c-warning); }
  #m-peek .cnt-nowe { color: var(--c-cyan); }

  /* ---- login (spec A3 §8) ------------------------------------------------ */
  .login-card { width: min(380px, calc(100vw - 24px)); padding: 28px 20px; margin: auto; }
  .login-screen { overflow-y: auto; align-items: flex-start; } /* card taller than a short/landscape viewport scrolls instead of being cropped */

  /* ---- touch hygiene (owner review 13.09: "nie da sie skrolowac, ucina komunikat") -- */
  html, body { overscroll-behavior: none; }           /* Android: a downward swipe at the top must not pull-to-refresh (reloads the demo) */
  .app, .login-screen { touch-action: manipulation; } /* no double-tap zoom that leaves the UI cropped; pan + pinch still work */
  .alert-list, .archive-list, .drawer-content, .vessel-card { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* iOS: gesture stays in the list at its edges */
  .drawer-content { flex: 1 1 0px; min-height: 0; }

  /* ---- landscape phone: map left, alerts right (dock/rail stay hidden) --------------- */
  @media (orientation: landscape) and (max-height: 520px) {
    .body { flex-direction: row; }
    .map-wrap { flex: 1 1 auto; min-height: 0; }
    .panel-right { flex: 0 0 min(360px, 46vw); border-top: none; border-left: 1px solid var(--line); }
    .app.m-drawer-open .map-wrap { flex: 1 1 auto; min-height: 0; }
    #m-stan { display: none; } /* 32px matter more than the strip when the screen is 390px tall */
    #m-split { display: none; }
    .app.m-custom-split .map-wrap, .app.m-custom-split.m-drawer-open .map-wrap { flex: 1 1 auto; } /* vertical handle has no meaning in the row layout */
  }

  /* spec A3 §9 (no horizontal scroll) is verified by measurement, not masked
     with overflow-x:hidden — the app shell is position:fixed anyway. */
}