/* Glass UI kit — soft liquid glass for the admin panel */
:root {
    --glass-blur: blur(13px) saturate(1.15);
    --glass-blur-strong: blur(17px) saturate(1.2);
    --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, transparent 60%);
    --glass-edge: 1px solid rgba(255, 255, 255, 0.12);
    --glass-glow: 0 0 0 1px rgba(255,255,255,0.05), 0 14px 34px rgba(76, 29, 149, 0.22);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ambient mesh + floating orbs */
.glass-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.glass-scene #particles-js {
    position: absolute;
    inset: 0;
    opacity: 0.55;
}
.glass-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(44px);
    opacity: 0.4;
    will-change: transform;
    animation: orbFloat 18s var(--ease-soft) infinite alternate;
}
.glass-orb.o1 {
    width: 420px; height: 420px;
    top: -12%; right: -8%;
    background: radial-gradient(circle, rgba(236,72,153,0.55), transparent 68%);
}
.glass-orb.o2 {
    width: 360px; height: 360px;
    bottom: -10%; left: -6%;
    background: radial-gradient(circle, rgba(249,115,22,0.42), transparent 68%);
    animation-duration: 22s;
    animation-delay: -4s;
}
.glass-orb.o3 {
    width: 280px; height: 280px;
    top: 42%; left: 38%;
    background: radial-gradient(circle, rgba(139,92,246,0.38), transparent 70%);
    animation-duration: 26s;
    animation-delay: -9s;
}
@keyframes orbFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(40px, -30px, 0) scale(1.12); }
}

.glass-noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

/* Stronger glass surfaces — never override positioning of shell chrome */
body.is-authed .metric-card,
body.is-authed .monitor-card,
body.is-authed .table-wrap,
body.is-authed .form-card,
body.is-authed .detail-card,
body.is-authed .gauge-card,
body.is-authed .stat-card,
body.is-authed .topbar,
body.is-authed .quick-action,
body.is-authed .login-card,
body.is-authed .manual-hero,
body.is-authed main .glass-panel {
    background:
        var(--glass-shine),
        linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 40%, rgba(27,21,48,0.62));
    border: var(--glass-edge);
    box-shadow: var(--glass-glow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Phones: drop the (expensive) card blur, lean on solid tint instead */
@media (max-width: 860px) {
    body.is-authed .metric-card,
    body.is-authed .monitor-card,
    body.is-authed .table-wrap,
    body.is-authed .form-card,
    body.is-authed .detail-card,
    body.is-authed .gauge-card,
    body.is-authed .stat-card,
    body.is-authed .topbar,
    body.is-authed .quick-action,
    body.is-authed .login-card,
    body.is-authed .manual-hero,
    body.is-authed main .glass-panel {
        background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(24,18,42,0.9) 55%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.is-authed .btn,
    body.is-authed .btn-glass,
    body.is-authed .form-group input,
    body.is-authed .form-group select,
    body.is-authed .form-group textarea,
    body.is-authed .topbar-search input {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

body.is-authed .metric-card,
body.is-authed .monitor-card,
body.is-authed .table-wrap,
body.is-authed .form-card,
body.is-authed .detail-card,
body.is-authed .gauge-card,
body.is-authed .stat-card,
body.is-authed .quick-action,
body.is-authed .login-card,
body.is-authed .manual-hero {
    position: relative;
    overflow: hidden;
}

/* Sidebar keeps position:fixed from admin.css — only glass look */
body.is-authed .sidebar.glass-panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), transparent 28%),
        rgba(10, 8, 20, 0.62);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border-left: 1px solid rgba(255,255,255,0.12);
    box-shadow: -18px 0 48px rgba(0,0,0,0.35);
    /* critical: do NOT set position/overflow here */
}


/* Specular highlight sweep */
body.is-authed .metric-card::before,
body.is-authed .monitor-card::before,
body.is-authed .quick-action::before,
body.is-authed .topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 48%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 1;
}
body.is-authed .metric-card:hover::before,
body.is-authed .monitor-card:hover::before,
body.is-authed .quick-action:hover::before {
    animation: shineSweep 1.1s var(--ease-out);
}
@keyframes shineSweep {
    to { transform: translateX(120%); }
}

body.is-authed .sidebar li a {
    transition: transform .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out), color .2s ease;
}
body.is-authed .sidebar li a:hover {
    transform: translateX(-3px);
}
body.is-authed .sidebar li a.active {
    background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(236,72,153,0.75));
    box-shadow:
        0 12px 28px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Soft entrance — visible by default; JS only enhances */
.glass-enter {
    will-change: transform, opacity;
}

/* Interactive lift */
.glass-lift {
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s ease;
}
.glass-lift:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(236, 72, 153, 0.35) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 22px 48px rgba(139, 92, 246, 0.28) !important;
}

/* Buttons with liquid glass */
body.is-authed .btn,
body.is-authed .btn-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .2s ease;
}
body.is-authed .btn:hover,
body.is-authed .btn-glass:hover {
    transform: translateY(-2px);
}
body.is-authed .btn-primary {
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.38), inset 0 1px 0 rgba(255,255,255,0.28);
}
body.is-authed .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(236, 72, 153, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Form fields glass */
body.is-authed .form-group input,
body.is-authed .form-group select,
body.is-authed .form-group textarea,
body.is-authed .topbar-search input {
    background: rgba(8, 6, 18, 0.45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.12) !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
body.is-authed .form-group input:focus,
body.is-authed .form-group select:focus,
body.is-authed .form-group textarea:focus,
body.is-authed .topbar-search input:focus {
    border-color: rgba(168, 85, 247, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18), 0 8px 24px rgba(139, 92, 246, 0.15);
}

/* Banner pulse border */
.dash-banner {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        0 24px 60px rgba(88, 28, 135, 0.35) !important;
}
.dash-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.12), transparent);
    mix-blend-mode: soft-light;
    animation: bannerSheen 7s linear infinite;
}
@keyframes bannerSheen {
    0% { opacity: 0.2; transform: translateX(-30%); }
    50% { opacity: 0.55; }
    100% { opacity: 0.2; transform: translateX(30%); }
}

/* Toast float */
.glass-toast {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glass-orb,
    .dash-banner::after,
    .glass-enter { animation: none !important; }
    .glass-enter { opacity: 1; transform: none; }
    .glass-lift:hover { transform: none; }
}

@media (max-width: 900px) {
    .glass-scene #particles-js { opacity: 0.28; }
    .glass-orb { filter: blur(36px); opacity: 0.3; }
}

@media (max-width: 700px) {
    .glass-scene #particles-js { display: none; }
}