/* ============================================================
   CoreBIM Design Tokens — CSS Variables
   Source of truth: CbDesign.cs + CbTokensStyle.razor
   This file provides static tokens (brand, gradients, radius,
   fonts, animations, utilities). Theme-dependent vars are
   rendered by CbTokensStyle.razor component.
   ============================================================ */

/* --- Animations --- */

@keyframes cb-fade-up {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cb-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes cb-menuIn {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cb-mobileSlideIn {
    from { opacity: 0; transform: translateY(-.75rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Utility Classes --- */

.cb-fade-up {
    animation: cb-fade-up .8s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--d, 0s);
}

.cb-shimmer {
    background: linear-gradient(90deg, currentColor 33%, rgba(255,255,255,.5) 50%, currentColor 66%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cb-shimmer 3s linear infinite;
}

.cb-glass {
    background: var(--cb-glass-bg);
    border: 1px solid var(--cb-glass-border);
    box-shadow: var(--cb-glass-shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
}

/* Auth page — full-height flex column: layout grows, footer stays at bottom */
.cb-auth-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100vh;
}

/* Auth layout — centers card, takes remaining space */
.cb-auth-layout {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cb-auth-card {
    max-width: 400px;
    width: 100%;
    padding: 40px 36px;
    margin: 0 auto;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: 16px;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Auth footer — transparent, scrolls with content, inherits wash background */
.cb-auth-footer {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: transparent;
}

/* Gradient wash background for auth pages — blue + red brand gradients */
.cb-auth-wash {
    position: fixed;
    inset: 0;
    z-index: -1;
}

[data-theme="dark"] .cb-auth-wash {
    background: var(--mud-palette-background);
}

[data-theme="light"] .cb-auth-wash {
    background: var(--mud-palette-background);
}

/* Auth divider: gradient line — text — gradient line */
.cb-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cb-text-3);
    font-size: .6875rem;
    font-weight: 500;
}

.cb-auth-divider::before,
.cb-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    border: none;
}

.cb-auth-divider::before {
    background: linear-gradient(90deg, transparent, var(--cb-border));
}

.cb-auth-divider::after {
    background: linear-gradient(90deg, var(--cb-border), transparent);
}

/* --- Scrollbar: hide native on desktop (hover devices), keep native on mobile for performance --- */
@media (hover: hover) {
    * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
    *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
}

/* Custom overlay scrollbar */
.cb-scrollbar { position:fixed;top:0;right:0;width:12px;height:100vh;height:100dvh;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none; }
.cb-scrollbar.is-visible { opacity:1;pointer-events:auto; }
.cb-scrollbar__thumb { position:absolute;right:2px;width:4px;min-height:30px;border-radius:4px;transition:width .15s,right .15s,background .15s;cursor:pointer; }
[data-theme="dark"] .cb-scrollbar__thumb { background:rgba(255,255,255,.2); }
[data-theme="light"] .cb-scrollbar__thumb { background:rgba(0,0,0,.15); }
[data-theme="dark"] .cb-scrollbar.is-visible .cb-scrollbar__thumb { background:rgba(255,255,255,.3); }
[data-theme="light"] .cb-scrollbar.is-visible .cb-scrollbar__thumb { background:rgba(0,0,0,.2); }
.cb-scrollbar:hover .cb-scrollbar__thumb,
.cb-scrollbar.is-dragging .cb-scrollbar__thumb { width:6px;right:2px; }
[data-theme="dark"] .cb-scrollbar:hover .cb-scrollbar__thumb,
[data-theme="dark"] .cb-scrollbar.is-dragging .cb-scrollbar__thumb { background:rgba(255,255,255,.45); }
[data-theme="light"] .cb-scrollbar:hover .cb-scrollbar__thumb,
[data-theme="light"] .cb-scrollbar.is-dragging .cb-scrollbar__thumb { background:rgba(0,0,0,.3); }