/* definitions/components.css
   ────────────────────────────────────────────────────────────
   Shared visual primitives.
   Modules use these classes; they don't redefine them.
   ────────────────────────────────────────────────────────────
*/

/* ─── Container ─── */
.c-container { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-7); }
.c-container--narrow { max-width: 760px; }

/* ─── Card ─── */
.c-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-5);
  box-shadow: var(--sh-1);
}
.c-card--padded { padding: var(--s-6) var(--s-7); }
.c-card--elevated { box-shadow: var(--sh-2); }

/* ─── Buttons ─── */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: var(--t-body);
  font-weight: 500;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-3);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease);
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
}
.c-btn:hover { background: var(--c-bg-warm); }
.c-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.c-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.c-btn--primary {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.c-btn--primary:hover { background: var(--c-sage-deep); border-color: var(--c-sage-deep); }

.c-btn--accent {
  background: var(--c-sage);
  color: var(--c-cream);
  border-color: var(--c-sage);
}
.c-btn--accent:hover { background: var(--c-sage-deep); border-color: var(--c-sage-deep); }

.c-btn--lg { padding: var(--s-4) var(--s-7); font-size: 15px; font-weight: 600; }

/* ─── Form fields ─── */
.c-field { display: flex; flex-direction: column; gap: var(--s-1); }
.c-label {
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-ink-mute);
}
.c-input,
.c-textarea {
  font: var(--t-body);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  background: var(--c-surface);
  color: var(--c-ink);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  font-family: inherit;
  width: 100%;
}
.c-input:focus,
.c-textarea:focus {
  outline: none;
  border-color: var(--c-sage);
  box-shadow: var(--sh-focus);
}
.c-input[aria-invalid="true"] { border-color: var(--c-rose); }
.c-field-error {
  font-size: 12px;
  color: var(--c-rose);
  margin-top: var(--s-1);
}

/* ─── Badge / tag ─── */
.c-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  border-radius: var(--r-1);
  background: var(--c-bg-warm);
  color: var(--c-ink-soft);
}
.c-badge--success { background: var(--c-success-bg); color: var(--c-success-fg); }
.c-badge--warn    { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.c-badge--info    { background: var(--c-info-bg);    color: var(--c-info-fg); }
.c-badge--error   { background: var(--c-danger-bg);  color: var(--c-danger-fg); }

/* ─── Monogram avatar ─── */
.c-monogram {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-beige), var(--c-terracotta));
  color: var(--c-cream);
  font: 500 13px/1 var(--font-display);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* ─── Brand mark ─── */
.c-brand-mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-sage), var(--c-sage-deep));
  box-shadow: inset 0 0 0 4px var(--c-bg);
  border: 1px solid var(--c-sage-deep);
}
.c-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 22px/1 var(--font-display);
  letter-spacing: var(--letter-tight);
}

/* ─── Section heads ─── */
.c-eyebrow {
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-sage-deep);
}
.c-display {
  font: var(--t-display);
  letter-spacing: var(--letter-tight);
}
.c-display em { font-style: italic; font-weight: 300; color: var(--c-sage-deep); }

/* ─── Toast / test result blocks (used by test runner) ─── */
.c-result {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  margin-bottom: var(--s-2);
  background: var(--c-surface);
  font-size: 13px;
  align-items: baseline;
}
.c-result--pass { border-left: 4px solid var(--c-sage); }
.c-result--fail { border-left: 4px solid var(--c-rose); background: var(--c-danger-bg); }

/* ─── Empty state ─── */
.c-empty {
  text-align: center;
  padding: var(--s-9) var(--s-7);
  color: var(--c-ink-mute);
  font-style: italic;
  font-family: var(--font-display);
}

/* ─── Utility ─── */
.u-stack > * + * { margin-top: var(--s-4); }
.u-stack-sm > * + * { margin-top: var(--s-2); }
.u-row { display: flex; align-items: center; gap: var(--s-3); }
.u-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.u-mute { color: var(--c-ink-mute); }
.u-strong { font-weight: 600; }

/* ────────────────────────────────────────────────────────────
   Design-system pass: reusable primitives (tokens only).
   These complement the .c-* set above with shorter aliases
   that match the design-references mockups.
   ──────────────────────────────────────────────────────────── */

/* ─── Buttons (semantic aliases) ─── */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.btn-primary:hover:not(:disabled) {
  background: var(--c-sage-700);
  border-color: var(--c-sage-700);
}

.btn-secondary {
  background: var(--c-surface-card);
  color: var(--c-ink);
  border-color: var(--c-border);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--c-bg-warm);
  border-color: var(--c-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--c-ink-soft);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--c-bg-warm);
  color: var(--c-ink);
}

.btn-danger {
  background: var(--c-danger);
  color: var(--c-cream);
  border-color: var(--c-danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--c-danger-fg);
  border-color: var(--c-danger-fg);
}
.btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }

/* ─── Tile / tile-row ─── */
.tile {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-sm);
}
.tile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tile-row:hover { border-color: var(--c-sage-200); box-shadow: var(--shadow-sm); }

/* ─── KPI ─── */
.kpi {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.kpi-label {
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-ink-mute);
}
.kpi-value {
  font: 400 32px/1 var(--font-display);
  letter-spacing: var(--letter-tight);
  color: var(--c-ink);
}
.kpi-delta { font-size: 12px; font-weight: 600; color: var(--c-success-fg); }
.kpi-delta--down { color: var(--c-danger-fg); }

/* ─── Badge (semantic) ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  border-radius: var(--radius-xs);
  background: var(--c-muted-bg);
  color: var(--c-muted-fg);
}
.badge-success { background: var(--c-success-bg); color: var(--c-success-fg); }
.badge-warning { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger-fg); }
.badge-info    { background: var(--c-info-bg);    color: var(--c-info-fg); }
.badge-muted   { background: var(--c-muted-bg);   color: var(--c-muted-fg); }

/* ─── Chip ─── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface-card);
  color: var(--c-ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.chip:hover { background: var(--c-bg-warm); color: var(--c-ink); }
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}

/* ─── Card (semantic aliases over .c-card) ─── */
.card {
  background: var(--c-surface-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6) var(--s-7);
}
.card-elevated {
  background: var(--c-surface-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--s-6) var(--s-7);
}

/* ─── Inputs ─── */
.input,
.select,
.textarea {
  width: 100%;
  font: var(--t-body);
  font-family: inherit;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-card);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-border-focus);
  box-shadow: var(--shadow-focus);
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-danger); }
.input:disabled,
.select:disabled,
.textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--c-surface-recessed); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-7);
}

.label {
  display: inline-block;
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-ink-mute);
  margin-bottom: var(--s-1);
}

/* ─── Modal ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 36, 25, 0.45);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--s-5);
}
.modal-panel {
  background: var(--c-surface-elevated);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--s-6) var(--s-7);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - var(--s-9));
  overflow: auto;
  z-index: var(--z-modal);
}

/* ─── Empty state ─── */
.empty-state {
  text-align: center;
  padding: var(--s-9) var(--s-7);
  color: var(--c-ink-mute);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}
.empty-state .empty-state-title {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--c-ink-soft);
  font-size: 18px;
  margin-bottom: var(--s-2);
}

/* ─── Timeline ─── */
.timeline {
  position: relative;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.timeline::before {
  content: "";
  position: absolute;
  left: var(--s-1);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--c-border);
}
.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}
.timeline-row::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background: var(--c-surface-card);
  border: 2px solid var(--c-sage);
}
.timeline-row .timeline-time {
  font-size: 11px;
  color: var(--c-ink-mute);
}
.timeline-row .timeline-text {
  font-size: 13px;
  color: var(--c-ink-soft);
}

/* ─── Divider ─── */
.divider {
  border: none;
  border-top: 1px solid var(--c-border-soft);
  margin: var(--s-4) 0;
}
.divider-strong { border-top-color: var(--c-border); }

/* ─── Crumb (breadcrumb) ─── */
.crumb {
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-ink-mute);
  margin-bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.crumb a {
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.crumb a:hover { color: var(--c-ink); }
.crumb a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.crumb-sep { color: var(--c-ink-mute); opacity: 0.6; }

/* === BEGIN engagement-archetype components ===
   Brand polish + archetype primitives used by the
   CB Overview and Denna vecka views.

   Discipline:
   - .brand-h1 is sentence case, serif italic, the canonical view H1.
   - .brand-meta is the ONLY uppercase utility introduced here;
     keep uppercase confined to micro-labels.
   - .arch-block / .arch-stripe / .arch-chip use the archetype
     tokens directly (no semantic remap). Each variant pairs the
     fg color with its matching -bg, except --n-a, which is a
     dashed empty cell.
*/

.brand-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: var(--letter-tight);
  color: var(--c-ink);
  text-transform: none;
  margin: 0;
}

.brand-meta {
  font: var(--t-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  color: var(--c-ink-mute);
}

/* Matrix block — colored cell in the archetype grid */
.arch-block {
  display: block;
  height: 28px;
  border-radius: var(--r-2);
  background: var(--c-muted-bg);
  transition: opacity 120ms var(--ease-standard);
}
.arch-block:hover { opacity: 0.85; }
.arch-block--late         { background: var(--c-arch-late);        }
.arch-block--wait-client  { background: var(--c-arch-wait-client); }
.arch-block--review       { background: var(--c-arch-review);      }
.arch-block--at-skv       { background: var(--c-arch-at-skv);      }
.arch-block--done         { background: var(--c-arch-done);        }
.arch-block--not-started  { background: var(--c-arch-not-started); }
.arch-block--n-a {
  background: transparent;
  border: 1px dashed var(--c-line);
}

/* Left stripe — card accent matching archetype state */
.arch-stripe {
  width: 4px;
  height: 100%;
  align-self: stretch;
  border-radius: var(--r-1);
  background: var(--c-muted-bg);
  flex: none;
}
.arch-stripe--late         { background: var(--c-arch-late);        }
.arch-stripe--wait-client  { background: var(--c-arch-wait-client); }
.arch-stripe--review       { background: var(--c-arch-review);      }
.arch-stripe--at-skv       { background: var(--c-arch-at-skv);      }
.arch-stripe--done         { background: var(--c-arch-done);        }
.arch-stripe--not-started  { background: var(--c-arch-not-started); }
.arch-stripe--n-a {
  background: transparent;
  border: 1px dashed var(--c-line);
}

/* Inline chip — small archetype tag */
.arch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  background: var(--c-muted-bg);
  color: var(--c-muted-fg);
}
.arch-chip--late         { background: var(--c-arch-late-bg);        color: var(--c-arch-late);        }
.arch-chip--wait-client  { background: var(--c-arch-wait-client-bg); color: var(--c-arch-wait-client); }
.arch-chip--review       { background: var(--c-arch-review-bg);      color: var(--c-arch-review);      }
.arch-chip--at-skv       { background: var(--c-arch-at-skv-bg);      color: var(--c-arch-at-skv);      }
.arch-chip--done         { background: var(--c-arch-done-bg);        color: var(--c-arch-done);        }
.arch-chip--not-started  { background: var(--c-arch-not-started-bg); color: var(--c-arch-not-started); }
.arch-chip--n-a {
  background: transparent;
  color: var(--c-ink-mute);
  border: 1px dashed var(--c-line);
  padding: 1px calc(var(--s-2) - 1px);
}
/* === END engagement-archetype components === */

/* === BEGIN status-pill primitive ===
   Canonical status-pill. Existing view-specific pill classes (Today's
   .c-badge--hot/--cold/--stuck, Quotes' filled black pill, Onboarding's
   colored fills, Översikt's color bars) keep their CSS — but new pills,
   and harmonisation passes, should compose on this primitive.

   When to use which modifier:
   - .c-status-pill              Neutral baseline (light bg, ink-soft).
                                 Use for muted/info status (e.g. "Tyst").
   - .c-status-pill--solid       Colored background + cream text. High
                                 contrast — use for one critical state
                                 per view ("Het", "Försenad", "Accepted").
   - .c-status-pill--dot         Small colored dot + label, light bg.
                                 Use when scanning a column of many pills
                                 (lists, tables) — easier on the eye.
   - .c-status-pill--bar         Full color bar pill, used in Översikt's
                                 archetype-state cells. Strong horizontal
                                 emphasis; do not mix with --solid.

   Color level via [data-level="ok|warn|danger|info|muted"], shared with
   existing .ct-badge convention. Defaults to muted.
*/
.c-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
  color: var(--c-ink-mute);
  white-space: nowrap;
}
.c-status-pill[data-level="ok"] {
  background: var(--c-success-bg);
  color: var(--c-success-fg);
  border-color: var(--c-success);
}
.c-status-pill[data-level="warn"] {
  background: var(--c-warning-bg);
  color: var(--c-warning-fg);
  border-color: var(--c-warning);
}
.c-status-pill[data-level="danger"] {
  background: var(--c-danger-bg);
  color: var(--c-danger-fg);
  border-color: var(--c-danger);
}
.c-status-pill[data-level="info"] {
  background: var(--c-info-bg);
  color: var(--c-info-fg);
  border-color: var(--c-info);
}

/* --dot: small colored dot + plain label on neutral background. */
.c-status-pill--dot {
  background: var(--c-surface);
  color: var(--c-ink-soft);
  border-color: var(--c-line);
}
.c-status-pill--dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-ink-mute);
  flex-shrink: 0;
}
.c-status-pill--dot[data-level="ok"]::before     { background: var(--c-success); }
.c-status-pill--dot[data-level="warn"]::before   { background: var(--c-warning); }
.c-status-pill--dot[data-level="danger"]::before { background: var(--c-danger); }
.c-status-pill--dot[data-level="info"]::before   { background: var(--c-info); }
.c-status-pill--dot[data-level="ok"],
.c-status-pill--dot[data-level="warn"],
.c-status-pill--dot[data-level="danger"],
.c-status-pill--dot[data-level="info"] {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line);
}

/* --solid: colored bg + cream text. High-contrast emphasis. */
.c-status-pill--solid {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.c-status-pill--solid[data-level="ok"] {
  background: var(--c-success); color: var(--c-cream); border-color: var(--c-success);
}
.c-status-pill--solid[data-level="warn"] {
  background: var(--c-warning); color: var(--c-cream); border-color: var(--c-warning);
}
.c-status-pill--solid[data-level="danger"] {
  background: var(--c-danger); color: var(--c-cream); border-color: var(--c-danger);
}
.c-status-pill--solid[data-level="info"] {
  background: var(--c-info); color: var(--c-cream); border-color: var(--c-info);
}

/* --bar: full color bar pill (Översikt). Sharper corners, denser. */
.c-status-pill--bar {
  border-radius: var(--r-2);
  padding: 2px var(--s-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-wide);
  font-size: 10px;
  background: var(--c-muted-bg);
  color: var(--c-muted-fg);
  border-color: transparent;
}
.c-status-pill--bar[data-level="ok"] {
  background: var(--c-success-bg); color: var(--c-success-fg);
}
.c-status-pill--bar[data-level="warn"] {
  background: var(--c-warning-bg); color: var(--c-warning-fg);
}
.c-status-pill--bar[data-level="danger"] {
  background: var(--c-danger-bg); color: var(--c-danger-fg);
}
.c-status-pill--bar[data-level="info"] {
  background: var(--c-info-bg); color: var(--c-info-fg);
}
/* === END status-pill primitive === */