/**
 * EduBridgeSA — shared surface ↔ text contrast layer
 *
 * Token-first pairing for dark shells and light raised panels.
 * Loaded after design-tokens.css in learner + admin shells.
 * Do not invent page-local text colours for the same semantic role.
 */

:root {
  /* Dark surfaces (page chrome, glass shells, inverse heroes) */
  --text-primary-dark-surface: #f8fafc;
  --text-secondary-dark-surface: #dbe5f5;
  --text-muted-dark-surface: #b8c7dc;
  --link-on-dark: #93c5fd;
  --link-on-dark-hover: #bfdbfe;
  --border-on-dark: rgba(148, 163, 184, 0.28);
  --surface-dark: #0b1220;
  --surface-dark-raised: rgba(17, 26, 46, 0.88);

  /* Light surfaces (workflow panels, nested cards, tables on pale fills) */
  --text-primary-light-surface: #0f172a;
  --text-secondary-light-surface: #334155;
  --text-muted-light-surface: #475569;
  --link-on-light: #1d4ed8;
  --link-on-light-hover: #1e40af;
  --border-on-light: rgba(100, 116, 139, 0.35);
  --surface-light: #ffffff;
  --surface-light-raised: rgba(255, 255, 255, 0.96);

  /* Form / control readability */
  --placeholder-on-dark: rgba(226, 232, 240, 0.72);
  --placeholder-on-light: #64748b;
  --disabled-text-on-dark: rgba(226, 232, 240, 0.62);
  --disabled-text-on-light: #64748b;
  --focus-ring-contrast: #2563eb;
  --form-control-bg-dark: #0b1222;
  --form-control-text-dark: #f8fafc;
  --form-control-muted-dark: #94a3b8;
  --form-control-border-dark: rgba(148, 163, 184, 0.38);
  --form-control-option-bg-dark: #0f172a;
  --form-control-option-text-dark: #f8fafc;

  /* Status chip foregrounds that stay readable on tinted fills */
  --status-success-fg: #14532d;
  --status-success-bg: #dcfce7;
  --status-warning-fg: #92400e;
  --status-warning-bg: #fef3c7;
  --status-danger-fg: #991b1b;
  --status-danger-bg: #fee2e2;
  --status-info-fg: #1e3a8a;
  --status-info-bg: #dbeafe;
  --status-pending-fg: #334155;
  --status-pending-bg: #e2e8f0;

  /* Back-compat aliases used across existing CSS */
  --student-light-surface-text: var(--text-primary-light-surface);
  --student-light-surface-subtext: var(--text-secondary-light-surface);
  --student-light-surface-muted: var(--text-muted-light-surface);
  --student-workflow-text-primary: var(--text-primary-light-surface);
  --student-workflow-text-secondary: var(--text-secondary-light-surface);
  --student-workflow-text-muted: var(--text-muted-light-surface);
}

/* -------------------------------------------------------------------------- */
/* Dark shell chrome — keep light text on dark page/sidebar surfaces           */
/* -------------------------------------------------------------------------- */

body.student-shell-body,
body.student-product-page,
body.admin-body,
.admin-shell,
.student-shell__sidebar,
.student-shell__brand,
.student-shell__nav,
.student-shell__profile {
  --on-surface-text: var(--text-primary-dark-surface);
  --on-surface-text-secondary: var(--text-secondary-dark-surface);
  --on-surface-text-muted: var(--text-muted-dark-surface);
  --on-surface-link: var(--link-on-dark);
  --on-surface-border: var(--border-on-dark);
}

/* -------------------------------------------------------------------------- */
/* Light raised surfaces — force dark readable text (fixes white-on-white)     */
/* -------------------------------------------------------------------------- */

.eb-surface-light,
.student-workflow-panel,
.student-workflow-card,
.student-workflow-table,
.student-workflow-form,
.student-workflow-empty,
.student-data-point,
.student-metric,
.student-submit-summary,
.student-progress-step,
.student-application-summary,
.student-state-card,
.student-status-pill,
.student-workflow-chip,
.student-suite-card,
.workspace-app-card,
.student-interior-checklist__item,
.student-interior-note,
.workspace-app-list--loading,
.workspace-app-empty,
.glass-panel.student-light-panel,
.manage-students-page .table-shell,
.manage-students-page .filter-card,
.admin-page .bg-white,
.admin-page .bg-light,
.admin-page .table-light {
  --on-surface-text: var(--text-primary-light-surface);
  --on-surface-text-secondary: var(--text-secondary-light-surface);
  --on-surface-text-muted: var(--text-muted-light-surface);
  --on-surface-link: var(--link-on-light);
  --on-surface-border: var(--border-on-light);
  color: var(--on-surface-text);
}

.student-workflow-panel :is(h1, h2, h3, h4, h5, h6),
.student-workflow-card :is(h1, h2, h3, h4, h5, h6),
.student-workflow-form :is(h1, h2, h3, h4, h5, h6),
.student-workflow-empty :is(h1, h2, h3, h4, h5, h6),
.student-workflow-panel .student-interior-header :is(h2, h3, p),
.student-suite-card :is(h2, h3, strong),
.workspace-app-card :is(h2, h3, strong),
.student-progress-step-title,
.student-status-pill,
.student-workflow-chip {
  color: var(--text-primary-light-surface);
}

.student-workflow-panel :is(p, li, label, td, th, small, .muted, .student-suite-muted, .text-muted),
.student-workflow-card :is(p, li, label, .muted, .text-muted),
.student-progress-step-copy,
.student-state-subcopy,
.student-data-point span,
.student-metric-label,
.student-state-card span {
  color: var(--text-secondary-light-surface);
}

.student-workflow-panel a:not(.btn):not(.eb-btn):not(.btn-premium),
.student-workflow-card a:not(.btn):not(.eb-btn):not(.btn-premium),
.student-suite-card a:not(.btn):not(.eb-btn) {
  color: var(--link-on-light);
}

.student-workflow-panel a:not(.btn):not(.eb-btn):hover,
.student-workflow-card a:not(.btn):not(.eb-btn):hover {
  color: var(--link-on-light-hover);
}

/* Nested pale tiles inside panels keep the same light-surface pairing */
.student-workflow-panel .student-data-point,
.student-workflow-panel .student-state-card,
.student-workflow-panel .student-progress-step,
.student-workflow-panel article {
  color: var(--text-primary-light-surface);
}

.student-workflow-panel .student-data-point strong,
.student-workflow-panel .student-state-card strong,
.student-workflow-panel article strong {
  color: var(--text-primary-light-surface);
}

/* -------------------------------------------------------------------------- */
/* Inverse / dark heroes stay light-on-dark                                    */
/* -------------------------------------------------------------------------- */

.eb-surface-dark,
.student-workflow-hero,
.student-shell__sidebar {
  --on-surface-text: var(--text-primary-dark-surface);
  --on-surface-text-secondary: var(--text-secondary-dark-surface);
  --on-surface-text-muted: var(--text-muted-dark-surface);
  --on-surface-link: var(--link-on-dark);
}

.student-workflow-hero,
.student-workflow-hero :is(h1, h2, h3, h4, p, .student-workflow-kicker) {
  color: var(--text-primary-dark-surface);
}

.student-workflow-hero .student-workflow-caption {
  color: var(--text-secondary-dark-surface);
}

.student-workflow-hero a:not(.btn):not(.eb-btn):not(.btn-premium) {
  color: var(--link-on-dark);
}

/* Nested glass/articles inside light workflow panels are light surfaces */
.student-workflow-panel .glass-panel,
.student-workflow-panel article.glass-panel,
.student-workflow-panel article {
  --on-surface-text: var(--text-primary-light-surface);
  color: var(--text-primary-light-surface);
}

.student-workflow-panel .glass-panel :is(h1, h2, h3, h4, p, strong),
.student-workflow-panel article :is(h1, h2, h3, h4, p, strong) {
  color: var(--text-primary-light-surface);
}

.student-workflow-panel .glass-panel :is(.muted, .text-muted, small),
.student-workflow-panel article :is(.muted, .text-muted, small) {
  color: var(--text-secondary-light-surface);
}

.glass-panel.student-workflow-panel :is(h1, h2, h3, h4),
.student-dashboard-page .student-workflow-panel :is(h1, h2, h3, h4) {
  color: var(--text-primary-light-surface);
}

/* Dashboard nested light tiles (even when parent glass is dark) */
.student-dashboard-page .student-workflow-meta-grid .student-data-point,
.student-dashboard-page .student-state-card,
.student-dashboard-page .student-progress-step,
.student-dashboard-page .student-status-pill {
  color: var(--text-primary-light-surface);
}

.student-dashboard-page .student-data-point strong,
.student-dashboard-page .student-state-card strong,
.student-dashboard-page .student-progress-step-title {
  color: var(--text-primary-light-surface);
}

.student-dashboard-page .student-data-point span,
.student-dashboard-page .student-state-card span,
.student-dashboard-page .student-progress-step-copy {
  color: var(--text-secondary-light-surface);
}

/* -------------------------------------------------------------------------- */
/* Forms / placeholders / autofill on dark auth surfaces                       */
/* -------------------------------------------------------------------------- */

.eb-surface-dark input::placeholder,
.eb-surface-dark textarea::placeholder,
.login-card .form-control::placeholder,
.student-shell__sidebar input::placeholder {
  color: var(--placeholder-on-dark);
  opacity: 1;
}

.eb-surface-light input::placeholder,
.eb-surface-light textarea::placeholder,
.student-workflow-panel input::placeholder,
.student-workflow-form input::placeholder {
  color: var(--placeholder-on-light);
  opacity: 1;
}

.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus,
.login-card .form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-primary-dark-surface);
  caret-color: var(--text-primary-dark-surface);
  color: var(--text-primary-dark-surface);
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 17, 34, 0.98) inset;
  box-shadow: 0 0 0 1000px rgba(8, 17, 34, 0.98) inset;
  transition: background-color 99999s ease-out 0s;
}

.login-card .form-control:-webkit-autofill::first-line {
  color: var(--text-primary-dark-surface);
}

/* -------------------------------------------------------------------------- */
/* Focus indicators                                                            */
/* -------------------------------------------------------------------------- */

.student-workflow-panel :is(a, button, input, select, textarea, .eb-btn, .btn):focus-visible,
.student-shell__nav a:focus-visible,
.admin-page :is(a, button, input, select, textarea, .btn):focus-visible,
.login-card :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring-contrast);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Status colours — keep semantics, enforce readable fg/bg pairs               */
/* -------------------------------------------------------------------------- */

.learner-state-chip.tone-success,
.badge.bg-success,
.status-success {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-color: transparent;
}

.learner-state-chip.tone-warning,
.badge.bg-warning,
.status-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.learner-state-chip.tone-danger,
.badge.bg-danger,
.status-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}

.learner-state-chip.tone-info,
.badge.bg-info,
.status-info {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
}

.learner-state-chip.tone-neutral,
.learner-state-chip.tone-pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

/* Bootstrap warning/info badges often use dark text already; keep AA on tinted fills */
.admin-page .badge.bg-warning {
  color: var(--status-warning-fg) !important;
}

.admin-page .badge.bg-info {
  color: var(--status-info-fg) !important;
}

/* -------------------------------------------------------------------------- */
/* Admin muted text — ensure token exists under dark shell                     */
/* -------------------------------------------------------------------------- */

.admin-page {
  --text-muted: var(--text-muted-dark-surface);
  --text-secondary: var(--text-secondary-dark-surface);
}

.admin-page .text-muted {
  color: var(--text-muted-dark-surface) !important;
}

/* Light Bootstrap cards remapped by admin-convergence still need muted clarity */
.admin-page .card .text-muted,
.admin-page .table-shell .text-muted {
  color: var(--text-muted-dark-surface) !important;
}