/* ==========================================================================
   Pixel Academy — Application theme layer
   Shared Light/Dark retrofit for the internal application pages (course hub,
   course details, course lessons, lesson player — and, later, the exam and
   auth pages).

   Loaded AFTER pixel-v2.css and AFTER the page-specific stylesheet, so it is
   the last word on the --pa-* tokens without ever editing pixel-v2.css.

   It owns three things and nothing else:
     1. the adaptive --pa-* token sets (html[data-theme="dark"|"light"])
     2. the shared compact internal header (.pa-appbar) and theme toggle
     3. small cross-page theme corrections

   It deliberately does NOT restate the course or lesson layout CSS — those
   files keep owning their own geometry and simply consume these tokens.

   The theme itself is driven by pixel-student-shell.js, which reads and
   writes the single existing "pixelTheme" key and issues no API request.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Light theme — warm off-white paper, pale lavender depth, deep purple ink
   Also the no-JavaScript fallback, so the page is always coherent.
   -------------------------------------------------------------------------- */
:root,
html[data-theme="light"] {
  /* Surfaces */
  --pa-bg: #f8f5f0;
  --pa-surface: #ffffff;
  --pa-surface-2: #faf7fe;
  --pa-surface-3: #f0ecfa;

  /* Ink */
  --pa-text: #1d1442;
  --pa-text-2: #4b4372;
  --pa-text-muted: #6d6595;

  /* Brand — deep purple reads as ink on paper */
  --pa-primary: #6c3bf4;
  --pa-primary-600: #5a2ae0;
  --pa-primary-700: #4a20bd;
  --pa-primary-100: #e5dcff;
  --pa-primary-050: #f3efff;
  /* The purple used for text and icons sitting on a surface */
  --pa-primary-ink: #5a2ae0;

  /* Controlled cyan */
  --pa-accent: #22d3ee;
  --pa-accent-600: #0da5c0;
  --pa-accent-050: #e6fbff;

  /* Limited gold — used only by the theme toggle's sun */
  --pa-gold: #d99b12;

  /* Lines — transparent deep purple, never grey */
  --pa-border: rgba(74, 32, 189, 0.13);
  --pa-border-strong: rgba(74, 32, 189, 0.26);

  /* Status */
  --pa-success: #147c3c;
  --pa-success-bg: #e7f7ed;
  --pa-danger: #c81340;
  --pa-danger-bg: #fdeaf0;
  --pa-warning: #a85c05;
  --pa-warning-bg: #fdf1e2;
  --pa-info: #0b697f;
  --pa-info-bg: #e4f6fa;

  /* Shadows — restrained purple, never black */
  --pa-shadow-xs: 0 1px 2px rgba(37, 22, 92, 0.07);
  --pa-shadow-sm: 0 2px 10px rgba(37, 22, 92, 0.08);
  --pa-shadow: 0 6px 22px rgba(37, 22, 92, 0.1);
  --pa-shadow-lg: 0 18px 44px rgba(37, 22, 92, 0.18);
  --pa-shadow-up: 0 -6px 20px rgba(37, 22, 92, 0.12);

  /* Focus ring */
  --pa-focus: 0 0 0 3px rgba(108, 59, 244, 0.34);

  /* Scrim behind sheets and dialogs */
  --pa-scrim: rgba(29, 20, 66, 0.52);

  /* Skeleton shimmer */
  --pa-skel-1: #eee9f8;
  --pa-skel-2: #ded5f2;

  /* Quiet decorative icon (empty states) */
  --pa-icon-quiet: rgba(74, 32, 189, 0.32);

  /* Internal header */
  --pa-appbar-bg: rgba(252, 250, 247, 0.92);
  --pa-appbar-border: rgba(74, 32, 189, 0.14);
  --pa-appbar-shadow: 0 1px 0 rgba(74, 32, 189, 0.05);
  --pa-appbar-shadow-stuck: 0 10px 28px rgba(37, 22, 92, 0.13);
  --pa-appbar-control: rgba(108, 59, 244, 0.08);
  --pa-appbar-control-border: rgba(74, 32, 189, 0.18);
  --pa-appbar-control-hover: rgba(108, 59, 244, 0.16);
}

/* --------------------------------------------------------------------------
   2. Dark theme — deep indigo night, purple depth, separated surfaces
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Surfaces — four clearly different steps, never one flat colour */
  --pa-bg: #08061f;
  --pa-surface: #141032;
  --pa-surface-2: #1b1544;
  --pa-surface-3: #241c58;

  /* Ink */
  --pa-text: #ffffff;
  --pa-text-2: rgba(255, 255, 255, 0.82);
  --pa-text-muted: rgba(255, 255, 255, 0.62);

  /* Brand — the fill stays saturated, the ink lifts so it reads on indigo */
  --pa-primary: #7c4dff;
  --pa-primary-600: #6c3bf4;
  --pa-primary-700: #cfbcff;
  --pa-primary-100: rgba(124, 77, 255, 0.34);
  --pa-primary-050: rgba(124, 77, 255, 0.16);
  --pa-primary-ink: #b9a3ff;

  /* Controlled cyan */
  --pa-accent: #22d3ee;
  --pa-accent-600: #67e8f9;
  --pa-accent-050: rgba(34, 211, 238, 0.13);

  /* Limited gold */
  --pa-gold: #f0c04c;

  /* Lines — translucent white */
  --pa-border: rgba(255, 255, 255, 0.12);
  --pa-border-strong: rgba(255, 255, 255, 0.24);

  /* Status */
  --pa-success: #6ee7a0;
  --pa-success-bg: rgba(34, 197, 94, 0.16);
  --pa-danger: #ff8fa3;
  --pa-danger-bg: rgba(244, 63, 94, 0.18);
  --pa-warning: #fcd34d;
  --pa-warning-bg: rgba(245, 158, 11, 0.17);
  --pa-info: #7dd8ec;
  --pa-info-bg: rgba(34, 211, 238, 0.15);

  /* Shadows — restrained, the night already provides the depth */
  --pa-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.34);
  --pa-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.38);
  --pa-shadow: 0 8px 24px rgba(0, 0, 0, 0.44);
  --pa-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.56);
  --pa-shadow-up: 0 -8px 24px rgba(0, 0, 0, 0.46);

  /* Focus ring */
  --pa-focus: 0 0 0 3px rgba(162, 116, 255, 0.55);

  /* Scrim */
  --pa-scrim: rgba(4, 3, 16, 0.68);

  /* Skeleton shimmer */
  --pa-skel-1: #201a4c;
  --pa-skel-2: #2d2470;

  /* Quiet decorative icon */
  --pa-icon-quiet: rgba(255, 255, 255, 0.34);

  /* Internal header */
  --pa-appbar-bg: rgba(10, 7, 34, 0.92);
  --pa-appbar-border: rgba(255, 255, 255, 0.11);
  --pa-appbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  --pa-appbar-shadow-stuck: 0 12px 34px rgba(4, 3, 16, 0.52);
  --pa-appbar-control: rgba(255, 255, 255, 0.07);
  --pa-appbar-control-border: rgba(255, 255, 255, 0.16);
  --pa-appbar-control-hover: rgba(255, 255, 255, 0.15);
}

/* The learning environment stays permanently dark in BOTH themes, so the
   indigo scale and the "invert" ink are deliberately never flipped:
   --pa-indigo-*, --pa-text-invert, --pa-text-invert-muted, --pa-border-invert
   keep the values pixel-v2.css gives them. */

/* --------------------------------------------------------------------------
   3. Page base
   These pages no longer load the legacy Bootstrap reset (only the lesson
   player still needs Bootstrap, and only for its tab behaviour), so the
   border-box model every one of these layouts is written against is declared
   here — it is a property of the shared application shell, not of a vendor
   stylesheet that may or may not be present.
   -------------------------------------------------------------------------- */
body.pxc-page,
body.pcf-page,
body.pixel-lesson,
body.pxc-page *,
body.pcf-page *,
body.pixel-lesson *,
body.pxc-page *::before,
body.pcf-page *::before,
body.pixel-lesson *::before,
body.pxc-page *::after,
body.pcf-page *::after,
body.pixel-lesson *::after {
  box-sizing: border-box;
}

/* Page background — the only theme-related motion on these pages */
body.pxc-page,
body.pcf-page,
body.pixel-lesson {
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    color var(--pa-t-slow) var(--pa-ease);
}

/* Each page keeps its own content max-width in the header too. */
body.pxc-page {
  --pa-appbar-max: 1240px;
}

body.pcf-page {
  --pa-appbar-max: 1180px;
}

body.pixel-lesson {
  --pa-appbar-max: 1400px;
}

/* --------------------------------------------------------------------------
   4. Shared compact internal header
   Mobile is a physically locked three-column grid expressed in an LTR
   coordinate system, so the composition is identical in RTL:

       [ back / spacer ]        [ logo ]        [ theme ]
        physical left        viewport centre   physical right

   Both side columns are exactly the same width and the padding is symmetric,
   so the logo box is centred on the viewport itself rather than on whatever
   space a flex row happened to leave over. Only the coordinate system is LTR —
   every child restores the Arabic direction.
   -------------------------------------------------------------------------- */
.pa-appbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--pa-appbar-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pa-appbar-border);
  box-shadow: var(--pa-appbar-shadow);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color var(--pa-t-slow) var(--pa-ease),
    border-color var(--pa-t-slow) var(--pa-ease),
    box-shadow var(--pa-t) var(--pa-ease);
}

.pa-appbar.is-stuck {
  box-shadow: var(--pa-appbar-shadow-stuck);
}

.pa-appbar__inner {
  --pa-appbar-side: 46px;
  display: grid;
  grid-template-columns: var(--pa-appbar-side) minmax(0, 1fr) var(--pa-appbar-side);
  grid-template-areas: "lead brand actions";
  align-items: center;
  column-gap: 10px;
  width: 100%;
  max-width: var(--pa-appbar-max, 1240px);
  min-height: 60px;
  margin: 0 auto;
  padding: var(--pa-space-2) var(--pa-space-4);
  direction: ltr;
}

.pa-appbar__inner > *,
.pa-appbar__actions > * {
  direction: rtl;
}

.pa-appbar__lead {
  grid-area: lead;
  justify-self: center;
}

/* The brand keeps the logo's own box untouched; only the link's hit area is
   raised to a comfortable target. */
body.pixel-v2 .pa-appbar__brand {
  grid-area: brand;
  justify-self: center;
  min-width: 0;
  min-height: 44px;
}

/* The actions wrapper stops being a box on mobile so the theme toggle becomes
   a real grid item and the side columns stay exactly equal. */
.pa-appbar__actions {
  display: contents;
}

.pa-appbar__actions .pa-theme-toggle {
  grid-area: actions;
  justify-self: center;
}

/* Desktop-only affordances */
.pa-appbar__label,
.pa-appbar__account {
  display: none;
}

/* Back / home control */
body.pixel-v2 .pa-appbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-2);
  width: var(--pa-appbar-side);
  height: var(--pa-appbar-side);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-family: var(--pa-font);
  font-size: var(--pa-fs-sm);
  font-weight: 700;
  color: var(--pa-text-2);
  background: var(--pa-appbar-control);
  border: 1px solid var(--pa-appbar-control-border);
  border-radius: var(--pa-radius-sm);
  transition: color var(--pa-t) var(--pa-ease),
    background-color var(--pa-t) var(--pa-ease),
    border-color var(--pa-t) var(--pa-ease);
}

body.pixel-v2 .pa-appbar__back:hover {
  color: var(--pa-text);
  background: var(--pa-appbar-control-hover);
}

.pa-appbar__back-text {
  display: none;
}

/* Inert equal-width spacer — used where the page has no back destination. */
.pa-appbar__spacer {
  width: var(--pa-appbar-side);
  height: var(--pa-appbar-side);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Theme toggle
   -------------------------------------------------------------------------- */
body.pixel-v2 .pa-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pa-appbar-side, 46px);
  height: var(--pa-appbar-side, 46px);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--pa-text);
  background: var(--pa-appbar-control);
  border: 1px solid var(--pa-appbar-control-border);
  border-radius: var(--pa-radius-sm);
  cursor: pointer;
  transition: background-color var(--pa-t) var(--pa-ease),
    border-color var(--pa-t) var(--pa-ease);
}

body.pixel-v2 .pa-theme-toggle:hover {
  background: var(--pa-appbar-control-hover);
}

.pa-theme-toggle__icons {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.pa-theme-toggle__icons i {
  position: absolute;
  font-size: 1rem;
  line-height: 1;
  transition: opacity var(--pa-t-slow) var(--pa-ease),
    transform var(--pa-t-slow) var(--pa-ease);
}

/* Dark is active → the button offers Light, so it shows a sun. */
.pa-theme-toggle__sun {
  color: var(--pa-gold);
}

.pa-theme-toggle__moon {
  color: var(--pa-primary-ink);
  opacity: 0;
  transform: rotate(-45deg) scale(0.55);
}

html[data-theme="light"] .pa-theme-toggle__sun {
  opacity: 0;
  transform: rotate(45deg) scale(0.55);
}

html[data-theme="light"] .pa-theme-toggle__moon {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Header — narrow phones (320px upward)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .pa-appbar__inner {
    --pa-appbar-side: 44px;
    column-gap: 8px;
    padding-inline: var(--pa-space-3);
  }

  body.pixel-v2 .pa-appbar__brand .pa-brand-logo {
    height: 26px;
    max-width: 148px;
  }
}

/* --------------------------------------------------------------------------
   7. Header — desktop product bar (never a marketing navigation)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pa-appbar__inner {
    display: flex;
    align-items: center;
    gap: var(--pa-space-3);
    min-height: 68px;
    padding-inline: var(--pa-space-6);
    direction: rtl;
  }

  body.pixel-v2 .pa-appbar__brand {
    order: 1;
    justify-self: auto;
  }

  .pa-appbar__lead {
    order: 2;
    justify-self: auto;
  }

  .pa-appbar__spacer {
    display: none;
  }

  .pa-appbar__label {
    order: 3;
    display: block;
    min-width: 0;
    padding-inline-start: var(--pa-space-3);
    border-inline-start: 1px solid var(--pa-border);
    font-size: var(--pa-fs-md);
    font-weight: 700;
    color: var(--pa-text-muted);
    white-space: nowrap;
  }

  .pa-appbar__actions {
    display: flex;
    order: 4;
    align-items: center;
    gap: var(--pa-space-2);
    margin-inline-start: auto;
  }

  body.pixel-v2 .pa-appbar__back {
    width: auto;
    padding: 0 var(--pa-space-4);
  }

  .pa-appbar__back-text {
    display: inline;
  }

  body.pixel-v2 .pa-appbar__account {
    display: inline-flex;
    align-items: center;
    gap: var(--pa-space-2);
    min-height: 44px;
    padding: 0 var(--pa-space-4);
    font-size: var(--pa-fs-sm);
    font-weight: 700;
    color: var(--pa-text-2);
    background: var(--pa-appbar-control);
    border: 1px solid var(--pa-appbar-control-border);
    border-radius: var(--pa-radius-pill);
    white-space: nowrap;
    transition: color var(--pa-t) var(--pa-ease),
      background-color var(--pa-t) var(--pa-ease);
  }

  body.pixel-v2 .pa-appbar__account:hover {
    color: var(--pa-text);
    background: var(--pa-appbar-control-hover);
  }

  body.pixel-v2 .pa-appbar__account i {
    color: var(--pa-primary-ink);
  }
}

/* --------------------------------------------------------------------------
   8. Cross-page theme corrections
   Only the shared pixel-v2 primitives whose fixed values do not survive a
   dark background. Nothing here duplicates page layout.
   -------------------------------------------------------------------------- */

/* Skeletons get their own two-stop scale so the shimmer stays visible in the
   dark theme without becoming a bright flash. */
body.pixel-v2 .pa-skeleton {
  background: linear-gradient(
      90deg,
      var(--pa-skel-1) 25%,
      var(--pa-skel-2) 37%,
      var(--pa-skel-1) 63%
    )
    var(--pa-skel-1);
  background-size: 400% 100%;
}

/* Empty/error state glyphs must not disappear into a translucent border. */
body.pixel-v2 .pa-state > i {
  color: var(--pa-icon-quiet);
}

/* Purple used as ink rather than as a fill. */
body.pixel-v2 .pa-chip i,
body.pixel-v2 .pa-btn--secondary {
  color: var(--pa-primary-ink);
}

body.pixel-v2 .pa-chip--accent i {
  color: var(--pa-accent-600);
}

body.pixel-v2 .pa-state__badge {
  color: var(--pa-primary-ink);
}

/* Alert borders derive from the status colour itself so they follow the
   theme instead of staying pinned to the light-mode values. */
body.pixel-v2 .pa-alert--info {
  border-color: var(--pa-info);
}

body.pixel-v2 .pa-alert--success {
  border-color: var(--pa-success);
}

body.pixel-v2 .pa-alert--warning {
  border-color: var(--pa-warning);
}

body.pixel-v2 .pa-alert--danger {
  border-color: var(--pa-danger);
}

/* The close control keeps a readable contrast on a dark dialog. */
body.pixel-v2 .modal .modal-close {
  color: var(--pa-text-2);
}

body.pixel-v2 .modal .modal-close:hover,
body.pixel-v2 .modal .modal-close:focus {
  background: var(--pa-surface-2);
}

/* Radio controls follow the brand in both themes. */
body.pixel-v2 input[type="radio"],
body.pixel-v2 input[type="checkbox"] {
  accent-color: var(--pa-primary);
}