/* ============ Component primitives ============
 * Buttons, cards, badges, and small utility classes shared across
 * redesigned pages. Ported from design-handoff/lt/project/styles.css.
 *
 * Loaded globally by base_v2.html so any page extending the new shell
 * can use these primitives without re-declaring them.
 */

/* ---------- Buttons ----------
 * `cursor: pointer` and `text-decoration: none` are set here (rather than
 * relying on the global `button`/`a` resets in tokens.css) so that
 * `<a class="btn">` without an href, and any future non-button element
 * styled as `.btn`, render correctly. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--fs-13);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.btn-primary { background: var(--c-fg); color: var(--c-bg); }
.btn-primary:hover { background: oklch(0.32 0.008 80); }
.btn-accent { background: var(--c-accent); color: var(--c-accent-fg); }
.btn-accent:hover { background: var(--c-accent-hover); }
/* Lock the background on disabled accent buttons so the .btn { transition }
 * doesn't animate them between accent and accent-hover when hovered (the
 * worksheet Save button sits in this state on page load and during submit). */
.btn-accent:disabled, .btn-accent[disabled] { background: var(--c-accent); }
.btn-default {
  background: var(--c-panel);
  border-color: var(--c-border);
  color: var(--c-fg);
  box-shadow: var(--sh-1);
}
.btn-default:hover { border-color: var(--c-border-strong); background: var(--c-bg-soft); }
.btn-ghost { background: transparent; color: var(--c-fg-muted); }
.btn-ghost:hover { background: var(--c-bg-sunk); color: var(--c-fg); }
.btn-danger { background: var(--c-panel); border-color: var(--c-border); color: var(--c-danger); box-shadow: var(--sh-1); }
.btn-danger:hover { background: var(--c-danger-soft); }
.btn-sm { height: 26px; padding: 0 var(--s-2); font-size: var(--fs-12); }
.btn-lg { height: 36px; padding: 0 var(--s-4); font-size: var(--fs-14); }
.btn-icon { width: 30px; padding: 0; }
.btn-icon.btn-sm { width: 26px; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
}
.card-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.card-title {
  font-size: var(--fs-14);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.card-sub {
  font-size: var(--fs-12);
  color: var(--c-fg-muted);
  margin-top: 1px;
}
.card-body { padding: var(--s-5); }
.card-list { padding: 0; }
.card-list .row {
  display: grid;
  align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-13);
}
.card-list .row:last-child { border-bottom: 0; }
.card-list .row:hover { background: var(--c-bg-soft); }
.card-empty {
  padding: var(--s-6) var(--s-5);
  font-size: var(--fs-13);
  color: var(--c-fg-muted);
  text-align: center;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  color: var(--c-fg-muted);
  line-height: 16px;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge.ok { color: oklch(0.42 0.13 150); background: var(--c-success-soft); border-color: oklch(0.85 0.06 150); }
.badge.warn { color: oklch(0.45 0.13 75); background: var(--c-warning-soft); border-color: oklch(0.85 0.08 75); }
.badge.bad { color: oklch(0.45 0.16 25); background: var(--c-danger-soft); border-color: oklch(0.85 0.08 25); }
.badge.info { color: oklch(0.42 0.1 240); background: var(--c-info-soft); border-color: oklch(0.85 0.05 240); }
.badge.accent { color: var(--c-accent); background: var(--c-accent-soft); border-color: oklch(0.85 0.06 255); }

/* ---------- Utilities ---------- */
.kicker {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-fg-faint);
}
.muted { color: var(--c-fg-muted); }
.faint { color: var(--c-fg-faint); }
.row-flex { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.grow { flex: 1; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--c-border); margin: var(--s-5) 0; }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-fg-faint);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  position: sticky; top: 0;
}
.tbl td {
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-13);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--c-bg-soft); }
.tbl tbody tr.clickable { cursor: pointer; }

/* ---------- Form fields ----------
 * Base form-field primitives shared by Settings (Profile/Company) and the
 * Clients toolbar search. Page-specific extensions (e.g. the Clients toolbar
 * sizing `.card-head-toolbar .input-wrap`, the `.input.has-prefix` modifier,
 * the prefix-icon child) live in the page CSS files. */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.label {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--c-fg-muted);
}
.help { font-size: 11px; color: var(--c-fg-faint); }
.input-wrap { position: relative; display: flex; align-items: stretch; }
.input {
  flex: 1;
  height: 30px;
  width: 100%;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--c-panel);
  font-size: var(--fs-13);
  color: var(--c-fg);
  transition: border-color 80ms, box-shadow 80ms;
}
.input:hover { border-color: var(--c-border-strong); }
.input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.input:disabled { background: var(--c-bg-sunk); color: var(--c-fg-faint); }
.field-error { font-size: var(--fs-12); color: var(--c-danger); }

/* ---------- Modal (v2 pattern) ----------
 * Use these class names (`.modal-overlay`/`.modal-card`/...) rather than
 * the legacy `.modal`/`.modal-content`/`.modalheader` rules in shell.css —
 * those still apply to legacy templates and would override these if both
 * sets of class names were used together on the same element. */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 18, 15, 0.36);
  z-index: 90;
  padding: var(--s-6);
  overflow: auto;
}
.modal-overlay.is-open {
  display: grid;
  place-items: center;
}
.modal-card {
  width: 480px; max-width: 100%;
  background: var(--c-panel);
  border-radius: var(--r-5);
  box-shadow: var(--sh-3);
  overflow: hidden;
  position: relative;
}
.modal-head { padding: var(--s-5); border-bottom: 1px solid var(--c-border); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-head .modal-sub { font-size: 12px; color: var(--c-fg-muted); margin-top: 2px; }
.modal-body { padding: var(--s-5); }
.modal-foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-border);
  display: flex; justify-content: flex-end; gap: var(--s-2);
  background: var(--c-bg-soft);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--c-fg-muted);
  background: transparent;
  border: 0;
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: var(--c-bg-sunk); color: var(--c-fg); }

/* ---------- Charts ----------
 * Ported from design-handoff/lt/project/styles.css lines 778-796.
 * Wrap Chart.js canvases (or any embedded chart) in `.chart-frame` so
 * they sit in a design-system card. */
.chart-frame {
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  background: var(--c-panel);
  padding: var(--s-4);
}