/* SICTA "Aurora" look, shared by every page (see assets/ui/head.php).
 * - html[data-theme="light"|"dark"]  colours
 * - html[data-fx="on"|"off"]         glass blur + animations (off = plain and light on cheap phones)
 * Pages keep their Tailwind classes; the dark theme re-maps the handful of colours they use. */

:root {
  --ui-bg: #eef1fb;
  --ui-glass: rgba(255, 255, 255, .72);
  --ui-glass-strong: rgba(255, 255, 255, .88);
  --ui-glass-border: rgba(255, 255, 255, .65);
  --ui-line: rgba(15, 23, 42, .08);
  --ui-glow: rgba(99, 102, 241, .35);
  --ui-a1: rgba(129, 140, 248, .45);   /* aurora: indigo */
  --ui-a2: rgba(192, 132, 252, .35);   /* violet */
  --ui-a3: rgba(45, 212, 191, .28);    /* teal */
  --ui-a4: rgba(251, 146, 160, .25);   /* pink */
}
html[data-theme="dark"] {
  --ui-bg: #060a18;
  --ui-glass: rgba(15, 23, 42, .62);
  --ui-glass-strong: rgba(15, 23, 42, .86);
  --ui-glass-border: rgba(148, 163, 184, .14);
  --ui-line: rgba(148, 163, 184, .14);
  --ui-glow: rgba(129, 140, 248, .45);
  --ui-a1: rgba(79, 70, 229, .40);
  --ui-a2: rgba(147, 51, 234, .30);
  --ui-a3: rgba(13, 148, 136, .24);
  --ui-a4: rgba(219, 39, 119, .18);
}

/* ------------------------------------------------------------------ background */
html { background: var(--ui-bg); }
html body { background: transparent !important; }
body::before {                       /* aurora: soft colour clouds that drift slowly */
  content: ''; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 35% at 18% 22%, var(--ui-a1), transparent 70%),
    radial-gradient(35% 30% at 82% 18%, var(--ui-a2), transparent 70%),
    radial-gradient(40% 35% at 70% 80%, var(--ui-a3), transparent 70%),
    radial-gradient(30% 30% at 25% 85%, var(--ui-a4), transparent 70%);
}
html[data-fx="on"] body::before { animation: ui-aurora 38s ease-in-out infinite alternate; will-change: transform; }
html[data-theme="dark"] body::after { /* stars */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 68% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 62%, #c7d2fe, transparent), radial-gradient(1px 1px at 82% 48%, #fff, transparent),
    radial-gradient(1px 1px at 52% 88%, #e9d5ff, transparent), radial-gradient(1.5px 1.5px at 92% 82%, #fff, transparent),
    radial-gradient(1px 1px at 8% 72%, #fff, transparent), radial-gradient(1px 1px at 44% 30%, #fff, transparent);
  background-size: 420px 420px;
}
html[data-theme="dark"][data-fx="on"] body::after { animation: ui-twinkle 6s ease-in-out infinite alternate; }

@keyframes ui-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-4deg) scale(1.02); }
}
@keyframes ui-twinkle { from { opacity: .35; } to { opacity: .7; } }

/* ------------------------------------------------------------------ glass */
html[data-fx="on"] :is(.rounded-2xl, .rounded-3xl).bg-white,
html[data-fx="on"] aside.bg-white {
  background-color: var(--ui-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: var(--ui-glass-border) !important;
}
html[data-fx="on"] header:is(.bg-white\/80, .bg-white\/85, .bg-white\/95) { background-color: var(--ui-glass-strong) !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-fx="on"] :is(.rounded-2xl, .rounded-3xl).bg-white, html[data-fx="on"] aside.bg-white { background-color: var(--ui-glass-strong) !important; }
}

/* ------------------------------------------------------------------ dark theme */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { color: #e2e8f0; }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95       { background-color: var(--ui-glass-strong) !important; }
html[data-theme="dark"] :is(.rounded-2xl, .rounded-3xl).bg-white, html[data-theme="dark"] aside.bg-white { background-color: var(--ui-glass) !important; }
html[data-theme="dark"] header:is(.bg-white\/80, .bg-white\/85) { background-color: rgba(6, 10, 24, .72) !important; }
html[data-theme="dark"] .bg-white\/70      { background-color: rgba(15, 23, 42, .55) !important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/60,
html[data-theme="dark"] .bg-slate-50\/40,
html[data-theme="dark"] .bg-\[\#f8fafc\]    { background-color: rgba(30, 41, 59, .5) !important; }
html[data-theme="dark"] .bg-slate-100      { background-color: rgba(51, 65, 85, .55) !important; }
html[data-theme="dark"] .bg-slate-200      { background-color: rgba(71, 85, 105, .6) !important; }
html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-slate-50\/60:hover { background-color: rgba(71, 85, 105, .45) !important; }
html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: rgba(100, 116, 139, .5) !important; }

html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800    { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-700    { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-slate-600    { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-500    { color: #a3b1c6 !important; }
html[data-theme="dark"] .text-slate-400    { color: #8392a8 !important; }
html[data-theme="dark"] .text-slate-300    { color: #64748b !important; }
html[data-theme="dark"] .hover\:text-slate-900:hover,
html[data-theme="dark"] .hover\:text-slate-800:hover,
html[data-theme="dark"] .hover\:text-slate-700:hover { color: #fff !important; }

html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-50,
html[data-theme="dark"] .divide-slate-100 > * + *,
html[data-theme="dark"] .divide-slate-50 > * + * { border-color: rgba(148, 163, 184, .1) !important; }
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/70,
html[data-theme="dark"] .border-slate-200\/60 { border-color: rgba(148, 163, 184, .16) !important; }
html[data-theme="dark"] .border-slate-300  { border-color: rgba(148, 163, 184, .28) !important; }
html[data-theme="dark"] .ring-white        { --tw-ring-color: rgba(15, 23, 42, .9) !important; }
html[data-theme="dark"] :is(.ring-slate-100, .ring-slate-200) { --tw-ring-color: rgba(148, 163, 184, .2) !important; }

/* tinted chips and alerts: keep the hue, drop the brightness */
html[data-theme="dark"] :is(.bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-50\/50, .bg-indigo-50\/60, .bg-indigo-100) { background-color: rgba(99, 102, 241, .16) !important; }
html[data-theme="dark"] :is(.bg-violet-50, .bg-violet-100)    { background-color: rgba(139, 92, 246, .16) !important; }
html[data-theme="dark"] :is(.bg-rose-50, .bg-red-50, .bg-rose-50\/50, .bg-rose-50\/60) { background-color: rgba(244, 63, 94, .14) !important; }
html[data-theme="dark"] :is(.bg-emerald-50, .bg-emerald-50\/40, .bg-emerald-50\/60) { background-color: rgba(16, 185, 129, .14) !important; }
html[data-theme="dark"] :is(.bg-amber-50, .bg-amber-50\/70, .bg-amber-50\/60, .bg-amber-50\/40, .bg-amber-100, .bg-yellow-50, .bg-orange-50) { background-color: rgba(245, 158, 11, .14) !important; }
html[data-theme="dark"] :is(.bg-cyan-50, .bg-sky-50, .bg-sky-100, .bg-teal-50) { background-color: rgba(6, 182, 212, .14) !important; }
html[data-theme="dark"] :is(.text-indigo-600, .text-indigo-700, .text-indigo-500, .text-indigo-900, .text-indigo-700\/80, .text-indigo-400, .text-sky-700) { color: #a5b4fc !important; }
html[data-theme="dark"] :is(.text-violet-600, .text-violet-700) { color: #c4b5fd !important; }
html[data-theme="dark"] :is(.text-rose-600, .text-rose-700, .text-rose-800, .text-red-600) { color: #fda4af !important; }
html[data-theme="dark"] :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900) { color: #6ee7b7 !important; }
html[data-theme="dark"] :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-600, .text-orange-600) { color: #fcd34d !important; }
html[data-theme="dark"] :is(.text-cyan-600, .text-cyan-700) { color: #67e8f9 !important; }
html[data-theme="dark"] :is(.border-indigo-100, .border-indigo-200, .border-indigo-300) { border-color: rgba(129, 140, 248, .35) !important; }
html[data-theme="dark"] :is(.border-emerald-200, .border-emerald-300) { border-color: rgba(52, 211, 153, .3) !important; }
html[data-theme="dark"] :is(.border-rose-200, .border-rose-300) { border-color: rgba(251, 113, 133, .3) !important; }
html[data-theme="dark"] :is(.border-amber-100, .border-amber-200, .border-amber-300) { border-color: rgba(251, 191, 36, .3) !important; }
html[data-theme="dark"] [class*="ring-indigo-1"], html[data-theme="dark"] [class*="ring-emerald-1"],
html[data-theme="dark"] [class*="ring-amber-1"], html[data-theme="dark"] [class*="ring-rose-1"], html[data-theme="dark"] [class*="ring-cyan-1"] { --tw-ring-color: rgba(129, 140, 248, .28) !important; }
html[data-theme="dark"] [class*="shadow-indigo-"], html[data-theme="dark"] [class*="shadow-emerald-"],
html[data-theme="dark"] [class*="shadow-amber-"], html[data-theme="dark"] [class*="shadow-rose-"],
html[data-theme="dark"] [class*="shadow-red-"], html[data-theme="dark"] [class*="shadow-violet-"],
html[data-theme="dark"] [class*="shadow-orange-"] { --tw-shadow-color: rgba(0, 0, 0, .35) !important; }

/* light pastel gradients (profile headers, hero cards) become glass */
html[data-theme="dark"] :is([class*="from-slate-50"], [class*="from-indigo-50"], [class*="from-emerald-50"], [class*="from-amber-50"],
                             [class*="from-rose-50"], [class*="via-white"], [class*="to-white"]):not(body) {
  background-image: none !important;
  background-color: var(--ui-glass) !important;
}

/* form fields */
html[data-theme="dark"] :is(input, textarea, select) { color: #e2e8f0; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #64748b !important; }
html[data-theme="dark"] option { background: #0f172a; color: #e2e8f0; }

/* ------------------------------------------------------------------ motion */
/* cards float in as they scroll into view (sicta-ui.js adds .ui-reveal / .ui-in) */
html[data-fx="on"] .ui-reveal { opacity: 0; transform: translateY(14px) scale(.985); }
html[data-fx="on"] .ui-reveal.ui-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--ui-d, 0ms);
}

/* glowing lift on cards and buttons */
html[data-fx="on"] :is(a, button).rounded-2xl:not([disabled]):hover,
html[data-fx="on"] article:hover { box-shadow: 0 10px 40px -12px var(--ui-glow); }
html[data-fx="on"] :is(.bg-indigo-600, .bg-emerald-600, .bg-violet-600, .bg-red-600):is(button, a):not(.absolute, .fixed) { position: relative; overflow: hidden; }
html[data-fx="on"] :is(.bg-indigo-600, .bg-emerald-600, .bg-violet-600, .bg-red-600):is(button, a)::after { /* light sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
}
html[data-fx="on"] :is(.bg-indigo-600, .bg-emerald-600, .bg-violet-600, .bg-red-600):is(button, a):hover::after { transform: translateX(120%); transition: transform .8s ease; }

/* bell wiggle when something new arrives */
html[data-fx="on"] .ui-shake { animation: ui-shake .9s ease 1; transform-origin: 50% 10%; }
@keyframes ui-shake {
  0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}

/* floating reaction emojis */
.ui-float {
  position: fixed; z-index: 140; pointer-events: none; font-size: 22px; line-height: 1;
  animation: ui-float 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ui-float {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0); }
  15%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * .2), -18px) scale(1.25) rotate(calc(var(--rot) * .3)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(.9) rotate(var(--rot)); }
}
html[data-fx="on"] [data-reaction-main] span.text-base { display: inline-block; animation: ui-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ui-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }

/* confetti canvas */
#ui-confetti { position: fixed; inset: 0; z-index: 150; pointer-events: none; }

/* theme switch */
.ui-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px;
  color: inherit; transition: background-color .2s, transform .2s;
}
.ui-toggle:hover { background: rgba(100, 116, 139, .14); }
.ui-toggle:active { transform: scale(.92); }
.ui-toggle-float { position: fixed; top: 14px; right: 14px; z-index: 60; background: var(--ui-glass-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); color: #475569; }
html[data-theme="dark"] .ui-toggle-float { color: #e2e8f0; }
.ui-menu {
  position: fixed; z-index: 160; width: 220px; padding: 6px; border-radius: 16px;
  background: var(--ui-glass-strong); border: 1px solid var(--ui-glass-border); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #0f172a; font-size: 14px;
}
html[data-theme="dark"] .ui-menu { color: #e2e8f0; }
.ui-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-weight: 600; text-align: left; }
.ui-menu button:hover { background: rgba(100, 116, 139, .14); }
.ui-menu button[aria-checked="true"] { background: rgba(99, 102, 241, .16); color: #4f46e5; }
html[data-theme="dark"] .ui-menu button[aria-checked="true"] { color: #a5b4fc; }
.ui-menu hr { margin: 6px 4px; border-color: var(--ui-line); }

/* exams: nothing moving while students concentrate */
html[data-focus="1"] body::before, html[data-focus="1"] body::after { animation: none !important; }
html[data-focus="1"] .ui-reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ui-reveal { opacity: 1 !important; transform: none !important; }
}

/* dark: translucent slate/white variants and "selected tab" (peer-checked) states */
html[data-theme="dark"] :is([class^="bg-slate-50/"], [class*=" bg-slate-50/"], [class^="bg-slate-100/"], [class*=" bg-slate-100/"]) { background-color: rgba(30, 41, 59, .5) !important; }
html[data-theme="dark"] :is([class^="bg-slate-200/"], [class*=" bg-slate-200/"]) { background-color: rgba(148, 163, 184, .16) !important; }
html[data-theme="dark"] :is([class*=" hover:bg-amber-50"], [class*=" hover:bg-indigo-50"], [class*=" hover:bg-rose-50"], [class*=" hover:bg-emerald-50"]):hover { background-color: rgba(99, 102, 241, .14) !important; }
html[data-theme="dark"] .peer:checked ~ :is(.peer-checked\:bg-slate-100, .peer-checked\:bg-slate-50) { background-color: rgba(148, 163, 184, .22) !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-indigo-50 { background-color: rgba(99, 102, 241, .22) !important; color: #c7d2fe !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-red-50   { background-color: rgba(239, 68, 68, .2) !important;  color: #fca5a5 !important; }
html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-amber-50 { background-color: rgba(245, 158, 11, .2) !important; color: #fcd34d !important; }
html[data-theme="dark"] .has-\[\:checked\]\:bg-indigo-50:has(:checked) { background-color: rgba(99, 102, 241, .2) !important; }

/* ================================================================ community wall */
/* HTMX indicator: swap spinner / send icon on submit */
.htmx-indicator-spin { display: none; }
.htmx-request .htmx-indicator-spin { display: inline-flex; }
.htmx-request .htmx-indicator-rest { display: none; }

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* line-clamp utility for Tailwind CDN (which lacks the plugin) */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* hide scrollbar on sidebar */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

/* htmx swap fade for delete */
.htmx-swapping { opacity: 0; transition: opacity .25s ease-out; }

/* Reaction picker: hover on desktop, press-and-hold on phones (wall.js adds .picker-open) */
[data-reaction-picker] { transition: opacity .15s ease .25s, transform .15s ease .25s; transform-origin: bottom left; }
[data-reaction-picker]::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* bridge the gap so hover isn't lost */
@media (hover: hover) {
  [data-reaction-wrap]:hover [data-reaction-picker] { opacity: 1; transform: scale(1); pointer-events: auto; transition-delay: .35s; }
}
[data-reaction-wrap].picker-open [data-reaction-picker] { opacity: 1; transform: scale(1); pointer-events: auto; transition-delay: 0s; }
#wall-toast { pointer-events: none; }

/* paper pictures keep a white card in dark mode (dark devices on a dark page are hard to see) */
html[data-theme="dark"] img.paper-img { background-color: #fff !important; }