/**
 * Clean Override CSS
 * Removes glow effects, gradients, blur, and simplifies UI
 */

/* ==================== REMOVE ALL EFFECTS ==================== */

/* Remove all shadows */
*,
*::before,
*::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Remove all backdrop blur effects */
* {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==================== SIMPLIFIED VARIABLES ==================== */

:root {
    /* Remove shadow variables */
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
}

/* ==================== REPLACE GRADIENTS WITH SOLID COLORS ==================== */

/* Replace gradient backgrounds with solid colors */
[style*="gradient"],
.gradient,
.bg-gradient {
    background-image: none !important;
    background: var(--bg-secondary) !important;
}

/* Buttons - solid colors only */
.btn,
button {
    background-image: none !important;
}

.btn-primary {
    background: var(--accent) !important;
}

.btn-primary:hover {
    background: var(--accent-hover) !important;
}

.btn-danger {
    background: var(--danger) !important;
}

.btn-success {
    background: var(--success) !important;
}

.btn-ghost {
    background: transparent !important;
}

.btn-ghost:hover {
    background: var(--bg-hover) !important;
}

/* ==================== SIMPLIFIED CLIP CARDS ==================== */

.clip-card,
.clip-card-enhanced {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
    transition: none !important;
}

.clip-card:hover,
.clip-card-enhanced:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    transform: none !important;
}

/* Hide extra badges and stats on clip cards */
.clip-quality-badge,
.clip-mode-badge,
.clip-archetype-badge,
.viral-score-badge,
.hype-indicator,
.clip-score-mini {
    display: none !important;
}

/* Simplify clip card header */
.clip-header {
    gap: 8px !important;
}

/* Keep only essential badges */
.platform-badge {
    background: var(--bg-tertiary) !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    border-radius: 4px !important;
}

.platform-badge.twitch {
    background: var(--twitch-soft) !important;
    color: var(--twitch) !important;
}

.platform-badge.kick {
    background: var(--kick-soft) !important;
    color: var(--kick) !important;
}

/* ==================== SIMPLIFIED UI ELEMENTS ==================== */

/* Sidebar */
.sidebar {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border) !important;
}

.sidebar-nav-item {
    background: transparent !important;
    transition: none !important;
}

.sidebar-nav-item:hover {
    background: var(--bg-hover) !important;
}

.sidebar-nav-item.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Cards and containers */
.card,
.stats-card,
.section-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
}

/* Topbar */
.topbar {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Modals and dialogs */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
}

.modal,
.dialog {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
}

/* Input fields */
input,
textarea,
select {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}

/* Remove glow on focus */
input:focus,
textarea:focus,
select:focus,
button:focus {
    box-shadow: none !important;
}

/* Badges */
.badge {
    background: var(--bg-tertiary) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Toggle switches */
.toggle-switch {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border) !important;
}

.toggle-switch.active {
    background: var(--accent) !important;
}

/* Tooltips */
.tooltip {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
}

/* Tabs */
.tabs {
    border-bottom: 1px solid var(--border) !important;
}

.tab {
    background: transparent !important;
}

.tab:hover {
    background: var(--bg-hover) !important;
}

.tab.active {
    background: transparent !important;
    border-bottom: 2px solid var(--accent) !important;
}

/* Progress bars */
.progress-bar {
    background: var(--bg-tertiary) !important;
}

.progress-fill {
    background: var(--accent) !important;
}

/* Remove animations */
* {
    animation: none !important;
    transition: none !important;
}

/* Allow only simple hover background changes */
.btn,
.sidebar-nav-item,
.tab {
    transition: background-color 0.15s ease !important;
}

/* ==================== CLEAN SCROLLBARS ==================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}