@charset "UTF-8";
/* Motorola MCC 7500E Elite Dispatch.
   Colour belongs to the resource, not to its state — a LAW resource is navy
   whether it is idle or receiving. State shows in the stack, the header lines
   and the feature buttons, exactly as it does on the real console. */

#dispatch {
  display: none;
  position: fixed; inset: 0; z-index: 80;
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 11px; color: #000;
  background: #3f4a5a;
  cursor: default;
}
#dispatch.open { display: flex; flex-direction: column; }
#dispatch img { image-rendering: pixelated; pointer-events: none; }

/* Windows trackbar, not the browser accent colour */
#dispatch input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 15px; background: #fff; cursor: pointer;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
#dispatch input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 17px; margin-top: -3px; background: #d4d0c8;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dispatch input[type=range]::-webkit-slider-runnable-track { height: 9px; background: transparent; }
#dispatch input[type=range]::-moz-range-thumb {
  width: 11px; height: 17px; border-radius: 0; background: #d4d0c8;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dispatch input[type=range]::-moz-range-track { height: 9px; background: transparent; }

/* ── title bar ────────────────────────────────────────────────────────── */
#dsTitle {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 22px; padding: 0 3px;
  background: linear-gradient(#0a5fc8, #073f88);
  color: #fff; font-size: 11px; font-weight: bold;
}
#dsTitle .ico { width: 14px; height: 14px; }
#dsTitle .spacer { flex: 1; }
#dsTitle .xbtn {
  width: 30px; height: 16px; line-height: 12px; text-align: center;
  background: #d4d0c8; color: #000; font-weight: bold; cursor: pointer; font-size: 10px;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dsTitle .xbtn:active { border-color: #808080 #fff #fff #808080; }

#dsMenu {
  display: flex; flex: none; height: 19px; align-items: center;
  padding: 0 2px; background: #d4d0c8; font-size: 11px;
}
#dsMenu span { padding: 2px 7px; }
#dsMenu span:hover { background: #0a246a; color: #fff; }

/* ── toolbar ──────────────────────────────────────────────────────────── */
#dsBar {
  display: flex; align-items: stretch; flex: none;
  background: #d4d0c8; border-bottom: 1px solid #808080;
  padding: 1px 2px; gap: 1px;
}
#dsLogo {
  display: flex; align-items: center; gap: 6px; padding: 0 14px 0 6px;
  border-right: 2px groove #f0f0f0; margin-right: 3px;
}
#dsLogo .m { width: 24px; height: 24px; object-fit: contain; image-rendering: auto; }
#dsLogo .wm { font: bold 13px Arial, sans-serif; letter-spacing: .04em; color: #000; }

#dsBar .tb {
  display: flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 3px; cursor: pointer;
  border: 2px solid transparent; background: transparent;
}
#dsBar .tb:hover { border-color: #fff #808080 #808080 #fff; }
#dsBar .tb:active,
#dsBar .tb.on { border-color: #808080 #fff #fff #808080; background: #c5c1b9; }
#dsBar .tb img { max-height: 24px; max-width: 30px; }
#dsBar .tb.keyed { background: #ffb000; border-color: #808080 #fff #fff #808080; }
#dsBar .tb.alarm { background: #ff2020; border-color: #808080 #fff #fff #808080; }
#dsBar .sep { width: 2px; margin: 2px 3px; border-left: 2px groove #f0f0f0; }
#dsBar .spacer { flex: 1; }
#dsBar select {
  font: 11px Tahoma, sans-serif; height: 20px; align-self: center;
  border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff;
}

/* ── folder tabs ──────────────────────────────────────────────────────── */
#dsFolders {
  flex: none; display: flex; align-items: flex-end; gap: 0;
  padding: 3px 4px 0; background: #d4d0c8;
  border-bottom: 1px solid #808080;
}
/* Flat tab controls, not bevelled buttons. The old 2px outset put a white edge
   along the top and left of every tab, which read as a puffy rounded pill even
   though nothing here has a radius. */
#dsFolders .folder {
  padding: 3px 20px; background: #d4d0c8; font-size: 11px; cursor: pointer;
  border: 1px solid #808080; border-bottom: none;
  margin-right: -1px; position: relative;
}
#dsFolders .folder:hover { background: #dedad2; }
#dsFolders .folder.on {
  font-weight: bold; background: #e8e5df; z-index: 2;
  padding-top: 2px; padding-bottom: 4px;
}

/* ── workspace ────────────────────────────────────────────────────────── */
#dsMain { flex: 1; display: flex; min-height: 0; background: #3f4a5a; padding: 4px; gap: 4px; }
#dsStrips { flex: 1; min-width: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start; }

/* ── resource tile ────────────────────────────────────────────────────── */
/* A resource is white unless the configuration paints it. Selection turns the
   tile blue, multi-select outlines it green, an emergency outlines it red. */
.rstrip {
  --tile: #ffffff; --head: #ffffff; --txt: #000000; --sub: #000000;
  --edge: #808080;
  background: var(--tile); display: flex; flex-direction: column;
  border: 2px solid var(--edge); cursor: pointer; user-select: none;
  min-height: 262px;
}
.rstrip.law  { --tile: #000060; --head: #000060; --txt: #fff; --sub: #ffff00; --edge: #000060; }
.rstrip.fire { --tile: #ee0000; --head: #ee0000; --txt: #fff; --sub: #ffff00; --edge: #cc0000; }
.rstrip.pw   { --tile: #6ea3e0; --head: #6ea3e0; --txt: #fff; --sub: #ffff00; --edge: #4f83c0; }

.rstrip.selected {
  --tile: #4a86e8; --head: #3b78dc; --txt: #ffffff; --sub: #ffff00; --edge: #2a5db0;
}
.rstrip.msel { border-color: #00c000; }
.rstrip.hasemerg { border-color: #ee0000; }

.rstrip .head { display: flex; align-items: stretch; gap: 5px; background: var(--head); padding: 3px; }
.rstrip .xmit {
  flex: none; width: 38px; display: flex; align-items: center; justify-content: center;
  background: #d4d0c8; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.rstrip .xmit img { max-width: 26px; max-height: 30px; }
.rstrip .xmit.keyed { background: #ff2020; border-color: #808080 #fff #fff #808080; }
.rstrip .htext { flex: 1; min-width: 0; text-align: left; line-height: 1.2; overflow: hidden; }
.rstrip .htext div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rstrip .htext .n1 { color: var(--txt); font-weight: bold; font-size: 12px; }
.rstrip .htext .n2,
.rstrip .htext .n3 { color: var(--sub); font-weight: bold; font-size: 11px; }
/* an emergency shows on the alarm button, not by repainting the resource */
.rstrip.hasemerg .htext .n2 { color: #ff4040; }
.rstrip.law.hasemerg .htext .n2,
.rstrip.fire.hasemerg .htext .n2,
.rstrip.selected.hasemerg .htext .n2 { color: #ffd000; }

.rstrip .stack {
  display: flex; margin: 0 3px 3px; background: #fff;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.rstrip .stack .rows { flex: 1; min-width: 0; }
.rstrip .stack .row { display: flex; height: 15px; align-items: center; font-size: 11px; color: #000; }
.rstrip .stack .row .a {
  flex: 1; min-width: 0; padding: 0 3px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid #d0d0d0;
}
.rstrip .stack .row .b { width: 46%; padding: 0 3px; overflow: hidden; white-space: nowrap; }
.rstrip .stack .row.live { background: #d6efd6; font-weight: bold; }
.rstrip .stack .row.em { color: #cc0000; font-weight: bold; }
.rstrip .stack .sb {
  flex: none; width: 14px; display: flex; flex-direction: column;
  justify-content: space-between; background: #d4d0c8; border-left: 1px solid #a0a0a0;
}
.rstrip .stack .sb i {
  height: 13px; font-style: normal; font-size: 7px; text-align: center; line-height: 13px;
  border: 1px solid; border-color: #fff #808080 #808080 #fff; background: #d4d0c8;
}

.rstrip .ctl { display: flex; gap: 3px; margin: 0 3px 3px; align-items: stretch; }
.rstrip .ctl .vol {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 3px;
  background: #d4d0c8; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.rstrip .ctl .vol input { width: 100%; }

.rstrip .fbtns { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 3px 3px; }
.rstrip .fb {
  width: 33px; height: 31px; display: flex; align-items: center; justify-content: center;
  background: #d4d0c8; cursor: pointer;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.rstrip .fb:active,
.rstrip .fb.on { border-color: #808080 #fff #fff #808080; background: #b9d6b9; }
.rstrip .fb img { max-width: 25px; max-height: 25px; }
/* the alarm is the only thing that blinks, and it blinks on its own button */
.rstrip .fb.alarm { animation: dsAlarm .55s steps(1, end) infinite; }
@keyframes dsAlarm {
  0%, 49%   { background: #ff2a2a; border-color: #808080 #fff #fff #808080; }
  50%, 100% { background: #d4d0c8; border-color: #fff #808080 #808080 #fff; }
}

.rstrip .tld {
  flex: 1; min-height: 26px; margin: 0 3px; padding: 2px 4px;
  color: var(--sub); font-weight: bold; font-size: 11px; line-height: 1.25;
}
.rstrip .micro {
  flex: none; height: 16px; margin: 3px; background: #fff; font-size: 10px; color: #000;
  padding: 0 3px; line-height: 16px; overflow: hidden; white-space: nowrap;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}

/* ── MSEL / Patch panel ───────────────────────────────────────────────── */
#dsPanel {
  width: 210px; flex: none; display: flex; flex-direction: column;
  background: #d4d0c8; border: 3px solid #808080;
}
/* the group border goes green while the selected MSEL or Patch folder has members */
#dsPanel.live { border-color: #00c000; }
#dsPanel .tabs { display: flex; padding: 2px 2px 0; gap: 0; }
#dsPanel .tabs div {
  flex: 1; text-align: center; padding: 2px 0 3px; font-size: 11px; cursor: pointer;
  background: #d4d0c8; color: #000;
  border: 1px solid #808080; border-bottom: none;
  margin-right: -1px; position: relative;
}
#dsPanel .tabs div:first-child { border-top-left-radius: 3px; }
#dsPanel .tabs div:last-child { border-top-right-radius: 3px; margin-right: 0; }
#dsPanel .tabs div.on {
  font-weight: bold; background: #ffffff; z-index: 2;
  padding-top: 1px; padding-bottom: 4px;
}
#dsPanel .tabs div.on::before { content: "\2022\00a0"; }
#dsPanel .tabs.second { margin-top: -1px; }
#dsPanel .pbtns { display: flex; gap: 6px; padding: 6px; }
#dsPanel .pbtns .pb {
  width: 64px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: #d4d0c8; cursor: pointer;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dsPanel .pbtns .pb:active { border-color: #808080 #fff #fff #808080; }
#dsPanel .pbtns .pb.live { background: #00d000; }
#dsPanel .pbtns .pb img { max-width: 34px; max-height: 26px; }
#dsPanel .list {
  flex: 1; margin: 0 6px 6px; background: #ffffff; overflow-y: auto; font-size: 12px;
  border: 1px solid #808080;
}
#dsPanel .list div { padding: 2px 4px; cursor: pointer; text-align: center; font-size: 12px; }
#dsPanel .list div:hover { background: #0a246a; color: #fff; }

/* ── status line ──────────────────────────────────────────────────────── */
#dsStatus {
  flex: none; display: flex; align-items: stretch;
  background: #d4d0c8; border-top: 1px solid #fff; font-size: 11px;
}
#dsStatus div { padding: 2px 8px; border-right: 1px solid #808080; }
#dsStatus .grow { flex: 1; border-right: none; }
#dsStatus .vu { display: flex; align-items: center; gap: 3px; padding: 1px 6px; }
#dsStatus .vu .bars { display: flex; gap: 1px; }
#dsStatus .vu .bars i {
  width: 5px; height: 12px; background: #4a5a4a; display: block;
  border: 1px solid #2a3a2a;
}
#dsStatus .vu .bars i.lit { background: #22e022; }
#dsStatus .vu .bars i.peak.lit { background: #ff2020; }

#dsNotice {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  background: #ffffe1; padding: 5px 14px; font-size: 11px;
  border: 1px solid #000; display: none; z-index: 90;
}
#dsNotice.show { display: block; }

/* ── Event Display ────────────────────────────────────────────────────── */
#dsEvents {
  flex: none; height: 150px; display: flex; flex-direction: column;
  background: #d4d0c8; border-top: 2px solid #808080;
}
#dsEvents .ehead {
  display: flex; align-items: center; gap: 2px; padding: 2px 4px;
  border-bottom: 1px solid #808080; font-weight: bold;
}
#dsEvents .ehead > span { margin-right: 10px; }
#dsEvents .etb {
  width: 28px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
}
#dsEvents .etb:hover { border-color: #fff #808080 #808080 #fff; }
#dsEvents .etb:active { border-color: #808080 #fff #fff #808080; background: #c5c1b9; }
#dsEvents .etb img { max-width: 22px; max-height: 22px; }
#dsEvents .elist {
  flex: 1; overflow-y: auto; background: #fff; margin: 3px;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}
#dsEvents .erow { display: flex; gap: 8px; padding: 1px 5px; cursor: pointer; }
#dsEvents .erow:nth-child(odd) { background: #f4f4f4; }
#dsEvents .erow.em { background: #ffd8d8; color: #a00000; font-weight: bold; }
#dsEvents .erow.held { font-style: italic; }
#dsEvents .erow.acked { opacity: .55; }
#dsEvents .erow.sel { background: #0a246a; color: #fff; }
#dsEvents .erow .t { opacity: .7; }
#dsEvents .erow .r { width: 110px; overflow: hidden; white-space: nowrap; }
#dsEvents .erow .u { flex: 1; font-weight: bold; }
#dsEvents .erow .s { width: 90px; text-align: right; }

/* -- QuickList ----------------------------------------------------------- */
#dsQuick {
  position: absolute; inset: 0; z-index: 95;
  background: rgba(0,0,0,.35); display: flex;
  align-items: center; justify-content: center;
}
#dsQuick .qbox {
  min-width: 260px; max-width: 380px; background: #d4d0c8;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
  box-shadow: 3px 3px 10px rgba(0,0,0,.5);
}
#dsQuick .qhead {
  display: flex; align-items: center; padding: 3px 4px;
  background: linear-gradient(#0a5fc8, #073f88); color: #fff;
  font-weight: bold; font-size: 11px;
}
#dsQuick .qhead span { flex: 1; }
#dsQuick .qx {
  width: 26px; height: 15px; line-height: 12px; text-align: center; font-size: 10px;
  background: #d4d0c8; color: #000; cursor: pointer;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dsQuick .qlist {
  margin: 5px; background: #ffffff; max-height: 300px; overflow-y: auto;
  border: 1px solid #808080;
}
#dsQuick .qrow { padding: 4px 8px; cursor: pointer; font-size: 12px; }
#dsQuick .qrow:hover { background: #0a246a; color: #fff; }

/* -- Auxiliary I/O ------------------------------------------------------- */
#dsAux {
  flex: none; height: 108px; display: flex; flex-direction: column;
  background: #d4d0c8; border-top: 2px solid #808080;
}
#dsAux .ahead {
  display: flex; align-items: center; gap: 6px; padding: 2px 5px;
  border-bottom: 1px solid #808080; font-weight: bold; font-size: 11px;
}
#dsAux .ahead span { margin-right: 6px; }
#dsAux .etb {
  width: 28px; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
}
#dsAux .etb.on { border-color: #808080 #fff #fff #808080; background: #ffd000; }
#dsAux .etb img { max-width: 20px; max-height: 20px; }
#dsAux .alist { flex: 1; display: flex; gap: 6px; padding: 6px; overflow-x: auto; }
#dsAux .acell {
  width: 96px; flex: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
#dsAux .abtn {
  position: relative; width: 46px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #d4d0c8; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dsAux .abtn:active { border-color: #808080 #fff #fff #808080; }
#dsAux .abtn.active { background: #9fe09f; border-color: #808080 #fff #fff #808080; }
#dsAux .abtn img { max-width: 30px; max-height: 26px; }
#dsAux .abtn img.lock { position: absolute; left: -2px; top: -3px; width: 13px; height: 13px; }
#dsAux .alabel { font-size: 10px; line-height: 1.1; }
#dsAux .astate { font-size: 9px; font-weight: bold; opacity: .65; }

#dsQuick .qform { padding: 10px; }
#dsQuick .qform input {
  width: 100%; box-sizing: border-box; padding: 4px 5px;
  font: 12px Tahoma, sans-serif; background: #ffffff; color: #000;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
#dsQuick .qbtns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 9px; }
#dsQuick .qbtn {
  min-width: 68px; text-align: center; padding: 4px 10px; cursor: pointer;
  font-size: 11px; background: #d4d0c8;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
#dsQuick .qbtn:active { border-color: #808080 #fff #fff #808080; }

/* many zones means many folder tabs, so let the strip wrap and scroll */
#dsFolders { flex-wrap: wrap; max-height: 62px; overflow-y: auto; }
#dsFolders .folder { padding: 3px 15px; }
#dsFolders .folder.on { padding-top: 2px; padding-bottom: 4px; }

.fb.live { background: #00d000; box-shadow: inset 0 0 0 1px #006000; }