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

html {
    background-color: #0b0e14;
}

:root {
    --bg-app: #0b0e14;
    --bg-elevated: #121722;
    --bg-surface: #171c28;
    --bg-surface-hover: #1e2433;
    --border: #2a3142;
    --border-subtle: #222836;
    --ink-primary: #f3f5f9;
    --ink-secondary: #b8bfd0;
    --ink-muted: #7a839a;
    --accent: #5b9cf5;
    --accent-soft: rgba(91, 156, 245, 0.14);
    --accent-glow: rgba(91, 156, 245, 0.28);
    --gridline: #252b3a;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.22);
    --radius-md: 12px;
    --radius-sm: 8px;
}

* {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(ellipse 120% 80% at 0% -20%, rgba(91, 156, 245, 0.12), transparent 55%),
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(167, 139, 250, 0.08), transparent 45%),
        var(--bg-app);
    color: var(--ink-primary);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink-primary);
    letter-spacing: -0.02em;
}

.text-muted {
    color: var(--ink-muted) !important;
}

/* Navbar */
.navbar {
    background: rgba(18, 23, 34, 0.88) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.navbar-brand {
    background: linear-gradient(135deg, #ffffff 0%, #9ec5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, rgba(18, 23, 34, 0.96) 100%);
    border-right: 1px solid var(--border-subtle);
}

.sidebar-heading {
    color: var(--ink-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.sidebar-link {
    color: var(--ink-secondary) !important;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    padding: 0.55rem 0.85rem !important;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar-link:hover {
    background-color: var(--bg-surface-hover) !important;
    color: var(--ink-primary) !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(91, 156, 245, 0.22) 0%, rgba(91, 156, 245, 0.08) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(91, 156, 245, 0.35);
    color: #dbeafe !important;
}

/* KPI cards */
.kpi-card {
    background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(23, 28, 40, 0.92) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 156, 245, 0.25);
    box-shadow: var(--shadow-soft);
}

.kpi-title {
    color: var(--ink-muted);
    font-size: 11px;
    letter-spacing: 0.05em;
}

.kpi-value {
    color: var(--ink-primary);
    font-size: 1.75rem;
    line-height: 1.15;
}

.kpi-subtitle {
    color: var(--ink-muted);
    font-size: 12px;
}

.kpi-card-skeleton {
    pointer-events: none;
}

.kpi-skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.kpi-skeleton-line-sm {
    height: 10px;
    width: 55%;
    margin-bottom: 12px;
}

.kpi-skeleton-line-lg {
    height: 28px;
    width: 45%;
    margin-bottom: 10px;
}

.kpi-skeleton-line-xs {
    height: 10px;
    width: 35%;
}

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

.graph-loading-wrap {
    position: relative;
    width: 100%;
}

.graph-loading-wrap .graph-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 14, 20, 0.35);
    border-radius: var(--radius-md);
    z-index: 2;
}

.graph-loading-wrap ._dash-loading {
    margin: 0 !important;
}

.graph-loading-wrap ._dash-loading-callback {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Main content */
/* KPI rows — reserve space to reduce layout shift while callbacks load */
[id$="-kpi-row"] {
    min-height: 108px;
}

.page-shell {
    background: transparent;
}

.page-title {
    color: var(--ink-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-panel {
    background: rgba(23, 28, 40, 0.55);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
}

/* Graph containers */
.js-plotly-plot .plotly .modebar {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-btn path {
    fill: var(--ink-muted) !important;
}

.js-plotly-plot .plotly .modebar-btn:hover path {
    fill: var(--ink-primary) !important;
}

.graph-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 0.25rem;
}

.dash-graph {
    background: linear-gradient(180deg, rgba(23, 28, 40, 0.96) 0%, rgba(18, 23, 34, 0.92) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    padding: 0.35rem 0.5rem 0.5rem;
    min-height: 340px;
}

.dash-graph .plotly .main-svg .bg {
    fill: var(--bg-surface) !important;
}

.dash-graph .plotly .main-svg .gridlayer path {
    stroke: var(--gridline, #252b3a);
}

.dash-graph .plotly .main-svg .zerolinelayer path {
    stroke: var(--border);
}

/* Date preset select (Bootstrap native — matches dark theme) */
.date-preset-select {
    width: 170px;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--ink-primary) !important;
    font-size: 13px;
    font-weight: 500;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    box-shadow: none !important;
    cursor: pointer;
}

.date-preset-select:hover {
    border-color: rgba(91, 156, 245, 0.35) !important;
}

.date-preset-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

.date-preset-select option {
    background-color: var(--bg-elevated);
    color: var(--ink-primary);
}

/* Legacy react-select dropdown (if any remain) */
.Select-control,
.Select-menu-outer,
.VirtualizedSelectOption,
div[class*="-control"],
div[class*="-menu"] {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--ink-primary) !important;
}

.Select-value-label,
.Select-placeholder,
.Select-input > input,
div[class*="-singleValue"],
div[class*="-Input"] input {
    color: var(--ink-primary) !important;
}

.Select-menu-outer,
div[class*="-menu"] {
    box-shadow: var(--shadow-soft) !important;
    border: 1px solid var(--border) !important;
}

.VirtualizedSelectFocusedOption,
div[class*="-option"]:hover,
div[class*="-option"][aria-selected="true"] {
    background-color: var(--accent-soft) !important;
    color: var(--ink-primary) !important;
}

.is-focused:not(.is-open) > .Select-control,
div[class*="-control"]:hover {
    border-color: rgba(91, 156, 245, 0.35) !important;
}

.is-focused:not(.is-open) > .Select-control {
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

div[class*="-indicatorContainer"] svg {
    fill: var(--ink-muted) !important;
}

/* Date picker */
.DateRangePickerInput,
.SingleDatePickerInput {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

.DateInput {
    background: transparent !important;
}

.DateInput_input {
    background-color: transparent !important;
    color: var(--ink-primary) !important;
    font-size: 13px !important;
}

.DateInput_input__focused {
    border-bottom-color: var(--accent) !important;
}

.DateRangePickerInput_arrow_svg,
.DateInput_fang {
    fill: var(--ink-muted) !important;
}

.DayPicker,
.DayPicker__withBorder {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-soft) !important;
}

.CalendarMonth,
.CalendarMonthGrid {
    background: var(--bg-elevated) !important;
}

.CalendarMonth_caption,
.DayPicker_weekHeader_li small {
    color: var(--ink-primary) !important;
}

.CalendarDay {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--ink-secondary) !important;
}

.CalendarDay__default:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--border) !important;
    color: var(--ink-primary) !important;
}

.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected_span {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background: var(--accent-soft) !important;
    border-color: rgba(91, 156, 245, 0.35) !important;
    color: var(--ink-primary) !important;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:hover {
    background: var(--bg-surface) !important;
    color: var(--ink-muted) !important;
}

.DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-right-color: var(--accent) !important;
}

/* Buttons */
#refresh-button {
    border-color: var(--border) !important;
    color: var(--ink-secondary) !important;
    background: var(--bg-surface) !important;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

#refresh-button:hover {
    border-color: rgba(91, 156, 245, 0.45) !important;
    color: var(--ink-primary) !important;
    background: var(--accent-soft) !important;
}

/* Alerts / tables */
.alert-secondary {
    background-color: var(--bg-surface) !important;
    border-color: var(--border) !important;
    color: var(--ink-secondary) !important;
}

.dash-table-container .dash-spreadsheet-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.dash-spreadsheet-inner th {
    background: var(--bg-elevated) !important;
    color: var(--ink-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.dash-spreadsheet-inner td {
    background: var(--bg-surface) !important;
    color: var(--ink-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-app);
}

::-webkit-scrollbar-thumb {
    background: #343b4f;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a5368;
}