/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 3: COMPONENTS — primitives shared by the PUBLIC SITE and ADMIN PANEL
   ---------------------------------------------------------------------------
   Anything in this file is used by both halves of the application. Site-only
   sections live in 4-site.css; admin-only shell lives in 5-admin.css.
   Authors no colour of its own — tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   BUTTON
   One component. Size and shape come from local custom properties so the
   variants stay declarative and the old site/admin .btn conflict disappears.
   ─────────────────────────────────────────────────────────────────────────── */

.btn {
  --btn-pad-y: 11px;
  --btn-pad-x: 22px;
  --btn-radius: var(--radius-md);
  --btn-size: var(--text-body-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--btn-size);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-snug);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color   var(--duration-fast) var(--ease-out),
              color          var(--duration-fast) var(--ease-out),
              box-shadow     var(--duration-base) var(--ease-out),
              transform      var(--duration-fast) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn .icon-svg { width: 1.05em; height: 1.05em; }

/* Sizes */
.btn-sm { --btn-pad-y: 7px;  --btn-pad-x: 14px; --btn-size: var(--text-caption); --btn-radius: var(--radius-sm); }
.btn-lg { --btn-pad-y: 15px; --btn-pad-x: 30px; --btn-size: var(--text-body);    --btn-radius: var(--radius-lg); }
.btn-block { display: flex; width: 100%; }

/* Variants */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-brand);
}
.btn-primary:active:not(:disabled) { background: var(--color-primary-active); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover:not(:disabled) {
  background: var(--color-accent-hover);
  color: var(--color-accent-contrast);
  box-shadow: 0 10px 26px var(--color-accent-ring);
}
.btn-accent:active:not(:disabled) { background: var(--color-accent-active); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary-light);
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.btn-danger {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-text-inverse);
}

.btn-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}
.btn-success:hover:not(:disabled) {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-inverse);
}

/* On dark backgrounds (hero, CTA bands, inverse sections). */
.btn-on-dark {
  background: var(--color-glass-10);
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover:not(:disabled) {
  background: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
  color: var(--color-primary-dark);
}


/* ───────────────────────────────────────────────────────────────────────────
   CARD
   ─────────────────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow   var(--duration-base) var(--ease-out),
              transform    var(--duration-base) var(--ease-out);
}

.card h3 { margin: 0; }
.card p  { margin: 0; font-size: var(--text-body-sm); }

.card-hover:hover {
  border-color: var(--color-primary-subtle);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

/* Whole-card link. Keeps the anchor semantics without inheriting link colour. */
a.card {
  color: inherit;
  text-decoration: none;
}
a.card:hover { color: inherit; }
a.card:hover h3 { color: var(--color-primary); }

.card-pad-lg { padding: var(--space-8); }

/* Icon plate used at the head of most cards. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-subtle);
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.card-hover:hover .card-icon,
a.card:hover .card-icon {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}

.card-icon-lg {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-lg);
  background: var(--gradient-accent);
  color: var(--color-primary-contrast);
  border: none;
  box-shadow: var(--shadow-brand);
}

/* Trailing "Learn more →" affordance. */
.card-link {
  margin-top: auto;
  padding-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.card-link .icon-svg {
  width: 1em; height: 1em;
  transition: transform var(--duration-base) var(--ease-out);
}

.card-hover:hover .card-link .icon-svg,
a.card:hover .card-link .icon-svg { transform: translateX(4px); }

/* Numbered variant — replaces an icon with a sequence marker. */
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-subtle);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
}

/* Awaiting-content state — used for credentials not yet published. */
.card-pending {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}
.card-pending .card-icon {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}


/* ───────────────────────────────────────────────────────────────────────────
   BADGE  ·  TAG  ·  CHIP
   ─────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
}

/* A dot carries the status in addition to hue, so colour is never the only
   channel communicating state (WCAG 1.4.1). */
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.badge-plain::before { display: none; }

.badge-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: var(--color-info-border); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error-text);   border-color: var(--color-error-border); }
.badge-brand   { background: var(--color-primary-light); color: var(--color-primary-hover); border-color: var(--color-primary-subtle); }
.badge-neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-border); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}

.tag .icon-svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.tag-brand { background: var(--color-primary-light); border-color: var(--color-primary-subtle); color: var(--color-primary-hover); }
.tag-brand .icon-svg { color: var(--color-primary); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags-center { justify-content: center; }

/* Tag rendered as a link (used on the 404 page shortcuts). */
a.tag:hover {
  border-color: var(--color-primary-subtle);
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

/* Chip — translucent pill for use on dark backgrounds. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--color-glass-10);
  border: 1px solid var(--color-border-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  backdrop-filter: blur(6px);
}

.chip .icon-svg { width: 16px; height: 16px; opacity: .9; }


/* ───────────────────────────────────────────────────────────────────────────
   EYEBROW  ·  SECTION HEADER  ·  LEAD
   The universal "eyebrow + H2 + lead" pattern used across every page.
   ─────────────────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.eyebrow-center { justify-content: center; }
.eyebrow-center::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
}

:is(.section-inverse, .hero, .page-banner, .cta-band, .auth-aside) .eyebrow {
  color: var(--color-primary-muted);
}

.section-head { margin-bottom: var(--space-12); }
.section-head .eyebrow { margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-4); }

.lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

:is(.section-inverse, .hero, .page-banner, .cta-band, .auth-aside) .lead {
  color: var(--color-text-on-dark);
}


/* ───────────────────────────────────────────────────────────────────────────
   FORM
   One field primitive for the public forms and the admin forms alike.
   ─────────────────────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--space-5); }

.field > label,
.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.field-required {
  color: var(--color-error);
  margin-left: 2px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field input[type="date"],
.field select,
.field textarea,
.input {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out);
}

.field textarea,
textarea.input {
  min-height: 118px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder,
.input::placeholder { color: var(--color-text-muted); }

.field input:hover,
.field select:hover,
.field textarea:hover,
.input:hover { border-color: var(--color-primary-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Native select needs its own chevron once appearance is reset. The arrow is
   an inline data-URI so it stays a single request-free asset; it is drawn in
   currentColor-neutral grey which reads correctly against every surface. */
.field select,
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--icon-chevron-down);
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

/* Error state */
.field-error input,
.field-error select,
.field-error textarea,
.input-error {
  border-color: var(--color-error);
}
.field-error input:focus,
.field-error select:focus,
.field-error textarea:focus,
.input-error:focus {
  box-shadow: 0 0 0 3px var(--color-error-ring);
}

.field-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.field-msg {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-error-text);
}
.field-msg .icon-svg { width: 14px; height: 14px; }

/* Two-up row that collapses on small screens. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Checkbox and radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.check input[type="checkbox"],
.check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.check input[type="radio"] { border-radius: var(--radius-full); }

.check input[type="checkbox"]:checked,
.check input[type="radio"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: var(--icon-check);
  background-repeat: no-repeat;
  background-position: center;
}

.check input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Toggle switch — used for job visibility. */
.switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 25px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-spring);
}

.switch input:checked { background: var(--color-primary); }
.switch input:checked::after { transform: translateX(19px); }
.switch input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* File input — styled drop zone. The native input stays in the DOM and
   functional, so this degrades correctly with JavaScript disabled. */
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  transition: border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.file-drop:hover,
.file-drop.is-dragging {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-drop .icon-svg { color: var(--color-primary); }
.file-drop-title { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); cursor: pointer; }
.file-drop-hint  { font-size: var(--text-caption); color: var(--color-text-muted); }

/* The native input is transparently overlaid on the whole zone, so the focus
   ring has to be drawn on the container rather than on a sibling. */
.file-drop:has(input[type="file"]:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* Form card — the sidebar/inline conversion panel. */
.form-card {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.form-card-head { margin-bottom: var(--space-6); }
.form-card-head h3 { margin-bottom: var(--space-2); }
.form-card-head p  { font-size: var(--text-body-sm); color: var(--color-text-muted); margin: 0; }

@media (max-width: 620px) {
  .form-card { padding: var(--space-6); }
}

/* Honeypot — visually and assistively hidden, never focusable. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}


/* ───────────────────────────────────────────────────────────────────────────
   ALERT
   ─────────────────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}

.alert .icon-svg { width: 18px; height: 18px; margin-top: 1px; }

.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.alert-error   { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error-text); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info-text); }


/* ───────────────────────────────────────────────────────────────────────────
   TABLE
   ─────────────────────────────────────────────────────────────────────────── */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 720px;
  font-size: var(--text-body-sm);
}

/* Dashboard summary tables carry 3–4 columns, so they do not need the full
   data-table minimum before they start scrolling. */
.table-compact { min-width: 420px; }

.table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}
.table tbody tr:hover { background: var(--color-primary-light); }

.table .cell-strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.table .cell-num    { color: var(--color-text-muted); font-variant-numeric: tabular-nums; width: 56px; }
.table .cell-nowrap { white-space: nowrap; }

/* Clamp long free-text cells to three lines; the full value lives in the
   detail drawer rather than being crushed into a fixed-width cell. */
.cell-clip {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 340px;
}

/* Sortable column header */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color var(--duration-fast) var(--ease-out);
}
.th-sort:hover { color: var(--color-primary); }
.th-sort .icon-svg { width: 13px; height: 13px; opacity: .45; }
.th-sort[aria-sort="ascending"],
.th-sort[aria-sort="descending"] { color: var(--color-primary); }
.th-sort[aria-sort="ascending"] .icon-svg,
.th-sort[aria-sort="descending"] .icon-svg { opacity: 1; }

/* Row action cluster */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.actions form { display: inline-flex; margin: 0; }

/* Inside a data table the cluster stays on one line — the table already
   scrolls horizontally, which reads better than a ragged two-row action cell. */
.table .actions { flex-wrap: nowrap; }


/* ───────────────────────────────────────────────────────────────────────────
   PAGINATION
   ─────────────────────────────────────────────────────────────────────────── */

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.pagination-count {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.pagination-count strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.pagination a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-subtle);
  color: var(--color-primary-hover);
}

.pagination .is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.pagination .is-disabled {
  opacity: .45;
  pointer-events: none;
}

.pagination .icon-svg { width: 15px; height: 15px; }


/* ───────────────────────────────────────────────────────────────────────────
   EMPTY  ·  ERROR  ·  LOADING STATES
   ─────────────────────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.empty-state h3 { margin: 0; }
.empty-state p  { max-width: 46ch; margin: 0; font-size: var(--text-body-sm); color: var(--color-text-muted); }
.empty-state .btn { margin-top: var(--space-3); }

.empty-state-error .empty-state-icon { background: var(--color-error-bg); color: var(--color-error); }

/* Skeleton shimmer for loading rows. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
      90deg,
      var(--color-surface-sunken) 25%,
      var(--color-divider) 37%,
      var(--color-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Busy state for the table toolbar during a filter round-trip. */
.is-busy { position: relative; pointer-events: none; }
.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-veil);
  border-radius: inherit;
}


/* ───────────────────────────────────────────────────────────────────────────
   DROPDOWN
   ─────────────────────────────────────────────────────────────────────────── */

.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 210px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}

.dropdown-menu-right { right: 0; }

.dropdown.is-open > .dropdown-menu,
.dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover-open is a desktop-pointer affordance only; touch and keyboard rely on
   the .is-open class toggled by JS. */
@media (hover: none) {
  .dropdown:hover > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
  .dropdown.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.dropdown-item:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}

.dropdown-item .icon-svg { width: 16px; height: 16px; opacity: .7; }
.dropdown-divider { height: 1px; margin: var(--space-2) 0; background: var(--color-divider); }
.dropdown-label {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ───────────────────────────────────────────────────────────────────────────
   OVERLAY  ·  DRAWER  ·  MODAL
   ─────────────────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
}

.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw);
  height: 100dvh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.drawer.is-open { transform: translateX(0); }
.drawer-left { right: auto; left: 0; border-left: none; border-right: 1px solid var(--color-border); transform: translateX(-100%); }
.drawer-left.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.drawer-head h3 { margin: 0; }
.drawer-head .muted { font-size: var(--text-caption); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

.drawer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface-sunken);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.icon-btn:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }

/* Definition rows inside the detail drawer. */
.detail-list { display: flex; flex-direction: column; gap: var(--space-5); }

.detail-row { display: flex; flex-direction: column; gap: var(--space-1); }

.detail-label {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.detail-value {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal-box {
  width: min(460px, 100%);
  padding: var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: scale(.96);
  transition: transform var(--duration-base) var(--ease-spring);
}

.modal.is-open .modal-box { transform: scale(1); }
.modal-box h3 { margin-bottom: var(--space-3); }
.modal-box p  { font-size: var(--text-body-sm); margin-bottom: var(--space-6); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }


/* ───────────────────────────────────────────────────────────────────────────
   TOAST
   ─────────────────────────────────────────────────────────────────────────── */

.toast-region {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 380px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-body-sm);
  pointer-events: auto;
  animation: toast-in var(--duration-slow) var(--ease-out);
}

.toast-success { border-left-color: var(--color-success); }
.toast-error   { border-left-color: var(--color-error); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────────────────
   BREADCRUMB  ·  TABS
   ─────────────────────────────────────────────────────────────────────────── */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--color-text-primary); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs li + li::before {
  content: "/";
  color: var(--color-border-strong);
}
.crumbs [aria-current="page"] { color: var(--color-text-primary); font-weight: var(--weight-medium); }

/* Breadcrumbs on any dark surface. Without this the current-page crumb keeps
   --color-text-primary and disappears against the brand gradient. */
:is(.section-inverse, .hero, .page-banner, .cta-band) .crumbs {
  color: var(--color-text-on-dark-dim);
}
:is(.section-inverse, .hero, .page-banner, .cta-band) .crumbs a:hover {
  color: var(--color-text-inverse);
}
:is(.section-inverse, .hero, .page-banner, .cta-band) .crumbs li + li::before {
  color: var(--color-text-on-dark-dim);
}
:is(.section-inverse, .hero, .page-banner, .cta-band) .crumbs [aria-current="page"] {
  color: var(--color-text-inverse);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.tab:hover { color: var(--color-text-primary); }

.tab.is-active,
.tab[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}

.tab-count {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tab.is-active .tab-count { background: var(--color-primary-light); color: var(--color-primary); }


/* ───────────────────────────────────────────────────────────────────────────
   INFO LIST  ·  AVATAR
   ─────────────────────────────────────────────────────────────────────────── */

.info-list { display: flex; flex-direction: column; gap: var(--space-4); }

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.info-list .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-subtle);
}

.info-list strong {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.info-list span,
.info-list a {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.info-list a:hover { color: var(--color-primary); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}