/* ============================================================================
   REality — Base Components
   Geometry and states transcribed from the 11 Figma component sets.
   Depends on tokens.css.
   ========================================================================== */

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-body-md);
  letter-spacing: var(--ls-body-md);
  color: var(--color-fg);
  background: var(--color-bg-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(button, input, select, textarea) { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring-field); border-radius: var(--radius-md); }

/* ---- type helpers ---- */
.t-h1 { font: var(--text-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font: var(--text-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font: var(--text-h3); letter-spacing: var(--ls-h3); }
.t-kpi { font: var(--text-kpi); letter-spacing: var(--ls-kpi); font-variant-numeric: tabular-nums; }
.t-label { font: var(--text-label-md); letter-spacing: var(--ls-label-md); }
.t-body { font: var(--text-body-md); letter-spacing: var(--ls-body-md); }
.t-body-sm { font: var(--text-body-sm); color: var(--color-fg-secondary); }
.t-overline {
  font: var(--text-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--color-fg-muted);
}
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--color-fg-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ============================================================ BUTTONS */
.btn {
  --_bg: var(--color-primary); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-1); min-height: var(--tap); padding: 10px 14px;
  font: var(--text-label-md); letter-spacing: var(--ls-label-md);
  border: 1px solid var(--_bd); border-radius: var(--radius-xl);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: var(--icon-md); height: var(--icon-md); flex: none; }
.btn:focus-visible { box-shadow: var(--ring-primary); }

.btn--filled:hover  { --_bg: var(--color-primary-hover); }
.btn--filled:active { --_bg: var(--color-primary-active); }

.btn--stroke  { --_bg: #fff; --_fg: var(--color-fg); --_bd: var(--color-border); box-shadow: var(--shadow-xs); }
.btn--stroke:hover  { background: var(--color-bg-muted); }

.btn--lighter { --_bg: var(--color-primary-soft); --_fg: var(--color-primary); }
.btn--lighter:hover { --_bg: var(--color-primary-soft-alt); }

.btn--ghost   { --_bg: transparent; --_fg: var(--color-fg-secondary); }
.btn--ghost:hover { background: var(--color-bg-muted); }

.btn--link { --_bg: transparent; --_fg: var(--color-primary); --_bd: transparent; box-shadow: none; padding: 7px 8px; }
.btn--link:hover { background: transparent; text-decoration: underline; }

.btn:disabled, .btn[aria-disabled="true"] {
  --_bg: var(--color-bg-disabled); --_fg: var(--color-fg-disabled); --_bd: transparent;
  cursor: not-allowed; box-shadow: none; pointer-events: none;
}
.btn--sm { min-height: var(--control-h-sm); padding: 7px 12px; font: var(--text-label-sm); }
.btn--icon { padding: 0; width: var(--tap); height: var(--tap); }

/* ============================================================ BADGE */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font: var(--text-label-sm); background: var(--color-primary-soft); color: var(--color-primary);
}
.badge--neutral { background: var(--color-bg-muted); color: var(--color-fg-secondary); }
.badge--success { background: var(--color-success-bg); color: var(--color-success-fg); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.badge--error   { background: var(--color-error-bg); color: var(--color-error); }

/* trend pill (KPI deltas) */
.trend { display: inline-flex; align-items: center; gap: 2px; font: var(--text-label-sm); font-variant-numeric: tabular-nums; }
.trend--up { color: var(--color-trend-up); }
.trend--down { color: var(--color-trend-down); }

/* ============================================================ FIELD SHELL */
.field { display: block; margin-bottom: var(--space-4); }
.field__label {
  display: flex; align-items: center; gap: 4px; margin-bottom: 6px;
  font: var(--text-label-md); letter-spacing: var(--ls-label-md); color: var(--color-fg);
}
.field__label .req { color: var(--color-primary); }
.field__label .opt { color: var(--color-fg-muted); font: var(--text-body-sm); }
.field__hint { margin-top: 6px; font: var(--text-body-sm); color: var(--color-fg-muted); }
.field__hint--error { color: var(--color-error); }

/* ---- text input ---- */
.input {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--control-h-sm); padding: 8px 10px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  font: var(--text-body-md); color: var(--color-fg);
}
.input > input { border: 0; outline: 0; width: 100%; background: none; font: inherit; color: inherit; }
.input > input::placeholder { color: var(--color-fg-placeholder); }
.input:focus-within { border-color: var(--color-fg); box-shadow: var(--ring-field); }
.input--error { border-color: var(--color-error); }
.input--error:focus-within { box-shadow: var(--ring-error); }
.input .icon { width: var(--icon-md); height: var(--icon-md); color: var(--color-fg-muted); flex: none; }
.input__shortcut {
  flex: none; padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--color-bg-muted); color: var(--color-fg-muted); font: var(--text-label-xs);
}

/* ---- select (native trigger; JS-enhanced later) ---- */
.select {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--control-h-md); padding: 10px 10px 10px 12px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs); font: var(--text-body-md); color: var(--color-fg); cursor: pointer;
}
.select:focus-within { border-color: var(--color-fg); box-shadow: var(--ring-field); }
.select > select { appearance: none; border: 0; outline: 0; width: 100%; background: none; font: inherit; color: inherit; cursor: pointer; }
.select .chevron { width: var(--icon-md); height: var(--icon-md); color: var(--color-fg-muted); flex: none; }

/* ---- textarea ---- */
.textarea {
  width: 100%; min-height: 112px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-2xl);
  font: var(--text-body-md); color: var(--color-fg); resize: vertical;
}
.textarea:hover { background: var(--color-bg-muted); border-color: transparent; }
.textarea:focus { background: #fff; border-color: var(--color-fg); box-shadow: var(--ring-field); outline: none; }

/* ============================================================ CHECKBOX / RADIO */
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: var(--tap); font: var(--text-body-md); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 16px; height: 16px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--color-border-strong);
  display: grid; place-items: center; transition: background .12s, border-color .12s; flex: none;
}
.check .box::after {
  content: ""; width: 10px; height: 10px; transform: scale(0);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.2 2.3 4.8-5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .12s;
}
.check input:checked + .box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked + .box::after { transform: scale(1); }
.check input:indeterminate + .box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:indeterminate + .box::after {
  transform: scale(1); width: 8px; height: 1.5px; border-radius: 1px; background: #fff;
}
.check input:focus-visible + .box { box-shadow: var(--ring-primary); }
.check input:disabled + .box { background: var(--color-bg-disabled); border-color: var(--color-border); }

.radio .box { border-radius: var(--radius-full); }
.radio .box::after {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full);
  background: #fff; transform: scale(0); transition: transform .12s;
}
.radio input:checked + .box { background: var(--color-primary); border-color: var(--color-primary); }
.radio input:checked + .box::after { transform: scale(1); }

/* ============================================================ SWITCH */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: var(--tap); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 28px; height: 16px; border-radius: var(--radius-full);
  background: var(--color-border); position: relative; transition: background .16s; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-toggle);
  transition: transform .16s;
}
.switch input:checked + .track { background: var(--color-primary); }
.switch input:checked + .track::after { transform: translateX(12px); }
.switch input:focus-visible + .track { box-shadow: var(--ring-primary); }
.switch input:disabled + .track { background: #fff; border: 1px solid var(--color-border-strong); }

/* ============================================================ SEGMENTED CONTROL */
.segmented {
  display: inline-flex; gap: 4px; padding: 4px; background: var(--color-bg-muted);
  border-radius: var(--radius-xl); position: relative;
}
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  min-height: 28px; padding: 4px 12px; border-radius: var(--radius-md);
  font: var(--text-label-md); color: var(--color-fg-placeholder); cursor: pointer;
  transition: color .12s, background .12s, box-shadow .12s;
}
.segmented input:checked + label { background: #fff; color: var(--color-fg); box-shadow: var(--shadow-md); }
.segmented input:focus-visible + label { box-shadow: var(--ring-primary); }

/* ============================================================ PROGRESS BAR */
.progress { width: 100%; height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }

/* ============================================================ ALERT */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: var(--radius-2xl);
  background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
.alert .icon { width: var(--icon-md); height: var(--icon-md); flex: none; margin-top: 1px; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font: var(--text-strong-md); }
.alert__desc { margin-top: 2px; font: var(--text-body-sm); color: var(--color-fg-secondary); }
.alert__actions { display: flex; gap: 16px; margin-top: 10px; }
.alert__actions a { font: var(--text-label-md); }
.alert--error   .icon { color: var(--color-error); }
.alert--warning .icon { color: var(--color-warning); }
.alert--success .icon { color: var(--color-success); }
.alert--information .icon { color: var(--color-info); }
.alert--feature .icon { color: var(--color-feature); }

/* ---- toast notifications (built on .alert) — replaces window.alert for export/print limits ---- */
.rt-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1200; display: flex;
  flex-direction: column-reverse; gap: 12px; width: min(400px, calc(100vw - 40px)); pointer-events: none; }
.rt-toast { pointer-events: auto; animation: rt-toast-in .24s cubic-bezier(.16, 1, .3, 1); }
.rt-toast.is-leaving { animation: rt-toast-out .18s ease forwards; }
@keyframes rt-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rt-toast-out { to { opacity: 0; transform: translateX(16px); } }
.rt-toast .alert { position: relative; padding-right: 42px; border-left-width: 4px; }
.rt-toast .alert--error   { border-left-color: var(--color-error); }
.rt-toast .alert--warning { border-left-color: var(--color-warning); }
.rt-toast .alert--success { border-left-color: var(--color-success); }
.rt-toast__close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid;
  place-items: center; border: 0; background: none; border-radius: var(--radius-md);
  color: var(--color-fg-tertiary); cursor: pointer; }
.rt-toast__close:hover { background: var(--color-bg-muted); color: var(--color-fg-secondary); }
.rt-toast__close svg { width: 16px; height: 16px; }
/* loading toast: spinner in place of the severity icon */
.rt-toast .alert--loading { border-left-color: var(--color-primary); }
.rt-spinner { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary);
  animation: rt-spin .7s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
/* Export/Print toolbar buttons while a download is in flight (prevents spam-clicks) */
[data-report-export].is-busy, [data-report-print].is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 560px) { .rt-toasts { left: 20px; right: 20px; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .rt-toast, .rt-toast.is-leaving { animation-duration: .01ms; }
  .rt-spinner { animation-duration: 1.4s; }
}

/* ============================================================ PAGINATION
   Figma: one bordered card — "Page X of Y" left, a connected/segmented page group
   centred, "Show: N" right. Active page = light-grey fill; arrows dim at the ends. */
.pagination {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xs); padding: 14px 16px;
}
.pg-info { flex: 0 0 auto; font: var(--text-body-md); color: var(--color-fg-secondary); }
.pg-pages { flex: 1 1 100%; order: 3; display: flex; justify-content: center; gap: 0; }
.pg-pages a, .pg-pages .pg-gap {
  min-width: 40px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center;
  font: var(--text-label-md); letter-spacing: var(--ls-label-md); color: var(--color-fg-secondary);
  border: 1px solid var(--color-border); border-left-width: 0; background: #fff;
}
.pg-pages > :first-child { border-left-width: 1px; border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.pg-pages > :last-child { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.pg-pages a:hover { background: var(--color-bg-muted); text-decoration: none; }
.pg-pages a[aria-current="page"] { background: var(--color-bg-muted); color: var(--color-fg); font-weight: 600; }
.pg-pages a.pg-arrow.is-off { color: var(--color-fg-disabled); pointer-events: none; }
.pg-show { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; font: var(--text-body-md); color: var(--color-fg-secondary); }
.select--sm { width: auto; min-height: 32px; padding: 4px 8px 4px 10px; border-radius: var(--radius-lg); gap: 4px; }
.select--sm > select { min-width: 30px; }
@media (min-width: 1024px) {
  .pg-pages { flex: 1 1 auto; order: 0; }
}