/* ============================================================
   Vores Tog rekruttering — shared UI components
   Recreates the Vores Tog design system's Button/Badge/Input/
   Select/Checkbox/Tabs/Tag/Avatar in plain CSS, driven by the
   token file. Rendered by includes/class-vt-render.php.
   ============================================================ */

.vt-scope, .vt-scope * { box-sizing: border-box; }
.vt-scope {
  font-family: var(--font-sans);
  color: var(--text-body);
}
/* Plain ".vt-scope a" (class+tag, specificity 0,1,1) — no ":not(.vt-btn)"
   exclusion. That exclusion used to be needed so this reset couldn't beat
   ".vt-btn", but counted as an extra class and pushed this rule's own
   specificity up to 0,2,1 — high enough to beat every other single
   class+tag component rule too (".vt-app-nav a" and friends, also 0,1,1),
   regardless of stylesheet order, which is what made the sidebar nav
   text collapse to inherited body color. ".vt-btn" now protects its own
   color with !important instead (see below), so this reset can stay at
   the same specificity as any other "<component> a" rule and simply lose
   the normal same-specificity tie to whichever loads later — which is
   always the more specific component, since vt-components.css (this
   file) is a dependency every other plugin stylesheet loads after. */
.vt-scope a { color: inherit; text-decoration: none; }

/* ---- Button ---- */
/* Both the base color and every variant override below carry !important:
   the base alone previously lost to some other stylesheet on the actual
   WordPress install (host admin CSS, another active plugin, or theme —
   never fully pinned down) with equal or tie-broken-later specificity, so
   "Nyt opslag" / "Ny skabelon" (anchor-rendered, default/primary variant)
   kept rendering with inherited link-blue text. !important on the base
   alone would have then made secondary/ghost buttons (whose color comes
   from a separate, more specific rule below) unable to override it back to
   a dark color — so every variant that sets its own color needs the same
   !important, keeping their relative cascade order intact. */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1; border-radius: var(--radius-control);
  border: 1px solid transparent; cursor: pointer;
  background: var(--action-primary); color: var(--action-on-primary) !important;
  text-decoration: none !important;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  white-space: nowrap; text-align: center;
}
.vt-btn:hover { background: var(--action-primary-hover); }
.vt-btn:disabled, .vt-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.vt-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; gap: 6px; border-radius: var(--radius-sm); }
.vt-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; gap: 10px; }
.vt-btn--secondary { background: var(--surface-card); color: var(--text-strong) !important; border-color: var(--border-default); }
.vt-btn--secondary:hover { background: var(--surface-page); }
.vt-btn--ghost { background: transparent; color: var(--text-strong) !important; }
.vt-btn--ghost:hover { background: var(--surface-page); }
.vt-btn--danger { background: var(--red-500); color: #fff !important; }
.vt-btn--danger:hover { background: #b53127; }
.vt-btn--danger-text { color: var(--red-500) !important; }
.vt-btn--danger-text:hover { background: var(--red-soft); }

/* ---- Icon button (trash/delete affordances) ---- */
.vt-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.vt-icon-btn:hover { background: var(--red-soft); color: var(--red-500); }
.vt-icon-btn--sm { width: 28px; height: 28px; }
.vt-btn--full { width: 100%; }

/* ---- Badge ---- */
.vt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.4; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--gray-700);
}
.vt-badge--onTime { background: var(--green-soft); color: var(--green-500); }
.vt-badge--delayed { background: var(--amber-soft); color: var(--amber-500); }
.vt-badge--cancelled { background: var(--red-soft); color: var(--red-500); }
.vt-badge--info { background: var(--info-soft); color: var(--info-500); }
.vt-badge--accent { background: var(--vt-orange-soft); color: var(--accent-hover); }
.vt-badge--neutral { background: var(--gray-100); color: var(--gray-700); }
.vt-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- Field shell (Input / Select) ---- */
.vt-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.vt-field__label { font-size: 13px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.01em; }
.vt-field__control {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.vt-field__control:focus-within { border-color: var(--vt-blue); box-shadow: var(--shadow-focus); }
.vt-field--error .vt-field__control { border-color: var(--red-500); }
/* !important here beats both the active theme's own default input border
   (frontend) and wp-admin core's native focus border/box-shadow on
   input/select/textarea (admin) — the intended border lives on
   .vt-field__control alone; the field itself must never show its own. */
.vt-field input, .vt-field select, .vt-field textarea,
.vt-field input:focus, .vt-field select:focus, .vt-field textarea:focus {
  flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; background: transparent;
  font-family: var(--font-sans); font-size: 15px; letter-spacing: -0.01em; color: var(--text-strong);
}
.vt-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 20px; }
.vt-field--select .vt-field__control { position: relative; }
.vt-field--select .vt-field__control::after {
  content: "\25BE"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--text-muted); font-size: 12px;
}
.vt-field input:disabled, .vt-field select:disabled { cursor: not-allowed; }
.vt-field--disabled .vt-field__control { background: var(--surface-sunken); }
.vt-field__helper { font-size: 12px; color: var(--text-muted); }
.vt-field--error .vt-field__helper { color: var(--red-500); }
.vt-field textarea { resize: vertical; min-height: 120px; padding: 4px 0; }

/* ---- Checkbox ---- */
.vt-checkbox { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 15px; color: var(--text-body); cursor: pointer; letter-spacing: -0.01em; }
.vt-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.vt-checkbox__box {
  width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast) var(--ease-standard);
}
.vt-checkbox input:checked + .vt-checkbox__box { border-color: var(--vt-blue); background: var(--vt-blue); }
.vt-checkbox__box svg { display: none; width: 12px; height: 12px; }
.vt-checkbox input:checked + .vt-checkbox__box svg { display: block; }
.vt-checkbox input:disabled ~ * { opacity: .5; cursor: not-allowed; }

/* ---- Tabs ---- */
.vt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); }
.vt-tabs a, .vt-tabs button {
  appearance: none; border: none; background: transparent; padding: 12px 14px; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer;
}
.vt-tabs a.is-active, .vt-tabs button.is-active { font-weight: 600; color: var(--text-strong); border-bottom-color: var(--accent); }

/* ---- Tag ---- */
.vt-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body);
  cursor: pointer;
}
.vt-tag:hover { background: var(--surface-page); }
.vt-tag.is-selected { background: var(--vt-blue); border-color: var(--vt-blue); color: #fff; }
.vt-tag.is-selected:hover { background: var(--vt-blue); }

/* ---- Avatar ---- */
.vt-avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--vt-blue); color: #fff; font-family: var(--font-sans); font-weight: 600;
  letter-spacing: -0.01em; overflow: hidden; flex: none;
}
.vt-avatar--soft { background: var(--gray-200); color: var(--text-strong); }
.vt-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Card ---- */
.vt-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.vt-card--shadow { box-shadow: var(--shadow-sm); }
.vt-eyebrow { font: 500 10.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.vt-hr { height: 1px; background: var(--border-subtle); border: none; margin: 0; }

/* ---- Notices ---- */
.vt-notice { padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; }
.vt-notice--error { background: var(--red-soft); color: var(--red-500); }
.vt-notice--success { background: var(--green-soft); color: var(--green-500); }
.vt-notice--info { background: var(--info-soft); color: var(--info-500); }