/* ================================================================
   Deyafa Dashboard — Redesign V2: Restaurant Command Center
   Route:   /salesdashboard-redesign-v2
   Scope:   .rd-v2-scope  — zero effect outside this element.
   No business-logic changes. Pure visual layer.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ─── Design tokens ─────────────────────────────────────────── */
.rd-v2-scope {
    /* Core palette — teal/navy primary (distinct from V1's amber) */
    --v2-night:        #080F1C;
    --v2-deep:         #0F1E36;
    --v2-navy:         #1A3355;
    --v2-teal:         #0D9488;
    --v2-teal-l:       #14B8A6;
    --v2-teal-glow:    rgba(13,148,136,.20);
    --v2-teal-muted:   rgba(13,148,136,.10);
    --v2-amber:        #F59E0B;
    --v2-amber-d:      #D97706;
    --v2-amber-glow:   rgba(245,158,11,.18);
    --v2-amber-muted:  rgba(245,158,11,.10);
    --v2-green:        #10B981;
    --v2-green-l:      #ECFDF5;
    --v2-green-border: #A7F3D0;
    --v2-red:          #EF4444;
    --v2-red-l:        #FEF2F2;
    --v2-red-border:   #FECACA;
    --v2-orange:       #F97316;
    --v2-purple:       #8B5CF6;
    --v2-cyan:         #06B6D4;
    --v2-gold:         #EAB308;
    --v2-silver:       #94A3B8;
    --v2-bronze:       #A16207;

    /* Surfaces */
    --v2-bg:           #EDE8DF;
    --v2-surface:      #FDFAF6;
    --v2-surface-2:    #F8F3EE;
    --v2-border:       #D6CEBE;
    --v2-border-l:     #E8E2D9;

    /* Typography */
    --v2-text-1:       #0F172A;
    --v2-text-2:       #374151;
    --v2-text-3:       #94A3B8;
    --v2-text-dark:    #F1F5F9;
    --v2-text-muted-dark: rgba(241,245,249,.50);

    /* Shape */
    --v2-radius:       14px;
    --v2-radius-lg:    22px;
    --v2-shadow-sm:    0 1px 4px rgba(8,15,28,.06), 0 1px 2px rgba(8,15,28,.04);
    --v2-shadow-md:    0 6px 24px rgba(8,15,28,.10), 0 2px 8px rgba(8,15,28,.06);
    --v2-shadow-lg:    0 20px 48px rgba(8,15,28,.18), 0 4px 12px rgba(8,15,28,.08);
    --v2-shadow-hero:  0 24px 60px rgba(8,15,28,.30);

    /* Override shared tokens */
    --blue:            #0D9488;
    --blue-light:      #14B8A6;
    --navy:            #0F1E36;
    --navy-light:      #1A3355;
    --navy-hover:      #274060;
    --green:           #10B981;
    --orange:          #F97316;
    --red:             #EF4444;
    --bg:              #EDE8DF;
    --surface:         #FDFAF6;
    --border:          #D6CEBE;
    --border-light:    #E8E2D9;
    --text-1:          #0F172A;
    --text-2:          #374151;
    --text-3:          #94A3B8;
    --radius-sm:       10px;
    --radius-md:       14px;
    --shadow-sm:       0 1px 4px rgba(8,15,28,.06);
    --shadow-md:       0 6px 24px rgba(8,15,28,.10);

    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--v2-bg);
}

/* ═══════════════════════════════════════════════════════════════
   PREVIEW BANNER
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-preview-banner {
    background: linear-gradient(90deg, var(--v2-teal) 0%, var(--v2-navy) 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 14px 14px;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(13,148,136,.35);
}
.rd-v2-scope .v2-banner-left {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    font-weight: 700;
}
.rd-v2-scope .v2-banner-left i { color: rgba(255,255,255,.8); }
.rd-v2-scope .v2-banner-badge {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.rd-v2-scope .v2-banner-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rd-v2-scope .v2-banner-links a {
    color: rgba(255,255,255,.7);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color .15s;
}
.rd-v2-scope .v2-banner-links a:hover { color: #fff; }
.rd-v2-scope .v2-banner-sep {
    color: rgba(255,255,255,.3);
    font-size: .7rem;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — Restaurant Command Center
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-hero {
    border-radius: var(--v2-radius-lg);
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--v2-shadow-hero);
    position: relative;
    background:
        radial-gradient(ellipse 800px 500px at -15% 120%, rgba(13,148,136,.30) 0%, transparent 55%),
        radial-gradient(ellipse 600px 400px at 115% -15%, rgba(245,158,11,.22) 0%, transparent 55%),
        radial-gradient(ellipse 500px 400px at 55% 110%, rgba(26,51,85,.25) 0%, transparent 60%),
        linear-gradient(155deg, #080F1C 0%, #0D1F2B 50%, #0B1A20 100%);
    border: 1px solid rgba(255,255,255,.06);
}
/* Hex grid texture */
.rd-v2-scope .v2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1px at center, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
/* Top bar — brand + actions */
.rd-v2-scope .v2-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.75rem 2rem 1.25rem 2rem;
    position: relative;
    z-index: 1;
}
.rd-v2-scope .v2-hero-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rd-v2-scope .v2-hero-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(255,255,255,.08);
    padding: 5px;
    flex-shrink: 0;
}
.rd-v2-scope .v2-hero-logo-fallback {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0D9488 0%, #1A3355 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(13,148,136,.40);
}
.rd-v2-scope .v2-hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 3px 0;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.rd-v2-scope .v2-hero-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    margin: 0;
}
.rd-v2-scope .v2-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.rd-v2-scope .v2-live-badge {
    background: rgba(16,185,129,.18);
    border: 1px solid rgba(16,185,129,.30);
    color: #34D399;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-v2-scope .v2-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #34D399;
    animation: v2-pulse 1.8s ease-in-out infinite;
}
@keyframes v2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.8); }
}
.rd-v2-scope .v2-date-chip {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
    font-size: .71rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 5px 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-v2-scope .v2-date-chip i { color: var(--v2-teal-l); }
.rd-v2-scope .v2-btn-export {
    background: var(--v2-teal);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 6px 16px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 16px rgba(13,148,136,.45);
    transition: background .15s, transform .15s;
}
.rd-v2-scope .v2-btn-export:hover { background: var(--v2-teal-l); transform: translateY(-1px); }

/* Divider line inside hero */
.rd-v2-scope .v2-hero-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.10), transparent);
    margin: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Metrics chips row */
.rd-v2-scope .v2-hero-chips {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 2rem 1.5rem 2rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.rd-v2-scope .v2-hero-chip {
    flex: 1;
    min-width: 110px;
    padding: .85rem 1.1rem;
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rd-v2-scope .v2-hero-chip:last-child { border-right: none; }
.rd-v2-scope .v2-chip-label {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 5px;
}
.rd-v2-scope .v2-chip-label i { color: var(--v2-teal-l); font-size: .6rem; }
.rd-v2-scope .v2-chip-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.65rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
}
.rd-v2-scope .v2-chip-val.loading-shimmer { color: rgba(255,255,255,.15); }

/* Filter row inside hero */
.rd-v2-scope .v2-hero-filters-row {
    background: rgba(255,255,255,.04);
    border-top: 1px solid rgba(255,255,255,.07);
    padding: .8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.rd-v2-scope .v2-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-v2-scope .v2-filter-label {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rd-v2-scope .v2-filter-label i { color: var(--v2-teal-l); font-size: .65rem; }
.rd-v2-scope .v2-filter-select {
    height: 30px;
    font-size: .79rem;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    min-width: 105px;
    max-width: 150px;
    padding: 0 8px;
    cursor: pointer;
    outline: none;
}
.rd-v2-scope .v2-filter-select:focus {
    border-color: rgba(13,148,136,.55) !important;
    box-shadow: 0 0 0 2px rgba(13,148,136,.20) !important;
}
.rd-v2-scope .v2-filter-select option { background: #0F1E36; color: #fff; }
.rd-v2-scope .v2-filter-refresh {
    font-size: .7rem;
    color: rgba(255,255,255,.30);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS — Dark navy operations board panels
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-section-hdr {
    background: var(--v2-deep);
    border-radius: var(--v2-radius);
    padding: .95rem 1.4rem;
    margin: 28px 0 14px 0;
    border-left: 4px solid var(--v2-teal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(8,15,28,.15);
}
.rd-v2-scope .v2-section-hdr-inner {
    display: flex;
    align-items: center;
    gap: 13px;
}
.rd-v2-scope .v2-section-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
}
.rd-v2-scope .v2-section-title {
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px 0;
    letter-spacing: -.01em;
}
.rd-v2-scope .v2-section-desc {
    font-size: .68rem;
    color: rgba(255,255,255,.38);
    margin: 0;
}
.rd-v2-scope .v2-section-badge {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.55);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   KPI STORY CARDS — Full-width gradient banner style
   Dramatically different from V1's floating-icon approach
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .kpi-v2 {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: var(--v2-radius) !important;
    border: 1px solid var(--v2-border) !important;
    background: var(--v2-surface) !important;
    box-shadow: var(--v2-shadow-sm) !important;
    min-height: 195px !important;
    position: relative !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    border-left: none !important;
}
.rd-v2-scope .kpi-v2:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--v2-shadow-md) !important;
}
/* Full-width gradient banner at top */
.rd-v2-scope .kpi-v2-icon {
    width: 100% !important;
    height: 76px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    font-size: 1.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}
/* Icon shimmer effect */
.rd-v2-scope .kpi-v2-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
    pointer-events: none;
}
/* Body */
.rd-v2-scope .kpi-v2-body {
    padding: .95rem 1.2rem 1.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex: 1 !important;
}
/* Big number — show first */
.rd-v2-scope .kpi-v2-value {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 2.3rem !important;
    font-weight: 900 !important;
    color: var(--v2-text-1) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    margin: 0 0 7px 0 !important;
    display: block !important;
    order: 1 !important;
}
/* Label — below number */
.rd-v2-scope .kpi-v2-label {
    font-size: .61rem !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    color: var(--v2-text-3) !important;
    margin: 0 !important;
    display: block !important;
    order: 2 !important;
}
/* Sub-text helper */
.rd-v2-scope .kpi-v2-sub {
    font-size: .73rem !important;
    color: var(--v2-text-3) !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--v2-border-l) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    order: 3 !important;
    margin-top: 12px !important;
}
.rd-v2-scope .kpi-v2-nodata {
    font-size: .62rem;
    color: var(--v2-text-3);
    background: transparent;
    border: none;
    padding: 2px 0;
    order: 3;
}

/* ═══════════════════════════════════════════════════════════════
   OPERATION CHANNEL TILES — Square / stacked layout
   Completely different from V1's horizontal card style
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-channel-tile {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 1.4rem 1.2rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    min-height: 185px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--v2-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.rd-v2-scope .v2-channel-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-md);
}
/* Top colored strip */
.rd-v2-scope .v2-channel-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--v2-radius) var(--v2-radius) 0 0;
}
.rd-v2-scope .v2-ct-dining::before   { background: #10B981; }
.rd-v2-scope .v2-ct-delivery::before { background: #F97316; }
.rd-v2-scope .v2-ct-carryout::before { background: #06B6D4; }
.rd-v2-scope .v2-ct-carsvc::before   { background: #F59E0B; }

/* Channel icon */
.rd-v2-scope .v2-channel-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 2px;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    flex-shrink: 0;
}
.rd-v2-scope .v2-channel-label {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--v2-text-3);
    margin: 0;
}
.rd-v2-scope .v2-channel-val {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--v2-text-1);
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0;
}
/* Pct pill + bar row */
.rd-v2-scope .v2-channel-pct-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}
.rd-v2-scope .v2-channel-pct-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    align-self: center;
}
.rd-v2-scope .v2-ct-dining   .v2-channel-pct-badge { background: #ECFDF5; color: #059669; }
.rd-v2-scope .v2-ct-delivery .v2-channel-pct-badge { background: #FFF7ED; color: #C2410C; }
.rd-v2-scope .v2-ct-carryout .v2-channel-pct-badge { background: #ECFEFF; color: #0891B2; }
.rd-v2-scope .v2-ct-carsvc   .v2-channel-pct-badge { background: #FFFBEB; color: #B45309; }
.rd-v2-scope .v2-channel-bar-track {
    width: 100%;
    height: 5px;
    background: var(--v2-border-l);
    border-radius: 99px;
    overflow: hidden;
}
.rd-v2-scope .v2-channel-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .7s cubic-bezier(.4,0,.2,1);
}
.rd-v2-scope .v2-ct-dining   .v2-channel-bar-fill { background: #10B981; }
.rd-v2-scope .v2-ct-delivery .v2-channel-bar-fill { background: #F97316; }
.rd-v2-scope .v2-ct-carryout .v2-channel-bar-fill { background: #06B6D4; }
.rd-v2-scope .v2-ct-carsvc   .v2-channel-bar-fill { background: #F59E0B; }

/* ═══════════════════════════════════════════════════════════════
   CARDS (general)
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-sm);
    overflow: hidden;
}
.rd-v2-scope .v2-card-hdr {
    padding: .9rem 1.2rem;
    border-bottom: 1px solid var(--v2-border-l);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.rd-v2-scope .v2-card-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--v2-text-1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.rd-v2-scope .v2-card-title-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    flex-shrink: 0;
}
.rd-v2-scope .v2-card-body { padding: .9rem 1rem; }

/* Selects inside cards */
.rd-v2-scope .v2-card-hdr .form-select-sm,
.rd-v2-scope .form-select-sm {
    border-radius: 8px !important;
    border-color: var(--v2-border) !important;
    background: var(--v2-bg) !important;
    font-size: .78rem;
    height: 30px;
    color: var(--v2-text-1);
}
.rd-v2-scope .form-select:focus, .rd-v2-scope .form-select-sm:focus {
    border-color: var(--v2-teal) !important;
    box-shadow: 0 0 0 .15rem rgba(13,148,136,.20) !important;
}

/* Existing ds-card alias (used by components) */
.rd-v2-scope .ds-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow-sm); overflow: hidden; }
.rd-v2-scope .ds-card-header { padding: .9rem 1.2rem; border-bottom: 1px solid var(--v2-border-l); background: var(--v2-surface); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.rd-v2-scope .ds-card-title { font-size: .88rem; font-weight: 700; color: var(--v2-text-1); margin: 0; display: flex; align-items: center; gap: 7px; }
.rd-v2-scope .ds-card-body { padding: .9rem 1rem; }

/* ═══════════════════════════════════════════════════════════════
   LOADING
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .spinner-border { color: var(--v2-teal) !important; }

/* ═══════════════════════════════════════════════════════════════
   BEST SELLERS LEADERBOARD styling
   Top-3 rank medal decorations on the wrapper
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-leaderboard-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-sm);
    overflow: hidden;
}
.rd-v2-scope .v2-lb-header {
    background: linear-gradient(90deg, var(--v2-deep) 0%, var(--v2-navy) 100%);
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid var(--v2-amber);
}
.rd-v2-scope .v2-lb-title {
    font-size: .9rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.rd-v2-scope .v2-lb-title i { color: var(--v2-amber); }
.rd-v2-scope .v2-lb-medals {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rd-v2-scope .v2-medal {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 900;
}
.rd-v2-scope .v2-medal-1 { background: var(--v2-gold); color: #fff; }
.rd-v2-scope .v2-medal-2 { background: var(--v2-silver); color: #fff; }
.rd-v2-scope .v2-medal-3 { background: #CD7F32; color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   BRANCH OPERATIONS BOARD
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .v2-ops-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-sm);
    overflow: hidden;
}
.rd-v2-scope .v2-ops-header {
    background: linear-gradient(90deg, #0F1E36 0%, #1A3355 100%);
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid var(--v2-teal);
}
.rd-v2-scope .v2-ops-title {
    font-size: .9rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.rd-v2-scope .v2-ops-title i { color: var(--v2-teal-l); }

/* Restyle the embedded branch-table */
.rd-v2-scope .branch-table thead th {
    background: var(--v2-deep);
    color: rgba(255,255,255,.85);
    font-size: .64rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 10px 14px;
}
.rd-v2-scope .branch-table tbody .bt-row { border-bottom-color: var(--v2-border-l); }
.rd-v2-scope .branch-table tbody .bt-row:hover { background: var(--v2-border-l); }
.rd-v2-scope .bt-branch-name { font-weight: 700; font-size: .86rem; color: var(--v2-text-1); }
.rd-v2-scope .status-online  { background: #ECFDF5; color: #059669; border-color: var(--v2-green-border); }
.rd-v2-scope .status-delayed { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.rd-v2-scope .status-offline { background: var(--v2-red-l); color: #DC2626; border-color: var(--v2-red-border); }
.rd-v2-scope .btn-branch-detail {
    background: var(--v2-teal);
    border-color: var(--v2-teal);
    border-radius: 8px;
    font-size: .72rem;
    padding: 4px 12px;
    font-weight: 600;
}
.rd-v2-scope .btn-branch-detail:hover { background: var(--v2-teal-l); }

/* ═══════════════════════════════════════════════════════════════
   PAYMENT & ORDER CHANNEL TABLES
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .pt-table thead tr,
.rd-v2-scope .pm-grouped-table th {
    background: var(--v2-deep);
}
.rd-v2-scope .pt-table thead th { color: rgba(255,255,255,.85); }
.rd-v2-scope .pt-type-badge {
    background: var(--v2-teal-muted);
    border-color: rgba(13,148,136,.25);
    color: var(--v2-teal);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 6px;
}
.rd-v2-scope .pm-summary-strip { background: var(--v2-border-l); border-bottom-color: var(--v2-border); }
.rd-v2-scope .pm-sum-item { border-color: var(--v2-border); background: var(--v2-surface); }
.rd-v2-scope .pm-sum-label { color: var(--v2-text-3); }
.rd-v2-scope .pm-sum-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.rd-v2-scope .pm-sum-val.val-cash   { color: var(--v2-green); }
.rd-v2-scope .pm-sum-val.val-credit { color: var(--v2-teal); }
.rd-v2-scope .pm-table-progress-bar { background: var(--v2-teal); }

/* ═══════════════════════════════════════════════════════════════
   RANKED ITEMS
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .ri-bar { background: linear-gradient(to right, var(--v2-teal), var(--v2-amber)); }
.rd-v2-scope .ri-rank { background: var(--v2-deep); border-radius: 6px; font-size: .64rem; color: rgba(255,255,255,.8); }
.rd-v2-scope .ri-name { font-weight: 600; color: var(--v2-text-1); }
.rd-v2-scope .ri-qty  { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   DISCOUNTS & VOIDS
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .ic-bar-disc { background: linear-gradient(to right, var(--v2-teal), var(--v2-amber)); }
.rd-v2-scope .ic-bar-void { background: linear-gradient(to right, var(--v2-red), #7F1D1D); }
.rd-v2-scope .ic-disc-amt { color: var(--v2-teal); }
.rd-v2-scope .ic-void-amt { color: var(--v2-red); }
.rd-v2-scope .ic-total { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════
   HEALTH BADGES
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .health-badge-ok   { background: #ECFDF5; color: #059669; border-color: var(--v2-green-border); }
.rd-v2-scope .health-badge-warn { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.rd-v2-scope .health-badge-err  { background: var(--v2-red-l); color: #DC2626; border-color: var(--v2-red-border); }

/* ═══════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .drawer-header { background: var(--v2-deep); }
.rd-v2-scope .drawer-close { border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════
   SYNCFUSION GRID
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope .e-pager .e-currentitem { background: var(--v2-teal) !important; }
.rd-v2-scope .e-grid .e-row:hover .e-rowcell { background: var(--v2-border-l) !important; }

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
.rd-v2-scope ::-webkit-scrollbar { width: 5px; height: 5px; }
.rd-v2-scope ::-webkit-scrollbar-track { background: var(--v2-border-l); border-radius: 99px; }
.rd-v2-scope ::-webkit-scrollbar-thumb { background: var(--v2-border); border-radius: 99px; }
.rd-v2-scope ::-webkit-scrollbar-thumb:hover { background: var(--v2-teal); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rd-v2-scope .v2-hero-top { padding: 1.25rem 1.2rem .9rem; }
    .rd-v2-scope .v2-hero-chips { padding: .9rem 1.2rem 1rem; }
    .rd-v2-scope .v2-hero-chip { min-width: 90px; }
    .rd-v2-scope .v2-chip-val { font-size: 1.3rem; }
    .rd-v2-scope .v2-hero-filters-row { padding: .75rem 1.2rem; }
    .rd-v2-scope .kpi-v2-value { font-size: 1.9rem !important; }
    .rd-v2-scope .v2-channel-tile { min-height: 160px; }
}