/* ============================================================
   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);
}

/* --- Avatar Crop --- */
.cb-avatar-wrapper { position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; }
.cb-avatar-wrapper .mud-avatar-large { width:80px !important;height:80px !important;font-size:28px !important; }
.cb-avatar-upload-btn { position:absolute !important;bottom:0;right:0;background:var(--mud-palette-primary) !important;color:#fff !important;width:28px !important;height:28px !important;min-width:28px !important;border-radius:50% !important;border:2px solid var(--mud-palette-surface) !important;padding:0 !important;opacity:0;transition:opacity .2s ease; }
.cb-avatar-delete-btn { position:absolute !important;top:0;right:0;background:var(--mud-palette-error) !important;color:#fff !important;width:22px !important;height:22px !important;min-width:22px !important;border-radius:50% !important;border:2px solid var(--mud-palette-surface) !important;padding:0 !important;opacity:0;transition:opacity .2s ease; }
.cb-avatar-wrapper:hover .cb-avatar-upload-btn,
.cb-avatar-wrapper:hover .cb-avatar-delete-btn { opacity:.7; }
.cb-avatar-wrapper .cb-avatar-upload-btn:hover,
.cb-avatar-wrapper .cb-avatar-delete-btn:hover { opacity:1; }
.cb-avatar-upload-btn .mud-icon-root,.cb-avatar-delete-btn .mud-icon-root { font-size:14px !important; }

.cb-crop-dialog { background:var(--mud-palette-surface);border-radius:16px;border:1px solid var(--cb-border);max-width:400px;width:90vw;margin:auto;box-sizing:border-box; }
.cb-crop-container { width:100%;height:300px;overflow:hidden;border-radius:8px;position:relative; }
.cb-crop-container img { display:block;max-width:100%;max-height:100%; }
.cb-crop-container .cropper-container { max-width:100% !important;max-height:300px !important; }

/* --- Scrollbar: hide native on desktop (hover devices), keep native on mobile for performance --- */
/* Show thin native scrollbar inside dialogs/popovers where custom scrollbar doesn't reach */
@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); }