:root {
    color-scheme: dark;
    --dashboard-bg: #050d18;
    --dashboard-panel: rgba(8, 22, 36, 0.96);
    --dashboard-panel-raised: #0c1c2b;
    --dashboard-border: #29465b;
    --dashboard-border-bright: #3c88b8;
    --dashboard-text: #e8f2fb;
    --dashboard-muted: #9db2c4;
    --dashboard-cyan: #50bfff;
    --dashboard-green: #42d49a;
}

body {
    background:
        radial-gradient(ellipse at 50% 24%, rgba(19, 62, 91, 0.18), transparent 58%),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(72, 131, 167, 0.075) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(72, 131, 167, 0.075) 39px 40px),
        var(--dashboard-bg);
    color: var(--dashboard-text);
    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

div#layout,
div#layout.area-managed {
    background: transparent;
}

div#tools {
    box-sizing: border-box;
    padding: 5px 8px 4px;
    border-bottom: 1px solid rgba(80, 191, 255, 0.26);
    background: rgba(5, 14, 25, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

div#subbar {
    border-top-color: rgba(80, 191, 255, 0.16);
}

div#toolbar .id-pane,
#subbar .id-pane,
#subbar .latlon-pane {
    border-color: var(--dashboard-border);
    border-radius: 8px;
    background: var(--dashboard-panel);
    color: var(--dashboard-text);
}

div#toolbar .user-pane {
    color: var(--dashboard-text);
}

div#toolbar .user-text,
div#toolbar .text,
input.toolbar,
div#toolbar .id-pane-value,
#subbar input,
#subbar textarea,
div#subbar .text,
div#subbar .subbar-text {
    color: var(--dashboard-text);
}

#toolbar div.button-link,
#subbar div.button-link {
    box-sizing: border-box;
    border: 1px solid var(--dashboard-border);
    border-radius: 9px;
    background: linear-gradient(145deg, #10243a, #091725);
    color: var(--dashboard-text);
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

#toolbar div.button-link:hover,
#subbar div.button-link:hover {
    border-color: var(--dashboard-cyan);
    background: #102b41;
    box-shadow: 0 0 14px rgba(80, 191, 255, 0.16);
}

#toolbar div.button-link:focus-visible,
#subbar div.button-link:focus-visible {
    outline: 2px solid var(--dashboard-cyan);
    outline-offset: 2px;
}

div.toggle-indicator {
    box-shadow: 0 0 8px rgba(80, 191, 255, 0.28);
}

.consist-card,
.consist-dialog-panel,
#train_list,
#autopilot_list,
#consist_train_assign,
#consist_placement,
#consist_movements,
#route_request,
#login {
    border-color: var(--dashboard-border);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(11, 29, 46, 0.98), rgba(6, 18, 31, 0.98));
    color: var(--dashboard-text);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.48), inset 0 1px rgba(148, 207, 240, 0.06);
}

.consist-card:hover,
.consist-card.selected,
.consist-card.editing {
    border-color: var(--dashboard-border-bright);
    background: linear-gradient(155deg, #102b41, #091a2b);
}

.consist-card-number,
.consist-dialog-title,
.trains-heading,
.autopilot-heading {
    color: #f3f8fd;
    font-weight: 700;
}

.consist-card-number {
    padding-top: 5px;
}

.consist-dialog-title,
.trains-heading,
.autopilot-heading {
    padding-top: 5px;
    border-top: 3px solid var(--dashboard-cyan);
}

.consist-card-stats,
.consist-card-train,
.consist-movements-empty,
.consist-card-section-row .consist-card-location {
    color: var(--dashboard-muted);
}

.consist-row:not(.consist-row-heading) {
    border-color: rgba(67, 117, 149, 0.55);
    border-radius: 9px;
    background: linear-gradient(120deg, rgba(13, 34, 53, 0.96), rgba(8, 24, 39, 0.96));
    color: var(--dashboard-text);
}

.consist-row[role="button"]:hover,
.consist-row[role="button"]:focus-visible,
.consist-row.selected,
.consist-text-button.selected {
    border-color: var(--dashboard-cyan);
    background: linear-gradient(120deg, #12334b, #0b2236);
    outline: none;
}

.consist-row-heading {
    border-color: transparent;
    color: var(--dashboard-muted);
}

.consist-row.editing {
    background: transparent;
}

.consist-list-tools {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(80, 145, 183, 0.22);
}

.consist-list-search {
    border-color: var(--dashboard-border);
    border-radius: 8px;
    background: #071523;
    color: var(--dashboard-text);
}

.consist-list-search:focus {
    border-color: var(--dashboard-cyan);
}

.consist-list-search::placeholder,
.consist-list-count,
.consist-list-filter {
    color: var(--dashboard-muted);
}

.consist-list-filter input,
.train-recurring-field input {
    accent-color: var(--dashboard-cyan);
}

.consist-sort-button {
    color: inherit;
}

.consist-sort-button:hover,
.consist-sort-button:focus-visible {
    color: var(--dashboard-cyan);
}

.consist-text-button,
.consist-icon-button,
#login .button-row button,
.consist-movements-close {
    border-color: var(--dashboard-border-bright);
    border-radius: 8px;
    background: #0d2235;
    color: var(--dashboard-text);
}

.consist-text-button:hover,
.consist-icon-button:hover,
#login .button-row button:hover,
.consist-movements-close:hover {
    border-color: var(--dashboard-cyan);
    background: #12324b;
}

.consist-movements-table th,
.consist-movements-table td {
    border-color: rgba(80, 145, 183, 0.28);
}

.consist-movements-table th,
.consist-dialog-header,
.consist-movements-header,
.help-dialog-header {
    background: #10273a;
}

.consist-dialog-header,
.consist-movements-header,
.help-dialog-header {
    border-color: rgba(80, 145, 183, 0.35);
}

.consist-movements-title,
.help-dialog-title {
    color: #f3f8fd;
}

.consist-movements-body {
    scrollbar-color: var(--dashboard-border-bright) transparent;
}

.score-details-table th,
.train-row-heading,
.timetable-row-heading {
    color: var(--dashboard-muted);
}

.score-details-table th,
.score-details-table td {
    border-bottom-color: rgba(80, 145, 183, 0.28);
}

.score-details-table td:last-child {
    color: #ffd166;
}

.timetable-cell,
.train-cell {
    border-color: rgba(67, 117, 149, 0.48);
    border-radius: 7px;
    background: #091a2b;
    color: var(--dashboard-text);
}

.timetable-row-heading .timetable-cell,
.train-row-heading .train-cell {
    border-color: transparent;
    background: transparent;
    color: var(--dashboard-muted);
}

.train-editor-generated-section {
    border-top-color: rgba(80, 145, 183, 0.35);
}

.train-editor-generated-heading,
.train-number-field,
.train-recurring-field {
    color: var(--dashboard-muted);
}

.train-cell:disabled,
input:disabled,
select:disabled {
    border-color: rgba(67, 117, 149, 0.32);
    background: #0a1927;
    color: #8da3b4;
    opacity: 1;
}

.timetable-row-cancelled .timetable-cell,
.train-row-assigned td,
.train-row-cancelled td {
    color: #7890a2;
}

.timetable-origin-link,
.train-timetable-link,
.trains-list .train-timetable-link,
.autopilot-log-area {
    color: var(--dashboard-cyan);
}

.train-timetable-link:hover,
.timetable-origin-link:hover,
.autopilot-log-area:hover {
    color: #a4e1ff;
}

.timetable-actual-time,
.autopilot-status,
.autopilot-log-time {
    color: var(--dashboard-muted);
}

.train-editor-header {
    align-items: end;
}

.train-time {
    color: var(--dashboard-text);
}

.trains-popup-overlay,
#consist_list {
    background: rgba(2, 8, 15, 0.78);
    backdrop-filter: blur(5px);
}

.autopilot-log-row {
    border-color: rgba(67, 117, 149, 0.48);
    border-radius: 8px;
    background: var(--dashboard-panel-raised);
}

.autopilot-log-row-warn {
    border-color: rgba(255, 209, 102, 0.55);
    background: rgba(57, 45, 22, 0.72);
}

.autopilot-log-row-error {
    border-color: rgba(255, 116, 111, 0.55);
    background: rgba(58, 25, 30, 0.72);
}

.autopilot-log-text,
.autopilot-log-row-warn .autopilot-log-text,
.autopilot-log-row-error .autopilot-log-text {
    color: var(--dashboard-text);
}

.autopilot-log-row-warn .autopilot-log-text {
    color: #ffe09a;
}

.autopilot-log-row-error .autopilot-log-text {
    color: #ffaaa6;
}

.gps-picker {
    border-color: var(--dashboard-border);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(11, 29, 46, 0.99), rgba(6, 18, 31, 0.99));
    color: var(--dashboard-text);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.48);
}

.gps-picker-map {
    border: 1px solid var(--dashboard-border);
    border-radius: 9px;
}

.gps-picker-actions button,
.help-dialog-close {
    border: 1px solid var(--dashboard-border-bright);
    border-radius: 8px;
    background: #0d2235;
    color: var(--dashboard-text);
}

.gps-picker-actions button:hover,
.help-dialog-close:hover {
    border-color: var(--dashboard-cyan);
    background: #12324b;
}

.gps-picker::backdrop,
.help-dialog::backdrop {
    background: rgba(2, 8, 15, 0.82);
    backdrop-filter: blur(5px);
}

.help-dialog {
    border-color: var(--dashboard-border);
    border-radius: 15px;
    background: linear-gradient(155deg, rgba(11, 29, 46, 0.99), rgba(6, 18, 31, 0.99));
    color: var(--dashboard-text);
}

.help-dialog-content .help-page {
    background: transparent;
    color: var(--dashboard-text);
}

.help-dialog-content .help-page h1,
.help-dialog-content .help-page h2,
.help-dialog-content .help-page strong {
    color: #f3f8fd;
}

.help-dialog-content .help-page p,
.help-dialog-content .help-page li {
    color: #c4d5e2;
}

.help-dialog-content .help-language,
.help-dialog-content .help-button {
    border-color: var(--dashboard-border);
    border-radius: 8px;
    background: #0d2235;
    color: var(--dashboard-text);
}

.help-dialog-content .help-button:hover {
    border-color: var(--dashboard-cyan);
    background: #12324b;
}

.train-schedule-delayed {
    color: #ff8a8a;
}

.train-schedule-early {
    color: #ffd166;
}

.train-schedule-ontime {
    color: var(--dashboard-green);
}

input,
select,
textarea {
    border-color: var(--dashboard-border);
    border-radius: 7px;
    background-color: #071523;
    color: var(--dashboard-text);
}

button {
    font: inherit;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--dashboard-cyan);
}

::selection {
    background: rgba(80, 191, 255, 0.3);
    color: #fff;
}

* {
    scrollbar-color: var(--dashboard-border-bright) var(--dashboard-bg);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--dashboard-cyan);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    div#tools {
        padding: 4px;
    }

    #toolbar div.button-link {
        width: 34px;
        height: 34px;
        margin: 3px;
    }
}