.rssi {
    max-width: 20px;
    max-height:11px;
}


.tone-icon {
    max-width: 30px;
    max-height: 10px;
    padding-right: 5px;
}

.card.radio-interface {
    margin: 1px 2px;
}

.card-contents {
    padding:2px 4px;
}



.card.radio-interface.emergency-active {
    animation: emergency 1s infinite;
}

@keyframes emergency {
    0% {
        background: red;
        color: yellow;
    }
    1% {
        color:red;
        background: yellow;
    }
    50% {
        color:red;
        background: yellow;
    }
    51% {
        background: red;
        color: yellow;
    }
    100% {
        background: red;
        color: yellow;
    }
}


.mon-button-img
{
    width: 20px;
    margin-top:7px
}
.pri-button.selected {
    background: darkgreen;
}

/* v3 hold-to-talk attention tone: explicit orange so the long-tone state
   is visually distinct from the standard TX red. */
.attn-button.tone-held,
.btn.tone-held {
    background-color: #f57c00 !important;
    color: #fff !important;
}

/* Rev 7 console secondary-state labels: preempt TX and consoles-only RX.
   Compact subtext under the RID label so the existing card chrome stays
   intact; the parent card already paints red (TX) or green (RX). */
.channel-mode-subtext {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    margin: 1px 0 3px 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Rev 8: displaced-talker identity beneath "Transmitting (preempt)" —
   from channel_preempt_ok.displacedAlias / displacedRid. Lighter weight
   than the preempt label, italic, no uppercase. The operator can read
   the displaced unit's identity at a glance while their own TX is live. */
.channel-displaced-subtext {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.1;
    margin: -2px 0 3px 0;
    font-style: italic;
    opacity: 0.85;
}

/* Rev 7 follow-up: incoming-subscriber panel. Surfaces a radio TXing back
   into a TG we're preempting. Audio is on a dedicated second pipeline so
   the dispatcher can mute / adjust it without touching the main TG bus. */
.incoming-sub-panel {
    background-color: rgba(255,255,255,0.08);
    border-left: 3px solid #f57c00;
    padding: 3px 5px;
    margin: 3px 0;
    font-size: 11px;
}
.incoming-sub-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
}
.incoming-sub-label {
    font-weight: 600;
    flex: 0 0 auto;
}
.incoming-sub-volume {
    flex: 1 1 auto;
    height: 14px;
}

/* Rev 8 session-failed banner — wire drop + reactivate-in-progress.
   Distinct from pool_exhausted (terminal until manual retry); this one
   pairs with the auto-reactivate loop running underneath. Stronger
   visual weight than pool-exhausted so the dispatcher gets an
   unmissable cue paired with the 300Hz alarm tone. */
.session-failed-banner {
    background-color: #d50000;
    color: #fff;
    padding: 10px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    animation: session-failed-pulse 1.5s ease-in-out infinite;
}

.session-failed-label {
    display: inline-block;
    background-color: #fff;
    color: #d50000;
    padding: 2px 8px;
    margin-right: 10px;
    border-radius: 2px;
    font-weight: 900;
    letter-spacing: 1px;
}

.session-failed-banner button {
    margin-left: 12px;
    background-color: #fff;
    color: #d50000;
    border: none;
    padding: 4px 10px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
}

@keyframes session-failed-pulse {
    0%, 100% { background-color: #d50000; }
    50%      { background-color: #b71c1c; }
}

/* Rev 8 tile slash-through: when the console session is Failed, paint a
   diagonal stripe across the channel grid so the dispatcher's mental
   model matches reality — the resources are unusable until the auto-
   reactivate loop succeeds. Pointer-events stay enabled (CSS-only
   visual); TX is blocked at the PTT-button level via $root.sessionActive. */
.console-session-failed {
    position: relative;
    opacity: 0.55;
}
.console-session-failed::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(213, 0, 0, 0.18) 0px,
        rgba(213, 0, 0, 0.18) 20px,
        rgba(0, 0, 0, 0)      20px,
        rgba(0, 0, 0, 0)      40px
    );
    pointer-events: none;
    z-index: 1;
}

/* Rev 7 pool-exhausted banner: persistent, blocks TX visually. */
.pool-exhausted-banner {
    background-color: #b71c1c;
    color: #fff;
    padding: 8px 12px;
    text-align: center;
    font-weight: 600;
}

.pool-exhausted-banner button {
    margin-left: 12px;
    background-color: #fff;
    color: #b71c1c;
    border: none;
    padding: 4px 10px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
}

.card.radio-interface .btn {
    margin-top:2px;
    margin-bottom:2px;
}


.brand-logo {
    padding-left:5px!important;
}


body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}


.recent-list {
    overflow-y: scroll!important;
    height:100px;
    background-color:white;
}

.recent-list-item {
    font-size:11px;
    border:1px black solid;
    padding:2px!important;
    line-height:0em;
}

.recent-list-item[data-recent-type="Emergency Alarm"]{
    font-weight: bold;
    color:red;
}
.recent-list-item[data-recent-type=""]{
    color:white;
}