/* Custom CSS for Demand Forecasting Dashboard */

/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
}

/* Header Styles */
.navbar-brand {
    font-weight: 600;
    font-size: 1rem;
}

/* Card Styles */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Button Styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Dropdown Styles */
.Select-control {
    border-radius: 6px;
    border: 1px solid #ced4da;
}

.Select-control:hover {
    border-color: #66bb6a;
}

/* Chart Container */
.plotly-graph-div {
    border-radius: 8px;
    overflow: hidden;
}

/* Table Styles */
.dash-table-container {
    border-radius: 8px;
    overflow: hidden;
}

.dash-table-container .dash-spreadsheet-container {
    border-radius: 8px;
}

/* Loading Spinner */
._dash-loading {
    margin: 20px auto;
}

/* Tab Styles */
/* .tab-content { */
    /* padding: 20px 0; */
/* } */

/* Summary Cards */
.summary-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.summary-card h4 {
    font-weight: 700;
    margin-bottom: 5px;
}

.summary-card p {
    opacity: 0.8;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .card-body {
        padding: 15px;
    }
    
    .btn {
        font-size: 0.9rem;
    }
}

/* Animation for loading states */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* assets/custom.css */
.custom-label {
    font-weight: normal !important;
    font-size: 13px !important;
}

/* Status indicators */
.status-success {
    color: #198754;
    font-weight: 600;
}

.status-error {
    color: #dc3545;
    font-weight: 600;
}

.status-warning {
    color: #ffc107;
    font-weight: 600;
}

/* Filter sidebar */
.filter-sidebar {
    background: white;
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
    position: sticky;
    top: 80px;
}

/* Chart export button */
.export-button {
    margin-top: 10px;
}

/* Export button */
.export {
    margin: 5px;
}

/* Data table customization */
.data-table-container {
    margin-top: 20px;
}

/* Forecast accuracy indicators */
.accuracy-indicator {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.accuracy-high {
    background-color: #d1e7dd;
    color: #0f5132;
}

.accuracy-medium {
    background-color: #fff3cd;
    color: #664d03;
}

.accuracy-low {
    background-color: #f8d7da;
    color: #721c24;
}

/* Green radio button selection */
input[type="radio"]:checked {
    accent-color: #66bb6a;
}

/* Make inactive tabs green */
.nav-tabs .nav-link {
    color: #66bb6a; /* green text for inactive tabs */
}

/* Keep active tab black (or default) */
.nav-tabs .nav-link.active {
    color: black;
}


/* Reduce font size of labels in filter sidebar */
.filter-sidebar label,
.filter-sidebar .form-label {
    font-size: 13px !important;
    font-weight: normal !important;
}

/* Reduce font size for dropdown and date inputs */
.filter-sidebar .Select-control,
.filter-sidebar input,
.filter-sidebar .form-control {
    font-size: 13px !important;
}


/* Force smaller, non-bold labels */
.card-body label,
.card-body .form-label {
    font-size: 13px !important;
    font-weight: normal !important;
}
.Select-control,
.Select-value,
.Select-placeholder,
.Select-menu-outer,
.Select-menu,
.Select-option {
    font-size: 13px !important;
}


/* Fix font size inside DatePicker input fields */
.DateRangePickerInput,
.DateInput_input {
    font-size: 13px !important;
}

/* Main DataTable font size */
.dash-table-container .dash-spreadsheet-container {
    font-size: 13px !important;
}

/* Header font size */
.dash-header {
    font-size: 13px !important;
}

/* Cell font size */
.dash-cell {
    font-size: 13px !important;
}

/* Pagination & tooltips */
.dash-table-container .dash-pagination,
.dash-table-tooltip {
    font-size: 13px !important;
}