/*
  Desktop header layout.
  ---------------------------------------------------------------------------
  Two rows, by design:

    row 1   brand .......... theme switch, link state, pairing, connect button
    row 2   the tab strip, full width

  A single row was tried first and does not fit. Measured at the 1240px the
  navbar actually has inside its 1280px max-width, the five tabs need ~600px
  and the brand, status pills and connect button need ~920px -- 300px over
  budget. Letting the strip scroll hid four of the five tabs behind a 570px
  overflow, which is worse than the layout problem it was meant to solve.

  So the strip gets its own full-width line, which is the same thing the
  <=720px block below has always done on a phone. The header ends up about
  twice as tall as a single row, and every control is reachable without
  scrolling at any window width.
*/

.navbar-inner { flex-wrap: wrap; }

/* The brand, the theme switch and the status pills keep their intrinsic width;
   the spacer absorbs whatever is left on the first row. */
.navbar .brand,
.theme-switch,
.link-state,
.pairing-state,
#btn-connect-mobile { flex: none; }

/*
  Full-width second row. order:3 puts it after every control, and width:100%
  forces the wrap, so the strip is never partially off the end of a line --
  the original failure, where "Tömeges ID generáló" was sliced in half.
*/
.tabs {
  order: 3;
  width: 100%;
  margin-left: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* flex:none makes the buttons overflow the strip rather than shrink inside it,
   which is what turns a squeeze into a scroll. */
.tabs .tab-btn { flex: none; white-space: nowrap; }

/*
  Fade the right edge, as a safety net for windows narrow enough that even a
  full-width strip cannot hold five tabs. At normal widths nothing is cut and
  the fade sits over empty space, so it is invisible. A mask is tied to the
  padding box rather than the scroll position, so it stays on the right at
  both ends of the scroll -- a deliberate trade for not shipping a scroll
  listener to animate it.
*/
.tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

/*
  The reels are decoration. They are the first thing to go when the header
  gets tight, well before the navigation becomes unusable.
*/
@media (max-width: 1080px) {
  .reels { display: none; }
}

@media (max-width: 720px) {
  .navbar-inner { padding: 10px 12px; flex-wrap: wrap; }
  .navbar .brand { flex: 1 1 auto; }
  .tabs { order: 3; width: 100%; margin-left: 0; justify-content: space-between; overflow-x: auto; }
  .tab-btn { padding: 7px 12px; font-size: 13px; }
  .container { padding: 14px; }
  .code-box .code { font-size: 17px; letter-spacing: 2px; }

  /* The action column is a convenience; on a narrow screen the bulk bar and
     the master checkbox still cover every delete path. */
  table.data th.col-act, table.data td.col-act { display: none; }
  table.data thead th, table.data tbody td { padding: 9px 10px; }
  .bulk-bar { flex-direction: column; align-items: stretch; }
  .bulk-actions { justify-content: flex-end; }
  .feed-item { grid-template-columns: 10px 66px 1fr; row-gap: 4px; }
  .feed-item .feed-tag { grid-column: 2 / -1; }
  .link-state { padding: 4px 9px; font-size: 11px; }
  #pairing-state { display: none; }
}

/* ------------------------------------------------- wrong-device guard ------- */

/*
  The console is for a computer. The phone is for scanning and for buying
  tickets, and those are the two surfaces that were built for it.

  So on a narrow screen this is a full-height panel with one sentence and a
  link, rather than the console. Not a scaled-down console, and not the
  collapse rules above either - those exist so that a half-widthed browser
  window on a real computer still works, which is a different situation from a
  phone and needs different treatment.

  Why bother, when the collapse above is not unusable:
    - the phone is being held one-handed at a door, in a queue, possibly in the
      dark. Hitting "Delete all" or a bulk checkbox there is a realistic way to
      lose a day of scanning, and the confirm dialog for it asks the operator to
      type a word on a keyboard they do not have;
    - the ticket table needs real width for the id, the status and the actions to
      sit side by side. Below that width something has to go, and what goes is
      whichever row the media query happened to target;
    - a clear "wrong screen" is faster than a partly-working right one. Time at
      the gate is the thing being protected.

  Shown at <= 820px rather than 720px so the guard and the collapse rules do not
  describe different phones: 820px is inside the tablet band, so an iPad in
  portrait gets the notice while a laptop at 900px keeps the full console.
*/
.device-guard {
  display: none;
}

@media (max-width: 820px) {
  /*
    Hide the console itself in the same range that reveals the guard.

    This was originally written as a min-width: 821px rule, which is exactly
    backwards: it hid the console on every computer and left the phone showing
    an empty navbar above the message. Nothing about the markup caught it - the
    page still rendered, still ran every script, and just had no console in it.
    Guard and concealment belong in the same block, one above 820 and one below,
    so the two can never disagree about which one is visible.
  */
  body:has(.device-guard) > .navbar,
  body:has(.device-guard) > .container {
    display: none;
  }

  .device-guard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-6) var(--space-4);
    /* env() so it clears a notch when the page is opened on a phone, which is
       exactly the case this panel exists for. */
    padding-top: max(var(--space-6), env(safe-area-inset-top));
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    text-align: center;
    background: var(--color-bg);
    color: var(--color-text);
  }

  .device-guard__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    /* --color-card and --color-text-2, not --color-surface and
       --color-text-muted: those two names do not exist in the token set, and a
       var() with no fallback silently computes to nothing. */
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
  }

  .device-guard__icon .material-symbols-outlined {
    font-size: 38px;
  }

  .device-guard h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
  }

  .device-guard p {
    margin: 0;
    max-width: 34ch;
    /* 17px, not 16: this text has to be read at arm's length by someone who is
       holding a phone in one hand and queueing with the other. */
    font-size: 17px;
    line-height: var(--leading-body);
    color: var(--color-text-2);
  }

  .device-guard .btn {
    min-height: 48px;
    padding-inline: var(--space-5);
  }
}

/*
  Above 820px: the console is shown and the guard stays display:none, which is
  the default above. Nothing extra is needed here, and adding a rule to "show"
  the console would only create a second place for the two to disagree.
*/