:root {
    --bg-color: #ffffff;
    --text-color: #15202b;
    --muted-text: #6b7280;
    --surface-color: #ffffff;
    --surface-muted: #f8fafc;
    --border-color: #d1d5db;
    --shadow-color: rgba(15, 23, 42, 0.16);
    --navbar-bg: #1ed65f;
    --navbar-text: #ffffff;
    --table-header-bg: #eaf0f3;
    --input-bg: #ffffff;
    --input-text: #15202b;
    --input-border: #cbd5e1;
    --danger-text: #dc3545;
}

.theme-dark {
    --bg-color: #05070b;
    --text-color: #eceff4;
    --muted-text: #9aa4b2;
    --surface-color: #0c1117;
    --surface-muted: #141b23;
    --border-color: #242f3d;
    --shadow-color: rgba(0, 0, 0, 0.65);
    --navbar-bg: #070b10;
    --navbar-text: #f8fafc;
    --table-header-bg: #111821;
    --input-bg: #0b1016;
    --input-text: #eceff4;
    --input-border: #2a3442;
    --danger-text: #f87171;
}

body {
    background-color: var(--bg-color);
}

.theme-dark,
.theme-dark body,
.theme-dark .app-content {
    background-color: var(--bg-color) !important;
}

.app-shell {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
}

.app-content {
    color: var(--text-color);
    padding-bottom: 24px;
}

.navbar,
.app-navbar {
    background-color: var(--navbar-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-color);
}

.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-toggle,
.app-navbar .theme-toggle-label,
.app-navbar .form-check-label {
    color: var(--navbar-text) !important;
}

.theme-dark .app-navbar .navbar-brand,
.theme-dark .app-navbar .nav-link,
.theme-dark .app-navbar .dropdown-toggle,
.theme-dark .app-navbar .theme-toggle-label,
.theme-dark .app-navbar .form-check-label,
.theme-dark #nav-user-name {
    color: #f3f4f6 !important;
}

.theme-dark .app-navbar .btn-outline-light {
    background-color: #121923;
    border-color: #2b3645;
    color: #f3f4f6;
}

.theme-dark .app-navbar .btn-outline-light:hover {
    background-color: #1a2330;
    border-color: #364254;
}

.app-navbar .dropdown-menu {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

.app-navbar .dropdown-item {
    color: var(--text-color);
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    background-color: var(--surface-muted);
    color: var(--text-color);
}

.theme-toggle-switch .form-check-input {
    cursor: pointer;
}

.settings-page {
    display: grid;
    gap: 18px;
    max-width: 860px;
    margin: 24px auto 0;
    padding: 0 16px;
}

.settings-card {
    padding: 24px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.settings-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.settings-help {
    color: var(--muted-text);
    margin-bottom: 0;
}

.settings-input {
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
}

.settings-nav-link {
    color: var(--navbar-text) !important;
    font-weight: 500;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav-user-link {
    margin: 0 !important;
    min-height: 38px;
}

.settings-toggle .form-check-input {
    cursor: pointer;
}

.theme-panel,
.modal-card {
    background: var(--surface-color) !important;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 18px var(--shadow-color);
}

.theme-button,
.app-shell .btn-outline-light {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-button:hover,
.app-shell .btn-outline-light:hover,
.theme-dark .theme-button {
    background-color: var(--surface-muted);
}

.theme-light .theme-panel {
    background: #ffffff !important;
    border-color: #d5d9df;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14);
}

.app-shell input:not([type="checkbox"]):not([type="radio"]),
.app-shell textarea,
.app-shell .Select-control,
.app-shell .Select-menu-outer,
.app-shell .DateInput,
.app-shell .DateInput_input,
.app-shell .DateRangePickerInput,
.app-shell .SingleDatePickerInput {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

.app-shell input::placeholder,
.app-shell textarea::placeholder,
.custom-placeholder::placeholder {
    color: var(--muted-text);
}

.app-shell .Select-placeholder,
.app-shell .Select-value-label,
.app-shell .Select-value,
.app-shell .Select-input > input,
.app-shell .VirtualizedSelectOption,
.app-shell .VirtualizedSelectFocusedOption {
    color: var(--input-text) !important;
}

.app-shell .VirtualizedSelectFocusedOption {
    background-color: var(--surface-muted) !important;
}

.app-shell .Select-menu-outer {
    border: 1px solid var(--input-border) !important;
}

.app-shell .CalendarMonth,
.app-shell .DayPicker,
.app-shell .DayPicker_transitionContainer,
.app-shell .CalendarMonthGrid,
.app-shell .CalendarDay,
.app-shell .DayPickerNavigation_button {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
}

.app-shell .CalendarDay__default {
    border-color: var(--border-color) !important;
}

.app-shell .CalendarDay__selected,
.app-shell .CalendarDay__selected_span {
    background: #1ed65f !important;
    border-color: #1ed65f !important;
    color: #0b1220 !important;
}

.app-shell .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.app-shell .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.app-shell .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--table-header-bg) !important;
}

.app-shell .dash-table-container .dash-filter input {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.app-shell .js-plotly-plot .plotly .modebar {
    background-color: transparent !important;
}

.app-shell .dash-spinner {
    color: #1ed65f;
}

.app-shell .tab {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.app-shell .tab--selected {
    background-color: var(--surface-muted) !important;
    color: var(--text-color) !important;
    border-top: 3px solid #1ed65f !important;
}

.app-shell .location-status-tab {
    position: relative;
    padding-bottom: 22px !important;
}

.app-shell .location-status-tab::before,
.app-shell .location-status-tab::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9ca3af;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.app-shell .location-status-tab::before {
    left: calc(50% - 13px);
}

.app-shell .location-status-tab::after {
    left: calc(50% + 3px);
}

.app-shell .location-status-tab.dot1-status-green::before {
    background-color: #16a34a;
}

.app-shell .location-status-tab.dot1-status-gray::before {
    background-color: #9ca3af;
}

.app-shell .location-status-tab.dot1-status-red::before {
    background-color: #dc2626;
}

.app-shell .location-status-tab.dot2-status-green::after {
    background-color: #16a34a;
}

.app-shell .location-status-tab.dot2-status-gray::after {
    background-color: #9ca3af;
}

.app-shell .location-status-tab.dot2-status-red::after {
    background-color: #dc2626;
}

.theme-dark .tab,
.theme-dark .tab--selected,
.theme-dark .tab-content,
.theme-dark .tab-parent,
.theme-dark .dash-tabs,
.theme-dark .dash-tabs-container {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.theme-dark .tab--selected {
    background-color: #131a22 !important;
}

.docking-location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: start;
}

.docking-location-card {
    display: block;
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    align-self: flex-start;
}

.docking-location-panel {
    display: block;
    width: auto;
    max-width: 100%;
}

.docking-location-docks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: auto;
}

.docking-location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1100px) {
    .docking-location-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .docking-location-card,
    .docking-location-panel {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .docking-location-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .docking-location-docks {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .docking-location-panel {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .settings-page {
        margin-top: 16px;
        padding: 0 12px;
    }

    .settings-card {
        padding: 16px;
    }

    .settings-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .docking-location-panel {
        padding: 12px !important;
    }

    .docking-location-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .docking-location-actions button {
        margin-left: 0 !important;
        width: 100%;
    }
}