/* General Layout & Styling */
:root {
    --bg-color: #2c3e50;
    --sidebar-bg: #34495e;
    --input-bg: #2c3e50;
    --text-color: #ecf0f1;
    --border-color: #4a627a;
    --highlight-color: #3498db;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --sidebar-width: 350px;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}

#app-container {
    display: flex;
    height: 100vh;
    position: relative;
}

/* Profile Browser Table Styling */
#profileBrowserTable {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--input-bg);
}

    #profileBrowserTable th {
        position: sticky;
        top: 0;
        background-color: #40576d;
        z-index: 10;
        text-align: left;
        padding: 12px;
        border-bottom: 2px solid var(--border-color);
    }

    #profileBrowserTable td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: top;
        font-size: 0.9em;
    }

    #profileBrowserTable tr:hover {
        background-color: rgba(52, 152, 219, 0.1);
    }

.browser-status-cell {
    white-space: nowrap;
    font-size: 1.1em;
}

.browser-desc-cell {
    max-width: 400px;
    font-style: italic;
    color: #bdc3c7;
    font-size: 0.85em;
}

.browser-action-cell button {
    padding: 5px 10px;
    font-size: 0.85em;
}

/* Sidebar Overhaul */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: margin-left 0.3s ease-in-out;
    z-index: 1001; /* Higher than toggle */
    position: relative;
    border-right: 1px solid #2c3e50;
    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
}

    /* Custom Scrollbar Styling */
    #sidebar::-webkit-scrollbar {
        width: 8px;
    }

    #sidebar::-webkit-scrollbar-track {
        background: var(--input-bg);
    }

    #sidebar::-webkit-scrollbar-thumb {
        background-color: var(--border-color);
        border-radius: 4px;
    }

        #sidebar::-webkit-scrollbar-thumb:hover {
            background-color: #7f8c8d;
        }

/* Sidebar hidden state */
#app-container.sidebar-hidden #sidebar {
    margin-left: calc(-1 * var(--sidebar-width));
}

#app-container.sidebar-hidden #sidebar-toggle {
    left: 0;
}

    #app-container.sidebar-hidden #sidebar-toggle i {
        transform: rotate(180deg);
    }

/* Sidebar Toggle */
#sidebar-toggle {
    position: absolute; /* Relative to #app-container */
    top: 50%;
    left: calc(var(--sidebar-width) - 20px);
    transform: translateY(-50%);
    z-index: 1000;
    width: 40px;
    height: 70px;
    padding: 0;
    border: none;
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    cursor: pointer;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, left 0.3s ease-in-out;
    border: 1px solid #2c3e50;
    border-left: none;
}


    #sidebar-toggle:hover {
        background-color: var(--highlight-color);
    }

    #sidebar-toggle i {
        transition: transform 0.3s ease-in-out;
        font-size: 1.2em;
        padding-left: 5px;
    }

.sidebar-section, .sidebar-section-collapsible {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

    .sidebar-section:last-child, .sidebar-section-collapsible:last-of-type {
        border-bottom: none;
    }

    .sidebar-section h3, .sidebar-section-collapsible h3 {
        margin-top: 0;
        color: var(--highlight-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.2em;
    }

        .sidebar-section h3 i, .sidebar-section-collapsible h3 i {
            margin-right: 8px;
        }

        .sidebar-section h3 button {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.1em;
            cursor: pointer;
            padding: 5px;
        }

label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #bdc3c7;
}

input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    padding: 8px;
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

input::placeholder {
    color: #95a5a6;
    opacity: 1;
}

button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: var(--highlight-color);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-family: var(--font-family);
    font-size: 0.9em;
}

    button:hover {
        filter: brightness(1.15);
    }

    button:active {
        transform: translateY(1px);
    }

    button:disabled {
        background-color: #7f8c8d;
        cursor: not-allowed;
        filter: none;
    }

.btn-success {
    background-color: var(--success-color);
}

.btn-danger {
    background-color: var(--danger-color);
}

.btn-warning {
    background-color: var(--warning-color);
}

.button-group {
    display: flex;
    gap: 10px;
}

    .button-group button {
        flex-grow: 1;
    }

.input-with-button {
    display: flex;
    gap: 5px;
}

/* Collapsible Dev Tools */
.sidebar-section-collapsible:last-of-type {
    margin-top: auto; /* Pushes last one (dev tools) to the bottom */
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}


.collapsible-header {
    cursor: pointer;
}

    .collapsible-header .expand-icon {
        transition: transform 0.3s ease;
    }

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding-top 0.3s ease-out;
    padding-top: 0;
}

.collapsible-header.active .expand-icon {
    transform: rotate(180deg);
}
/* Initialize active sections */
.collapsible-header.active + .collapsible-content {
    max-height: 500px; /* Adjust as needed */
    padding-top: 15px;
}


#content-wrapper {
    flex-grow: 1;
    position: relative; /* Crucial for overlaying property editor */
}

#main-content {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

#messageLog {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    height: 100px;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    z-index: 1000;
}

.log-entry {
    border-bottom: 1px solid #444;
    padding: 2px 0;
}

.log-success {
    color: var(--success-color);
}

.log-warn {
    color: var(--warning-color);
}

.log-error {
    color: var(--danger-color);
}

.log-info {
    color: #bdc3c7;
}

/* Overlay Property Editor */
.property-editor {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background-color: var(--sidebar-bg);
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    border-left: 1px solid #2c3e50;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}

    .property-editor.visible {
        transform: translateX(0);
    }

    .property-editor h4 {
        margin-top: 0;
        color: var(--highlight-color);
        font-size: 1.1em;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }

.prop-group {
    margin-bottom: 15px;
}

    .prop-group label {
        font-weight: bold;
        font-size: 0.8em;
        color: #bdc3c7;
    }

/* Tool Palette */
#tool-palette {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

    #tool-palette button.active {
        background-color: var(--success-color);
        box-shadow: 0 0 10px var(--success-color);
    }

/* Pathfinding */
#pathOutputContainer {
    margin-top: 15px;
    background-color: var(--input-bg);
    padding: 10px;
    border-radius: 4px;
}

    #pathOutputContainer strong {
        color: var(--highlight-color);
    }

#pathOutputWritten, #pathOutputPhonetic {
    font-family: monospace;
    margin-top: 5px;
    word-wrap: break-word;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* flex to show */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-box, #modalBox, #visibilityModalBox, #selectByNameModalBox, #shortcutHelpModalBox, #myProfilesModalBox, #taxiHistoryModalBox, #autosaveModalBox, #preflightModalBox, #userDefaultsModalBox {
    background-color: var(--sidebar-bg);
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    color: var(--text-color);
}

    #modalBox h3, #visibilityModalBox h3, #selectByNameModalBox h3, #shortcutHelpModalBox h3, #myProfilesModalBox h3, #taxiHistoryModalBox h3, #autosaveModalBox h3, #preflightModalBox h3, #userDefaultsModalBox h3 {
        color: var(--highlight-color);
    }

.modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#modalCancelBtn, #visibilityCloseBtn, #selectByNameCancelBtn, #shortcutHelpCloseBtn, #myProfilesCloseBtn, #taxiHistoryCloseBtn, #autosaveCloseBtn, #preflightCloseBtn, #userDefaultsCloseBtn {
    background-color: #7f8c8d;
}

#modalTextArea {
    height: 300px;
    font-family: monospace;
    font-size: 0.9em;
}

/* My Profiles & Autosave Modal */
#myProfilesModalBox, #autosaveModalBox, #preflightModalBox, #userDefaultsModalBox {
    max-width: 700px;
}

#myProfilesListContainer, #autosaveListContainer, #preflightListContainer, #userDefaultsListContainer {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.my-profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--input-bg);
}

    .my-profile-item:last-child {
        border-bottom: none;
    }

    .my-profile-item:hover {
        background-color: #40576d;
    }

.my-profile-info {
    flex-grow: 1;
}

    .my-profile-info strong {
        font-size: 1.1em;
        color: var(--highlight-color);
    }

    .my-profile-info small {
        display: block;
        color: #bdc3c7;
        margin-top: 4px;
    }

.my-profile-tags {
    margin-left: 10px;
    font-size: 0.9em;
}

.my-profile-actions button {
    margin-left: 10px;
    padding: 8px 12px;
}

/* Taxi History Modal */
#taxiHistoryModalBox {
    max-width: 900px;
    width: 95%;
}

#taxiHistoryListContainer {
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.taxi-history-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--input-bg);
}

    .taxi-history-item:last-child {
        border-bottom: none;
    }

    .taxi-history-item:hover {
        background-color: #40576d;
    }

.taxi-history-info {
    flex-grow: 1;
}

    .taxi-history-info strong {
        color: var(--highlight-color);
    }

    .taxi-history-info pre {
        background-color: #2c3e50;
        padding: 8px;
        border-radius: 4px;
        font-family: monospace;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 8px;
    }

.taxi-history-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Visibility Modal */
#visibilityList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.visibility-item {
    display: flex;
    align-items: center;
}

    .visibility-item input {
        margin-right: 10px;
        width: auto;
    }

    .visibility-item label {
        margin: 0;
        color: var(--text-color);
        font-weight: normal;
    }

/* Shortcut Help Modal */
.shortcut-list {
    list-style: none;
    padding: 0;
}

    .shortcut-list li {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .shortcut-list kbd {
        background-color: #2c3e50;
        padding: 2px 6px;
        border-radius: 3px;
        border: 1px solid var(--border-color);
        font-family: monospace;
        margin-right: 5px;
    }

/* Airline Pill Redesign */
#airline_pills_container, #bulk_airline_pills_container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
    padding: 8px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    min-height: 38px;
}

.airline-pill, .airline-pill-notfound {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8em;
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.1);
    border: 1px solid rgba(0,0,0,0.3);
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.airline-pill {
    color: white;
}
    /* --- THE FIX: Striped overlay for partial assignment --- */
    .airline-pill.partial-pill {
        position: relative;
    }

        .airline-pill.partial-pill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 15px;
            background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 4px, transparent 4px, transparent 8px);
        }

.airline-pill-notfound {
    background: #7f8c8d;
    color: #ecf0f1;
}

.remove-pill-btn {
    all: unset;
    box-sizing: content-box;
    margin-left: 8px;
    font-family: sans-serif;
    color: inherit;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

    .remove-pill-btn:hover {
        opacity: 1;
    }

/* Preflight Check Modal Styles */
.preflight-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--input-bg);
}

    .preflight-item:last-child {
        border-bottom: none;
    }

.preflight-item-header {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
}

    .preflight-item-header i {
        margin-right: 10px;
        font-size: 1.2em;
    }

.preflight-item.warning .preflight-item-header {
    color: var(--warning-color);
}

.preflight-item.info .preflight-item-header {
    color: var(--highlight-color);
}

.preflight-item-details ul {
    list-style: none;
    padding-left: 25px;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

.preflight-item-details li {
    padding: 3px 0;
}

.preflight-item-details button {
    all: unset;
    color: var(--highlight-color);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

    .preflight-item-details button:hover {
        color: #7bdefb;
    }

.progressive-taxi-marker {
    width: 24px;
    height: 24px;
    background-color: #00bcd4; /* Cyan */
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    cursor: pointer;
    transform-origin: center center;
}

    .progressive-taxi-marker i {
        color: white;
        font-size: 14px;
    }

.progressive-taxi-infowindow {
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    padding: 5px 10px;
    font-family: var(--font-family);
    font-size: 0.9em;
    max-width: 250px;
}

    .progressive-taxi-infowindow strong {
        color: var(--highlight-color);
        display: inline-block;
        width: 80px;
    }

    .progressive-taxi-infowindow div {
        padding: 2px 0;
    }

.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.config-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .config-info .no-vector-tag {
        background-color: var(--danger-color);
        color: white;
        padding: 3px 8px;
        border-radius: 10px;
        font-size: 0.8em;
        font-weight: bold;
    }

.config-actions button {
    margin-left: 10px;
}

.editor-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    height: 100%;
}

.editor-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .editor-form select[multiple] {
        height: 150px;
    }

.point-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.editor-map {
    border-radius: 5px;
    border: 1px solid var(--border-color);
    height: 100%;
    min-height: 500px;
}

/* GMaps Custom Overlays & Markers */
.icao-watermark {
    position: absolute;
    transform-origin: top center;
    font-size: 150px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.runway-label, .taxiway-label {
    position: absolute;
    transform-origin: center center;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
}

.runway-label {
    color: var(--warning-color);
}

.crosshair-cursor, .crosshair-cursor .gm-style > div:first-child {
    cursor: crosshair !important;
}

.pulse-animation {
    animation: pulse-save 1.5s infinite;
}

@keyframes pulse-save {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(46, 204, 113, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* --- NEW IMPLEMENTATION BASED ON AdvancedMarkerAnchorPoint.CENTER --- */
.taxiway-node-marker, .hold-bar-marker, .parking-point-marker, .other-point-marker, .runway-endpoint-marker, .path-start-marker, .path-end-marker {
    outline: none;
    cursor: pointer;
    /* This is the key change. It moves the element up and left by half its own size,
       effectively placing its CENTER [50%, 50%] directly on the map coordinate.
       This replaces the old and incorrect `translateY(+50%)`. */
    /* This sets the anchor for any future transformations (like scale or rotate).
       It ensures that if we scale the marker, it grows from its center, keeping
       the anchor point fixed on the map. */
    transform-origin: center center;
}

.taxiway-node-marker {
    width: 14px;
    height: 14px;
    border: 2px solid #2c3e50;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    /* DEFAULT: Green (indicates 2+ connections / "Good" path) */
    background-color: #2ecc71;
    transition: background-color 0.2s;
}

    .taxiway-node-marker.highlighted {
        border-color: #f1c40f;
        border-width: 3px;
    }
    /* Nodes with restricted turns - Red center/border */
    .taxiway-node-marker.has-restricted-turns {
        background-color: #c0392b;
        border-color: #e74c3c;
        box-shadow: 0 0 8px rgba(192, 57, 43, 0.8);
    }
    /* Dead-end nodes (1 connection) - Amber/Orange */
    .taxiway-node-marker[data-connections="1"] {
        background-color: #f39c12; /* Vivid Orange */
        border-color: #e67e22;
        box-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
    }

    /* Orphaned nodes (0 connections) - Grey */
    .taxiway-node-marker[data-connections="0"] {
        background-color: #7f8c8d;
        border-color: #34495e;
        opacity: 0.8;
    }

/* Ensure hold bars also show the "dead-end" highlight if they are missing a path */
.hold-bar-marker[data-connections="1"] .hold-bar-line {
    background-color: #f39c12;
    border-color: #e67e22;
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.6);
}

.hold-bar-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    transform-origin: center;
}

.hold-bar-line {
    width: 30px;
    height: 4px;
    background-color: #f1c40f;
    border: 1px solid #7f6c0a;
}

.hold-bar-marker.highlighted .hold-bar-line {
    background-color: #00FFFF;
    border-color: #008282;
    box-shadow: 0 0 8px #00FFFF;
}

.parking-point-marker {
    width: 60px;
    height: 42px;
    border-radius: 21px;
    background-color: rgba(76, 4, 102, 0.8); /* Dark Purple */
    border: 2px solid white;
    position: relative;
    box-sizing: border-box;
}

    /* --- FIX: Added new styles for parking types --- */
    .parking-point-marker[data-type="MilCargo"],
    .parking-point-marker[data-type="MilCom"] {
        background-color: rgba(44, 90, 61, 0.8); /* Military Green */
    }

    .parking-point-marker[data-type="GateOverflow"],
    .parking-point-marker[data-type="GAOverflow"] {
        background-color: rgba(106, 76, 147, 0.8); /* A different purple for overflow */
    }

    .parking-point-marker[data-type="NONE"] {
        background-color: rgba(93, 109, 126, 0.7); /* Gray */
        border-style: dashed;
    }

.parking-type-icon {
    font-size: 24px;
    color: white;
    text-shadow: 0 0 3px black;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 21px;
    transform-origin: center center;
    z-index: 10;
}

.parking-size-indicator {
    position: absolute;
    top: 50%;
    left: 38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 15;
}

    .parking-size-indicator i {
        color: #f1c40f;
        font-size: 15px;
        line-height: 0.6;
        text-shadow: 0 0 2px black;
    }

.parking-point-marker.highlighted {
    border-color: #f1c40f;
}

.other-point-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #5D6D7E;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .other-point-marker[data-type="ControlTower"] {
        background-color: #008080;
    }

    .other-point-marker[data-type="FBO"] {
        background-color: #8B4513;
    }

    .other-point-marker[data-type="Fuel"] {
        background-color: #8B0000;
    }

    .other-point-marker[data-type="FireStation"] {
        background-color: #D32F2F;
    }

    .other-point-marker[data-type="DeicingPad"] {
        background-color: #03A9F4;
    }

    .other-point-marker[data-type="Custom"] {
        background-color: #4B0082;
    }

    .other-point-marker[data-type="RampApron"] {
        background-color: #607D8B;
    }

    .other-point-marker[data-type="Maintenance"] {
        background-color: #FF9800;
    }

    .other-point-marker[data-type="Terminal"] {
        background-color: #009688;
    }

    .other-point-marker[data-type="Hangar"] {
        background-color: #795548;
    }

    .other-point-marker i {
        font-size: 16px;
        color: white;
    }

    .other-point-marker.highlighted {
        border-color: #f1c40f;
    }

.path-start-marker, .path-end-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    transform-origin: center center;
}

.path-start-marker {
    background-color: #27ae60;
}

.path-end-marker {
    background-color: #c0392b;
}

    .path-start-marker i, .path-end-marker i {
        color: white;
        font-size: 16px;
    }

.runway-endpoint-marker {
    width: 16px;
    height: 16px;
    background-color: #e74c3c;
    border: 2px solid white;
    border-radius: 50%;
    transform-origin: center center;
}

    .runway-endpoint-marker.highlighted {
        background-color: #f1c40f;
        transform-origin: center center;
    }

/* Hides the manual User ID input as it now comes from the auth token */
label[for="userIdInput"],
#userIdInput {
    display: none;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.85); /* Darker, themed overlay */
    display: none; /* flex to show */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Highest z-index */
    color: var(--text-color);
    font-size: 1.2em;
}

.loading-spinner {
    border: 8px solid var(--border-color);
    border-top: 8px solid var(--highlight-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#toggleHeatmapBtn.active {
    background-color: #e67e22; /* Orange for 'Heat' */
    color: white;
    border-color: #d35400;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.2);
}