/* WCAG Auditor Pro – Customer Portal Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=Barlow:wght@400;500;600;700&display=swap');

/* ── Variables — NTUS dark theme ──────────────────────────────────────── */
:root {
  --c-brand:        #29b6c8;           /* NTUS teal */
  --c-brand-dark:   #1e8fa0;
  --c-brand-glow:   rgba(41,182,200,.18);
  --c-bg:           #0b0f14;           /* NTUS dark bg */
  --c-panel:        #1a2235;           /* NTUS surface */
  --c-panel-raised: #1f2a40;           /* slightly lifted card */
  --c-border:       rgba(255,255,255,.08);
  --c-border-mid:   rgba(255,255,255,.15);
  --c-text:         #e8edf4;
  --c-muted:        #a8b5c8;
  --c-high:         #f87171;
  --c-med:          #fbbf24;
  --c-low:          #60a5fa;
  --c-ok:           #34d399;
  --radius:         12px;
  --shadow:         0 4px 24px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
  --font:           'DM Sans', -apple-system, sans-serif;
  --font-display:   'Barlow', 'DM Sans', sans-serif;
  --mono:           'DM Mono', 'Courier New', monospace;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body.wcag-portal {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
a { color: var(--c-brand); }
h1,h2,h3,h4 { margin: 0 0 .5em; font-weight: 700; font-family: var(--font-display); }

/* ── Header ───────────────────────────────────────────────────────────── */
.wcag-portal-header {
  background: linear-gradient(90deg, #0b0f14 0%, #1a2235 70%, #1e8fa0 100%);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.wcag-portal-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wcag-portal-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.wcag-portal-icon { font-size: 24px; }
.wcag-portal-logo { height: 36px; width: auto; border-radius: 4px; }
.wcag-portal-brand-name { font-size: 18px; font-weight: 700; color: #fff; }
.wcag-portal-header-right { display: flex; align-items: center; gap: 14px; }
.wcag-portal-user { color: rgba(255,255,255,.75); font-size: 13px; }
.wcag-portal-logout {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.3);
  padding: 4px 12px;
  border-radius: 6px;
  transition: background .15s;
}
.wcag-portal-logout:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ── Project switcher ─────────────────────────────────────────────────── */
.wcag-project-switcher { position: relative; }
.wcag-portal-switcher-btn {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
}
.wcag-switcher-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-panel);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 180px;
  display: none;
  z-index: 200;
}
.wcag-switcher-dropdown.is-open { display: block; }
.wcag-switcher-item {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
}
.wcag-switcher-item:last-child { border-bottom: none; }
.wcag-switcher-item:hover { background: var(--c-bg); }
.wcag-switcher-item.is-active { font-weight: 700; color: var(--c-brand); }

/* ── Portal nav ───────────────────────────────────────────────────────── */
.wcag-portal-nav {
  background: #1a2235;
  border-bottom: 1px solid var(--c-border);
}
.wcag-portal-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
}
.wcag-portal-nav-link {
  display: inline-block;
  padding: 11px 16px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.wcag-portal-nav-link:hover { color: rgba(255,255,255,.9); text-decoration: none; }
.wcag-portal-nav-link.is-active { color: #fff; border-bottom-color: #29b6c8; }

/* ── Main content ─────────────────────────────────────────────────────── */
.wcag-portal-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.wcag-portal-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}
.wcag-portal-panel h1 { font-size: 22px; margin-bottom: 20px; }
.wcag-portal-panel h2 { font-size: 16px; margin: 24px 0 12px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.wcag-portal-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  color: var(--c-text);
  text-decoration: none;
  transition: background .15s;
}
.wcag-portal-btn:hover { background: var(--c-bg); text-decoration: none; }
.wcag-portal-btn-primary {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}
.wcag-portal-btn-primary:hover { background: var(--c-brand-dark); color: #fff; }

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.wcag-breadcrumb { margin-bottom: 20px; }
.wcag-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--c-muted); }
.wcag-breadcrumb li + li::before { content: '›'; margin-right: 6px; }
.wcag-breadcrumb a { color: var(--c-brand); text-decoration: none; }

/* ── Progress bar ─────────────────────────────────────────────────────── */
.wcag-progress-bar-wrap { margin: 20px 0; }
.wcag-progress-label-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; }
.wcag-progress-track { height: 10px; background: var(--c-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--c-border); }
.wcag-progress-fill { height: 100%; background: var(--c-ok); border-radius: 999px; transition: width .4s ease; }

/* ── Section bars ─────────────────────────────────────────────────────── */
.wcag-section-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wcag-section-name { width: 140px; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.wcag-section-bar-wrap { flex: 1; height: 8px; background: var(--c-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--c-border); }
.wcag-section-bar-fill { height: 100%; background: var(--c-brand); border-radius: 999px; }
.wcag-section-score { width: 36px; text-align: right; font-size: 13px; font-weight: 600; }

/* ── Dashboard cards ──────────────────────────────────────────────────── */
.wcag-dash-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.wcag-dash-card {
  flex: 1; min-width: 120px; max-width: 180px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.wcag-dash-num { font-size: 32px; font-weight: 700; line-height: 1; }
.wcag-dash-card-label { font-size: 12px; color: var(--c-muted); margin-top: 6px; }
.wcag-high  { color: var(--c-high); }
.wcag-med   { color: var(--c-med); }
.wcag-ok    { color: var(--c-ok); }

/* ── Score ring ───────────────────────────────────────────────────────── */
.wcag-dash-score { position: relative; display: flex; flex-direction: column; align-items: center; }
.wcag-score-ring { position: relative; width: 80px; height: 80px; }
.wcag-score-svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.wcag-score-bg   { fill: none; stroke: var(--c-border); stroke-width: 8; }
.wcag-score-fill { fill: none; stroke: var(--c-brand); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.wcag-score-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }

/* ── Scan card (dashboard) ────────────────────────────────────────────── */
.wcag-scan-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.wcag-scan-label { font-weight: 600; font-size: 15px; }
.wcag-scan-meta  { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.wcag-scan-card-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Empty states ─────────────────────────────────────────────────────── */
.wcag-portal-empty { color: var(--c-muted); font-style: italic; }
.wcag-portal-empty-state { text-align: center; padding: 48px 20px; }
.wcag-portal-empty-icon { font-size: 40px; margin-bottom: 12px; }

/* ── Project list (screen_list) ───────────────────────────────────────── */
.wcag-project-cards { display: flex; flex-wrap: wrap; gap: 16px; }
.wcag-project-card {
  flex: 1; min-width: 200px; max-width: 300px;
  display: flex; align-items: center; gap: 12px;
  padding: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--c-text);
  transition: box-shadow .15s, border-color .15s;
}
.wcag-project-card:hover { box-shadow: var(--shadow); border-color: var(--c-brand); text-decoration: none; color: var(--c-brand); }
.wcag-project-card-icon { font-size: 28px; }
.wcag-project-card-name { flex: 1; font-weight: 600; font-size: 15px; }
.wcag-project-card-arrow { color: var(--c-muted); font-size: 18px; }

/* ── Reports list ─────────────────────────────────────────────────────── */
.wcag-reports-list { display: flex; flex-direction: column; gap: 12px; }
.wcag-report-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  flex-wrap: wrap;
}
.wcag-report-label { font-weight: 600; font-size: 15px; }
.wcag-report-meta  { font-size: 13px; color: var(--c-muted); margin: 3px 0; }
.wcag-report-counts { display: flex; gap: 12px; font-size: 13px; margin-top: 4px; }
.wcag-report-score { font-weight: 600; }
.wcag-report-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.wcag-type-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
}
.wcag-type-deep      { background: #fdf4ff; color: #7c3aed; }
.wcag-type-heuristic { background: #eff6ff; color: #1d4ed8; }
.wcag-sev { font-size: 12px; font-weight: 600; }
.wcag-sev-high   { color: var(--c-high); }
.wcag-sev-medium { color: var(--c-med); }
.wcag-sev-low    { color: var(--c-low); }

/* ── Guide screen ─────────────────────────────────────────────────────── */
.wcag-guide-header { margin-bottom: 20px; }
.wcag-guide-subtitle { color: var(--c-muted); margin-top: 4px; font-size: 14px; }
.wcag-tracker-link-row,.wcag-guide-link-row { margin-top: 12px; }
.wcag-guide-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 20px 0;
}
.wcag-guide-filters, .wcag-tracker-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.wcag-expand-all-btn {
  background: none; border: 1px solid var(--c-border); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--c-muted); white-space: nowrap;
}
.wcag-expand-all-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.wcag-filter-btn {
  padding: 6px 14px; border: 1px solid var(--c-border); border-radius: 999px;
  background: #fff; font-size: 13px; cursor: pointer; font-family: var(--font);
  transition: background .15s, border-color .15s, color .15s;
}
.wcag-filter-btn:hover { border-color: var(--c-brand); color: var(--c-brand); }
.wcag-filter-btn.is-active { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

.wcag-guide-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .15s;
}
.wcag-guide-card:hover { box-shadow: var(--shadow); }
.wcag-guide-card[data-status="fixed"] { border-left: 4px solid var(--c-ok); }
.wcag-guide-card[data-status="in_progress"] { border-left: 4px solid var(--c-med); }
.wcag-guide-card[data-status="wont_fix"] { border-left: 4px solid var(--c-muted); }

.wcag-guide-card-header {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  cursor: pointer; user-select: none;
}
.wcag-guide-sev-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.wcag-sev-high   { background: var(--c-high); }
.wcag-sev-medium { background: var(--c-med); }
.wcag-sev-low    { background: var(--c-low); }
.wcag-guide-card-title { flex: 1; }
.wcag-guide-card-title strong { font-size: 15px; display: block; }
.wcag-guide-criterion, .wcag-guide-count {
  font-size: 12px; color: var(--c-muted); margin-right: 8px;
}
.wcag-guide-status-badge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.wcag-guide-status-badge.status-fixed       { background: #d1fae5; color: #065f46; }
.wcag-guide-status-badge.status-in_progress { background: #fef3c7; color: #92400e; }
.wcag-guide-status-badge.status-wont_fix    { background: #f1f5f9; color: var(--c-muted); }
.wcag-guide-status-badge.status-todo        { background: #f1f5f9; color: var(--c-muted); }
.wcag-guide-toggle {
  background: none; border: none; cursor: pointer; font-size: 16px;
  color: var(--c-muted); padding: 0 4px; transition: transform .2s;
}
.wcag-guide-card.is-open .wcag-guide-toggle { transform: rotate(180deg); }

.wcag-guide-card-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--c-border); }
.wcag-guide-card.is-open .wcag-guide-card-body { display: block; }
.wcag-guide-section { margin: 14px 0; }
.wcag-guide-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: 6px; }

.wcag-affected-list { margin: 0; padding: 0; list-style: none; }
.wcag-affected-list li { padding: 5px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.wcag-affected-list li:last-child { border-bottom: none; }
.wcag-affected-page { font-weight: 500; min-width: 100px; }
.wcag-affected-selector { font-family: var(--mono); font-size: 11px; color: var(--c-muted); word-break: break-all; }

.wcag-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.wcag-tick-btn {
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--c-border);
  background: #fff; cursor: pointer; font-size: 13px; font-family: var(--font);
  font-weight: 500; transition: background .15s, border-color .15s;
}
.wcag-tick-btn:hover { border-color: var(--c-brand); }
.wcag-tick-btn[data-action="fixed"].is-active     { background: #d1fae5; border-color: #059669; color: #065f46; }
.wcag-tick-btn[data-action="in_progress"].is-active { background: #fef3c7; border-color: #d97706; color: #92400e; }
.wcag-tick-btn[data-action="wont_fix"].is-active  { background: #f1f5f9; border-color: #94a3b8; color: var(--c-muted); }
.wcag-tick-note-wrap { margin-top: 8px; }
.wcag-tick-note {
  width: 100%; padding: 8px 10px; border: 1px solid var(--c-border);
  border-radius: 6px; font-size: 13px; font-family: var(--font);
  resize: vertical; background: var(--c-bg);
}
.wcag-tick-saved { font-size: 12px; color: var(--c-ok); display: block; min-height: 16px; }

/* ── Tracker screen ───────────────────────────────────────────────────── */
.wcag-tracker-scan-name { color: var(--c-muted); font-size: 14px; margin-bottom: 20px; }
.wcag-tracker-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.wcag-tracker-stat {
  flex: 1; min-width: 80px;
  text-align: center; padding: 12px;
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.wcag-tracker-stat-num { font-size: 24px; font-weight: 700; }
.wcag-tracker-stat-label { font-size: 11px; color: var(--c-muted); margin-top: 3px; }
.wcag-stat-ok   .wcag-tracker-stat-num { color: var(--c-ok); }
.wcag-stat-prog .wcag-tracker-stat-num { color: var(--c-med); }
.wcag-stat-muted .wcag-tracker-stat-num { color: var(--c-muted); }

.wcag-tracker-list { display: flex; flex-direction: column; gap: 1px; margin-top: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.wcag-tracker-item {
  background: #fff; padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.wcag-tracker-item:last-child { border-bottom: none; }
.wcag-tracker-item[data-status="fixed"]       { background: #f0fdf4; }
.wcag-tracker-item[data-status="in_progress"] { background: #fffbeb; }
.wcag-tracker-item[data-status="wont_fix"]    { background: #f8fafc; opacity: .7; }
.wcag-tracker-item-main { display: flex; align-items: center; gap: 10px; }
.wcag-tracker-item-info { flex: 1; }
.wcag-tracker-item-title { font-size: 14px; font-weight: 500; }
.wcag-tracker-item-meta  { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.wcag-tracker-item-actions { display: flex; align-items: center; gap: 6px; }
.wcag-tick-compact {
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--c-border); background: #fff;
  cursor: pointer; font-size: 14px; font-family: var(--font);
}
.wcag-tick-compact[data-action="fixed"].is-active     { background: #d1fae5; border-color: #059669; }
.wcag-tick-compact[data-action="in_progress"].is-active { background: #fef3c7; border-color: #d97706; }
.wcag-tick-compact[data-action="wont_fix"].is-active  { background: #f1f5f9; border-color: #94a3b8; }
.wcag-tracker-note-toggle {
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--c-border); border-radius: 6px; background: #fff;
  cursor: pointer; font-size: 14px;
}
.wcag-tracker-note-row { padding: 8px 0 0 20px; }
.wcag-tracker-item .wcag-tick-saved { display: inline-block; margin-left: 8px; }

/* ── Progress / charts ────────────────────────────────────────────────── */
.wcag-chart-card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.wcag-chart-card h2 { font-size: 15px; margin-bottom: 14px; }
.wcag-info-callout {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
  padding: 14px 18px; font-size: 14px; color: #1d4ed8; margin-bottom: 20px;
}

/* ── Comparison table ─────────────────────────────────────────────────── */
.wcag-compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wcag-compare-table th { padding: 8px 12px; background: var(--c-bg); border: 1px solid var(--c-border); font-weight: 600; text-align: left; }
.wcag-compare-table td { padding: 8px 12px; border: 1px solid var(--c-border); }
.wcag-compare-up   { color: var(--c-ok); font-weight: 600; }
.wcag-compare-down { color: var(--c-high); font-weight: 600; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.wcag-portal-footer {
  text-align: center; padding: 20px; font-size: 12px; color: var(--c-muted);
  border-top: 1px solid var(--c-border); background: #fff; margin-top: 40px;
}

/* ── AI Recommendations section ──────────────────────────────────────── */
.wcag-guide-ai-recs {
  border: 1px solid #c7d2fe; border-radius: 10px;
  margin-bottom: 24px; background: #f5f3ff; overflow: hidden;
}
.wcag-guide-ai-recs-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; font-weight: 700;
  font-size: 14px; color: #3730a3; list-style: none;
  background: #ede9fe;
}
.wcag-guide-ai-recs-toggle::-webkit-details-marker { display: none; }
.wcag-guide-ai-count {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: #6d28d9; background: #ddd6fe; padding: 2px 8px;
  border-radius: 999px;
}
.wcag-guide-ai-recs-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.wcag-guide-ai-rec-item {
  padding: 12px 14px; background: #fff;
  border-radius: 8px; border: 1px solid #ddd6fe;
}
.wcag-guide-ai-rec-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.wcag-guide-ai-rec-header strong { font-size: 13px; color: #1e1b4b; }
.wcag-guide-ai-rec-header .wcag-guide-criterion { font-size: 11px; color: #64748b; }
.wcag-guide-ai-why, .wcag-guide-ai-how {
  font-size: 13px; color: #374151; margin-bottom: 8px; line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* ── Fix Guide code snippet ───────────────────────────────────────────── */
.wcag-guide-code {
  background: #1e293b;
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-family: var(--mono);
}

@media (max-width: 680px) {
  .wcag-portal-header-inner { flex-wrap: wrap; }
  .wcag-portal-panel { padding: 20px 16px; }
  .wcag-dash-cards { flex-direction: column; }
  .wcag-scan-card { flex-direction: column; align-items: flex-start; }
  .wcag-report-row { flex-direction: column; }
  .wcag-report-row-actions { width: 100%; }
  .wcag-guide-card-header { flex-wrap: wrap; }
  .wcag-tracker-item { flex-wrap: wrap; }
}

/* ── NTUS Dark Theme Overrides ──────────────────────────────────────────── */

/* Filter buttons */
.wcag-filter-btn {
  background: var(--c-panel);
  color: var(--c-muted);
  border-color: var(--c-border-mid);
}
.wcag-filter-btn:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-panel); }

/* Portal buttons */
.wcag-portal-btn { background: var(--c-panel); color: var(--c-text); border-color: var(--c-border-mid); }
.wcag-portal-btn:hover { background: var(--c-panel-raised); }

/* Guide cards */
.wcag-guide-card { background: var(--c-panel); }
.wcag-guide-card-body { border-top-color: var(--c-border); }

/* Guide status badges — dark-friendly versions */
.wcag-guide-status-badge.status-fixed       { background: rgba(52,211,153,.15); color: #34d399; }
.wcag-guide-status-badge.status-in_progress { background: rgba(251,191,36,.12);  color: #fbbf24; }
.wcag-guide-status-badge.status-wont_fix    { background: rgba(168,181,200,.1);  color: var(--c-muted); }
.wcag-guide-status-badge.status-todo        { background: rgba(168,181,200,.1);  color: var(--c-muted); }

/* Tick buttons */
.wcag-tick-btn { background: var(--c-panel-raised); color: var(--c-text); border-color: var(--c-border-mid); }
.wcag-tick-btn:hover { border-color: var(--c-brand); background: var(--c-panel-raised); }
.wcag-tick-btn[data-action="fixed"].is-active     { background: rgba(52,211,153,.15); border-color: #34d399;  color: #34d399; }
.wcag-tick-btn[data-action="in_progress"].is-active { background: rgba(251,191,36,.12); border-color: #fbbf24; color: #fbbf24; }
.wcag-tick-btn[data-action="wont_fix"].is-active  { background: rgba(168,181,200,.1);  border-color: var(--c-muted); color: var(--c-muted); }

.wcag-tick-compact { background: var(--c-panel-raised); border-color: var(--c-border-mid); }
.wcag-tick-compact[data-action="fixed"].is-active     { background: rgba(52,211,153,.2);  border-color: #34d399; }
.wcag-tick-compact[data-action="in_progress"].is-active { background: rgba(251,191,36,.15); border-color: #fbbf24; }
.wcag-tick-compact[data-action="wont_fix"].is-active  { background: rgba(168,181,200,.1);  border-color: var(--c-muted); }
.wcag-tracker-note-toggle { background: var(--c-panel-raised); border-color: var(--c-border-mid); color: var(--c-muted); }
.wcag-tick-note { background: var(--c-bg); color: var(--c-text); border-color: var(--c-border-mid); }

/* Tracker items */
.wcag-tracker-item { background: var(--c-panel); }
.wcag-tracker-item[data-status="fixed"]       { background: rgba(52,211,153,.07); }
.wcag-tracker-item[data-status="in_progress"] { background: rgba(251,191,36,.07); }
.wcag-tracker-item[data-status="wont_fix"]    { background: var(--c-panel); opacity: .6; }

/* Issue table */
.wcag-issue-table th { background: rgba(255,255,255,.04); border-bottom-color: var(--c-border); }
.wcag-issue-table td { border-bottom-color: var(--c-border); }
.wcag-issue-table code { background: rgba(255,255,255,.06); color: var(--c-text); }
.wcag-page-summary:hover { background: var(--c-panel-raised); }

/* Type pills — dark-friendly */
.wcag-type-deep      { background: rgba(124,58,237,.2);  color: #a78bfa; }
.wcag-type-heuristic { background: rgba(96,165,250,.15); color: #60a5fa; }

/* Info callout */
.wcag-info-callout { background: rgba(41,182,200,.08); border-color: rgba(41,182,200,.25); color: #29b6c8; }

/* Footer */
.wcag-portal-footer { background: #0b0f14; border-top-color: var(--c-border); color: var(--c-muted); }

/* AI recs section */
.wcag-guide-ai-recs { background: rgba(41,182,200,.06); border-color: rgba(41,182,200,.2); }
.wcag-guide-ai-recs-toggle { background: rgba(41,182,200,.1); color: var(--c-text); }
.wcag-guide-ai-count { background: rgba(41,182,200,.2); color: #29b6c8; }
.wcag-guide-ai-rec-item { background: var(--c-panel-raised); border-color: var(--c-border-mid); }
.wcag-guide-ai-rec-header strong { color: var(--c-text); }
.wcag-guide-ai-why, .wcag-guide-ai-how { color: var(--c-muted); }
.wcag-guide-ai-rec-header .wcag-guide-criterion { color: var(--c-muted); }

/* Dropdown hover */
.wcag-switcher-item:hover { background: var(--c-panel-raised); }

/* Progress fill — teal accent in dark theme */
.wcag-section-bar-fill { background: var(--c-brand); }

/* ── Theme toggle button ──────────────────────────────────────────── */
.wcag-theme-toggle {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 5px 9px;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 0;
}
.wcag-theme-toggle:hover { background: rgba(255,255,255,.22); }
.wcag-theme-icon-light { display: none; }
.wcag-theme-icon-dark  { display: inline; }

/* ── Light theme overrides ────────────────────────────────────────── */
body.wcag-portal[data-theme="light"] {
  --c-bg:           #f4f6fb;
  --c-panel:        #ffffff;
  --c-panel-raised: #f0f4fa;
  --c-border:       #e2e8f0;
  --c-border-mid:   #cbd5e1;
  --c-text:         #1e293b;
  --c-muted:        #64748b;
  --c-high:         #dc2626;
  --c-med:          #d97706;
  --c-low:          #2563eb;
  --c-ok:           #059669;
  --shadow:         0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
}

body.wcag-portal[data-theme="light"] .wcag-theme-icon-light { display: inline; }
body.wcag-portal[data-theme="light"] .wcag-theme-icon-dark  { display: none; }
body.wcag-portal[data-theme="light"] .wcag-theme-toggle {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.15);
  color: #fff;
}

/* Light mode: header + panels + nav */
body.wcag-portal[data-theme="light"] .wcag-portal-header { background: linear-gradient(90deg, #1e8fa0 0%, #29b6c8 60%, #3dd3e8 100%); }
body.wcag-portal[data-theme="light"] .wcag-portal-nav { background: #fff; border-bottom-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-portal-nav-link { color: var(--c-muted); }
body.wcag-portal[data-theme="light"] .wcag-portal-nav-link.is-active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
body.wcag-portal[data-theme="light"] .wcag-portal-panel { background: var(--c-panel); box-shadow: var(--shadow); }
body.wcag-portal[data-theme="light"] .wcag-dash-card { background: var(--c-panel); box-shadow: var(--shadow); color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-portal-footer { background: #e8ecf4; border-top-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-chart-card { background: var(--c-panel); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-guide-card { background: var(--c-panel); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-guide-card-header { background: var(--c-panel-raised); border-bottom-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-tracker-item { background: var(--c-panel); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-report-row { background: var(--c-panel); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-scan-card { background: var(--c-panel-raised); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-guide-ai-recs { background: #f0fbfd; border-color: rgba(41,182,200,.3); }
body.wcag-portal[data-theme="light"] .wcag-guide-ai-recs-toggle { background: rgba(41,182,200,.1); color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-guide-ai-rec-item { background: var(--c-panel-raised); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-info-callout { background: #f0fbfd; border-color: rgba(41,182,200,.3); color: #0e7a8a; }
body.wcag-portal[data-theme="light"] .wcag-issue-table th { background: var(--c-panel-raised); border-bottom-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-issue-table td { border-bottom-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-issue-table code { background: var(--c-panel-raised); color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-type-deep      { background: rgba(124,58,237,.1);  color: #6d28d9; }
body.wcag-portal[data-theme="light"] .wcag-type-heuristic { background: rgba(37,99,235,.1);   color: #2563eb; }
body.wcag-portal[data-theme="light"] .wcag-tick-btn { background: var(--c-panel-raised); border-color: var(--c-border); color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-tick-btn:hover { border-color: var(--c-brand); }
body.wcag-portal[data-theme="light"] .wcag-tick-note { background: var(--c-panel-raised); border-color: var(--c-border); color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-switcher-dropdown { background: var(--c-panel); border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-switcher-item { color: var(--c-text); }
body.wcag-portal[data-theme="light"] .wcag-switcher-item:hover { background: var(--c-panel-raised); }
body.wcag-portal[data-theme="light"] .wcag-filter-btn { background: var(--c-panel-raised); border-color: var(--c-border); color: var(--c-muted); }
body.wcag-portal[data-theme="light"] .wcag-filter-btn.is-active { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
body.wcag-portal[data-theme="light"] .wcag-compare-table th,
body.wcag-portal[data-theme="light"] .wcag-compare-table td { border-color: var(--c-border); }
body.wcag-portal[data-theme="light"] .wcag-progress-track { background: var(--c-panel-raised); }
.wcag-score-fill       { stroke: var(--c-brand); }

/* ── Suspended portal screen ──────────────────────────────────────────── */
.wcag-portal-suspended-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.wcag-portal-suspended-wrap {
  text-align: center;
  max-width: 480px;
  padding: 40px 24px;
}
.wcag-portal-suspended-icon {
  font-size: 56px;
  margin-bottom: 20px;
  opacity: .7;
}
.wcag-portal-suspended-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 12px;
}
.wcag-portal-suspended-body {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.wcag-portal-suspended-cta {
  display: inline-block;
  padding: 11px 28px;
  background: var(--c-brand);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.wcag-portal-suspended-cta:hover { background: var(--c-brand-dark); }

/* Suspension warning banner shown to admins browsing a suspended portal */
.wcag-portal-suspended-banner {
  background: #7c2d12;
  color: #fef3c7;
  font-size: 13px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.wcag-portal-suspended-banner a { color: #fcd34d; text-decoration: underline; margin-left: 6px; }

/* ── Nav back-link ────────────────────────────────────────────────────── */
.wcag-portal-nav-back {
  color: var(--c-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  transition: color .15s;
}
.wcag-portal-nav-back:hover { color: var(--c-text); }
.wcag-portal-nav-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--c-border-mid);
  margin: 0 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Hub overview ─────────────────────────────────────────────────────── */
.wcag-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wcag-hub-composite {
  text-align: center;
  background: var(--c-panel-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px 28px;
  flex-shrink: 0;
}
.wcag-hub-composite-num  { font-size: 42px; font-weight: 800; line-height: 1; font-family: var(--font-display); }
.wcag-hub-composite-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-top: 4px; }

.wcag-hub-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
@media (max-width: 680px) { .wcag-hub-tiles { grid-template-columns: 1fr; } }

.wcag-hub-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-top: 3px solid;
  border-radius: var(--radius);
  padding: 22px 16px 18px;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  cursor: pointer;
}
.wcag-hub-tile:hover { background: var(--c-panel-raised); transform: translateY(-2px); }
.wcag-hub-tile-inactive { opacity: .55; }
.wcag-hub-tile-inactive:hover { opacity: .75; transform: none; }

.wcag-hub-tile-icon  { font-size: 26px; margin-bottom: 10px; }
.wcag-hub-tile-score { font-size: 36px; font-weight: 800; line-height: 1; font-family: var(--font-display); margin-bottom: 4px; }
.wcag-hub-tile-label { font-size: 13px; font-weight: 700; color: var(--c-text); margin-bottom: 2px; }
.wcag-hub-tile-sub   { font-size: 11px; color: var(--c-muted); margin-bottom: 14px; }
.wcag-hub-tile-link  { font-size: 12px; color: var(--c-brand); font-weight: 600; margin-top: auto; }

/* Light theme overrides for hub */
body.wcag-portal[data-theme="light"] .wcag-hub-composite { background: #f8fafc; border-color: #e2e8f0; }
body.wcag-portal[data-theme="light"] .wcag-hub-tile { background: #fff; border-color: #e2e8f0; }
body.wcag-portal[data-theme="light"] .wcag-hub-tile:hover { background: #f8fafc; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.wcag-timeline { display: flex; flex-direction: column; gap: 0; max-width: 760px; }

.wcag-tl-entry { display: flex; gap: 0; align-items: flex-start; }

.wcag-tl-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  padding-top: 18px;
}
.wcag-tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-panel-raised);
  border: 2px solid var(--c-border-mid);
  flex-shrink: 0;
  transition: border-color .15s;
}
.wcag-tl-dot-deep    { border-color: var(--c-brand); background: var(--c-brand-glow); }
.wcag-tl-dot-latest  { width: 18px; height: 18px; border-color: var(--c-brand); background: var(--c-brand); box-shadow: 0 0 0 4px var(--c-brand-glow); }
.wcag-tl-line        { width: 2px; flex: 1; min-height: 24px; background: var(--c-border); margin-top: 4px; }

.wcag-tl-card {
  flex: 1;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  margin-left: 12px;
  transition: border-color .15s;
}
.wcag-tl-card-latest { border-color: var(--c-brand); }
.wcag-tl-card:hover  { border-color: var(--c-border-mid); }

/* Header */
.wcag-tl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wcag-tl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wcag-tl-date { font-weight: 600; font-size: 15px; color: var(--c-text); }

.wcag-tl-type-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid;
}
.wcag-tl-deep      { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-glow); }
.wcag-tl-heuristic { color: var(--c-muted); border-color: var(--c-border); background: transparent; }

.wcag-tl-latest-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-brand); background: var(--c-brand-glow);
  border: 1px solid var(--c-brand);
  padding: 2px 7px; border-radius: 99px;
}
.wcag-tl-label { font-size: 12px; color: var(--c-muted); font-style: italic; }

/* Score */
.wcag-tl-score-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wcag-tl-composite {
  font-size: 28px; font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
}
.wcag-tl-composite-label { font-size: 12px; font-weight: 400; color: var(--c-muted); margin-left: 2px; }

.wcag-tl-delta {
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px;
}
.tl-up   { color: #059669; background: rgba(5,150,105,.15); }
.tl-down { color: #dc2626; background: rgba(220,38,38,.15); }
.tl-flat { color: var(--c-muted); background: rgba(255,255,255,.06); }

/* Module scores row */
.wcag-tl-modules {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  margin-bottom: 12px;
}
.wcag-tl-mod { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.wcag-tl-mod-icon  { font-size: 15px; }
.wcag-tl-mod-score { font-weight: 700; color: var(--c-text); }
.wcag-tl-mod-name  { color: var(--c-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* Issue pills */
.wcag-tl-issues { display: flex; flex-wrap: wrap; gap: 6px; }
.wcag-tl-pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid transparent;
}
.wcag-tl-pill-high { color: var(--c-high); background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.wcag-tl-pill-med  { color: var(--c-med);  background: rgba(251,191,36,.1);  border-color: rgba(251,191,36,.3);  }
.wcag-tl-pill-low  { color: var(--c-low);  background: rgba(96,165,250,.1);  border-color: rgba(96,165,250,.3);  }
.wcag-tl-pill-ok   { color: var(--c-ok);   background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.3);  }

@media (max-width: 600px) {
  .wcag-tl-header { flex-direction: column; gap: 10px; }
  .wcag-tl-score-group { align-self: flex-end; }
  .wcag-tl-composite { font-size: 22px; }
}