@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #000000;
    --surface: #141414;
    --surface-2: #1C1C1E;
    --border: #2A2A2D;
    --text: #FFFFFF;
    --text-muted: #8E8E93;
    --primary: #00C805;
    --primary-dark: #00A804;
    --primary-soft: rgba(0, 200, 5, 0.12);
    --negative: #FF5000;
    --negative-soft: rgba(255, 80, 0, 0.12);
    --radius: 0.9rem;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 0;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    width: 260px;
    flex: 0 0 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.5rem 1.1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .app-hero h1 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 0.15rem 0;
    letter-spacing: -0.01em;
}

.sidebar .app-hero p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1.25rem 0;
}

.sidebar-alert {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius) !important;
    font-size: 0.85rem;
    padding: 0.75rem 0.9rem !important;
    margin-bottom: 1.25rem !important;
}
.sidebar-alert.alert-success { border-left: 3px solid var(--primary) !important; }
.sidebar-alert.alert-warning { border-left: 3px solid var(--negative) !important; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text) !important; }
.nav-link.active { background: var(--primary-soft); color: var(--primary) !important; }
.nav-icon { width: 1.2rem; text-align: center; }

.sidebar-guide {
    color: var(--text-muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.sidebar-guide h5 { color: var(--text); font-size: 0.85rem; }
.sidebar-guide strong { color: var(--text); }

/* ---- Main content ---- */
.main-content {
    flex: 1;
    padding: 1.75rem 2.5rem 3rem 2.5rem;
    max-width: 1280px;
}

.page-header { margin-bottom: 1.25rem; }
.page-header h3 { font-weight: 800; font-size: 1.5rem; margin: 0 0 0.2rem 0; }
.page-subtitle { color: var(--text-muted); margin: 0; }

h2, h3, h4, h5 { color: var(--text); font-weight: 700; }
h5.section-heading { font-size: 1.05rem; margin: 1.5rem 0 0.75rem 0; }
p, label, .form-label { color: var(--text); }

/* ---- Metric cards ---- */
.metric-row { margin-bottom: 1rem; }
.metric-col { display: flex; flex-direction: column; gap: 0.75rem; }
.metric-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.metric-card:hover { transform: translateY(-2px); border-color: #3A3A3D !important; }
.metric-label { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; margin-bottom: 0.3rem; }
.metric-value {
    color: var(--text);
    font-weight: 700;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}
.metric-delta { font-size: 0.82rem; font-weight: 600; margin-top: 0.2rem; color: var(--text-muted); }
.metric-delta-positive { color: var(--primary); }
.metric-delta-negative { color: var(--negative); }

/* ---- Buttons ---- */
.btn, .btn:visited {
    border-radius: 999px !important;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
}
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #000 !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-outline-secondary {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.btn-outline-secondary:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

/* ---- Tabs ---- */
.nav-tabs {
    border-bottom: none !important;
    background: var(--surface);
    padding: 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: inline-flex;
    gap: 0.25rem;
}
.nav-tabs .nav-link {
    border: none !important;
    border-radius: 999px !important;
    color: var(--text-muted) !important;
    padding: 0.4rem 1rem;
}
.nav-tabs .nav-link.active {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* ---- Inputs / dropdowns / date pickers ---- */
.form-control, .form-select {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 0.6rem !important;
}
.form-control:focus, .form-select:focus { border-color: var(--primary) !important; box-shadow: none !important; }
.form-control::placeholder { color: var(--text-muted); }

.Select-control, .Select-menu-outer, .Select-value, .Select--multi .Select-value,
.dash-dropdown .Select-control {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.VirtualizedSelectOption { background: var(--surface-2); color: var(--text); }
.VirtualizedSelectFocusedOption { background: var(--primary-soft); color: var(--primary); }
.Select--multi .Select-value {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    border-radius: 999px !important;
}

/* ---- Dash's native Dropdown (button-based, Dash 3/4) ---- */
.dash-dropdown-wrapper { width: 100%; }
.dash-dropdown {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.6rem !important;
    width: 100%;
    text-align: left;
    min-height: 38px;
}
.dash-dropdown-value, .dash-dropdown-value-item {
    color: var(--text) !important;
}
.dash-dropdown svg { fill: var(--text-muted) !important; }
.dash-dropdown-value-item.dash-dropdown-tag {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-radius: 999px !important;
    padding: 0.1rem 0.5rem;
}
.dash-dropdown-content {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 0.6rem !important;
    box-shadow: var(--shadow);
}
.dash-dropdown-search {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.4rem !important;
}
.dash-options-list-option {
    color: var(--text) !important;
    background: transparent !important;
}
.dash-options-list-option:hover,
.dash-options-list-option.highlighted,
.dash-options-list-option.selected {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}

/* ---- Dash's native DatePickerRange/DatePickerSingle ---- */
.dash-datepicker, .dash-datepicker-input-wrapper {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.6rem !important;
}
.dash-datepicker-input {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    font-weight: 600;
}
.dash-datepicker svg { fill: var(--text-muted) !important; }

/* Year stepper in the calendar popup header (e.g. "August [- 2025 +]") */
.dash-datepicker-controls .dash-input-container.dash-input {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.4rem !important;
}
.dash-datepicker-controls .dash-input-element {
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 600;
}
.dash-datepicker-controls .dash-input-stepper {
    background: transparent !important;
    color: var(--text-muted) !important;
}
.dash-datepicker-controls .dash-input-stepper:hover { color: var(--primary) !important; }
.dash-datepicker-month-nav svg { fill: var(--text-muted) !important; }
.dash-datepicker-popup, [class*="datepicker-calendar"], [class*="DayPicker"] {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.DateInput_input {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-bottom: none !important;
    font-weight: 600;
}
.DateRangePickerInput { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: 0.6rem !important; }
.DateInput { background: var(--surface-2) !important; }
.CalendarMonth, .CalendarMonthGrid, .DayPicker, .DayPicker_transitionContainer { background: var(--surface) !important; }
.CalendarMonth_caption { color: var(--text) !important; }
.CalendarDay__default { background: var(--surface); border-color: var(--border); color: var(--text); }
.CalendarDay__selected, .CalendarDay__selected_span, .CalendarDay__hovered_span {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #000 !important;
}

.rc-slider-track { background: var(--primary) !important; }
.rc-slider-rail { background: var(--surface-2) !important; }
.rc-slider-handle { border-color: var(--primary) !important; background: var(--primary) !important; }

/* ---- Dash's native slider/range-slider (Dash 3/4) ---- */
.dash-range-slider-input {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.4rem !important;
    width: 4.5rem;
}
.dash-slider-root { color: var(--primary) !important; }
.dash-slider-track, .dash-slider-range { background: var(--primary) !important; }
.dash-slider-rail { background: var(--surface-2) !important; }
.dash-slider-thumb { background: var(--primary) !important; border-color: var(--primary) !important; }
.dash-slider-mark, .dash-slider-mark-label { color: var(--text-muted) !important; }
.dash-slider-tooltip { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---- Radio / checklist pills ---- */
.form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.form-check-label { margin-right: 1rem; }

/* ---- Tables ---- */
table.dash-table, .dash-spreadsheet-container {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    overflow: hidden;
}
.dash-spreadsheet-container .dash-spreadsheet-inner table { background: var(--surface); }
.dash-spreadsheet-container th { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.dash-spreadsheet-container td { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---- Cards / alerts / general ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    --bs-card-color: var(--text);
    --bs-card-cap-color: var(--text);
}
.card, .card-body, .card-body p, .card-body li, .card-body div { color: var(--text); }
.card-body .text-muted, small.text-muted { color: var(--text-muted) !important; }
.alert { border-radius: var(--radius); border: 1px solid var(--border); }
.alert-success { background: var(--primary-soft) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.alert-danger { background: var(--negative-soft) !important; color: var(--negative) !important; border-color: var(--negative) !important; }
.alert-warning { background: rgba(255, 214, 10, 0.12) !important; color: #FFD60A !important; border-color: #FFD60A !important; }
.alert-info { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
hr { border-color: var(--border); }

code {
    background: var(--surface-2);
    color: var(--primary);
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    font-size: 0.85em;
}

.empty-state { padding: 2rem 0; }

.info-banner {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid #5AC8FA;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--text);
    margin: 0.75rem 0;
}

.upload-box {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: 0.5rem;
}
.upload-box:hover { border-color: var(--primary); color: var(--text); }
.upload-box a { color: var(--primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 6px; }