/* Theme colors (--BGCOLOR1, --ACCENT, etc.) are not defined here; they are applied from defaults.js + config.js via applyThemeColors() injected style. */
:root {
    --SCALE: 1;
    --FS1: calc(10px * var(--SCALE));
    --FS2: calc(13px * var(--SCALE));
    --FS3: calc(17px * var(--SCALE));
    /* Corner radius: one value per role, used everywhere (no pills, no squares
       except flush edges; circles only for dots, thumbs and round icon buttons) */
    /* Panels, cards, popovers, floating boxes */
    --UI-RADIUS-PANEL: 12px;
    /* Anything you click or type in: buttons, map buttons, tabs, inputs, chips, images */
    --UI-RADIUS-CONTROL: calc(8px * var(--SCALE));
    /* Tiny marks: checkboxes, badges, slider tracks, map scale / zoom labels */
    --UI-RADIUS-SMALL: calc(4px * var(--SCALE));
    /* Map buttons: neutral surface, text-coloured icons; accent only when switched on */
    --MAPBTN-BG: var(--BGCOLOR1);
    --MAPBTN-FG: var(--TXTCOLOR1);
    --MAPBTN-HOVER: color-mix(in srgb, var(--TXTCOLOR1) 10%, var(--BGCOLOR1));
    --MAPBTN-BORDER: color-mix(in srgb, var(--TXTCOLOR1) 16%, transparent);
    --MAPBTN-SHADOW: 0 1px 3px rgba(0, 0, 0, 0.18);
    /* Map button groups: fused stacks split by hairlines (see .mapBtnGroup) */
    --MAPBTN-SIZE: calc(36px * var(--SCALE));
    --MAPBTN-ICON: calc(18px * var(--SCALE));
    --MAPBTN-GAP: calc(10px * var(--SCALE));
    --MAPBTN-INSET: calc(10px * var(--SCALE));
    --MAPBTN-DIVIDER: color-mix(in srgb, var(--TXTCOLOR1) 10%, var(--BGCOLOR1));
    --MAPBTN-GROUP-SHADOW: 0 0 0 0.5px var(--MAPBTN-BORDER), 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.12);
}

html,
body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    margin: calc( 0px * var(--SCALE));
    padding: calc( 0px * var(--SCALE));
    background: var(--BGCOLOR1);
    background-color: var(--BGCOLOR1);
    font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
    font-size: var(--FS2);
    overflow: hidden;
    height: 100%;
    color: var(--TXTCOLOR2);
}

select {
    font-size: var(--FS2);
    height: calc(22px * var(--SCALE));
}

#planesTable {
    font-size: var(--FS2);
    white-space: nowrap;
    cursor: default;
    border-spacing: 0;
}

/* Table box: stays inside the sidebar section; scrolls sideways only when the
   table is wider than it (class toggled by initTableScroll in script.js) */
.planes-table-scroll {
    max-width: 100%;
}

.planes-table-scroll.is-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Rows sit on the panel with a hairline between them; the data source is a
   stripe at the row start (--row-src, set per row in script.js). Emergency
   squawks keep their inline full-row colour. */
#planesTable tbody tr td {
    border-bottom: 1px solid color-mix(in srgb, var(--TXTCOLOR1) 8%, transparent);
}

#planesTable tbody tr > td:first-child {
    box-shadow: inset calc(3px * var(--SCALE)) 0 0 var(--row-src, transparent);
    padding-left: calc(7px * var(--SCALE));
}

#planesTable tbody tr:hover {
    background-color: color-mix(in srgb, var(--TXTCOLOR1) 6%, transparent);
}

#planesTable tbody tr.planeRowSelected {
    background-color: color-mix(in srgb, var(--ACCENT) 22%, transparent);
}

#layout_container {
    display: flex;
    height: 100%;
}

#selected_infoblock {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width:  calc(180px * var(--SCALE));
    height: 100%;
    overflow: auto;
    z-index: 1;
    background-color: var(--BGCOLOR1);
}

/* Desktop: the sidebar is docked, so its content is flat (no card inside it).
   Mobile turns this into a floating card over the map (see max-width: 768px). */
#sidebar-table {
    position: relative; /* Anchor for the mobile close button */
    background-color: var(--BGCOLOR1);
    padding: calc(12px * var(--SCALE)) calc(16px * var(--SCALE));
}

/* Table block, Search tab, Filters tab: flat sections inside the #sidebar-table
   card (no nested cards). Only controls and floating panels get rounded boxes;
   sections are separated by spacing and a divider. */
/* Aircraft counts: one compact row, number first, label muted */
.sidebar-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(4px * var(--SCALE)) calc(14px * var(--SCALE));
    padding: calc(2px * var(--SCALE)) 0;
}

.sidebar-stat {
    white-space: nowrap;
}

.sidebar-stat-value {
    font-size: calc(15px * var(--SCALE));
    font-weight: 600;
    color: var(--TXTCOLOR1);
    font-variant-numeric: tabular-nums;
}

.sidebar-stat-label {
    font-size: calc(12px * var(--SCALE));
    color: var(--TXTCOLOR2);
    opacity: 0.8;
}

.sidebar-table-sheet,
.sidebar-panel-sheet {
    margin-top: calc(8px * var(--SCALE));
    padding: calc(10px * var(--SCALE)) 0 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-table-sheet {
    margin-top: calc(12px * var(--SCALE));
    padding-top: calc(12px * var(--SCALE));
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

html.dark .sidebar-table-sheet {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.filters-panel-sheet .filters-active-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(8px * var(--SCALE));
    margin-bottom: calc(10px * var(--SCALE));
    padding-bottom: calc(8px * var(--SCALE));
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.filters-panel-sheet .filters-active-summary {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(11px * var(--SCALE));
    line-height: 1.4;
    color: var(--TXTCOLOR2);
}

.filters-panel-sheet .filters-clear-all-btn {
    flex: 0 0 auto;
    padding: calc(4px * var(--SCALE)) calc(10px * var(--SCALE));
}

.filters-panel-sheet .filters-clear-all-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.filters-active-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--SCALE));
}

.filters-shown-count {
    font-size: calc(12px * var(--SCALE));
    font-weight: 600;
    color: var(--TXTCOLOR1);
    font-variant-numeric: tabular-nums;
}

/* Filters tab: every filter visible, grouped into sections, applied live */
.filter-sec {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--SCALE));
    margin-bottom: calc(14px * var(--SCALE));
}

.filter-sec:last-child {
    margin-bottom: 0;
}

.filter-sec-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: calc(10.5px * var(--SCALE));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--TXTCOLOR3);
}

.filter-sec-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(5px * var(--SCALE));
}

.filter-chips-inline {
    display: contents;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--SCALE));
    font: inherit;
    font-size: calc(12px * var(--SCALE));
    line-height: 1.2;
    color: var(--TXTCOLOR1);
    background-color: var(--BGCOLOR1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: calc(4px * var(--SCALE)) calc(10px * var(--SCALE));
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}

.filter-chip:hover {
    border-color: var(--ACCENT-LIGHT);
}

.filter-chip[aria-pressed="true"] {
    background-color: var(--ACCENT);
    border-color: var(--ACCENT);
    color: #fff;
}

.filter-chip:focus-visible,
.filter-neg-toggle:focus-visible,
#altitude_filter_range input:focus-visible {
    outline: 2px solid var(--ACCENT-LIGHT);
    outline-offset: 2px;
}

/* Source / database colour as a dot rather than filling the whole chip */
.filter-chip-dot {
    width: calc(8px * var(--SCALE));
    height: calc(8px * var(--SCALE));
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.filter-chip[aria-pressed="true"] .filter-chip-dot {
    box-shadow: 0 0 0 1.5px #fff;
}

/* Altitude: two range inputs stacked on one track */
.filter-range {
    position: relative;
    height: calc(24px * var(--SCALE));
    margin: 0 calc(4px * var(--SCALE));
}

.filter-range-track,
.filter-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: var(--UI-RADIUS-SMALL);
}

.filter-range-track {
    left: 0;
    right: 0;
    background-color: rgba(128, 128, 128, 0.35);
}

.filter-range-fill {
    background-color: var(--ACCENT);
}

.filter-range input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.filter-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: calc(16px * var(--SCALE));
    height: calc(16px * var(--SCALE));
    border-radius: 50%;
    background-color: var(--BGCOLOR1);
    border: 2px solid var(--ACCENT);
    cursor: grab;
}

.filter-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: calc(13px * var(--SCALE));
    height: calc(13px * var(--SCALE));
    border-radius: 50%;
    background-color: var(--BGCOLOR1);
    border: 2px solid var(--ACCENT);
    cursor: grab;
}

.filter-range input[type="range"]::-moz-range-track {
    background: none;
}

.filter-alt-inputs {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--SCALE));
    font-size: calc(12px * var(--SCALE));
    color: var(--TXTCOLOR2);
}

/* Identity: label | keep/hide toggle | pattern */
.filter-fields {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--SCALE));
}

.filter-field {
    display: grid;
    grid-template-columns: calc(84px * var(--SCALE)) auto minmax(0, 1fr);
    align-items: center;
    gap: calc(6px * var(--SCALE));
    margin: 0;
}

.filter-field[hidden] {
    display: none;
}

.filter-field-label {
    font-size: calc(12px * var(--SCALE));
    color: var(--TXTCOLOR2);
}

.filter-field .filter-field-input {
    width: 100%;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: calc(12px * var(--SCALE));
}

.filter-field .filter-field-input::placeholder {
    opacity: 0.55;
}

.filter-field .filter-field-invalid {
    border-color: #d32f2f;
}

.filter-neg-toggle,
.filter-neg-sample {
    width: calc(26px * var(--SCALE));
    height: calc(24px * var(--SCALE));
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: calc(13px * var(--SCALE));
    color: var(--TXTCOLOR2);
    background-color: var(--BGCOLOR1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--UI-RADIUS-CONTROL);
    cursor: pointer;
    padding: 0;
}

.filter-neg-toggle[aria-pressed="true"],
.filter-neg-sample {
    color: #d32f2f;
    border-color: #d32f2f;
    background-color: rgba(211, 47, 47, 0.1);
}

.filter-neg-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.filter-neg-toggle:disabled,
.filter-field-input:disabled {
    opacity: 0.5;
}

.filter-tips {
    font-size: calc(11.5px * var(--SCALE));
    color: var(--TXTCOLOR2);
}

.filter-tips summary {
    cursor: pointer;
    color: var(--ACCENT);
}

.filter-tips table {
    width: 100%;
    border-collapse: collapse;
    margin-top: calc(4px * var(--SCALE));
}

.filter-tips td {
    padding: calc(3px * var(--SCALE)) calc(4px * var(--SCALE));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.filter-tips code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
}

html.dark .filter-chip,
html.dark .filter-neg-toggle {
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark .filter-chip[aria-pressed="true"] {
    color: var(--BGCOLOR1);
}

html.dark .filter-tips td {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sidebar-table-sheet .legend {
    padding-top: calc(8px * var(--SCALE));
    padding-bottom: calc(2px * var(--SCALE));
}

.planes-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 calc(6px * var(--SCALE));
    min-height: calc(28px * var(--SCALE));
}

.columns-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(30px * var(--SCALE));
    height: calc(30px * var(--SCALE));
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--UI-RADIUS-CONTROL);
    background-color: var(--BGCOLOR1);
    color: var(--TXTCOLOR2);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.columns-picker-btn:hover {
    background-color: var(--ACCENT);
    color: #fff;
    border-color: var(--ACCENT);
    transform: translateY(-1px);
}

.columns-picker-btn-active,
.columns-picker-btn-active:hover {
    background-color: var(--ACCENT);
    color: #fff;
    border-color: var(--ACCENT);
}

.columns-picker-panel {
    margin: 0 0 calc(8px * var(--SCALE));
    padding: calc(10px * var(--SCALE)) calc(8px * var(--SCALE));
    max-height: min(42vh, 320px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--UI-RADIUS-PANEL);
    background-color: var(--BGCOLOR1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.columns-picker-hint {
    margin: 0 0 calc(8px * var(--SCALE));
    font-size: calc(11px * var(--SCALE));
    line-height: 1.35;
    color: var(--TXTCOLOR2);
    opacity: 0.85;
}

/* visible to screen readers only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Search: one row, input (with icon) + compact button */
#tab-search #search_form {
    display: flex;
    align-items: stretch;
    gap: calc(6px * var(--SCALE));
}

#tab-search #search_form .search-input-wrapper {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

#tab-search #search_form .searchInput {
    width: 100%;
    max-width: 100%;
    height: calc(32px * var(--SCALE));
    box-sizing: border-box;
    padding-left: calc(30px * var(--SCALE));
    font-size: calc(13px * var(--SCALE));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(9px * var(--SCALE)) center;
    background-size: calc(14px * var(--SCALE));
}

/* the clear button only when there is something to clear */
#tab-search #search_input:placeholder-shown ~ .search-clear-btn {
    display: none;
}

#tab-search #search_form .search-submit-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 calc(14px * var(--SCALE));
    font-size: calc(12px * var(--SCALE));
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background-color: var(--ACCENT);
    border: 1px solid transparent;
    border-radius: var(--UI-RADIUS-CONTROL);
    cursor: pointer;
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#tab-search #search_form .search-submit-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

#tab-search #search_form .search-submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.aggregator-selected-bg:before {
    content: ' ';
    position:absolute;
    display:block;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-size: calc( 148 * var(--SCALE)) calc( 148 * var(--SCALE));
    background-repeat: no-repeat;
    background-position: calc(7px * var(--SCALE)) calc(108px * var(--SCALE));
    background-image: url("images/favicon.png");
    z-index: 2;
    opacity: 0.12;
}
#infoblock-container {
    position:relative;
    overflow: auto;
    height: 100%;
    z-index:3;
}
#sidebar_canvas {
    padding: calc( 5px * var(--SCALE));
    overflow: auto;
}

#sidebar_container {
    display: flex;
    flex-direction: column;
    left: calc( 0px * var(--SCALE)) !important;
    height: 100%;
}


#map_container {
    flex: 1 1 auto;
    position: relative;
    height: 100%;
}

#map_canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}
#iconTestCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

.sidebar_button {
    /* Compact standard size matching settings/zoom */
    width: calc( 28px * var(--SCALE));
    height: calc( 28px * var(--SCALE));
    border-radius: var(--UI-RADIUS-CONTROL);
    
    /* Using shorthand to enforce all background properties at once and prevent overrides */
    background: var(--MAPBTN-BG) !important;
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>');
    color: var(--MAPBTN-FG);
    padding: 0;
    
    /* Smaller icon (20px) creates more "spacing" inside the 28px button */
    background-size: 20px !important;

    box-shadow: var(--MAPBTN-SHADOW);
    border: 1px solid var(--MAPBTN-BORDER);
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Spacing around the button */
    margin: calc( 2px * var(--SCALE));
}

.sidebar_button:hover {
    background-color: var(--MAPBTN-HOVER) !important;
}

#toggle_sidebar_button.show_sidebar {
    /* Sidebar is hidden (on right). Want to Show (pull left). Icon should be LEFT (<). 
       Default is Left, so no transform needed. */
    transform: none;
    background-image: none;
}

#toggle_sidebar_button.hide_sidebar {
    /* Sidebar is visible. Want to Hide (push right). 
       User requested this remains visible.
       Icon: Right Chevron (>) indicating push to right.
       We need to ensure the transform is correct.
       Default icon is Left (<). So flip it.
    */
    transform: scaleX(-1);
    background-image: none;
    display: block !important;
}

#shrink_sidebar_button {
    /* Shrink -> Restore / Minimize Sidebar. 
       Icon: Restore/Arrows In style.
    */
    background: var(--MAPBTN-BG) !important;
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>');
    background-size: 20px !important;
    transform: none;
    /* Default is hidden (since we start in normal map mode usually). 
       JS will toggle `display: inline-block` or `none`. 
       However, we must allow JS `show()`/`hide()` to work, which sets element.style display.
       So we remove `display: inline-block` from CSS so it doesn't override `display: none` if usage is mixed,
       BUT wait: `!important` was not used on `display` in CSS earlier, so inline style logic should work.
       The issue is likely that `display: inline-block` in CSS sets it to visible if `style="display: none"` is removed,
       or if `hidden` class is used which sets `display: none` but specificity matters.
       
       Let's set it to `display: none` by default in CSS, and let JS override with inline style `display: inline-block` or `block`.
       Actually, standard JS `.show()` sets `display: block` or whatever content default is.
       Better:
    */
    display: none; 
}

#expand_sidebar_button {
    /* Expand -> Full Screen / Maximize Sidebar. 
       Icon: Maximize/Arrows Out style to indicate full screen mode.
    */
    background: var(--MAPBTN-BG) !important;
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M9 21H3v-6"></path><path d="M21 3l-7 7"></path><path d="M3 21l7-7"></path></svg>');
    background-size: 20px !important;
    transform: none;
    /* Default visible (normal state) */
    display: inline-block; 
    /* Add space to avoid hitting the external puller */
    margin-left: 30px;
}



/* Ensure hidden class works if used */
.hidden {
    display: none !important;
}


#zoomLevel {
    position: absolute;
    bottom: 30px;
    left: 8px;
    padding: 2px 4px;
    border-radius: var(--UI-RADIUS-SMALL);
    font-size: 10px;
    background: var(--ol-partial-background-color);
    color: var(--ol-foreground-color);
}
#credits {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    position: absolute;
    bottom: calc( 10px * var(--SCALE));
    left: calc(50% - 60px * var(--SCALE));
    z-index: 2;
    pointer-events: none;
}
.credits-text {
    font-size: var(--FS2);
}
.credits-image {
    display: block;
    width: calc( 24px * var(--SCALE));
    height: calc( 24px * var(--SCALE));
    background-size: calc( 24px * var(--SCALE)) calc( 24px * var(--SCALE));
    background-repeat: no-repeat;
    background-position: 0;
    background-color: transparent;
    border: none;
    background-image: url("images/favicon.png");
    z-index: 99;
    opacity: 0.7;
    margin: 4px;
}
.withOverflowingBackground::before {
    z-index: -1;
    background-image: url(https://www.exratione.com/assets/color_background.png);
}

#splitter {
    cursor: ew-resize;
    display: block;
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--ACCENT);
    border: none;
    opacity: 0.8;
}

#splitter-infoblock {
    cursor: ns-resize;
    display: inline-block;
    position: absolute	;
    top: calc( 0px * var(--SCALE));
    right: 0;
    margin-left: auto;
    width: calc( 24px * var(--SCALE));
    height: calc( 4px * var(--SCALE));
    background-size: calc( 24px * var(--SCALE)) calc( 25px * var(--SCALE));
    background-repeat: no-repeat;
    background-position: calc( 0px * var(--SCALE));
    border: none;
    width: 100%;
    border-bottom: #234c75;
    background-color: #65819e;
    border-bottom-width: calc( 1px * var(--SCALE));
    border-bottom-style: solid;
}

/* remove the blue highlighting around the map buttons */
.ol-control button {
    outline: none;
    z-index: 999;
    border-radius: var(--UI-RADIUS-CONTROL);
}

/* OpenLayers ships 2px / 4px corners; use ours */
.ol-control {
    border-radius: var(--UI-RADIUS-CONTROL);
}

.ol-scale-line {
    border-radius: var(--UI-RADIUS-SMALL);
}

.ol-attribution.ol-uncollapsible {
    border-radius: var(--UI-RADIUS-CONTROL) 0 0 0;
}

.ol-zoom-in, .ol-zoom-out {
    background-image: none !important;
    background-color: var(--MAPBTN-BG) !important;
    color: var(--MAPBTN-FG) !important;
    width: var(--MAPBTN-SIZE) !important;
    height: var(--MAPBTN-SIZE) !important;
    border-radius: 0 !important;
    font-size: calc(20px * var(--SCALE)) !important;
    font-weight: 500 !important;
    line-height: var(--MAPBTN-SIZE) !important; /* Center vertically */
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none;
    transition: background-color 0.15s ease;
    border: none !important;
    margin: 0 !important;
}

.ol-zoom-in:hover, .ol-zoom-out:hover {
    background-color: var(--MAPBTN-HOVER) !important;
}

/* Same fused stack as .mapBtnGroup */
.ol-zoom {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    background-color: var(--MAPBTN-DIVIDER) !important;
    border-radius: var(--UI-RADIUS-PANEL);
    overflow: hidden;
    box-shadow: var(--MAPBTN-GROUP-SHADOW);
    top: auto;
    left: auto;
    right: var(--MAPBTN-INSET);
    bottom: calc(28px * var(--SCALE));
}

.ol-attribution {
    font-size: var(--FS1);
}

/* Amber notice shell — search tab warnings + floating error_box toasts */
.sidebar-notice-amber {
    border: 1px solid rgba(180, 150, 0, 0.42);
    border-left: 4px solid #c9a000;
    border-radius: var(--UI-RADIUS-CONTROL);
    background: linear-gradient(165deg, #fffef5 0%, #fff9c4 45%, #fff176 100%);
    color: #1a1508;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(0, 0, 0, 0.08);
}

html.dark .sidebar-notice-amber {
    border-color: rgba(255, 214, 80, 0.35);
    border-left-color: #ffd54f;
    background: linear-gradient(165deg, #4a4528 0%, #3d381f 100%);
    color: #fffde7;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Search tab: no-match / airport / coordinate messages */
.search-warning {
    margin-top: calc(10px * var(--SCALE));
    padding: calc(10px * var(--SCALE)) calc(12px * var(--SCALE));
    font-size: calc(12px * var(--SCALE));
    line-height: 1.45;
}

.error_box {
    position: absolute;
    bottom: calc(90px * var(--SCALE));
    left: calc(25px * var(--SCALE));
    padding: calc(10px * var(--SCALE)) calc(12px * var(--SCALE));
    font-size: calc(12px * var(--SCALE));
    line-height: 1.45;
    font-weight: 600;
    text-align: center;
    z-index: 2000;
    max-width: min(92vw, 420px);
}

.error_box_main {
    font-weight: 700;
}

.error_box_detail {
    margin-top: calc(6px * var(--SCALE));
    font-weight: 600;
    font-size: calc(12px * var(--SCALE));
    line-height: 1.35;
    opacity: 0.9;
    word-break: break-word;
}

.error_box_detail:empty {
    display: none;
}

.inaccurate_warning {
    position: absolute; top: calc( 25px * var(--SCALE)); left: calc( 280px * var(--SCALE));
    width: 50%;
    background-color: var(--BGCOLOR1);
    padding: calc( 5px * var(--SCALE));
    border-radius: var(--UI-RADIUS-CONTROL);
}

#js_error {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background-color: rgba(33, 33, 33, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--UI-RADIUS-CONTROL);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: calc( 8px * var(--SCALE));
    font-size: var(--FS2);
    line-height: 150%;
    text-align: center;
    z-index: 999;
    white-space: pre-line;
}

#loader {
    position: absolute;
    width: 52px;
    height: 52px;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#loader_progress {
    width: 52px;
    height: 52px;
    border: 5px solid rgba(128, 128, 128, 0.2);
    border-top-color: var(--ACCENT);
    border-radius: 50%;
    animation: loader-spin 0.75s linear infinite;
}
@keyframes loader-spin {
    to { transform: rotate(360deg); }
}


/* plain header: muted labels over a divider (opaque so it covers rows when sticky) */
.aircraft_table_header {
    color: var(--TXTCOLOR2);
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
}
.aircraft_table_header td {
    background-color: var(--BGCOLOR1);
    border-bottom: 1px solid color-mix(in srgb, var(--TXTCOLOR1) 20%, transparent);
    font-weight: 600;
    font-size: smaller;
    /* header labels set the column widths: keep side padding tight so the
       default sidebar fits every column without sideways scrolling */
    padding: calc( 5px * var(--SCALE)) calc( 3px * var(--SCALE));
    text-align: center;
}

.verticalRateTriangle {
    font-family: "Courier New",monospace;
}

.icaoCodeColumn {
    font-family: monospace;
    text-transform: uppercase;
}

.plane_table_row {
    cursor: default;
    height: var(--FS2);
}

.hidden { display: none; }

.infoblock_heading a {
    text-decoration: none;
    color: var(--ACCENT-LIGHT);
    font-size: x-small;
}

.dim {
    opacity: 0.3;
    filter: alpha(opacity=30);
    /* For IE8 and earlier */
}

.infoBlockTitleText {
    margin-bottom: 2px;
    /* Ensure header is close to its input */
    font-weight: bold;
    color: var(--ACCENT);
}

html.dark .infoBlockTitleText {
    color: #fff;
}

/* Search/Jump Input Styles */
.search-input-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
}

.textInputWithClear {
    padding-right: 30px !important;
    /* Space for the X icon */
}

.search-clear-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: var(--TXTCOLOR3);
    border-radius: 50%;
    user-select: none;
    transition: color 0.2s, background-color 0.2s;
    background: transparent;
}

.search-clear-btn:hover {
    color: var(--TXTCOLOR1);
    background-color: var(--BGCOLOR2);
}

.pointer {
    cursor: pointer;
}

.sidebarButton {
    background-color: #409EDF;
    padding: calc( 4px * var(--SCALE));
    color: #FFFFFF;
    font-weight: normal;
    font-size: var(--FS2);
}

.sidebarButton:hover {
    background-color: #3c6ea3;
}

.altitudeFilterInput {
    width: calc(70px * var(--SCALE));
    height: calc(24px * var(--SCALE));
    color:var(--TXTCOLOR2);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 0 4px;
}
.searchInput {
    width: calc(100px * var(--SCALE));
    height: calc(24px * var(--SCALE));
    color: var(--TXTCOLOR2);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 0 4px;
    box-sizing: border-box;
}

.formButton {
    font-size: var(--FS2);
    color: var(--TXTCOLOR2);
    background-color: rgba(128, 128, 128, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.formButton:hover {
    background-color: rgba(128, 128, 128, 0.5);
    border-color: rgba(0, 0, 0, 0.25);
}
.formButton:disabled {
    color:var(--TXTCOLOR3);
}

select.error, textarea.error, input.error {
    color: #FF0000;
}

.layer-switcher {
    top: calc(2px * var(--SCALE)) !important;
    right: calc(50px * var(--SCALE)) !important;
    z-index: 999;
}
.layer-switcher button {
    background-size: calc(20px * var(--SCALE)) calc(20px * var(--SCALE));
    /* slightly smaller icon for 32px button */
    background-repeat: no-repeat;
    background-position: center;
    width: calc(32px * var(--SCALE));
    height: calc(32px * var(--SCALE));
    border-radius: var(--UI-RADIUS-CONTROL);
    background-color: white;
    /* Keep white for icon visibility, or use var(--ACCENT) if icon allows */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    /* .svgButton likely has no border or handled differently */
    cursor: pointer;
    transition: transform 0.1s;
    margin: calc(2px * var(--SCALE));
}

.layer-switcher button:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.layer-switcher.shown {
    top: calc(2px * var(--SCALE)) !important;
    right: calc(50px * var(--SCALE)) !important;
    width: calc(32px * var(--SCALE)) !important;
    height: calc(32px * var(--SCALE)) !important;
    overflow: visible !important;
    z-index: 999;
    display: block !important;
}

/* Force main button to stay visible and unchanged when shown */
.layer-switcher.shown.layer-switcher-activation-mode-click>button {
    display: block !important;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWRty9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') !important;
    background-color: white !important;
    border-radius: var(--UI-RADIUS-CONTROL) !important;
    right: auto !important;
    /* Let it sit naturally or reset */
    position: static !important;
    /* Reset absolute positioning if needed */
    margin: calc(2px * var(--SCALE)) !important;
    width: calc(32px * var(--SCALE)) !important;
    height: calc(32px * var(--SCALE)) !important;
}

.layer-switcher-close-x {
    /* Styles handled by unified close button class */
}

.layer-switcher-close-x:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Default layer switcher panel hidden; we use the Layers tab of #map_panel instead */
.layer-switcher .panel {
    display: none !important;
}
.layer-switcher.shown .panel {
    display: none !important;
    position: absolute;
    right: 0 !important;
    top: calc(38px * var(--SCALE) + 12px) !important;
    width: 300px !important;
    max-width: 85vw !important; /* Prevent overflow on small screens */
    max-height: 80vh;
    height: auto !important;
    min-height: 100px;
    overflow-y: auto;
    overflow-x: hidden; /* Disable horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    touch-action: pan-y; /* Explicitly allow vertical scroll, ignore map gestures */
    overscroll-behavior: contain; /* Prevent scroll chaining to the map */
    background-color: var(--BGCOLOR1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 16px;
    border-radius: var(--UI-RADIUS-PANEL);
    border: 1px solid rgba(0, 0, 0, 0.1);
    white-space: normal;
    text-align: left;
}

.layer-switcher.shown ul {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.layer-switcher.shown li:not(.group) {
    padding: 10px;
    margin-bottom: 8px;
    background-color: var(--BGCOLOR2);
    border-radius: var(--UI-RADIUS-CONTROL);
    border: 1px solid rgba(128, 128, 128, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.layer-switcher.shown li:not(.group):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-color: var(--ACCENT);
}

.layer-switcher.shown li.group {
    margin-bottom: 12px;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    /* Reverting flexbox which broke the list layout */
    display: block; 
    position: relative; /* Ensure absolute button is relative to this container */
}

.layer-switcher.shown li.group>label {
    display: block;
    /* Reverting flex: 1 */
    font-weight: bold;
    color: var(--ACCENT);
    padding: 8px 12px;
    /* Add padding-left to make room for the collapse button if it's absolute, 
       OR ensures they sit correctly if flow. 
       Assuming button is floated or inline. */
    padding-left: 35px; /* Increase to 35px to clear the 24px button completely */
    margin-bottom: 8px;
    font-size: 1.1em;
    border-bottom: 1px solid var(--ACCENT);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--UI-RADIUS-CONTROL);
}

.layer-switcher.shown li input {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.8;
}

.layer-switcher.shown li label {
    cursor: pointer;
    font-weight: 500;
    color: var(--TXTCOLOR1);
    flex: 1;
}

/* Single "Aircraft positions" row: hide the icon/webgl sub-row and fold button */
.layer-switcher.shown li.group.aircraft-positions-single-row > ul {
    display: none !important;
}
.layer-switcher.shown li.group.aircraft-positions-single-row > button {
    display: none !important;
}

/* new css */
.dateTime
{
    font-weight: bold;
    font-size: calc( 12px * var(--SCALE));
    line-height: calc( 26px * var(--SCALE));
    color: #FFFFFF;
    color: rgb(255, 255, 255);
    text-align: right;
    display: inline-block;
    padding-right: calc(20px * var(--SCALE));
    padding-left: calc(20px * var(--SCALE));
}

@media screen and (max-width: calc(1000px * var(--SCALE))) {
    .dateTime {
        display: none;
    }
}

.sectionTitle {
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #e8e8e8;
    background: var(--ACCENT);
}

.section-title-content {
    padding: calc( 3px * var(--SCALE)) calc( 20px * var(--SCALE));
}

.legend
{
    font-size: 110%;
    color:var(--TXTCOLOR2);
    display: flex;
    flex-wrap: wrap;
    padding-top: calc( 10px * var(--SCALE));
}


.settingsText
{
    font-size: calc( 14px * var(--SCALE));
    line-height: calc( 20px * var(--SCALE));

}

.link, .link a {
    color: var(--TXTCOLOR1);
    text-decoration: underline;
}

.share-link-icon {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s;
    opacity: 0.8;
}

.share-link-icon:hover {
    transform: scale(1.2);
    opacity: 1;
    color: var(--ACCENT-LIGHT) !important;
}

.share-link-icon:active {
    transform: scale(0.95);
}

.share-link-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Copy feedback: swap share icon for a check in the same slot (no size change
   under the cursor) and show the label beside the button, not inside it. */
.share-icon-done,
.share-copied-label {
    display: none;
}

.linkCopied .share-icon-idle {
    display: none;
}

.linkCopied .share-icon-done {
    display: inline-flex;
    color: #4CAF50;
}

.linkCopied .share-copied-label {
    display: inline;
    margin-left: calc(4px * var(--SCALE));
    color: #4CAF50;
    font-weight: bold;
}

#header_side {
    position: absolute;
    right: var(--MAPBTN-INSET);
    top: var(--MAPBTN-INSET);
    margin: 0;
    z-index: 9;
}
/* Sits left of the side column, top-aligned with it */
#header_top {
    position: absolute;
    right: calc(var(--MAPBTN-INSET) + var(--MAPBTN-SIZE) + var(--MAPBTN-GAP));
    top: var(--MAPBTN-INSET);
    margin: 0;
    z-index: 9;
}

.svgButton {
    background-color: var(--MAPBTN-BG);
    color: var(--MAPBTN-FG);
    border: 1px solid var(--MAPBTN-BORDER);
    box-sizing: border-box;
    width: calc( 28px * var(--SCALE));
    height: calc( 28px * var(--SCALE));
    cursor: pointer;
    background-position: center;
    margin: calc( 2px * var(--SCALE));
    display: inline-block;
    border-radius: var(--UI-RADIUS-CONTROL);
    box-shadow: var(--MAPBTN-SHADOW);
    transition: background-color 0.15s ease;
    vertical-align: top;
}

.svgButton:hover,
.button:hover {
    background-color: var(--MAPBTN-HOVER);
}

.fullscreenButton {
    --icon: url('images/fullscreen.svg');
    background-size: 20px;
    background-repeat: no-repeat;
}

.settingsCog {
    width: calc(28px * var(--SCALE));
    height: calc(28px * var(--SCALE));
    cursor: pointer;
    --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');

    /* Center the image */
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;

    /* Spacing - match .button margin */
    margin: calc(2px * var(--SCALE));

    /* Modern Look matching .button */
    border-radius: var(--UI-RADIUS-CONTROL);
    align-self: center;
}

.layersButton {
    /* Layers icon: stroked stacked layers SVG provided by user */
    --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'></polygon><polyline points='2 17 12 22 22 17'></polyline><polyline points='2 12 12 17 22 12'></polyline></svg>");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.locationButton {
    /* Target style: Filled center, Ring, 4 Ticks */
    /* Adjusted spacing: Inner radius 3 (was 4) to increase gap to ring (r=7) */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='white'/%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='white' stroke-width='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='5' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3Cline x1='12' y1='19' x2='12' y2='21' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3Cline x1='3' y1='12' x2='5' y2='12' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3Cline x1='19' y1='12' x2='21' y2='12' stroke='white' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.militaryButton {
    /* Military Rank style: Star + Chevrons (User Reference) */
    /* Hollow Star (stroke) to match image, Thick Chevrons for visibility */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- Star (Top) --%3E%3Cpolygon points='12 1 14.5 6 20 6 16 9.5 17.5 14.5 12 12 6.5 14.5 8 9.5 4 6 9.5 6' /%3E%3C!-- Chevrons (Bottom) --%3E%3Cpolyline points='4 15 12 19 20 15' /%3E%3Cpolyline points='4 19 12 23 20 19' /%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.replayButton {
    --icon: url('images/replay-white.svg');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}


.button {
    background-color: var(--MAPBTN-BG);
    color: var(--MAPBTN-FG);
    border: 1px solid var(--MAPBTN-BORDER);
    box-sizing: border-box;
    width: calc(28px * var(--SCALE));
    height: calc(28px * var(--SCALE));
    border-radius: var(--UI-RADIUS-CONTROL);
    margin: calc(2px * var(--SCALE));
    display: inline-block;
    cursor: pointer;
    text-align: center;
    background-clip: padding-box;
    box-shadow: var(--MAPBTN-SHADOW);
    transition: background-color 0.15s ease;
    vertical-align: top;
}


.buttonContainer {
    display: block;
    margin: calc( 1px * var(--SCALE));
    text-align: center;
}

/* Map buttons as fused stacks (Apple / Google Maps style). The group paints
   the divider colour and its buttons sit 1px apart on it, so the hairlines come
   from the flex gap and a button hidden with display:none leaves no stray line. */
#header_side .buttonContainer,
#header_top .buttonContainer {
    display: flex;
    flex-direction: column;
    gap: var(--MAPBTN-GAP);
    margin: 0;
}

.mapBtnGroup {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--MAPBTN-DIVIDER);
    border-radius: var(--UI-RADIUS-PANEL);
    overflow: hidden;
    box-shadow: var(--MAPBTN-GROUP-SHADOW);
}

#header_top .mapBtnGroup {
    flex-direction: row;
}

/* the wrapper is only there so JS can hide the toggle; lay out the button itself */
.mapBtnGroup #toggle_sidebar_control {
    display: contents;
}

.mapBtnGroup > .button,
.mapBtnGroup > .svgButton,
.mapBtnGroup #toggle_sidebar_button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--MAPBTN-SIZE);
    height: var(--MAPBTN-SIZE);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--MAPBTN-BG) !important;
    color: var(--MAPBTN-FG);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* beats #toggle_sidebar_button.hide_sidebar { display: block !important } */
.mapBtnGroup #toggle_sidebar_button {
    display: flex !important;
}

.mapBtnGroup > .button:hover,
.mapBtnGroup > .svgButton:hover,
.mapBtnGroup #toggle_sidebar_button:hover {
    background: var(--MAPBTN-HOVER) !important;
}

.mapBtnGroup > .button:active,
.mapBtnGroup > .svgButton:active,
.mapBtnGroup #toggle_sidebar_button:active {
    background: color-mix(in srgb, var(--TXTCOLOR1) 16%, var(--BGCOLOR1)) !important;
}

/* toggled on: accent-tinted cell with an accent icon */
.mapBtnGroup > .button.activeButton,
.mapBtnGroup > .svgButton.activeButton,
.mapBtnGroup > .button.activeButton:hover,
.mapBtnGroup > .svgButton.activeButton:hover {
    background: color-mix(in srgb, var(--ACCENT) 14%, var(--MAPBTN-BG)) !important;
    color: var(--ACCENT);
}

.mapBtnGroup > .svgButton::before,
.mapBtnGroup > .button::before,
.mapBtnGroup #toggle_sidebar_button::before,
.mapBtnGroup > .button > svg {
    width: var(--MAPBTN-ICON);
    height: var(--MAPBTN-ICON);
    margin: 0;
}

.mapBtnGroup .buttonText {
    margin: 0;
    font-size: calc(14px * var(--SCALE));
    font-weight: 600;
    line-height: 1;
}

.buttonText
{
    font-weight: bold;
    font-size: calc( 15px * var(--SCALE));
    line-height:  calc( 26px * var(--SCALE));
    text-align: center;
    margin: calc( 5px * var(--SCALE));
}

/* toggled on: the only place map buttons use the accent colour */
.button.activeButton,
.svgButton.activeButton,
.button.activeButton:hover,
.svgButton.activeButton:hover {
    background-color: var(--ACCENT);
    border-color: transparent;
    color: #fff;
}

/* Icons are masks filled with the text colour, so one icon works on the
   light / dark surface and turns white on the accent when switched on */
.militaryButton,
.locationButton,
.layersButton,
.settingsCog,
.fullscreenButton,
.replayButton,
.sidebar_button {
    background-image: none;
}

.militaryButton::before,
.locationButton::before,
.layersButton::before,
.settingsCog::before,
.fullscreenButton::before,
.replayButton::before,
.sidebar_button::before {
    content: '';
    display: block;
    width: calc(20px * var(--SCALE));
    height: calc(20px * var(--SCALE));
    margin: calc(3px * var(--SCALE)) auto 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    pointer-events: none;
}

.sidebar_button::before {
    margin: 0 auto;
}

#highlighted_infoblock {
    background-color: var(--BGCOLOR1);
    position: absolute;
    left: calc( 40px * var(--SCALE));
    top: calc( 60px * var(--SCALE));
    min-width:  calc(132px * var(--SCALE));
    padding-right: calc( 5px * var(--SCALE));
    border-radius: var(--UI-RADIUS-PANEL);
    box-shadow: 0 calc( 4px * var(--SCALE)) calc( 16px * var(--SCALE)) rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 9999;
    display: none;
}

.highlightedTitle {
    border-bottom: calc(1px * var(--SCALE)) solid var(--ACCENT);
    display: inline-block;
    width: 90%;
}

.identLarge {
    font-size: calc( 22px * var(--SCALE));
    line-height: calc( 24px * var(--SCALE));
    color: var(--TXTCOLOR1);
    font-weight: lighter;
}

.identMedium {
    font-size: calc( 17px * var(--SCALE));
    line-height: calc( 22px * var(--SCALE));
    color: var(--TXTCOLOR1);
    font-weight: lighter;
}

.identSmall {
    font-size: calc( 14px * var(--SCALE));
    font-weight: bold;
    color: var(--TXTCOLOR1);
}

.infoSectionTable {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    cursor: default;
}

table.infoSectionTable tr td {
    padding: 0;
    margin: 0;
}

.rSpacer {
    padding-top: calc( 3px * var(--SCALE));
    padding-bottom: calc( 3px * var(--SCALE));
}

.infoHeading {
    margin-top: calc( 2px * var(--SCALE));
    margin-bottom: calc( 2px * var(--SCALE));
    display: inline-block;
}

.infoHeading sub {
    font-weight: normal;
}

.infoData {
    margin-top: calc( 2px * var(--SCALE));
    margin-bottom: calc( 2px * var(--SCALE));
    float: right;
    text-align: right;
    display: inline-block;
}

.infoBlockSection {
    padding-top: calc(7px * var(--SCALE));
    padding-bottom: calc(7px * var(--SCALE));
    padding-left: calc(7px * var(--SCALE));
    padding-right: calc(7px * var(--SCALE));
}

/* Compact filter blocks: title + actions on one line, controls on next */
.filterBlock {
    background-color: var(--BGCOLOR2);
    border-radius: var(--UI-RADIUS-CONTROL);
    border: 1px solid rgba(128, 128, 128, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 6px 8px !important;
}

/* Dark mode: lift inputs off the flat sidebar with BGCOLOR2 + light edge */
html.dark .searchInput,
html.dark .altitudeFilterInput {
    background-color: var(--BGCOLOR2);
    color: var(--TXTCOLOR1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark .searchInput::placeholder,
html.dark .altitudeFilterInput::placeholder {
    color: var(--TXTCOLOR3);
    opacity: 1;
}

html.dark .searchInput:focus,
html.dark .altitudeFilterInput:focus {
    border-color: rgba(255, 255, 255, 0.42);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--ACCENT);
}

html.dark .filters-panel-sheet .filters-active-bar {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html.dark .filters-panel-sheet .filters-clear-all-btn {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--TXTCOLOR1);
}

html.dark .filters-panel-sheet .filters-clear-all-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

html.dark .mobile_table_toggle.formButton {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--TXTCOLOR1);
}

html.dark .mobile_table_toggle.formButton:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.largeText a {
    font-weight: bold;
    color: var(--TXTCOLOR1);
    font-size: var(--FS3);
}

.largeText {
    font-weight: bold;
    color: var(--TXTCOLOR1);
    font-size: var(--FS3);
}

.infoBlockTitleText {
    font-weight: bold;
    color:var(--TXTCOLOR3);
}



/* legend under the table: dot + label, like the Filters source chips */
.legendTitle {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--SCALE));
    font-size: calc(12px * var(--SCALE));
    line-height: 1.6;
    margin-right: calc(12px * var(--SCALE));
}

/* Toggle rows outside the map panel (e.g. the table column picker) */
.settingsOptionContainer {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 13px;
    min-width: 0;
}

/* ==========================================================================
   Map panel: Layers / Labels / Settings as tabs of one panel, docked beside
   the map buttons so the map stays visible and updates live behind it.
   ========================================================================== */
#map_panel {
    --PANEL-FG: var(--TXTCOLOR1);
    --PANEL-MUTED: var(--TXTCOLOR3);
    --PANEL-GROUP: color-mix(in srgb, var(--TXTCOLOR1) 5%, var(--BGCOLOR1));
    --PANEL-LINE: color-mix(in srgb, var(--TXTCOLOR1) 9%, transparent);
    --PANEL-FILL: color-mix(in srgb, var(--TXTCOLOR1) 6%, transparent);
    --PANEL-TRACK: color-mix(in srgb, var(--TXTCOLOR1) 20%, var(--BGCOLOR1));
    --PANEL-DANGER: #c62828;
    display: none;
    flex-direction: column;
    position: absolute;
    /* below the top button cluster, left of the side column */
    top: calc(var(--MAPBTN-INSET) * 2 + var(--MAPBTN-SIZE));
    right: calc(var(--MAPBTN-INSET) + var(--MAPBTN-SIZE) + var(--MAPBTN-GAP));
    bottom: var(--MAPBTN-INSET);
    width: min(calc(360px * var(--SCALE)), calc(100% - 80px));
    z-index: 9999;
    overflow: hidden;
    background: var(--BGCOLOR1);
    color: var(--PANEL-FG);
    border-radius: var(--UI-RADIUS-PANEL);
    box-shadow: 0 0 0 0.5px var(--MAPBTN-BORDER), 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.22);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(14px * var(--SCALE));
    line-height: 1.35;
}

html.dark #map_panel {
    --PANEL-DANGER: #ef9a9a;
}

#map_panel.mapPanelOpen {
    display: flex;
}

#map_panel * {
    box-sizing: border-box;
    font-family: inherit;
}

/* the map button whose tab is showing */
.mapBtnGroup > .mapPanelOpener {
    box-shadow: inset 0 0 0 2px var(--ACCENT);
}

.mapPanelHeader {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
}

/* segmented control: the panel tabs and the map region switcher */
.mapPanelTabs,
.mapPanelSegmented {
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 2px;
    background: var(--PANEL-FILL);
    border-radius: calc(var(--UI-RADIUS-CONTROL) + 1px);
}

.mapPanelTabs button,
.mapPanelSegmented button {
    border: 0;
    background: none;
    border-radius: calc(var(--UI-RADIUS-CONTROL) - 1px);
    padding: 6px 8px;
    font-size: calc(13px * var(--SCALE));
    font-weight: 500;
    color: var(--PANEL-MUTED);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mapPanelTabs button:hover,
.mapPanelSegmented button:hover {
    color: var(--PANEL-FG);
}

.mapPanelTabs button[aria-selected="true"],
.mapPanelSegmented button[aria-selected="true"] {
    background: var(--BGCOLOR1);
    color: var(--PANEL-FG);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

html.dark .mapPanelTabs button[aria-selected="true"],
html.dark .mapPanelSegmented button[aria-selected="true"] {
    background: color-mix(in srgb, var(--TXTCOLOR1) 16%, var(--BGCOLOR1));
}

.mapPanelSegmented {
    margin-bottom: 4px;
}

.mapPanelClose {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--UI-RADIUS-CONTROL);
    background: var(--PANEL-FILL);
    color: var(--PANEL-MUTED);
    cursor: pointer;
}

.mapPanelClose::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mapPanelClose:hover {
    color: var(--PANEL-FG);
    background: color-mix(in srgb, var(--TXTCOLOR1) 12%, transparent);
}

.mapPanelTabs button:focus-visible,
.mapPanelSegmented button:focus-visible,
.mapPanelClose:focus-visible,
#map_panel .settingsOptionContainer:focus-visible,
.layerTile:focus-visible {
    outline: 2px solid var(--ACCENT);
    outline-offset: -2px;
}

.mapPanelPane {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 12px 16px;
}

.mapPanelPane[hidden] {
    display: none;
}

/* Settings search, pinned to the top while the list scrolls */
.mapPanelSearch {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding-bottom: 4px;
    background: var(--BGCOLOR1);
}

.mapPanelSearch::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    background-color: var(--PANEL-MUTED);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.mapPanelSearch input {
    width: 100%;
    height: 36px;
    padding: 0 10px 0 34px;
    border: 0;
    border-radius: calc(var(--UI-RADIUS-CONTROL) + 2px);
    background: var(--PANEL-GROUP);
    color: var(--PANEL-FG);
    font-size: calc(14px * var(--SCALE));
    outline: none;
}

.mapPanelSearch input::placeholder {
    color: var(--PANEL-MUTED);
}

.mapPanelSearch input:focus {
    box-shadow: 0 0 0 2px var(--ACCENT);
}

/* Sections: small heading, then an inset group of rows */
#map_panel .settingsSectionHeader {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 14px 4px 6px;
    font-size: calc(11px * var(--SCALE));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--PANEL-MUTED);
}

#map_panel .settingsSections > .settingsSection:first-child > .settingsSectionHeader,
#layers_picker_content > .settingsSection:first-child > .settingsSectionHeader {
    padding-top: 6px;
}

.layerCurrentName {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#map_panel .settingsSectionContent {
    background: var(--PANEL-GROUP);
    border-radius: var(--UI-RADIUS-PANEL);
    overflow: hidden;
}

/* Rows overlap by 1px and draw their divider on top, so the first visible
   row's divider is clipped by the group whatever is hidden above it */
#map_panel .settingsOptionContainer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: calc(44px * var(--SCALE));
    margin: -1px 0 0;
    padding: 9px 14px;
    border: 0;
    border-top: 1px solid var(--PANEL-LINE);
    background: none;
    color: var(--PANEL-FG);
    font-size: calc(14px * var(--SCALE));
    text-align: left;
    cursor: pointer;
}

#map_panel .settingsOptionContainer:hover {
    background: var(--PANEL-FILL);
}

#map_panel .settingsStatic {
    cursor: default;
}

#map_panel .settingsStatic:hover {
    background: none;
}

#map_panel .settingsSliderContainer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 16px;
}

#map_panel .settingsSliderContainer .ui-slider {
    margin: 0 8px;
}

#map_panel .settingsText {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1px;
    font-size: inherit;
    line-height: 1.35;
    letter-spacing: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.settingsHint {
    font-size: calc(12px * var(--SCALE));
    color: var(--PANEL-MUTED);
}

.settingsSubHeader {
    margin-top: -1px;
    padding: 10px 14px 4px;
    border-top: 1px solid var(--PANEL-LINE);
    font-size: calc(12px * var(--SCALE));
    font-weight: 600;
    color: var(--PANEL-MUTED);
}

#map_panel .settingsDangerRow .settingsText {
    color: var(--PANEL-DANGER);
    font-weight: 500;
}

.settingsSearchHidden {
    display: none !important;
}

.settingsNoMatch {
    padding: 24px 8px;
    text-align: center;
    color: var(--PANEL-MUTED);
    font-size: calc(13px * var(--SCALE));
}

/* Switches (the markup is still .settingsCheckbox, so every Toggle gets one) */
#map_panel .settingsCheckbox {
    order: 2;
    flex: none;
    position: relative;
    width: calc(38px * var(--SCALE));
    height: calc(22px * var(--SCALE));
    margin: 0;
    float: none;
    border: 0;
    border-radius: calc(11px * var(--SCALE));
    background: var(--PANEL-TRACK);
    background-image: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

#map_panel .settingsCheckbox::after {
    content: '';
    position: absolute;
    display: block;
    left: 2px;
    top: 2px;
    width: calc(18px * var(--SCALE));
    height: calc(18px * var(--SCALE));
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: none;
    transition: transform 0.15s ease;
}

#map_panel .settingsCheckboxChecked {
    background: var(--ACCENT);
}

#map_panel .settingsCheckboxChecked::after {
    transform: translateX(calc(16px * var(--SCALE)));
}

/* label fields: the real checkbox stays for the <label>, the switch shows state */
#map_panel .labelConfigInput {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

#map_panel .labelConfigInput:focus-visible + .settingsCheckbox {
    outline: 2px solid var(--ACCENT);
    outline-offset: 2px;
}

/* fields do nothing while labels are off */
#labelConfigMenu:has(#labelToggle_enabled:not(:checked)) .labelFieldsSection .settingsSectionContent {
    opacity: 0.5;
}

/* Base maps as picture tiles */
.layerTiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
}

.layerTile {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--PANEL-FG);
    text-align: left;
    cursor: pointer;
}

.layerTileThumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    overflow: hidden;
    background: var(--PANEL-GROUP);
    box-shadow: 0 0 0 1px var(--PANEL-LINE);
    transition: box-shadow 0.15s ease;
}

.layerTileThumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layerTileNoThumb {
    background: hsl(var(--thumb-hue) 45% 88%);
    color: hsl(var(--thumb-hue) 40% 30%);
    font-size: calc(18px * var(--SCALE));
    font-weight: 700;
    letter-spacing: 0.04em;
}

html.dark .layerTileNoThumb {
    background: hsl(var(--thumb-hue) 30% 22%);
    color: hsl(var(--thumb-hue) 50% 80%);
}

.layerTile:hover .layerTileThumb {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ACCENT) 45%, transparent);
}

.layerTileSelected .layerTileThumb {
    box-shadow: 0 0 0 2px var(--ACCENT);
}

.layerTileSelected .layerTileThumb::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ACCENT) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.layerTileName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(12px * var(--SCALE));
    font-weight: 500;
}

.layerTileSelected .layerTileName {
    color: var(--ACCENT);
}

@media (prefers-reduced-motion: reduce) {
    #map_panel .settingsCheckbox,
    #map_panel .settingsCheckbox::after,
    .layerTileThumb {
        transition: none;
    }
}

/* Phones: a bottom sheet over the map */
@media screen and (max-width: 768px) {
    #map_panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 80vh;
        z-index: 10000;
        border-radius: var(--UI-RADIUS-PANEL) var(--UI-RADIUS-PANEL) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .layerTiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Close buttons — absolute top-right (selected aircraft) */
.settingsCloseBox,
.infoblockCloseBox,
.layer-switcher-close-x {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.1);
    border: none;
    border-radius: 50%;
    transition: background-color 0.2s, transform 0.2s;
    z-index: 100;
}

.settingsCloseBox:hover,
.infoblockCloseBox:hover,
.layer-switcher-close-x:hover {
    background-color: rgba(128, 128, 128, 0.2);
    transform: scale(1.05);
}

.settingsCloseBox::after,
.infoblockCloseBox::after,
.layer-switcher-close-x::after {
    content: '\2715'; /* Clean bold X */
    font-size: 18px;
    font-weight: bold;
    color: var(--TXTCOLOR1);
    line-height: 1;
}

/* Selected aircraft panel — smaller X, previous corner placement */
.infoblockCloseBox {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background-color: transparent;
}

.infoblockCloseBox:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: scale(1.1);
}

.infoblockCloseBox::after {
    font-size: 16px;
    opacity: 0.7;
}


.settingsText {
    line-height: 1.4;
    font-size: 13px;
    color: var(--TXTCOLOR2);
    letter-spacing: 0.2px;
}

#altitude_chart {
    float: right;
    width: calc(100% - calc( 5px * var(--SCALE)));
    max-width:  calc(520px * var(--SCALE));
    right: calc( 92px * var(--SCALE));
    /* Closer to map bottom than before; ~clear of .ol-scale-line */
    bottom: calc(34px * var(--SCALE));
    background-color: transparent !important;
    overflow: visible;
}

/* Credits strip: tighter than before but still clears icon + text */
body.map-credits-visible #altitude_chart {
    bottom: calc(44px * var(--SCALE) + 1.85em);
}

#altitude_chart_button {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    display: block;
    color: var(--TXTCOLOR2);
    cursor: default;
    border-radius: 0;
    overflow: visible;
}

/* OpenLayers adds outline on .ol-control button:hover — disable for this static legend */
#altitude_chart_button:hover,
#altitude_chart_button:focus,
#altitude_chart_button:focus-visible,
#altitude_chart_button:active {
    outline: none;
    box-shadow: none;
    color: var(--TXTCOLOR2);
}


#selected_flightaware_link a {
    background-color: var(--ACCENT-LIGHT);
    color: white;
    text-decoration: none;
    padding: calc( 4px * var(--SCALE));
    line-height: calc( 22px * var(--SCALE));
    border-radius: var(--UI-RADIUS-CONTROL);
}
.bottom-info-container {
    padding-top: calc( 10px * var(--SCALE));
    padding-bottom: calc( 10px * var(--SCALE));
    text-align: center;
    color: var(--TXTCOLOR1);
    line-height: calc( 18px * var(--SCALE));
}
.bottom-info-container img {
    vertical-align: middle;
}
.bottom-info-container .bottom-info-text {
    vertical-align: middle;
    display: inline;
}

.ui-tabs {
    background-color: var(--BGCOLOR1);
}
.ui-tabs-nav {
    background-color: var(--BGCOLOR2);
}
.ui-tabs-panel {
    background-color: var(--BGCOLOR1);
}

/* Search / Filters: flat section with a segmented control on top (no nested card) */
#tabs.ui-sidebar-tabs {
    margin-top: calc(8px * var(--SCALE));
    padding: 0; /* jQuery UI .ui-tabs adds .2em, which insets the tab buttons from the content */
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: calc(6px * var(--SCALE));
    background-color: transparent;
    border: none;
    border-radius: 0;
}

/* jQuery UI's clearfix ::before/::after become flex items and add a gap at each end */
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav::before,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav::after {
    display: none;
}

/* jQuery UI themes paint <li> (ui-state-active / hover) — strip so only our <a> buttons show color */
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-tabs-tab,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-default,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-active,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-tabs-active,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-hover,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-focus {
    flex: 1 1 0;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    top: auto;
    position: relative;
    border: none !important;
    border-bottom-width: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Inactive = .formButton-like; active = .search-submit-btn — !important beats jQuery UI link states */
/* Search / Filters: segmented control. One rounded track; the active view is a
   raised neutral segment (no accent fill: accent is kept for actions). */
#tabs.ui-sidebar-tabs.ui-tabs > ul.ui-tabs-nav.ui-widget-header {
    padding: calc(3px * var(--SCALE));
    gap: calc(3px * var(--SCALE));
    /* derived from the theme so it reads on any panel colour (e.g. grey #313131 installs):
       a step from the panel towards the text colour */
    background: color-mix(in srgb, var(--TXTCOLOR1) 10%, var(--BGCOLOR1));
    border-radius: var(--UI-RADIUS-CONTROL);
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li > a.ui-tabs-anchor {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    float: none !important;
    padding: calc(6px * var(--SCALE)) calc(12px * var(--SCALE)) !important;
    margin: 0 !important;
    /* nested inside the track: track radius minus its padding */
    border-radius: calc(var(--UI-RADIUS-CONTROL) - 3px * var(--SCALE)) !important;
    font-size: calc(12px * var(--SCALE)) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer !important;
    color: var(--TXTCOLOR2) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li:not(.ui-tabs-active) > a.ui-tabs-anchor:hover {
    color: var(--TXTCOLOR1) !important;
    background: color-mix(in srgb, var(--TXTCOLOR1) 7%, transparent) !important;
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-tabs-active > a.ui-tabs-anchor,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-active > a.ui-tabs-anchor,
#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li[aria-selected="true"] > a.ui-tabs-anchor {
    color: var(--TXTCOLOR1) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* dark themes: raised = lighter than the track, again derived from the theme */
html.dark #tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-tabs-active > a.ui-tabs-anchor,
html.dark #tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li.ui-state-active > a.ui-tabs-anchor,
html.dark #tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li[aria-selected="true"] > a.ui-tabs-anchor {
    background: color-mix(in srgb, var(--TXTCOLOR1) 24%, var(--BGCOLOR1)) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav > li > a.ui-tabs-anchor:focus-visible {
    outline: 2px solid var(--ACCENT-LIGHT);
    outline-offset: 1px;
}

#tabs.ui-sidebar-tabs .ui-tabs-panel {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

#tabs.ui-sidebar-tabs .sidebar-panel-sheet {
    margin-top: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
}
.greyButton {
    background-color: var(--BGCOLOR2);
    cursor: pointer;
    padding: 8px 12px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: calc(15px * var(--SCALE));
    font-weight: bold;
    color: var(--TXTCOLOR1);
    border-radius: var(--UI-RADIUS-CONTROL);
    margin-bottom: 4px;
    transition: background-color 0.2s;
}

.greyButton:hover {
    filter: brightness(0.95);
}

.greyButton:after {
    content: '\02795\FE0E'; /* Unicode character for "plus" sign (+) */
    float: right;
    margin-left: calc( 5px * var(--SCALE));
}
.greyButton.active:after {
    content: "\2796\FE0E"; /* Unicode character for "minus" sign (-) */
}

.ui-tabs-nav li a:focus {
    outline: none;
}

.ui-tabs .ui-tabs-panel {
    padding: 1em 0.5em;
}
.ui-tabs .ui-tabs-nav {
    padding: 2px;
    margin: 1px;
    margin-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0px;
}

#tabs.ui-sidebar-tabs.ui-tabs .ui-tabs-panel {
    padding: 0;
}

#tabs.ui-sidebar-tabs.ui-tabs .ui-tabs-nav {
    padding: 0;
    margin: 0;
    margin-bottom: 0;
}

#tabs.ui-sidebar-tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
}

#tabs.ui-sidebar-tabs > ul.ui-tabs-nav.ui-widget-header {
    background: transparent;
    border: none;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-radius: var(--UI-RADIUS-CONTROL);
}

.ui-widget-content .ui-selectable .ui-selected {
    background-color: color-mix(in srgb, var(--ACCENT-LIGHT) 20%, transparent) !important;
    border-color: var(--ACCENT-LIGHT) !important;
    color: inherit;
}

#sortableColumns {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    /* Full width of container */
    display: grid;
    /* Use CSS Grid */
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    /* Compact grid, min 110px wide */
    gap: 6px;
    /* Tight spacing */
}

#sortableColumns li {
    margin: 0;
    padding: 6px 4px;
    /* Very compact padding */
    border: 1px solid var(--ACCENT);
    border-radius: var(--UI-RADIUS-CONTROL);
    /* Rounded corners */
    background-color: var(--BGCOLOR2);
    text-align: center;
    cursor: pointer;
    /* Show clickable cursor */
    user-select: none;
    transition: all 0.2s ease;
    /* Smooth hover effect */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: calc(13px * var(--SCALE));
    /* Slightly smaller text */
}

#sortableColumns li:hover {
    background-color: var(--ACCENT);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Selected State for Columns - using the class applied by JS */
#sortableColumns li.settingsCheckboxChecked {
    background-color: var(--ACCENT);
    color: white;
    border-color: var(--ACCENT);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    font-weight: 700;
}

/* Ensure hover doesn't weirdly interact with checked state */
#sortableColumns li.settingsCheckboxChecked:hover {
    filter: brightness(1.1);
}

#sortableColumns li.ui-sortable-helper {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}

.aircraft_media_panel {
    text-align: center;
    width: 100%;
}
#photo_container td {
    text-align: center;
}

#copyrightInfo {
    position: Relative;
    font-size: var(--FS1);
    text-align: center;
}
/* Center photos and silhouettes; sil alone gets the white card frame */
#selected_photo,
#selected_photo.aircraft_media_frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
#airplanePhoto {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
a.aircraft_photo_link {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

/* Type silhouette: bordered card only (not used for API photos) */
.aircraft_media_sil {
    display: inline-block;
    max-width: 72%;
    margin: 2px auto 0 auto;
    background: #fff;
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 6px 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    vertical-align: middle;
}
.aircraft_media_sil img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 132px;
}

/* Silent placeholder while photo JSON is loading */
.aircraft_media_pending {
    display: block;
    min-height: 1px;
}

#photo_container.photo_row_sil #selected_photo {
    text-align: center;
}
.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    background: var(--BGCOLOR1);
    border: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--ACCENT);
    /* base theme also sets border: 1px solid #003eff — strip the stock blue */
    border-color: var(--ACCENT);
}

/* base theme focus ring is a hardcoded blue glow; follow the accent instead */
.ui-visual-focus {
    box-shadow: 0 0 3px 1px var(--ACCENT);
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
  color:var(--TXTCOLOR2);
}
 .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  color:var(--TXTCOLOR2);
}
.ui-widget-header, .ui-widget.ui-widget-content {
    border: none;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    color:var(--TXTCOLOR2);
}
.ui-widget-content {
  color:var(--TXTCOLOR2);
}

.ui-slider {
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: var(--UI-RADIUS-CONTROL);
    height: 6px;
    border: none;
    margin: 8px 4px 14px;
}
.ui-slider .ui-slider-handle {
    background-color: var(--ACCENT, #4a8fe7);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    top: -5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.ui-slider .ui-slider-handle:hover {
    transform: scale(1.15);
}

/* Settings select: override global select { height: 22px } (clips text) — compact single-line height */
#settings_infoblock select {
    max-width: 100%;
    height: calc(28px * var(--SCALE));
    min-height: calc(28px * var(--SCALE));
    box-sizing: border-box;
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--TXTCOLOR2);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 0 10px;
    font-size: 13px;
    line-height: calc(26px * var(--SCALE));
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
#settings_infoblock select:hover {
    border-color: var(--ACCENT, #4a8fe7);
}

/* jQuery UI selectmenu used for settings dropdowns */
#settings_infoblock .ui-selectmenu-button.ui-button {
    min-height: calc(28px * var(--SCALE));
    height: calc(28px * var(--SCALE));
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 13px;
    line-height: calc(26px * var(--SCALE));
}
#settings_infoblock .ui-selectmenu-text {
    line-height: calc(26px * var(--SCALE));
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Globe table limit selector in sidebar */
#sidebar-table .globe-table-limit-row {
    gap: 8px;
}

#sidebar-table .globeTableSliderWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

#sidebar-table #globe_table_limit_slider {
    width: 100%;
}

#sidebar-table .globeTableSliderLabel {
    font-size: 11px;
    color: var(--TXTCOLOR2);
    opacity: 0.8;
}



input{
  color:var(--TXTCOLOR1);
}
#histDatePicker{
    background: var(--BGCOLOR1);
}

#replayBar {
    background: var(--BGCOLOR1);
    display: none;
    width: calc(100% - 80px);
    padding-right: 80px;
    position: absolute;
    height: 10px;
    bottom: 0%;
    z-index: 5;
    grid-template-columns: 1fr 1.5fr 5fr 2fr;
    grid-template-rows: 20px 40px 20px 20px;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "timezone dateHint timeHint speedHint"
        "play datepicker hours speedSelect"
        ". dateHintLocal minutes loading "
        ". . . .";
}

#replayLoading {
    grid-area: loading;
}

#replayTimeZone{
    grid-area: timezone;
}
#replayPlay{
    grid-area: play;
}
#replayDatepicker{
    grid-area: datepicker;
}
#hourSelect{
    width: 90%;
    grid-area: hours;
}
#minuteSelect{
    width: 90%;
    grid-area: minutes;
}
#replaySpeedSelect{
    grid-area: speedSelect;
    width: 90%;
}
#replayTimeHint{
    grid-area: timeHint;
}
#replayDateHintLocal{
    grid-area: dateHintLocal;
}
#replayDateHint{
    grid-area: dateHint;
}
#replaySpeedHint{
    grid-area: speedHint;
}

/* Modded Additions */
.identOppIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.identOppIcon img {
    max-height: calc(26px * var(--SCALE));
    /* Slightly taller than the line-height for better visibility */
    height: auto;
    width: auto;
    background: white;
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 3px;
    /* Total height: 26px + 6px = 32px */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: block; /* Ensure it behaves as a block in the flex container */
}

.alignCS {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(6px * var(--SCALE));
    line-height: 1;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Title block: callsign (+ airline under it) with operator logo centered beside
   the pair. Block-level flex so no inline line-box gap sits under the callsign. */
.highlightedTitle > .alignCS {
    display: flex;
}

.callsignStack {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
}

.highlightedTitle > .alignCS .identLarge {
    min-width: 0;
}

.highlightedTitle > .alignCS .identOppIcon {
    flex: 0 0 auto;
}

/* Hover box only: callsign + logo on one row (logo shrunk to the callsign's
   height), airline name full width underneath both. The stack wrapper is
   flattened so callsign and airline become grid items directly. Items spanning
   the 1fr track don't size the auto tracks, so a long airline name can't push
   the logo away from the callsign. */
#highlighted_infoblock .highlightedTitle > .alignCS {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: calc(6px * var(--SCALE));
    row-gap: 0;
    width: 100%;
}

#highlighted_infoblock .callsignStack {
    display: contents;
}

#highlighted_infoblock .alignCS .identLarge {
    grid-row: 1;
    grid-column: 1;
}

#highlighted_infoblock .alignCS .identOppIcon {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    min-width: 0;
}

#highlighted_infoblock .identOppIcon img {
    max-height: calc(24px * var(--SCALE));
    max-width: 100%;
    padding: 2px;
    box-sizing: border-box;
}

#highlighted_infoblock .alignCS .callsignAirline {
    grid-row: 2;
    grid-column: 1 / -1;
    min-width: 0;
}

/* Airline name (from callsign 3-letter prefix) tucked under the callsign */
.callsignAirline {
    font-size: calc(12px * var(--SCALE));
    line-height: calc(14px * var(--SCALE));
    font-style: italic;
    color: var(--TXTCOLOR2);
    /* Long names wrap beside the operator logo instead of truncating;
       capped at 2 lines so extreme names can't blow up the title block. */
    overflow-wrap: break-word;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* One consistent gap between the callsign block and the hex / route row */
.highlightedTitle > .alignCS + * {
    margin-top: calc(6px * var(--SCALE));
}

#selected_icao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(6px * var(--SCALE)) calc(12px * var(--SCALE));
    min-width: 0;
}

#selected_icao > .identSmall {
    min-width: 0;
}

#selected_icao .share-link-icon {
    flex-shrink: 0;
    margin-left: calc(4px * var(--SCALE));
}

.flag {
    padding: 5px;
    color: white;
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
    /* Make text bold */
    margin-bottom: 5px;
    /* Add space below each flag */
}

.flag a {
    color: inherit;
    /* Ensure link text is the same color as the parent */
    text-decoration: none;
    /* Remove underline from links */
}

.flag a:hover,
.flag a:active {
    color: white;
    /* Keep text white on hover*/
    text-decoration: none;
    /* Remove underline from links */
}

/* KML Export Layout */
/* KML Export Layout */
.kml-export-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    /* constrain padding */
}

.kml-export-actions button {
    background-color: var(--BGCOLOR2);
    cursor: pointer;
    padding: 8px 12px;
    width: 100%;
    max-width: 100%;
    /* Fit to container */
    border: none;
    text-align: center;
    outline: none;
    font-size: calc(14px * var(--SCALE));
    font-weight: 500;
    color: var(--TXTCOLOR1);
    border-radius: var(--UI-RADIUS-CONTROL);
    transition: all 0.2s ease;
    box-sizing: border-box;
    /* ensure padding doesn't overflow */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kml-export-actions button:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.kml-export-actions button:active {
    transform: translateY(0);
}

/* Base DB flag classes (used for map markers) */
.LADD {
    background-color: orange;
}

.PIA {
    background-color: red;
}

.Military {
    background-color: green;
}

.Intresting {
    background-color: magenta;
}

.Heavy {
    background-color: blue;
}

.SuperHeavy {
    background-color: darkblue;
}

#selected_dbFlags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Ensure flags wrap to next line */
}

.dbFlagBadge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--UI-RADIUS-SMALL);
}

.dbFlagBadge,
.dbFlagBadge:link,
.dbFlagBadge:visited,
.dbFlagBadge:hover,
.dbFlagBadge:active {
    color: inherit;
    text-decoration: none;
}

.smallText a {
    font-weight: bold;
    color: var(--TXTCOLOR1);
    font-size: var(--FS1);
}

.smallText {
    font-weight: bold;
    color: var(--TXTCOLOR1);
    font-size: var(--FS1);
    background-color: var(--ACCENT);
}

#selected_airline_banner {
    text-align: center;
    display: block;
    width: 100%;
    margin: 5px 0 0 0;
}

#selected_airline_banner img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
    background: white;
    border-radius: var(--UI-RADIUS-CONTROL);
    padding: 1px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Mobile Sidebar Overrides */
@media screen and (max-width: 768px) {
    #sidebar_container {
        width: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000; /* Ensure it covers the map */
        margin: 0 !important; /* Override JS margins */
        height: 100% !important;
    }
    /* Hide the sidebar puller/splitter on mobile */
    #splitter, #splitter-infoblock {
        display: none !important;
    }

    /* Hide the extra sidebar buttons on mobile */
    #shrink_sidebar_button, #expand_sidebar_button {
        display: none !important;
    }

    /* Adjust the main toggle button if needed */
    #toggle_sidebar_button {
        display: block !important;
        z-index: 1001; /* Ensure it is above the sidebar if it is outside, or inside */
    }

    /*
     * Full-screen mobile sidebar used to sit above the map and eat every touch.
     * Pass events through the shell; only #sidebar-table (card + margins in its box)
     * re-enables hits. Scroll moves to #sidebar-table while open so the list/tabs still scroll.
     */
    body.mobile_sidebar_open #sidebar_container {
        pointer-events: none;
    }
    body.mobile_sidebar_open #sidebar_canvas {
        pointer-events: none;
        padding: 0; /* panels dock to the screen edges */
        overflow: visible;
        flex: 1 1 auto;
        min-height: 0;
    }
    /* Two floating panels instead of one big card: banner + counts on top,
       Search / Filters (and the aircraft list) docked to the bottom. The map
       stays visible between them; tapping it closes the sidebar (script.js). */
    #sidebar-table {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background: transparent;
        pointer-events: none;
    }
    /* Docked to the screen edges, mirror images of each other: the top one
       rounds its bottom corners, the bottom one its top corners */
    .sidebar-top-block,
    .sidebar-bottom-block {
        pointer-events: auto;
        background-color: var(--BGCOLOR1);
        box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
        padding-left: calc(14px * var(--SCALE));
        padding-right: calc(14px * var(--SCALE));
    }
    .sidebar-top-block {
        position: relative;
        flex: 0 0 auto;
        padding-top: calc(12px * var(--SCALE) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(12px * var(--SCALE));
        border-radius: 0 0 var(--UI-RADIUS-PANEL) var(--UI-RADIUS-PANEL);
    }
    /* selector at the very bottom */
    .sidebar-bottom-block {
        display: flex;
        flex-direction: column-reverse;
        flex: 0 1 auto;
        min-height: 0;
        max-height: 72%;
        margin-top: auto;
        padding-top: calc(12px * var(--SCALE));
        padding-bottom: calc(12px * var(--SCALE) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--UI-RADIUS-PANEL) var(--UI-RADIUS-PANEL) 0 0;
    }
    /* tabs: panel content above the segmented control */
    .sidebar-bottom-block #tabs.ui-sidebar-tabs {
        display: flex;
        flex-direction: column-reverse;
        flex: 0 1 auto;
        min-height: 0;
        margin-top: 0;
        overflow: visible !important;
    }
    .sidebar-bottom-block #tabs .ui-tabs-panel {
        min-height: 0;
        max-height: 45vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .sidebar-bottom-block #tabs .sidebar-panel-sheet {
        margin-top: 0;
        padding: 0 0 calc(10px * var(--SCALE));
    }
    .sidebar-bottom-block .sidebar-table-sheet {
        min-height: 0;
        max-height: 38vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0 0 calc(8px * var(--SCALE));
        padding-top: 0;
        border-top: none;
    }
    .sidebar-bottom-block .mobile_table_toggle {
        margin: 0 auto calc(8px * var(--SCALE));
    }
}

@media screen and (max-width: 768px) {
    /* Hide map buttons when mobile sidebar is open */
    body.mobile_sidebar_open #header_top,
    body.mobile_sidebar_open #header_side .button,
    body.mobile_sidebar_open #header_side .svgButton,
    body.mobile_sidebar_open .buttonContainer,
    .fullscreenButton { /* Hide fullscreen button on mobile entirely */
        display: none !important;
    }
}

/* Mobile aircraft list toggle — same chrome as .formButton, compact and centered */
.mobile_table_toggle {
    display: none;
    box-sizing: border-box;
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: 4px auto 6px;
    padding: 3px 10px;
    font-size: var(--FS1);
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

@media screen and (max-width: 768px) {
    /* Mobile Table Toggle: Hide contents of sidebar-table by default, except the toggle button and tabs */
    #sidebar-table:not(.mobile_visible) .sidebar-table-sheet {
        display: none !important;
    }

    /* Ensure the toggle button is always visible */
    .mobile_table_toggle {
        display: block !important;
    }
    
    /* Hide table by default if not covered by above or specific overrides needed */
    #planesTable {
        display: none;
    }
    /* But show it if parent has mobile_visible (overriding the line above) */
    #sidebar-table.mobile_visible #planesTable {
        display: table;
    }
    
    /* Same for legend */
    #legend {
        display: none;
    }
    #sidebar-table.mobile_visible #legend {
        display: flex;
    }

    /* Altitude legend: centered, compact; JS adds .altitude_chart_mobile_hidden when overlays open.
       Sit above .ol-scale-line (~8px + ~28px) and #credits (~10px + text) with clear gap. */
    #altitude_chart {
        float: none;
        left: 50%;
        right: auto;
        width: min(92vw, 340px);
        max-width: min(92vw, 340px);
        bottom: calc(48px * var(--SCALE) + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%) scale(0.82);
        transform-origin: center bottom;
    }

    body.map-credits-visible #altitude_chart {
        bottom: calc(82px * var(--SCALE) + env(safe-area-inset-bottom, 0px));
    }

    #altitude_chart.altitude_chart_mobile_hidden {
        display: none !important;
    }
    
    /* Globe “table rows” row lives inside .sidebar-table-sheet; hidden/shown with the sheet on mobile. */
}
@media screen and (max-width: 768px) {
    /* Hide the extra table controls layout container on mobile by default */
    /* #sidebar-table { display: none; } - REVERTED: this hides everything */

    /* Show it when toggled */
    /* #sidebar-table.mobile_visible { display: table; } - REVERTED */
}

/* Hide layer switcher when mobile sidebar is open */
body.mobile_sidebar_open .layer-switcher {
    display: none !important;
}

/* Custom Layer Switcher Button Style */
.layer-switcher button {
    background-color: var(--ACCENT) !important; /* Use red accent color */
    border-radius: var(--UI-RADIUS-CONTROL) !important;
    border: none !important;
    /* Use a white SVG icon for the layers */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 11l-2.5-1.25L12 11zm0 2.5l-5-2.5-2.5 1.25L12 16l7.5-3.75-2.5-1.25L12 13.5zm0 2.5l-5-2.5-2.5 1.25L12 18.5l7.5-3.75-2.5-1.25L12 16z"/><path d="M22 13.5l-10 5-10-5L2 15l10 5 10-5zM22 17.5l-10 5-10-5L2 19l10 5 10-5z" opacity="0.5"/></svg>');
    /* A simpler, cleaner layers icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>') !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important; /* Ensure no-repeat is set */
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.layer-switcher > button:hover, .layer-switcher > button:focus {
    background-color: var(--ACCENT-LIGHT) !important; /* Lighter red on hover */
    outline: none;
}

/* Fix for Group Collapse Buttons being styled as main button */
/* Give them a proper Chevron icon */
.layer-switcher .group button {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='grey' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    border: none !important;
    box-shadow: none !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 5px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0 !important;
    
    /* Position absolutely to sit inside the header padding */
    position: absolute;
    left: 2px; /* Sit at the start of the line */
    margin-top: 8px; /* Push down to align with text */
    z-index: 10;
}

/* Rotate chevron when collapsed (if class distinguishes it, usually standard is expanded by default) */
/* Assuming 'ol-layerswitcher' behavior: button usually toggles visibility. 
   If standard lib, it might not have 'collapsed' class on button but on parent. 
   For now, just ensuring it's not a Layer icon is the fix. */

@media screen and (max-width: 768px) {
    /* Duplicate zoom hide rule if needed or simple revert. 
       Actually, I can just remove the specific block I added. 
       The user wants to keep zoom hidden on mobile. 
    */
    /* Hide zoom buttons on mobile */
    .ol-zoom {
        display: none !important;
    }
}

/* ==========================================================================
   MODERN UI ICON OVERRIDES (Replaces legacy PNG sprites with SVGs)
   ========================================================================== */

/* 1. Reset standard jQuery UI icons to use masks instead of background images */
.ui-icon, 
.ui-widget-content .ui-icon, 
.ui-widget-header .ui-icon, 
.ui-state-default .ui-icon, 
.ui-state-hover .ui-icon, 
.ui-state-active .ui-icon {
    background-image: none !important;
    background-color: currentColor; /* Use the text color for the icon */
    display: inline-block;
    width: 16px;
    height: 16px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* 2. Define SVG Paths for used icons */

/* Close Icon (X) */
.ui-icon-closethick, .ui-icon-close {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>');
}

/* Triangle Right (Next Month / Forward) */
.ui-icon-circle-triangle-e, .ui-icon-triangle-1-e, .ui-icon-seek-next {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>');
}

/* Triangle Left (Prev Month / Backward) */
.ui-icon-circle-triangle-w, .ui-icon-triangle-1-w, .ui-icon-seek-prev {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/></svg>');
}

/* Triangle Down (Select Menu / Dropdowns) */
.ui-icon-triangle-1-s {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>');
}

/* Checkmark */
.ui-icon-check {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>');
}

/* 3. Handle specific colors for various states */
.ui-state-default .ui-icon { background-color: #777; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-color: var(--ACCENT); }
.ui-state-active .ui-icon { background-color: #fff; }
html.dark .ui-state-default .ui-icon { background-color: #bbb; }