/* ============================================================
   Tract Design System — Components
   Pair with colors_and_type.css (tokens). Link order:
     1) colors_and_type.css   ← tokens (colors, type, spacing, radii)
     2) components.css         ← this file (component classes)
   All classes consume tokens; no hard-coded colors except where a
   token doesn't exist. Single font family: Roboto. Sentence case
   everywhere. No box-shadow on cards/tiles. Pill buttons.
   ============================================================ */

/* ============================================================
   BUTTONS  —  .btn + modifiers
   Text weight 500 (medium). Pill radius. Sentence-case labels.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--tract-yellow-500); color: var(--tract-teal-800); }
.btn--primary:hover { background: var(--tract-yellow-700); }
.btn--primary:focus-visible { outline: none; box-shadow: var(--shadow-focus-yellow); }

.btn--secondary { background: var(--white); color: var(--tract-teal-700); border-color: var(--gray-200); }
.btn--secondary:hover { background: var(--gray-100); }
.btn--secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus-teal); }

.btn--tertiary { background: transparent; color: var(--tract-teal-700); border: none; }
.btn--tertiary:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn--destructive { background: var(--error-600); color: var(--white); }
.btn--destructive:hover { background: var(--error-700); }

/* Ghost / icon button — used for topbar utilities (bell, overflow). */
.btn--ghost { background: var(--gray-100); color: var(--gray-700); border: none; }
.btn--ghost:hover { background: var(--gray-200); }
.btn--icon { padding: 8px; width: 36px; height: 36px; }
.btn--icon svg { width: 18px; height: 18px; }

.btn--sm { padding: 6px 12px; font-size: var(--text-xs); line-height: var(--lh-xs); }
.btn--lg { padding: 10px 20px; font-size: var(--text-md); line-height: var(--lh-md); }

.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled { background: var(--gray-200); color: var(--gray-400); border-color: transparent; cursor: not-allowed; }

/* ============================================================
   CHIPS  —  status, filter, tag.  Regular (400) weight, pill.
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--lh-xs);
  border: 1px solid transparent;
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Status — soft tint bg, darker text, dot inherits text color */
.chip--verified  { background: var(--success-100); color: var(--success-700); }
.chip--pending   { background: var(--warning-100); color: var(--warning-700); }
.chip--rejected  { background: var(--error-100);   color: var(--error-700); }
.chip--in-review { background: #dbeafe;             color: #1e40af; }
.chip--archived  { background: var(--gray-100);     color: var(--gray-600); }

/* Filter chips */
.chip--teal    { background: var(--tract-teal-700); color: var(--white); }
.chip--outline { background: var(--white); color: var(--gray-700); border: 1px dashed var(--gray-300); cursor: pointer; }
.chip__close   { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 10px; cursor: pointer; }

/* Tag chips (teal outline) + verified yellow */
.chip--tag      { background: var(--white); color: var(--tract-teal-700); border: 1px solid var(--tract-teal-700); }
.chip--accent   { background: var(--tract-yellow-500); color: var(--tract-teal-800); }

/* ============================================================
   CARDS  —  border only, NO box-shadow.
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}
.card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.card__title  { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--fg); }

/* Stat / KPI tile — border only, no accent bar in dashboard KPIs. */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}
/* Optional accent bar — OMIT on dashboard KPI tiles. */
.stat-card__bar { width: 32px; height: 3px; background: var(--tract-yellow-500); border-radius: 2px; margin-bottom: var(--space-3); }
.stat-card__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-bottom: var(--space-2);
}
.stat-card__value { font-family: var(--font-body); font-weight: 700; font-size: 28px; line-height: 1; color: var(--fg); }
.stat-card__value-unit { font-size: var(--text-sm); color: var(--fg-subtle); margin-left: 4px; font-weight: 400; }
.stat-card__delta { margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 500; }
.stat-card__delta--up   { color: var(--success-600); }
.stat-card__delta--down { color: var(--error-600); }

/* ============================================================
   INPUTS
   ============================================================ */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--gray-700); }
.input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--gray-400); }
.input:focus, .input--focus { outline: none; border-color: var(--tract-teal-700); box-shadow: var(--shadow-focus-teal); }
.input--error { border-color: var(--error-500); box-shadow: 0 0 0 4px rgba(239,68,68,0.15); }
.input--disabled, .input:disabled { background: var(--gray-100); color: var(--gray-400); }
.input svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gray-400); }
.input-hint { font-size: var(--text-xs); color: var(--fg-subtle); }
.input-error-msg { font-size: var(--text-xs); color: var(--error-600); }

/* Toggle / checkbox / radio */
.switch { position: relative; width: 40px; height: 22px; background: var(--gray-300); border-radius: var(--radius-full); flex-shrink: 0; transition: background .15s; cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; box-shadow: var(--shadow-xs); transition: left .15s; }
.switch--on { background: var(--tract-teal-700); }
.switch--on::after { left: 20px; }
.checkbox { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1.5px solid var(--gray-400); background: var(--white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); }
.checkbox--on { background: var(--tract-teal-700); border-color: var(--tract-teal-700); }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gray-400); background: var(--white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio--on { border-color: var(--tract-teal-700); }
.radio--on::after { content: ""; width: 8px; height: 8px; background: var(--tract-teal-700); border-radius: 50%; }

/* ============================================================
   TABLE  —  numbers in Roboto (no monospace).
   ============================================================ */
.tract-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.tract-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-sm); }
.tract-table thead { background: var(--bg-subtle); }
.tract-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--gray-700);
  /* Sentence case — no uppercase, no tracking */
}
.tract-table td { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--fg); }
.tract-table tbody tr:hover { background: var(--bg-subtle); }
.tract-table .td-num { text-align: right; color: var(--gray-700); }   /* Roboto, NOT monospace */
.tract-table .td-muted { color: var(--fg-subtle); }

/* ============================================================
   ALERTS (inline banners)
   ============================================================ */
.alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid; align-items: flex-start; font-family: var(--font-body); font-size: var(--text-sm); }
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.alert__title { font-weight: 600; font-size: var(--text-sm); margin-bottom: 2px; }
.alert__body { font-size: var(--text-xs); line-height: var(--lh-xs); opacity: 0.85; }
.alert--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.alert--success { background: #f0fdf4; border-color: #bbf7d0; color: var(--success-900); }
.alert--warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.alert--error   { background: #fef2f2; border-color: #fecaca; color: var(--error-900); }

/* ============================================================
   TOAST
   ============================================================ */
.toast { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-xl); border: 1px solid; align-items: flex-start; background: var(--white); max-width: 360px; box-shadow: var(--shadow-md); font-family: var(--font-body); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast__body { flex: 1; }
.toast__title { font-weight: 600; font-size: var(--text-sm); }
.toast__desc { font-size: var(--text-xs); opacity: 0.85; margin-top: 2px; }
.toast__dismiss { cursor: pointer; opacity: 0.6; }
.toast--info    { border-color: #bfdbfe; color: #1e3a8a; }
.toast--success { border-color: #bbf7d0; color: var(--success-900); }
.toast--warning { border-color: #fde68a; color: #78350f; }
.toast--error   { border-color: #fecaca; color: var(--error-900); }

/* ============================================================
   MODAL  —  header is its own band; footer + body on white.
   ============================================================ */
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { width: 460px; max-width: calc(100vw - 32px); background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; }
.modal__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal__icon { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modal__icon svg { width: 18px; height: 18px; }
.modal__icon--danger  { background: var(--error-100);   color: var(--error-600); }
.modal__icon--success { background: var(--success-100); color: var(--success-600); }
.modal__icon--info    { background: #dbeafe;            color: var(--info-500); }
.modal__title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); color: var(--fg); flex: 1; }
.modal__close { color: var(--gray-400); cursor: pointer; font-size: 18px; line-height: 1; }
.modal__body { padding: 20px 24px; }
.modal__body-lead { font-size: var(--text-sm); font-weight: 500; color: var(--fg); margin: 0 0 8px; }
.modal__desc { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--lh-sm); margin: 0; }
.modal__footer { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 14px 20px; background: var(--white); border-top: 1px solid var(--border); }

/* ============================================================
   TABS  —  active = teal text + yellow underline.
   ============================================================ */
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 14px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--fg-subtle); border-bottom: 2px solid transparent; cursor: pointer; }
.tab:hover { color: var(--fg-muted); }
.tab--active { color: var(--tract-teal-700); border-bottom-color: var(--tract-yellow-500); }

/* PAGINATION  —  square cells, teal active. Icon-only arrows. */
.pagination { display: flex; gap: 6px; align-items: center; }
.pagination__btn { width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--border); cursor: pointer; }
.pagination__btn:hover { background: var(--bg-subtle); }
.pagination__btn svg { width: 16px; height: 16px; }
.pagination__btn--active { background: var(--tract-teal-700); color: var(--white); border-color: var(--tract-teal-700); }
.pagination__btn--dots { border: none; background: transparent; color: var(--gray-400); cursor: default; }

/* ============================================================
   APP SHELL  —  white sidebar, teal topbar.
   ============================================================ */
.tract-shell { display: flex; min-height: 100vh; }
.tract-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Topbar — teal (primary) background OR white utility bar; default teal brand bar. */
.tract-topbar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px; background: var(--tract-teal-700); }
.tract-topbar--utility { background: var(--white); border-bottom: 1px solid var(--border); }

/* Sidebar — white, square stacked menu items, equal vertical padding active/inactive. */
.tract-sidebar { width: 240px; background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.tract-sidebar--compact { width: 88px; }
.tract-sidebar__nav { display: flex; flex-direction: column; }
.tract-sidebar__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;                 /* identical padding for active & inactive */
  color: var(--gray-700);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
}
.tract-sidebar__item:hover { background: var(--bg-subtle); }
.tract-sidebar__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.tract-sidebar__item--active { background: #FFF7DC; color: var(--tract-teal-700); font-weight: 600; border-left-color: var(--tract-teal-700); }
/* Square stacked variant (icon over label) */
.tract-sidebar__item--square { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 14px 6px; font-size: var(--text-xs); line-height: 13px; }
.tract-sidebar__footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); }
.tract-sidebar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tract-yellow-500); color: var(--tract-teal-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); flex-shrink: 0; }
.tract-sidebar__user-name { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.tract-sidebar__user-email { font-size: var(--text-xs); color: var(--fg-subtle); }

.tract-content { padding: 32px; }

/* ============================================================
   GRID
   ============================================================ */
.tract-grid { display: grid; gap: var(--space-4); }
.tract-grid--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tract-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tract-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tract-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   BRAND SURFACE  —  full-bleed teal + corporate pattern + accent rule.
   ============================================================ */
.brand-surface { position: relative; background: var(--tract-teal-700); color: var(--white); overflow: hidden; }
.brand-surface--pattern { background-image: url("assets/tract-corporate-pattern.jpg"); background-size: cover; background-position: center; }
.brand-surface__accent-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--tract-yellow-500); }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-muted  { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }
.text-brand  { color: var(--tract-teal-700); }
.text-accent { color: var(--tract-yellow-700); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider     { border: none; border-top: 1px solid var(--divider); margin: var(--space-6) 0; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   > 1024px : full sidebar (240px)
   768–1024 : compact icon-only sidebar (88px)
   < 768px  : sidebar hidden (use a bottom nav / hamburger)
   ============================================================ */
@media (max-width: 1024px) {
  .tract-sidebar { width: 88px; }
  .tract-sidebar__item { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 14px 6px; font-size: var(--text-xs); line-height: 13px; }
  .tract-sidebar__user-name, .tract-sidebar__user-email { display: none; }
  .tract-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .tract-content { padding: 24px; }
}
@media (max-width: 768px) {
  .tract-sidebar { display: none; }
  .tract-grid--2, .tract-grid--3, .tract-grid--4 { grid-template-columns: 1fr; }
  .tract-content { padding: 16px; }
}