/* |--------------------------------------------------------------------------
   | BELLINK LIVE 2026 - MASTER ADMIN UI (STABLE RELEASE V38)
   | Focus: Custom Artigiano Glass Scrollbars & Absolute Navbar Centering
   | Project: Slush Casino / Artigiano Branding
   |-------------------------------------------------------------------------- */

:root {
    --gold: #d4af37;
    --gold-glow: rgba(212, 175, 55, 0.4);
    --midnight: #0f172a;
    --midnight-glass: rgba(15, 23, 42, 0.95);
    --indigo: #6366f1;
    --emerald-sage: #10b981; /* Artigiano Sage */
    --rose-fyre: #f43f5e;
    --glass-border: rgba(255, 255, 255, 0.1);
    --sidebar-width: 280px; /* Locked barrier for S23 Ultra */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* |--------------------------------------------------------------------------
   | 0. CUSTOM ARTIGIANO GLASS SCROLLBARS (The "Spice" Update)
   |-------------------------------------------------------------------------- */
/* Target Webkit browsers (Chrome, Edge, Safari, Samsung Browser) */
::-webkit-scrollbar {
    width: 6px; /* Slim profile */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.1); /* Transparent Midnight */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--indigo), var(--midnight));
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-smooth);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold); /* Turns Gold on interaction */
    box-shadow: 0 0 10px var(--gold-glow);
}

/* Specific Sidebar Scrollbar override for maximum theme sync */
.main-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.4), rgba(15, 23, 42, 0.8));
}

/* |--------------------------------------------------------------------------
   | 1. BRANDING & NAVBAR (Absolute Centering & Gradient Typography)
   |-------------------------------------------------------------------------- */
.main-header { position: relative; z-index: 100000 !important; }

.main-header .logo {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed !important; top: 0; left: 0;
    width: var(--sidebar-width) !important; height: 60px !important;
    z-index: 100001 !important; background: var(--midnight) !important;
    border-bottom: 2px solid var(--gold-glow) !important;
    visibility: visible !important;
}

.site-navbar-title, .mainsvet-header, .main-header .logo .logo-lg {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #ffffff 0%, #6366f1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.15));
}

/* Absolute Centering for Bellink Live Back Office */
.site-navbar-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 14px !important;
    letter-spacing: 3px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.main-header .logo .logo-lg { font-size: 18px !important; margin: 0 !important; }

/* |--------------------------------------------------------------------------
   | 2. JITTER-FREE SIDEBAR (Fixed Search Bar Movement)
   |-------------------------------------------------------------------------- */
.main-sidebar, .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    width: var(--sidebar-width) !important; height: 100vh;
    position: fixed; left: 0; top: 0; z-index: 9999;
    padding-top: 75px !important; overflow-y: auto !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.5) !important;
}
/* |--------------------------------------------------------------------------
   | 4. GOLD WHISPER PROFILE PANEL (With Glowing Border)
   |-------------------------------------------------------------------------- */
.main-sidebar .user-panel {
    /* Slightly increased base border opacity so the glow has an anchor */
    border: 1px solid rgba(212, 175, 55, 0.5) !important; 
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(0, 0, 0, 0.2)) !important;
    border-radius: 1.5rem !important; 
    margin: 15px 12px !important;
    padding: 18px !important;
    
    /* Layer 1: The Golden Glow | Layer 2: The Dark Drop Shadow */
    box-shadow: 0 0 15px var(--gold-glow), 0 4px 10px rgba(0, 0, 0, 0.25) !important;
    
    display: block !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-sidebar .user-panel .info { padding-left: 15px !important; }
.main-sidebar .user-panel .info a { font-weight: 900 !important; letter-spacing: 0.5px; color: #ffffff !important; }

/* The Hover State: Make it pop when the mouse hits it */
.main-sidebar .user-panel:hover {
    border: 1px solid rgba(212, 175, 55, 1) !important; /* Solid gold border on hover */
    transform: translateY(-2px);
    
    /* Intensify both the glow and the drop shadow on hover */
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6), 0 10px 20px rgba(0, 0, 0, 0.4) !important;
}

.sidebar-menu li a { 
    display: flex !important; align-items: center !important; 
    color: #94a3b8 !important; padding: 12px 20px !important; 
    border: none !important; 
    transition: var(--transition-smooth) !important;
    margin: 2px 10px !important; border-radius: 12px !important;
}

/* Hover: Inset shadow stops vertical jitter */
.sidebar-menu li.active > a,
.sidebar-menu li:hover > a {
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: inset 0 0 0 1px var(--gold), 0 0 15px var(--gold-glow) !important;
    color: #ffffff !important;
}

.sidebar-menu li:hover i, .sidebar-menu li.active i {
    color: var(--emerald-sage) !important; transform: scale(1.1);
}

/* |--------------------------------------------------------------------------
   | 3. BENTO GRID & SHOP LIST (Restored 3-Column Layout)
   |-------------------------------------------------------------------------- */
.content-wrapper {
    margin-left: var(--sidebar-width) !important; 
    width: calc(100% - var(--sidebar-width)) !important;
    padding: 30px !important; background-color: #f1f5f9 !important;
}

.bento-grid {
    display: flex !important; flex-direction: row !important;
    gap: 15px !important; margin-bottom: 25px !important;
}

.bento-card {
    flex: 1 !important; background: #ffffff !important; border-radius: 16px !important;
    padding: 20px !important; border: 1px solid #f1f5f9 !important;
}

.bento-list-box:not(.bento-rows-container) .bento-row {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important; 
    background: #ffffff !important; border-radius: 24px !important;
    padding: 15px 30px !important; margin-bottom: 15px !important;
    border: 1px solid #e2e8f0 !important;
}

.bento-cluster-main { flex: 0 0 25% !important; display: flex !important; align-items: center !important; gap: 15px !important; }
.bento-cluster-stats { flex: 1 !important; display: flex !important; justify-content: space-around !important; border-left: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; margin: 0 20px !important; }
.bento-cluster-actions { flex: 0 0 35% !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; }
/* |--------------------------------------------------------------------------
   | DISTRIBUTOR TREE ALIGNMENT FIX (ISOLATED)
   |-------------------------------------------------------------------------- */

/* 1. Force the Header Row to match the grid */
.tree-header-row {
    display: grid !important;
    grid-template-columns: 20% 60% 20% !important;
    padding: 0 2.5rem !important; 
    margin-bottom: 15px !important;
    align-items: flex-end; 
}

/* 2. Lock the Bento Rows ONLY inside the Distributor Tree */
.distributor-tree-layout .bento-row {
    display: grid !important;
    grid-template-columns: 20% 60% 20% !important;
    padding: 1.5rem 2.5rem !important;
    align-items: start !important; 
    gap: 20px !important;
}

/* 3. Strip conflicting widths only inside the tree */
.distributor-tree-layout .bento-row > div {
    width: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
}

/* 4. Anchor Column 1 (Distributor) securely to the left */
.distributor-tree-layout .bento-row > div:nth-child(1) {
    align-items: flex-start !important;
    text-align: left !important;
}

/* 5. Anchor Column 2 (Network Structure) securely to the left */
.distributor-tree-layout .bento-row > div:nth-child(2) {
    align-items: flex-start !important; 
    text-align: left !important;
}

/* 6. Anchor Column 3 (Terminal/Management) securely to the right */
.distributor-tree-layout .bento-row > div:nth-child(3) {
    align-items: flex-end !important;
    text-align: right !important;
}
/* |--------------------------------------------------------------------------
   | RED ALERT: LOW CREDIT OVERRIDES
   |-------------------------------------------------------------------------- */
.bento-row.low-credit-warning {
    /* The warning gradient and borders */
    background: linear-gradient(to right, #fff1f2, #ffffff) !important;
    border: 1px solid #fee2e2 !important;
    border-left: 5px solid var(--rose-fyre) !important; /* Thick red edge */
    
    /* The Faded Red Shadow (Layered with a standard soft drop shadow) */
    box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.25), 
                0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
                
    transform: scale(1.002); /* Pops it slightly forward by default */
}

/* Force the text to bleed red and glow slightly */
.bento-row.low-credit-warning .stat-value,
.bento-row.low-credit-warning .text-red-600 { 
    color: var(--rose-fyre) !important; /* Uses your #f43f5e variable */
    font-weight: 600 !important; 
    text-shadow: 0 0 10px rgba(244, 63, 94, 0.2); /* Soft red text glow */
}

/* Make it aggressive on hover */
.bento-row.low-credit-warning:hover {
    border-color: var(--rose-fyre) !important;
    box-shadow: 0 12px 30px -5px rgba(244, 63, 94, 0.4) !important;
    transform: scale(1.01);
}

/* |--------------------------------------------------------------------------
   | 4. STATUS & SHIMMER BUTTONS
   |-------------------------------------------------------------------------- */
.status-active, .label-success { color: #10b981 !important; font-weight: 900 !important; }
.status-blocked, .label-danger { color: #f43f5e !important; font-weight: 900 !important; }

@keyframes shimmerEffect { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Image-Based Management Buttons */
.btn-emerald-custom, .btn-rose-custom {
    animation: none !important; 
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important; 
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; 
    padding: 8px 18px !important; 
    transition: transform 0.2s ease-in-out !important;
}

.btn-emerald-custom { background-image: url('/woocasino/images/success_green.png') !important; }
.btn-emerald-custom:hover { background-image: url('/woocasino/images/success_green_hover.png') !important; transform: scale(1.03); }

.btn-rose-custom { background-image: url('/woocasino/images/success_red.png') !important; }
.btn-rose-custom:hover { background-image: url('/woocasino/images/success_red_hover.png') !important; transform: scale(1.03); }


/* |--------------------------------------------------------------------------
   | 5. MOBILE OVERRIDES (S23 Ultra)
   |-------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .content-wrapper { margin-left: 0 !important; width: 100% !important; }
    .site-navbar-title { position: static !important; transform: none !important; margin: 10px 0 !important; }
    .bento-grid, .bento-row { flex-direction: column !important; }
}
/* |--------------------------------------------------------------------------
   | MODAL STATUS ALERTS (ACTIVE / BLOCKED)
   |-------------------------------------------------------------------------- */
.quick-preview-modal .status-active-text,
.status-active-text { 
    color: var(--emerald-sage) !important; 
    font-weight: 900 !important; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.5); /* Emerald neon glow */
}

/* |--------------------------------------------------------------------------
   | MODAL STATUS ALERTS (ACTIVE / BLOCKED)
   |-------------------------------------------------------------------------- */
.quick-preview-modal .status-active-text,
.status-active-text { 
    color: var(--emerald-sage) !important; 
    font-weight: 600 !important; /* Reduced from 900 */
    text-transform: uppercase; 
    letter-spacing: 1px; 
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4); /* Tightened the glow */
}

.quick-preview-modal .status-blocked-text,
.status-blocked-text { 
    color: var(--rose-fyre) !important; 
    font-weight: 600 !important; /* Reduced from 900 */
    text-transform: uppercase; 
    letter-spacing: 1px; 
    text-shadow: 0 0 8px rgba(244, 63, 94, 0.4); /* Tightened the glow */
}

/* Optional Badges */
.modal-content .badge.status-active-text {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.modal-content .badge.status-blocked-text {
    background: rgba(244, 63, 94, 0.1) !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
/* |--------------------------------------------------------------------------
   | 2026 FRONT LOBBY UPDATE - SIDEBAR ICONS & CLEANUP
   |-------------------------------------------------------------------------- */

/* A. HIDE THE OLD HORIZONTAL MENUS */
.category-panel, 
.providers.ng-isolate-scope, 
.providers-mob.providers-mob--with-text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* B. STYLE THE SIDEBAR PROVIDER ICONS */
.nav-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    gap: 12px; /* Space between icon and text */
}

.sidebar-provider-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    /* Optional: If you want them to glow like your Artigiano Sage icons */
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.2)); 
    transition: transform 0.3s ease;
}

.nav-item:hover .sidebar-provider-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--gold-glow));
}

/* Ensure the text doesn't wrap awkwardly on small screens */
.nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
/* |--------------------------------------------------------------------------
   | 2026 LOBBY TICKER - ARTIGIANO GLASS MARQUEE
   | Focus: Seamless Horizontal Scroll & Brand Integration
   |-------------------------------------------------------------------------- */

.winning-ticker-container {
    display: flex;
    align-items: center;
    background: var(--midnight-glass);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    height: 45px;
    overflow: hidden;
    margin: 10px 0 20px 0;
    width: 100%;
}

.ticker-label {
    background: var(--gold);
    color: var(--midnight);
    font-weight: 900;
    font-size: 10px;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    z-index: 10;
    box-shadow: 10px 0 20px rgba(0,0,0,0.5);
}

.ticker-wrap {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-move {
    display: inline-block;
    padding-left: 100%;
    animation: tickerLoop 30s linear infinite;
}

.ticker-move:hover {
    animation-play-state: paused; /* Pause on hover for easier reading */
}

.ticker-item {
    display: inline-block;
    padding: 0 40px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}

.player-name { font-weight: 700; color: #94a3b8; }
.won-label { color: var(--emerald-sage); font-weight: 900; margin: 0 5px; font-size: 11px; }
.amount { color: var(--gold); font-weight: 800; text-shadow: 0 0 10px var(--gold-glow); }
.game-name { color: #64748b; font-style: italic; margin-left: 5px; }

/* Ticker Animation */
@keyframes tickerLoop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* S23 Ultra Mobile Fix */
@media screen and (max-width: 1024px) {
    .ticker-label { padding: 0 10px; font-size: 8px; }
    .ticker-item { padding: 0 20px; font-size: 11px; }
}