:root {
    color-scheme: dark;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Force the native date/time picker icon to render light on dark backgrounds.
   Using !important so nothing (Bootstrap, browser defaults) can override. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5) !important;
    cursor: pointer;
    opacity: 0.85;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-select,
.form-control {
    font-size: 0.875rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #adb5bd;
    margin-bottom: 0.25rem;
}

.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#chart-container {
    border-radius: 0.375rem;
    overflow: hidden;
}

.table-sm td,
.table-sm th {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

.badge {
    font-size: 0.75rem;
    font-weight: 500;
}

[x-cloak] {
    display: none !important;
}

/* Side-by-side panels that each scroll independently inside the viewport.
   Scoped to md+ so on narrower screens the columns stack and use natural
   page-level scrolling instead of two tiny scrollable boxes. The 72px
   accounts for the sticky navbar (~56px) + the container-fluid's mt-3
   (16px) so neither column clips at the bottom. */
@media (min-width: 768px) {
    .split-scroll {
        height: calc(100vh - 72px);
    }
    .split-scroll > [class^="col-"],
    .split-scroll > [class*=" col-"] {
        height: 100%;
        overflow-y: auto;
    }
}