/**
 * Appearance bridge — unifies tokens across admin, workbooks, assignment, global_ui.
 * Load after admin_dashboard_theme.css and before design_skin_nexus.css.
 */

/* ---------- Shared app surfaces (light / dark) ---------- */
html[data-theme="light"] {
  --app-bg: #f1f5f9;
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-text: #0f1724;
  --app-text-muted: #475569;
  --app-border: #e6e9ef;
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --t1: var(--app-text);
  --t2: var(--app-text-muted);
  --t3: #94a3b8;
  --border: var(--app-border);
  --text: var(--app-text);
}

html[data-theme="dark"] {
  --app-bg: #0b1220;
  --app-surface: #0f1724;
  --app-surface-2: #1e293b;
  --app-text: #e6eef8;
  --app-text-muted: #cbd5e1;
  --app-border: #21303f;
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --t1: var(--app-text);
  --t2: var(--app-text-muted);
  --t3: #94a3b8;
  --border: var(--app-border);
  --text: var(--app-text);
}

/* Default before bootstrap paints (system light) */
html:not([data-theme]) {
  --app-bg: #f1f5f9;
  --app-surface: #ffffff;
  --app-surface-2: #f8fafc;
  --app-text: #0f1724;
  --app-text-muted: #475569;
  --app-border: #e6e9ef;
}

/* ---------- Accent → shared aliases ---------- */
html[data-accent] {
  --accent-color: var(--accent);
  --progress-fill: var(--accent);
  --primary-color: var(--accent);
  --primary-hover: color-mix(in srgb, var(--accent) 84%, #000 16%);
  --link-fg: var(--accent);
}

/* ---------- global_ui.css token bridge ---------- */
html[data-theme="light"],
html[data-theme="dark"] {
  --primary-bg: var(--app-surface);
  --primary-text: var(--app-text);
  --secondary-bg: var(--app-surface-2);
  --secondary-text: var(--app-text-muted);
  --card-bg: var(--app-surface);
  --section-bg: var(--app-bg);
  --border-color: var(--app-border);
  --input-bg: var(--app-surface);
  --input-border: var(--app-border);
  --table-header-bg: var(--app-surface-2);
  --table-hover: color-mix(in srgb, var(--accent, #3c4555) 8%, var(--app-surface));
  --bg-light: var(--app-surface);
  --secondary-slate: var(--app-surface-2);
  --text-primary: var(--app-text);
}

/* ---------- Body & content (standard skin) ---------- */
html[data-design-skin="standard"] body,
html:not([data-design-skin]) body {
  background-color: var(--app-bg) !important;
  color: var(--app-text) !important;
}

html[data-design-skin="standard"] #content,
html[data-design-skin="standard"] #content-main,
html:not([data-design-skin]) #content,
html:not([data-design-skin]) #content-main,
html[data-design-skin="standard"] body.generic-workbook-page #changelist,
html[data-design-skin="standard"] body.generic-workbook-page .changelist-form-container {
  background: var(--app-bg) !important;
  color: var(--app-text);
}

html[data-design-skin="standard"] body.dashboard #content.colM {
  background: var(--app-bg) !important;
}

/* ---------- Assignment aliases ---------- */
html[data-theme="light"],
html[data-theme="dark"] {
  --light-color: var(--app-bg);
  --dark-color: var(--app-text);
  --secondary-color: var(--app-text-muted);
}

html[data-design-skin="standard"] .navbar-custom,
html:not([data-design-skin="nexus"]) .navbar-custom {
  background: linear-gradient(92deg, var(--brand-1, rgb(20, 43, 53)) 0%, var(--brand-2, #161d31) 100%) !important;
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.18);
}

/* Bootstrap primary buttons follow accent */
html[data-accent] .btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

html[data-accent] .btn-primary:hover,
html[data-accent] .btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

html[data-accent] .btn-outline-primary {
  color: var(--accent-color) !important;
  border-color: color-mix(in srgb, var(--accent-color) 70%, var(--app-border)) !important;
}

html[data-accent] .btn-outline-primary:hover,
html[data-accent] .btn-outline-primary.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: var(--text-on-accent, #fff) !important;
}

/* Assignment floating controls */
.assignment-float-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.assignment-float-stack #theme-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 3rem !important;
  height: 3rem !important;
  margin: 0 !important;
}

.assignment-float-stack .assignment-appearance-fab,
.assignment-float-stack #theme-toggle {
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

html[data-design-skin="standard"] .assignment-float-stack .assignment-appearance-fab {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--accent-color);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

html[data-design-skin="standard"] .assignment-float-stack #theme-toggle {
  background: var(--accent-color) !important;
  color: var(--text-on-accent, #fff) !important;
  border: none !important;
}

/* Theme toggle on admin shell uses .theme-switch — keep floating workbook toggle in bottom-right */
.crm-hero ~ * #theme-toggle:not(.assignment-theme-toggle):not(.theme-switch) {
  /* intentionally visible; position owned by global_ui.css bottom-right dock */
}

html[data-design-skin="nexus"] #theme-toggle,
html[data-design-skin="nexus"] .assignment-appearance-fab {
  background: color-mix(in srgb, var(--app-surface) 75%, transparent) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--nexus-glass-border, var(--app-border)) !important;
  color: var(--accent-color) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Dark mode assignment surfaces */
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-card .card-header {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text);
}

html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .stats-label,
html[data-theme="dark"] .table th {
  color: var(--app-text) !important;
}

html[data-theme="dark"] .table td {
  color: var(--app-text);
  border-color: var(--app-border);
}

html[data-theme="dark"] .table-card .card-header,
html[data-theme="dark"] .table th {
  background: var(--app-surface-2) !important;
}

html[data-theme="dark"] .dropdown-menu {
  background: var(--app-surface);
  border-color: var(--app-border);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--app-text);
}

html[data-theme="dark"] .dropdown-item:hover {
  background: var(--app-surface-2);
}

/* Workbook toolbar / sidebar cohesion */
html[data-design-skin="standard"] body.generic-workbook-page .workbook-command-sidebar,
html[data-design-skin="standard"] body.generic-workbook-page #toolbar-panel {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
}

html[data-design-skin="nexus"] body.generic-workbook-page .enhanced-table-container {
  color: var(--app-text);
}

html[data-design-skin="nexus"][data-theme="light"] body.dashboard .card,
html[data-design-skin="nexus"][data-theme="light"] body.dashboard .card-link {
  color: var(--app-text);
}

html[data-design-skin="nexus"][data-theme="light"] .dashboard-hero.text-white,
html[data-design-skin="nexus"][data-theme="light"] .dashboard-hero-analytics,
html[data-design-skin="nexus"][data-theme="light"] .dashboard-hero-medical {
  color: #fff !important;
}