/* ============================================================
   Banoon — Custom App Styles (loaded after vendor CSS)
   ============================================================ */

/* ── Smooth dark/light mode transitions ──────────────────── */
*,
*::before,
*::after {
    transition:
        background-color 0.25s ease,
        border-color     0.25s ease,
        color            0.15s ease,
        box-shadow       0.25s ease;
}
img, svg, .loader, .loader-wrapper, .tap-top,
[class*="climacon"], input[type="range"],
.apexcharts-canvas, .apexcharts-canvas * {
    transition: none !important;
}

/* ── Card baseline ───────────────────────────────────────── */
.card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
}
.dark-only .card {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
    background-color: var(--white);
}
.dark-only .card-header,
.dark-only .card-body { background-color: var(--white); }

/* ── 5-per-row Bootstrap helper (Bootstrap has no col-xl-2.4) */
@media (min-width: 1200px) {
    .col-xl-fifth {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ============================================================
   STAT CARDS  (admin / provider dashboards)
   ============================================================ */
.stat-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.dark-only .stat-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.stat-card .card-body { padding: 1.25rem 1.4rem; }

.stat-card-label {
    color: var(--font-color);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.stat-card-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--body-font-color);
}

/* Icon wrapper + icon */
.stat-card-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.stat-card:hover .stat-card-icon-wrap {
    transform: scale(1.08) rotate(-4deg);
}
.stat-card-icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
}

/* Decorative corner accent */
.stat-card::after {
    content: '';
    position: absolute;
    top: -45px;
    right: -45px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.08;
    transition: transform 0.3s ease;
    pointer-events: none;
}
.stat-card:hover::after { transform: scale(1.25); }

/* ── Variant colours ── */
.stat-card-primary  .stat-card-icon-wrap { background: rgba(48,142,135,0.12);  color: #308e87; }
.stat-card-primary::after                 { background: #308e87; }

.stat-card-teal     .stat-card-icon-wrap { background: rgba(2,162,185,0.12);   color: #02a2b9; }
.stat-card-teal::after                    { background: #02a2b9; }

.stat-card-success  .stat-card-icon-wrap { background: rgba(62,185,95,0.13);   color: #3eb95f; }
.stat-card-success::after                 { background: #3eb95f; }

.stat-card-warning  .stat-card-icon-wrap { background: rgba(243,145,89,0.14);  color: #ea9200; }
.stat-card-warning::after                 { background: #f39159; }

.stat-card-danger   .stat-card-icon-wrap { background: rgba(231,75,43,0.13);   color: #e74b2b; }
.stat-card-danger::after                  { background: #e74b2b; }

.stat-card-info     .stat-card-icon-wrap { background: rgba(47,128,237,0.12);  color: #2F80ED; }
.stat-card-info::after                    { background: #2F80ED; }

.stat-card-purple   .stat-card-icon-wrap { background: rgba(155,81,224,0.13);  color: #9B51E0; }
.stat-card-purple::after                  { background: #9B51E0; }

.stat-card-pink     .stat-card-icon-wrap { background: rgba(254,138,125,0.16); color: #fe8a7d; }
.stat-card-pink::after                    { background: #fe8a7d; }

/* Dark mode: slightly stronger icon backgrounds for contrast */
.dark-only .stat-card-primary  .stat-card-icon-wrap { background: rgba(48,142,135,0.22); }
.dark-only .stat-card-teal     .stat-card-icon-wrap { background: rgba(2,162,185,0.22);  }
.dark-only .stat-card-success  .stat-card-icon-wrap { background: rgba(62,185,95,0.22);  }
.dark-only .stat-card-warning  .stat-card-icon-wrap { background: rgba(243,145,89,0.22); color: #f39159; }
.dark-only .stat-card-danger   .stat-card-icon-wrap { background: rgba(231,75,43,0.22);  }
.dark-only .stat-card-info     .stat-card-icon-wrap { background: rgba(47,128,237,0.22); }
.dark-only .stat-card-purple   .stat-card-icon-wrap { background: rgba(155,81,224,0.22); }
.dark-only .stat-card-pink     .stat-card-icon-wrap { background: rgba(254,138,125,0.22); }

/* ============================================================
   APEX CHARTS — dark-mode polish + general tweaks
   ============================================================ */
.apexcharts-tooltip {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.dark-only .apexcharts-tooltip {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
    color: var(--body-font-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.dark-only .apexcharts-tooltip-title {
    background: var(--bg-light) !important;
    border-color: var(--border-color) !important;
    color: var(--body-font-color) !important;
}
.dark-only .apexcharts-legend-text { color: var(--body-font-color) !important; }
.dark-only .apexcharts-text        { fill: var(--font-color) !important; }
.dark-only .apexcharts-xaxis line,
.dark-only .apexcharts-yaxis line,
.dark-only .apexcharts-gridline {
    stroke: var(--border-color) !important;
}
.dark-only .apexcharts-datalabel,
.dark-only .apexcharts-datalabels text {
    fill: var(--body-font-color) !important;
}

/* ============================================================
   TABLES — dark mode
   ============================================================ */
.dark-only .table {
    color: var(--body-font-color);
    border-color: var(--border-color);
}
.dark-only .table thead th {
    background-color: var(--white);
    border-color: var(--border-color);
    color: var(--body-font-color);
}
.dark-only .table tbody tr:hover { background-color: var(--active-bg-color); }
.dark-only .table-responsive     { border-color: var(--border-color); }

/* ============================================================
   FORM CONTROLS — dark mode
   ============================================================ */
.dark-only .form-control,
.dark-only .form-select {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    color: var(--body-font-color);
}
.dark-only .form-control:focus,
.dark-only .form-select:focus {
    background-color: var(--bg-light);
    border-color: var(--theme-default);
    color: var(--body-font-color);
    box-shadow: 0 0 0 0.2rem rgba(48, 142, 135, 0.25);
}
.dark-only .form-control::placeholder { color: var(--font-color); opacity: 0.7; }
.dark-only .input-group-text {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    color: var(--body-font-color);
}

/* ============================================================
   BADGES (light variants)
   ============================================================ */
.badge.badge-light-success { background-color: rgba(62,185,95,0.15);  color: #1e7e34; }
.badge.badge-light-danger  { background-color: rgba(231,75,43,0.15);  color: #c0392b; }
.badge.badge-light-warning { background-color: rgba(234,146,0,0.15);  color: #b8700f; }
.badge.badge-light-info    { background-color: rgba(2,162,185,0.15);  color: #0a7fa0; }
.badge.badge-light-secondary { background-color: rgba(108,117,125,0.15); color: #495057; }

.dark-only .badge.badge-light-success   { background: rgba(62,185,95,0.2);  color: #6fcf97; }
.dark-only .badge.badge-light-danger    { background: rgba(231,75,43,0.2);  color: #eb5757; }
.dark-only .badge.badge-light-warning   { background: rgba(234,146,0,0.2);  color: #f2994a; }
.dark-only .badge.badge-light-info      { background: rgba(2,162,185,0.2);  color: #56ccf2; }
.dark-only .badge.badge-light-secondary { background: rgba(255,255,255,0.08); color: #b6b0b0; }

/* ============================================================
   ALERTS — dark mode
   ============================================================ */
.dark-only .alert-success {
    background: rgba(62,185,95,0.15); color: #6fcf97; border-color: rgba(62,185,95,0.3);
}
.dark-only .alert-danger {
    background: rgba(231,75,43,0.15); color: #eb5757; border-color: rgba(231,75,43,0.3);
}
.dark-only .alert-warning {
    background: rgba(234,146,0,0.15); color: #f2994a; border-color: rgba(234,146,0,0.3);
}

/* ============================================================
   PAGE TITLE / BREADCRUMB
   ============================================================ */
.dark-only .page-title h2 { color: var(--body-font-color); }
.dark-only .breadcrumb-item a,
.dark-only .breadcrumb-item.active { color: var(--font-color); }
.dark-only .breadcrumb-item + .breadcrumb-item::before { color: var(--font-color); }

/* ============================================================
   PAGINATION — dark mode
   ============================================================ */
.dark-only .pagination .page-link {
    background-color: var(--white);
    border-color: var(--border-color);
    color: var(--body-font-color);
}
.dark-only .pagination .page-item.active .page-link {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}
.dark-only .pagination .page-link:hover {
    background-color: var(--active-bg-color);
    color: var(--theme-default);
}

.pagination {
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.pagination .page-item .page-link {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e9edf1;
    color: #2b2b2b;
    padding: 0.5rem 0.9rem;
    line-height: 1;
    box-shadow: none;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    min-width: auto;
    padding-inline: 1rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: #e9edf1;
    color: #98a2b3;
}

.pagination .page-link:hover {
    background-color: #f4f8f8;
    border-color: var(--theme-default);
    color: var(--theme-default);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(48, 142, 135, 0.18);
}

/* ============================================================
   SIDEBAR active state
   ============================================================ */
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active {
    background-color: var(--active-bg-color, #d9e8e5);
    border-radius: 8px;
}
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active h6 {
    color: var(--theme-default, #308e87) !important;
}
.dark-only .page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active {
    background-color: rgba(48, 142, 135, 0.18);
}

/* ============================================================
   GENERIC HELPERS
   ============================================================ */
.dark-only .bg-light {
    background-color: var(--bg-light) !important;
    color: var(--body-font-color) !important;
}
.dark-only .border,
.dark-only .border-top,
.dark-only .border-bottom,
.dark-only .border-start,
.dark-only .border-end {
    border-color: var(--border-color) !important;
}
:focus-visible {
    outline: 2px solid var(--theme-default);
    outline-offset: 2px;
}

/* ============================================================
   STAT CARDS — SEAM-inspired polish
   entrance animation · colored labels · top accent ·
   colored hover glow · mini sparkline bottom area
   ============================================================ */

/* ── Entrance animation ── */
@keyframes bnStatIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.bn-stat-fade {
    opacity: 0;
    animation: bnStatIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── Colored labels ── */
.stat-card-primary .stat-card-label { color: #308e87; }
.stat-card-teal    .stat-card-label { color: #02a2b9; }
.stat-card-success .stat-card-label { color: #3eb95f; }
.stat-card-warning .stat-card-label { color: #ea9200; }
.stat-card-danger  .stat-card-label { color: #e74b2b; }
.stat-card-info    .stat-card-label { color: #2F80ED; }
.stat-card-purple  .stat-card-label { color: #9B51E0; }
.stat-card-pink    .stat-card-label { color: #fe8a7d; }

/* ── Gradient top-accent border (::before) ── */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    z-index: 1;
    pointer-events: none;
}
.stat-card-primary::before { background: linear-gradient(90deg, #308e87 0%, #56c9c8 100%); }
.stat-card-teal::before    { background: linear-gradient(90deg, #02a2b9 0%, #56CCF2 100%); }
.stat-card-success::before { background: linear-gradient(90deg, #3eb95f 0%, #6FCF97 100%); }
.stat-card-warning::before { background: linear-gradient(90deg, #ea9200 0%, #F2C94C 100%); }
.stat-card-danger::before  { background: linear-gradient(90deg, #e74b2b 0%, #EB8484 100%); }
.stat-card-info::before    { background: linear-gradient(90deg, #2F80ED 0%, #56CCF2 100%); }
.stat-card-purple::before  { background: linear-gradient(90deg, #9B51E0 0%, #C68EF0 100%); }
.stat-card-pink::before    { background: linear-gradient(90deg, #fe8a7d 0%, #FFBDB8 100%); }

/* ── Colored hover glow per variant ── */
.stat-card-primary:hover { box-shadow: 0 10px 30px rgba(48, 142, 135, 0.22)  !important; }
.stat-card-teal:hover    { box-shadow: 0 10px 30px rgba(2, 162, 185, 0.22)   !important; }
.stat-card-success:hover { box-shadow: 0 10px 30px rgba(62, 185, 95, 0.22)   !important; }
.stat-card-warning:hover { box-shadow: 0 10px 30px rgba(243, 145, 89, 0.22)  !important; }
.stat-card-danger:hover  { box-shadow: 0 10px 30px rgba(231, 75, 43, 0.22)   !important; }
.stat-card-info:hover    { box-shadow: 0 10px 30px rgba(47, 128, 237, 0.22)  !important; }
.stat-card-purple:hover  { box-shadow: 0 10px 30px rgba(155, 81, 224, 0.22)  !important; }
.stat-card-pink:hover    { box-shadow: 0 10px 30px rgba(254, 138, 125, 0.22) !important; }

.dark-only .stat-card-primary:hover { box-shadow: 0 10px 30px rgba(48, 142, 135, 0.38)  !important; }
.dark-only .stat-card-teal:hover    { box-shadow: 0 10px 30px rgba(2, 162, 185, 0.38)   !important; }
.dark-only .stat-card-success:hover { box-shadow: 0 10px 30px rgba(62, 185, 95, 0.38)   !important; }
.dark-only .stat-card-warning:hover { box-shadow: 0 10px 30px rgba(243, 145, 89, 0.38)  !important; }
.dark-only .stat-card-danger:hover  { box-shadow: 0 10px 30px rgba(231, 75, 43, 0.38)   !important; }
.dark-only .stat-card-info:hover    { box-shadow: 0 10px 30px rgba(47, 128, 237, 0.38)  !important; }
.dark-only .stat-card-purple:hover  { box-shadow: 0 10px 30px rgba(155, 81, 224, 0.38)  !important; }
.dark-only .stat-card-pink:hover    { box-shadow: 0 10px 30px rgba(254, 138, 125, 0.38) !important; }

/* ── Mini sparkline bottom section ── */
.stat-sparkline-bottom {
    height: 54px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* ============================================================
   TRIO-INSPIRED — Glassmorphism · Aurora blobs · Cyber labels
   ============================================================ */

/* ── Subtle ANIMATED gradient background for dashboard pages ── */
.page-body {
    position: relative;
    background:
        radial-gradient(900px circle at -5% -10%, rgba(48, 142, 135, 0.07) 0%, transparent 55%),
        radial-gradient(900px circle at 105% -5%,  rgba(243, 145, 89, 0.05) 0%, transparent 55%),
        radial-gradient(700px circle at 50% 110%,  rgba(155, 81, 224, 0.04) 0%, transparent 60%);
    background-attachment: fixed;
}
.page-body::before {
    content: '';
    position: fixed;
    inset: -120px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(500px circle at 20% 30%, rgba(48, 142, 135, 0.05) 0%, transparent 50%),
        radial-gradient(500px circle at 80% 70%, rgba(47, 128, 237, 0.04) 0%, transparent 50%),
        radial-gradient(400px circle at 70% 30%, rgba(155, 81, 224, 0.04) 0%, transparent 50%);
    animation: bnBgFloat 28s ease-in-out infinite alternate;
    filter: blur(20px);
}
@keyframes bnBgFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(60px, -40px) scale(1.15); }
}
.page-body > * { position: relative; z-index: 1; }

.dark-only .page-body {
    background:
        radial-gradient(900px circle at -5% -10%, rgba(48, 142, 135, 0.16) 0%, transparent 55%),
        radial-gradient(900px circle at 105% -5%,  rgba(243, 145, 89, 0.10) 0%, transparent 55%),
        radial-gradient(700px circle at 50% 110%,  rgba(155, 81, 224, 0.08) 0%, transparent 60%);
    background-attachment: fixed;
}
.dark-only .page-body::before {
    background:
        radial-gradient(500px circle at 20% 30%, rgba(48, 142, 135, 0.12) 0%, transparent 50%),
        radial-gradient(500px circle at 80% 70%, rgba(47, 128, 237, 0.10) 0%, transparent 50%),
        radial-gradient(400px circle at 70% 30%, rgba(155, 81, 224, 0.10) 0%, transparent 50%);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .page-body::before,
    .bn-aurora-blob,
    .bn-banner-blob,
    .bn-pulse-dot,
    .bn-activity-icon::after { animation: none !important; }
}

/* ── Solid bright stat cards (clean SaaS look, no washed-out glass) ── */
.stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.dark-only .stat-card {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Card-body and inner sections sit ABOVE the aurora blobs */
.stat-card .card-body {
    background: transparent !important;
    position: relative;
    z-index: 2;
}
.dark-only .stat-card .card-body { background: transparent !important; }

/* Replace the old corner-circle decoration with aurora blobs */
.stat-card::after { display: none !important; }

/* ── Aurora blobs (animated) ── */
.bn-aurora-blob {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.20;
    pointer-events: none;
    z-index: 1;
    animation: bnAuroraFloat 8s ease-in-out infinite alternate;
}
.bn-aurora-blob.blob-1 { top: -48px; right: -28px; }
.bn-aurora-blob.blob-2 {
    width: 100px;
    height: 100px;
    opacity: 0.14;
    top: -22px;
    left: 18%;
    animation-duration: 12s;
    animation-direction: alternate-reverse;
}
.dark-only .bn-aurora-blob          { opacity: 0.28; }
.dark-only .bn-aurora-blob.blob-2   { opacity: 0.22; }

@keyframes bnAuroraFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(18px, 12px) scale(1.18); }
}

/* Variant-coloured blobs */
.stat-card-primary .bn-aurora-blob { background: #308e87; }
.stat-card-teal    .bn-aurora-blob { background: #02a2b9; }
.stat-card-success .bn-aurora-blob { background: #3eb95f; }
.stat-card-warning .bn-aurora-blob { background: #f39159; }
.stat-card-danger  .bn-aurora-blob { background: #e74b2b; }
.stat-card-info    .bn-aurora-blob { background: #2F80ED; }
.stat-card-purple  .bn-aurora-blob { background: #9B51E0; }
.stat-card-pink    .bn-aurora-blob { background: #fe8a7d; }

/* ── Cyber typography for labels ── */
.stat-card-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
.stat-card-value {
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.dark-only .stat-card-value { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

/* ── Circular Gauge ── */
.stat-card-gauge {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
    position: relative;
}
.stat-card-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.stat-card-gauge .gauge-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.07);
    stroke-width: 7;
}
.dark-only .stat-card-gauge .gauge-bg { stroke: rgba(255, 255, 255, 0.09); }
.stat-card-gauge .gauge-progress {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    filter: drop-shadow(0 0 4px currentColor);
}
.stat-card-gauge .gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
.stat-card-gauge .gauge-center strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--body-font-color);
}
.stat-card-gauge .gauge-center span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--font-color);
    margin-top: 2px;
}

/* Gauge stroke colours per variant */
.stat-card-primary .gauge-progress { stroke: #308e87; color: #308e87; }
.stat-card-teal    .gauge-progress { stroke: #02a2b9; color: #02a2b9; }
.stat-card-success .gauge-progress { stroke: #3eb95f; color: #3eb95f; }
.stat-card-warning .gauge-progress { stroke: #ea9200; color: #ea9200; }
.stat-card-danger  .gauge-progress { stroke: #e74b2b; color: #e74b2b; }
.stat-card-info    .gauge-progress { stroke: #2F80ED; color: #2F80ED; }
.stat-card-purple  .gauge-progress { stroke: #9B51E0; color: #9B51E0; }
.stat-card-pink    .gauge-progress { stroke: #fe8a7d; color: #fe8a7d; }

/* ============================================================
   CHART CARDS · FILTER CHIPS · TOP PROVIDERS RANKING
   ============================================================ */

/* Chart cards: solid bright (clean SaaS look) */
.bn-chart-card {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.dark-only .bn-chart-card {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.bn-chart-card .card-header,
.bn-chart-card .card-body {
    background: transparent !important;
}

/* ── Filter chips ── */
.bn-filter-chips {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.dark-only .bn-filter-chips {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
.bn-chip {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--font-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}
.bn-chip:hover { background: rgba(48, 142, 135, 0.10); color: #308e87; }
.bn-chip.is-active {
    background: linear-gradient(135deg, #308e87, #02a2b9);
    color: #fff;
    box-shadow: 0 4px 12px rgba(48, 142, 135, 0.30);
}
.dark-only .bn-chip:hover    { background: rgba(48, 142, 135, 0.25); color: #56c9c8; }
.dark-only .bn-chip.is-active { box-shadow: 0 4px 12px rgba(48, 142, 135, 0.55); }

/* ── Top Providers ranking rows ── */
.bn-rank-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark-only .bn-rank-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
.bn-rank-row:last-child { border-bottom: none; }

.bn-rank-pos {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--body-font-color);
    background: rgba(0, 0, 0, 0.05);
    align-self: center;
}
.dark-only .bn-rank-pos { background: rgba(255, 255, 255, 0.06); }

/* Medal colors for top 3 */
.bn-rank-pos-1 { background: linear-gradient(135deg, #f9a91f, #fab938); color: #fff; box-shadow: 0 4px 12px rgba(249, 169, 31, 0.30); }
.bn-rank-pos-2 { background: linear-gradient(135deg, #b6c0cd, #d8dfe7); color: #fff; box-shadow: 0 4px 12px rgba(182, 192, 205, 0.30); }
.bn-rank-pos-3 { background: linear-gradient(135deg, #c97a37, #e09b5a); color: #fff; box-shadow: 0 4px 12px rgba(201, 122, 55, 0.30); }

.bn-rank-body { flex: 1; min-width: 0; }
.bn-rank-name {
    font-weight: 600;
    color: var(--body-font-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bn-rank-meta strong {
    font-size: 16px;
    font-weight: 800;
    color: #308e87;
}
.bn-rank-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 4px;
}
.dark-only .bn-rank-bar { background: rgba(255, 255, 255, 0.06); }
.bn-rank-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #308e87, #56c9c8);
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 0 8px rgba(48, 142, 135, 0.35);
}

.bn-rank-row:nth-child(1) .bn-rank-bar-fill { background: linear-gradient(90deg, #f9a91f, #fab938); box-shadow: 0 0 8px rgba(249, 169, 31, 0.45); }
.bn-rank-row:nth-child(2) .bn-rank-bar-fill { background: linear-gradient(90deg, #b6c0cd, #d8dfe7); box-shadow: 0 0 8px rgba(182, 192, 205, 0.45); }
.bn-rank-row:nth-child(3) .bn-rank-bar-fill { background: linear-gradient(90deg, #c97a37, #e09b5a); box-shadow: 0 0 8px rgba(201, 122, 55, 0.45); }

/* ============================================================
   WELCOME BANNER · QUICK ACTIONS · LIVE ACTIVITY · STATUS CARDS
   ============================================================ */

/* ── Pulse dot (reused) ── */
.bn-pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #56f6b3;
    box-shadow: 0 0 0 0 rgba(86, 246, 179, 0.7);
    animation: bnPulse 1.8s infinite;
    display: inline-block;
    flex-shrink: 0;
}
@keyframes bnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(86, 246, 179, 0.65); }
    70%  { box-shadow: 0 0 0 10px rgba(86, 246, 179, 0);  }
    100% { box-shadow: 0 0 0 0 rgba(86, 246, 179, 0);     }
}

/* ── Welcome Banner ── */
.bn-welcome-banner {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 28px 32px;
    background: linear-gradient(135deg, #048D8C 0%, #02a2b9 45%, #2F80ED 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    box-shadow: 0 18px 40px rgba(48, 142, 135, 0.28);
    isolation: isolate;
}
.dark-only .bn-welcome-banner {
    background: linear-gradient(135deg, #024f4e 0%, #036a69 45%, #1f4b94 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.bn-banner-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.bn-banner-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}
.bn-banner-blob-1 { width: 320px; height: 320px; background: #56CCF2; opacity: 0.45; top: -110px;  right: -40px;  animation: bnBannerFloat 10s ease-in-out infinite alternate; }
.bn-banner-blob-2 { width: 280px; height: 280px; background: #9B51E0; opacity: 0.32; bottom: -100px; left: 25%;    animation: bnBannerFloat 14s ease-in-out infinite alternate-reverse; }
.bn-banner-blob-3 { width: 200px; height: 200px; background: #F2C94C; opacity: 0.28; top: 30%;       right: 25%;   animation: bnBannerFloat 16s ease-in-out infinite alternate; }

@keyframes bnBannerFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 22px) scale(1.18); }
}

.bn-welcome-content { position: relative; z-index: 2; flex: 1; min-width: 280px; }

.bn-welcome-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
    margin-bottom: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.bn-welcome-title {
    font-size: 28px; font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.bn-welcome-subtitle {
    margin: 6px 0 0;
    opacity: 0.88;
    font-size: 14px;
    max-width: 540px;
}

.bn-banner-tabs {
    position: relative; z-index: 2;
    display: inline-flex; gap: 4px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-wrap: wrap;
}
.bn-banner-tab {
    appearance: none; border: none; background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1;
}
.bn-banner-tab:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.bn-banner-tab.is-active {
    background: #fff;
    color: #048D8C;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

/* ── Quick Actions ── */
.bn-quick-actions {
    display: flex; flex-direction: column;
    gap: 10px;
    padding-top: 0;
}
.bn-quick-action {
    display: flex; align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--body-font-color);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.dark-only .bn-quick-action {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
.bn-quick-action:hover {
    transform: translateX(4px);
    text-decoration: none;
}
.bn-qa-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.bn-qa-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

.bn-quick-action-primary .bn-qa-icon { background: rgba(48, 142, 135, 0.12);  color: #308e87; }
.bn-quick-action-teal    .bn-qa-icon { background: rgba(2, 162, 185, 0.12);   color: #02a2b9; }
.bn-quick-action-success .bn-qa-icon { background: rgba(62, 185, 95, 0.13);   color: #3eb95f; }
.bn-quick-action-warning .bn-qa-icon { background: rgba(243, 145, 89, 0.14);  color: #ea9200; }
.bn-quick-action-danger  .bn-qa-icon { background: rgba(231, 75, 43, 0.13);   color: #e74b2b; }
.bn-quick-action-info    .bn-qa-icon { background: rgba(47, 128, 237, 0.12);  color: #2F80ED; }
.bn-quick-action-purple  .bn-qa-icon { background: rgba(155, 81, 224, 0.13);  color: #9B51E0; }
.bn-quick-action-pink    .bn-qa-icon { background: rgba(254, 138, 125, 0.16); color: #fe8a7d; }

.bn-qa-body { flex: 1; min-width: 0; }
.bn-qa-title {
    font-weight: 700; font-size: 14px;
    color: var(--body-font-color);
    line-height: 1.2;
}
.bn-qa-sub { font-size: 12px; color: var(--font-color); margin-top: 2px; }

.bn-qa-arrow {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--font-color);
    opacity: 0.5;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.bn-qa-arrow svg { width: 16px; height: 16px; }
.bn-quick-action:hover .bn-qa-arrow { transform: translateX(4px); opacity: 1; }

/* Per-variant hover glow */
.bn-quick-action-primary:hover { background: rgba(48, 142, 135, 0.08);  box-shadow: 0 8px 22px rgba(48, 142, 135, 0.16); }
.bn-quick-action-teal:hover    { background: rgba(2, 162, 185, 0.08);   box-shadow: 0 8px 22px rgba(2, 162, 185, 0.16); }
.bn-quick-action-success:hover { background: rgba(62, 185, 95, 0.08);   box-shadow: 0 8px 22px rgba(62, 185, 95, 0.16); }
.bn-quick-action-warning:hover { background: rgba(243, 145, 89, 0.08);  box-shadow: 0 8px 22px rgba(243, 145, 89, 0.16); }
.bn-quick-action-danger:hover  { background: rgba(231, 75, 43, 0.08);   box-shadow: 0 8px 22px rgba(231, 75, 43, 0.16); }
.bn-quick-action-info:hover    { background: rgba(47, 128, 237, 0.08);  box-shadow: 0 8px 22px rgba(47, 128, 237, 0.16); }
.bn-quick-action-purple:hover  { background: rgba(155, 81, 224, 0.08);  box-shadow: 0 8px 22px rgba(155, 81, 224, 0.16); }
.bn-quick-action-pink:hover    { background: rgba(254, 138, 125, 0.08); box-shadow: 0 8px 22px rgba(254, 138, 125, 0.16); }

/* ── Live Activity ── */
.bn-live-indicator {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px;
    background: rgba(62, 185, 95, 0.14);
    color: #1b8a3b;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
}
.dark-only .bn-live-indicator { background: rgba(62, 185, 95, 0.22); color: #6fcf97; }

.bn-activity-feed {
    display: flex; flex-direction: column;
    gap: 0;
    max-height: 420px;
    overflow-y: auto;
    padding-top: 0;
}
.bn-activity-item {
    display: flex; align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease;
}
.dark-only .bn-activity-item { border-bottom-color: rgba(255, 255, 255, 0.06); }
.bn-activity-item:last-child { border-bottom: none; }
.bn-activity-item:hover { background: rgba(0, 0, 0, 0.02); }
.dark-only .bn-activity-item:hover { background: rgba(255, 255, 255, 0.03); }

.bn-activity-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.bn-activity-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.18;
    animation: bnRipple 2.4s ease-out infinite;
}
@keyframes bnRipple {
    0%   { transform: scale(0.85); opacity: 0.30; }
    100% { transform: scale(1.45); opacity: 0;    }
}
.bn-activity-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.bn-activity-primary .bn-activity-icon { background: rgba(48, 142, 135, 0.13);  color: #308e87; }
.bn-activity-teal    .bn-activity-icon { background: rgba(2, 162, 185, 0.13);   color: #02a2b9; }
.bn-activity-success .bn-activity-icon { background: rgba(62, 185, 95, 0.14);   color: #3eb95f; }
.bn-activity-warning .bn-activity-icon { background: rgba(243, 145, 89, 0.15);  color: #ea9200; }
.bn-activity-danger  .bn-activity-icon { background: rgba(231, 75, 43, 0.14);   color: #e74b2b; }
.bn-activity-info    .bn-activity-icon { background: rgba(47, 128, 237, 0.13);  color: #2F80ED; }
.bn-activity-purple  .bn-activity-icon { background: rgba(155, 81, 224, 0.14);  color: #9B51E0; }
.bn-activity-pink    .bn-activity-icon { background: rgba(254, 138, 125, 0.18); color: #fe8a7d; }

.bn-activity-body { flex: 1; min-width: 0; }
.bn-activity-title {
    font-weight: 600; font-size: 13.5px;
    color: var(--body-font-color);
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-activity-sub {
    font-size: 12px; color: var(--font-color);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-activity-time {
    font-size: 11px; font-weight: 600;
    color: var(--font-color);
    flex-shrink: 0;
    margin-inline-start: 8px;
}

/* ── Status Progress Cards ── */
.bn-status-card .card-body {
    background: transparent !important;
    display: flex; flex-direction: column;
}
.bn-status-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--font-color);
}
.bn-status-total {
    font-size: 30px; font-weight: 800;
    line-height: 1.1;
    color: var(--body-font-color);
    margin-top: 4px;
    letter-spacing: -0.5px;
}
.bn-status-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(48, 142, 135, 0.12);
    color: #308e87;
}
.bn-status-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

.bn-status-segments {
    display: flex; gap: 3px;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}
.dark-only .bn-status-segments { background: rgba(255, 255, 255, 0.06); }
.bn-status-segment {
    height: 100%;
    transform-origin: left center;
    animation: bnSegIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes bnSegIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.bn-status-legend {
    display: flex; flex-direction: column;
    gap: 4px;
}
.bn-status-legend-row {
    display: flex; align-items: center;
    gap: 8px;
    font-size: 12px;
}
.bn-status-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bn-status-legend-label {
    flex: 1;
    color: var(--font-color);
}
.bn-status-legend-value {
    font-weight: 700;
    color: var(--body-font-color);
}

/* ── Activity feed scrollbar styling ── */
.bn-activity-feed::-webkit-scrollbar { width: 6px; }
.bn-activity-feed::-webkit-scrollbar-track { background: transparent; }
.bn-activity-feed::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 999px; }
.dark-only .bn-activity-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }

/* ── Status row per-bar (overrides inline for dark mode) ── */
.dark-only .bn-status-row-bar { background: rgba(255, 255, 255, 0.06) !important; }

/* ── Reinforce hover lift on all card variants ── */
.stat-card,
.bn-chart-card,
.bn-status-card {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
}
.stat-card:hover,
.bn-chart-card:hover,
.bn-status-card:hover {
    transform: translateY(-4px);
}
.bn-chart-card:hover {
    box-shadow: 0 12px 36px rgba(48, 142, 135, 0.15) !important;
}
.dark-only .bn-chart-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Sharper number typography on stat cards */
.stat-card-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ============================================================
   CONTINUOUS "ALIVE" ANIMATIONS
   - Shimmer on top accent bar
   - Breathing shadow on cards
   - Icon ring pulse
   - Run forever, staggered per variant for organic feel
   ============================================================ */

/* 1. Shimmer sweep across the top gradient accent bar */
@keyframes bnBarShimmer {
    0%   { background-position: -200% 50%; }
    100% { background-position:  200% 50%; }
}
.stat-card > span:first-of-type:not(.bn-aurora-blob),
.bn-stat-accent-bar {
    background: linear-gradient(90deg,
        transparent  0%,
        rgba(255,255,255,0.85) 50%,
        transparent 100%) !important;
    background-size: 200% 100% !important;
    background-color: transparent !important;
    animation: bnBarShimmer 3.2s linear infinite;
    mix-blend-mode: overlay;
}

/* 2. Continuous breathing shadow on every card */
@keyframes bnCardBreathe {
    0%, 100% { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05); }
    50%      { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); }
}
.stat-card,
.bn-chart-card,
.bn-status-card {
    animation: bnCardBreathe 5.5s ease-in-out infinite;
}
/* Organic stagger per variant */
.stat-card-primary { animation-delay: 0.0s; }
.stat-card-teal    { animation-delay: 0.4s; }
.stat-card-success { animation-delay: 0.8s; }
.stat-card-warning { animation-delay: 1.2s; }
.stat-card-danger  { animation-delay: 1.6s; }
.stat-card-info    { animation-delay: 2.0s; }
.stat-card-purple  { animation-delay: 2.4s; }
.stat-card-pink    { animation-delay: 2.8s; }

.dark-only .stat-card,
.dark-only .bn-chart-card,
.dark-only .bn-status-card {
    animation-name: bnCardBreatheDark;
}
@keyframes bnCardBreatheDark {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.50); }
}

/* 3. Expanding ring pulse around KPI icon containers */
.stat-card-icon-wrap {
    position: relative;
}
.stat-card-icon-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: bnIconRing 2.8s ease-out infinite;
    pointer-events: none;
}
@keyframes bnIconRing {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0;    }
}

/* Stagger the ring pulses per variant */
.stat-card-primary .stat-card-icon-wrap::before { animation-delay: 0.0s; }
.stat-card-teal    .stat-card-icon-wrap::before { animation-delay: 0.35s; }
.stat-card-success .stat-card-icon-wrap::before { animation-delay: 0.7s; }
.stat-card-warning .stat-card-icon-wrap::before { animation-delay: 1.05s; }
.stat-card-danger  .stat-card-icon-wrap::before { animation-delay: 1.4s; }
.stat-card-info    .stat-card-icon-wrap::before { animation-delay: 1.75s; }
.stat-card-purple  .stat-card-icon-wrap::before { animation-delay: 2.1s; }
.stat-card-pink    .stat-card-icon-wrap::before { animation-delay: 2.45s; }

/* 4. Gauge stroke continuous shimmer (subtle glow pulse) */
@keyframes bnGaugeGlow {
    0%, 100% { filter: drop-shadow(0 0 3px currentColor); }
    50%      { filter: drop-shadow(0 0 8px currentColor); }
}
.gauge-progress {
    animation: bnGaugeGlow 2.4s ease-in-out infinite;
}

/* 5. LIVE indicator: stronger pulse */
.bn-live-indicator .bn-pulse-dot {
    animation: bnPulseStrong 1.4s ease-in-out infinite;
}
@keyframes bnPulseStrong {
    0%   { box-shadow: 0 0 0 0 rgba(86, 246, 179, 0.85); transform: scale(1); }
    70%  { box-shadow: 0 0 0 12px rgba(86, 246, 179, 0); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 0 rgba(86, 246, 179, 0);   transform: scale(1); }
}

/* 6. Welcome banner: slow gradient shift (continuous "alive") */
.bn-welcome-banner {
    background-size: 200% 200% !important;
    animation: bnBannerShift 18s ease-in-out infinite;
}
@keyframes bnBannerShift {
    0%, 100% { background-position: 0%   50%; }
    50%      { background-position: 100% 50%; }
}

/* 7. Sparkline subtle breath on the container (no chart re-render) */
.stat-sparkline-bottom {
    animation: bnSparklineBreath 4s ease-in-out infinite;
}
@keyframes bnSparklineBreath {
    0%, 100% { opacity: 1;    transform: translateY(0); }
    50%      { opacity: 0.92; transform: translateY(-1px); }
}

/* Reduce-motion: kill all continuous animations */
@media (prefers-reduced-motion: reduce) {
    .stat-card, .bn-chart-card, .bn-status-card,
    .stat-card-icon-wrap::before,
    .gauge-progress,
    .bn-welcome-banner,
    .stat-sparkline-bottom,
    .bn-live-indicator .bn-pulse-dot { animation: none !important; }
}

/* ── Welcome banner animations (additive over inline styles) ── */
.bn-banner-blob-1 { animation: bnBannerFloat 10s ease-in-out infinite alternate; }
.bn-banner-blob-2 { animation: bnBannerFloat 14s ease-in-out infinite alternate-reverse; }
.bn-banner-blob-3 { animation: bnBannerFloat 16s ease-in-out infinite alternate; }
.bn-pulse-dot     { animation: bnPulse 1.8s infinite; }

/* Banner tabs: hover (inline styles cover base + active state) */
.bn-banner-tab:hover { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; }
.bn-banner-tab.is-active { background: #fff !important; color: #048D8C !important; }
.bn-banner-tab.is-active:hover { background: #fff !important; color: #048D8C !important; }

/* ── Responsive tweaks ── */
@media (max-width: 768px) {
    .bn-welcome-banner { padding: 22px 20px !important; border-radius: 18px !important; }
    .bn-welcome-title  { font-size: 22px !important; }
    .bn-welcome-subtitle { font-size: 13px !important; }
    .bn-banner-tab     { padding: 7px 14px !important; font-size: 12px !important; }
    .stat-card-value   { font-size: 24px; }
}

/* =============================================================
   STAT CARDS · LIGHT THEME + NEW MOTION (v3)
   - Natural soft colors (white card, faint variant tint only)
   - New effects: diagonal light-sweep + floating particles + comet
     border + ticker-tape value flicker
   ============================================================= */

/* Cards: clean white with a barely-there variant tint */
.stat-card {
    background:
        linear-gradient(160deg,
            rgba(255,255,255,1) 0%,
            var(--bn-card-tint, rgba(48,142,135,0.05)) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.dark-only .stat-card {
    background:
        linear-gradient(160deg,
            #1f2937 0%,
            var(--bn-card-tint-dark, rgba(48,142,135,0.10)) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.stat-card-primary { --bn-card-tint: rgba(48,142,135,0.06);  --bn-card-tint-dark: rgba(48,142,135,0.14); }
.stat-card-teal    { --bn-card-tint: rgba(2,162,185,0.06);   --bn-card-tint-dark: rgba(2,162,185,0.14); }
.stat-card-success { --bn-card-tint: rgba(62,185,95,0.06);   --bn-card-tint-dark: rgba(62,185,95,0.14); }
.stat-card-warning { --bn-card-tint: rgba(243,145,89,0.07);  --bn-card-tint-dark: rgba(243,145,89,0.14); }
.stat-card-danger  { --bn-card-tint: rgba(231,75,43,0.06);   --bn-card-tint-dark: rgba(231,75,43,0.14); }
.stat-card-info    { --bn-card-tint: rgba(47,128,237,0.06);  --bn-card-tint-dark: rgba(47,128,237,0.14); }
.stat-card-purple  { --bn-card-tint: rgba(155,81,224,0.06);  --bn-card-tint-dark: rgba(155,81,224,0.14); }
.stat-card-pink    { --bn-card-tint: rgba(254,138,125,0.07); --bn-card-tint-dark: rgba(254,138,125,0.14); }

/* Light-sweep DISABLED — user found the diagonal stripe distracting.
   ::before kept as no-op so existing selectors still resolve. */
.stat-card::before {
    content: none;
    display: none !important;
}
.dark-only .stat-card::before {
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255,255,255,0)    30%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0)    70%,
        transparent 100%);
}
@keyframes bnLightSweep {
    0%        { left: -60%; opacity: 0; }
    8%        { opacity: 1; }
    55%, 100% { left: 130%; opacity: 0; }
}

/* Stagger the sweep across cards so they don't all shine at once */
.col-12.col-sm-6.col-lg-4.col-xl-fifth:nth-child(5n+1) .stat-card::before { animation-delay: 0s;   }
.col-12.col-sm-6.col-lg-4.col-xl-fifth:nth-child(5n+2) .stat-card::before { animation-delay: 2.0s; }
.col-12.col-sm-6.col-lg-4.col-xl-fifth:nth-child(5n+3) .stat-card::before { animation-delay: 4.0s; }
.col-12.col-sm-6.col-lg-4.col-xl-fifth:nth-child(5n+4) .stat-card::before { animation-delay: 6.0s; }
.col-12.col-sm-6.col-lg-4.col-xl-fifth:nth-child(5n+5) .stat-card::before { animation-delay: 8.0s; }

/* ── NEW #2: turn the two big aurora blobs into small floating
   "particles" that drift on different orbits.  Same DOM, new role. */
.bn-aurora-blob {
    width: 6px !important;
    height: 6px !important;
    filter: blur(0.5px) !important;
    opacity: 0.85 !important;
    top: 22px !important;
    right: auto !important;
    left: 18px !important;
    box-shadow: 0 0 8px currentColor;
    animation: bnParticleOrbitA 16s linear infinite !important;
}
.bn-aurora-blob.blob-2 {
    width: 4px !important;
    height: 4px !important;
    opacity: 0.7 !important;
    top: auto !important;
    bottom: 88px !important;
    left: auto !important;
    right: 24px !important;
    animation: bnParticleOrbitB 19s linear infinite !important;
}
/* Inherit "color" from variant for the glow */
.stat-card-primary .bn-aurora-blob { color: #308e87; background: #308e87 !important; }
.stat-card-teal    .bn-aurora-blob { color: #02a2b9; background: #02a2b9 !important; }
.stat-card-success .bn-aurora-blob { color: #3eb95f; background: #3eb95f !important; }
.stat-card-warning .bn-aurora-blob { color: #f39159; background: #f39159 !important; }
.stat-card-danger  .bn-aurora-blob { color: #e74b2b; background: #e74b2b !important; }
.stat-card-info    .bn-aurora-blob { color: #2F80ED; background: #2F80ED !important; }
.stat-card-purple  .bn-aurora-blob { color: #9B51E0; background: #9B51E0 !important; }
.stat-card-pink    .bn-aurora-blob { color: #fe8a7d; background: #fe8a7d !important; }

@keyframes bnParticleOrbitA {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(38px, -6px); }
    50%  { transform: translate(72px, 14px); }
    75%  { transform: translate(28px, 36px); }
    100% { transform: translate(0, 0); }
}
@keyframes bnParticleOrbitB {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-28px, -18px); }
    50%  { transform: translate(-56px, 4px); }
    75%  { transform: translate(-20px, -30px); }
    100% { transform: translate(0, 0); }
}

/* ── NEW #3: comet running along the top accent bar.
   Replaces the previous static-then-shimmer bar with a single
   bright dot that races left → right and loops. */
.bn-stat-accent-bar {
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 38%,
        rgba(255,255,255,0.95) 48%,
        var(--bn-comet-color, #ffffff) 50%,
        rgba(255,255,255,0.95) 52%,
        transparent 62%,
        transparent 100%) !important;
    background-size: 320% 100% !important;
    animation: bnCometRun 7s cubic-bezier(0.6, 0.04, 0.4, 0.96) infinite !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px var(--bn-comet-color, #ffffff));
}
.stat-card-primary .bn-stat-accent-bar { --bn-comet-color: #56c9c8; }
.stat-card-teal    .bn-stat-accent-bar { --bn-comet-color: #56CCF2; }
.stat-card-success .bn-stat-accent-bar { --bn-comet-color: #6FCF97; }
.stat-card-warning .bn-stat-accent-bar { --bn-comet-color: #F2C94C; }
.stat-card-danger  .bn-stat-accent-bar { --bn-comet-color: #EB8484; }
.stat-card-info    .bn-stat-accent-bar { --bn-comet-color: #56CCF2; }
.stat-card-purple  .bn-stat-accent-bar { --bn-comet-color: #C68EF0; }
.stat-card-pink    .bn-stat-accent-bar { --bn-comet-color: #FFBDB8; }

@keyframes bnCometRun {
    0%   { background-position: 320% 0; }
    100% { background-position: -320% 0; }
}

/* ── #4: VALUE NUMBER — keep the digit clean and dark (readable),
   only add a soft variant-coloured glow that fades in and out. */
.stat-card-value {
    background: none !important;
    -webkit-text-fill-color: currentColor;
    color: var(--body-font-color, #232323) !important;
    animation: bnValueGlow 6s ease-in-out infinite;
}
.stat-card-primary .stat-card-value { --bn-val-accent: rgba(48,142,135,0.45); }
.stat-card-teal    .stat-card-value { --bn-val-accent: rgba(2,162,185,0.45); }
.stat-card-success .stat-card-value { --bn-val-accent: rgba(62,185,95,0.45); }
.stat-card-warning .stat-card-value { --bn-val-accent: rgba(243,145,89,0.50); }
.stat-card-danger  .stat-card-value { --bn-val-accent: rgba(231,75,43,0.45); }
.stat-card-info    .stat-card-value { --bn-val-accent: rgba(47,128,237,0.45); }
.stat-card-purple  .stat-card-value { --bn-val-accent: rgba(155,81,224,0.45); }
.stat-card-pink    .stat-card-value { --bn-val-accent: rgba(254,138,125,0.50); }
@keyframes bnValueGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 16px var(--bn-val-accent, rgba(48,142,135,0.45)); }
}

/* ── NEW #5: ICON GETS LIFE — three layered effects
   (a) spinning conic gradient RING outside the icon wrap (gradient
       border trick via mask compositing)
   (b) the wrap itself does a soft tilt
   (c) the SVG inside wobbles like a heartbeat                              */
.stat-card-icon-wrap {
    position: relative !important;
    overflow: visible !important;
    animation: bnIconTilt 5.5s ease-in-out infinite;
    color: var(--icon-c, #308e87) !important;
}
.stat-card-primary .stat-card-icon-wrap { --icon-c: #308e87; }
.stat-card-teal    .stat-card-icon-wrap { --icon-c: #02a2b9; }
.stat-card-success .stat-card-icon-wrap { --icon-c: #3eb95f; }
.stat-card-warning .stat-card-icon-wrap { --icon-c: #f39159; }
.stat-card-danger  .stat-card-icon-wrap { --icon-c: #e74b2b; }
.stat-card-info    .stat-card-icon-wrap { --icon-c: #2F80ED; }
.stat-card-purple  .stat-card-icon-wrap { --icon-c: #9B51E0; }
.stat-card-pink    .stat-card-icon-wrap { --icon-c: #fe8a7d; }

.stat-card-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 15px;
    background: conic-gradient(from 0deg,
                    var(--icon-c, #308e87) 0%,
                    transparent 38%,
                    transparent 62%,
                    var(--icon-c, #308e87) 100%);
    padding: 2px;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: bnIconRingSpin 5s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 0 4px var(--icon-c, rgba(48,142,135,0.4)));
}
.stat-card-icon-wrap svg {
    animation: bnIconWobble 4.2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes bnIconRingSpin {
    to { transform: rotate(360deg); }
}
@keyframes bnIconTilt {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-4deg); }
    75%      { transform: rotate(4deg); }
}
@keyframes bnIconWobble {
    0%, 60%, 100% { transform: scale(1) rotate(0); }
    15%           { transform: scale(1.18) rotate(-6deg); }
    30%           { transform: scale(0.96) rotate(4deg); }
    45%           { transform: scale(1.08) rotate(-2deg); }
}

/* Same ring around the gauge ring so gauge cards aren't left behind */
.stat-card-gauge .gauge-progress {
    animation: bnGaugePulse 3.8s ease-in-out infinite;
}
@keyframes bnGaugePulse {
    0%, 100% { stroke-width: 7; filter: drop-shadow(0 0 3px currentColor); }
    50%      { stroke-width: 8; filter: drop-shadow(0 0 10px currentColor); }
}

/* ── NEW #6: EQUALIZER BARS — fills the empty bottom area on cards
   that don't have meaningful sparkline data. 7 bars that bounce at
   different speeds like an audio visualiser. */
.bn-stat-eq {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 20px 12px;
    gap: 5px;
    overflow: hidden;
}
.bn-stat-eq span {
    flex: 1;
    min-width: 5px;
    background: linear-gradient(180deg,
                    color-mix(in srgb, var(--c, #308e87) 30%, transparent) 0%,
                    var(--c, #308e87) 100%);
    border-radius: 4px 4px 2px 2px;
    transform-origin: bottom center;
    height: 14%;
    animation: bnEqBounce 2.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c, #308e87) 35%, transparent);
}
@keyframes bnEqBounce {
    0%, 100% { height: 14%; }
    18%      { height: 86%; }
    36%      { height: 28%; }
    55%      { height: 68%; }
    74%      { height: 22%; }
    90%      { height: 48%; }
}

/* Hover lift stays simple & natural */
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10) !important;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .stat-card::before,
    .bn-aurora-blob,
    .bn-stat-accent-bar,
    .stat-card-value,
    .stat-card-icon-wrap,
    .stat-card-icon-wrap::before,
    .stat-card-icon-wrap svg,
    .stat-card-gauge .gauge-progress,
    .bn-stat-eq span { animation: none !important; }
}

/* =============================================================
   FIXES: hide particles, equal card heights, tight equalizer,
          tighter row gutter
   ============================================================= */

/* Floating particle dots were creating visual noise above the
   equalizer — hide them entirely. */
.stat-card .bn-aurora-blob { display: none !important; }

/* All stat-cards in a row should be the SAME height. We accomplish
   this by:
   (1) keeping h-100 (cards stretch to row max)
   (2) reserving 2-line space for the label so headers align even
       when one label wraps and another doesn't
   (3) pushing the equalizer/sparkline to the bottom of the card so
       any extra vertical space sits between header and chart, not
       below it. */
.stat-card .card-body > .d-flex {
    min-height: 78px;
    align-items: flex-start;
}
.stat-card-label {
    min-height: 26px;
    line-height: 1.25;
    display: block;
}
.stat-card .bn-stat-eq,
.stat-card .stat-sparkline-bottom {
    margin-top: auto !important;
}

/* Reduce the vertical gutter between the two stat-card rows. */
.row.g-3 { --bs-gutter-y: 0.6rem; }

/* Equalizer bars: tighter height range so all bars stay around the
   same level — gentle wave instead of jumpy up/down. */
@keyframes bnEqBounce {
    0%, 100% { height: 62%; }
    25%      { height: 90%; }
    50%      { height: 72%; }
    75%      { height: 86%; }
}
.bn-stat-eq span {
    height: 70%; /* default resting height (was 14%) */
}

/* =============================================================
   NEW VARIANTS · INDIGO (#6366f1) and LIME (#65a30d)
   ============================================================= */

/* Icon wrap base */
.stat-card-indigo .stat-card-icon-wrap { background: rgba(99,102,241,0.13); color: #6366f1; }
.stat-card-indigo::after                { background: #6366f1; }
.stat-card-lime   .stat-card-icon-wrap { background: rgba(101,163,13,0.14);  color: #65a30d; }
.stat-card-lime::after                  { background: #65a30d; }

.dark-only .stat-card-indigo .stat-card-icon-wrap { background: rgba(99,102,241,0.22); }
.dark-only .stat-card-lime   .stat-card-icon-wrap { background: rgba(101,163,13,0.22); }

/* Label colour */
.stat-card-indigo .stat-card-label { color: #6366f1; }
.stat-card-lime   .stat-card-label { color: #65a30d; }

/* Top accent gradient (::before original rule) */
.stat-card-indigo::before { background: linear-gradient(90deg, #6366f1 0%, #a5b4fc 100%); }
.stat-card-lime::before   { background: linear-gradient(90deg, #65a30d 0%, #bef264 100%); }

/* Hover glow */
.stat-card-indigo:hover { box-shadow: 0 10px 30px rgba(99,102,241,0.22)  !important; }
.stat-card-lime:hover   { box-shadow: 0 10px 30px rgba(101,163,13,0.22)  !important; }
.dark-only .stat-card-indigo:hover { box-shadow: 0 10px 30px rgba(99,102,241,0.38)  !important; }
.dark-only .stat-card-lime:hover   { box-shadow: 0 10px 30px rgba(101,163,13,0.38)  !important; }

/* Original aurora-blob colour */
.stat-card-indigo .bn-aurora-blob { background: #6366f1; }
.stat-card-lime   .bn-aurora-blob { background: #65a30d; }

/* Gauge stroke (kept for any non-admin views still using gauges) */
.stat-card-indigo .gauge-progress { stroke: #6366f1; color: #6366f1; }
.stat-card-lime   .gauge-progress { stroke: #65a30d; color: #65a30d; }

/* v3 card tint */
.stat-card-indigo { --bn-card-tint: rgba(99,102,241,0.06);  --bn-card-tint-dark: rgba(99,102,241,0.14); }
.stat-card-lime   { --bn-card-tint: rgba(101,163,13,0.06);  --bn-card-tint-dark: rgba(101,163,13,0.14); }

/* v3 particle colour (overrides original aurora colour) */
.stat-card-indigo .bn-aurora-blob { color: #6366f1; background: #6366f1 !important; }
.stat-card-lime   .bn-aurora-blob { color: #65a30d; background: #65a30d !important; }

/* v3 comet on accent bar */
.stat-card-indigo .bn-stat-accent-bar { --bn-comet-color: #a5b4fc; }
.stat-card-lime   .bn-stat-accent-bar { --bn-comet-color: #bef264; }

/* v4 value-glow accent */
.stat-card-indigo .stat-card-value { --bn-val-accent: rgba(99,102,241,0.45); }
.stat-card-lime   .stat-card-value { --bn-val-accent: rgba(101,163,13,0.45); }

/* v4 icon ring colour */
.stat-card-indigo .stat-card-icon-wrap { --icon-c: #6366f1; }
.stat-card-lime   .stat-card-icon-wrap { --icon-c: #65a30d; }

/* =============================================================
   STATUS PROGRESS CARDS · independent visual identity
   (does NOT inherit .stat-card effects — defined from scratch)
   ============================================================= */

/* Card base: white background, very light variant tint, soft border */
.bn-status-card {
    background:
        linear-gradient(170deg,
            #ffffff 0%,
            color-mix(in srgb, var(--c, #308e87) 6%, transparent) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--c, #308e87) 14%, rgba(15,23,42,0.06)) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: transform 0.22s, box-shadow 0.22s;
}
.dark-only .bn-status-card {
    background:
        linear-gradient(170deg,
            #1f2937 0%,
            color-mix(in srgb, var(--c, #308e87) 14%, transparent) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--c, #308e87) 30%, rgba(255,255,255,0.06)) !important;
}
.bn-status-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--c, #308e87) 22%, transparent);
}

/* ── NEW #1: dotted-grid background that slowly drifts diagonally.
   Visible through the middle of the card (top/bottom faded). */
.bn-status-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle,
            color-mix(in srgb, var(--c, #308e87) 28%, transparent) 1.2px,
            transparent 1.7px);
    background-size: 16px 16px;
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    animation: bnDotsDrift 22s linear infinite;
}
.dark-only .bn-status-card::after { opacity: 0.32; }
@keyframes bnDotsDrift {
    from { background-position: 0 0; }
    to   { background-position: 32px 32px; }
}

/* ── NEW #2: left vertical accent stripe with a colour band that
   flows from top to bottom forever. */
.bn-status-stripe {
    position: absolute;
    top: 8px; bottom: 8px; left: 0;
    width: 5px;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--c, #308e87) 55%, transparent) 15%,
        var(--c, #308e87) 38%,
        color-mix(in srgb, var(--c, #308e87) 75%, white) 50%,
        var(--c, #308e87) 62%,
        color-mix(in srgb, var(--c, #308e87) 55%, transparent) 85%,
        transparent 100%);
    background-size: 100% 280%;
    box-shadow: 0 0 16px color-mix(in srgb, var(--c, #308e87) 50%, transparent);
    z-index: 3;
    pointer-events: none;
    animation: bnStripeFlow 4.2s linear infinite;
}
@keyframes bnStripeFlow {
    from { background-position: 0 280%; }
    to   { background-position: 0 -280%; }
}

/* ── NEW #3: icon wrap — gentle vertical bob only (no ring, no
   wobble, no tilt — totally different from stat-card icon). */
.bn-status-icon-wrap {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    animation: bnStatusIconBob 3.8s ease-in-out infinite;
    will-change: transform;
}
@keyframes bnStatusIconBob {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(-5px) }
}

/* ── NEW #4: total-number — soft scale breath (different from
   stat-card's text-shadow glow). */
.bn-status-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.bn-status-total {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--body-font-color);
    margin-top: 6px;
    letter-spacing: -0.5px;
    display: inline-block;
    transform-origin: left bottom;
    animation: bnTotalBreath 5s ease-in-out infinite;
}
@keyframes bnTotalBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* ── NEW #5: progress bars — BARBER-POLE diagonal stripes scrolling
   forever.  Uses a pseudo-element with translateX (most reliable
   way to keep the animation running continuously). */
.bn-status-row-fill {
    background: var(--bc, #308e87) !important;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--bc, #308e87) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.35) !important;
    overflow: hidden;
}
.bn-status-row-fill::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -24px;
    right: -24px;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,0.50) 6px,
        rgba(255,255,255,0.50) 12px
    );
    animation: bnBarberPole 1.4s linear infinite;
    pointer-events: none;
    will-change: transform;
}
.dark-only .bn-status-row-fill::before {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,0.18) 6px,
        rgba(255,255,255,0.18) 12px
    );
}
@keyframes bnBarberPole {
    from { transform: translateX(0); }
    to   { transform: translateX(17px); }
}

/* Slightly thicker bars + softer track */
.bn-status-row-bar {
    background: color-mix(in srgb, var(--c, #308e87) 8%, rgba(0,0,0,0.04)) !important;
}

/* ── NEW #6: status dots — RIPPLE halo expanding outward
   (replaces the simple scale pulse). */
.bn-status-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    border: 2px solid var(--dc, #308e87);
    opacity: 0;
    animation: bnDotRipple 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes bnDotRipple {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(3.2); opacity: 0;   }
}
.bn-status-row:nth-child(2) .bn-status-dot::after { animation-delay: 0.55s; }
.bn-status-row:nth-child(3) .bn-status-dot::after { animation-delay: 1.10s; }
.bn-status-row:nth-child(4) .bn-status-dot::after { animation-delay: 1.65s; }

@media (prefers-reduced-motion: reduce) {
    .bn-status-card::after,
    .bn-status-stripe,
    .bn-status-icon-wrap,
    .bn-status-total,
    .bn-status-row-fill,
    .bn-status-dot::after { animation: none !important; }
}

/* =============================================================
   QUICK ACTIONS + LIVE ACTIVITY  ·  compact + matching motion
   ============================================================= */

/* Tighter card paddings */
.bn-chart-card:has(.bn-quick-actions) .card-header,
.bn-chart-card:has(.bn-activity-feed) .card-header {
    padding-top: 18px !important;
    padding-bottom: 6px !important;
}
.bn-chart-card:has(.bn-quick-actions) .card-body,
.bn-chart-card:has(.bn-activity-feed) .card-body {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
}

/* Both cards keep h-100 (equal height) — but spread Quick-Actions
   items across the full height so the 4-item card doesn't leave a
   big gap at the bottom against the 6-item activity card. */
.bn-quick-actions {
    justify-content: space-between !important;
    gap: 7px !important;
    flex: 1;
}

.bn-quick-action {
    padding: 9px 12px !important;
    gap: 11px !important;
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
}
.bn-quick-action::before {
    content: '';
    position: absolute;
    top: 6px; bottom: 6px; left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--qa-c, #308e87) 35%,
        color-mix(in srgb, var(--qa-c, #308e87) 70%, white) 50%,
        var(--qa-c, #308e87) 65%,
        transparent 100%);
    background-size: 100% 240%;
    animation: bnQaStripeFlow 4.5s linear infinite;
    pointer-events: none;
}
@keyframes bnQaStripeFlow {
    from { background-position: 0 240%; }
    to   { background-position: 0 -240%; }
}
.bn-quick-action-primary { --qa-c: #308e87; }
.bn-quick-action-teal    { --qa-c: #02a2b9; }
.bn-quick-action-success { --qa-c: #3eb95f; }
.bn-quick-action-warning { --qa-c: #f39159; }
.bn-quick-action-danger  { --qa-c: #e74b2b; }
.bn-quick-action-info    { --qa-c: #2F80ED; }
.bn-quick-action-purple  { --qa-c: #9B51E0; }
.bn-quick-action-pink    { --qa-c: #fe8a7d; }
.bn-quick-action-indigo  { --qa-c: #6366f1; }
.bn-quick-action-lime    { --qa-c: #65a30d; }

/* Stagger the stripe flow across the 4 actions */
.bn-quick-actions > .bn-quick-action:nth-child(1)::before { animation-delay: 0s;    }
.bn-quick-actions > .bn-quick-action:nth-child(2)::before { animation-delay: 1.1s;  }
.bn-quick-actions > .bn-quick-action:nth-child(3)::before { animation-delay: 2.2s;  }
.bn-quick-actions > .bn-quick-action:nth-child(4)::before { animation-delay: 3.3s;  }

/* Smaller icon + continuous breath */
.bn-qa-icon {
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    animation: bnQaIconBreath 3.8s ease-in-out infinite;
}
.bn-qa-icon svg { width: 18px !important; height: 18px !important; }
@keyframes bnQaIconBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* Tighter typography */
.bn-qa-title { font-size: 13px !important; }
.bn-qa-sub   { font-size: 11.5px !important; }
.bn-qa-arrow { width: 22px !important; height: 22px !important; }
.bn-qa-arrow svg { width: 14px !important; height: 14px !important; }

/* ── Live Activity: smaller rows */
.bn-activity-feed { max-height: 360px !important; gap: 0 !important; }
.bn-activity-item {
    padding: 8px 4px !important;
    gap: 11px !important;
}
.bn-activity-icon {
    width: 32px !important; height: 32px !important;
}
.bn-activity-icon svg { width: 16px !important; height: 16px !important; }
.bn-activity-title { font-size: 12.8px !important; }
.bn-activity-sub   { font-size: 11.5px !important; }
.bn-activity-time  { font-size: 10.5px !important; }

/* Match the ripple speed to the status-card ripples for theme consistency */
.bn-activity-icon::after { animation-duration: 2.2s !important; }

@media (prefers-reduced-motion: reduce) {
    .bn-quick-action::before,
    .bn-qa-icon { animation: none !important; }
}

/* =============================================================
   CHART CARDS · top-edge light sweep
   Scoped to ONLY the 3 cards: Platform Overview, Booking Trend,
   Booking Mix (identified by their inner chart IDs).
   ============================================================= */

.bn-chart-card:has(#admin-overview-chart),
.bn-chart-card:has(#admin-booking-trend-chart),
.bn-chart-card:has(#admin-booking-status-chart) {
    position: relative;
    overflow: hidden;
}
.bn-chart-card:has(#admin-overview-chart) > *,
.bn-chart-card:has(#admin-booking-trend-chart) > *,
.bn-chart-card:has(#admin-booking-status-chart) > * {
    position: relative;
    z-index: 2;
}

.bn-chart-card:has(#admin-overview-chart)::before,
.bn-chart-card:has(#admin-booking-trend-chart)::before,
.bn-chart-card:has(#admin-booking-status-chart)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(2, 162, 185, 0.65) 50%,
        transparent 100%);
    animation: bnChartTopSweep 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
    border-radius: 2px;
}
.dark-only .bn-chart-card:has(#admin-overview-chart)::before,
.dark-only .bn-chart-card:has(#admin-booking-trend-chart)::before,
.dark-only .bn-chart-card:has(#admin-booking-status-chart)::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(86, 204, 242, 0.75) 50%,
        transparent 100%);
}

@keyframes bnChartTopSweep {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Stagger the sweep so the three don't fire at the same time */
.bn-chart-card:has(#admin-booking-trend-chart)::before  { animation-delay: 2.3s; }
.bn-chart-card:has(#admin-booking-status-chart)::before { animation-delay: 4.6s; }

@media (prefers-reduced-motion: reduce) {
    .bn-chart-card:has(#admin-overview-chart)::before,
    .bn-chart-card:has(#admin-booking-trend-chart)::before,
    .bn-chart-card:has(#admin-booking-status-chart)::before { animation: none !important; }
}

/* =============================================================
   IN-CHART ANIMATIONS · scoped to the 3 chart SVGs themselves
   ============================================================= */

/* ── Booking Trend: lines flow forward (marching ants effect) +
   markers pulse and glow continuously. ───────────────────────── */
#admin-booking-trend-chart .apexcharts-line {
    stroke-dasharray: 14 6 !important;
    animation: bnLineFlow 1.8s linear infinite;
}
@keyframes bnLineFlow {
    to { stroke-dashoffset: -20; }
}

#admin-booking-trend-chart .apexcharts-marker {
    transform-box: fill-box;
    transform-origin: center;
    animation: bnMarkerPulse 1.8s ease-in-out infinite;
}
@keyframes bnMarkerPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.45); opacity: 0.65; }
}

/* Subtle area fill breathing */
#admin-booking-trend-chart .apexcharts-area {
    animation: bnAreaBreath 4s ease-in-out infinite;
}
@keyframes bnAreaBreath {
    0%, 100% { fill-opacity: 0.55; }
    50%      { fill-opacity: 0.75; }
}

/* ── Platform Overview: each bar pulses in a chasing sequence
   (creates a wave running through the bars forever). ───────── */
#admin-overview-chart .apexcharts-bar-area {
    transform-box: fill-box;
    transform-origin: left center;
    animation: bnBarChase 2.4s ease-in-out infinite;
    will-change: transform, filter;
}
#admin-overview-chart .apexcharts-bar-area:nth-of-type(1) { animation-delay: 0s;    }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(2) { animation-delay: 0.18s; }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(3) { animation-delay: 0.36s; }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(4) { animation-delay: 0.54s; }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(5) { animation-delay: 0.72s; }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(6) { animation-delay: 0.90s; }
#admin-overview-chart .apexcharts-bar-area:nth-of-type(7) { animation-delay: 1.08s; }
@keyframes bnBarChase {
    0%, 100% { transform: scaleX(1);    filter: brightness(1); }
    50%      { transform: scaleX(1.04); filter: brightness(1.18) drop-shadow(0 0 6px currentColor); }
}

/* ── Booking Mix (Radial Bar): each ring breathes with a glow +
   oscillating stroke-dashoffset so it looks like it's drawing. ─ */
#admin-booking-status-chart .apexcharts-radialbar-area {
    animation: bnRadialGlow 2.6s ease-in-out infinite;
    will-change: filter, stroke-dashoffset;
}
#admin-booking-status-chart .apexcharts-radial-series:nth-of-type(1) .apexcharts-radialbar-area { animation-delay: 0s;    }
#admin-booking-status-chart .apexcharts-radial-series:nth-of-type(2) .apexcharts-radialbar-area { animation-delay: 0.4s;  }
#admin-booking-status-chart .apexcharts-radial-series:nth-of-type(3) .apexcharts-radialbar-area { animation-delay: 0.8s;  }
#admin-booking-status-chart .apexcharts-radial-series:nth-of-type(4) .apexcharts-radialbar-area { animation-delay: 1.2s;  }
@keyframes bnRadialGlow {
    0%, 100% { filter: drop-shadow(0 0 2px currentColor) brightness(1);    }
    50%      { filter: drop-shadow(0 0 12px currentColor) brightness(1.18); }
}

/* The radial track (inactive ring) gets a subtle slow rotation
   so the empty area itself feels alive. */
#admin-booking-status-chart .apexcharts-datalabels-group {
    animation: bnRadialCenterPulse 3.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes bnRadialCenterPulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.92; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    #admin-booking-trend-chart .apexcharts-line,
    #admin-booking-trend-chart .apexcharts-marker,
    #admin-booking-trend-chart .apexcharts-area,
    #admin-overview-chart .apexcharts-bar-area,
    #admin-booking-status-chart .apexcharts-radialbar-area,
    #admin-booking-status-chart .apexcharts-datalabels-group { animation: none !important; }
}

/* ── Hourly Distribution: stadium wave running through all 24 bars
   (each bar pulses scaleY + glow, delays cascade left → right). ─ */
#admin-hourly-chart .apexcharts-bar-area {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: bnHourlyWave 2.6s ease-in-out infinite;
    will-change: transform, filter;
}
@keyframes bnHourlyWave {
    0%, 100% { transform: scaleY(1);    filter: brightness(1); }
    50%      { transform: scaleY(1.08); filter: brightness(1.22) drop-shadow(0 0 6px currentColor); }
}
/* Cascade delay so the wave travels across the 24 hour bars */
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(1)  { animation-delay: 0s;    }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(2)  { animation-delay: 0.06s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(3)  { animation-delay: 0.12s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(4)  { animation-delay: 0.18s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(5)  { animation-delay: 0.24s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(6)  { animation-delay: 0.30s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(7)  { animation-delay: 0.36s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(8)  { animation-delay: 0.42s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(9)  { animation-delay: 0.48s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(10) { animation-delay: 0.54s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(11) { animation-delay: 0.60s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(12) { animation-delay: 0.66s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(13) { animation-delay: 0.72s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(14) { animation-delay: 0.78s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(15) { animation-delay: 0.84s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(16) { animation-delay: 0.90s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(17) { animation-delay: 0.96s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(18) { animation-delay: 1.02s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(19) { animation-delay: 1.08s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(20) { animation-delay: 1.14s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(21) { animation-delay: 1.20s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(22) { animation-delay: 1.26s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(23) { animation-delay: 1.32s; }
#admin-hourly-chart .apexcharts-bar-area:nth-of-type(24) { animation-delay: 1.38s; }

@media (prefers-reduced-motion: reduce) {
    #admin-hourly-chart .apexcharts-bar-area { animation: none !important; }
}