/* =========================
   Toggle Switch Complete Override
   Force all styles with maximum specificity
   ========================= */

/* Base toggle container - force new dimensions */
.floating-settings-panel .toggle-switch,
.settings-group .toggle-switch,
.setting-toggle .toggle-switch,
.toggle-switch {
    position: relative !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    background: rgba(60, 60, 60, 0.8) !important;
    border-radius: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 2px solid rgba(100, 100, 100, 0.5) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Active state */
.floating-settings-panel .toggle-switch.active,
.settings-group .toggle-switch.active,
.setting-toggle .toggle-switch.active,
.toggle-switch.active {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Toggle ball - smaller and properly positioned */
.floating-settings-panel .toggle-switch::before,
.settings-group .toggle-switch::before,
.setting-toggle .toggle-switch::before,
.toggle-switch::before {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    background: linear-gradient(145deg, #ffffff, #f0f0f0) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(0) !important;
}

/* Active ball position - move only 22px (50px container - 18px ball - 6px padding = 26px available, use 22px) */
.floating-settings-panel .toggle-switch.active::before,
.settings-group .toggle-switch.active::before,
.setting-toggle .toggle-switch.active::before,
.toggle-switch.active::before {
    transform: translateX(22px) !important;
    background: linear-gradient(145deg, #ffffff, #fef3f3) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Optimized mode - no animations but keep positions */
body.optimized-mode .floating-settings-panel .toggle-switch,
body.optimized-mode .settings-group .toggle-switch,
body.optimized-mode .setting-toggle .toggle-switch,
body.optimized-mode .toggle-switch {
    transition: none !important;
    background: rgba(60, 60, 60, 0.8) !important;
}

body.optimized-mode .floating-settings-panel .toggle-switch.active,
body.optimized-mode .settings-group .toggle-switch.active,
body.optimized-mode .setting-toggle .toggle-switch.active,
body.optimized-mode .toggle-switch.active {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #dc2626 !important;
    box-shadow: none !important;
}

body.optimized-mode .floating-settings-panel .toggle-switch::before,
body.optimized-mode .settings-group .toggle-switch::before,
body.optimized-mode .setting-toggle .toggle-switch::before,
body.optimized-mode .toggle-switch::before {
    transition: none !important;
    transform: translateX(0) !important;
}

body.optimized-mode .floating-settings-panel .toggle-switch.active::before,
body.optimized-mode .settings-group .toggle-switch.active::before,
body.optimized-mode .setting-toggle .toggle-switch.active::before,
body.optimized-mode .toggle-switch.active::before {
    transform: translateX(22px) !important;
}

/* Hover states */
.floating-settings-panel .toggle-switch:hover,
.settings-group .toggle-switch:hover,
.setting-toggle .toggle-switch:hover,
.toggle-switch:hover {
    border-color: rgba(150, 150, 150, 0.7) !important;
}

.floating-settings-panel .toggle-switch.active:hover,
.settings-group .toggle-switch.active:hover,
.setting-toggle .toggle-switch.active:hover,
.toggle-switch.active:hover {
    border-color: #ef4444 !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.5) !important;
}