/**
 * Dashboard & App-Wide Text Visibility – Unfold / High-Contrast
 * Ensures EVERY text is visible by default (no overlay-only or hover-only critical text).
 * WCAG AA–aligned contrast; minimal use of opacity for critical content.
 */

/* ===== 1. Global: .text-muted must meet minimum contrast ===== */
.text-muted,
.small.text-muted {
  /* Light themes: set in blocks below via var(--vis-text-muted, …) */
  color: var(--vis-text-muted, var(--admin-content-text-muted));
}
html[data-bs-theme="light"] .text-muted,
html[data-bs-theme="light"] .small.text-muted,
body.portal-backend-light .text-muted,
body.portal-backend-light .small.text-muted,
:root:not([data-theme="dark"]) .text-muted,
:root:not([data-theme="dark"]) .small.text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .small.text-muted,
body.portal-backend-dark .text-muted,
body.portal-backend-dark .small.text-muted,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .small.text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* Cards: muted text inside cards */
#dashboard-layout .text-muted,
#dashboard-layout .small.text-muted,
.card .text-muted,
.card .small.text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted));
}
body.portal-backend-light #dashboard-layout .text-muted,
body.portal-backend-light .card .text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body.portal-backend-dark #dashboard-layout .text-muted,
body.portal-backend-dark .card .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* ===== 2. No critical text hidden until hover ===== */
/* Buttons/links that have only title= should expose label when possible;
   we don't hide .btn or .nav-link text with opacity in global scope. */
a[title]:not([aria-label]) .visually-hidden,
button[title]:not([aria-label]) .visually-hidden {
  /* Screen-reader-only; prefer visible span for primary actions. */
  opacity: 1;
}

/* ===== 3. Admin sidebar: tooltip when shown = high contrast (no white-on-white) ===== */
.sidebar-tooltip,
#nav-sidebar .sidebar-tooltip {
  background: var(--surface-canvas, var(--color-base-800)) !important;
  color: var(--text-tertiary, var(--color-base-50)) !important;
  border: 1px solid var(--hairline, var(--color-base-700)); /* theme-locked-allow: manual-review */
  font-weight: 500;
}
.sidebar a:hover .sidebar-tooltip,
#nav-sidebar a:hover .sidebar-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Admin sidebar expanded: ensure link text and headings are high contrast */
#nav-sidebar .admin-sidebar-link,
#nav-sidebar .admin-sidebar-model-link,
#nav-sidebar .admin-sidebar-app-title a,
#nav-sidebar .admin-sidebar-section-title {
  color: var(--admin-sidebar-text, var(--color-base-100));
}
#nav-sidebar .admin-sidebar-link:hover,
#nav-sidebar .admin-sidebar-model-link:hover {
  color: var(--text-on-brand, var(--color-base-0));
}
#nav-sidebar .admin-sidebar-heading,
#nav-sidebar .module h2,
#nav-sidebar .module caption {
  color: var(--admin-sidebar-heading, var(--color-base-200));
}

/* Unfold navigation helper: muted line (school name/tagline) = readable ===== */
.admin-sidebar-brand-link-header .text-xs.truncate,
.unfold .text-subtle {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* ===== 4. Portal topbar & sidebar: white text on dark = sufficient contrast ===== */
.topbar.text-white,
.topbar .text-white,
.navbar-dark .navbar-brand {
  color: var(--text-tertiary, var(--color-base-50)) !important;
}
.topbar .btn-link.text-white:hover {
  color: var(--text-on-brand, var(--color-base-0)) !important;
  opacity: 1;
}

/* Portal sidebar nav text ===== */
.portal-sidebar-wrapper .nav-link,
.partial-sidebar .nav-link {
  color: inherit;
}
.portal-sidebar-wrapper .nav-link:hover {
  opacity: 1;
}

/* ===== 5. Dashboard: labels and values always visible ===== */
.dashboard-kpi-label,
.dashboard-kpi-value,
#dashboard-layout .card-title,
#dashboard-layout .card-body h5,
#dashboard-layout .card-body h6 {
  opacity: 1 !important;
}

/* ===== 6. Truncated text: ensure it's still readable (no opacity hacks) ===== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Don't hide truncated text with opacity */
.truncate {
  opacity: 1;
}

/* ===== 7. Icon-only buttons: ensure title/aria-label is not the ONLY info ===== */
/* Chart export: visible label added in template; here ensure button text visible */
.dashboard-chart-export,
.btn[title="Download as PNG"] {
  color: var(--bs-body-color, var(--color-base-900));
}
body.portal-backend-dark .dashboard-chart-export,
body.portal-backend-dark .btn[title="Download as PNG"] {
  color: var(--text-tertiary, var(--color-base-200));
}

/* ===== 8. Meta tags / secondary labels in cards ===== */
.meta-tag,
.card .meta-tag {
  color: inherit;
}
body.portal-backend-light .meta-tag {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body.portal-backend-dark .meta-tag {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* ===== 9. Copilot / sidebar right: list labels visible ===== */
#dashboard-layout .backend-copilot-usage li,
#dashboard-layout .backend-copilot-audit li {
  color: inherit;
  opacity: 1;
}

/* ===== 10. Form labels on dashboards ===== */
#dashboard-layout .form-label,
#dashboard-layout label.small {
  color: inherit !important;
}
body.portal-backend-light #dashboard-layout .form-label {
  color: var(--vis-text, var(--admin-content-text)) !important;
}
body.portal-backend-dark #dashboard-layout .form-label {
  color: var(--vis-text, var(--admin-sidebar-text)) !important;
}

/* ===== 11. Design token overrides for minimum contrast (no overlay-only text) ===== */
/* Ensure muted/secondary text is always readable; never rely on hover to see critical info. */
[data-theme="dark"] {
  --admin-sidebar-text-muted: var(--vis-text-muted, var(--admin-content-text-muted));
  --portal-text-muted: var(--vis-text-muted, var(--admin-content-text-muted));
}
html[data-bs-theme="dark"] {
  --admin-sidebar-text-muted: var(--vis-text-muted, var(--admin-content-text-muted));
  --portal-text-muted: var(--vis-text-muted, var(--admin-content-text-muted));
}
body.portal-backend-dark {
  --portal-text-muted: var(--color-base-400); /* theme-locked-allow: manual-review */
}

/* Portal sidebar: nav and section labels visible */
.portal-sidebar-wrapper .sidebar-section-title,
.portal-sidebar-wrapper .sidebar-stat-label,
.portal-sidebar-wrapper .sidebar-info p {
  opacity: 1;
}
body.portal-backend-dark .portal-sidebar-wrapper .sidebar-section-title,
body.portal-backend-dark .portal-sidebar-wrapper .sidebar-stat-label {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}
body.portal-backend-light .portal-sidebar-wrapper .sidebar-section-title,
body.portal-backend-light .portal-sidebar-wrapper .sidebar-stat-label {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}

/* ===== 12. Admin index / dashboard (Django admin) =====
   `.theme-toggle-label` selectors retired 2026-05-12 — the standalone theme
   toggle button was removed when the rich user_dropdown.html adopted the
   Light/Dark/System segmented control. The element no longer renders. */
#content .text-muted,
#content .dashboard-subtitle {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body.dark #content .text-muted,
body:not(.light-mode) #content .text-muted,
#content[data-bs-theme="dark"] .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}
body.light-mode #content .text-muted,
body.light-mode #content .dashboard-subtitle {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body:not(.light-mode) #content .dashboard-subtitle {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* ===== 13. ALL DASHBOARDS: /admin, /backend, /parent, /teacher, finance, analytics, payroll, emis, requests, compliance ===== */
/* Backend (/backend): uses #dashboard-layout – covered by #dashboard-layout rules above. */
/* Parent dashboard */
.parent-dashboard .text-muted,
.parent-dashboard .small.text-muted,
[data-dashboard-page="parent"] .text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
[data-theme="dark"] .parent-dashboard .text-muted,
body.portal-backend-dark .parent-dashboard .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}
.parent-dashboard .dashboard-eyebrow,
.parent-dashboard .dashboard-hero p {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
[data-theme="dark"] .parent-dashboard .dashboard-eyebrow,
[data-theme="dark"] .parent-dashboard .dashboard-hero p,
body.portal-backend-dark .parent-dashboard .dashboard-eyebrow,
body.portal-backend-dark .parent-dashboard .dashboard-hero p {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* Teacher dashboard */
.teacher-shell .text-muted,
.teacher-shell .small.text-muted,
[data-dashboard-page="teacher"] .text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
[data-theme="dark"] .teacher-shell .text-muted,
body.portal-backend-dark .teacher-shell .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* App-wide shells (shell-data-dashboard-page.js): finance, super, siteconfig, reports, … */
[data-dashboard-page="finance"] .text-muted,
[data-dashboard-page="analytics"] .text-muted,
[data-dashboard-page="payroll"] .text-muted,
[data-dashboard-page="emis"] .text-muted,
[data-dashboard-page="requests"] .text-muted,
[data-dashboard-page="super"] .text-muted,
[data-dashboard-page="django-admin"] .text-muted,
[data-dashboard-page="siteconfig"] .text-muted,
[data-dashboard-page="metadata"] .text-muted,
[data-dashboard-page="marketplace"] .text-muted,
[data-dashboard-page="reports"] .text-muted,
[data-dashboard-page="academics"] .text-muted,
[data-dashboard-page="automation"] .text-muted,
[data-dashboard-page="communication"] .text-muted,
[data-dashboard-page="api-center"] .text-muted,
[data-dashboard-page="org-network"] .text-muted,
[data-dashboard-page="evals"] .text-muted,
[data-dashboard-page="evals-compliance"] .text-muted,
[data-dashboard-page="theme-colors"] .text-muted,
[data-dashboard-page="compliance"] .text-muted,
[data-dashboard-page="rbac"] .text-muted,
[data-dashboard-page="onboarding"] .text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body.portal-backend-dark [data-dashboard-page="finance"] .text-muted,
body.portal-backend-dark [data-dashboard-page="analytics"] .text-muted,
body.portal-backend-dark [data-dashboard-page="payroll"] .text-muted,
body.portal-backend-dark [data-dashboard-page="emis"] .text-muted,
body.portal-backend-dark [data-dashboard-page="requests"] .text-muted,
body.portal-backend-dark [data-dashboard-page="super"] .text-muted,
body.portal-backend-dark [data-dashboard-page="django-admin"] .text-muted,
body.portal-backend-dark [data-dashboard-page="siteconfig"] .text-muted,
body.portal-backend-dark [data-dashboard-page="metadata"] .text-muted,
body.portal-backend-dark [data-dashboard-page="marketplace"] .text-muted,
body.portal-backend-dark [data-dashboard-page="reports"] .text-muted,
body.portal-backend-dark [data-dashboard-page="academics"] .text-muted,
body.portal-backend-dark [data-dashboard-page="automation"] .text-muted,
body.portal-backend-dark [data-dashboard-page="communication"] .text-muted,
body.portal-backend-dark [data-dashboard-page="api-center"] .text-muted,
body.portal-backend-dark [data-dashboard-page="org-network"] .text-muted,
body.portal-backend-dark [data-dashboard-page="evals"] .text-muted,
body.portal-backend-dark [data-dashboard-page="evals-compliance"] .text-muted,
body.portal-backend-dark [data-dashboard-page="theme-colors"] .text-muted,
body.portal-backend-dark [data-dashboard-page="compliance"] .text-muted,
body.portal-backend-dark [data-dashboard-page="rbac"] .text-muted,
body.portal-backend-dark [data-dashboard-page="onboarding"] .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* Compliance / evals dashboards (base.html) */
.compliance-dashboard .text-muted,
.compliance-dashboard .metric-label,
.compliance-dashboard .app-meta,
.compliance-dashboard .stat-meta,
.compliance-dashboard .alert-text p {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
  opacity: 1;
}
[data-theme="dark"] .compliance-dashboard .text-muted,
[data-theme="dark"] .compliance-dashboard .metric-label {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}

/* Dashboard page body: ensure all labels/values visible */
[data-dashboard-page] .card-title,
[data-dashboard-page] .card-body h5,
[data-dashboard-page] .card-body h6,
[data-dashboard-page] .dashboard-kpi-label,
[data-dashboard-page] .dashboard-kpi-value {
  opacity: 1 !important;
}
[data-dashboard-page="parent"] .card .text-muted,
[data-dashboard-page="teacher"] .card .text-muted {
  color: var(--vis-text-muted, var(--admin-content-text-muted)) !important;
}
body.portal-backend-dark [data-dashboard-page="parent"] .card .text-muted,
body.portal-backend-dark [data-dashboard-page="teacher"] .card .text-muted {
  color: var(--vis-text-muted, var(--admin-sidebar-text-muted)) !important;
}