/* Material Dashboard Dark Theme for Dash */
:root {
    --bs-blue: #63B3ED;
    --bs-primary: #e91e63;
    --bs-secondary: #737373;
    --bs-success: #4CAF50;
    --bs-info: #1A73E8;
    --bs-warning: #fb8c00;
    --bs-danger: #F44335;
    --bs-dark: #262626;
    --bs-gray-100: #171717;
    --bs-gray-200: #262626;
    --bs-gray-300: #404040;
    --bs-gray-800: #f5f5f5;
    --bs-gray-900: #fff;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: #171717 !important;
    color: #d4d4d4 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
}

.main-content {
    background-color: #171717 !important;
    min-height: 100vh;
}

/* Cards */
.card {
    background-color: #262626 !important;
    border: 1px solid #404040 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 1rem;
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #404040 !important;
    color: #fff !important;
    padding: 1rem 1.5rem;
}

.card-body {
    color: #d4d4d4 !important;
    padding: 1.5rem;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(195deg, #42424a 0%, #191919 100%) !important;
    border-radius: 0.75rem !important;
    margin: 0.5rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: calc(100vh - 1rem) !important;
    width: 250px !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
    padding: 1rem 0 !important;
}

.sidenav-header {
    padding: 0 !important;
}

.collapse {
    display: block !important;
}

.navbar-collapse {
    display: block !important;
}

.w-auto {
    width: auto !important;
}

.navbar-brand {
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.navbar-brand:hover {
    color: #fff !important;
}

.navbar-brand-img {
    margin-right: 0.5rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0.5rem !important;
    margin: 0.125rem 0.5rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.nav-link:hover, .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.content-wrapper {
    margin-left: 260px !important;
    padding: 1rem !important;
}

/* Stats Cards */
.stats-card {
    background: linear-gradient(195deg, var(--gradient-color, #e91e63) 0%, var(--gradient-color-end, #ad1457) 100%) !important;
    border-radius: 0.75rem !important;
    color: white !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.stats-card.info {
    --gradient-color: #1A73E8;
    --gradient-color-end: #1557b0;
}

.stats-card.success {
    --gradient-color: #4CAF50;
    --gradient-color-end: #388e3c;
}

.stats-card.warning {
    --gradient-color: #fb8c00;
    --gradient-color-end: #f57c00;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

.metric-value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}

.metric-label {
    font-size: 0.875rem !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

/* Tables */
.dash-table-container {
    background-color: #262626 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.dash-spreadsheet-container {
    background-color: #262626 !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner table {
    background-color: #262626 !important;
    color: #d4d4d4 !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #404040 !important;
    color: #fff !important;
    border: 1px solid #525252 !important;
    font-weight: bold !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: #262626 !important;
    color: #d4d4d4 !important;
    border: 1px solid #404040 !important;
}

.dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(even) td {
    background-color: #2d2d2d !important;
}

/* Buttons */
.btn-primary {
    background-color: #e91e63 !important;
    border-color: #e91e63 !important;
}

.btn-primary:hover {
    background-color: #ad1457 !important;
    border-color: #ad1457 !important;
}

/* Form controls */
.form-control {
    background-color: #262626 !important;
    border-color: #404040 !important;
    color: #d4d4d4 !important;
}

.form-control:focus {
    background-color: #262626 !important;
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
    color: #d4d4d4 !important;
}

/* Material Icons */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Horizontal rules */
.horizontal {
    height: 1px;
    background-color: #404040;
    border: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-250px);
        transition: transform 0.3s ease;
    }
    
    .content-wrapper {
        margin-left: 0 !important;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
}

/* Text utilities */
.text-muted {
    color: #737373 !important;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }

.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.text-sm { font-size: 0.875rem !important; }

/* Horizontal rule styling */
.my-3 hr, hr.my-3 {
    border-color: #404040 !important;
    margin: 1rem 0 !important;
}

/* Navigation */
.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.nav-item {
    margin: 0;
    width: 100%;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0.5rem !important;
    margin: 0.25rem 0 !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.nav-link:hover, .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateX(2px) !important;
}

.flex-column {
    flex-direction: column !important;
    display: flex !important;
}

/* Opacity utilities */
.opacity-10 { opacity: 1 !important; }

/* Range Slider Styling */
.rc-slider {
    background-color: #404040 !important;
}

.rc-slider-track {
    background-color: #e91e63 !important;
}

.rc-slider-handle {
    border-color: #e91e63 !important;
    background-color: #e91e63 !important;
}

.rc-slider-handle:hover {
    border-color: #ad1457 !important;
}

.rc-slider-handle:active {
    border-color: #ad1457 !important;
    box-shadow: 0 0 5px #e91e63 !important;
}

.rc-slider-mark-text {
    color: #d4d4d4 !important;
}

.rc-slider-dot {
    border-color: #404040 !important;
    background-color: #404040 !important;
}

.rc-slider-dot-active {
    border-color: #e91e63 !important;
}

/* Tooltip styling */
.rc-slider-tooltip-inner {
    background-color: #262626 !important;
    color: #d4d4d4 !important;
    border: 1px solid #404040 !important;
}

.rc-slider-tooltip-arrow {
    border-top-color: #262626 !important;
}

/* Upload Component Styling */
.upload-drag-hover {
    border-color: #e91e63 !important;
    background-color: rgba(233, 30, 99, 0.1) !important;
}

/* Button Styling */
.btn-primary {
    background-color: #e91e63 !important;
    border-color: #e91e63 !important;
}

.btn-primary:hover {
    background-color: #ad1457 !important;
    border-color: #ad1457 !important;
}

.btn-secondary {
    background-color: #404040 !important;
    border-color: #404040 !important;
    color: #d4d4d4 !important;
}

.btn-secondary:hover {
    background-color: #525252 !important;
    border-color: #525252 !important;
    color: #fff !important;
}

/* Input Group Styling */
.input-group-text {
    background-color: #404040 !important;
    color: #d4d4d4 !important;
    border-color: #404040 !important;
}

/* Alert Styling */
.alert-info {
    background-color: rgba(26, 115, 232, 0.1) !important;
    border-color: #1A73E8 !important;
    color: #d4d4d4 !important;
}

/* Dropdown Styling for React-Select (Dash Dropdown) */
.Select-control {
    background-color: #262626 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

.Select-control:hover {
    border-color: #e91e63 !important;
}

.Select-control.is-focused {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25) !important;
}

.Select-placeholder,
.Select-value-label,
.Select-single-value {
    color: #ffffff !important;
}

.Select-input > input {
    color: #ffffff !important;
}

.Select-menu-outer {
    background-color: #262626 !important;
    border-color: #404040 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.Select-menu {
    background-color: #262626 !important;
}

.Select-option {
    background-color: #262626 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
}

.Select-option:hover,
.Select-option.is-focused {
    background-color: #404040 !important;
    color: #ffffff !important;
}

.Select-option.is-selected {
    background-color: #e91e63 !important;
    color: #ffffff !important;
}

.Select-multi-value {
    background-color: #404040 !important;
    color: #ffffff !important;
}

.Select-multi-value-label {
    color: #ffffff !important;
}

.Select-multi-value-remove {
    color: #ffffff !important;
}

.Select-multi-value-remove:hover {
    background-color: #e91e63 !important;
    color: #ffffff !important;
}

/* Modern Dash Dropdown Styling (newer versions) */
.dropdown .Select-control,
.custom-dropdown .Select-control {
    background-color: #262626 !important;
    border: 1px solid #404040 !important;
    color: #ffffff !important;
    min-height: 38px;
}

.dropdown .Select-placeholder,
.custom-dropdown .Select-placeholder {
    color: #999999 !important;
}

.dropdown .Select-value-label,
.custom-dropdown .Select-value-label,
.dropdown .Select-single-value,
.custom-dropdown .Select-single-value {
    color: #ffffff !important;
}

.dropdown .Select-menu-outer,
.custom-dropdown .Select-menu-outer {
    background-color: #262626 !important;
    border: 1px solid #404040 !important;
    border-top: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

.dropdown .Select-option,
.custom-dropdown .Select-option {
    background-color: #262626 !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #333333;
}

.dropdown .Select-option:last-child,
.custom-dropdown .Select-option:last-child {
    border-bottom: none;
}

.dropdown .Select-option:hover,
.custom-dropdown .Select-option:hover,
.dropdown .Select-option.is-focused,
.custom-dropdown .Select-option.is-focused {
    background-color: #404040 !important;
    color: #ffffff !important;
}

.dropdown .Select-option.is-selected,
.custom-dropdown .Select-option.is-selected {
    background-color: #e91e63 !important;
    color: #ffffff !important;
}

/* Additional fallback for newer Dash versions */
div[data-dash-is-loading="true"] .Select-control {
    background-color: #262626 !important;
}

/* Ensure dropdown text is visible on all states */
.Select .Select-control .Select-value .Select-value-label,
.Select .Select-control .Select-placeholder,
.Select .Select-control .Select-input input {
    color: #ffffff !important;
}

.Select .Select-menu .Select-option {
    color: #ffffff !important;
    background-color: #262626 !important;
}

.Select .Select-menu .Select-option:hover {
    background-color: #404040 !important;
    color: #ffffff !important;
}