/*
  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/
*/

/* Overall modal / radio shell */
.rcd-ht .modal-content {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: visible; /* MUST be visible so antenna isn't clipped again */
}

.rcd-modal {
    overflow: visible !important;
}

/* Force a narrow handset-style width in preview, independent of Bootstrap */
.rcd-modal .modal-dialog {
    width: 385px;
    max-width: 100%;
    margin: 0 auto;
    position: relative !important;
    border-radius: 16px; /* or 18px like mockup */
    overflow: visible !important; /* must disable clipping */
}

.rcd-ht .modal-header {
    /* Simple header: bell, callsign, close */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-inline: 10px;
    padding-block: 3px;
    background: #d3d6de;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 6px;
    padding-left: 2px !important;
    padding-right: 8px !important;

}

/* Top status strip */
.rcd-radio-header {
    border-bottom: 0;
    cursor: move;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

    .rcd-radio-header::before,
    .rcd-radio-header::after {
        content: none;
    }

    .rcd-radio-header h6 {
        margin: 0;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        color: #343a40;
        text-transform: uppercase;
        text-align: center;
    }

#rcd-callsign {
    text-transform: uppercase;
    font-weight: 700;
}

.rcd-callsign-display {
    display: none;
    /* no extra callsign line inside LCD for now */
}

/* Bell + tiny LED indicator */
.rcd-led-indicator {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 4px;
    background: #a0a7b5;
    /* idle */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}

.rcd-icon-btn {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 1.1rem;
    color: #f4b000;
    /* amber like a status LED */
}

    .rcd-icon-btn i {
        line-height: 1;
    }

    .rcd-icon-btn:hover {
        opacity: 0.85;
    }

.rcd-ht .btn-close {
    width: auto;
    height: auto;
    padding-right: 8px !important;
    border-radius: 0;
    border: none;
    background-color: transparent;
    filter: none;
    opacity: .7;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .rcd-ht .btn-close i {
        font-size: 1.1rem;
        color: #6c757d;
    }

    .rcd-ht .btn-close:hover {
        opacity: 1;
        background-color: transparent;
    }

/* Radio shell body */
.rcd-radio-shell {
    background: #2b2d31;
    /* retro dark scanner body */
    padding: 0;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.8);
    border: 1px solid #1a1b1e;
    position: relative;
    /* NEW: match outer shell */
    border-radius: 0 0 12px 12px; /* NEW – rounds bottom corners */
}

.rcd-radio-inner {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 22px 6px 10px; /* top / sides / bottom */
    background: #2f3238;
    border-radius: 10px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.75);
}


/* Faux LCD */
.rcd-lcd {
    display: block;
    background: #0f1114;
    border: 2px solid #444;
    border-radius: 4px;
    padding: 10px 12px 12px 12px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
    font-size: 0.8rem;
    color: #d5e0ff;
}

.rcd-lcd-top {
    color: #9fb5ff;
    font-weight: 500;
    font-size: 0.65rem;
}

.rcd-lcd-channel {
    letter-spacing: 0.1em;
}

.rcd-lcd-meter {
    display: inline-flex;
    gap: 2px;
}

.rcd-meter-bar {
    width: 4px;
    height: 8px;
    border-radius: 1px;
    background: #324371;
}

.rcd-metric-active .rcd-meter-bar:nth-child(-n+3) {
    background: #5bb0ff;
}

.rcd-metric-strong .rcd-meter-bar:nth-child(n+3) {
    background: #ff725c;
}

.rcd-lcd-main {
    line-height: 1.2;
}

.rcd-frequency-display {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

#rcd-frequency.rcd-scan {
    text-shadow: 0 0 6px rgba(140, 220, 255, 0.9);
    animation: rcd-scan-flicker 0.2s infinite;
}

@keyframes rcd-scan-flicker {

    0%, 100% {
        opacity: 1;
    }

    40% {
        opacity: 0.7;
    }

    70% {
        opacity: 0.9;
    }
}

.rcd-location-display {
    margin-top: 2px;
    font-size: 0.9rem;
    color: #c4cee8;
}

.rcd-lcd-bottom {
    margin-top: 4px;
    color: #a8b6db;
}

.rcd-mode-line {
    letter-spacing: 0.08em;
}

/* Keypad area */
.rcd-keypad {
    margin-top: 8px;
    /* was 10px */
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* was 8px */
}

.rcd-keypad-row {
    display: flex;
    gap: 4px;
    /* tightened */
}

/* Basic button look so this works even without Bootstrap in preview */
.rcd-keypad .btn,
.rcd-claim-key {
    margin-top: 2px;
    width: 100%;
    border-radius: 9px;
    border: 1px solid #050608;
    background: radial-gradient(circle at 30% 0%, #50535b 0%, #2a2c32 55%, #15161b 100%);
    color: #f0f3ff;
    padding: 2px 0;
    font-size: 0.78rem;
    box-shadow: 0 2px 0 #050608, 0 3px 4px rgba(0, 0, 0, 0.65);
}

.rcd-claim-key {
    margin-top: 2px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #888;
    background: #e6e6e6;
    color: #222;
    padding: 4px 0;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.15);
}

    .rcd-claim-key:hover {
        background: #dcdcdc;
    }

    .rcd-keypad .btn:hover,
    .rcd-claim-key:hover {
        transform: translateY(1px);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
        background: #f4f7ff;
    }

/* Colors for rows */
/* Active-state mock classes for RX / Ping / TX (preview only) */
.rcd-keypad .btn.rcd-rx-active {
    background-color: rgba(13, 110, 253, 0.85);
    color: #000;
    border-color: rgba(13, 110, 253, 1);
}

.rcd-keypad .btn.rcd-ping-active {
    background-color: rgba(255, 165, 0, 1);
    color: #000;
    border-color: rgba(255, 193, 7, 1);
}

.rcd-keypad .btn.rcd-tx-active {
    background-color: rgba(20, 115, 70, 0.85);
    color: #000;
    border-color: rgba(25, 135, 84, 1);
}

/* Colors for rows */
/* RX / Ping / TX */
#btn-rx-label {
    border-color: rgba(13, 110, 253, 0.7);
    color: rgba(13, 110, 253, 0.95);
}

#btn-ping-label {
    border-color: rgba(255, 193, 7, 0.9);
    color: rgba(214, 158, 0, 1);
}

#btn-tx-label {
    border-color: rgba(25, 135, 84, 0.7);
    color: rgba(25, 135, 84, 1);
}

/* Chart / Range */
#btnCoverageChart,
#btnCoverageRange {
    border-color: rgba(13, 110, 253, 0.8);
    color: rgba(13, 110, 253, 0.97);
}

/* Online / Who's On */
#toggleOnlineBtn,
#toggleWhosOnlineBtn {
    border-color: rgba(25, 135, 84, 0.75);
    color: rgba(25, 135, 84, 1);
}

/* Claim key (same family as other keys, neutral color) */
.rcd-claim-key {
    margin-top: 2px;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #888;
    background: #e4e4e4;
    color: #222;
/*    padding: 7px 0;
*/    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.15);
}

    .rcd-claim-key:hover {
        background: #d8d8d8;
    }

    .rcd-claim-key i {
        margin-right: 4px;
    }

/* Simple demo container alignment */
/* Demo wrapper */
.rcd-preview {
    padding: 20px;
    background: #bfc3cc;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.rcd-demo-wrapper {
    display: none;
    justify-content: center;
    padding: 0;
    width: 100%;
}

    .rcd-demo-wrapper.is-open {
        display: flex;
    }

/* Visually hidden helper for a11y-only text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Retro screws */
.rcd-radio-shell::before,
.rcd-radio-shell::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #d0d0d0 0%, #8e8e8e 60%, #5c5c5c 100%);
    box-shadow: 0 0 2px #000;
}

.rcd-radio-shell::before {
    left: 10px;
}

.rcd-radio-shell::after {
    right: 10px;
}

/* Retro speaker grille */
.rcd-radio-inner::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 10px;
    right: 10px;
    height: 10px;
    background: repeating-linear-gradient(90deg, #9a9ca0 0px, #9a9ca0 2px, transparent 2px, transparent 5px);
    opacity: 0.4;
}

/* Antenna + knob pinned to the radio card instead of the full-screen modal */
.rcd-ht .modal-content::before {
    content: "";
    position: absolute;
    top: -32px; /* adjust a couple px if needed */
    left: 20%;
    width: 10px;
    height: 26px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #3c3f45 0%, #181a20 65%, #07080b 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 8px 6px rgba(0, 0, 0, 0.55);
}

.rcd-ht .modal-content::after {
    content: "";
    position: absolute;
    top: -20px; /* adjust slightly if you want it closer/further */
    right: 20%;
    width: 32px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 20% 0%, #f5f5f7 0%, #b7bac0 45%, #6a6d74 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 6px 4px rgba(0, 0, 0, 0.55);
}


/* Finer speaker grille just under header */

    .rcd-radio-inner::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 12px;
        right: 12px;
        height: 11px;
        border-radius: 999px;
        background: repeating-linear-gradient(90deg, #a0a3aa 0px, #a0a3aa 2px, transparent 2px, transparent 5px);
        opacity: 0.55;
    }

/* LCD as richer radio display */
.rcd-lcd {
    background: radial-gradient(circle at 10% 0%, #272b3c 0%, #111523 40%, #080a12 100%);
    border-radius: 8px;
    border: 1px solid #3d4152;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.8);
    color: #dde6ff;
}

.rcd-lcd-top {
    color: #8fb1ff;
    font-weight: 600;
}

.rcd-frequency-display {
    font-size: 1.45rem;
    letter-spacing: 0.09em;
}

.rcd-location-display {
    color: #c7d2ff;
}

.rcd-mode-line {
    letter-spacing: 0.12em;
}

/* Rubberized keypad */
.rcd-keypad .btn,
.rcd-claim-key {
    border-radius: 9px;
    border: 1px solid #050608;
    background: radial-gradient(circle at 30% 0%, #50535b 0%, #2a2c32 55%, #15161b 100%);
    color: #f0f3ff;
    box-shadow: 0 2px 0 #050608, 0 3px 4px rgba(0, 0, 0, 0.65);
}

    .rcd-keypad .btn:hover,
    .rcd-claim-key:hover {
        background: radial-gradient(circle at 30% 0%, #5d616a 0%, #30323a 55%, #181920 100%);
        transform: translateY(1px);
        box-shadow: 0 1px 0 #050608, 0 2px 3px rgba(0, 0, 0, 0.65);
    }

/* Keep color accents on text only */
#btn-rx-label {
    color: #7fb0ff;
}

#btn-ping-label {
    color: #ffd76a;
}

#btn-tx-label {
    color: #8be3aa;
}

#btn-rx-label.active {
    background: linear-gradient(180deg, #e4eeff 0%, #c7d8ff 100%);
    color: #0f2b6a;
    border-color: rgba(13, 110, 253, 0.9);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.6), 0 0 12px rgba(13, 110, 253, 0.45);
}

#btn-ping-label.active {
    background: linear-gradient(180deg, #fff4cf 0%, #ffe7a5 100%);
    color: #7a5a00;
    border-color: rgba(255, 193, 7, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.5), 0 0 12px rgba(255, 193, 7, 0.35);
}

#btn-tx-label.active {
    background: linear-gradient(180deg, #e3f6e8 0%, #c7ebd1 100%);
    color: #135129;
    border-color: rgba(25, 135, 84, 0.95);
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.55), 0 0 12px rgba(25, 135, 84, 0.40);
}

#btnCoverageChart,
#btnCoverageRange {
    color: #89a7ff;
}

#toggleOnlineBtn,
#toggleWhosOnlineBtn {
    color: #8be3aa;
}

/* click-through backdrop */
#repeaterContextModal {
    pointer-events: none !important;
}
    /* click-through backdrop */
    #repeaterContextModal .modal-dialog {
        position: absolute; /* absolute so touch/click isn’t captured by bs centering */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* exact centering */
        margin: 0;
    }

    #repeaterContextModal .modal-content,
    #repeaterContextModal .modal-header,
    #repeaterContextModal .btn-close {
        pointer-events: auto;
    }

    /* Watch bell (icon + hitbox) */
    #repeaterContextModal #rcd-watchBtn {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

        /* Base bell: blue OUTLINE only */
        #repeaterContextModal #rcd-watchBtn .bi {
            font-size: 1.10rem; /* back near original size */
            line-height: 1;
            color: transparent; /* no fill */
            -webkit-text-stroke: 1px #1c39bb; /* thinner outline */
            text-stroke: 1px #1c39bb;
        }

        /* Subscribed: solid filled blue bell */
        #repeaterContextModal #rcd-watchBtn.active .bi {
            color: #1c39bb; /* fill */
            -webkit-text-stroke: 0;
            text-stroke: 0;
        }

/* Toggle states for RX/Ping/TX (your colors) */
/* RX on (soft blue, like the RX card) */
/* RX on – solid blue key */
#rxOption:checked + #btn-rx-label {
    background-image: none;
    background-color: #2962ff; /* solid blue */
    color: #ffffff;
    border-color: #2962ff;
    box-shadow: 0 0 0 1px rgba(41, 98, 255, 0.9), 0 0 12px rgba(41, 98, 255, 0.75);
}

/* Ping on – solid amber key */
#pingOption:checked + #btn-ping-label {
    background-image: none;
    background-color: #ffb300; /* solid amber */
    color: #1b1300;
    border-color: #ffb300;
    box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.9), 0 0 12px rgba(255, 179, 0, 0.75);
}

/* TX on – solid green key */
#txOption:checked + #btn-tx-label {
    background-image: none;
    background-color: #00c853; /* solid green */
    color: #001509;
    border-color: #00c853;
    box-shadow: 0 0 0 1px rgba(0, 200, 83, 0.9), 0 0 12px rgba(0, 200, 83, 0.75);
}

/* Pulsating red glow (keep as utility) */
.pulsate {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,0,0,0.8);
    }

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

    100% {
        box-shadow: 0 0 0 0 rgba(255,0,0,0);
    }
}


.rcd-lcd {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}