: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);
    overflow-x: hidden;
}

.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);
    overflow-x: hidden;
}

.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;
}

.asset-page {
    padding: 24px 16px 32px;
}

.asset-page-title {
    color: var(--text-color);
}

.theme-dark .asset-page-title {
    color: #ffffff;
}

.asset-table-wrapper {
    margin: 0 auto;
    max-width: min(1400px, 92vw);
}

.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.asset-table-wrapper .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;
}

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

.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    font-weight: 500;
}

.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th *,
.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th .column-header-name {
    color: #ffffff !important;
}

.asset-table-wrapper .dash-table-container .previous-next-container button,
.asset-table-wrapper .dash-table-container .page-number .current-page-shadow,
.asset-table-wrapper .dash-table-container .page-number input,
.asset-table-wrapper .dash-table-container .page-number,
.asset-table-wrapper .dash-table-container .page-count {
    color: var(--text-color) !important;
}

.asset-table-wrapper .dash-table-container .previous-next-container button,
.asset-table-wrapper .dash-table-container .page-number input {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
}

.bookings-page {
    padding: 28px 16px 36px;
    max-width: 1600px;
    margin: 0 auto;
}

.bookings-page-header {
    margin-bottom: 20px;
}

.bookings-page-title {
    margin: 0;
    color: var(--text-color);
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.05;
}

.bookings-page-subtitle {
    margin: 10px 0 0;
    color: var(--muted-text);
    font-size: 1rem;
    max-width: 760px;
}

.bookings-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-muted);
    box-shadow: 0 10px 30px var(--shadow-color);
    flex-wrap: wrap;
}

.bookings-control-group {
    display: grid;
    gap: 8px;
}

.bookings-control-label {
    color: var(--muted-text);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bookings-date-range .DateRangePicker,
.bookings-date-range .DateRangePickerInput {
    background-color: var(--surface-color) !important;
    border-color: var(--input-border) !important;
    border-radius: 12px !important;
}

.bookings-date-range .DateInput,
.bookings-date-range .DateInput_input {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

.bookings-date-range .DateRangePickerInput_arrow_svg {
    fill: var(--muted-text) !important;
}

.bookings-download-button {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    background: var(--surface-color);
    color: var(--text-color);
    font-weight: 700;
}

.bookings-download-button:hover {
    background: var(--table-header-bg);
}

.bookings-table-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-color);
    box-shadow: 0 10px 30px var(--shadow-color);
}

.bookings-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.bookings-table-wrapper .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;
}

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

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

.bookings-table-wrapper .dash-table-container .previous-next-container button,
.bookings-table-wrapper .dash-table-container .page-number .current-page-shadow,
.bookings-table-wrapper .dash-table-container .page-number input,
.bookings-table-wrapper .dash-table-container .page-number,
.bookings-table-wrapper .dash-table-container .page-count {
    color: var(--text-color) !important;
}

.bookings-table-wrapper .dash-table-container .previous-next-container button,
.bookings-table-wrapper .dash-table-container .page-number input {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
}

@media (max-width: 768px) {
    .bookings-page {
        padding: 20px 12px 28px;
    }

    .bookings-toolbar {
        padding: 14px;
    }

    .bookings-download-button {
        width: 100%;
    }
}

.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td div,
.asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th div {
    color: var(--text-color) !important;
    opacity: 1 !important;
}

.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: #121821 !important;
    color: #f3f4f6 !important;
}

.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td div {
    background-color: #0f141b !important;
    color: #e5e7eb !important;
}

.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td,
.theme-dark .asset-table-wrapper .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td div {
    background-color: #151d27 !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;
    min-width: 0;
    box-sizing: border-box;
}

.docking-location-panel {
    display: block;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.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;
}

.docking-layout-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

.docking-refresh-button {
    min-width: 96px;
}

#station-container {
    width: 100%;
    min-width: 0;
}

.docking-dock-card button,
.docking-dock-card input,
.docking-location-actions button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.docking-dock-card {
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.dock-control-button,
.dock-info-button,
.docking-location-actions button {
    min-height: 38px;
}

.dock-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    flex: 0 0 auto;
    padding: 0 2px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.15rem !important;
    color: var(--muted-text) !important;
    text-decoration: none;
    cursor: pointer;
}

.dock-setpoint-row,
.dock-primary-actions,
.dock-toggle-row,
.dock-meta-row,
.docking-location-actions {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.dock-control-button,
.dock-setpoint-input,
.dock-info-button,
.docking-refresh-button,
.docking-location-actions button {
    position: relative;
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.dock-control-button.touch-active,
.dock-info-button.touch-active,
.docking-location-actions button.touch-active,
.docking-refresh-button.touch-active {
    filter: brightness(1.18);
    transform: scale(0.975);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
    opacity: 0.88;
}

.dock-control-button.touch-success,
.docking-location-actions button.touch-success,
.docking-refresh-button.touch-success {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45) !important;
    filter: brightness(1.08);
}

.dock-control-button.touch-error,
.docking-location-actions button.touch-error,
.docking-refresh-button.touch-error {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45) !important;
    filter: brightness(1.02);
}

.dock-meta-row {
    gap: 10px;
    justify-content: flex-start;
}

.dock-meta-text {
    flex: 0 1 auto;
}

.dock-toggle-row {
    touch-action: manipulation;
}

.dock-toggle-row .daq-booleanswitch,
.dock-toggle-row .daq-toggle-switch {
    transform: scale(1.08);
    transform-origin: center;
}

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

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

    .docking-dock-card {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .docking-layout-content {
        flex-direction: column;
        gap: 12px;
    }

    .docking-refresh-button {
        order: -1;
        width: 100%;
        min-height: 44px;
        align-self: stretch !important;
    }

    .docking-location-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

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

    .docking-location-panel {
        max-width: none !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .docking-dock-card {
        max-width: 100% !important;
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .dock-primary-actions,
    .dock-setpoint-row {
        gap: 8px;
    }

    .dock-control-button,
    .docking-location-actions button {
        min-height: 44px;
        font-size: 1rem !important;
    }

    .dock-meta-row {
        align-items: center;
        justify-content: space-between;
    }

    .dock-meta-text {
        flex: 1 1 auto;
    }
}

@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;
        border-radius: 16px !important;
    }

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

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

    .dock-setpoint-row,
    .dock-primary-actions {
        flex-direction: column;
    }

    .dock-setpoint-row input,
    .dock-setpoint-row button,
    .dock-primary-actions button {
        width: 100%;
        margin-right: 0 !important;
    }

    .dock-info-button {
        padding: 6px 8px !important;
        font-size: 1.25rem !important;
    }

    .dock-toggle-row .daq-booleanswitch,
    .dock-toggle-row .daq-toggle-switch {
        transform: none;
    }

    .dock-meta-row {
        gap: 8px;
    }

    .dock-meta-text {
        min-width: 0;
        font-size: 0.92rem;
        line-height: 1.3;
    }
}

@media (hover: none) and (pointer: coarse) {
    .docking-layout-content {
        flex-direction: column;
        gap: 12px;
    }

    .docking-refresh-button {
        order: -1;
        width: 100%;
        min-height: 44px;
        align-self: stretch !important;
    }

    .docking-location-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .docking-location-card,
    .docking-location-panel,
    .docking-location-docks,
    .docking-dock-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    #station-container {
        width: 100% !important;
        min-width: 0 !important;
    }

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

    .docking-dock-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .dock-setpoint-row,
    .dock-primary-actions {
        flex-direction: column;
        gap: 8px;
    }

    .dock-setpoint-row input,
    .dock-setpoint-row button,
    .dock-primary-actions button {
        width: 100%;
        margin-right: 0 !important;
    }

    .dock-control-button,
    .docking-location-actions button {
        min-height: 46px;
        font-size: 1rem !important;
    }

    .dock-toggle-row .daq-booleanswitch,
    .dock-toggle-row .daq-toggle-switch {
        transform: none;
    }

    .dock-meta-row {
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .dock-meta-text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .dock-info-button {
        padding: 6px 8px !important;
        font-size: 1.25rem !important;
    }

    .app-shell .dash-tabs-container,
    .app-shell .dash-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell .tab {
        min-width: 120px;
    }
}