/* ========================================================================== */
/* Plat_MonsterScreen - Scoped Theme Override (Purple)                       */
/* Base CSS is provided by Plat_Monster (orange). This file ONLY overrides   */
/* colors, shadows, and gradients scoped under .screen-theme.                */
/* ========================================================================== */


/* ========== Section 1: Theme Variables ========== */

.screen-theme {
    --primary-color: #7B2D8E;
    --secondary-color: #333333;
    --primary-gradient: linear-gradient(135deg, #7B2D8E, #2563EB);
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-card: #242424;
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #444444;
    --border-glow: rgba(123, 45, 142, 0.3);
    --input-bg: #3a3a3a;
    --topbar-height: 60px;
    --page-header-height: 35px;
}


/* ========== Section 2: Light Mode Variables ========== */

.light-mode .screen-theme {
    --bg-primary: #BFBFBF;
    --bg-secondary: #ffffff;
    --bg-card: #f8f8fa;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-glass-hover: rgba(255, 255, 255, 0.85);
    --secondary-color: #e8eaed;
    --text-primary: #333333;
    --text-secondary: #888888;
    --border-color: #e0e0e0;
    --border-glow: rgba(123, 45, 142, 0.2);
    --input-bg: #ffffff;
}


/* ========== Section 3: Scrollbar Override (scoped) ========== */

.screen-theme *::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
.screen-theme *::-webkit-scrollbar-track { background: var(--input-bg) !important; border-radius: 3px !important; }
.screen-theme *::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #7B2D8E, #2563EB) !important; border-radius: 3px !important; }
.screen-theme *::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #9B4DAE, #3B7BFF) !important; }


/* ========== Section 4: Scoped Hardcoded Color Overrides ========== */

/* ---------- Submenu ---------- */

.screen-theme .submenu-link:hover {
    background-color: rgba(123, 45, 142, 0.12);
}

/* ---------- Spinner Ring ---------- */

.screen-theme .spinner-ring {
    background: conic-gradient(from 0deg, #7B2D8E, #9B4DAE, #2563EB, #7B2D8E);
    filter: drop-shadow(0 0 12px rgba(123, 45, 142, 0.3));
}

/* ---------- Export Modal ---------- */

.screen-theme .export-modal {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(123, 45, 142, 0.08);
}

.screen-theme .export-modal-icon {
    background: rgba(123, 45, 142, 0.1);
    border: 1px solid rgba(123, 45, 142, 0.2);
}

.screen-theme .export-spinner-ring {
    background: conic-gradient(from 0deg, #7B2D8E, #9B4DAE, #2563EB, #7B2D8E);
    filter: drop-shadow(0 0 8px rgba(123, 45, 142, 0.25));
}

/* ---------- Custom Dropdown ---------- */

.screen-theme .custom-dropdown-item.highlighted {
    background-color: rgba(123, 45, 142, 0.12);
    color: var(--primary-color);
}

/* ---------- Filter Inputs (legacy select/text) ---------- */

.screen-theme .filter-group select:focus,
.screen-theme .filter-group input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.1);
}

/* ---------- Execute Button ---------- */

.screen-theme .btn-execute:hover {
    box-shadow: 0 6px 16px rgba(123, 45, 142, 0.35);
}

/* ---------- Dashboard Cards ---------- */

.screen-theme .dash-card:hover {
    border-color: rgba(123, 45, 142, 0.4);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(123, 45, 142, 0.1),
        0 0 20px rgba(123, 45, 142, 0.08);
}

/* ---------- Tables ---------- */

.screen-theme .table-simple tr:hover td {
    background: rgba(123, 45, 142, 0.06);
}

.screen-theme .ranking-table tr:hover td {
    background: rgba(123, 45, 142, 0.06);
}

/* ---------- Primary Gradient Button ---------- */

.screen-theme .btn-primary-gradient:hover {
    box-shadow: 0 4px 12px rgba(123, 45, 142, 0.3);
}

/* ---------- Modern Input ---------- */

.screen-theme .modern-input:focus {
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.1);
}

/* ---------- Modern Select ---------- */

.screen-theme .modern-select:focus {
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.1);
}

/* ---------- Calendar Panel ---------- */

.screen-theme .calendar-panel {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(123, 45, 142, 0.1);
}

/* Renamed keyframes for screen-theme */
@keyframes screen-glowPulse {
    0% { box-shadow: 0 0 20px rgba(123, 45, 142, 0.8), 0 0 40px rgba(37, 99, 235, 0.5); }
    100% { box-shadow: 0 0 6px rgba(123, 45, 142, 0.25), 0 0 12px rgba(37, 99, 235, 0.1); }
}

.screen-theme .calendar-panel::before {
    animation: screen-glowPulse 1.5s ease-out;
}

@keyframes screen-glowFlash {
    from { box-shadow: 0 0 6px rgba(123, 45, 142, 0.25), 0 0 12px rgba(37, 99, 235, 0.1); }
    to { box-shadow: 0 0 25px rgba(123, 45, 142, 0.9), 0 0 50px rgba(37, 99, 235, 0.6); }
}

.screen-theme .calendar-panel.closing::before {
    animation: screen-glowFlash 0.3s ease-out both;
}

/* ---------- Calendar Cards ---------- */

.screen-theme .calendar-card:hover {
    border-color: rgba(123, 45, 142, 0.3);
}

/* ---------- Calendar Update Info ---------- */

.screen-theme .calendar-update-info {
    background: rgba(123, 45, 142, 0.08);
    border: 1px solid rgba(123, 45, 142, 0.2);
}

/* ---------- Card Hero Badge ---------- */

.screen-theme .card-hero-badge {
    background: rgba(123, 45, 142, 0.1);
    border: 1px solid rgba(123, 45, 142, 0.25);
}

/* ---------- Autocomplete Input ---------- */

.screen-theme .autocomplete-input:focus {
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.1);
}

/* ---------- Chat Input ---------- */

.screen-theme .chat-input:focus {
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.1);
}

/* ---------- Mini Calendar Day Buttons ---------- */

.screen-theme .dia-btn:hover:not(.empty):not(.selected) {
    background-color: rgba(123, 45, 142, 0.12);
}

.screen-theme .dia-btn.selected {
    box-shadow: 0 2px 8px rgba(123, 45, 142, 0.35);
}

/* ---------- Date Display ---------- */

.screen-theme .modern-date-display:hover {
    box-shadow: 0 0 8px rgba(123, 45, 142, 0.2);
}

/* ---------- Table Responsive Scroll Indicator ---------- */

@media (max-width: 768px) {
    .screen-theme .table-responsive-wt1 {
        background:
            linear-gradient(to right, var(--bg-card) 30%, transparent),
            linear-gradient(to left, var(--bg-card) 30%, transparent),
            linear-gradient(to right, rgba(123,45,142,0.15), transparent 20px),
            linear-gradient(to left, rgba(123,45,142,0.15), transparent 20px);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}