/*
 * FDMR Monitor - modern theme (Bootstrap 5.3, light/dark)
 * Theme colours from fdmr-mon.cfg are injected by css/theme.php (.theme-bg)
 */

:root {
  --rx-bg: #ff7a1a;          /* source of the call (on air) */
  --rx-fg: #ffffff;
  --tx-bg: #b9f3c4;          /* systems receiving the call  */
  --tx-fg: #0f3d1c;
  --ts1: #b70101;
  --ts2: #3a4aa6;
  --dial: #538a2c;
  --tg: #b5651d;
  --tgname: #1f7a33;
  --call: #0b5ed7;
  --name: #002d62;
  --panel-radius: .9rem;
}
[data-bs-theme="dark"] {
  --rx-bg: #d8620e;
  --tx-bg: #1e4d2b;
  --tx-fg: #c8f5d3;
  --ts1: #ff7b7b;
  --ts2: #9aa8ff;
  --dial: #9bd37a;
  --tg: #f0a45d;
  --tgname: #7fd88f;
  --call: #6ea8fe;
  --name: #b6c8ff;
}

body { font-feature-settings: "tnum" 1; }
body.frame { background: transparent; }
.ls-1 { letter-spacing: .06em; }

/* ---------- navbar ---------- */
.navbar.theme-bg .navbar-brand,
.navbar.theme-bg .nav-link { color: inherit; }
.navbar.theme-bg .nav-link { opacity: .9; border-radius: .5rem; }
.navbar.theme-bg .nav-link:hover,
.navbar.theme-bg .nav-link.active,
.navbar.theme-bg .nav-link.show { opacity: 1; background: rgba(255,255,255,.14); }
.brand-logo { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); border-radius: .35rem; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .75rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12); }
.dropdown-item { border-radius: .4rem; }
.dropdown-menu { padding: .35rem; }

/* websocket status pill */
.ws-status { display: inline-flex; align-items: center; gap: .4rem; background: rgba(0,0,0,.25); color: #fff; font-weight: 500; }
.ws-status .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #adb5bd; }
.ws-status.online .dot { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.7); animation: pulse 2s infinite; }
.ws-status.offline .dot { background: #ff5c5c; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.6); } 70% { box-shadow: 0 0 0 .45rem rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }

/* ---------- panels ---------- */
.panel { border-radius: var(--panel-radius); border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); overflow: hidden; margin-bottom: 1.5rem; }
.panel > .card-header { background: var(--bs-tertiary-bg); font-weight: 600; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; }
.panel > .card-header .bi { color: var(--bs-primary); }
.panel > .card-header .count { margin-left: auto; }
.panel .card-footer { background: var(--bs-tertiary-bg); font-size: .85rem; }
.ws-panel:empty::before { content: ""; display: block; height: 6rem; border-radius: var(--panel-radius); background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.waiting { padding: 2rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.waiting .spinner-grow { width: .8rem; height: .8rem; vertical-align: middle; margin-right: .4rem; }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; font-size: .9rem; }
.table > thead > tr > th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.table > thead:not(.theme-head) > tr > th { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; }
.table td { vertical-align: middle; }
.table .sys-cell { background: var(--bs-tertiary-bg); font-weight: 600; }
.table-responsive { max-width: 100%; }

.RX { background-color: var(--rx-bg) !important; color: var(--rx-fg) !important; }
.TX { background-color: var(--tx-bg) !important; color: var(--tx-fg) !important; }
td.RX a, td.TX a { color: inherit; }

/* ---------- small building blocks ---------- */
.callsign { font-weight: 700; color: var(--call); text-decoration: none; }
.callsign:hover { text-decoration: underline; }
.dmrid { font-size: .78em; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.opname { color: var(--name); font-weight: 600; }
.tg { font-weight: 700; color: var(--tg); font-variant-numeric: tabular-nums; }
.tgname { color: var(--tgname); font-weight: 600; }
.location { font-size: .8em; color: var(--bs-secondary-color); }
/* Bootstrap sets the cell colour with a (0,1,1) selector: repeat the colours with higher specificity */
.table td.tg, .table .tg { color: var(--tg); }
.table td.tgname { color: var(--tgname); }
.table td.opname { color: var(--name); }
.table .dmrid, .table .location { color: var(--bs-secondary-color); }
.table td.RX .tg, .table td.RX.tg, .table td.TX .tg, .table td.TX.tg { color: inherit; }
.mono { font-family: var(--bs-font-monospace); }

.slot { display: inline-block; min-width: 2.6rem; text-align: center; font-size: .72rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; border: 1px solid currentColor; }
.slot-1 { color: var(--ts1); }
.slot-2 { color: var(--ts2); }
.slot-dial { color: var(--dial); }
td.RX .slot, td.TX .slot { color: inherit; }

.badge-data { background: #1dd11d; color: #062b06; }
.badge-soft { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 500; }

/* live activity */
.activity-row td { background: rgba(255,122,26,.10) !important; }
.live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rx-bg); margin-right: .35rem; animation: blink 1s ease-in-out infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
.activity-empty { min-height: var(--activity-min-height, 45px); }

/* connected systems chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--bs-secondary-bg); color: var(--bs-body-color); text-decoration: none; border: 1px solid var(--bs-border-color-translucent); cursor: default; }
.chip a { color: var(--call); text-decoration: none; }
.chip.ok { background: rgba(25,135,84,.15); border-color: rgba(25,135,84,.35); }
.chip.ko { background: rgba(220,53,69,.18); border-color: rgba(220,53,69,.45); }
.chip .bi { font-size: .8em; }

/* css-only hover card (works with content injected by the websocket) */
.hovercard { position: relative; }
.hovercard > .hc-body { position: absolute; z-index: 20; left: 0; top: calc(100% + .35rem); min-width: 14rem; max-width: 20rem; padding: .6rem .75rem; border-radius: .6rem; background: #1f2530; color: #e9edf5; font-size: .8rem; font-weight: 400; line-height: 1.45; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .12s ease; pointer-events: none; white-space: normal; text-align: left; }
.hovercard:hover > .hc-body, .hovercard:focus-within > .hc-body, .hovercard:focus > .hc-body { opacity: 1; visibility: visible; transform: none; }
.hc-body b { color: #fff; }
.hc-body .hl { color: #ffd54a; font-weight: 600; }

/* call log (moni.php) */
.console { background: #0d1117; color: #c9d1d9; border-radius: 0 0 var(--panel-radius) var(--panel-radius); margin: 0; padding: .75rem 1rem; height: 60vh; overflow: auto; font-size: .8rem; line-height: 1.5; white-space: pre; }
.console .ln-start { color: #ffa657; }
.console .ln-end { color: #7ee787; }
.console .ln-sys { color: #79c0ff; }

/* system info */
.graph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 1rem; }
.graph-grid figure { margin: 0; background: #fff; border-radius: .6rem; padding: .5rem; border: 1px solid var(--bs-border-color-translucent); }
.graph-grid img { width: 100%; height: auto; display: block; }

/* self service */
.auth-card { max-width: 440px; margin: 0 auto; }
.opt-current { font-size: .85rem; color: var(--bs-secondary-color); }
.opt-current .val { color: var(--bs-body-color); font-weight: 600; }
.device-list .list-group-item { display: flex; align-items: center; gap: .75rem; }
.device-list .bi-router { font-size: 1.4rem; color: var(--bs-primary); }

/* bridges */
.bridge-title { font-size: .95rem; font-weight: 700; padding: .5rem 1rem; background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color-translucent); margin: 0; }

.site-footer a { color: inherit; }

@media (max-width: 575.98px) {
  .table { font-size: .82rem; }
  .hide-xs { display: none; }
  main.container-xxl { padding-left: .75rem; padding-right: .75rem; }
}

/* options calculator */
.optcalc-result { position: sticky; top: 5rem; }
.optcalc-result output.out { display: block; min-height: 2.6rem; white-space: pre-wrap; word-break: break-all; background: var(--bs-tertiary-bg); font-size: .85rem; }
.optcalc-result output.out:empty::before { content: "—"; color: var(--bs-secondary-color); }

/* system info (sysinfo.php): validated categorical slots 1-2, light and dark */
.viz-root { --series-1: #2a78d6; --series-2: #eb6834; --st-good: #198754; --st-warning: #b07800; --st-critical: #dc3545; }
[data-bs-theme="dark"] .viz-root { --series-1: #3987e5; --series-2: #d95926; --st-good: #4cc38a; --st-warning: #e0a100; --st-critical: #ff6b6b; }
.si-plot { position: relative; padding: .5rem .75rem; min-height: 190px; }
.si-svg { display: block; width: 100%; height: auto; overflow: visible; }
.si-grid { stroke: var(--bs-border-color-translucent); stroke-width: 1; }
.si-axis { stroke: var(--bs-border-color); stroke-width: 1; }
.si-tick { fill: var(--bs-secondary-color); font-size: 10px; font-variant-numeric: tabular-nums; }
.si-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.si-line.si-s1 { stroke: var(--series-1); }
.si-line.si-s2 { stroke: var(--series-2); }
.si-dot { stroke: var(--bs-body-bg); stroke-width: 2; }
.si-dot.si-s1 { fill: var(--series-1); }
.si-dot.si-s2 { fill: var(--series-2); }
.si-hair { stroke: var(--bs-secondary-color); stroke-width: 1; stroke-dasharray: 3 3; }
.si-hit { fill: transparent; cursor: crosshair; outline: none; }
.si-hit:focus-visible { stroke: var(--bs-primary); stroke-width: 1; }
.si-tip { display: none; position: absolute; top: .5rem; z-index: 5; pointer-events: none; background: var(--bs-body-bg);
          border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .35rem .55rem; font-size: .8rem;
          box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); white-space: nowrap; color: var(--bs-body-color); }
.si-tip-time { color: var(--bs-secondary-color); font-size: .75rem; margin-bottom: .15rem; }
.si-tip-row { display: flex; align-items: center; gap: .4rem; }
.si-tip-lab { color: var(--bs-secondary-color); }
.si-sw { display: inline-block; width: .75rem; height: 2px; border-radius: 1px; vertical-align: middle; }
.si-sw.si-s1 { background: var(--series-1); }
.si-sw.si-s2 { background: var(--series-2); }
.si-legend { display: flex; gap: .9rem; font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }
.si-leg-item { display: inline-flex; align-items: center; gap: .35rem; }
.si-empty { padding: 3rem 0; text-align: center; color: var(--bs-secondary-color); font-size: .85rem; }
.si-value { font-variant-numeric: tabular-nums; }
.si-status { font-weight: 600; }
.si-good { color: var(--st-good); }
.si-warning { color: var(--st-warning); }
.si-critical { color: var(--st-critical); }
.si-tile { height: 100%; }

/* ---------- linked systems: device card grid ---------- */
.lnk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.lnk-search { max-width: 22rem; flex: 1 1 14rem; }
.lnk-panel { overflow: visible; }                       /* hover cards may extend past the panel */
.lnk-panel > .card-header { border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.lnk-body { padding: .75rem; }
.lnk-group + .lnk-group { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--bs-border-color-translucent); }
.lnk-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: .5rem; }
.lnk-group-head .location { font-size: .8rem; }
.sys-name { font-weight: 700; }
.dev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 576px) { .dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .dev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .dev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 4 hotspots per row on desktop */
.dev-card { border: 1px solid var(--bs-border-color-translucent); border-radius: .6rem; padding: .45rem .55rem; background: var(--bs-body-bg); display: flex; flex-direction: column; gap: .25rem; min-width: 0; font-size: .85rem; }
.dev-card.dev-active { border-color: var(--rx-bg); box-shadow: 0 0 0 1px var(--rx-bg); }
.dev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.dev-id { min-width: 0; }
.dev-id .location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-time { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dev-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; border-radius: .4rem; padding: .15rem .3rem; min-height: 1.7rem; background: var(--bs-tertiary-bg); }
.dev-slot.RX .slot, .dev-slot.TX .slot { color: inherit; }
.dev-sub { font-weight: 600; }
.dev-dest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dev-idle { font-size: .75rem; color: var(--bs-secondary-color); }
.dev-card[hidden], .lnk-group[hidden] { display: none !important; }
.key-badge { cursor: pointer; }
.key-badge .bi-x-lg { font-size: .65em; opacity: .6; }
.key-badge:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.key-badge:hover .bi-x-lg { opacity: 1; }
/* one line: call sign, DMR id, time connected, system; only the id shrinks (…) when the card is narrow */
.dev-line { display: flex; align-items: baseline; gap: .45rem; white-space: nowrap; min-width: 0; }
.dev-call { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.dev-call .callsign { flex-shrink: 0; }
.dev-call .dmrid { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dev-line .dev-time, .dev-sys { flex-shrink: 0; }
.dev-sys { font-size: .68rem; color: var(--bs-secondary-color); font-family: var(--bs-font-monospace); }
.dev-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -.2rem; }
.dev-card { container-type: inline-size; position: relative; }
.dev-card:hover, .dev-card:focus-within { z-index: 5; }   /* hover card above the next row (each card is its own stacking context) */
.dev-sys .sys-hash { display: none; }
/* narrower card: "SYSTEM-11" becomes "#11" (full name in the tooltip) and the clock icon goes away */
@container (max-width: 17rem) { .dev-sys .sys-base, .dev-line .dev-time .bi { display: none; } .dev-sys .sys-hash { display: inline; } .dev-line { gap: .3rem; } }

/* ---------- live map (map.php) ---------- */
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.map-search { max-width: 20rem; flex: 1 1 13rem; }
.map-kinds .badge { font-weight: 500; }
.map-panel { overflow: hidden; }
.map-canvas { height: calc(100vh - 19rem); min-height: 420px; z-index: 0; }
.map-footer { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; }
.map-legend { display: inline-flex; gap: 1rem; margin-left: auto; font-size: .82rem; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .map-canvas .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
[data-bs-theme="dark"] .leaflet-container { background: #1b1f24; }
.leaflet-container { font-family: inherit; }
/* markers */
.mk-wrap { background: none; border: 0; }
.mk, .mk-dot { display: inline-block; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.mk { width: 28px; height: 28px; margin: 1px; display: flex; align-items: center; justify-content: center; color: #fff; }
.mk svg { width: 19px; height: 19px; display: block; }
.mk-dot { width: .8rem; height: .8rem; vertical-align: -.1rem; border-width: 1px; }
/* small icon badge used in the type filter buttons */
.mk-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  color: #fff; vertical-align: -.3rem; }
.mk-ico svg { width: .9rem; height: .9rem; }
.mk-rpt { background: #2a78d6; }   /* repeater: blue, tower icon */
.mk-hs  { background: #1f9d55; }   /* hotspot: green, hotspot icon */
.mk-net { background: #6c757d; }   /* network client: grey, globe icon */
.mk-tx  { background: #e03131; }
.mk-rx  { background: #f59f00; }
.mk.mk-on-rx { box-shadow: 0 0 0 3px #f59f00, 0 1px 3px rgba(0,0,0,.45); }
.mk.mk-on-tx { background: #e03131; animation: mk-pulse 1.2s ease-out infinite; }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,49,49,.7); } 100% { box-shadow: 0 0 0 16px rgba(224,49,49,0); } }
@media (prefers-reduced-motion: reduce) { .mk.mk-on-tx { animation: none; box-shadow: 0 0 0 4px rgba(224,49,49,.5); } }
.mk-cluster { background: none; }
.mk-cluster span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(42,120,214,.85); color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.mk-cluster-tx span { background: rgba(224,49,49,.9); animation: mk-pulse 1.2s ease-out infinite; }
/* popup */
.mk-popup-head { display: flex; align-items: baseline; gap: .35rem; }
.mk-popup .location { margin-bottom: .3rem; }
.mk-popup-tx { background: var(--rx-bg); color: var(--rx-fg); border-radius: .35rem; padding: .15rem .4rem; margin: .2rem 0; font-weight: 600; font-size: .82rem; }
.mk-popup-dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: .3rem 0 0; font-size: .8rem; }
.mk-popup-dl dt { font-weight: 600; color: #6c757d; }
.mk-popup-dl dd { margin: 0; }
[data-bs-theme="dark"] .leaflet-popup-content-wrapper, [data-bs-theme="dark"] .leaflet-popup-tip { background: #252a31; color: #e3e6ea; }

/* ---------- live listening (listen.php, prototype) ---------- */
.ls-now { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: .6rem; background: var(--bs-tertiary-bg); }
.ls-now-icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 1.2rem; flex-shrink: 0; }
.ls-now.listening .ls-now-icon { background: #1f9d55; color: #fff; }
.ls-now.on-air .ls-now-icon { background: #e03131; color: #fff; animation: mk-pulse 1.2s ease-out infinite; }
.ls-now-title { font-weight: 600; }
.ls-meter { width: 5rem; height: .45rem; border-radius: 1rem; background: var(--bs-secondary-bg); overflow: hidden; flex-shrink: 0; }
.ls-meter span { display: block; height: 100%; width: 0; background: #1f9d55; transition: width .08s linear; }
.ls-item { display: flex; align-items: center; gap: .6rem; }
.ls-item .ls-tg { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.5rem; }
.ls-item .ls-who { color: var(--bs-secondary-color); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-item.on-air .ls-tg { color: #e03131; }
.ls-item.active .ls-tg, .ls-item.active .ls-who { color: #fff; }