/*
 * premium-ui.css
 * ---------------------------------------------------------------------------
 * Purpose : Shared "premium" micro-interaction + glassmorphism utility layer
 *           used by both the public CMS website and the admin dashboards.
 * Surface : Loaded via <link> from layouts/app.blade.php (admin) and
 *           Modules/Cms/.../layouts/website.blade.php (public).
 * Depends : Tailwind CDN classes (already loaded). No build step.
 * Notes   : All animations honour `prefers-reduced-motion`.
 *           Colour-aware utilities reference CSS vars exposed by the host
 *           layout: --color-primary (admin) / --theme-primary (CMS themes).
 * ---------------------------------------------------------------------------
 */

/* ───────────────────────── 0. Hero gradients ──────────────────────────────
   The Tailwind Play CDN has been flaky compiling 3-stop gradients
   (`from-X via-Y to-Z`) — the via-stop sometimes drops out and the result
   collapses to a single colour. These canonical gradient classes live in
   plain CSS so they render predictably across every browser and theme.
   Use one of these on hero banners; pair with `text-white shadow-lg
   rounded-3xl overflow-hidden relative` for the full premium look. */
.hero-gradient-primary  { background: linear-gradient(to bottom right, #4f46e5 0%, #9333ea 45%, #db2777 100%); }
.hero-gradient-amber    { background: linear-gradient(to bottom right, #f59e0b 0%, #f97316 45%, #f43f5e 100%); }
.hero-gradient-emerald  { background: linear-gradient(to bottom right, #10b981 0%, #14b8a6 45%, #0891b2 100%); }
.hero-gradient-sky      { background: linear-gradient(to bottom right, #0ea5e9 0%, #3b82f6 45%, #4f46e5 100%); }
.hero-gradient-rose     { background: linear-gradient(to bottom right, #f43f5e 0%, #ec4899 45%, #a855f7 100%); }
.hero-gradient-sunset   { background: linear-gradient(to bottom right, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%); }

/* ───────────────────── 0b. Quill rich-text editor — dark mode ─────────────
   Quill's "snow" theme is built for light backgrounds — its toolbar
   icons are SVG strokes coloured #444 (near-black) which become
   invisible on a dark slate canvas. These overrides re-tone the
   toolbar so the buttons, dropdowns, and editor body all read clearly
   in dark mode. Lives here (rather than per-view) so every form that
   embeds Quill (StaffMeeting, Homework, LMS RTE) gets the same look. */
.dark .ql-toolbar.ql-snow,
.dark .ql-container.ql-snow              { border-color: rgb(51 65 85); }
.dark .ql-toolbar.ql-snow                { background: rgb(15 23 42); }
.dark .ql-toolbar.ql-snow .ql-stroke,
.dark .ql-toolbar.ql-snow .ql-stroke-miter { stroke: rgb(203 213 225); }
.dark .ql-toolbar.ql-snow .ql-fill,
.dark .ql-toolbar.ql-snow .ql-stroke.ql-fill { fill: rgb(203 213 225); }
.dark .ql-toolbar.ql-snow .ql-picker      { color: rgb(203 213 225); }
.dark .ql-toolbar.ql-snow .ql-picker-label::before,
.dark .ql-toolbar.ql-snow .ql-picker-item { color: rgb(203 213 225); }
.dark .ql-toolbar.ql-snow button:hover,
.dark .ql-toolbar.ql-snow .ql-picker-label:hover { color: rgb(165 180 252); }
.dark .ql-toolbar.ql-snow button:hover .ql-stroke,
.dark .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke { stroke: rgb(165 180 252); }
.dark .ql-toolbar.ql-snow button:hover .ql-fill,
.dark .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill   { fill:   rgb(165 180 252); }
.dark .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.dark .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: rgb(99 102 241); }
.dark .ql-toolbar.ql-snow button.ql-active .ql-fill,
.dark .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill   { fill:   rgb(99 102 241); }
.dark .ql-snow .ql-picker-options         { background: rgb(15 23 42); border-color: rgb(51 65 85); color: rgb(203 213 225); }
.dark .ql-snow .ql-tooltip                { background: rgb(15 23 42); border-color: rgb(51 65 85); color: rgb(203 213 225); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.dark .ql-snow .ql-tooltip input[type=text] { background: rgb(2 6 23); border-color: rgb(51 65 85); color: rgb(226 232 240); }
.dark .ql-editor                          { color: rgb(226 232 240); }
.dark .ql-editor.ql-blank::before         { color: rgb(100 116 139); font-style: italic; }
.dark .ql-editor a                        { color: rgb(129 140 248); }
.dark .ql-editor blockquote               { border-left-color: rgb(71 85 105); color: rgb(148 163 184); }
.dark .ql-editor pre.ql-syntax,
.dark .ql-editor code                     { background: rgb(2 6 23); color: rgb(226 232 240); }

/* ───────────────────────── 1. Theme bridge ─────────────────────────────── */
/* Provide a single canonical name (--theme-primary) regardless of which
   layout sets the variable. Falls back to indigo-600 if neither is set. */
:root {
    --theme-primary: var(--color-primary, #4f46e5);
    --theme-primary-soft: var(--color-primary-soft, #c7d2fe);
}

/* ───────────────────────── 2. Glassmorphism ────────────────────────────── */
.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 32px -12px rgba(15, 23, 42, 0.12);
}
.glass-dark {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

/* ───────────────────────── 3. Hover micro-interactions ─────────────────── */
.hover-lift {
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.22);
}

.hover-glow {
    transition: box-shadow .3s ease, border-color .3s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 0 1px var(--theme-primary), 0 12px 32px -12px var(--theme-primary);
    border-color: var(--theme-primary);
}

/* Animated gradient sweep for primary buttons. Add `.btn-shine` to any button. */
.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-shine::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.btn-shine:hover::after { transform: translateX(120%); }

/* ───────────────────────── 4. Page enter transition ────────────────────── */
@keyframes premiumPageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.premium-page-enter {
    animation: premiumPageIn .45s cubic-bezier(.2,.8,.2,1) both;
}

/* ───────────────────────── 5. Focus rings ──────────────────────────────── */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 35%, transparent);
    border-radius: 0.5rem;
}

/* ───────────────────────── 6. Animated gradient text ───────────────────── */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.gradient-text {
    background: linear-gradient(90deg,
        var(--theme-primary),
        color-mix(in srgb, var(--theme-primary) 60%, #ec4899) 50%,
        var(--theme-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
}

/* ───────────────────────── 7. Skeleton loader ──────────────────────────── */
@keyframes premiumShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton-loader {
    background: linear-gradient(90deg,
        rgba(0,0,0,.05) 25%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,.05) 75%);
    background-size: 200% 100%;
    animation: premiumShimmer 1.5s ease-in-out infinite;
    border-radius: .5rem;
    color: transparent;
    user-select: none;
}

/* ───────────────────────── 8. Custom scrollbar ─────────────────────────── */
.premium-scroll::-webkit-scrollbar         { width: 8px; height: 8px; }
.premium-scroll::-webkit-scrollbar-track   { background: transparent; }
.premium-scroll::-webkit-scrollbar-thumb   {
    background: color-mix(in srgb, var(--theme-primary) 35%, #cbd5e1);
    border-radius: 8px;
}
.premium-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--theme-primary);
}
/* Apply thin scrollbars globally on the body for visual consistency. */
body::-webkit-scrollbar         { width: 10px; }
body::-webkit-scrollbar-track   { background: #f1f5f9; }
body::-webkit-scrollbar-thumb   {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--theme-primary), #64748b);
}

/* ───────────────────────── 9. ApexCharts polish ────────────────────────── */
.apexcharts-tooltip.apexcharts-theme-light {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.6) !important;
    box-shadow: 0 10px 30px -10px rgba(15,23,42,.25) !important;
    border-radius: .75rem !important;
    font-family: inherit !important;
}
.apexcharts-tooltip-title {
    background: transparent !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    font-weight: 600 !important;
}

/* ───────────────────────── 10. Dashboard reveal system ────────────────────
   "Framer Motion"-style staggered entry. Drop `.reveal-on-mount` on any
   element to fade-in + slide up on first paint. Pair with `.reveal-d-1`
   through `.reveal-d-8` to stagger siblings (each step = 60ms).

   Why CSS, not JS: zero per-element cost, no Alpine wiring, plays nicely
   with HTMX/turbolinks navigations because the keyframe re-runs on
   re-mount. Honour `prefers-reduced-motion` via the global rule below. */
@keyframes revealFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal-on-mount {
    opacity: 0;
    animation: revealFadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.reveal-d-1 { animation-delay: .06s; }
.reveal-d-2 { animation-delay: .12s; }
.reveal-d-3 { animation-delay: .18s; }
.reveal-d-4 { animation-delay: .24s; }
.reveal-d-5 { animation-delay: .30s; }
.reveal-d-6 { animation-delay: .36s; }
.reveal-d-7 { animation-delay: .42s; }
.reveal-d-8 { animation-delay: .48s; }

/* Float — slow vertical bob for decorative icons / orbs. */
@keyframes premiumFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.premium-float {
    animation: premiumFloat 4s ease-in-out infinite;
}

/* Pulse-soft — gentle attention on a stat that's actionable. */
@keyframes premiumPulseSoft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.0); }
    50%      { box-shadow: 0 0 0 10px rgba(99,102,241,.10); }
}
.premium-pulse {
    animation: premiumPulseSoft 2.4s ease-in-out infinite;
}

/* Section card baseline — used by dashboard sections that don't pass
   through <x-glass-card>. Picks up dark-mode parity from the .glass
   override in layouts/app.blade.php. */
.dashboard-section {
    border-radius: 1rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* ───────────────────────── 11. Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────── 12. Dashboard widget glass ──────────────────────
   Tile-level glassmorphism for the parent/student dashboard widgets.
   Slightly more saturated than the global .glass so the tiles "pop" against
   the slate canvas in dark mode while staying airy on the white canvas.

   USAGE
     <div class="widget-glass widget-hover">…</div>

   Dark mode is opt-in via the `.dark` ancestor selector (Tailwind `class`
   strategy). Remember: bg-white/50 etc. are NOT auto-inverted by the layout
   override — that's why we hand-roll both palettes here. */
.widget-glass {
    position: relative;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(248, 250, 252, 0.78) 100%);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 1.25rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 12px 36px -16px rgba(15, 23, 42, 0.18);
}
.dark .widget-glass {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.85) 0%,
        rgba(15, 23, 42, 0.78) 100%);
    border-color: rgba(71, 85, 105, 0.45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 16px 40px -16px rgba(0, 0, 0, 0.55);
    color: #e2e8f0;
}

/* Subtle aurora ring on hover — feels like a Framer Motion `whileHover`. */
.widget-hover {
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s ease,
                border-color .35s ease;
}
.widget-hover:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 22px 48px -18px rgba(99, 102, 241, 0.28);
    border-color: rgba(99, 102, 241, 0.45);
}
.dark .widget-hover:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 24px 50px -18px rgba(99, 102, 241, 0.45);
    border-color: rgba(99, 102, 241, 0.55);
}

/* Title bar accent — left-side gradient bar for a Notion-ish feel. */
.widget-glass .widget-title-bar {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.widget-glass .widget-title-bar::before {
    content: '';
    width: 4px; height: 18px;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--theme-primary), #ec4899);
}

/* ───────────────────────── 13. Animated icon helpers ───────────────────── */
@keyframes iconTilt {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50%      { transform: rotate(-8deg) scale(1.08); }
}
.icon-tilt:hover { animation: iconTilt .9s ease-in-out 1; }

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    35%      { transform: translateY(-4px); }
    70%      { transform: translateY(2px); }
}
.icon-bounce:hover { animation: iconBounce .65s ease 1; }

@keyframes iconSpinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.icon-spin-slow { animation: iconSpinSlow 14s linear infinite; }

@keyframes iconPulseRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.35); }
    50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
.icon-pulse { animation: iconPulseRing 2s ease-in-out infinite; border-radius: 9999px; }

/* ───────────────────────── 14. Stagger children ────────────────────────────
   When you don't want to hand-stamp .reveal-d-1..8 on every child, drop
   `.stagger-children` on the parent. Each direct child gets a 70ms step. */
.stagger-children > * {
    opacity: 0;
    animation: revealFadeUp .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.stagger-children > *:nth-child(1)  { animation-delay: .04s; }
.stagger-children > *:nth-child(2)  { animation-delay: .11s; }
.stagger-children > *:nth-child(3)  { animation-delay: .18s; }
.stagger-children > *:nth-child(4)  { animation-delay: .25s; }
.stagger-children > *:nth-child(5)  { animation-delay: .32s; }
.stagger-children > *:nth-child(6)  { animation-delay: .39s; }
.stagger-children > *:nth-child(7)  { animation-delay: .46s; }
.stagger-children > *:nth-child(8)  { animation-delay: .53s; }
.stagger-children > *:nth-child(9)  { animation-delay: .60s; }
.stagger-children > *:nth-child(10) { animation-delay: .67s; }

/* ───────────────────────── 15. Shimmer line ────────────────────────────────
   Used inside subject-progress bars when a percentage is loading or animating
   to its final value. Layered over the base bar to give a "live" feel. */
@keyframes widgetShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.shimmer-line {
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: widgetShimmer 2.2s ease-in-out infinite;
}
.dark .shimmer-line {
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.10) 50%,
        rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
}

/* ───────────────────────── 16. Status chip palette ─────────────────────────
   Self-contained chip colours for homework / library overdue states. Each
   ships its own dark-mode pair so the colours stay legible against slate. */
.chip-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
}
.chip-overdue   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.chip-pending   { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.chip-submitted { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.chip-graded    { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.chip-now       { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }

.dark .chip-overdue   { background: rgba(220, 38, 38, .18);  color: #fecaca; border-color: rgba(248, 113, 113, .35); }
.dark .chip-pending   { background: rgba(234, 179,  8, .18); color: #fde68a; border-color: rgba(250, 204, 21, .35); }
.dark .chip-submitted { background: rgba( 59, 130, 246,.18); color: #bfdbfe; border-color: rgba( 96, 165, 250,.35); }
.dark .chip-graded    { background: rgba( 22, 163,  74,.18); color: #bbf7d0; border-color: rgba( 74, 222, 128,.35); }
.dark .chip-now       { background: rgba(139,  92, 246,.18); color: #ddd6fe; border-color: rgba(167, 139, 250,.35); }

/* ───────────────────────── 17. Avatar stack (teachers tile) ─────────────── */
.avatar-tile {
    position: relative;          /* anchor for the .is-class-teacher ::after ring */
    width: 44px; height: 44px;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-primary), #ec4899);
    box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .55);
    transition: transform .25s ease, box-shadow .25s ease;
    flex-shrink: 0;
}
.avatar-tile:hover {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 10px 20px -8px rgba(99, 102, 241, .65);
}
.dark .avatar-tile { box-shadow: 0 6px 14px -6px rgba(99,102,241,.65); }

/* "Class teacher" ribbon on the homeroom avatar. */
.avatar-tile.is-class-teacher::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    border: 2px solid #f59e0b;
    box-shadow: 0 0 0 2px rgba(255,255,255,.85);
    pointer-events: none;
}
.dark .avatar-tile.is-class-teacher::after {
    box-shadow: 0 0 0 2px rgba(15,23,42,.85);
}