/* THE TAB STRIP
   =============
   One definition of the underlined tab strip that Records, the Entry forms
   and the Admin Panel all render.

   WHAT THIS REPLACES (v2.8.0)
   ---------------------------
   `partials/_tab_nav.html` has emitted ONE markup shape for all three pages
   since v1.19.0 — the same `.tab-container`, the same `.tab-btn`, the same
   `.tab-content` — and all three pages then styled it themselves, in their
   own `{% block extra_style %}`, differently:

     admin.html       margin-bottom 25px, gap 20px, overflow-x auto,
                      no icon gap on the button
     records.html     margin-top 1.5rem, margin-bottom 25px, gap 20px,
                      flex-wrap, 8px icon gap
     entry_form.html  margin-bottom var(--space-5), gap var(--space-4),
                      flex-wrap, 8px icon gap, token padding

   Three copies of one component is three places to fix a bug and two places
   to forget. It also cost four separate `@keyframes fadeIn` declarations —
   admin.html declared it TWICE in the same file — for one 0.3s fade.

   The values below are the token-based ones from entry_form.html, which were
   the only set already written against the spacing scale. `flex-wrap: wrap`
   wins over admin's `overflow-x: auto` for the reason partials/_tab_nav.html
   gives at length: a horizontally scrolling strip hides its last option
   behind a gesture most people never discover, and on Records that option is
   Maintenance, which is opened daily. (Below 768px layout/mobile.css hides
   the strip entirely and shows the native <select> instead.)
   ================================================================== */

.tab-container {
    display: flex;
    flex-wrap: wrap;
    /* --space-3 (16px), not --space-4. The three copies this replaces used
       20px, 20px and 24px, and 24px was the widest of them: adopting it
       pushed the sixth tab on Records ("Maintenance") onto a second row at
       1440px. 16px is narrower than all three originals, so nothing that fit
       before this file existed can wrap because of it. */
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: 2px solid var(--card-border);
}

/* Not a .btn. This is a tab: no fill, no border, no radius, and its selected
   state is an underline rather than a background — which is why it is in
   this file and not in components/buttons.css. */
.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 8/16, with the height coming from min-height below. The originals were
       12px/20px, 12px/20px and 16px/24px; this is the narrowest, for the
       reason given on `gap` above. */
    padding: var(--space-2) var(--space-3);
    /* The WCAG 2.5.8 touch minimum. These are operated on a tablet on a
       factory floor. */
    min-height: 48px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    /* No `transition:` shorthand here. components/motion.css declares the
       shared list for every tappable element and is loaded after this file;
       a shorthand here would be replaced by it anyway, and the three copies
       this replaces each carried their own `transition: all 0.2s`, which is
       both slower than the app's --dur-fast and animates layout properties. */
}

.tab-btn:hover { color: var(--text-main); }

.tab-btn.active {
    color: var(--brand-ink);
    border-bottom-color: var(--brand);
}

/* The ring is the only affordance a keyboard user has, and this app is
   driven from a keyboard at the weighbridge desk. None of the three copies
   this replaces had one. */
.tab-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.tab-content { display: none; }
.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Declared ONCE. It was written out four times across three templates.
   Shortened to nothing under reduced motion rather than removed, so that
   `animationend` still fires and anything listening for it still cleans up —
   the rule components/motion.css sets for the whole app. */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tab-content.active { animation-duration: 0.01ms; }
}