/* ============================================================
   URBINO · TABS
   Molecule. Section switcher. Two layout variants share one
   anatomy:
     default (underline) — manager detail-view, settings sections
     .u-tabs--pill       — citizen profile sections, dense filter
     .u-tabs--enclosed   — file-folder feel (rare; rendering preview)

   Composition:
     .u-tabs
       ├─ .u-tabs__list (role="tablist")
       │    └─ .u-tabs__tab (role="tab")   × N
       └─ .u-tabs__panel (role="tabpanel") × N
   ============================================================ */


/* ============================================================
   WRAPPER
   ============================================================ */

.u-tabs {
  font-family: var(--u-font-sans);
  color: var(--u-fg-1);
}


/* ============================================================
   TAB LIST — the row of tabs
   ============================================================ */

.u-tabs__list {
  display: flex;
  gap: var(--u-tab-list-gap);
  border-bottom: var(--u-tab-list-border-w) solid var(--u-tab-list-border-color);
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.u-tabs__list::-webkit-scrollbar { height: 4px; }
.u-tabs__list::-webkit-scrollbar-thumb { background: var(--u-slate-200); border-radius: var(--u-radius-pill); }


/* ============================================================
   THE TAB — the trigger
   ============================================================ */

.u-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-tab-gap);
  height: var(--u-tab-h-md);
  padding: 0 var(--u-tab-px-md);
  background: transparent;
  border: 0;
  border-bottom: var(--u-tab-indicator-w) solid transparent;
  margin-bottom: calc(var(--u-tab-list-border-w) * -1);  /* overlap the list border */
  font-family: var(--u-font-sans);
  font-size: var(--u-tab-font-size-md);
  font-weight: var(--u-tab-font-weight);
  color: var(--u-tab-color);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--u-dur-fast) var(--u-ease-out),
    border-color var(--u-dur-fast) var(--u-ease-out),
    background var(--u-dur-fast) var(--u-ease-out);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.u-tabs__tab:hover {
  color: var(--u-tab-color-hover);
  background: var(--u-tab-bg-hover);
}
.u-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--u-focus-ring);
  border-radius: var(--u-radius-xs);
}

/* Active — underline (default variant) */
.u-tabs__tab[aria-selected="true"],
.u-tabs__tab.is-active {
  color: var(--u-tab-color-active);
  border-bottom-color: var(--u-tab-color-active);
  font-weight: var(--u-tab-font-weight-active);
  background: var(--u-tab-bg-active);
}

/* Disabled */
.u-tabs__tab[disabled],
.u-tabs__tab.is-disabled {
  color: var(--u-fg-4);
  cursor: not-allowed;
  pointer-events: none;
}

/* Icons */
.u-tabs__tab img,
.u-tabs__tab svg {
  width: var(--u-tab-icon-size-md);
  height: var(--u-tab-icon-size-md);
  flex-shrink: 0;
  display: block;
}

/* Count chip embedded in a tab */
.u-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--u-radius-pill);
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.u-tabs__tab[aria-selected="true"] .u-tabs__count,
.u-tabs__tab.is-active .u-tabs__count {
  background: var(--u-primary-soft);
  color: var(--u-primary-press);
}


/* ============================================================
   SIZES
   ============================================================ */

.u-tabs--sm .u-tabs__tab {
  height: var(--u-tab-h-sm);
  padding: 0 var(--u-tab-px-sm);
  font-size: var(--u-tab-font-size-sm);
}
.u-tabs--sm .u-tabs__tab img,
.u-tabs--sm .u-tabs__tab svg {
  width: var(--u-tab-icon-size-sm);
  height: var(--u-tab-icon-size-sm);
}
.u-tabs--lg .u-tabs__tab {
  height: var(--u-tab-h-lg);
  padding: 0 var(--u-tab-px-lg);
  font-size: var(--u-tab-font-size-lg);
}
.u-tabs--lg .u-tabs__tab img,
.u-tabs--lg .u-tabs__tab svg {
  width: var(--u-tab-icon-size-lg);
  height: var(--u-tab-icon-size-lg);
}


/* ============================================================
   WORLD SHORTCUTS
   ============================================================ */

.u-tabs--mgr {
  /* :root defaults */
}

.u-tabs--cit {
  --u-tab-h-sm:               40px;
  --u-tab-h-md:               48px;
  --u-tab-h-lg:               56px;
  --u-tab-px-md:              var(--u-space-4);
  --u-tab-px-lg:              var(--u-space-5);
  --u-tab-font-size-md:       16px;
  --u-tab-font-size-lg:       17px;
  --u-tab-font-weight-active: 700;
  --u-tab-icon-size-md:       20px;
  --u-tab-icon-size-lg:       22px;
}


/* ============================================================
   VARIANT — PILL
   Active state becomes a soft pill background, no underline.
   Used in citizen profile sections, dense filter rows.
   ============================================================ */

.u-tabs--pill .u-tabs__list {
  border-bottom: 0;
  gap: var(--u-space-1);
  padding: var(--u-space-1);
  background: var(--u-surface-sunk);
  border-radius: var(--u-radius-md);
  overflow-x: visible;
}
.u-tabs--pill .u-tabs__tab {
  border-bottom: 0;
  border-radius: var(--u-tab-pill-radius);
  margin-bottom: 0;
}
.u-tabs--pill .u-tabs__tab:hover {
  background: var(--u-surface);
}
.u-tabs--pill .u-tabs__tab[aria-selected="true"],
.u-tabs--pill .u-tabs__tab.is-active {
  background: var(--u-surface);
  color: var(--u-fg-1);
  border-bottom: 0;
  box-shadow: var(--u-shadow-xs);
}

/* Pill segmented — equal-width buttons in a single row */
.u-tabs--pill.u-tabs--segmented .u-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }


/* ============================================================
   VARIANT — ENCLOSED (file-folder style, rare)
   Active tab connects to the panel below.
   ============================================================ */

.u-tabs--enclosed .u-tabs__list { gap: var(--u-space-1); }
.u-tabs--enclosed .u-tabs__tab {
  border: var(--u-border-w-hairline) solid transparent;
  border-bottom: 0;
  border-radius: var(--u-radius-sm) var(--u-radius-sm) 0 0;
  margin-bottom: calc(var(--u-tab-list-border-w) * -1);
  background: transparent;
}
.u-tabs--enclosed .u-tabs__tab:hover { background: var(--u-surface-alt); }
.u-tabs--enclosed .u-tabs__tab[aria-selected="true"],
.u-tabs--enclosed .u-tabs__tab.is-active {
  background: var(--u-surface);
  border-color: var(--u-tab-list-border-color);
  color: var(--u-fg-1);
  font-weight: var(--u-tab-font-weight-active);
}


/* ============================================================
   PANELS
   ============================================================ */

.u-tabs__panel {
  padding: var(--u-space-4) 0;
  outline: none;
}
.u-tabs__panel[hidden] { display: none; }
.u-tabs--cit .u-tabs__panel { padding: var(--u-space-5) 0; }


/* ============================================================
   ALIGNMENT MODIFIERS
   ============================================================ */

.u-tabs--center .u-tabs__list { justify-content: center; }
.u-tabs--end    .u-tabs__list { justify-content: flex-end; }
.u-tabs--fill   .u-tabs__list .u-tabs__tab { flex: 1; }