/* Enhanced Toolbox Styles for BeSignal Anonymizer - Updated v2.0 */

/* Hide toolbox drawer when closed to prevent horizontal scrolling */
.mud-drawer--closed.toolbox-desktop,
.mud-drawer--closed.toolbox-mobile {
    display: none !important;
    visibility: hidden !important;
    transform: translateX(100%) !important;
}

/* Remove backdrop overlay for toolbox drawer - Multiple approaches */
.mud-drawer-backdrop,
.mud-overlay,
.mud-drawer-overlay,
.mud-backdrop,
.mud-drawer-backdrop,
.toolbox-desktop ~ .mud-drawer-backdrop,
.toolbox-mobile ~ .mud-drawer-backdrop,
.mud-drawer.mud-drawer-temporary ~ .mud-drawer-backdrop,
.mud-drawer.mud-drawer-temporary ~ .mud-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide any overlay that might be created by MudBlazor */
.mud-overlay-scrim,
.mud-drawer-scrim {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Nuclear option - hide any element with backdrop-related classes */
[class*="backdrop"],
[class*="overlay"],
[class*="scrim"] {
    display: none !important;
}

/* Toolbox specific styles */
.toolbox-desktop {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.toolbox-mobile {
    transition: all 0.2s ease-in-out;
}

/* Custom scrollbar for toolbox content */
.toolbox-content::-webkit-scrollbar {
    width: 6px;
}

.toolbox-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.toolbox-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.toolbox-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Enhanced card hover effects */
.toolbox-content .mud-card {
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
}

.toolbox-content .mud-card:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(70, 15, 137, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Floating action button animations */
.toolbox-fab {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbox-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure toolbox FAB icon is visible with maximum specificity */
.toolbox-fab .mud-icon-root,
.toolbox-fab .mud-fab-root .mud-icon-root,
.toolbox-fab .mud-button-root .mud-icon-root,
.toolbox-fab .mud-fab-root .mud-button-root .mud-icon-root {
    color: white !important;
    font-size: 1.5rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

.toolbox-fab .mud-fab-root {
    color: white !important;
}

.toolbox-fab,
.toolbox-fab .mud-fab-root,
.toolbox-fab .mud-button-root {
    color: white !important;
}

/* Force icon to be visible */
.toolbox-fab * {
    color: white !important;
}

.toolbox-fab svg,
.toolbox-fab .mud-icon-root svg {
    fill: white !important;
    color: white !important;
}

/* Chip enhancements */
.toolbox-content .mud-chip {
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Switch styling enhancements */
.toolbox-content .mud-switch {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Button hover effects in toolbox */
.toolbox-content .mud-button-outlined {
    transition: all 0.2s ease-in-out;
}

.toolbox-content .mud-button-outlined:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(70, 15, 137, 0.2);
}

/* Icon animations */
.toolbox-content .mud-icon {
    transition: transform 0.2s ease-in-out;
}

.toolbox-content .mud-card:hover .mud-icon {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .toolbox-mobile {
        width: 100% !important;
        max-width: 350px;
    }
    
    .toolbox-content {
        padding: 12px !important;
    }
    
    .toolbox-header {
        padding: 12px !important;
    }
}

/* Glassmorphism effect for modern look */
.toolbox-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* Animation for toolbox sections */
.toolbox-section {
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading state for statistics */
.stats-loading {
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Enhanced focus states for accessibility */
.toolbox-content .mud-button:focus,
.toolbox-content .mud-switch:focus,
.toolbox-content .mud-select:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Improve text visibility and contrast in toolbox */
.toolbox-content .mud-text {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toolbox-content .mud-typography {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure all text elements in toolbox are visible */
.toolbox-content h6,
.toolbox-content .mud-typography-h6,
.toolbox-content .mud-typography-subtitle2,
.toolbox-content .mud-typography-body2,
.toolbox-content .mud-typography-caption {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500 !important;
}

/* Improve visibility of icons in toolbox */
.toolbox-content .mud-icon-root {
    color: white !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Enhance card text visibility */
.toolbox-content .mud-card .mud-text,
.toolbox-content .mud-card .mud-typography {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Improve switch labels */
.toolbox-content .mud-switch .mud-switch-label {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhance button text visibility */
.toolbox-content .mud-button .mud-button-label {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500 !important;
}

/* Improve chip text visibility */
.toolbox-content .mud-chip .mud-chip-content {
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    font-weight: 500 !important;
}

/* Enhance progress text */
.toolbox-content .mud-progress-linear + .mud-text {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-weight: 500 !important;
}

/* Improve toolbox header styling */
.toolbox-content .toolbox-section .mud-card-content > div:first-child {
    margin-bottom: 12px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced stats display */
.toolbox-content .stat-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out;
}

.toolbox-content .stat-card:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.02);
}

/* Improve button styling in toolbox */
.toolbox-content .mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    font-weight: 500 !important;
}

.toolbox-content .mud-button-outlined:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(70, 15, 137, 0.2);
}

/* Enhance switch styling */
.toolbox-content .mud-switch {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Switch styling - use default MudBlazor styling */

/* Improve divider visibility */
.toolbox-content .mud-divider {
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin: 16px 0 !important;
}

/* CRITICAL: Override global white background rules for toolbox components with maximum specificity */
.toolbox-desktop .toolbox-content .mud-card-content,
.toolbox-mobile .toolbox-content .mud-card-content,
.toolbox-desktop .toolbox-content .mud-expand-panel-content,
.toolbox-mobile .toolbox-content .mud-expand-panel-content,
.toolbox-desktop .toolbox-content .mud-expand-panel-gutters,
.toolbox-mobile .toolbox-content .mud-expand-panel-gutters,
.toolbox-desktop .toolbox-content .mud-tabs-tabbar,
.toolbox-mobile .toolbox-content .mud-tabs-tabbar,
.toolbox-desktop .toolbox-content .mud-table,
.toolbox-mobile .toolbox-content .mud-table,
.toolbox-desktop .toolbox-content .mud-paper,
.toolbox-mobile .toolbox-content .mud-paper,
.toolbox-desktop .toolbox-content .mud-input-control-input-container,
.toolbox-mobile .toolbox-content .mud-input-control-input-container,
.toolbox-desktop .toolbox-content .mud-dialog,
.toolbox-mobile .toolbox-content .mud-dialog {
    background-color: transparent !important;
    background: transparent !important;
}

/* Override white backgrounds for specific toolbox components */
.toolbox-content .mud-chip {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.toolbox-content .mud-chip:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.toolbox-content .mud-chip .mud-chip-content {
    color: white !important;
}

/* Fix input fields in toolbox */
.toolbox-content .mud-input,
.toolbox-content .mud-input-control,
.toolbox-content .mud-select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.toolbox-content .mud-input-control .mud-input-control-input-container {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.toolbox-content .mud-input input,
.toolbox-content .mud-select input {
    color: white !important;
}

/* Fix card content backgrounds */
.toolbox-content .mud-card .mud-card-content {
    background-color: transparent !important;
}

/* Fix tabs backgrounds */
.toolbox-content .mud-tabs,
.toolbox-content .mud-tabs-tabbar,
.toolbox-content .mud-tabs-panels,
.toolbox-content .mud-tabs-panel {
    background-color: transparent !important;
}

/* Fix table backgrounds */
.toolbox-content .mud-table,
.toolbox-content .mud-table-container {
    background-color: transparent !important;
}

/* Fix progress bars */
.toolbox-content .mud-progress-linear {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.toolbox-content .mud-progress-linear .mud-progress-linear-bar {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Additional overrides for any remaining white backgrounds */
.toolbox-content * {
    /* Remove any white backgrounds that might be applied globally */
}

.toolbox-content .mud-card-content * {
    background-color: transparent !important;
}

/* Ensure all MudBlazor components in toolbox have proper styling */
.toolbox-content .mud-expand-panel {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.toolbox-content .mud-expand-panel-content {
    background-color: transparent !important;
}

.toolbox-content .mud-expand-panel-header {
    background-color: transparent !important;
    color: white !important;
}

/* Fix dropdown/select backgrounds */
.toolbox-content .mud-select .mud-select-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.toolbox-content .mud-popover {
    background-color: rgba(70, 15, 137, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.toolbox-content .mud-list-item {
    color: white !important;
}

.toolbox-content .mud-list-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix any remaining text color issues */
.toolbox-content label,
.toolbox-content .mud-input-label,
.toolbox-content .mud-form-input-label {
    color: white !important;
}

/* Ensure statistics cards have proper backgrounds */
.toolbox-content .stat-card * {
    background-color: transparent !important;
}

/* Fix slider backgrounds if any */
.toolbox-content .mud-slider {
    color: white !important;
}

.toolbox-content .mud-slider-track {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.toolbox-content .mud-slider-thumb {
    background-color: white !important;
}

/* NUCLEAR OPTION: Force override all white backgrounds in toolbox with maximum specificity */
.mud-drawer.toolbox-desktop .toolbox-content *,
.mud-drawer.toolbox-mobile .toolbox-content * {
    background-color: transparent !important;
    background: transparent !important;
}

/* Force specific component styling with ultra-high specificity */
.mud-drawer.toolbox-desktop .toolbox-content .mud-card,
.mud-drawer.toolbox-mobile .toolbox-content .mud-card,
.mud-drawer.toolbox-desktop .toolbox-content .mud-card-content,
.mud-drawer.toolbox-mobile .toolbox-content .mud-card-content {
    background-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
}

.mud-drawer.toolbox-desktop .toolbox-content .mud-chip,
.mud-drawer.toolbox-mobile .toolbox-content .mud-chip {
    background-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.mud-drawer.toolbox-desktop .toolbox-content .mud-input-control-input-container,
.mud-drawer.toolbox-mobile .toolbox-content .mud-input-control-input-container,
.mud-drawer.toolbox-desktop .toolbox-content .mud-paper,
.mud-drawer.toolbox-mobile .toolbox-content .mud-paper {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

/* Force text colors with maximum specificity */
.mud-drawer.toolbox-desktop .toolbox-content *,
.mud-drawer.toolbox-mobile .toolbox-content * {
    color: white !important;
}

.mud-drawer.toolbox-desktop .toolbox-content .mud-text,
.mud-drawer.toolbox-mobile .toolbox-content .mud-text,
.mud-drawer.toolbox-desktop .toolbox-content .mud-typography,
.mud-drawer.toolbox-mobile .toolbox-content .mud-typography,
.mud-drawer.toolbox-desktop .toolbox-content h1,
.mud-drawer.toolbox-mobile .toolbox-content h1,
.mud-drawer.toolbox-desktop .toolbox-content h2,
.mud-drawer.toolbox-mobile .toolbox-content h2,
.mud-drawer.toolbox-desktop .toolbox-content h3,
.mud-drawer.toolbox-mobile .toolbox-content h3,
.mud-drawer.toolbox-desktop .toolbox-content h4,
.mud-drawer.toolbox-mobile .toolbox-content h4,
.mud-drawer.toolbox-desktop .toolbox-content h5,
.mud-drawer.toolbox-mobile .toolbox-content h5,
.mud-drawer.toolbox-desktop .toolbox-content h6,
.mud-drawer.toolbox-mobile .toolbox-content h6,
.mud-drawer.toolbox-desktop .toolbox-content p,
.mud-drawer.toolbox-mobile .toolbox-content p,
.mud-drawer.toolbox-desktop .toolbox-content span,
.mud-drawer.toolbox-mobile .toolbox-content span,
.mud-drawer.toolbox-desktop .toolbox-content div,
.mud-drawer.toolbox-mobile .toolbox-content div,
.mud-drawer.toolbox-desktop .toolbox-content label,
.mud-drawer.toolbox-mobile .toolbox-content label {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}