/* ============================================================
   FILE    : assets/css/components.css
   PATH    : /httpdocs/assets/css/components.css
   PURPOSE : All reusable UI components — buttons, badges,
             cards, score rings, status chips, dimension cards,
             rule cards, tables, modals, tooltips, empty states,
             progress bars, and more.
   REQUIRES: tokens.css, base.css, layout.css
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-base);
  user-select: none;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.btn:hover  { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn:disabled,
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Button Variants ──────────────────────────────────── */

/* Primary */
.btn--primary {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-600);
  color: #fff;
  box-shadow: 0 1px 3px rgba(59,130,246,0.3);
}
.btn--primary:hover {
  background-color: var(--color-brand-400);
  border-color: var(--color-brand-500);
  box-shadow: 0 4px 12px rgba(59,130,246,0.35);
  color: #fff;
}

/* Secondary */
.btn--secondary {
  background-color: var(--bg-surface-2);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.btn--secondary:hover {
  background-color: var(--bg-surface-3);
  border-color: var(--border-color-2);
  color: var(--text-primary);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  border-color: var(--border-color-2);
  color: var(--text-secondary);
}
.btn--outline:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--color-brand-500);
  color: var(--color-brand-400);
}

/* Danger */
.btn--danger {
  background-color: var(--color-danger-500);
  border-color: var(--color-danger-600);
  color: #fff;
}
.btn--danger:hover {
  background-color: var(--color-danger-400);
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  color: #fff;
}

/* Success */
.btn--success {
  background-color: var(--color-success-600);
  border-color: var(--color-success-700);
  color: #fff;
}
.btn--success:hover {
  background-color: var(--color-success-500);
  color: #fff;
}

/* ── Button Sizes ─────────────────────────────────────── */
.btn--xs { height: var(--btn-height-xs); padding: var(--btn-padding-xs); font-size: var(--text-xs); }
.btn--sm { height: var(--btn-height-sm); padding: var(--btn-padding-sm); font-size: var(--text-xs); }
.btn--lg { height: var(--btn-height-lg); padding: var(--btn-padding-lg); font-size: var(--text-md); }
.btn--xl { height: var(--btn-height-xl); padding: var(--btn-padding-xl); font-size: var(--text-lg); }

/* Full width */
.btn--full { width: 100%; }

/* Icon only */
.btn--icon {
  width: var(--btn-height-md);
  padding: 0;
}
.btn--icon.btn--sm { width: var(--btn-height-sm); }
.btn--icon.btn--lg { width: var(--btn-height-lg); }

/* Loading spinner inside button */
.btn--loading {
  pointer-events: none;
  color: transparent;
}
.btn--loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  font-family: var(--font-mono);
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* Status badges */
.badge--pass {
  background: var(--status-pass-bg);
  border-color: var(--status-pass-border);
  color: var(--status-pass-text);
}
.badge--partial {
  background: var(--status-partial-bg);
  border-color: var(--status-partial-border);
  color: var(--status-partial-text);
}
.badge--fail {
  background: var(--status-fail-bg);
  border-color: var(--status-fail-border);
  color: var(--status-fail-text);
}

/* Severity badges */
.badge--high   { background: var(--severity-high-bg);   color: var(--severity-high-text);   border-color: rgba(239,68,68,0.25); }
.badge--medium { background: var(--severity-med-bg);    color: var(--severity-med-text);    border-color: rgba(234,179,8,0.25); }
.badge--low    { background: var(--severity-low-bg);    color: var(--severity-low-text);    border-color: rgba(100,116,139,0.25); }

/* Effort badges */
.badge--effort-low    { background: var(--effort-low-bg);  color: var(--effort-low-text);  border-color: rgba(34,197,94,0.25); }
.badge--effort-medium { background: var(--effort-med-bg);  color: var(--effort-med-text);  border-color: rgba(234,179,8,0.25); }
.badge--effort-high   { background: var(--effort-high-bg); color: var(--effort-high-text); border-color: rgba(239,68,68,0.25); }

/* Plan badges */
.badge--free       { background: rgba(100,116,139,0.15); color: var(--color-gray-400); border-color: rgba(100,116,139,0.3); }
.badge--pro        { background: rgba(59,130,246,0.15);  color: var(--color-brand-400); border-color: var(--color-primary-border); }
.badge--agency     { background: rgba(168,85,247,0.15);  color: var(--color-purple-300); border-color: rgba(168,85,247,0.3); }
.badge--enterprise { background: rgba(234,179,8,0.15);   color: var(--color-warning-400); border-color: rgba(234,179,8,0.3); }

/* Rating badges */
.badge--excellent { background: rgba(34,197,94,0.15);  color: var(--color-success-400); border-color: rgba(34,197,94,0.3); }
.badge--good      { background: rgba(234,179,8,0.15);  color: var(--color-warning-400); border-color: rgba(234,179,8,0.3); }
.badge--poor      { background: rgba(239,68,68,0.15);  color: var(--color-danger-400);  border-color: rgba(239,68,68,0.3); }

/* Generic color badges */
.badge--blue   { background: rgba(59,130,246,0.15);  color: var(--color-brand-300);   border-color: var(--color-primary-border); }
.badge--green  { background: rgba(34,197,94,0.15);   color: var(--color-success-300); border-color: rgba(34,197,94,0.3); }
.badge--yellow { background: rgba(234,179,8,0.15);   color: var(--color-warning-300); border-color: rgba(234,179,8,0.3); }
.badge--red    { background: rgba(239,68,68,0.15);   color: var(--color-danger-300);  border-color: rgba(239,68,68,0.3); }
.badge--purple { background: rgba(168,85,247,0.15);  color: var(--color-purple-300);  border-color: rgba(168,85,247,0.3); }
.badge--cyan   { background: rgba(6,182,212,0.15);   color: var(--color-cyan-300);    border-color: rgba(6,182,212,0.3); }
.badge--orange { background: rgba(249,115,22,0.15);  color: var(--color-orange-300);  border-color: rgba(249,115,22,0.3); }

/* Dot indicator */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover { border-color: var(--border-color-2); }

.card--hoverable {
  cursor: pointer;
}
.card--hoverable:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
  transition: var(--transition-base), transform 0.2s ease;
}

.card--flat {
  background-color: var(--bg-surface-2);
  border-color: transparent;
}

/* Card sections */
.card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.card__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.card__subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.card__body {
  padding: var(--space-6);
}

.card__body--compact {
  padding: var(--space-4);
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Accent top border */
.card--accent-blue   { border-top: 2px solid var(--color-brand-500); }
.card--accent-green  { border-top: 2px solid var(--color-success-500); }
.card--accent-yellow { border-top: 2px solid var(--color-warning-500); }
.card--accent-red    { border-top: 2px solid var(--color-danger-500); }
.card--accent-purple { border-top: 2px solid var(--color-purple-500); }

/* ============================================================
   SCORE RING (SVG-based circular progress)
   ============================================================ */

.score-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.score-ring__svg {
  transform: rotate(-90deg);
}

.score-ring__track {
  fill: none;
  stroke: var(--bg-surface-2);
  stroke-width: 6;
}

.score-ring__fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.score-ring__fill--excellent { stroke: var(--score-excellent); }
.score-ring__fill--good      { stroke: var(--score-good); }
.score-ring__fill--poor      { stroke: var(--score-poor); }

.score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.score-ring__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.score-ring__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: 2px;
}

/* Score ring sizes */
.score-ring--sm  { width: 64px;  height: 64px; }
.score-ring--sm  .score-ring__number { font-size: var(--text-lg); }
.score-ring--md  { width: 96px;  height: 96px; }
.score-ring--lg  { width: 140px; height: 140px; }
.score-ring--xl  { width: 180px; height: 180px; }
.score-ring--xl  .score-ring__number { font-size: var(--text-5xl); }

/* ============================================================
   DIMENSION SCORE CARD
   ============================================================ */

.dim-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.dim-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--dim-color, var(--color-brand-500));
  border-radius: var(--radius-full);
}

.dim-card:hover {
  border-color: var(--dim-color, var(--color-primary-border));
  background-color: var(--bg-surface-2);
}

.dim-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
}

.dim-card__info { flex: 1; min-width: 0; }

.dim-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dim-card__stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}

.dim-card__stat {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.dim-card__stat--pass    { color: var(--status-pass-text); }
.dim-card__stat--partial { color: var(--status-partial-text); }
.dim-card__stat--fail    { color: var(--status-fail-text); }

.dim-card__score {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
   RULE RESULT CARD (accordion item)
   ============================================================ */

.rule-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color 0.2s ease;
  margin-bottom: var(--space-2);
}

.rule-card:hover {
  border-color: var(--border-color-2);
}

.rule-card.rule-card--fail {
  border-left: 3px solid var(--color-danger-500);
}
.rule-card.rule-card--partial {
  border-left: 3px solid var(--color-warning-500);
}
.rule-card.rule-card--pass {
  border-left: 3px solid var(--color-success-500);
}

/* Collapsed header */
.rule-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  flex-wrap: wrap;
}

.rule-card__header:hover {
  background-color: var(--bg-surface-2);
}

.rule-card__id {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.rule-card__title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  min-width: 0;
}

.rule-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rule-card__penalty {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.rule-card__penalty--fail {
  color: var(--color-danger-400);
  font-weight: var(--font-bold);
}

.rule-card__chevron {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.rule-card.open .rule-card__chevron {
  transform: rotate(180deg);
}

/* Expanded body */
.rule-card__body {
  display: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-surface-2);
}

.rule-card.open .rule-card__body {
  display: block;
  animation: fadeDown 0.15s ease;
}

/* Rule detail rows */
.rule-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.rule-detail__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding-top: 2px;
}

.rule-detail__value {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Code snippet blocks */
.snippet-block {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  overflow-x: auto;
  position: relative;
}

.snippet-block--current {
  border-color: var(--status-fail-border);
  background-color: var(--status-fail-bg);
  color: var(--status-fail-text);
}

.snippet-block--improved {
  border-color: var(--status-pass-border);
  background-color: var(--status-pass-bg);
  color: var(--status-pass-text);
}

.snippet-block__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  opacity: 0.7;
  margin-bottom: var(--space-1);
  display: block;
}

/* Rule card footer — actions */
.rule-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

/* ============================================================
   CITATION VERDICT BANNER
   ============================================================ */

.verdict-banner {
  border-radius: var(--radius-2xl);
  border: 1px solid;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.verdict-banner--high {
  background-color: rgba(34,197,94,0.07);
  border-color: rgba(34,197,94,0.25);
}

.verdict-banner--medium {
  background-color: rgba(234,179,8,0.07);
  border-color: rgba(234,179,8,0.25);
}

.verdict-banner--low {
  background-color: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.25);
}

.verdict-banner__icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

.verdict-banner__content { flex: 1; }

.verdict-banner__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.verdict-banner__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.verdict-banner--high .verdict-banner__title  { color: var(--color-success-400); }
.verdict-banner--medium .verdict-banner__title { color: var(--color-warning-400); }
.verdict-banner--low .verdict-banner__title    { color: var(--color-danger-400); }

.verdict-banner__score {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  flex-shrink: 0;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* ============================================================
   QUICK WIN ITEMS
   ============================================================ */

.quick-win-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  margin-bottom: var(--space-2);
}

.quick-win-item:hover {
  border-color: var(--color-primary-border);
  background-color: var(--bg-surface-2);
  text-decoration: none;
}

.quick-win-item__rank {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-subtle);
  color: var(--color-brand-400);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-win-item__content { flex: 1; min-width: 0; }

.quick-win-item__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-win-item__fix {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-win-item__impact {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--color-success-400);
  flex-shrink: 0;
}

/* ============================================================
   DATA TABLES
   ============================================================ */

.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead tr {
  background-color: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.data-table th:hover {
  color: var(--text-secondary);
}

.data-table th.sorted { color: var(--color-brand-400); }

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

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

.data-table tbody tr:hover td {
  background-color: var(--bg-surface-2);
}

.data-table tbody tr.selected td {
  background-color: var(--color-primary-subtle);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress {
  height: 6px;
  background-color: var(--bg-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
  width: 100%;
}

.progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-brand-500);
}

.progress__fill--excellent { background-color: var(--score-excellent); }
.progress__fill--good      { background-color: var(--score-good); }
.progress__fill--poor      { background-color: var(--score-poor); }

/* Tall variant */
.progress--tall { height: 10px; }
.progress--thin { height: 3px; }

/* ============================================================
   STAT CARD
   ============================================================ */

.stat-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: var(--transition-base);
}

.stat-card:hover {
  border-color: var(--border-color-2);
}

.stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-card__icon--blue   { background: var(--color-primary-subtle); }
.stat-card__icon--green  { background: rgba(34,197,94,0.12); }
.stat-card__icon--yellow { background: rgba(234,179,8,0.12); }
.stat-card__icon--red    { background: rgba(239,68,68,0.12); }
.stat-card__icon--purple { background: rgba(168,85,247,0.12); }

.stat-card__content { flex: 1; min-width: 0; }

.stat-card__label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-1);
}

.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.stat-card__change {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-card__change--up   { color: var(--color-success-400); }
.stat-card__change--down { color: var(--color-danger-400); }
.stat-card__change--flat { color: var(--text-muted); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  min-height: 300px;
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
  opacity: 0.6;
}

.empty-state__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 380px;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* ============================================================
   MODAL
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(7,11,20,0.8);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 0.2s ease;
}

.modal {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: scaleIn 0.2s ease;
  overflow: hidden;
}

.modal--lg  { max-width: 720px; }
.modal--xl  { max-width: 960px; }
.modal--sm  { max-width: 400px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--text-xl);
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.modal__close:hover {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
}

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

.modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
  background-color: var(--bg-surface-2);
}

/* ============================================================
   TOOLTIP (via Tippy.js — these are base styles)
   ============================================================ */

.tooltip-content {
  background-color: var(--bg-surface-3);
  border: 1px solid var(--border-color-2);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 260px;
  line-height: var(--leading-relaxed);
  box-shadow: var(--shadow-xl);
}

.tooltip-content__title {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.tooltip-content__threshold {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-brand-400);
  margin-top: var(--space-1);
}

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  flex-shrink: 0;
}

.tabs::-webkit-scrollbar { height: 2px; }

.tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-base);
  text-decoration: none;
}

.tab:hover {
  color: var(--text-secondary);
  background-color: var(--bg-surface-2);
  text-decoration: none;
}

.tab.active {
  color: var(--color-brand-400);
  border-bottom-color: var(--color-brand-500);
  font-weight: var(--font-semibold);
}

.tab__count {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.tab.active .tab__count {
  background-color: var(--color-primary-subtle);
  border-color: var(--color-primary-border);
  color: var(--color-brand-400);
}

/* Tab content panels */
.tab-content { display: none; }
.tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background-color: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.filter-chip:hover {
  border-color: var(--color-primary-border);
  color: var(--text-primary);
}

.filter-chip.active {
  background-color: var(--color-primary-subtle);
  border-color: var(--color-brand-500);
  color: var(--color-brand-400);
  font-weight: var(--font-semibold);
}

/* ============================================================
   UPGRADE BANNER
   ============================================================ */

.upgrade-banner {
  background: linear-gradient(135deg,
    rgba(59,130,246,0.12) 0%,
    rgba(168,85,247,0.12) 100%
  );
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.upgrade-banner__icon { font-size: 28px; flex-shrink: 0; }

.upgrade-banner__content { flex: 1; min-width: 0; }

.upgrade-banner__title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.upgrade-banner__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   MISSING COMPONENTS — Added in v1.1
   ============================================================ */

/* ── Page Header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-header__left { flex: 1; min-width: 0; }

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Page Content Narrow ─────────────────────────────────── */
.page-content--narrow {
  max-width: 860px;
}

/* ── Quick Link Item ─────────────────────────────────────── */
.quick-link-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}

.quick-link-item:hover { background: var(--bg-surface-2); }

.quick-link-item__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.quick-link-item__text { flex: 1; min-width: 0; }

.quick-link-item__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-link-item__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
}

.quick-link-item__arrow {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Toggle / Switch ─────────────────────────────────────── */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-wrap input:checked + .toggle {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
}

.toggle-wrap input:checked + .toggle::after {
  transform: translateX(18px);
  background: #fff;
}

.toggle-wrap input:focus + .toggle {
  box-shadow: var(--focus-ring);
}

/* ── Input Wrap with Prefix ──────────────────────────────── */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap--prefix .form-input {
  padding-left: 36px;
}

.input-wrap--suffix .form-input {
  padding-right: 36px;
}

.input-prefix,
.input-suffix {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.input-prefix { left: 10px; }
.input-suffix { right: 10px; }

/* ── Form Hint & Optional Label ──────────────────────────── */
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}

.form-hint--error { color: var(--color-danger-400); }
.form-hint--success { color: var(--color-success-400); }

.form-label__optional {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: var(--font-normal);
  margin-left: 4px;
  font-family: var(--font-mono);
}

/* ── Form Checkbox ───────────────────────────────────────── */
.form-checkbox {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface-2);
  cursor: pointer;
  accent-color: var(--color-brand-500);
  flex-shrink: 0;
}

.form-checkbox:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Badge Variants (missing) ────────────────────────────── */
.badge--free       { background: rgba(100,116,139,.12); color: #94a3b8; border-color: rgba(100,116,139,.25); }
.badge--pro        { background: rgba(59,130,246,.12);  color: var(--color-brand-400); border-color: rgba(59,130,246,.25); }
.badge--agency     { background: rgba(168,85,247,.12);  color: #c084fc; border-color: rgba(168,85,247,.25); }
.badge--enterprise { background: rgba(234,179,8,.12);   color: var(--color-warning-400); border-color: rgba(234,179,8,.25); }

.badge--open        { background: rgba(100,116,139,.1); color: #94a3b8;  border-color: rgba(100,116,139,.2); }
.badge--acknowledged{ background: rgba(59,130,246,.1);  color: #60a5fa;  border-color: rgba(59,130,246,.2); }
.badge--in_progress { background: rgba(234,179,8,.1);   color: #fbbf24;  border-color: rgba(234,179,8,.2); }
.badge--fixed       { background: rgba(34,197,94,.1);   color: #4ade80;  border-color: rgba(34,197,94,.2); }
.badge--ignored     { background: rgba(100,116,139,.1); color: #6b7280;  border-color: rgba(100,116,139,.2); }

.badge--critical { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.3); }
.badge--warning  { background: rgba(234,179,8,.12); color: #fbbf24; border-color: rgba(234,179,8,.25); }

/* ── Audit Row Action Button ─────────────────────────────── */
.audit-row__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.audit-row__action-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ── Progress Variants ───────────────────────────────────── */
.progress--thin .progress__fill  { height: 3px; }
.progress--tall .progress__fill  { height: 8px; }

.progress--thin { height: 3px; }
.progress--tall { height: 8px; }

/* ── Score Ring Variants ─────────────────────────────────── */
.score-ring--lg .score-ring__svg  { width: 140px; height: 140px; }
.score-ring--md .score-ring__svg  { width: 100px; height: 100px; }
.score-ring--sm .score-ring__svg  { width:  64px; height:  64px; }

.score-ring__fill--excellent { stroke: var(--color-success-500); }
.score-ring__fill--good      { stroke: var(--color-warning-500); }
.score-ring__fill--poor      { stroke: var(--color-danger-500);  }

/* ── Tabs ────────────────────────────────────────────────── */
.tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: var(--font-bold);
  color: var(--text-muted);
  margin-left: 6px;
}

.tab.active .tab__count {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-border);
  color: var(--color-brand-400);
}

/* ── Card Compact Body ───────────────────────────────────── */
.card__body--compact {
  padding: var(--space-2) 0;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.breadcrumbs__link {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.15s;
}

.breadcrumbs__link:hover { color: var(--color-brand-400); }

.breadcrumbs__separator {
  font-size: var(--text-xs);
  color: var(--border-color);
}

.breadcrumbs__current {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* ── Alert ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.alert--error   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.25);  color: #fca5a5; }
.alert--success { background: rgba(34,197,94,.08);  border: 1px solid rgba(34,197,94,.25);  color: #86efac; }
.alert--warning { background: rgba(234,179,8,.08);  border: 1px solid rgba(234,179,8,.25);  color: #fde68a; }
.alert--info    { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); color: #93c5fd; }

/* ── Page Loader Bar ─────────────────────────────────────── */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-brand-500), var(--color-purple-500));
  z-index: 99999;
  transition: width 0.3s ease, opacity 0.4s ease;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ── Sticky header for data tables ──────────────────────── */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
}

/* ── Button loading state ────────────────────────────────── */
.btn--loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}

.btn--loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Responsive fixes ────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header         { flex-direction: column; }
  .page-header__actions{ width: 100%; }
  .page-content--narrow{ max-width: 100%; }
  .stat-card           { flex-direction: column; text-align: center; }
  .data-table-wrap     { font-size: 12px; }
  .data-table th,
  .data-table td       { padding: var(--space-2) var(--space-2); }
}