/* ─── Components ──────────────────────────────────────────────────────────
   All component styles, mobile-first. Components only reference tokens.
   ────────────────────────────────────────────────────────────────────── */

/* ─── Header ─────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background-color: var(--bg-canvas);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding-inline: var(--space-4);
  gap: var(--space-3);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  text-decoration: none;
}

.header__brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.header__brand-logo {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.header__brand-logo path {
  fill: var(--accent-primary);
}

[data-theme="dark"] .header__brand-logo path {
  fill: var(--bg-surface);
}

@media (min-width: 768px) {
  .header {
    padding-inline: var(--space-6);
  }
}

/* ─── Icon button (theme switcher, menu, etc.) ───────────────────────── */
.icon-button {
  width: 2.75rem;       /* 44px tap target */
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

.icon-button:hover {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

[data-theme="dark"] .icon-button:hover {
  background-color: var(--bg-elevated);
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Small variant used inline (e.g., table row expanders). Smaller tap target
   is acceptable here because it's adjacent to the row's clickable label. */
.icon-button--sm {
  width: 1.75rem;
  height: 1.75rem;
}

.icon-button--sm svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--motion-fast) var(--ease-out);
}

.icon-button.is-open svg {
  transform: rotate(90deg);
  color: var(--accent-expressive);
}

/* ─── Perspective switcher ──────────────────────────────────────────── */

/* Team picker — a first-class card (title + subtitle like the KPI cards),
   the app's underline tabs, and people as selectable surface tiles. Same
   vocabulary as the rest of the dashboard, not bolted on. */
.persp {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.persp .card__header { margin-bottom: 0; }
.persp__title-icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-inline-end: var(--space-2);
  color: var(--text-muted);
  vertical-align: -2px;
}

/* Count badge sitting inside a level tab. */
.persp__count {
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background-color: var(--bg-surface);
  border-radius: var(--radius-full);
}
.tabs__tab.is-active .persp__count { color: var(--accent-expressive); }

.persp__people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.persp__chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 10rem;
  flex: 1 1 10rem;
  max-width: 16rem;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.persp__chip:hover {
  border-color: var(--accent-expressive);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(9, 28, 58, 0.10);
}
.persp__chip:focus-visible {
  outline: 2px solid var(--accent-expressive);
  outline-offset: 2px;
}
.persp__chip__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ─── Drill-down rows ───────────────────────────────────────────────── */

.kpi-row__label-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.kpi-row__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.kpi-row__chevron svg {
  width: 1rem;
  height: 1rem;
}

.kpi-row__bullet {
  color: var(--text-muted);
  display: inline-flex;
  width: 1.25rem;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-row__bullet--invisible {
  visibility: hidden;
}

.kpi-row__total {
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
}

.kpi-row__name {
  font-weight: var(--weight-medium);
}

.kpi-row__muted {
  color: var(--text-muted);
  font-style: italic;
}

/* Expandable row — entire row is the click target */
tr.kpi-row.is-expandable {
  cursor: pointer;
}

tr.kpi-row.is-expandable:hover {
  background-color: var(--bg-surface);
}

tr.kpi-row.is-expandable:hover .kpi-row__chevron {
  color: var(--accent-expressive);
}

tr.kpi-row.is-open .kpi-row__chevron {
  transform: rotate(90deg);
  color: var(--accent-expressive);
}

tr.kpi-row.is-open {
  background-color: var(--bg-surface);
}

/* Total row — bold and subtly highlighted */
.table tr.is-bold td {
  background-color: var(--bg-surface);
  font-weight: var(--weight-bold);
}

/* ─── Theme switcher specifics ──────────────────────────────────────── */
.theme-switcher .icon-sun  { display: none; }
.theme-switcher .icon-moon { display: block; }

[data-theme="dark"] .theme-switcher .icon-sun  { display: block; }
[data-theme="dark"] .theme-switcher .icon-moon { display: none; }

/* ─── Button ─────────────────────────────────────────────────────────── */
.button {
  /* Mobile default: full-width inside parent */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;        /* 44px tap target */
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

/* Auto-width from sm up */
@media (min-width: 640px) {
  .button { width: auto; }
}

.button--primary {
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

.button--primary:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
}

.button--secondary {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.button--secondary:hover:not(:disabled) {
  border-color: var(--accent-expressive);
  color: var(--accent-expressive);
}

.button--ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.button--ghost:hover:not(:disabled) {
  color: var(--accent-expressive);
}

.button--danger {
  background-color: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

.button--danger:hover:not(:disabled) {
  background-color: var(--danger);
  color: var(--text-on-accent);
}

.button--sm {
  min-height: 2.25rem;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}

/* ─── Card ───────────────────────────────────────────────────────────── */
.card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .card { padding: var(--space-6); }
}

.card--surface {
  background-color: var(--bg-surface);
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.card__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ─── Metric card ───────────────────────────────────────────────────── */
.metric {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

@media (min-width: 768px) {
  .metric { padding: var(--space-5); }
}

/* Compact metric strip — all summary cards clumped, denser, no section labels */
.grid.metric-strip {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .grid.metric-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}
.metric-strip .metric {
  padding: var(--space-3);
  gap: var(--space-1);
}
@media (min-width: 768px) {
  .metric-strip .metric { padding: var(--space-4); }
}
.metric-strip .metric__value { font-size: var(--text-xl); }

/* Compensation grid — top row: current sales / current bonus / next sales /
   next bonus. Bottom row: Total curent and Potențial, each spanning half.
   Left half = "current", right half = "next/potential". Stacks 2-up on
   mobile (sales+bonus pairs, then each total full width). */
.metric-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .metric-quad { grid-template-columns: repeat(4, 1fr); }
}
.metric-quad__wide { grid-column: span 2; }
.metric-quad__wide .metric { height: 100%; }
.metric-quad .metric {
  padding: var(--space-3);
  gap: var(--space-1);
}
@media (min-width: 768px) {
  .metric-quad .metric { padding: var(--space-4); }
}
.metric-quad .metric__value { font-size: var(--text-xl); }

.metric__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.metric__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.metric__value--accent {
  color: var(--accent-expressive);
}

.metric__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.metric__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.metric__delta--up    { color: var(--success); }
.metric__delta--down  { color: var(--danger); }
.metric__delta--flat  { color: var(--text-muted); }

/* Progress bar inside metric */
.metric__progress {
  height: 6px;
  background-color: var(--chart-track);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}

.metric__progress-fill {
  height: 100%;
  background-color: var(--accent-expressive);
  border-radius: var(--radius-full);
  transition: width var(--motion-slow) var(--ease-out);
}

.metric__progress-fill--success { background-color: var(--success); }
.metric__progress-fill--danger  { background-color: var(--danger); }

/* ─── Table ─────────────────────────────────────────────────────────── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-elevated);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.table th {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

[data-theme="dark"] .table th {
  background-color: var(--bg-surface);
}

.table td.numeric,
.table th.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Admin record list: full-width 2-line rows, click to drill into the
   editor (same pattern as Praguri bonus). No table, no horizontal scroll. */
.aplist {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.aplist__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* Row itself is not clickable — the .menu-btn on the right is the action. */
}
.aplist__row-content {
  flex: 1 1 auto;
  min-width: 0;          /* let row 2 overflow-wrap inside flex children */
}
/* ─── Generic kebab action button (used on every admin list row) ──────── */
.menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.menu-btn:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* ─── Soft table modifier (used for the Praguri bands view) ──────────── */
/* The base .table is dense by design (used for KPI/dashboard grids).
   This modifier lightens it so admin views feel cohesive with .aplist rows:
   no tint on header, eyebrow-style header text, more vertical padding,
   subtle row hover. Numeric column scanning + sortable headers preserved. */
.table--soft th {
  background-color: transparent;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
[data-theme="dark"] .table--soft th { background-color: transparent; }
.table--soft td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.table--soft tbody tr {
  transition: background-color var(--motion-fast) var(--ease-out);
}
.table--soft tbody tr:hover { background-color: var(--bg-surface); }
.table--soft tbody tr:last-child td { border-bottom: none; }

/* ─── Batch selection (checkbox + action bar above the list) ─────────── */
.aplist__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  padding-top: 2px;
  cursor: pointer;
}
.aplist__check input,
.batch-check input { cursor: pointer; width: 1rem; height: 1rem; }
.batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.batch-bar__count { font-weight: var(--weight-bold); }
.batch-bar__actions { display: flex; gap: var(--space-2); align-items: center; }
/* Loud variant for destructive contexts (targets/params lists). */
.batch-bar--danger {
  background-color: rgba(220, 38, 38, 0.06);
  border-color: var(--accent-danger, #dc2626);
  color: var(--accent-danger, #dc2626);
}
/* Row 1 — identity (anluna · KPI · zonă · rută · merch) + target right.
   Bold, brand-display, primary. Wraps gracefully if the values are wide. */
.aplist__r1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.aplist__r1-id {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  min-width: 0;
}
.aplist__r1-id .sep { opacity: 0.45; }
.aplist__target {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Multiple targets stacked right (CA + Greutate on the CA/Greutate list). */
.aplist__targets {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}
.aplist__targets .aplist__target { display: inline-flex; align-items: baseline; gap: 4px; }
.aplist__targets .aplist__lbl { margin-right: 0; }
/* Row 2 — client + address. CAN BE REALLY LONG: wrap freely, break long
   tokens (addresses without spaces) anywhere so it never blows out width. */
.aplist__r2 {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.aplist__r2 b { font-weight: 600; color: var(--text-primary); }
/* Row 3 — product code + name. Compact, muted. */
.aplist__r3 {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.aplist__r3 b { font-weight: 600; color: var(--text-secondary); }
.aplist__lbl { color: var(--text-muted); margin-right: 4px; }
.aplist__sep { color: var(--text-muted); opacity: 0.5; margin: 0 var(--space-2); }

/* ─── Search-select widget (drop-in for <select> with built-in search) ─ */
.ss { position: relative; display: block; }
.ss__trigger {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  transition: border-color var(--motion-fast) var(--ease-out);
}
[data-theme="dark"] .ss__trigger { background-color: var(--bg-surface); }
.ss__trigger:hover { border-color: var(--border-strong); }
.ss__trigger:focus,
.ss__trigger[aria-expanded="true"] {
  border-color: var(--accent-expressive);
  outline: none;
}
.ss__trigger:disabled {
  opacity: 0.45;
  background-color: var(--bg-surface);
  cursor: not-allowed;
}
.ss__triggerLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss__triggerLabel--placeholder { color: var(--text-muted); }
.ss__caret { flex: 0 0 auto; opacity: 0.6; font-size: var(--text-xs); }
.ss__popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 20rem;
}
[data-theme="dark"] .ss__popover {
  background-color: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ss__search { flex: 0 0 auto; }
.ss__list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ss__item {
  /* Don't shrink under the parent flex column's overflow — without this,
     a long list gets squeezed vertically instead of scrolling. */
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.ss__item:hover,
.ss__item.is-highlighted { background-color: var(--bg-surface); }
.ss__item.is-selected { font-weight: var(--weight-bold); }
.ss__item--empty {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}
.ss__item--empty:hover { background-color: transparent; }

/* ─── Month/year picker (anluna) ──────────────────────────────────────── */
.myp { position: relative; display: block; }
.myp__trigger {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  transition: border-color var(--motion-fast) var(--ease-out);
}
[data-theme="dark"] .myp__trigger { background-color: var(--bg-surface); }
.myp__trigger:hover { border-color: var(--border-strong); }
.myp__trigger:focus,
.myp__trigger[aria-expanded="true"] {
  border-color: var(--accent-expressive);
  outline: none;
}
.myp__trigger:disabled {
  opacity: 0.45;
  background-color: var(--bg-surface);
  cursor: not-allowed;
}
.myp__triggerLabel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myp__triggerLabel--placeholder { color: var(--text-muted); }
.myp__caret { flex: 0 0 auto; opacity: 0.6; font-size: var(--text-base); }
.myp__popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 18rem;
  background-color: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
[data-theme="dark"] .myp__popover {
  background-color: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.myp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.myp__navBtn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1;
}
.myp__navBtn:hover { background-color: var(--bg-surface); }
.myp__yearLabel {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
.myp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.myp__month {
  padding: var(--space-2) var(--space-1);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--text-sm);
  min-height: 2.25rem;
}
.myp__month:hover { background-color: var(--bg-surface); }
.myp__month.is-selected {
  background-color: var(--accent-expressive);
  color: var(--bg-canvas);
  border-color: var(--accent-expressive);
}
.myp__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}
.myp__footerBtn {
  background: none;
  border: none;
  color: var(--accent-expressive);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}
.myp__footerBtn:hover { text-decoration: underline; }

/* ─── Required-field invalid state (red border + red label) ──────────── */
/* Applied to the wrapping .field by the validateRequired helper when a
   required input is empty on submit. Removed on the next valid edit. */
.field--invalid > .field__input,
.field--invalid > .field__select,
.field--invalid > .field__textarea,
.field--invalid .field__input,
.field--invalid .field__select,
.field--invalid .field__textarea,
.field--invalid .ss__trigger,
.field--invalid .myp__trigger {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.field--invalid .field__input:focus,
.field--invalid .field__select:focus,
.field--invalid .field__textarea:focus,
.field--invalid .ss__trigger:focus,
.field--invalid .ss__trigger[aria-expanded="true"],
.field--invalid .myp__trigger:focus,
.field--invalid .myp__trigger[aria-expanded="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
  outline: none;
}
.field--invalid .field__label { color: var(--danger); }

/* Admin add/edit form: full-size fields in a grid that WRAPS to fit the
   container — no horizontal scroll, no cramped inputs. */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.admin-form-grid .field__input,
.admin-form-grid .field__select {
  width: 100%;
  box-sizing: border-box;
}

.table tbody tr {
  transition: background-color var(--motion-fast) var(--ease-out);
}

.table tbody tr:hover {
  background-color: var(--bg-surface);
}

/* Row that's expanded (showing details) */
.table tbody tr.is-expanded {
  background-color: var(--bg-surface);
}

.table__expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  margin-right: var(--space-2);
  transition: transform var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.table tbody tr.is-expanded .table__expander {
  transform: rotate(90deg);
  color: var(--accent-expressive);
}

.table__detail {
  background-color: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ─── Tabs ──────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs__tab {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tabs__tab:hover:not(.is-active) {
  color: var(--text-primary);
}

.tabs__tab.is-active {
  color: var(--accent-expressive);
  border-bottom-color: var(--accent-expressive);
}

/* ─── Form field ────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--motion-fast) var(--ease-out);
}

[data-theme="dark"] .field__input,
[data-theme="dark"] .field__select,
[data-theme="dark"] .field__textarea {
  background-color: var(--bg-surface);
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: var(--border-strong);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--accent-expressive);
  outline: none;
}

.field__input:disabled,
.field__select:disabled,
.field__textarea:disabled {
  opacity: 0.45;
  background-color: var(--bg-surface);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--danger);
}

/* ─── Badge / chip ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge--accent  { background-color: var(--accent-expressive); color: var(--text-on-accent); border-color: transparent; }
.badge--success { background-color: var(--success); color: #fff; border-color: transparent; }
.badge--danger  { background-color: var(--danger);  color: #fff; border-color: transparent; }
.badge--muted   { color: var(--text-muted); }

/* ─── Avatar (initials, no images) ──────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: var(--accent-primary);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  flex-shrink: 0;
}

[data-theme="dark"] .avatar {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.avatar--lg {
  width: 3rem;
  height: 3rem;
  font-size: var(--text-sm);
}

/* ─── Mobile bottom nav (replaces desktop sidebar at sm and below) ──── */
.bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  background-color: var(--bg-canvas);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-1);
  padding-bottom: max(var(--space-1), env(safe-area-inset-bottom));
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  min-height: 2.75rem;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: none;
  border: none;
}

.bottom-nav__item svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bottom-nav__item.is-active {
  color: var(--accent-expressive);
}

@media (min-width: 1024px) {
  .bottom-nav { display: none; }
}

/* When bottom nav is visible, push main content above it */
@media (max-width: 1023px) {
  .main {
    padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
  }
}

/* ─── Empty state ───────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-muted);
}

.empty__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-4);
  color: var(--text-muted);
  opacity: 0.6;
}

.empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.empty__hint {
  font-size: var(--text-sm);
  max-width: 28rem;
  margin: 0 auto;
}

/* ─── Skeleton (loading) ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    var(--border-subtle) 50%,
    var(--bg-surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--text { height: 1em; width: 100%; }
.skeleton--metric { height: 6rem; width: 100%; }

/* ─── Toast (transient messages) ────────────────────────────────────── */
.toast-container {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  width: calc(100% - var(--space-8));
  max-width: 24rem;
}

.toast {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  animation: toast-in var(--motion-base) var(--ease-out);
}

.toast--success { border-left: 3px solid var(--success); }
.toast--danger  { border-left: 3px solid var(--danger); }
.toast--info    { border-left: 3px solid var(--accent-expressive); }

@keyframes toast-in {
  from { transform: translateY(0.5rem); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ─── Identity card (logged-in user header on dashboard) ───────────── */
.identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .identity {
    padding: var(--space-5) var(--space-6);
  }
}

.identity__name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.identity__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.identity__role {
  display: inline-block;
}

/* ─── Section header ────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.section-header__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ─── Loading overlay (full-page) ──────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--bg-canvas);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 1;
  transition: opacity var(--motion-base) var(--ease-out);
}

.loading-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-expressive);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }

/* ─── Error banner ──────────────────────────────────────────────────── */
.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1px solid;
}

.banner--danger {
  background-color: rgba(220, 38, 38, 0.08);
  border-color: var(--danger);
  color: var(--danger);
}

.banner--info {
  background-color: rgba(2, 132, 199, 0.08);
  border-color: var(--accent-expressive);
  color: var(--accent-expressive);
}

/* ─── Daily report banner ───────────────────────────────────────────── */
.report {
  position: relative;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.report__date {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.report__message {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed, 1.6);
}
.report__message::before,
.report__message::after {
  content: '"';
  position: absolute;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.45;
}
.report__message::before { left: -0.5rem;  top: -1rem; }
.report__message::after  { right: -0.5rem; bottom: -1.75rem; }

/* ─── AI assistant chat ─────────────────────────────────────────────── */
.chat {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-6);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
/* Clear the mobile bottom nav (visible below 1024px). */
@media (max-width: 1023px) {
  .chat { bottom: calc(var(--space-16) + env(safe-area-inset-bottom) + var(--space-3)); }
}

.chat__fab {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  transition: transform var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.chat__fab:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.chat__fab svg { width: 1.5rem; height: 1.5rem; }

.chat__panel {
  width: min(22rem, calc(100vw - 2 * var(--space-4)));
  height: min(28rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.chat__panel[hidden] { display: none; }

.chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
.chat__close {
  display: inline-flex;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
}
.chat__close:hover { color: var(--text-primary); }
.chat__close svg { width: 1.1rem; height: 1.1rem; }

.chat__messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.chat__msg {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat__msg--ai {
  align-self: flex-start;
  background-color: var(--bg-surface);
  color: var(--text-primary);
}
.chat__msg--user {
  align-self: flex-end;
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.chat__msg--typing { opacity: 0.6; letter-spacing: 0.15em; }

.chat__inputbar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.chat__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.chat__input:focus-visible {
  outline: 2px solid var(--accent-expressive);
  outline-offset: -1px;
}
.chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  flex-shrink: 0;
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.chat__send:hover {
  background-color: var(--bg-surface);
  border-color: var(--text-primary);
}
.chat__send svg { width: 1.1rem; height: 1.1rem; }