/**
 * Glassmorphism Depth System — PharmAssist
 *
 * 1. Animated multi-stop conic gradient mesh background (60 s GPU rotation,
 *    prefers-reduced-motion aware, toggleable via body.mesh-paused)
 * 2. Depth-layered glassmorphism replacing flat --bg-card: #141414.
 *    Cards sit on translucent glass planes and blur the mesh beneath them
 *    via backdrop-filter: blur(24px) saturate(180%).
 * 3. Floating depth via progressive box-shadow and translateZ compositing.
 *
 * Requires: <div class="gradient-mesh-bg" aria-hidden="true"> as body's
 * first child so it paints below all page content.
 * Toggle: js/mesh-control.js toggles body.mesh-paused and persists to
 * localStorage; respects prefers-reduced-motion at startup.
 */

/* ============================================================================
   GLASS CUSTOM PROPERTIES
   ============================================================================ */

:root {
    /* Translucent backgrounds — one per depth layer */
    --glass-bg-base:     rgba(8, 8, 12, 0.90);     /* chrome: header / sidebar */
    --glass-bg-surface:  rgba(14, 14, 20, 0.58);   /* dashboard container */
    --glass-bg-card:     rgba(18, 18, 28, 0.48);   /* widget / info cards */
    --glass-bg-float:    rgba(20, 20, 32, 0.38);   /* tool cards (highest float) */

    /* Backdrop-filter descriptors */
    --glass-filter-sm:   blur(12px) saturate(150%);
    --glass-filter-md:   blur(24px) saturate(180%);
    --glass-filter-lg:   blur(32px) saturate(200%);

    /* Borders */
    --glass-border-dim:  1px solid rgba(255, 255, 255, 0.055);
    --glass-border-mid:  1px solid rgba(255, 255, 255, 0.085);
    --glass-border-hi:   1px solid rgba(255, 255, 255, 0.120);

    /* Top-edge sheen (simulated glass rim highlight) */
    --glass-sheen:       inset 0 1px 0 rgba(255, 255, 255, 0.048);

    /* Progressive depth shadows */
    --glass-shadow-base:   0 2px 12px rgba(0, 0, 0, 0.45),
                           var(--glass-sheen);
    --glass-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.42),
                           0 1px 6px  rgba(0, 0, 0, 0.25),
                           var(--glass-sheen);
    --glass-shadow-float:  0 8px 40px rgba(0, 0, 0, 0.50),
                           0 2px 10px rgba(0, 0, 0, 0.30),
                           var(--glass-sheen);
    --glass-shadow-lift:   0 20px 64px rgba(0, 0, 0, 0.60),
                           0 6px  20px rgba(0, 0, 0, 0.35),
                           0 0   40px  rgba(var(--accent-primary-rgb), 0.10),
                           var(--glass-sheen);
}

/* Light-mode glass tokens */
body.light-mode {
    --glass-bg-base:     rgba(250, 250, 255, 0.88);
    --glass-bg-surface:  rgba(255, 255, 255, 0.65);
    --glass-bg-card:     rgba(255, 255, 255, 0.58);
    --glass-bg-float:    rgba(255, 255, 255, 0.50);
    --glass-border-dim:  1px solid rgba(0, 0, 0, 0.055);
    --glass-border-mid:  1px solid rgba(0, 0, 0, 0.085);
    --glass-border-hi:   1px solid rgba(0, 0, 0, 0.120);
    --glass-sheen:       inset 0 1px 0 rgba(255, 255, 255, 0.70);
    --glass-shadow-base:   0 2px 12px rgba(0, 0, 0, 0.10),  var(--glass-sheen);
    --glass-shadow-card:   0 4px 24px rgba(0, 0, 0, 0.12),
                           0 1px 6px  rgba(0, 0, 0, 0.08),  var(--glass-sheen);
    --glass-shadow-float:  0 8px 40px rgba(0, 0, 0, 0.15),
                           0 2px 10px rgba(0, 0, 0, 0.10),  var(--glass-sheen);
    --glass-shadow-lift:   0 20px 64px rgba(0, 0, 0, 0.20),
                           0 6px  20px rgba(0, 0, 0, 0.12),
                           0 0   40px  rgba(var(--accent-primary-rgb), 0.08),
                           var(--glass-sheen);
}

/* ============================================================================
   GRADIENT MESH BACKGROUND
   ============================================================================ */

/**
 * .gradient-mesh-bg sits at z-index: 0 (above body's background color but
 * below .app-layout which is raised to z-index: 1).  position: fixed keeps
 * it anchored to the viewport as content scrolls — giving a subtle parallax
 * sense where the cards move over the static gradient field.
 * overflow: hidden clips the oversized rotating pseudo-elements.
 * contain: strict prevents the large rotated children from causing repaints
 * outside the element's bounds.
 */
.gradient-mesh-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

/* Layer 1 — radial blob cluster, slowly drifts across the viewport */
.gradient-mesh-bg::before {
    content: '';
    position: absolute;
    inset: -30%;
    width: 160%;
    height: 160%;
    background:
        radial-gradient(ellipse 90% 70% at 18% 28%,
            rgba(0, 212, 255, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 80% 90% at 82% 72%,
            rgba(124, 58, 237, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 58%  8%,
            rgba(0, 212, 255, 0.050) 0%, transparent 45%),
        radial-gradient(ellipse 55% 65% at  8% 88%,
            rgba(124, 58, 237, 0.07) 0%, transparent 45%),
        radial-gradient(ellipse 40% 40% at 75% 20%,
            rgba(80, 40, 200, 0.04) 0%, transparent 40%);
    will-change: transform;
    animation: mesh-drift 60s ease-in-out infinite;
    transform-origin: center center;
}

/* Layer 2 — multi-stop conic gradient, continuously rotates (GPU-only) */
.gradient-mesh-bg::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 35% 45%,
        transparent                  0deg,
        rgba(0, 212, 255, 0.030)    40deg,
        transparent                 90deg,
        rgba(124, 58, 237, 0.038) 155deg,
        transparent               215deg,
        rgba(0, 212, 255, 0.022)  285deg,
        transparent               330deg,
        rgba(124, 58, 237, 0.018) 350deg,
        transparent               360deg
    );
    will-change: transform;
    animation: mesh-spin 60s linear infinite;
    transform-origin: 35% 45%;
}

/* Blob drift — gentle scale + translate to make blobs breathe */
@keyframes mesh-drift {
    0%   { transform: translateZ(0) scale(1.00) translate( 0.0%,  0.0%); }
    20%  { transform: translateZ(0) scale(1.04) translate( 2.0%, -1.5%); }
    40%  { transform: translateZ(0) scale(1.02) translate(-1.0%,  2.0%); }
    60%  { transform: translateZ(0) scale(1.05) translate( 1.5%,  1.0%); }
    80%  { transform: translateZ(0) scale(1.03) translate(-2.0%, -1.0%); }
    100% { transform: translateZ(0) scale(1.00) translate( 0.0%,  0.0%); }
}

/* Conic sweep — pure rotation, 60 s cycle, only GPU-composited layers */
@keyframes mesh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pause animation via JS toggle (body.mesh-paused) */
body.mesh-paused .gradient-mesh-bg::before,
body.mesh-paused .gradient-mesh-bg::after {
    animation-play-state: paused;
}

/* System-level reduced-motion: disable entirely */
@media (prefers-reduced-motion: reduce) {
    .gradient-mesh-bg::before,
    .gradient-mesh-bg::after {
        animation: none;
    }
}

/* Lighter mesh tones for light-mode */
body.light-mode .gradient-mesh-bg::before {
    background:
        radial-gradient(ellipse 90% 70% at 18% 28%,
            rgba(0, 160, 240, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 80% 90% at 82% 72%,
            rgba(124, 58, 237, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 58%  8%,
            rgba(0, 160, 240, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse 55% 65% at  8% 88%,
            rgba(124, 58, 237, 0.05) 0%, transparent 45%);
}

body.light-mode .gradient-mesh-bg::after {
    background: conic-gradient(
        from 0deg at 35% 45%,
        transparent                  0deg,
        rgba(0, 160, 240, 0.018)    40deg,
        transparent                 90deg,
        rgba(124, 58, 237, 0.022) 155deg,
        transparent               215deg,
        rgba(0, 160, 240, 0.014)  285deg,
        transparent               360deg
    );
}

/* ============================================================================
   DEPTH STACKING
   App content must be above the mesh (z-index: 0).
   ============================================================================ */

.app-layout {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   DEPTH LAYER 0 — CHROME (header & sidebar)
   Most opaque; barely translucent so UI chrome stays readable.
   ============================================================================ */

.user-info-bar,
.header {
    background: var(--glass-bg-base) !important;
    backdrop-filter: var(--glass-filter-md);
    -webkit-backdrop-filter: var(--glass-filter-md);
    border-bottom: var(--glass-border-dim) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.50), var(--glass-sheen) !important;
}

.sidebar {
    background: var(--glass-bg-base) !important;
    backdrop-filter: var(--glass-filter-md);
    -webkit-backdrop-filter: var(--glass-filter-md);
    border-right: var(--glass-border-dim) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.40), var(--glass-sheen) !important;
}

.quick-info-strip {
    background: rgba(10, 10, 18, 0.55) !important;
    backdrop-filter: var(--glass-filter-sm);
    -webkit-backdrop-filter: var(--glass-filter-sm);
    border-bottom: var(--glass-border-dim) !important;
}

/* ============================================================================
   DEPTH LAYER 1 — INFO CARDS (quick-info-strip chips)
   ============================================================================ */

.info-card {
    background: var(--glass-bg-card) !important;
    backdrop-filter: var(--glass-filter-sm);
    -webkit-backdrop-filter: var(--glass-filter-sm);
    border: var(--glass-border-dim) !important;
    box-shadow: var(--glass-shadow-card) !important;
}

/* ============================================================================
   DEPTH LAYER 2 — DASHBOARD SURFACE
   The dashboard container floats above the mesh like a large frosted pane.
   ============================================================================ */

.dashboard {
    background: var(--glass-bg-surface) !important;
    backdrop-filter: var(--glass-filter-md);
    -webkit-backdrop-filter: var(--glass-filter-md);
    border: var(--glass-border-mid) !important;
    box-shadow: var(--glass-shadow-float) !important;
}

/* ============================================================================
   DEPTH LAYER 3 — WIDGET CARDS (floating)
   Cards hover above the dashboard surface; hover lifts them further.
   ============================================================================ */

.dashboard-item {
    background: var(--glass-bg-card) !important;
    backdrop-filter: var(--glass-filter-md);
    -webkit-backdrop-filter: var(--glass-filter-md);
    border: var(--glass-border-mid) !important;
    box-shadow: var(--glass-shadow-card) !important;
    /* Force own compositing layer for smooth transforms */
    transform: translateZ(0);
    transition:
        transform   0.35s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow  0.35s cubic-bezier(0.23, 1, 0.32, 1),
        background  0.35s ease,
        border-color 0.35s ease !important;
}

.dashboard-item:hover {
    background: rgba(26, 26, 40, 0.54) !important;
    border: var(--glass-border-hi) !important;
    box-shadow: var(--glass-shadow-lift) !important;
    transform: translateY(-6px) translateZ(0) !important;
}

/* ============================================================================
   DEPTH LAYER 4 — TOOL CARDS (highest float)
   Tool cards sit furthest from the page surface; hover pushes them highest.
   ============================================================================ */

.tool-card {
    background: var(--glass-bg-float) !important;
    backdrop-filter: var(--glass-filter-md);
    -webkit-backdrop-filter: var(--glass-filter-md);
    border: var(--glass-border-mid) !important;
    box-shadow: var(--glass-shadow-float) !important;
    transform: translateZ(0);
    transition:
        transform   0.35s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow  0.35s cubic-bezier(0.23, 1, 0.32, 1),
        background  0.35s ease,
        border-color 0.35s ease !important;
}

.tool-card:hover {
    background: rgba(28, 28, 44, 0.50) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.28) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.65),
        0 8px  24px rgba(0, 0, 0, 0.40),
        0 0    50px rgba(var(--accent-primary-rgb), 0.12),
        var(--glass-sheen) !important;
    transform: translateY(-10px) translateZ(0) !important;
}

/* ============================================================================
   LIGHT-MODE OVERRIDES
   ============================================================================ */

body.light-mode .user-info-bar,
body.light-mode .header {
    background: var(--glass-bg-base) !important;
    border-bottom: var(--glass-border-dim) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), var(--glass-sheen) !important;
}

body.light-mode .sidebar {
    background: var(--glass-bg-base) !important;
    border-right: var(--glass-border-dim) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.10), var(--glass-sheen) !important;
}

body.light-mode .quick-info-strip {
    background: rgba(245, 245, 255, 0.72) !important;
}

body.light-mode .info-card {
    background: var(--glass-bg-card) !important;
    border: var(--glass-border-dim) !important;
}

body.light-mode .dashboard {
    background: var(--glass-bg-surface) !important;
    border: var(--glass-border-mid) !important;
}

body.light-mode .dashboard-item {
    background: var(--glass-bg-card) !important;
    border: var(--glass-border-mid) !important;
}

body.light-mode .dashboard-item:hover {
    background: rgba(255, 255, 255, 0.78) !important;
    border: var(--glass-border-hi) !important;
}

body.light-mode .tool-card {
    background: var(--glass-bg-float) !important;
    border: var(--glass-border-mid) !important;
    box-shadow: var(--glass-shadow-float) !important;
}

body.light-mode .tool-card:hover {
    background: rgba(255, 255, 255, 0.80) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.20) !important;
}

/* ============================================================================
   REDUCED-MOTION — disable hover float animations
   The mesh animation is already off via the media query above.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .dashboard-item,
    .tool-card {
        transition:
            background   0.2s ease,
            border-color 0.2s ease !important;
    }

    .dashboard-item:hover,
    .tool-card:hover {
        transform: translateZ(0) !important;  /* no lift, keep GPU layer */
    }
}

/* ============================================================================
   FALLBACK — browsers without backdrop-filter (e.g. Firefox < 103)
   ============================================================================ */

@supports not (backdrop-filter: blur(1px)) {
    .dashboard       { background: rgba(14, 14, 20, 0.96) !important; }
    .dashboard-item  { background: rgba(18, 18, 28, 0.95) !important; }
    .tool-card       { background: rgba(20, 20, 32, 0.95) !important; }
    .sidebar         { background: rgba(8, 8, 12, 0.99)   !important; }
    .user-info-bar,
    .header          { background: rgba(8, 8, 12, 0.99)   !important; }

    body.light-mode .dashboard      { background: rgba(255, 255, 255, 0.96) !important; }
    body.light-mode .dashboard-item { background: rgba(255, 255, 255, 0.94) !important; }
    body.light-mode .tool-card      { background: rgba(255, 255, 255, 0.94) !important; }
    body.light-mode .sidebar        { background: rgba(250, 250, 255, 0.99) !important; }
    body.light-mode .user-info-bar,
    body.light-mode .header         { background: rgba(250, 250, 255, 0.99) !important; }
}