/* =============================================================================
   BlueBucks GLASSNEU DESIGN SYSTEM
   Neumorphic + Glassmorphic hybrid components

   All classes are additive — existing Bootstrap/themes.css classes are NOT
   modified. If this file fails to load, the app degrades to flat design.

   Requires: themes.css loaded first (provides --bb-glass-*, --bb-neu-*,
   --bb-bokeh-* variables per theme)
   ============================================================================= */


/* =============================================================================
   1. BOKEH BACKGROUND — Ambient depth blobs behind content
   ============================================================================= */

.bb-bokeh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    opacity: var(--bb-bokeh-opacity, 0.5);
}

.bb-bokeh-bg::before,
.bb-bokeh-bg::after,
.bb-bokeh-bg .bb-bokeh-blob {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.bb-bokeh-bg::before {
    width: 550px;
    height: 550px;
    background: var(--bb-bokeh-1);
    top: 5%;
    left: 10%;
    animation: bb-bokeh-drift-1 22s ease-in-out infinite alternate;
}

.bb-bokeh-bg::after {
    width: 500px;
    height: 500px;
    background: var(--bb-bokeh-2);
    top: 50%;
    right: 5%;
    animation: bb-bokeh-drift-2 28s ease-in-out infinite alternate;
}

.bb-bokeh-bg .bb-bokeh-blob {
    width: 450px;
    height: 450px;
    background: var(--bb-bokeh-3);
    bottom: 5%;
    left: 35%;
    animation: bb-bokeh-drift-3 32s ease-in-out infinite alternate;
}

.bb-bokeh-bg .bb-bokeh-blob-2 {
    width: 380px;
    height: 380px;
    background: var(--bb-bokeh-4, transparent);
    top: 30%;
    left: 60%;
    animation: bb-bokeh-drift-4 26s ease-in-out infinite alternate;
}

.bb-bokeh-bg .bb-bokeh-blob-3 {
    width: 420px;
    height: 420px;
    background: var(--bb-bokeh-5, transparent);
    bottom: 30%;
    right: 25%;
    animation: bb-bokeh-drift-5 34s ease-in-out infinite alternate;
}

@keyframes bb-bokeh-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(120px, 80px) scale(1.2); }
}

@keyframes bb-bokeh-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-100px, -60px) scale(1.25); }
}

@keyframes bb-bokeh-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, -100px) scale(1.15); }
}

@keyframes bb-bokeh-drift-4 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-90px, 70px) scale(1.18); }
}

@keyframes bb-bokeh-drift-5 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(70px, 90px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .bb-bokeh-bg::before,
    .bb-bokeh-bg::after,
    .bb-bokeh-bg .bb-bokeh-blob,
    .bb-bokeh-bg .bb-bokeh-blob-2,
    .bb-bokeh-bg .bb-bokeh-blob-3 {
        animation: none !important;
    }
}


/* =============================================================================
   2. GLASSMORPHISM BASE CLASSES
   ============================================================================= */

/* Standard glass surface */
.bb-glass {
    background: var(--bb-glass-bg);
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid var(--bb-glass-border);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
}

/* Strong glass (sidebar, modals, overlays) */
.bb-glass-strong {
    background: var(--bb-glass-bg-strong);
    backdrop-filter: blur(var(--bb-glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur-strong));
    border: 1.5px solid var(--bb-glass-border-strong);
    box-shadow: var(--bb-glass-shadow-lg), var(--bb-glass-inner-glow, none);
}

/* Glass highlight shimmer on top edge */
.bb-glass-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bb-glass-highlight);
    border-radius: inherit;
    pointer-events: none;
}

/* Glass card: glass surface + card border-radius */
.bb-glass-card {
    background: var(--bb-glass-bg);
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 2px solid var(--bb-glass-border);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    overflow: visible;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-glass-card .card-header {
    background: linear-gradient(
        180deg,
        var(--bb-glass-bg-strong) 0%,
        var(--bb-glass-bg) 100%
    );
    border-bottom: 1.5px solid var(--bb-glass-border);
}

/* Top-edge shimmer on glass cards */
.bb-glass-card::after,
.bb-card-glassneu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bb-glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}


/* =============================================================================
   3. NEUMORPHISM BASE CLASSES
   ============================================================================= */

/* Raised surface (cards, containers) */
.bb-neu-raised {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-raised);
    border: none;
}

.bb-neu-raised-sm {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-raised-sm);
    border: none;
}

/* Pressed / inset surface (inputs, inset panels) */
.bb-neu-pressed {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-pressed);
    border: none;
}

/* Flat neumorphic (subtle depth, hover states) */
.bb-neu-flat {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-flat);
    border: none;
}


/* =============================================================================
   4. GLASS + NEU COMBINED CARD
   Glass surface with neumorphic interactive children
   ============================================================================= */

.bb-card-glassneu {
    background: var(--bb-glass-bg);
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 2px solid var(--bb-glass-border);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    overflow: visible;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-card-glassneu .card-header {
    background: linear-gradient(
        180deg,
        var(--bb-glass-bg-strong) 0%,
        var(--bb-glass-bg) 100%
    );
    border-bottom: 1.5px solid var(--bb-glass-border);
    color: var(--bb-text-primary);
}

/* 3D hover lift for glass cards (not on mobile/touch) */
@media (hover: hover) {
    .bb-glass-card:hover,
    .bb-card-glassneu:hover {
        transform: translateY(-2px);
        box-shadow: var(--bb-glass-shadow-lg), var(--bb-glass-inner-glow, none);
    }
}

/* Elevate card stacking context when dropdown is visible —
   backdrop-filter creates an implicit stacking context on every .bb-card-glassneu,
   so a later card paints on top even with z-index:1000 on the dropdown.
   This rule lifts the ENTIRE card above siblings so child dropdowns escape. */
.bb-card-glassneu.dropdown-active,
.card.dropdown-active {
    z-index: 100 !important;
    transform: none !important;   /* kill hover-lift while dropdown open */
}


/* =============================================================================
   4b. TINTED GLASS CARDS — Subtle color wash by function
   Applied via additional utility class alongside bb-card-glassneu
   ============================================================================= */

/* Blue tint — scores, analytics */
.bb-glass-tint-blue {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-cerulean-rgb, 107, 141, 181), var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-blue > .card-header {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-cerulean-rgb, 107, 141, 181), calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.15) !important;
}

/* Green tint — giving, financial */
.bb-glass-tint-green {
    background: linear-gradient(
        135deg,
        rgba(56, 183, 100, var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-green > .card-header {
    background: linear-gradient(
        135deg,
        rgba(56, 183, 100, calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(56, 183, 100, 0.15) !important;
}

/* Amber tint — contact info, communication */
.bb-glass-tint-amber {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-amber-rgb, 107, 141, 181), var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-amber > .card-header {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-amber-rgb, 107, 141, 181), calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(var(--bb-amber-rgb, 107, 141, 181), 0.15) !important;
}

/* Purple tint — identity, tags, metadata */
.bb-glass-tint-purple {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-purple-rgb, 159, 122, 234), var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-purple > .card-header {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-purple-rgb, 159, 122, 234), calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(var(--bb-purple-rgb, 159, 122, 234), 0.15) !important;
}

/* Rose tint — timeline, history */
.bb-glass-tint-rose {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-rose-rgb, 229, 62, 62), var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-rose > .card-header {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-rose-rgb, 229, 62, 62), calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(var(--bb-rose-rgb, 229, 62, 62), 0.15) !important;
}

/* Teal tint — segments, categorization */
.bb-glass-tint-teal {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-teal-rgb, 59, 159, 255), var(--bb-glass-tint-opacity, 0.05)),
        var(--bb-glass-bg)
    ) !important;
}
.bb-glass-tint-teal > .card-header {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-teal-rgb, 59, 159, 255), calc(var(--bb-glass-tint-opacity, 0.05) * 2.5)),
        var(--bb-glass-bg-strong)
    ) !important;
    border-bottom: 1px solid rgba(var(--bb-teal-rgb, 59, 159, 255), 0.15) !important;
}

/* Colored edge glow on tinted cards (dark/medium themes only) */
html[data-theme="dark"] .bb-glass-tint-blue,
html[data-theme="medium"] .bb-glass-tint-blue {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.12);
}
html[data-theme="dark"] .bb-glass-tint-green,
html[data-theme="medium"] .bb-glass-tint-green {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(56, 183, 100, 0.12);
}
html[data-theme="dark"] .bb-glass-tint-purple,
html[data-theme="medium"] .bb-glass-tint-purple {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(var(--bb-purple-rgb, 159, 122, 234), 0.12);
}
html[data-theme="dark"] .bb-glass-tint-amber,
html[data-theme="medium"] .bb-glass-tint-amber {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(var(--bb-amber-rgb, 107, 141, 181), 0.12);
}
html[data-theme="dark"] .bb-glass-tint-rose,
html[data-theme="medium"] .bb-glass-tint-rose {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(var(--bb-rose-rgb, 229, 62, 62), 0.12);
}
html[data-theme="dark"] .bb-glass-tint-teal,
html[data-theme="medium"] .bb-glass-tint-teal {
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none),
                0 0 0 1px rgba(var(--bb-teal-rgb, 59, 159, 255), 0.12);
}


/* =============================================================================
   4c. COLORED TOP-BORDER ACCENTS — Optional accent line on cards
   ============================================================================= */

.bb-glass-border-accent-primary {
    border-top: 2px solid rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.5);
}
.bb-glass-border-accent-success {
    border-top: 2px solid rgba(56, 183, 100, 0.5);
}
.bb-glass-border-accent-purple {
    border-top: 2px solid rgba(var(--bb-purple-rgb, 159, 122, 234), 0.5);
}
.bb-glass-border-accent-amber {
    border-top: 2px solid rgba(var(--bb-amber-rgb, 107, 141, 181), 0.5);
}
.bb-glass-border-accent-rose {
    border-top: 2px solid rgba(var(--bb-rose-rgb, 229, 62, 62), 0.5);
}
.bb-glass-border-accent-teal {
    border-top: 2px solid rgba(var(--bb-teal-rgb, 59, 159, 255), 0.5);
}


/* =============================================================================
   5. NEUMORPHIC BUTTONS — Enhanced with deeper shadows and semantic gradients
   ============================================================================= */

.bb-btn-neu {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
    cursor: pointer;
}

/* Only apply neu background on non-outline buttons */
.bb-btn-neu:not([class*="btn-outline"]) {
    background: var(--bb-neu-bg);
    border: none;
    color: var(--bb-text-primary, inherit);
}

/* Outline buttons: glass fill instead of transparent */
.bb-btn-neu[class*="btn-outline"] {
    background: var(--bb-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-width: 1.5px;
}

.bb-btn-neu:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
}

.bb-btn-neu:active,
.bb-btn-neu.active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}

/* Primary neumorphic button — cerulean gradient */
.bb-btn-neu-primary {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

/* Cerulean gradient only for btn-primary */
.bb-btn-neu-primary.btn-primary {
    background: linear-gradient(
        145deg,
        var(--bb-cerulean, #6B8DB5) 0%,
        var(--accent-hover, #7FA0C8) 100%
    );
    color: white;
}

.bb-btn-neu-primary:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
}

.bb-btn-neu-primary:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}


/* =============================================================================
   5b. SEMANTIC NEUMORPHIC GRADIENT BUTTONS
   ============================================================================= */

/* Success gradient button */
.bb-btn-neu-success {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--bb-success, #22C55E) 0%, var(--bb-success-dark, #16A34A) 100%);
    color: white;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bb-btn-neu-success:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
    color: white;
}
.bb-btn-neu-success:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}

/* Danger gradient button */
.bb-btn-neu-danger {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--bb-danger, #EF4444) 0%, var(--bb-danger-dark, #DC2626) 100%);
    color: white;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bb-btn-neu-danger:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
    color: white;
}
.bb-btn-neu-danger:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}

/* Warning gradient button */
.bb-btn-neu-warning {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--bb-warning, #F59E0B) 0%, var(--bb-warning-dark, #D97706) 100%);
    color: var(--gray-900, #212529);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bb-btn-neu-warning:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
}
.bb-btn-neu-warning:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}

/* Info gradient button */
.bb-btn-neu-info {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--bb-info, #06B6D4) 0%, var(--bb-info-dark, #0891B2) 100%);
    color: white;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bb-btn-neu-info:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
    color: white;
}
.bb-btn-neu-info:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}

/* Purple gradient button (new accent) */
.bb-btn-neu-purple {
    box-shadow: var(--bb-neu-btn, var(--bb-neu-raised-sm));
    border: none;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--bb-purple, #A78BFA) 0%, var(--bb-purple-dark, #7C3AED) 100%);
    color: white;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.bb-btn-neu-purple:hover {
    box-shadow: var(--bb-neu-btn-hover, var(--bb-neu-raised));
    transform: translateY(-2px);
    color: white;
}
.bb-btn-neu-purple:active {
    box-shadow: var(--bb-neu-btn-active, var(--bb-neu-pressed-sm));
    transform: translateY(0);
}


/* =============================================================================
   5c. HOVER GLOW — Dark/medium themes only
   Colored shadow glow on hover for semantic buttons
   ============================================================================= */

html[data-theme="dark"] .bb-btn-neu-primary:hover,
html[data-theme="medium"] .bb-btn-neu-primary:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.30);
}

html[data-theme="dark"] .bb-btn-neu-success:hover,
html[data-theme="medium"] .bb-btn-neu-success:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(56, 183, 100, 0.30);
}

html[data-theme="dark"] .bb-btn-neu-danger:hover,
html[data-theme="medium"] .bb-btn-neu-danger:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(229, 62, 62, 0.30);
}

html[data-theme="dark"] .bb-btn-neu-warning:hover,
html[data-theme="medium"] .bb-btn-neu-warning:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(107, 141, 181, 0.30);
}

html[data-theme="dark"] .bb-btn-neu-info:hover,
html[data-theme="medium"] .bb-btn-neu-info:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(59, 159, 255, 0.30);
}

html[data-theme="dark"] .bb-btn-neu-purple:hover,
html[data-theme="medium"] .bb-btn-neu-purple:hover {
    box-shadow: var(--bb-neu-btn-hover),
                0 0 20px rgba(var(--bb-purple-rgb, 159, 122, 234), 0.30);
}


/* =============================================================================
   6. NEUMORPHIC FORM INPUTS
   ============================================================================= */

.bb-input-neu {
    background-color: var(--bb-neu-bg) !important;
    box-shadow: var(--bb-neu-pressed-sm);
    border: none !important;
    border-radius: 8px;
    color: var(--bb-text-primary, inherit) !important;
    transition: box-shadow 0.15s ease;
}

.bb-input-neu:focus {
    box-shadow: var(--bb-neu-pressed),
                0 0 0 3px rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.25);
    outline: none;
}

.bb-input-neu::placeholder {
    color: var(--bb-text-muted, #64748B);
}


/* =============================================================================
   7. NEUMORPHIC TOGGLE / SWITCH
   ============================================================================= */

.bb-toggle-neu .form-check-input {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-pressed-sm);
    border: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bb-toggle-neu .form-check-input:checked {
    background-color: var(--bb-cerulean, #6B8DB5);
    box-shadow: var(--bb-neu-raised-sm);
}


/* =============================================================================
   8. NEUMORPHIC PROGRESS BAR
   ============================================================================= */

.bb-progress-neu {
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-pressed-sm);
    border-radius: 12px;
    height: 14px;
    overflow: hidden;
    padding: 2px;
    border: none;
}

.bb-progress-neu .progress-bar,
.bb-progress-neu .bb-progress-fill {
    border-radius: 12px;
    background: linear-gradient(90deg, var(--bb-cerulean, #6B8DB5) 0%, var(--accent-hover, #7FA0C8) 100%);
    box-shadow: 0 0 8px rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.4);
}


/* =============================================================================
   9. NEUMORPHIC SCORE CIRCLES (donor_detail.html)
   Full raised 3D disc with glass fill, SVG ring on top
   ============================================================================= */

.bb-score-circle-neu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-raised);
    position: relative;
}

/* Glass fill inside the neumorphic disc */
.bb-score-circle-neu::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: var(--bb-glass-bg-strong);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 0;
}

/* Ensure SVG and text sit above the glass fill */
.bb-score-circle-neu svg,
.bb-score-circle-neu .position-absolute {
    position: relative;
    z-index: 1;
}


/* =============================================================================
   10. GLASS BADGES
   ============================================================================= */

.bb-badge-glass {
    background: var(--bb-glass-bg-strong) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bb-glass-border);
    color: var(--bb-text-primary, inherit) !important;
}


/* =============================================================================
   10b. COLORED GLASS BADGE VARIANTS — Frosted glass pills with accent colors
   ============================================================================= */

.bb-badge-glass-primary {
    background: rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.20) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.30);
    color: var(--bb-cerulean) !important;
}

.bb-badge-glass-success {
    background: rgba(56, 183, 100, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(56, 183, 100, 0.28);
    color: var(--bb-success) !important;
}

.bb-badge-glass-danger {
    background: rgba(229, 62, 62, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(229, 62, 62, 0.28);
    color: var(--bb-danger) !important;
}

.bb-badge-glass-warning {
    background: rgba(107, 141, 181, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(107, 141, 181, 0.28);
    color: var(--bb-warning) !important;
}

.bb-badge-glass-info {
    background: rgba(59, 159, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(59, 159, 255, 0.28);
    color: var(--bb-info) !important;
}

.bb-badge-glass-purple {
    background: rgba(var(--bb-purple-rgb, 159, 122, 234), 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bb-purple-rgb, 159, 122, 234), 0.28);
    color: var(--bb-purple) !important;
}

.bb-badge-glass-teal {
    background: rgba(var(--bb-teal-rgb, 59, 159, 255), 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bb-teal-rgb, 59, 159, 255), 0.28);
    color: var(--bb-teal) !important;
}

.bb-badge-glass-rose {
    background: rgba(var(--bb-rose-rgb, 229, 62, 62), 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bb-rose-rgb, 229, 62, 62), 0.28);
    color: var(--bb-rose) !important;
}

.bb-badge-glass-amber {
    background: rgba(var(--bb-amber-rgb, 107, 141, 181), 0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--bb-amber-rgb, 107, 141, 181), 0.28);
    color: var(--bb-amber) !important;
}

/* Lite theme: use darker text for contrast on light backgrounds */
:root .bb-badge-glass-success,
[data-theme="lite"] .bb-badge-glass-success {
    color: var(--bb-success-dark, var(--bb-success)) !important;
}
:root .bb-badge-glass-warning,
[data-theme="lite"] .bb-badge-glass-warning {
    color: var(--bb-warning-dark, var(--bb-warning)) !important;
}
:root .bb-badge-glass-amber,
[data-theme="lite"] .bb-badge-glass-amber {
    color: var(--bb-amber-dark, var(--bb-amber)) !important;
}


/* =============================================================================
   11. GLASS SIDEBAR
   ============================================================================= */

.bb-sidebar-glass {
    background: var(--bb-glass-bg-strong) !important;
    backdrop-filter: blur(var(--bb-glass-blur-strong)) !important;
    -webkit-backdrop-filter: blur(var(--bb-glass-blur-strong)) !important;
    border-right: 1px solid var(--bb-glass-border) !important;
}

.bb-sidebar-glass .sidebar-header {
    background: var(--bb-glass-bg) !important;
    border-bottom: 1px solid var(--bb-glass-border) !important;
}


/* =============================================================================
   12. GLASS + NEU NAVIGATION
   ============================================================================= */

.bb-nav-glassneu .list-group-item {
    background: transparent !important;
    border-color: transparent !important;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.bb-nav-glassneu .list-group-item:hover {
    background: var(--bb-glass-bg) !important;
}

.bb-nav-glassneu .list-group-item.active {
    background: linear-gradient(
        90deg,
        rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.15) 0%,
        var(--bb-glass-bg-strong) 100%
    ) !important;
    box-shadow: var(--bb-neu-pressed-sm);
    border-left: 3px solid var(--bb-cerulean, #6B8DB5) !important;
}


/* =============================================================================
   13. GLASS MODAL
   ============================================================================= */

.bb-modal-glass .modal-content {
    background: var(--bb-glass-bg-strong);
    backdrop-filter: blur(var(--bb-glass-blur-strong));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur-strong));
    border: 1px solid var(--bb-glass-border-strong);
    box-shadow: var(--bb-glass-shadow-lg);
}

.bb-modal-glass .modal-header {
    background: var(--bb-glass-bg);
    border-bottom: 1px solid var(--bb-glass-border);
}

.bb-modal-glass .modal-footer {
    background: var(--bb-glass-bg);
    border-top: 1px solid var(--bb-glass-border);
}


/* =============================================================================
   14. GLASS TABLE
   ============================================================================= */

.bb-table-glass thead th {
    background: var(--bb-glass-bg-strong) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bb-table-glass tbody tr:hover {
    background: var(--bb-glass-bg) !important;
}

/* Ensure glass table cells have themed text color */
.bb-table-glass tbody td,
.bb-table-glass tbody th {
    color: var(--bb-text-primary);
}


/* =============================================================================
   15. GLASS STAT CARDS (dashboard — white text on frosted glass)
   ============================================================================= */

.bb-stat-glass {
    background: var(--bb-glass-bg-strong) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid var(--bb-glass-border);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass:hover {
    transform: translateY(-2px);
    box-shadow: var(--bb-glass-shadow-lg), var(--bb-glass-inner-glow, none);
}


/* =============================================================================
   15b. COLORED STAT CARDS — Individual color wash per metric
   ============================================================================= */

.bb-stat-glass-primary {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.35) 0%,
        rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(var(--bb-cerulean-rgb, 107, 141, 181), 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass-success {
    background: linear-gradient(
        135deg,
        rgba(56, 183, 100, 0.35) 0%,
        rgba(56, 183, 100, 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(56, 183, 100, 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass-purple {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-purple-rgb, 159, 122, 234), 0.35) 0%,
        rgba(var(--bb-purple-rgb, 159, 122, 234), 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(var(--bb-purple-rgb, 159, 122, 234), 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass-amber {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-amber-rgb, 107, 141, 181), 0.35) 0%,
        rgba(var(--bb-amber-rgb, 107, 141, 181), 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(var(--bb-amber-rgb, 107, 141, 181), 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass-rose {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-rose-rgb, 229, 62, 62), 0.35) 0%,
        rgba(var(--bb-rose-rgb, 229, 62, 62), 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(var(--bb-rose-rgb, 229, 62, 62), 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-stat-glass-teal {
    background: linear-gradient(
        135deg,
        rgba(var(--bb-teal-rgb, 59, 159, 255), 0.35) 0%,
        rgba(var(--bb-teal-rgb, 59, 159, 255), 0.15) 100%
    ) !important;
    backdrop-filter: blur(var(--bb-glass-blur));
    -webkit-backdrop-filter: blur(var(--bb-glass-blur));
    border: 1.5px solid rgba(var(--bb-teal-rgb, 59, 159, 255), 0.28);
    border-radius: var(--card-border-radius, 12px);
    box-shadow: var(--bb-glass-shadow), var(--bb-glass-inner-glow, none);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Colored stat cards: hover */
[class*="bb-stat-glass-"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--bb-glass-shadow-lg), var(--bb-glass-inner-glow, none);
}

/* =============================================================================
   16. NEUMORPHIC ICON CONTAINERS
   ============================================================================= */

.bb-icon-neu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--bb-neu-bg);
    box-shadow: var(--bb-neu-raised-sm);
    font-size: 1rem;
}


/* =============================================================================
   17. MOBILE PERFORMANCE DEGRADATION
   ============================================================================= */

@media (max-width: 768px) {
    /* Reduce glass blur on tablet */
    .bb-glass,
    .bb-glass-card,
    .bb-card-glassneu,
    .bb-stat-glass,
    [class*="bb-stat-glass-"] {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .bb-glass-strong,
    .bb-sidebar-glass,
    .bb-modal-glass .modal-content {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Simplify neumorphic shadows */
    .bb-neu-raised,
    .bb-btn-neu,
    .bb-score-circle-neu {
        box-shadow: var(--bb-neu-raised-sm);
    }

    /* Disable hover transforms on touch */
    .bb-btn-neu:hover,
    .bb-btn-neu-primary:hover,
    .bb-btn-neu-success:hover,
    .bb-btn-neu-danger:hover,
    .bb-btn-neu-warning:hover,
    .bb-btn-neu-info:hover,
    .bb-btn-neu-purple:hover,
    .bb-stat-glass:hover,
    [class*="bb-stat-glass-"]:hover {
        transform: none;
    }

    /* Smaller bokeh */
    .bb-bokeh-bg::before { width: 200px; height: 200px; }
    .bb-bokeh-bg::after  { width: 180px; height: 180px; }
    .bb-bokeh-bg .bb-bokeh-blob { width: 150px; height: 150px; }
    .bb-bokeh-bg .bb-bokeh-blob-2 { width: 150px; height: 150px; }
    .bb-bokeh-bg .bb-bokeh-blob-3 { width: 160px; height: 160px; }

    .bb-bokeh-bg::before,
    .bb-bokeh-bg::after,
    .bb-bokeh-bg .bb-bokeh-blob,
    .bb-bokeh-bg .bb-bokeh-blob-2,
    .bb-bokeh-bg .bb-bokeh-blob-3 {
        filter: blur(50px);
        animation: none;
    }

    /* Disable card tints on tablet (performance) */
    [class*="bb-glass-tint-"] {
        background: var(--bb-glass-bg) !important;
    }
    [class*="bb-glass-tint-"] > .card-header {
        background: var(--bb-glass-bg-strong) !important;
    }

    /* Disable badge backdrop-filter on tablet */
    [class*="bb-badge-glass-"] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (max-width: 480px) {
    /* Ultra-small: disable glass effects entirely */
    .bb-glass,
    .bb-glass-strong,
    .bb-glass-card,
    .bb-card-glassneu,
    .bb-sidebar-glass,
    .bb-stat-glass,
    [class*="bb-stat-glass-"] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .bb-bokeh-bg {
        display: none;
    }
}


/* =============================================================================
   18. BROWSER FALLBACK (no backdrop-filter support)
   ============================================================================= */

@supports not (backdrop-filter: blur(1px)) {
    .bb-glass,
    .bb-glass-card,
    .bb-card-glassneu {
        background: var(--bb-card-bg, var(--card-bg));
    }

    .bb-sidebar-glass {
        background: var(--bb-sidebar-bg, var(--theme-sidebar-bg)) !important;
    }

    .bb-modal-glass .modal-content {
        background: var(--bb-card-bg, var(--card-bg));
    }

    .bb-stat-glass {
        background: var(--bb-cerulean, #6B8DB5) !important;
    }

    [class*="bb-badge-glass-"] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    [class*="bb-stat-glass-"] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


/* =============================================================================
   19. PRINT — Hide all visual effects
   ============================================================================= */

@media print {
    .bb-bokeh-bg { display: none !important; }

    .bb-glass,
    .bb-glass-strong,
    .bb-glass-card,
    .bb-card-glassneu,
    .bb-sidebar-glass,
    .bb-stat-glass,
    [class*="bb-stat-glass-"],
    .bb-modal-glass .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .bb-neu-raised,
    .bb-neu-raised-sm,
    .bb-btn-neu,
    .bb-btn-neu-primary,
    .bb-btn-neu-success,
    .bb-btn-neu-danger,
    .bb-btn-neu-warning,
    .bb-btn-neu-info,
    .bb-btn-neu-purple,
    .bb-input-neu,
    .bb-score-circle-neu {
        box-shadow: none !important;
    }

    [class*="bb-badge-glass-"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: white !important;
        border: 1px solid #999 !important;
        color: black !important;
    }

    [class*="bb-glass-tint-"] {
        background: white !important;
    }
}