/* =====================================================================
   Tabs.

   1. .section-bar — the page's sidebar group as tabs, attached under the
      topbar as the second row of the header. Rendered once by layout.html
      from utils/nav.py (partials/_section_tabs.html).

   2. .rpt-tabs-bar / .rpt-tab / .rpt-tab-panel — the folder-tab strip,
      now only for in-page switches that are NOT navigation: account
      settings, the admin dashboard, plans, the products modals.
   ===================================================================== */

/* ─── 1. Section bar ───────────────────────────────────────────────── */
.section-bar {
  /* Tabs that HANG from the topbar rather than a second header row: the
     row itself is see-through and adds no band across the page, and only
     the tabs are drawn. Stuck at the topbar's bottom edge (52px) so they
     stay attached while the page scrolls under them.

     Below the topbar (z 100), not above it: the bell and account menus
     drop down out of the topbar and must open over these tabs. The cost
     is that the topbar's hairline runs along the top of the current tab
     instead of vanishing into it — the tab hangs from the header's edge. */
  position: sticky;
  top: 52px;
  z-index: 99;
  pointer-events: none;   /* the empty stretch between tabs is not a wall */
}

.section-bar-inner {
  display: flex;
  /* Same inset as the topbar, so the first tab sits under the title. */
  padding: 0 var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.section-bar-inner::-webkit-scrollbar { display: none; }
/* More tabs than fit (a phone, the six-tab Stock group): fade the edge
   so it is plain the row continues. section-tabs.js sets the class. */
.section-bar.is-overflowing .section-bar-inner {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.section-bar.is-overflowing.at-end .section-bar-inner {
  -webkit-mask-image: none;
          mask-image: none;
}

.section-track {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
  pointer-events: auto;
}

/* The current tab is the topbar carried down and opened onto the page (see
   .active below); the topbar's rule is its top. The others hang beside it in the page
   colour, opaque so content scrolling underneath does not show through. */
.section-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-top: 0;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-body);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.section-tab i { font-size: var(--text-body); opacity: .75; }
.section-tab:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }
.section-tab:hover i { opacity: 1; }
.section-tab:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
/* The current tab wears the sidebar's "you are here" exactly (sidebar.css
   .nav-card.active): amber text in bold (--nav-active — deep amber on light,
   bright on dark, each chosen to stay readable), the accent amber on the
   icon, and a neutral tint on hover so hover never reads as selected. So
   the sidebar item and the tab for the page you are on look the same.
   The tab itself hangs from the header in the topbar's colour, with a
   hairline edge and a soft shadow, so it still reads as a tab. */
.section-tab.active {
  background: var(--surface);
  color: var(--nav-active);
  font-weight: 700;
  border-color: var(--border);
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.section-tab.active:hover { background: var(--surface-hover); color: var(--nav-active); }
.section-tab.active i { color: var(--accent); opacity: 1; }

/* Phones: the other tabs become icon buttons and only the current one
   keeps its name, so a six-tab group fits across the screen instead of
   scrolling. The label is hidden visually, not removed — screen readers
   still read it, and the title shows it on long-press. */
@media (max-width: 576px) {
  .section-bar-inner { padding: 0 var(--space-3); }
  .section-tab { padding: 0 var(--space-3); height: 34px; }
  .section-tab:not(.active) {
    min-width: 40px;
    justify-content: center;
    padding: 0;
  }
  .section-tab:not(.active) i { font-size: var(--text-row); }
  .section-tab:not(.active) .section-tab-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ─── 2. In-page folder tabs ───────────────────────────────────────── */
/* ─── Sticky bar that keeps the tab strip visible while scrolling.
       Folder-tab style: active tab has flat bottom corners and merges
       visually with a white panel that wraps the active tab content. */
.rpt-tabs-bar {
  position: sticky;
  top: 52px;
  z-index: 50;
  padding: var(--space-3) 0 0;
  margin-bottom: 0;
  background: var(--surface-sunken);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* The gray track of pills — only the top corners are rounded so the
   bottom edge sits flush against the white content panel below.        */
.rpt-tabs {
  /* The track is a recessed rail: inactive tabs sit IN it, the active one
     lifts OUT of it to the page colour.

     This is the only thing separating active from inactive, so it has to
     be a real step. At --surface-hover the two were 1.05 apart — the same
     colour to the eye. --border is 1.42, which reads clearly without the
     track becoming a dark band across the top of the page. */
  display: inline-flex;
  /* Wrap onto a second row instead of running off-screen. The strip used
     to scroll horizontally with a hidden scrollbar, which gave no visual
     hint that tabs existed past the edge. */
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--border);
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  padding: var(--space-1) var(--space-1) 0;
  overflow-x: visible;
  scrollbar-width: none;
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.rpt-tabs::-webkit-scrollbar { display: none; }

.rpt-tab {
  /* Worn by <button> as well as <a>: a tab that only switches a panel is a
     button, not a link, so it must not advertise a destination. The rule
     already zeroed border/background for that; a button additionally does
     not inherit the page font, hence font-family. */
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  /* Desktop size matches the 34px filter strip under it; at the old
     16px / 12px-20px the tabs out-weighed the page heading. */
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius-tile) var(--radius-tile) 0 0;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
.rpt-tab:hover { text-decoration: none; }
.rpt-tab i {
  font-size: var(--text-body);
  opacity: .8;
  transition: opacity .15s ease;
}
.rpt-tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.rpt-tab:hover i { opacity: 1; }

/* The active tab has to do two things that pull against each other:

     1. MERGE with the canvas below, so it reads as the top edge of the
        content rather than a button floating above it. That means sharing
        the canvas's fill.
     2. STAND OUT from the inactive tabs beside it.

   Fill alone cannot do both. Matching the canvas put the active tab at
   #f8fafc against a #f1f5f9 track — a contrast of 1.05, which is to say
   identical. So the fill keeps job 1 and an accent rail does job 2. */
.rpt-tab.active {
  background: var(--surface-sunken);
  color: var(--brand, var(--text));
  font-weight: 700;
  box-shadow: -1px -1px 3px rgba(15, 23, 42, 0.04);
}
.rpt-tab.active i { opacity: 1; }



/* ...and the tab strip lines up with the cards inside it.

   The strip sits flush against the container edge while the tray insets
   its cards by var(--space-5), so the first tab and the card below it
   started at different x positions — a small misalignment, but the tab is
   supposed to look like the top edge of the thing beneath it.

   Matching the tray's inset puts the two on the same line. Scoped to the
   tray case so untrayed tab strips keep sitting flush. */


@media (max-width: 600px) {

}
.rpt-tab:focus-visible {
  outline: 2px solid var(--brand, #0f172a);
  outline-offset: 1px;
}

/* The content panel — same white as the active tab, flat top so the
   tab visually flows into it, rounded bottom corners. The tab strip
   sits on top with z-index 2 so the active tab's bottom edge looks
   "glued" to this panel without any visible seam.                     */
/* Without a folder strip above it (every page whose tabs moved into the
   section bar) the panel is just the page: no tray, no inset. */
.rpt-tab-panel { display: block; }
.rpt-tabs-bar + .rpt-tab-panel {
  /* The PAGE surface, not a card surface. It used to be var(--surface) —
     the same colour as a card — which is why panels inside it had to be
     flattened to avoid a card-on-card look, and why tabbed pages ended up
     looking unlike every other page. As the page colour it needs no
     condition: cards sit on it as they sit on the page, bare content sits
     on it as bare content sits on the page, and the active tab above
     matches it with nothing kept in sync. */
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-btn) var(--radius-btn) var(--radius-btn);
  /* Vertical only. Horizontal padding here inset the cards from the
     container edge while the tab strip above stayed flush against it, so
     the two never lined up. Two rounds of padding the tab strip to
     compensate failed because the :has() that scoped them does not match
     on the pages whose tab strip comes from an include. Taking the inset
     out removes the need for the compensation and the selector: cards now
     start where the tab strip starts, and where cards start on a page with
     no tabs at all. */
  padding: var(--space-5) 0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  margin-bottom: var(--space-5);
  /* No `position: relative; z-index: N` here — it would form a stacking
     context and trap Bootstrap modals rendered inside (`#addCustomerModal`,
     `#addSupplierModal`, etc.) below the body-level `.modal-backdrop`. */
}


@media (max-width: 600px) {
  .rpt-tab { padding: var(--space-3) var(--space-4); font-size: var(--text-support); }
  .rpt-tabs-bar + .rpt-tab-panel { padding: var(--space-4) 0; }
}