/* ===========================================
   ADMIN & HEALTH DASHBOARDS
   =========================================== */

/* Admin dashboards (templates/dashboards/admin-*.html). Every admin
   page had a duplicate `h1 { font-size: 2rem; margin-bottom: 0.5rem; }`
   inline, consolidated here. */

/* System health dashboard (templates/pages/health.html). */
.health-page {
  padding: var(--gap-page);
}

.health-page .health-container {
  max-width: 900px;
  margin: 0 auto;
}

.health-page .health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.health-page .health-card {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
}

.health-page .health-card h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page .status-indicator {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  display: inline-block;
}

.health-page .status-ok { background: var(--success); }
.health-page .status-warn { background: var(--warning); }
.health-page .status-error { background: var(--danger); }
.health-page .status-unknown { background: var(--content-muted); }

.health-page .health-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-peer) var(--gap-section);
  font-size: var(--text-note);
}

.health-page .health-card dt { opacity: 0.7; }
.health-page .health-card dd {
  font-family: var(--font-mono);
  text-align: right;
}

.health-page .section-title {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin: var(--gap-page) 0 var(--gap-section);
  padding-bottom: var(--gap-peer);
  border-bottom: 1px solid var(--border);
}
.health-page .test-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.health-page .test-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-note);
}

.health-page .test-list li:last-child { border-bottom: none; }

.health-page .test-name { font-family: var(--font-mono); }

.health-page .test-pass { color: var(--success); }
.health-page .test-fail { color: var(--danger); }
.health-page .summary-bar {
  display: flex;
  gap: var(--gap-page);
  padding: var(--gap-section);
  background: var(--surface-sunken);
  margin-bottom: var(--gap-page);
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.health-page .summary-item {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page .timestamp {
  font-size: var(--text-fine);
  opacity: 0.6;
  text-align: right;
  margin-top: var(--gap-page);
}

.health-page details.check-list {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.health-page details.check-list summary {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

.health-page details.check-list summary::-webkit-details-marker { display: none; }

.health-page details.check-list summary::before {
  content: "▶";
  font-size: var(--text-fine);
  transition: transform 0.15s;
}

.health-page details.check-list[open] summary::before {
  transform: rotate(90deg);
}

.health-page details.check-list .test-list {
  margin-top: var(--gap-section);
}
/* ===========================================
   IMPORT WIZARD
   =========================================== */

/* Import data wizard (templates/dashboards/dashboard-import.html).
   Page-specific upload + column-mapping + progress flow. Migration also
   fixed token bypasses: --border-color → --border, --accent → --highlight,
   --success-background → --success-bg, --error-background → --error-bg. */

.import-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.import-page .back-link:hover { opacity: 1; }

.import-page .form-group { margin-bottom: var(--gap-pane); }

.import-page .form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-note);
  font-weight: bold;
  margin-bottom: var(--gap-peer);
}

.import-page .form-group select,
.import-page .form-group input[type="file"] {
  width: 100%;
  padding: var(--gap-peer);
  font-size: var(--text-note);
  border: 1px solid var(--border);
  background: var(--surface-page);
}

.import-page .csv-preview {
  margin-top: var(--gap-section);
  overflow-x: auto;
}

.import-page .csv-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}

.import-page .csv-preview th,
.import-page .csv-preview td {
  padding: var(--gap-peer) var(--gap-group);
  border: 1px solid var(--border);
  text-align: left;
}

.import-page .csv-preview th {
  background: var(--surface-sunken);
  font-family: var(--font-mono);
}

.import-page .column-mapping { margin-top: var(--gap-section); }

.import-page .mapping-row {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
  margin-bottom: var(--gap-peer);
}

.import-page .mapping-row label {
  min-width: 100px;
  font-size: var(--text-note);
  font-family: var(--font-mono);
  margin-bottom: 0;
}

.import-page .mapping-row select {
  flex: 1;
  padding: var(--gap-bound);
  font-size: var(--text-note);
}

.import-page .progress-stats {
  display: flex;
  gap: var(--gap-page);
  font-size: var(--text-note);
  font-family: var(--font-mono);
}

.import-page .progress-stats .stat-value { font-weight: bold; }

.import-page .import-result {
  padding: var(--gap-section);
  margin-bottom: var(--gap-section);
  font-size: var(--text-note);
}

.import-page .import-result.success { background: color-mix(in oklch, var(--success) 12%, var(--surface-page)); }
.import-page .import-result.error { background: color-mix(in oklch, var(--danger) 10%, var(--surface-page)); }

.import-page .error-log {
  margin-top: var(--gap-section);
  padding: var(--gap-peer);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.import-page .import-history { margin-top: var(--gap-page); }

.import-page .history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-note);
}

.import-page .history-table th,
.import-page .history-table td {
  padding: var(--gap-peer);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.import-page .history-table th {
  font-family: var(--font-mono);
  font-weight: bold;
}

.import-page .import-note {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-top: var(--gap-page);
  font-size: var(--text-note);
}

.import-page .import-note h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

/* ===========================================
   DELETE ACCOUNT PAGE
   =========================================== */

/* Delete account page (templates/dashboards/dashboard-delete-account.html).
   Overrides .warning-box to use --danger (delete is danger, not warning)
   and the .form-status partial styling. Scoped to keep the global versions
   intact for other pages. */

.delete-account-page .warning-box {
  background: var(--danger);
  color: var(--primary-light);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.delete-account-page .warning-box h3 {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-peer);
}

.delete-account-page .warning-box ul {
  margin: var(--gap-peer) 0 0 var(--gap-pane);
  font-size: var(--text-note);
}

.delete-account-page .warning-box li { margin-bottom: var(--gap-bound); }

.delete-account-page .export-prompt {
  background: var(--surface-sunken);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-page);
}

.delete-account-page .export-prompt h3 {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  margin-bottom: var(--gap-peer);
}

.delete-account-page .export-prompt p {
  font-size: var(--text-note);
  margin-bottom: var(--gap-section);
}

.delete-account-page .delete-form {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
}

.delete-account-page .delete-form .form-group { margin-bottom: var(--gap-pane); }

.delete-account-page .delete-form label {
  display: block;
  margin-bottom: var(--gap-peer);
  font-family: var(--font-mono);
  font-size: var(--text-note);
}

.delete-account-page .delete-form .hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-top: var(--gap-bound);
}

.delete-account-page .delete-form input[type="text"] {
  width: 100%;
  padding: var(--gap-section);
  font-size: var(--text-body);
  border: 2px solid var(--border);
  background: var(--surface-sunken);
}

.delete-account-page .delete-form input[type="text"]:focus {
  border-color: var(--danger);
  outline: none;
}

.delete-account-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.delete-account-page .back-link:hover { opacity: 1; }

.delete-account-page .form-actions {
  display: flex;
  gap: var(--gap-section);
  align-items: center;
}

.delete-account-page .form-status { font-size: var(--text-note); }
.delete-account-page .form-status.error { color: var(--danger); }
.delete-account-page .form-status.success { color: var(--success); }

/* ===========================================
   EXPORT PAGE
   =========================================== */

/* Export data page (templates/dashboards/dashboard-export.html).
   `.export-card` and its inner classes (`-info`, `-title`, `-desc`, `-meta`)
   are intentionally page-scoped: this is a row-layout card (info on left,
   action button on right, flex justify-between) that doesn't fit `.card-muted`
   cleanly. Background uses `--light-background` rather than `--surface-muted`
   for visual distinction from the surrounding dashboard surface. */

.export-page .export-cards {
  display: grid;
  gap: var(--gap-section);
}

.export-page .export-card {
  background: var(--surface-overlay);
  padding: var(--gap-pane);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-section);
}

.export-page .export-card-info { flex: 1; }

.export-page .export-card-title {
  font-family: var(--font-mono);
  font-weight: bold;
  font-size: var(--text-lead);
  margin-bottom: var(--gap-peer);
}

.export-page .export-card-desc {
  font-size: var(--text-note);
  opacity: 0.8;
  margin-bottom: var(--gap-peer);
}

.export-page .export-card-meta {
  font-size: var(--text-fine);
  opacity: 0.6;
}

.export-page .export-card button { white-space: nowrap; }

.export-page .export-note {
  background: var(--surface-sunken);
  padding: var(--gap-section);
  margin-top: var(--gap-page);
  font-size: var(--text-note);
}

.export-page .export-note h3 {
  font-family: var(--font-mono);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

.export-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.export-page .back-link:hover { opacity: 1; }

.export-page .export-status {
  margin-top: var(--gap-peer);
  font-size: var(--text-note);
}

.export-page .export-status.success { color: var(--success); }
.export-page .export-status.error { color: var(--danger); }