/* ========================================================================== 
   REHAB Platform 7 — Liquid Glass Theme
   Commit 11
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Core palette */
    --ui-bg: #0a0a0a;
    --ui-bg-deep: #060608;
    --ui-bg-soft: #101014;
    --ui-surface: rgba(255, 255, 255, .055);
    --ui-surface-hover: rgba(255, 255, 255, .105);
    --ui-surface-strong: rgba(255, 255, 255, .12);
    --ui-surface-dark: rgba(0, 0, 0, .26);
    --ui-border: rgba(255, 255, 255, .085);
    --ui-border-strong: rgba(255, 255, 255, .17);
    --ui-text: #fff;
    --ui-text-secondary: rgba(255, 255, 255, .70);
    --ui-text-muted: rgba(255, 255, 255, .47);
    --ui-accent: #6c63ff;
    --ui-accent-2: #00d4ff;
    --ui-accent-soft: rgba(108, 99, 255, .16);
    --ui-success: #65e6ad;
    --ui-warning: #f3ca70;
    --ui-danger: #ff7773;

    /* Geometry and effects */
    --ui-radius-xl: 30px;
    --ui-radius-lg: 22px;
    --ui-radius-md: 16px;
    --ui-blur: blur(20px) saturate(180%);
    --ui-shadow: 0 8px 32px rgba(0, 0, 0, .40);
    --ui-shadow-hover:
        0 18px 52px rgba(0, 0, 0, .50),
        0 0 34px rgba(108, 99, 255, .17);
    --ui-transition: .3s ease;

    /* Backward-compatible aliases used by current modules */
    --bg: var(--ui-bg);
    --bg-deep: var(--ui-bg-deep);
    --panel: var(--ui-surface);
    --panel-strong: var(--ui-surface-strong);
    --line: var(--ui-border);
    --line-strong: var(--ui-border-strong);
    --text: var(--ui-text);
    --muted: var(--ui-text-secondary);
    --accent: var(--ui-accent);
    --accent-soft: var(--ui-accent-soft);
    --success: var(--ui-success);
    --warning: var(--ui-warning);
    --danger: var(--ui-danger);
    --shadow: var(--ui-shadow);
    --radius-xl: var(--ui-radius-xl);
    --radius-lg: var(--ui-radius-lg);
    --radius-md: var(--ui-radius-md);
    --radius: var(--ui-radius-lg);
    --app-bg: var(--ui-bg);
    --app-text: var(--ui-text);
}

html {
    min-height: 100%;
    background: var(--ui-bg);
}

body[data-ui="liquid-glass"],
body.ui-liquid-glass {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ui-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(108, 99, 255, .18), transparent 31%),
        radial-gradient(circle at 88% 17%, rgba(0, 212, 255, .13), transparent 29%),
        radial-gradient(circle at 58% 100%, rgba(108, 99, 255, .10), transparent 36%),
        linear-gradient(145deg, #080808 0%, #0d0d12 55%, #08080b 100%);
    background-attachment: fixed;
    font-family: var(--font-ui, "Unbounded", Arial, sans-serif);
    isolation: isolate;
    overflow-x: hidden;
}

body[data-ui="liquid-glass"]::before,
body.ui-liquid-glass::before {
    position: fixed;
    inset: 0;
    z-index: -3;
    content: "";
    pointer-events: none;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

body[data-ui="liquid-glass"]::after,
body.ui-liquid-glass::after {
    position: fixed;
    right: -180px;
    bottom: -190px;
    z-index: -2;
    width: 520px;
    aspect-ratio: 1;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    background: rgba(0, 212, 255, .12);
    filter: blur(120px);
    animation: uiAmbientDrift 15s ease-in-out infinite alternate;
}

@keyframes uiAmbientDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-70px, -40px, 0) scale(1.08); }
}

::selection {
    color: #fff;
    background: rgba(108, 99, 255, .62);
}

/* Shared glass material */
.glass,
.panel,
.card,
dialog,
.ui-glass {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    backdrop-filter: var(--ui-blur);
    -webkit-backdrop-filter: var(--ui-blur);
}

.glass::before,
.panel::before,
.card::before,
.ui-glass::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    content: "";
    pointer-events: none;
    border-radius: inherit;
    opacity: .70;
    background:
        linear-gradient(
            130deg,
            rgba(255, 255, 255, .33),
            rgba(108, 99, 255, .20) 34%,
            transparent 58%,
            rgba(0, 212, 255, .14)
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.glass > *,
.panel > *,
.card > *,
.ui-glass > * {
    position: relative;
    z-index: 1;
}

/* Pointer-following highlight. Coordinates are set by ui-effects.js. */
.ui-glow {
    --ui-glow-x: 50%;
    --ui-glow-y: 0%;
}

.ui-glow::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
        radial-gradient(
            340px circle at var(--ui-glow-x) var(--ui-glow-y),
            rgba(255, 255, 255, .13),
            rgba(108, 99, 255, .08) 34%,
            transparent 68%
        );
    transition: opacity var(--ui-transition);
}

.ui-glow:hover::after,
.ui-glow:focus-within::after {
    opacity: 1;
}

/* Graceful fallback when backdrop-filter is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .panel,
    .card,
    dialog,
    .ui-glass {
        background: rgba(25, 25, 31, .94);
    }
}

/* Reveal system */
.ui-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .72s ease,
        transform .72s ease;
}

.ui-reveal.ui-visible {
    opacity: 1;
    transform: translateY(0);
}

body:not(.ui-ready) .ui-reveal[data-ui-immediate="true"] {
    opacity: 1;
    transform: none;
}

/* Accessible focus */
:focus-visible {
    outline: 2px solid rgba(0, 212, 255, .86);
    outline-offset: 4px;
}

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

    .ui-reveal {
        opacity: 1;
        transform: none;
    }
}