/*
  Amateur Repeater Directory
  Copyright (c) 2025 Amateur Repeater Directory Contributors

  This source code is licensed under the Apache License, Version 2.0 (Apache-2.0).
  You may not use this file except in compliance with the License.
  You may obtain a copy of the License at:

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  Data files included in the ARD-RepeaterList GitHub repository are
  licensed under the Creative Commons CC0 1.0 Universal (CC0-1.0) 
  Public Domain Dedication.

  To view a copy of this license, visit:

      https://creativecommons.org/publicdomain/zero/1.0/
*/

/* =========================================================
   BASE PAGE LAYOUT
   ========================================================= */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

.toolbar,
.footer {
    flex: 0 0 auto;
    z-index: 1030;
}

.footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
}


.main-container {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    position: relative;
}

.table-sm td,
.table-sm th {
    font-size: 0.75rem;
}

/* =========================================================
   SIDEBAR (LEFT/RIGHT PANEL) + PROPERTIES
   ========================================================= */
.sidebar {
    width: 294px;
    max-width: 90vw;
    min-width: 150px;
    resize: horizontal;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    padding: 2px !important;
    margin: 0px !important;
}

    .sidebar.hidden {
        display: none !important;
    }

.drag-handle {
    width: 5px;
    cursor: ew-resize;
    background: var(--bs-border-color);
    flex-shrink: 0;
}

/* Apply a modern system‐font to the Repeater Properties sidebar */
/* Smaller, more compact font in the sidebar properties */
#sidebar,
#sidebar th,
#sidebar td {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* shrink to about 14px (0.875rem) */
    font-size: 0.825rem;
    line-height: 1.1;
}

    #sidebar table th {
        white-space: nowrap;
        font-weight: 600;
        /* semibold */
    }

    #sidebar h5 {
        font-size: 1rem;
        /* ~16px */
        margin-bottom: 0.5rem;
    }

.main-container.right-sidebar {
    flex-direction: row-reverse;
}

    .main-container.right-sidebar .sidebar {
        border-right: 0;
        border-left: 1px solid var(--bs-border-color);
    }

:root {
    /* Read from Bootstrap tokens so we always follow data-bs-theme
       (and ignore OS-level prefers-color-scheme). */
    --bg: var(--bs-body-bg, #ffffff);
    --panel-bg: var(--bs-body-bg, #ffffff);
    --border: var(--bs-border-color, #d6d9df);
    --text: var(--bs-body-color, #1f2328);
    --muted: var(--bs-secondary-color, #6b7280);
    --group-bg: var(--bs-tertiary-bg, #f2f3f6);
    --stripe: var(--bs-table-striped-bg, color-mix(in srgb, var(--group-bg) 88%, transparent));
}

.wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.net-bell {
    touch-action: manipulation;
}

/* Panel width mimics a narrow dialog; tweak as needed */
.prop-panel {
    width: 100%;
    max-width: 92vw;
    background: var(--panel-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    font-size: 13px;
    -webkit-text-size-adjust: 100%
}

.prop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* was: 8px 10px 6px 10px */
    padding: 4px 8px 4px 6px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Left side of header: CALLSIGN · FREQ pill */
.prop-header-main {
    flex: 1;
    min-width: 0;
}

/* The pill itself (will say WA4SRW · 444.875) */
.prop-header-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 2px;
    border-radius: 4px;
    /* neutral, like your row backgrounds */
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--group-bg) 85%, transparent);
    color: var(--text);
    font-size: 0.85rem; /* one notch down */
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

html[data-bs-theme="dark"] .prop-header-chip {
    border-color: color-mix(in srgb, var(--border) 90%, transparent);
    background: color-mix(in srgb, var(--group-bg) 80%, transparent);
}

display: inline-flex;
align-items: center;
max-width: 100%;
/* slightly taller + wider */
padding: 3px 14px;
border-radius: 4px;
/* stronger border + subtle glow */
border: 1px solid color-mix(in srgb, var(--bs-primary, #0d6efd) 65%, var(--border) 35%);
background: color-mix(in srgb, var(--group-bg) 70%, var(--bs-primary-bg-subtle, #dbeafe) 30%);
color: var(--bs-primary-text-emphasis, var(--text));
font-size: 0.9rem; /* was 0.8rem */
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}


html[data-bs-theme="dark"] .prop-header-chip {
    border-color: color-mix(in srgb, var(--bs-primary, #3b82f6) 70%, var(--border) 30%);
    background: color-mix(in srgb, var(--group-bg) 55%, var(--bs-primary-bg-subtle, #1d283a) 45%);
}

/* Right side of header: icon buttons */
.prop-header-actions {
    display: flex;
    align-items: center;
    gap: 0rem;
}


.actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto
}

.iconbtn {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    padding: 0;
    cursor: pointer;
}

    /* Only apply hover/focus when NOT disabled */
    .iconbtn:not(:disabled):hover {
        background: var(--group-bg);
    }

    .iconbtn:not(:disabled):focus {
        outline: 2px solid color-mix(in lab, var(--text) 20%, transparent);
    }

    /* Disabled state */
    .iconbtn:disabled,
    .iconbtn[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .iconbtn svg {
        width: 14px;
        height: 14px;
        display: block;
    }


/* Group as native details/summary with a thin caret */
details.prop-group {
    margin: 0
}

    details.prop-group:first-of-type {
    }

summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.2;
    border-bottom: 1px solid var(--border)
}

    summary::-webkit-details-marker {
        display: none
    }

html[data-bs-theme="light"] .prop-panel summary {
    background: color-mix(in srgb, var(--panel-bg) 78%, #000 22%);
}

/* Dark */
html[data-bs-theme="dark"] .prop-panel summary {
    background: color-mix(in srgb, var(--panel-bg) 78%, #fff 42%);
}


/* One hairline above each group after the first */
.prop-group + .prop-group summary {
    border-top: 1px solid var(--border)
}

[data-bs-theme="dark"] .prop-panel {
    --stripe: color-mix(in srgb, var(--panel-bg) 78%, #ffffff 5%);
}

[data-bs-theme="light"] .prop-panel {
    --stripe: color-mix(in srgb, var(--panel-bg) 78%, #000000 5%);
}

.caret {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .8
}

details[open] .caret {
    transform: rotate(45deg)
}

/* Key/Value grid that reads like a property table */
.kv {
    display: grid;
    grid-template-columns: 44% 56%;
    margin: 0
}

    .kv > * {
        padding: 5px 7px;
        border-bottom: 1px solid var(--border);
        background: transparent
    }
    /* Alternating row color as a pair (dt+dd) */
    .kv dt:nth-child(4n+1), .kv dd:nth-child(4n+2) {
        background: var(--stripe)
    }

    .kv dt {
        font-weight: 570;
        color: var(--text);
        background: transparent
    }

    .kv dd {
        margin: 0;
        text-align: right;
        font-variant-numeric: tabular-nums
    }

/* Badges for booleans */
.chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 10px
}

    .chip.y {
        background: #e9f7ef;
        color: #0a6b2b
    }

    .chip.n {
        background: #f1f3f5;
        color: #495057
    }

@media (prefers-color-scheme: dark) {
    .chip.y {
        background: #0f2a20;
        color: #98efc1;
        border-color: #214736
    }

    .chip.n {
        background: #1a1f27;
        color: #b7c0cd;
        border-color: #2b313b
    }
}

/* Compact mode (if you ever need it) */
.prop-panel.compact .kv > * {
    padding: 6px 8px
}

/* Rx Tx Ping */

/* Toggle states for RX/Ping/TX (your colors) */
#btn-rx.active {
    background-color: #c7d8ff; /* from #btn-rx-label gradient end */
    color: #0f2b6a; /* same as label text */
}

/* Match PING label colors */
#btn-ping.active {
    background-color: #ffe7a5; /* from #btn-ping-label gradient end */
    color: #7a5a00; /* same as label text */
}

/* Match TX label colors */
#btn-tx.active {
    background-color: #c7ebd1; /* from #btn-tx-label gradient end */
    color: #135129; /* same as label text */
}

/* =========================================================
    Center dialogs on mobile
   ========================================================= */

/* ---------------------------------------------
   Mobile modal centering fix (all mobile/tablets)
   Keeps Bootstrap's .modal-dialog-centered behavior,
   but uses dynamic viewport units so centering is
   based on the *visible* viewport, not 100vh.
   --------------------------------------------- */

/* Mobile/tablet: fix vertical centering without changing width */
@media (max-width: 1024px) {

    /* Make the modal container itself match the visible viewport */
    @supports (height: 100dvh) {
        .modal {
            height: 100dvh;
        }

            .modal.show .modal-dialog-centered {
                min-height: calc(100dvh - var(--bs-modal-margin) * 2);
            }
    }

    /* Fallbacks for browsers without dvh */
    @supports not (height: 100dvh) and (height: 100svh) {
        .modal {
            height: 100svh;
        }

            .modal.show .modal-dialog-centered {
                min-height: calc(100svh - var(--bs-modal-margin) * 2);
            }
    }

    /* Legacy fallback */
    @supports not (height: 100dvh) {
        .modal {
            height: 100vh;
        }

            .modal.show .modal-dialog-centered {
                min-height: calc(100vh - var(--bs-modal-margin) * 2);
            }
    }

    /* Keep symmetric top/bottom margins; no width changes */
    .modal.show .modal-dialog {
        margin-top: max(var(--bs-modal-margin), env(safe-area-inset-top));
        margin-bottom: max(var(--bs-modal-margin), env(safe-area-inset-bottom));
    }
}



/* =========================================================
   MAP (LEAFLET) + INTERACTION
   ========================================================= */
.map-container {
    flex-grow: 1;
    position: relative;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.leaflet-container {
    touch-action: manipulation;
}

/* Stop long-press from selecting page text while interacting with the map */
#map.leaflet-container {
    -webkit-touch-callout: none;
    /* no iOS copy/lookup bubble */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* keep: also helps double-tap handling */
}

/* If you want to allow selecting/copying text inside popups, re-enable there */
#map .leaflet-popup-content {
    -webkit-user-select: text;
    user-select: text;
}

/* ==== Dark Map Mode for Leaflet Tiles (Filter Approach) ==== */
/* Enhanced blues/greens for dark mode */
#map.leaflet-dark-mode .leaflet-tile-pane {
    filter: brightness(44%)
    /* brighten tiles a bit */
    contrast(125%)
    /* slightly toned down contrast */
    saturate(160%)
    /* strong color enhancement */
    sepia(6%)
    /* slight warmth */
    hue-rotate(-10deg);
    /* cool the tone slightly */
    will-change: filter;
    /* hint to browser for GPU acceleration */
}

/* Keep your markers bright */
#map.leaflet-dark-mode .leaflet-marker-icon,
#map.leaflet-dark-mode .leaflet-marker-shadow,
#map.leaflet-dark-mode .leaflet-marker-cluster-icon {
    filter: none !important;
}

/* Ensure marker glow composites correctly */
#map .leaflet-marker-pane {
    isolation: isolate;
}

/* BLINKING LEAFLET NODE and LOS */
/* Light-map pulse (blue) */
#map .leaflet-marker-icon.is-selected {
    z-index: 1000 !important;
    will-change: filter;
    animation: markerGlowLight 1.3s ease-in-out infinite;
}

/* Dark-map pulse (orange) — more specific to override light rule */
#map.leaflet-dark-mode .leaflet-marker-pane .leaflet-marker-icon.is-selected {
    animation: markerGlowDark 1.3s ease-in-out infinite !important;
}

/* Keyframes: blue */
@keyframes markerGlowLight {

    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(66, 165, 245, .98)) drop-shadow(0 0 0 rgba(66, 165, 245, .60)) drop-shadow(0 0 0 rgba(66, 165, 245, .28));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(66, 165, 245, .98)) drop-shadow(0 0 22px rgba(66, 165, 245, .60)) drop-shadow(0 0 34px rgba(66, 165, 245, .28));
    }
}

/* Keyframes: orange */
@keyframes markerGlowDark {

    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(255, 160, 0, .98)) drop-shadow(0 0 0 rgba(255, 160, 0, .60)) drop-shadow(0 0 0 rgba(255, 160, 0, .28));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(255, 160, 0, .98)) drop-shadow(0 0 22px rgba(255, 160, 0, .60)) drop-shadow(0 0 34px rgba(255, 160, 0, .28));
    }
}

/* Cluster text color */
.marker-cluster div {
    color: #000 !important;
    /* force black text */
}

/* Leaflet popup theming (Bootstrap light/dark) */
/*
.leaflet-bs-popup {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    color: var(--bs-body-color);
}
*/
[data-bs-theme="dark"] .leaflet-popup-content-wrapper {
    background-color: #212529;
    /* Bootstrap dark background */
    color: #f8f9fa;
    /* Bootstrap light text */
    border: 1px solid #495057;
}

[data-bs-theme="dark"] .leaflet-popup-tip {
    background: #212529;
}

[data-bs-theme="light"] .leaflet-popup-content-wrapper {
    background-color: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
}

[data-bs-theme="dark"] .leaflet-popup-content {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="light"] .leaflet-popup-content {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* =========================================================
   MODALS — GLOBAL & RESPONSIVE
   ========================================================= */
.modal-content {
    border-radius: .5rem;
}

.modal-body {
    overflow-y: hidden !important;
}

/* Global modal responsiveness */
@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: 100vw;
        margin: 0.5rem auto;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

@media (min-width:576px) {
    .modal-dialog {
        max-width: 480px;
    }
}

@media (max-width: 575.98px) {
    #btn-export {
        display: none !important;
    }
}

/* =========================================================
   LOGIN MODAL (HEADER + INPUT TAGS + HINT)
   ========================================================= */
.login-header-icon {
    font-size: 1.6rem;
    margin-right: .5rem;
}

.input-tag-right {
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    position: relative;
    font-weight: 600;
    padding: .375rem .9rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    white-space: nowrap;
}

    .input-tag-right::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid var(--bs-secondary-bg);
    }

.password-hint {
    font-size: .9rem;
}

/* =========================================================
   TOOLBAR & FILTER MODAL
   ========================================================= */
/* Make independent toggles (Ping/RX/TX) visibly selected like the theme buttons */
.btn-outline-secondary.active {
    background-color: var(--bs-secondary);
    color: var(--bs-body-bg);
    border-color: var(--bs-secondary);
}

#filterModal .nav-tabs .nav-link {
    padding: .4rem .9rem;
}

#filterModal .filter-box {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem;
}

.form-switch.form-switch-sm .form-check-input {
    width: 2.2em;
    height: 1.2em;
}

.form-switch.form-switch-sm .form-check-label {
    margin-left: .5rem;
    font-size: .95rem;
}

#filterModal .tab-content {
    transition: min-height .25s ease;
}

/* Mobile toolbar tightening */
@media (max-width:575.98px) {
    .toolbar .container-fluid {
        flex-wrap: wrap;
        gap: .25rem;
    }

    .toolbar .me-2 {
        margin-right: .25rem !important;
    }

    .toolbar .ms-2 {
        margin-left: .25rem !important;
    }

    .toolbar .btn-sm,
    .toolbar .form-select-sm {
        margin-bottom: .25rem;
    }

    .toolbar-controls {
        flex-wrap: wrap;
        gap: .25rem;
        margin-left: 0 !important;
    }

    .toolbar .ms-auto {
        margin-left: 0 !important;
    }

    .toolbar .vr {
        display: none !important;
    }
}

/* =========================================================
   FOOTER (SOCIAL ICONS, LAYOUT)
   ========================================================= */
.footer .social a {
    color: var(--bs-secondary-color);
    font-size: 1.25rem;
    margin: 0 .35rem;
    text-decoration: none;
}

    .footer .social a:hover {
        color: var(--bs-primary);
    }

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0 1.5rem;
}

@media (max-width:575.98px) {
    .footer-inner {
        justify-content: center;
    }
}

.footer .social {
    display: flex;
    gap: .35rem;
}

    /* Brand colors for social icons (preview) */
    .footer .social a[aria-label="YouTube"],
    .footer .social a[aria-label="YouTube"]:hover {
        color: #FF0000;
    }

    .footer .social a[aria-label="Discord"],
    .footer .social a[aria-label="Discord"]:hover {
        color: #5865F2;
    }

    .footer .social a[aria-label="Twitter"],
    .footer .social a[aria-label="Twitter"]:hover {
        color: #1DA1F2;
    }

    .footer .social a[aria-label="Reddit"],
    .footer .social a[aria-label="Reddit"]:hover {
        color: #FF4500;
    }

    .footer .social a[aria-label="Wix Blog"],
    .footer .social a[aria-label="Wix Blog"]:hover {
        color: #FAAD4D;
    }

.footer .bi {
    font-size: 1.6em;
    /* Change this number for larger/smaller icons */
    vertical-align: middle;
    /* Keeps them aligned if you add text later */
}

/* =========================================================
   RESPONSIVE HELPERS (HIDE TEXT/LABELS)
   ========================================================= */
@media (max-width: 1023px) {
    .btn-label {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .hide-on-tablet {
        display: none !important;
    }
}

@media (max-width: 575.98px) {

    /* 575.98px is Bootstrap's xs breakpoint—phones only */
    .login-label {
        display: none !important;
    }
}

/* =========================================================
   ABOUT MODAL / BANNER
   (Order preserved so later scoped rules can override early ones)
   ========================================================= */
:root {
    --banner-base: #3E77AB; /* ARD blue */
}

#topBanner {
    margin: 0;
    padding: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--banner-base);
    color: #fff;
    font-family: sans-serif;
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
}

/* 1) Force wide responsive width */
#aboutModal .modal-dialog {
    max-width: 90vw; /* removed !important */
    width: auto; /* removed !important */
}

/* 2) Cap overall height */
#aboutModal .modal-content {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* 3) Scroll only the body */
#aboutModal .modal-body {
    overflow-y: auto;
    max-height: calc(80vh - 5rem);
    text-align: left;
    min-height: 0;
}

/* Responsive logo with text wrap */
.about-logo {
    width: 40%;
    max-width: 300px;
    height: auto;
    float: left;
    margin: 0 1rem 1rem 0;
}

@media (max-width: 768px) {
    .about-logo {
        width: 80%;
        max-width: none;
        float: none;
        display: block;
        margin: 0 auto 1rem;
    }
}

/* Scoped only to the About modal (later — overrides the earlier wide rule) */
#aboutModal .modal-dialog {
    max-width: 760px;
    width: 100%;
}

#aboutModal .modal-header {
    position: relative;
}

    #aboutModal .modal-header::after {
        content: "";
        display: block;
        height: 1px;
        width: 60%;
        margin: 0.5rem auto 0;
        background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
    }

#aboutModal .about-logo {
    max-width: 150px;
    margin: 0 1.5rem 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Mission statement size bump */
#aboutModal .modal-body p.small.text-muted.px-3 {
    font-size: 1.1rem;
    line-height: 1.45;
}



/* =========================================================
   LOS MODAL + THEME TOKENS
   ========================================================= */

#losModal .modal-dialog {
    max-width: 95vw;
}

#losModalImg {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
}

/* Optional: allow resize for demos */
#losModal .modal-content {
    resize: both;
    overflow: auto;
}

/* LOS chart theme tokens */
:root {
    --los-axis: #444;
    --los-title: #111;
    --los-legend: #222;
    --los-grid: #e0e0e0;
    --los-grid-opacity: .6;
    --los-terrain-fill: #90caf955;
    --los-terrain-stroke: #64b5f6;
    --los-losline: #111;
    --los-fresnel: #b3e5fc66;
    --los-worst: #2e7d32;
    --los-worst-stroke: #fff;
    --los-endpoint-label: #222;
}

/* Dark mode (if you toggle data-theme="dark" on <body>) */
[data-theme="dark"] {
    --los-axis: #cfd8dc;
    --los-title: #eceff1;
    --los-legend: #eceff1;
    --los-grid: #455a64;
    --los-grid-opacity: .5;
    --los-terrain-fill: #81d4fa33;
    --los-terrain-stroke: #4fc3f7;
    --los-losline: #e0e0e0;
    --los-fresnel: #4fc3f744;
    --los-worst: #ef9a9a;
    --los-worst-stroke: #263238;
    --los-endpoint-label: #eceff1;
}

/* Light (Bootstrap) */
:root,
[data-bs-theme="light"] {
    --los-axis: #444;
    --los-title: #111;
    --los-legend: #222;
    --los-grid: #e0e0e0;
    --los-grid-opacity: .6;
    --los-terrain-fill: #90caf955;
    --los-terrain-stroke: #64b5f6;
    --los-losline: #111;
    --los-fresnel: #b3e5fc66;
    --los-worst: #2e7d32;
    --los-worst-stroke: #fff;
    --los-endpoint-label: #222;
}

/* Dark (Bootstrap) */
[data-bs-theme="dark"] {
    --los-axis: #cfd8dc;
    --los-title: #eceff1;
    --los-legend: #eceff1;
    --los-grid: #455a64;
    --los-grid-opacity: .5;
    --los-terrain-fill: #81d4fa33;
    --los-terrain-stroke: #4fc3f7;
    --los-losline: #e0e0e0;
    --los-fresnel: #4fc3f744;
    --los-worst: #ef9a9a;
    --los-worst-stroke: #263238;
    --los-endpoint-label: #eceff1;
}

/* =========================================================
   DIALOG-SPECIFIC SMALL UTILS
   ========================================================= */
/* Keep the right-hand gray label boxes the same width, fluid with font size */
#dlgAddHomeLoc .coord-label {
    min-width: 10ch;
    display: flex;
    justify-content: center;
}

/*
    MODAL DIALOGS SMALLER FONTS
*/

#rptrAddEdit_nearestCitySelect {
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Global modal typography & control sizing */
.modal-content {
    font-size: 0.9rem;
}
/* shrink everything inside */
.modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal .form-label,
.modal .form-text {
    font-size: 0.875rem;
}

.modal .form-control,
.modal .form-select {
    font-size: 0.875rem;
    line-height: 1.2;
    padding: .375rem .5rem; /* tighter controls */
}

@media (max-width: 576px) {
    .modal-content {
        font-size: 0.85rem;
    }
    /* a bit smaller on phones */
    .modal .form-control,
    .modal .form-select {
        font-size: 0.84rem;
    }
}

/* Compact modal layout */
.modal-content {
    font-size: 0.88rem; /* already smaller text */
    padding: 0.75rem 1rem; /* less padding around edges */
}

.modal-body {
    padding: 0.75rem 1rem;
}

.modal-header,
.modal-footer {
    padding: 0.5rem 1rem;
}

/* Form controls */
.modal .form-control,
.modal .form-select {
    font-size: 0.85rem;
    padding: .25rem .5rem; /* shorter + tighter */
    height: auto; /* let content define height */
    line-height: 1.2;
}

/* Opt-in compact buttons for dense dialogs only */
.modal-compact .btn {
    font-size: .875rem;
    line-height: 1.2;
    padding: .375rem .5rem;
}

.modal-dialog {
    --bs-modal-width: clamp(340px, 90vw, 560px) !important;
}


/* Slightly smaller gaps inside this modal only */
#rptrAddEdit_nameModal .row {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .5rem;
}

/* Make the last row of three controls share space better on md+ */
@media (min-width: 768px) {
    #rptrAddEdit_nameModal .row:last-of-type > .col-md {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

/* CITY PICKER MODAL */
.city-list {
    max-height: 60vh;
    overflow: auto;
    font-size: 0.8rem;
}

.city-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.city-main {
    flex: 1 1 auto;
    min-width: 0;
}

.city-title {
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.city-name {
    font-weight: 600;
}

.city-meta {
    color: var(--bs-secondary-color);
}

.city-sub {
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.city-check {
    flex: 0 0 auto;
    color: #20c997;
    margin-left: .25rem;
}

/* City picker: stable height */
#cityPickerModal .modal-content {
    display: flex;
    flex-direction: column;
    height: min(65vh, 520px);
}

#cityPickerModal .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
}

#cityPickerFilter {
    flex: 0 0 auto;
}

#cityPickerList {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}

/* light-blue-ish selected row that adapts to light/dark themes */
.city-list .city-row.selected,
.city-list .city-row.active {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}

/* Make our trigger look/act disabled when needed */
button.form-select.disabled,
button.form-select[aria-busy="true"] {
    pointer-events: none;
    opacity: .65;
}

/* =================*/
/* ONLINE ICON      */
/* =================*/

/* Pin + pulse ring wrapper (25×41 icon metrics) */
.los-svg-wrap {
    position: relative;
    width: 25px; /* iconSize[0] */
    height: 41px; /* iconSize[1] */
    transform-origin: 50% 100%;
}

    .los-svg-wrap .pin {
        display: block;
        width: 25px;
        height: 41px;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: auto;
    }

    /* Ring SVG sits under the tip; size/offset tunable via CSS vars */
    .los-svg-wrap .ring-svg {
        position: absolute;
        left: 50%;
        bottom: var(--ringOffset, -10px);
        transform: translateX(-50%);
        width: var(--ringSize, 34px);
        height: auto;
        pointer-events: none;
        overflow: visible;
        color: var(--ringColor, #9433E2);
    }

/* Make paths follow the element's color */
.ring-svg .ring_outer,
.ring-svg .ring_inner {
    fill: currentColor;
}

/* Pulse (GPU-cheap: transform/opacity) — applied to the <g class="pulse"> */
.ring-svg .pulse {
    transform-box: fill-box;
    /* bias the scale upward toward the pin tip */
    transform-origin: 50% 70%;
    animation: ringPulse var(--ringPulseDur, 1.5s) ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes ringPulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

/* gentle wobble (apply to the wrapper, not the SVG/group) */
.wobble {
    animation: wob 4.6s ease-in-out infinite;
}

@keyframes wob {
    0%, 100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ring-svg .pulse {
        animation: none !important;
    }

    .wobble {
        animation: none !important;
    }
}



/* LOS modal: always-bordered pills */
#losModal .modal-header .nav-pills {
    gap: .375rem;
}
    /* small space between buttons */

    #losModal .modal-header .nav-pills .nav-link {
        border: 1px solid var(--bs-border-color) !important;
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-radius: .5rem;
    }

        #losModal .modal-header .nav-pills .nav-link:hover {
            background-color: var(--bs-secondary-bg);
        }

        #losModal .modal-header .nav-pills .nav-link.active {
            border-color: var(--bs-primary) !important;
            background-color: var(--bs-primary-bg-subtle);
            color: var(--bs-primary-text-emphasis);
        }
/* ==============================================
   Repeater Drawer — Tabulator × Bootstrap colors
   Single source of truth for light/dark theming.
   Scope: ONLY inside #repeaterDrawer
   ============================================== */

#repeaterDrawer {
    /* Desktop defaults */
    --rep-grid-fs: 14px;
    --bs-offcanvas-width: min(100vw, 1280px);
}

/* Dark theme: make Tabulator column header titles black, but only in the repeater drawer */
[data-bs-theme="dark"] #repeaterDrawer .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    color: #000; /* solid black label text */
    opacity: 1; /* ensure full contrast if anything lowers opacity */
}

/* Make offcanvas full-width on small screens (not iPad-specific) */
@media (max-width: 992px) {
    #repeaterDrawer {
        --bs-offcanvas-width: 100vw;
    }
}

/* Base Tabulator surface + typography source of truth */
#repeaterDrawer .tabulator {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    font-size: var(--rep-grid-fs);
}

/* Header */
#repeaterDrawer .tabulator-header {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

    #repeaterDrawer .tabulator-header .tabulator-col {
        border-right: 1px solid var(--bs-border-color);
        color: var(--bs-body-color);
    }

#repeaterDrawer .tabulator-col-sorter {
    color: var(--bs-secondary-color);
}

/* Rows / cells */
#repeaterDrawer .tabulator-row {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
}

    #repeaterDrawer .tabulator-row.tabulator-row-even {
        background: var(--bs-secondary-bg);
    }

    #repeaterDrawer .tabulator-row:hover,
    #repeaterDrawer .tabulator-row.tabulator-selected {
        background: var(--bs-primary-bg-subtle);
    }

#repeaterDrawer .tabulator-cell {
    color: inherit;
    border-right: 1px solid var(--bs-border-color);
}

/* Header filter controls */
#repeaterDrawer .tabulator-header .tabulator-col .tabulator-header-filter input,
#repeaterDrawer .tabulator-header .tabulator-col .tabulator-header-filter select {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
    font-size: inherit; /* follows --rep-grid-fs */
}

    #repeaterDrawer .tabulator-header .tabulator-col .tabulator-header-filter input::placeholder {
        color: var(--bs-secondary-color);
        opacity: 1;
    }

    #repeaterDrawer .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
    #repeaterDrawer .tabulator-header .tabulator-col .tabulator-header-filter select:focus {
        outline: 0;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
    }

/* Footer (if enabled later) */
#repeaterDrawer .tabulator-footer {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-border-color);
}

/* =============== Layout (desktop) =============== */
#repeaterDrawer .offcanvas-body {
    display: flex;
    padding: 0;
}

#repeaterDrawer .card {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

#repeaterDrawer .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#repeaterDrawer .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Fill the available height */
#repTable {
    height: 100% !important;
}

/* =============== iPad / tablet sizing =============== */
@media (max-width: 1024px) {
    /* Smaller grid typography */
    #repeaterDrawer {
        --rep-grid-fs: 12px;
    }

        /* Narrow columns that remain in the grid */
        #repeaterDrawer .tabulator-col[tabulator-field="band"],
        #repeaterDrawer .tabulator-cell[tabulator-field="band"] {
            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
        }

        /* Distance slightly wider + right-aligned */
        #repeaterDrawer .tabulator-col[tabulator-field="Distance"],
        #repeaterDrawer .tabulator-cell[tabulator-field="Distance"] {
            width: 72px !important;
            min-width: 72px !important;
            max-width: 72px !important;
            text-align: right;
        }

        /* Frequency column width + right-align */
        #repeaterDrawer .tabulator-col[tabulator-field="OutputFrequency"],
        #repeaterDrawer .tabulator-cell[tabulator-field="OutputFrequency"] {
            width: 110px !important;
            min-width: 110px !important;
            max-width: 110px !important;
            text-align: right;
        }

        /* Icons / stars */
        #repeaterDrawer .tabulator-col[tabulator-field="Icon"],
        #repeaterDrawer .tabulator-cell[tabulator-field="Icon"] {
            width: 36px !important;
            min-width: 36px !important;
            max-width: 36px !important;
            text-align: center;
        }

        #repeaterDrawer .tabulator-col[tabulator-field="Stars"],
        #repeaterDrawer .tabulator-cell[tabulator-field="Stars"] {
            width: 64px !important;
            min-width: 64px !important;
            max-width: 64px !important;
            text-align: center;
        }

        /* Keep Location and Comment stable to avoid per-row jitter */
        #repeaterDrawer .tabulator-col[tabulator-field="location"],
        #repeaterDrawer .tabulator-cell[tabulator-field="location"],
        #repeaterDrawer .tabulator-col[tabulator-field="_comment"],
        #repeaterDrawer .tabulator-cell[tabulator-field="_comment"] {
            min-width: 180px;
        }

        /* Normalize header row spacing / control height */
        #repeaterDrawer .tabulator .tabulator-header .tabulator-col {
            padding: 2px 2px;
        }

        #repeaterDrawer .tabulator .tabulator-col .tabulator-header-filter {
            margin-top: 2px;
        }

            #repeaterDrawer .tabulator .tabulator-col .tabulator-header-filter input,
            #repeaterDrawer .tabulator .tabulator-col .tabulator-header-filter select {
                height: 26px;
                padding: 2px 6px;
                box-sizing: border-box;
            }

        /* Optional: consistent numeral widths */
        #repeaterDrawer .tabulator .tabulator-cell,
        #repeaterDrawer .tabulator .tabulator-col .tabulator-col-title {
            font-variant-numeric: tabular-nums;
        }

        /* Trim header chrome & tighten filters */
        #repeaterDrawer .tabulator .tabulator-col .tabulator-col-sorter {
            display: none !important;
        }

        #repeaterDrawer .tabulator .tabulator-col .tabulator-col-title-holder,
        #repeaterDrawer .tabulator .tabulator-col .tabulator-col-title {
            padding-right: 2px !important;
        }

        /* Subtle “sorted” background (no bold) */
        #repeaterDrawer .tabulator .tabulator-col[aria-sort="asc"],
        #repeaterDrawer .tabulator .tabulator-col[aria-sort="desc"] {
            background: var(--bs-primary-bg-subtle) !important;
        }

        #repeaterDrawer .tabulator .tabulator-col[aria-sort] .tabulator-col-title {
            font-weight: 400 !important;
        }

        /* Breathing room between title and filter */
        #repeaterDrawer .tabulator .tabulator-col .tabulator-col-title-holder {
            padding-bottom: 6px;
        }

        #repeaterDrawer .tabulator .tabulator-col .tabulator-header-filter {
            margin-top: 0;
        }
}

/* ConfirmDialog: compact layout */
#confirmDialog .modal-dialog {
    max-width: 320px; /* narrower modal */
}

/* ConfirmDialog: keep footer buttons on one line */
#confirmDialog .modal-footer {
    flex-wrap: nowrap; /* don't allow wrapping */
    justify-content: flex-end; /* align to the right */
    gap: .5rem; /* small space between buttons */
}

    #confirmDialog .modal-footer .btn {
        display: inline-flex; /* natural, shrink-to-fit buttons */
        width: auto; /* undo any 100% width rules */
        flex: 0 0 auto; /* don't grow or wrap */
        white-space: nowrap; /* keep labels on one line */
        min-width: 0; /* allow shrinking if really tight */
    }

/* Make the dialog a touch wider on tiny phones */
@media (max-width: 380px) {
    #confirmDialog .modal-dialog {
        max-width: 92vw;
    }
}

/*
    ============================
    Map Search Control
    ===========================
*/

/* ===== Leaflet-style Search/Browse Control ===== */
.leaflet-control-ardsearch.leaflet-bar {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
}

/* Collapsed: exact 30×30 like other Leaflet buttons */
.leaflet-control-ardsearch.collapsed {
    width: 32px;
    height: 32px;
}

/* Toggle button (magnifier or count + next arrow) */
.leaflet-control-ardsearch .ard-search-toggle {
    width: 42px;
    height: 32px;
    background: #fff;
    border: 0;
    cursor: pointer;
    /* lay out "count + arrow" side-by-side */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 0;
}

/* Tiny count in front of the arrow when browsing multiple results */
.leaflet-control-ardsearch .ard-search-count {
    font-size: 0.7rem; /* small but readable */
    line-height: 1;
    font-weight: 500;
    min-width: 1.3em; /* keeps width stable as it changes */
    text-align: right;
    margin-left: 4px;
}

/* Icon sizing & tone (currentColor) */
.leaflet-control-ardsearch .ard-search-svg {
    width: 24px;
    height: 24px;
    display: block;
    color: #444;
    flex-shrink: 0;
    margin-right: 4px;
}

.leaflet-control-ardsearch .ard-search-svg2 {
    width: 20px;
    height: 20px;
    display: block;
    color: #444;
    flex-shrink: 0;
    margin-right: 1.2em;
}

.leaflet-control-ardsearch .ard-search-toggle:hover .ard-search-svg {
    color: #333;
}

/* Expanded: show input to the right */
.leaflet-control-ardsearch .ard-search-form {
    display: flex;
    align-items: center;
    padding: 0 6px 0 4px;
}

.leaflet-control-ardsearch .ard-search-input {
    width: 300px; /* tweak this 1 line to make it narrower/wider */
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    padding: 4px 8px;
    outline: none;
    color: black !important;
    font: 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background: #fff;
}

    .leaflet-control-ardsearch .ard-search-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
    }

/* Hide input when collapsed */
.leaflet-control-ardsearch.collapsed .ard-search-form {
    display: none;
}

/* Screenreader-only label */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Leaflet Search Control - Dark mode */
.leaflet-dark .leaflet-control-ardsearch.leaflet-bar {
    background: #1f2937;
    border-color: rgba(255,255,255,0.25);
}

.leaflet-dark .leaflet-control-ardsearch .ard-search-toggle {
    background: #1f2937;
}

.leaflet-dark .leaflet-control-ardsearch .ard-search-svg {
    color: #d1d5db;
}

.leaflet-dark .leaflet-control-ardsearch .ard-search-toggle:hover {
    background: #233041;
}

.leaflet-dark .leaflet-control-ardsearch .ard-search-input {
    background: #111827;
    color: #e5e7eb;
    border-color: rgba(255,255,255,0.25);
}

.leaflet-control-ardsearch .ard-search-count {
    color: black !important;
}

/*
    ============================
    Add Edit Tooltip
    ===========================
*/

/* Docked Help bar (fixed height, no layout shift) */
#rptrAddEdit_tipDock {
    /* visual */
    background: var(--bs-tertiary-bg, rgba(0,0,0,.03));
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
    color: var(--bs-link-color);
    border-radius: .5rem;
    /* typography */
    font-size: 0.8rem;
    line-height: 1.3;
    /* layout stability: reserve space for ~2 lines */
    min-height: 60px;
    max-height: 60px;
    overflow: hidden;
    /* clamp to 2 lines so it never grows taller */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* spacing */
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    transition: opacity 120ms ease-in-out;
}

/* Dark theme */
[data-bs-theme="dark"] #rptrAddEdit_tipDock {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.15);
}

/* When empty, keep space but de-emphasize text */
#rptrAddEdit_tipDock.is-empty {
    opacity: .35; /* use 0 if you want it invisible while still reserving space */
}

/*
==================================
CHAT CSS (clean, single source)
==================================
*/
.site-chat {
    font-size: .9rem;
}

/* Offcanvas header compact */
#offcanvasChat .offcanvas-header {
    padding: .35rem .5rem !important;
    min-height: 1.75rem !important;
}

#offcanvasChat .btn-close {
    transform: scale(.85);
    opacity: .7;
}

/* Card header compact + centered */
#offcanvasChat .card-header {
    padding: .25rem .5rem !important;
    font-size: .8rem;
    line-height: 1.1;
}

    #offcanvasChat .card-header > * {
        text-align: center;
        width: 100%;
        padding: .25rem 0 .5rem;
    }

/* Layout */
.site-chat .card-body {
    min-height: 0;
}

#chatMessages {
    overflow-y: auto;
}

/* Rows + grouping */
.site-chat .msg-row {
    margin-bottom: .5rem;
}

    .site-chat .msg-row.same .chat-bubble {
        margin-top: .25rem;
    }

/* One subtle blue for all bubbles (light/dark aware via BS vars) */
.site-chat .chat-bubble {
    font-size: .95rem;
    padding: .45rem .6rem;
    border-radius: .75rem;
    max-width: 90%;
    border: 1px solid var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-body-color);
}

/* Username & timestamp de-emphasized */
.site-chat .chat-username {
    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
    display: inline-block;
}

.site-chat .chat-meta {
    font-size: .75rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
}

/* Inputs a touch smaller */
.site-chat .input-group .form-control {
    font-size: .9rem;
}

.site-chat .btn {
    font-size: .9rem;
    padding: .35rem .6rem;
}

/* Tone A = light blue (Bootstrap primary subtle) */
/* Full-bubble tones */
.site-chat .chat-bubble.tone-a {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-body-color);
}

.site-chat .chat-bubble.tone-b {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-body-color);
}

/* Default rows align left */
.site-chat .msg-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: .5rem;
}

    /* If the row contains a tone-b bubble, push it to the right */
    .site-chat .msg-row:has(.chat-bubble.tone-b) {
        justify-content: flex-end;
    }

/* Right-side bubbles align text to the right for a tighter look */
.site-chat .chat-bubble.tone-b {
    text-align: right;
}

/* Grouping: when same sender, tighten the stack */
.site-chat .msg-row.same .chat-bubble {
    margin-top: .25rem;
}

/* properties styles */
/* ======================================
   Compact icon buttons (Add / Edit)
   ====================================== */

.od-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--group-bg);
    color: var(--muted);
    font-size: 14px;
    padding: 0;
    margin: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, opacity 120ms ease, transform 80ms ease;
}

    .od-icon-btn + .od-icon-btn {
        margin-left: 6px;
    }

    .od-icon-btn i {
        font-size: 0.8rem;
    }

/* Primary (Edit) */
.od-icon-btn--primary {
    background: color-mix(in srgb, var(--group-bg) 30%, var(--bs-primary-bg-subtle, #dbeafe) 70%);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary-text-emphasis, #0d47a1);
}

    .od-icon-btn--primary:hover:not([disabled]) {
        background: var(--bs-primary-bg-subtle, #dbeafe);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transform: translateY(-1px);
    }

/* Ghost (Add) */
.od-icon-btn--ghost:hover:not([disabled]) {
    background: var(--group-bg);
    border-color: var(--border);
    color: var(--text);
}

/* Disabled */
.od-icon-btn:disabled,
.od-icon-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--group-bg);
    border-color: var(--border);
    color: var(--muted);
    box-shadow: none;
    transform: none;
}

/* share/bell */

/* group itself – we don't need any Bootstrap spacing here */
.rcd-icon-group {
    gap: 0;
}

    /* icon buttons inside the group – transparent, no border, almost no padding */
    .rcd-icon-group .rcd-icon-btn {
        border: none;
        background: transparent;
        padding: 0 2px; /* or 0 if you want absolutely no padding */
        margin: 0;
        line-height: 1;
        box-shadow: none;
    }

        /* keep hover/focus from changing colors/backgrounds */
        .rcd-icon-group .rcd-icon-btn:hover,
        .rcd-icon-group .rcd-icon-btn:focus,
        .rcd-icon-group .rcd-icon-btn:active {
            background: transparent;
            box-shadow: none;
            color: inherit;
        }

/* specific colors */
#rcd-watchBtn {
    color: #2563eb; /* your bell blue */
}

#rcd-shareBtn {
    color: #000; /* plain black */
}


/* Network Control */
.leaflet-control-linkednetworks,
.leaflet-control-linkednetworks.leaflet-bar {
    position: relative;
    padding: 0; /* tighten up */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Toggle button (top part – leave as-is size-wise) */
.lnknet-toggle {
    background: rgba(255,255,255,0.9);
    border: 1px solid #999;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.80rem;
    color: #111 !important; /* force dark text in all themes */
    line-height: 1.2;
}

    /* Keep same look on hover/focus/active (no transparent flash) */
    .lnknet-toggle:hover,
    .lnknet-toggle:focus,
    .lnknet-toggle:active {
        background: rgba(255,255,255,0.9);
        border-color: #999;
        color: #111;
        box-shadow: none;
    }

/* Dropdown menu */
.lnknet-menu {
    position: absolute;
    top: 100%;
    right: 0; /* align RIGHT edge with control */
    left: auto;
    margin-top: 2px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #999;
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 180px;
    max-height: 150px; /* ~6 rows, then scroll */
    overflow-y: auto;
    z-index: 9999;
    font-size: 0.75rem; /* tiny bit smaller than toggle */
    color: #111;
}

/* Each row */
.lnknet-item {
    font-size: inherit; /* use menu font-size */
    color: #111;
    cursor: default;
    white-space: nowrap;
}

    .lnknet-item + .lnknet-item {
        margin-top: 2px;
    }

/* Icon buttons */
.lnknet-btn {
    font-size: 0.85rem; /* slightly smaller icons */
    color: #0d6efd !important; /* lock to Bootstrap primary blue */
}

    .lnknet-btn i {
        color: #0d6efd !important;
    }

    .lnknet-btn:hover,
    .lnknet-btn:focus,
    .lnknet-btn:active {
        color: #0d6efd !important;
    }

        .lnknet-btn:hover i,
        .lnknet-btn:focus i,
        .lnknet-btn:active i {
            color: #0d6efd !important;
        }

/* Light scrollbar for the networks dropdown (Chrome/Edge/Safari) */
.lnknet-menu::-webkit-scrollbar {
    width: 6px;
}

.lnknet-menu::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.9);
}

.lnknet-menu::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

    .lnknet-menu::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }

/* Light, thin scrollbar for Firefox */
.lnknet-menu {
    scrollbar-color: #c0c0c0 rgba(255,255,255,0.9);
}


.terms-text {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* =========================================================
   REGISTER MODAL — BUTTONS ON ONE LINE (PHONES)
   ========================================================= */
@media (max-width: 575.98px) {

    /* Only affect the Register modal footer */
    #registerModal .modal-footer {
        flex-wrap: nowrap; /* keep them on one line */
        justify-content: center; /* center them */
        gap: 0.5rem; /* small space between buttons */
    }

        #registerModal .modal-footer .btn {
            width: auto !important; /* override the global 100% width */
            flex: 0 0 auto; /* shrink-to-fit */
            font-size: 0.85rem; /* a bit smaller */
            padding: 0.35rem 1.1rem; /* less tall, less wide */
        }
}

.small-terms-box {
    max-height: 140px;
    overflow-y: auto;
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
}

/* Dialog WhoIsOnline */

/* Who's Online tiles */
.dlg-whosonline-list {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 4px;
    scrollbar-gutter: stable;
}

/* subtle scroll fade (optional but nice) */
.dlg-whosonline-list {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.dlg-whosonline-user {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 7px; /* still barely rounded */
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    line-height: 1;
    /* “soft card” look without being loud */
    background: rgba(0,0,0,.055);
    border: 1px solid rgba(0,0,0,.06);
    /* tiny depth */
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
    color: inherit;
    user-select: none;
    white-space: nowrap;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

    .dlg-whosonline-user:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.08);
        background: rgba(0,0,0,.07);
    }

/* Dark theme */
[data-bs-theme="dark"] .dlg-whosonline-user {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 1px 0 rgba(0,0,0,.35);
}

    [data-bs-theme="dark"] .dlg-whosonline-user:hover {
        background: rgba(255,255,255,.12);
        box-shadow: 0 10px 20px rgba(0,0,0,.35);
    }

/* NETS */

.net-icon-wrap {
    position: relative;
}

    .net-icon-wrap .net-icon {
        position: absolute;
        top: 6px; /* tweak to sit over the head */
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px; /* size of the Bootstrap icon */
        color: #0d6efd; /* or your ARD blue */
        text-shadow: 0 0 3px rgba(0,0,0,.5);
        pointer-events: none;
    }

/* Nets Edit Dialog */

/* Make Net dialog body scroll instead of letting fields sit behind footer */
#dlgNetEdit .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

#dlgNetEdit .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* On very small screens, use almost full height, no huge margins */
@media (max-width: 768px) {
    #dlgNetEdit .modal-dialog {
        margin: 0.5rem;
    }
}

#dlgNetEdit .modal-body {
    overflow-y: scroll !important;
}

/* NET ICON CSS */

.leaflet-marker-icon.net-blink {
    animation: ard-net-blink 2.2s linear infinite;
}

@keyframes ard-net-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.40;
    }
     tweak this: 0.3–0.5 range usually looks good 
}

#properties-body {
    overflow-y: auto; /* not scroll */
    max-height: calc(100vh - 120px); /* tweak 120px until it fits under your header */
    -webkit-overflow-scrolling: touch; /* nicer on iOS */
}

/* Leaflet Control */

/* Wrapper around all ARD controls in the top-right corner */
.ard-topright-controls {
    position: relative; /* one shared stacking context */
    z-index: 1000; /* above the map */
}

    /* IMPORTANT: override Leaflet's z-index:7 so these controls are NOT stacking contexts */
    .ard-topright-controls .leaflet-control-linkednetworks {
        position: relative;
        z-index: auto !important; /* kill Leaflet's z-index:7 */
    }

    /* Dropdown menus for Networks + Nets – float under their buttons, above the control pills */
    .ard-topright-controls .lnknet-menu {
        position: absolute;
        top: calc(100% + 4px); /* just below the button */
        right: 0;
        z-index: 1; /* higher than the control containers inside the wrapper */
    }

/* EMBED DIALOG */

/* =========================================================
   Embedding List Dialog: tall modal + internal table scrolling
   ========================================================= */

#dlgEmbeddingList .modal-dialog.dlg-embedlist {
    max-width: 96vw; /* wide */
    height: 92vh; /* tall */
    margin: 4vh auto; /* centered */
}

#dlgEmbeddingList .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Modal body fills remaining space and becomes a flex column */
#dlgEmbeddingList .modal-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* IMPORTANT: allows nested scroll areas */
    overflow: hidden; /* body does NOT scroll */
}

    /* Top block + hr should not shrink */
    #dlgEmbeddingList .modal-body > .row.g-3.align-items-start,
    #dlgEmbeddingList .modal-body > hr {
        flex: 0 0 auto;
    }

/* Picker row consumes remaining height */
#dlgEmbeddingList .emb-picker-row {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT */
}

    /* Default: columns stretch and allow children to scroll */
    #dlgEmbeddingList .emb-picker-row > [class*="col-"] {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

/* Table scroll region: scrolling happens inside .table-responsive */
#dlgEmbeddingList .emb-tablewrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    #dlgEmbeddingList .emb-tablewrap > .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto; /* vertical + horizontal scrolling */
    }

/* Keep action buttons visible */
#dlgEmbeddingList .emb-actions {
    flex: 0 0 auto;
}

/* Helper text under tables shouldn't steal flex height */
#dlgEmbeddingList .emb-picker-row .small.mt-2.text-muted {
    flex: 0 0 auto;
}

/* Sticky headers behave inside scrolling region */
#dlgEmbeddingList .emb-tablewrap thead.position-sticky {
    top: 0;
}

/* Denser admin feel */
#dlgEmbeddingList .table.table-sm > :not(caption) > * > * {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Desktop: use grid for the 3-pane picker layout (avoids Bootstrap gutter issues) */
@media (min-width: 768px) {
    #dlgEmbeddingList .emb-picker-row {
        display: grid !important;
        /* Left and right share remaining space, middle is sized by its content */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 1rem;
        align-items: stretch;
        margin: 0 !important;
    }

        #dlgEmbeddingList .emb-picker-row > [class*="col-"] {
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
        }

    /* Middle column anchored to the top, not vertically centered */
    #dlgEmbeddingList .emb-actions {
        align-self: flex-start;
        align-items: flex-start;
        justify-content: center;
    }

    /* Inner grid width controls button size so they don't go full-column */
    #dlgEmbeddingList .emb-actions-grid {
        width: 220px;
        max-width: 100%;
    }
}

/* =========================================================
   Row selection (theme-aware like City Picker)
   Uses checkbox state, no JS / no <tr> manipulation.
   ========================================================= */

#dlgEmbeddingList tbody tr:has(input.form-check-input:checked) > td {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border-top-color: var(--bs-primary-border-subtle) !important;
    border-bottom-color: var(--bs-primary-border-subtle) !important;
}

    #dlgEmbeddingList tbody tr:has(input.form-check-input:checked) > td:first-child {
        box-shadow: inset 4px 0 0 var(--bs-primary-border-subtle);
    }

#dlgEmbeddingList tbody tr:has(input.form-check-input:checked):hover > td {
    background-color: var(--bs-primary-bg-subtle) !important;
}


/* Repeater row: stacked layout with tighter spacing */
#dlgEmbeddingList .table td,
#dlgEmbeddingList .table th {
    vertical-align: middle;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

/* Custom repeater row layout */
#dlgEmbeddingList .callsign-row {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
}

#dlgEmbeddingList .emb-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
}



/* Top row: filter + list select aligned with the 3-pane layout */
#dlgEmbeddingList .emb-top-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tablet and up: 5 / 2 / 5 grid, matching the picker row */
@media (min-width: 768px) {
    #dlgEmbeddingList .emb-top-row {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
        gap: 1rem;
        align-items: center;
    }
}

#dlgEmbeddingList .location-row {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* Disable Embed on phones (<768px) */
@media (max-width: 767.98px) {
    #btn-embed {
        display: none !important;
    }
}