/* SkillUP Shared Design Tokens — Django's own copy.
 * ─────────────────────────────────────────────────
 * Deliberately named --dj-* rather than --su-* (which the React micro-apps
 * use): pages built around base_app.html also unconditionally load chat.css
 * (via the persistent AI sidebar) and, on some pages, concept-map.css /
 * playbook-editor.css — each is its OWN Tailwind v4 build with its own
 * baked-in `:root { --su-brand: ... }` from its build-time import of
 * shared/design-system/tokens.css. If this file used the same --su-* names,
 * whichever of those stylesheets happened to load later in the document
 * would silently win the cascade (plain, non-important same-specificity
 * :root rules resolve by source order) and override this file regardless of
 * include order upstream. A distinct namespace sidesteps that entirely —
 * no collision is possible since nothing else declares --dj-*.
 *
 * Values are kept in sync by hand with
 * SkillUP_front_mocks/shared/design-system/tokens.css's --su-brand/--su-accent/
 * etc — same palette, independent name.
 */

:root {
  /* ── Brand ── */
  --dj-brand: #312f33;
  --dj-accent: #ffbb33;
  --dj-cta: #3377FF;

  /* ── Text ── */
  --dj-text-primary: #111827;
  --dj-text-secondary: #6b7280;
  --dj-text-primary-dark: #f3f4f6;
  --dj-text-secondary-dark: #d1d5db;
  --dj-text-muted-dark: #b8c0ca;

  /* ── Surfaces — light ── */
  --dj-bg-light: #f8f9fa;
  --dj-card-light: #ffffff;

  /* ── Surfaces — dark ── */
  --dj-bg-dark: #353639;
  --dj-card-dark: #3b3c3f;

  /* ── Status ── */
  --dj-success: #10b981;
}

/* Primary CTAs use the blue action color, while the charcoal brand remains
 * reserved for navigation, selected states, and other structural chrome. */
:where(button, a, input[type="submit"]).bg-app-brand.text-white,
.dark :where(button, a, input[type="submit"]).dark\:bg-app-accent.text-white {
  background-color: var(--dj-cta) !important;
  color: #ffffff !important;
}

/* Some established Django templates use Tailwind's light-gray utilities
 * without a matching dark: variant. Keep explicit dark:text-* decisions
 * intact, but make those inherited secondary and muted colors readable on
 * the shared charcoal surfaces. :where() keeps these at one class's weight, so a
 * dark:hover:/dark:group-hover: text utility on the same element still wins. */
html.dark :where(.text-gray-500:not([class*="dark:text-"])),
html.dark :where(.text-slate-500:not([class*="dark:text-"])),
html.dark :where(.text-neutral-500:not([class*="dark:text-"])) {
  color: var(--dj-text-secondary-dark);
}

html.dark :where(.text-gray-400:not([class*="dark:text-"])),
html.dark :where(.text-slate-400:not([class*="dark:text-"])),
html.dark :where(.text-neutral-400:not([class*="dark:text-"])) {
  color: var(--dj-text-muted-dark);
}

/* Legacy dark utilities predate the shared #353639 / #3b3c3f surface system.
 * Keep their original semantic depth, but resolve them through the current
 * tokens wherever they still occur in Django templates or embedded islands.
 * Status colors deliberately use other values and are not affected.
 * Matched as whole class words (~=), not substrings, and without !important:
 * dark:bg-[#111]/80 keeps its opacity and dark:hover:/dark:group-hover:
 * utilities, which outrank these on specificity, still apply. */
html.dark [class~="dark:bg-[#111]"],
html.dark [class~="dark:bg-[#121212]"],
html.dark [class~="dark:bg-[#161616]"],
html.dark [class~="dark:bg-neutral-950"],
html.dark [class~="dark:bg-zinc-950"],
html.dark [class~="dark:bg-black/20"] {
  background-color: var(--dj-bg-dark);
}

html.dark [class~="dark:bg-[#1a1a1a]"],
html.dark [class~="dark:bg-[#1e1e1e]"],
html.dark [class~="dark:bg-[#1e1e20]"],
html.dark [class~="dark:bg-[#1f1f1f]"],
html.dark [class~="dark:bg-[#202020]"],
html.dark [class~="dark:bg-[#232326]"],
html.dark [class~="dark:bg-[#252525]"],
html.dark [class~="dark:bg-[#2a2a2a]"],
html.dark [class~="dark:bg-[#2d2d31]"],
html.dark [class~="dark:bg-neutral-900"],
html.dark [class~="dark:bg-zinc-900"] {
  background-color: var(--dj-card-dark);
}

html.dark [class~="dark:bg-neutral-800"],
html.dark [class~="dark:bg-zinc-800"] {
  background-color: var(--dj-bg-dark);
}

/* Explicit legacy dark text utilities bypass the fallback rules above.
 * Raise them to the same readable secondary/muted levels as new UI. */
html.dark [class~="dark:text-gray-500"],
html.dark [class~="dark:text-white/50"] {
  color: var(--dj-text-secondary-dark);
}

html.dark [class~="dark:text-gray-400"],
html.dark [class~="dark:text-white/40"],
html.dark [class~="dark:text-white/30"],
html.dark [class~="dark:text-white/25"],
html.dark [class~="dark:text-white/20"] {
  color: var(--dj-text-muted-dark);
}

/* Expand/collapse controls retain their neutral hover fill. Suppress only the
 * transient browser/vendor focus outline that is painted while the mouse is
 * held down — it otherwise appears as a white rectangle in dark mode. */
.panel-toggle-control,
.panel-toggle-control:focus,
.panel-toggle-control:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus keeps a ring: :focus-visible is the keyboard state, not the mouse press. */
.panel-toggle-control.panel-toggle-control:focus-visible {
  box-shadow: 0 0 0 2px var(--dj-cta) !important;
}

/* Role tokens, set on the shell wrapper: the sidebar profile and active items, plus every app_tabs
 * underline, focus ring and active fill. Selected-item text stays on the shared brand treatment. */
[data-nav-role] {
  --dj-nav-role: #6b7280;
  --dj-nav-role-badge: #e5e7eb;
  --dj-nav-role-label: #111827;
  --dj-nav-active: var(--dj-brand);
  --dj-nav-active-tint: rgba(49, 47, 51, 0.08);
  --dj-nav-active-bar: var(--dj-nav-role);
}
[data-nav-role="learner"] {
  --dj-nav-role: #c97510;
  --dj-nav-role-badge: #f8d6a8;
  --dj-nav-active-tint: rgba(201, 117, 16, 0.07);
}
[data-nav-role="educator"],
[data-nav-role="org_admin"],
[data-nav-role="platform_admin"] {
  --dj-nav-role: #257bec;
  --dj-nav-role-badge: #dbeafe;
  --dj-nav-active-tint: #eef1f5;
}
.dark [data-nav-role] {
  --dj-nav-role: #9ca3af;
  --dj-nav-role-badge: #d1d5db;
  --dj-nav-active: var(--dj-text-primary-dark);
  --dj-nav-active-tint: #45464a;
}
.dark [data-nav-role="learner"] {
  --dj-nav-role: #ec9525;
  --dj-nav-role-badge: #f8d6a8;
  --dj-nav-active-tint: rgba(236, 149, 37, 0.1);
}
.dark [data-nav-role="educator"],
.dark [data-nav-role="org_admin"],
.dark [data-nav-role="platform_admin"] {
  --dj-nav-role: #79a6ff;
  --dj-nav-role-badge: #bfdbfe;
  --dj-nav-active-tint: #484b51;
}

.nav-run-active-fill {
  background: var(--dj-nav-active-tint);
}

[data-nav-role] .nav-active-fill,
[data-nav-role="learner"] .nav-collapsed-active {
  background: linear-gradient(90deg, var(--dj-nav-active-tint), transparent);
}

@media (min-width: 48rem) {
  [data-tab-active-fill] .app-tab-active-fill {
    background: linear-gradient(90deg, var(--dj-nav-active-tint), transparent);
  }
}

[data-nav-role="learner"] .nav-run-active-fill {
  background: transparent;
}

.nav-collapsed-active {
  background: var(--dj-nav-active-tint);
  box-shadow: inset 0 0 0 2px var(--dj-nav-role);
}