/*
 * components.css — shared, token-driven UI primitives.
 *
 * Reusable building blocks so pages express layout, not component styling. All
 * values come from design-tokens.css (no raw hex). Load AFTER css/app.min.css
 * and the design-tokens fragment so these win on equal specificity
 * (design-standards.md §3). Prefix: .wc-*.
 */

/* ── Avatar (initials or photo) ──────────────────────────────────────────── */
.wc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wc-brand);
  color: var(--color-surface);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  object-fit: cover;
  overflow: hidden;
}

.wc-avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.wc-avatar--xl {
  width: 84px;
  height: 84px;
  font-size: 30px;
}

.wc-avatar--ring {
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* ── Card / surface panel ────────────────────────────────────────────────── */
.wc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.wc-card--pad {
  padding: 28px;
}

/* ── Icon tile (small rounded brand square) — design-standards §6 ─────────── */
.wc-badge-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--wc-brand-soft);
  color: var(--wc-brand);
  font-size: 22px;
}

/* ── Section label (uppercase micro-heading) — design-standards typography ── */
.wc-section-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

/* ── Alert / inline notice ───────────────────────────────────────────────── */
.wc-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.wc-alert > i {
  font-size: 15px;
  line-height: 1.5;
  flex: 0 0 auto;
}

.wc-alert--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-color: var(--color-danger);
  border-color: rgba(220, 38, 38, 0.25);
}

.wc-alert--success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: rgba(22, 163, 74, 0.25);
}

.wc-alert--warn {
  background: var(--color-warn-soft);
  color: var(--color-warn-strong);
  border-color: rgba(234, 143, 25, 0.25);
}

/* Neutral / informational — calm surface, not a success or error signal. */
.wc-alert--neutral {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ── Pill (roles, tags, statuses) ────────────────────────────────────────── */
.wc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--color-surface-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.wc-pill--role {
  background: var(--wc-brand-soft);
  color: var(--wc-brand-dark);
  border-color: transparent;
}

.wc-pill--info {
  background: var(--color-info-soft);
  color: var(--color-primary-dark);
  border-color: transparent;
}

.wc-pill--success {
  background: var(--color-success-soft);
  color: var(--color-success);
  border-color: transparent;
}

.wc-pill--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
  border-color: transparent;
}

/* ── Page header + icon tile (design-standards §6) ───────────────────────── */
.wc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.wc-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.wc-icon-tile {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wc-brand-soft);
  color: var(--wc-brand);
  font-size: 17px;
}

.wc-page-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ── Surface panel (semantic alias of the card; clips child content) ─────── */
.wc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Status pills (design-standards §7) — soft tint bg + saturated text ───── */
.wc-status {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
}

.wc-status--published,
.wc-status--approved,
.wc-status--completed,
.wc-status--success {
  background: var(--color-success-soft);
  color: var(--color-success-strong);
}

.wc-status--in-progress,
.wc-status--scheduled,
.wc-status--processing {
  background: var(--color-info-soft);
  color: var(--color-info-strong);
}

.wc-status--merged {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.wc-status--mapped {
  background: var(--color-mapped-soft);
  color: var(--color-mapped-strong);
}

.wc-status--blocked,
.wc-status--stopped,
.wc-status--warn {
  background: var(--color-warn-soft);
  color: var(--color-warn-strong);
}

.wc-status--failed,
.wc-status--rejected,
.wc-status--error {
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.wc-status--pending,
.wc-status--muted {
  background: var(--color-pending-soft);
  color: var(--color-pending-strong);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.wc-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Segmented view toggle (grid/list) ───────────────────────────────────── */
.wc-view-toggle .btn {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: 13px;
}

.wc-view-toggle .btn.active {
  background: var(--wc-brand);
  border-color: var(--wc-brand);
  color: #fff;
  z-index: 1;
}

/* ── Media grid + card (design-standards §5/§8) ──────────────────────────── */
.wc-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.wc-media-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s, transform 0.18s;
}

.wc-media-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.wc-media-thumb {
  width: 100%;
  min-height: 190px;
  max-height: 350px;
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #fafbfc 0% 50%) 50% / 22px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.wc-media-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.wc-media-thumb .play-overlay {
  position: absolute;
  font-size: 2.5em;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* ── Breadcrumb nav (muted surface strip) ────────────────────────────────── */
.wc-breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
}

.wc-breadcrumb-nav a {
  color: var(--wc-brand);
  text-decoration: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.wc-breadcrumb-nav a:hover {
  text-decoration: none;
  background: var(--wc-brand-soft);
}

.wc-breadcrumb-nav span {
  color: #c1c7d0;
  margin: 0 2px;
}

/* ── Modal (design-standards §6) ─────────────────────────────────────────── */
.wc-modal .modal-content {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(16, 24, 40, 0.20);
}

.wc-modal .modal-header {
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.wc-modal .modal-header .modal-title {
  font-weight: 700;
  color: var(--color-text);
}

.wc-modal .form-control:focus {
  border-color: var(--wc-brand);
  box-shadow: 0 0 0 3px var(--wc-brand-soft);
}