/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Visual Modernization · PRODUCTION_CLEAN
   Glassmorphism · Dark Mode · Micro-interactions
   مدارس المجد الأهلية
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   A) GLASSMORPHISM
   Body gets ambient light blobs that glow through frosted panels.
   Side-panel, topbar, and status line become frosted glass.
   ─────────────────────────────────────────────────────────────- */

/* Ambient blobs behind the glass */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 58% at 8%  28%, rgba(35,220,213,.11)  0%, transparent 52%),
    radial-gradient(ellipse 52% 42% at 88% 12%, rgba(227,188,52,.09)   0%, transparent 52%),
    radial-gradient(ellipse 38% 55% at 52% 82%, rgba(23,54,101,.07)   0%, transparent 50%),
    radial-gradient(ellipse 30% 35% at 72% 50%, rgba(35,220,213,.06)  0%, transparent 45%);
  pointer-events: none;
  z-index: -1;
}

/* Frosted side panel */
.side-panel {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 24px 64px rgba(13,36,71,.16),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* Frosted topbar */
.topbar {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(18px) saturate(170%) brightness(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow:
    0 14px 40px rgba(13,36,71,.11),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Frosted status line */
.status-line {
  background: rgba(13, 36, 71, 0.80) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Frosted nav group cards */
.nav-group {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.60) !important;
}

/* Frosted stage strip */
#v2StageStrip {
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.50) !important;
}

/* ──────────────────────────────────────────────────────────────
   B) DARK MODE
   Activated via html.dark-active (set by design.js toggle).
   Also activates automatically from prefers-color-scheme.
   ─────────────────────────────────────────────────────────────- */

/* ── Shared dark mode tokens and styles ────────────────────── */
:is(html.dark-active, html:not(.light-active)) {
  --navy:   #5b8fd4;
  --navy2:  #4a7fc5;
  --gold:   #f0c040;
  --cyan:   #22d3d3;
  --bg:     #0f172a;
  --card:   #1e293b;
  --surface: #1e293b;
  --surface-2: #162033;
  --surface-3: #111827;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --line:   #2d3f57;
  --border-soft: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.16);
  --shadow: 0 18px 48px rgba(0,0,0,.50);
  --shadow-md: 0 14px 32px rgba(0,0,0,.38);
  --gradient-shell: linear-gradient(145deg, #0b1120 0%, #0f172a 60%, #111827 100%);
  --gradient-panel: linear-gradient(135deg, #111827, #0f172a);
  --gradient-brand: linear-gradient(135deg, #0d1f3a, #091528);
}

:is(html.dark-active, html:not(.light-active)) body {
  background: var(--gradient-shell) !important;
}

:is(html.dark-active, html:not(.light-active)) body::before {
  background:
    radial-gradient(ellipse 44% 58% at 8%  28%, rgba(35,220,213,.07)  0%, transparent 52%),
    radial-gradient(ellipse 52% 42% at 88% 12%, rgba(91,143,212,.10)  0%, transparent 52%),
    radial-gradient(ellipse 38% 55% at 52% 82%, rgba(240,192,64,.05)  0%, transparent 50%),
    radial-gradient(ellipse 30% 35% at 72% 50%, rgba(35,220,213,.04)  0%, transparent 45%);
}

:is(html.dark-active, html:not(.light-active)) .side-panel {
  background: rgba(11, 17, 32, 0.82) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

:is(html.dark-active, html:not(.light-active)) .brand {
  background: var(--gradient-brand) !important;
}

:is(html.dark-active, html:not(.light-active)) .topbar {
  background: rgba(11, 17, 32, 0.85) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

:is(html.dark-active, html:not(.light-active)) .status-line {
  background: rgba(5, 10, 22, 0.88) !important;
  border-color: var(--border-soft) !important;
}

:is(html.dark-active, html:not(.light-active)) input,
:is(html.dark-active, html:not(.light-active)) select {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:is(html.dark-active, html:not(.light-active)) input:focus,
:is(html.dark-active, html:not(.light-active)) select:focus {
  border-color: var(--cyan) !important;
}

:is(html.dark-active, html:not(.light-active)) .nav-group {
  background: var(--surface-2) !important;
  border-color: var(--border-soft) !important;
}
:is(html.dark-active, html:not(.light-active)) .nav-group-head {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}
:is(html.dark-active, html:not(.light-active)) .page-btn {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:is(html.dark-active, html:not(.light-active)) .page-btn.active {
  background: var(--navy) !important;
  color: #fff !important;
}

:is(html.dark-active, html:not(.light-active)) button.secondary { background: var(--surface-3) !important; }
:is(html.dark-active, html:not(.light-active)) button.ghost {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:is(html.dark-active, html:not(.light-active)) .section-title { color: var(--navy) !important; }

:is(html.dark-active, html:not(.light-active)) .pro-page-row {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
:is(html.dark-active, html:not(.light-active)) .pro-drag {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
:is(html.dark-active, html:not(.light-active)) .pro-row-main b { color: var(--text) !important; }

:is(html.dark-active, html:not(.light-active)) .v2-review-card {
  background: linear-gradient(135deg, var(--surface), var(--surface-2)) !important;
  border-color: var(--border-soft) !important;
}
:is(html.dark-active, html:not(.light-active)) .v2-card-title { color: var(--text) !important; }

:is(html.dark-active, html:not(.light-active)) .ux-search-section {
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%) !important;
}
:is(html.dark-active, html:not(.light-active)) .ux-result-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
:is(html.dark-active, html:not(.light-active)) .ux-result-title { color: var(--text) !important; }

:is(html.dark-active, html:not(.light-active)) .ux-tl-stage {
  background: var(--surface) !important;
  border-color: var(--border-soft) !important;
}
:is(html.dark-active, html:not(.light-active)) .ux-tl-stage-title { color: var(--text) !important; }
:is(html.dark-active, html:not(.light-active)) .ux-tl-dot {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:is(html.dark-active, html:not(.light-active)) #v2StageStrip {
  background: var(--surface-3) !important;
  border-color: var(--border-soft) !important;
}

/* Dark mode toggle button */
.dm-toggle-btn {
  font-size: 16px;
  line-height: 1;
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  transition: transform .2s ease, background .2s ease !important;
}
.dm-toggle-btn:hover { transform: rotate(20deg) scale(1.15) !important; }

/* ──────────────────────────────────────────────────────────────
   C) MICRO-INTERACTIONS
   ─────────────────────────────────────────────────────────────- */

/* ── C1) Button shake at page boundary ─────────────────────── */
@keyframes dm-shake {
  0%,100% { translate:  0px 0; }
  18%     { translate: -6px 0; }
  36%     { translate:  5px 0; }
  54%     { translate: -3px 0; }
  72%     { translate:  2px 0; }
  88%     { translate: -1px 0; }
}
.dm-shake {
  animation: dm-shake 0.42s cubic-bezier(0.36,0.07,0.19,0.97) both;
  color: var(--gold) !important;
}

/* ── C2) Reading progress bar ───────────────────────────────── */
#dm-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 35;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--gold) 100%);
  transform-origin: right;   /* RTL: fills right → left */
  transform: scaleX(0);
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}
html.dark-active #dm-progress {
  background: linear-gradient(90deg, var(--cyan) 0%, var(--gold) 100%);
  opacity: .85;
}
@media print { #dm-progress { display: none !important; } }

/* ── C3) Page title flip animation ──────────────────────────── */
@keyframes dm-flip-in {
  from { opacity: 0; translate: 0 -10px; }
  to   { opacity: 1; translate: 0   0px; }
}
#currentTitle.dm-flip {
  animation: dm-flip-in 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}
#currentMeta.dm-flip {
  animation: dm-flip-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.04s both;
}

/* ── C4) Button press ripple — excludes .page-btn to avoid badge conflict ── */
button:not(.page-btn) {
  position: relative;
  overflow: hidden;
}
button:not(.page-btn)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.22);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}
button:not(.page-btn):active::after {
  transform: scale(1);
  opacity: 1;
  transition: none;
}

/* ── C5) Page dot hover tooltip in timeline ─────────────────── */
.ux-tl-dot {
  --tip-text: attr(title);
}

/* ── Smooth hover lift for all interactive cards ────────────── */
.nav-group, .v2-review-card, .ux-tl-stage, .ux-result-card {
  will-change: transform;
}