/* Phone layout for the LaoTai Connect portal.
 *
 * Loaded after the portal's own <style> block so it can override it, and written so that
 * everything above 820px stays exactly as it was. Removing the one <link> in index.html
 * puts the portal back to its previous behaviour.
 */

/* ---------- desktop keeps the row of words it already had ---------- */

/* topbar() now emits an icon and a short label alongside the full one, because CSS cannot
 * shorten Lao text and a bottom bar has no room for "ໂຄງສ້າງອົງກອນ". On a wide screen only
 * the full wording shows, and only the sign-out item keeps its glyph — which is exactly
 * what was on screen before. */
.nav-ic { display: none; }
.nav-short { display: none; }
/* The sign-out glyph was drawn at 14px with a stroke of 2 before navIcon() started
 * emitting these; navIcon uses 1.8, which came out 53 pixels lighter. Both are put
 * back so a wide screen renders exactly what it rendered yesterday. */
#logout .nav-ic { display: inline-block; width: 14px; height: 14px; stroke-width: 2; }

@media (max-width: 820px) {

  /* ---------- the bottom bar ---------- */

  /* Reachability is the whole point. On a 844px-tall phone the top of the screen needs a
   * second hand; the bottom 100px is where the thumb already rests. Every phone app the
   * team uses puts its navigation there, so it needs no explaining. */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; flex-wrap: nowrap; gap: 0;
    background: rgba(9, 33, 20, 0.96);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid rgba(243, 192, 31, 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  }
  .nav-link {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    min-height: 58px; padding: 8px 3px;
    font-size: 10.5px; line-height: 1.25; text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-link .nav-ic { display: block; width: 21px; height: 21px; }
  #logout .nav-ic { width: 21px; height: 21px; }
  .nav-full { display: none; }
  .nav-short { display: block; }
  /* The active tab is carried by the icon as well as the colour — colour alone is thin at
   * 10px, and some of the team will be reading this in bright sun. */
  .nav-link.on { color: var(--gold); }
  .nav-link.on .nav-ic { stroke-width: 2.2; }

  /* The name and role belong in the greeting on the home screen, not squeezed into a bar
   * that has five targets to fit. */
  .who { display: none; }

  /* ---------- top bar shrinks to a title ---------- */

  .topbar {
    position: sticky; top: 0; z-index: 40;
    min-height: 0; padding: 9px 14px;
    background: var(--bg);
    justify-content: flex-start; flex-wrap: nowrap;
  }
  .brand { gap: 10px; min-width: 0; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 15px; }
  .brand-sub { font-size: 10.5px; }

  /* ---------- page frame ---------- */

  /* Content has to clear the fixed bar, or the last card on every screen sits underneath
   * it and cannot be tapped. */
  .page {
    padding: 20px 14px calc(58px + 26px + env(safe-area-inset-bottom, 0px));
  }
  .hero { font-size: 25px; line-height: 1.4; margin-top: 8px; }
  .hero-sub { font-size: 14px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 1.6px; }

  /* ---------- app chooser ---------- */

  /* 30px of padding on a 20px-radius card leaves the text a narrow channel, and one card
   * filled the whole screen. Tightened, two fit in view and the list reads as a list. */
  .app-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .app-card { padding: 18px 18px 16px; border-radius: 16px; }
  .app-icon { width: 46px; height: 46px; border-radius: 13px; }
  .app-name { font-size: 16px; }
  .app-desc { font-size: 12.5px; }
  .org-btn { width: 100%; justify-content: center; min-height: 46px; margin-top: 16px; }

  /* ---------- fingers, not cursors ---------- */

  .btn, .btn-sm, .btn-primary-lg, .btn-cancel, .tab { min-height: 44px; }
  .btn-sm { padding: 9px 14px; }
  /* A checkbox drawn at 16px is a 16px target. The row around it is the thing being
   * tapped, so the row is what has to be tall enough. */
  .chk { min-height: 44px; margin-bottom: 6px; }
  .chk input { width: 20px; height: 20px; flex: none; }

  /* iOS Safari zooms in on any field whose text is under 16px and does not zoom back out.
   * Matching 16px exactly is what prevents the jump. */
  .inp, input, select, textarea { font-size: 16px; }

  /* The tab strips wrap to three rows on a phone; scrolling them sideways is both shorter
   * and the pattern people already know from every app's tab bar. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-bottom: 16px; padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }

  .card { padding: 16px; border-radius: 15px; }
  .sec { margin-bottom: 20px; }

  /* ---------- tables ---------- */

  /* These already scrolled inside .tbl-scroll. What was missing is knowing which row you
   * are on once the name column has scrolled away — so the first column is pinned. */
  .tbl-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* Left to fill 390px, the columns squeeze until a job title breaks one word per line and
   * a five-row table is a screenful. Given a sensible minimum the table simply scrolls, so
   * each column keeps a readable width and the pinned first one says whose row it is. */
  .tbl-scroll > table { min-width: 660px; }
  .tbl-scroll th:first-child,
  .tbl-scroll td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: #0e3020;
    box-shadow: 1px 0 0 rgba(243, 192, 31, 0.14);
  }

  /* ---------- dialogs become sheets ---------- */

  .overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-height: 90vh;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-head { margin-bottom: 14px; }
  .upload-buttons { flex-direction: column-reverse; }
  .upload-buttons > * { width: 100%; }

  /* ---------- organisation chart ---------- */

  /* This view pins itself to the viewport height so the diagram can fill it. The bar now
   * occupies the bottom of that viewport, so the same number has to come back off, or the
   * chart is drawn underneath it. */
  .portal-fixed { height: calc(100vh - 58px - env(safe-area-inset-bottom, 0px)); }
  .page-full { padding: 8px 0 0; }
  .org-top { padding: 0 14px; gap: 8px; }
  .org-stage { min-height: 260px; }
  /* orgFit() stops shrinking below a legible scale on a narrow screen, so the chart is now
   * wider than the canvas on purpose and has to be pannable sideways as well as down. */
  .org-canvas { overflow-x: auto; overscroll-behavior: contain; }
  .org-canvas::-webkit-scrollbar { width: 9px; height: 9px; }
}

/* Short screens in landscape: a 58px bar plus a 44px header out of 390px of height leaves
   the chart almost nothing, so the bar gives some of it back. */
@media (max-width: 820px) and (max-height: 460px) {
  .nav-link { min-height: 46px; font-size: 10px; padding: 5px 3px; }
  .nav-link .nav-ic { width: 17px; height: 17px; }
  .portal-fixed { height: calc(100vh - 46px - env(safe-area-inset-bottom, 0px)); }
  .page { padding-bottom: calc(46px + 20px + env(safe-area-inset-bottom, 0px)); }
}