/* ================================================================
   STD.TABS — Unified Tab System (2025 minimal)
   Shared across therapu.html, patient.html, portal.html

   One pattern for ALL tab bars platform-wide.
   New tabs MUST use std-tab classes — never inject custom tab styles.

   Usage:
     <div class="std-tab-bar">
       <button class="std-tab active">Label</button>
       <button class="std-tab">Label</button>
     </div>

   Variants:
     .std-tab-bar              — default pill tabs (sub-nav)
     .std-tab-bar--segment     — segmented control (view switcher, full-width)
     .std-tab-bar--underline   — underline style (C4-style)
   ================================================================ */

/* ── Tokens ── */
:root {
  --tab-active-bg:       var(--clarior-sage);
  --tab-active-color:    #fff;
  --tab-idle-bg:         transparent;
  --tab-idle-color:      var(--clarior-ink-3);
  --tab-idle-border:     #d6d3d0;
  --tab-hover-bg:        rgba(0,0,0,.04);
  --tab-hover-color:     #1c1917;
  /* Fourteen, not thirteen. These govern the page underneath them and
     were reading smaller than the body text they sit above, which is the
     wrong way round for a navigation control.
     (Isaac 2026-08-24: "make tabs in growth bigger. its relatively
     smaller than other pages".) */
  --tab-font:            14px;
  --tab-font-weight:     600;
  /* The underline variant used to hardcode its own padding, so it stayed
     small while the pills grew and the same control looked like two
     sizes on two screens. It reads these now, like everything else. */
  --tab-ul-px:           16px;
  --tab-ul-py:           9px;
  --tab-radius:          999px;
  --tab-px:              16px;
  --tab-py:              7px;
  /* A second row of tabs under a first: the same pill, one rank down.
     Size is what carries the rank, so these are the only numbers that
     differ. */
  --tab-sub-font:        12.5px;
  --tab-sub-px:          13px;
  --tab-sub-py:          5px;
  --tab-gap:             4px;
  --tab-transition:      background .15s ease, color .15s ease,
                         border-color .15s ease, box-shadow .15s ease;

  /* segment variant */
  --tab-seg-track-bg:    #ebe8e4;
  --tab-seg-track-radius: 10px;
  --tab-seg-pad:          3px;
  --tab-seg-active-bg:   #fff;
  --tab-seg-active-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  --tab-seg-active-color: #1c1917;
  --tab-seg-idle-color:  var(--clarior-ink-3);

  /* underline variant */
  --tab-ul-border:       2px solid var(--clarior-sage);
  --tab-ul-active-color: #1c1917;
  --tab-ul-idle-color:   var(--clarior-ink-3);
  --tab-ul-track-border: 1px solid var(--clarior-bg-deep);
}

/* ── Base bar ── */
.std-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tab-gap);
  align-items: center;
}

/* ── Base tab ── */
.std-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--tab-py) var(--tab-px);
  border-radius: var(--tab-radius);
  border: 1px solid var(--tab-idle-border);
  background: var(--tab-idle-bg);
  color: var(--tab-idle-color);
  font-size: var(--tab-font);
  font-weight: var(--tab-font-weight);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tab-transition);
  line-height: 1;
}

.std-tab:hover:not(.active):not(:disabled) {
  background: var(--tab-hover-bg);
  color: var(--tab-hover-color);
  border-color: #b5b0ab;
}

.std-tab.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-color);
  border-color: var(--tab-active-bg);
}

.std-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Badge inside tab ── */
.std-tab .std-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: rgba(255,255,255,.28);
  color: inherit;
}
.std-tab:not(.active) .std-tab-badge {
  background: var(--clarior-error);
  color: #fff;
}

/* ── Segment variant ── */
.std-tab-bar--segment {
  background: var(--tab-seg-track-bg);
  border-radius: var(--tab-seg-track-radius);
  padding: var(--tab-seg-pad);
  gap: 1px;
  flex-wrap: nowrap;
}

.std-tab-bar--segment .std-tab {
  flex: 1;
  justify-content: center;
  border: none;
  border-radius: calc(var(--tab-seg-track-radius) - var(--tab-seg-pad));
  background: none;
  color: var(--tab-seg-idle-color);
  transition: var(--tab-transition);
}

.std-tab-bar--segment .std-tab:hover:not(.active) {
  background: rgba(0,0,0,.05);
  color: var(--tab-seg-idle-color);
  border: none;
}

.std-tab-bar--segment .std-tab.active {
  background: var(--tab-seg-active-bg);
  color: var(--tab-seg-active-color);
  box-shadow: var(--tab-seg-active-shadow);
  border: none;
}

/* ── Underline variant ── */
.std-tab-bar--underline {
  gap: 0;
  border-bottom: var(--tab-ul-track-border);
}

.std-tab-bar--underline .std-tab {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: var(--tab-ul-py) var(--tab-ul-px);
  color: var(--tab-ul-idle-color);
  background: none;
  margin-bottom: -1px;
}

.std-tab-bar--underline .std-tab:hover:not(.active) {
  background: rgba(0,0,0,.03);
  color: var(--tab-ul-active-color);
  border-color: transparent;
}

.std-tab-bar--underline .std-tab.active {
  background: none;
  color: var(--tab-ul-active-color);
  border-bottom: var(--tab-ul-border);
}