/* Public relay dashboard layout */

.page-header {
  overflow: visible;
  margin: 0 0 18px;
  padding: 16px 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.page-header::after { display: none; }

.station-header {
  display: block;
}

.station-title .eyebrow,
.eyebrow {
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.station-title h1,
.page-header .station-title h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: 0;
  text-align: left;
}

.station-title p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
}

.header-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.header-source {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 650;
}

.header-source > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(85, 214, 138, .12), 0 0 18px rgba(85, 214, 138, .45);
}

.header-actions,
.admin-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-actions form,
.admin-links form { margin: 0; }

.control-desk-layout,
.control-desk-main {
  display: block;
  min-width: 0;
}

.status-overview {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.62fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 8px;
}

.status-overview > .panel { margin-bottom: 0; }

.identity-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}

.identity-panel > div,
.tx-status-grid > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel2);
}

.identity-panel > div {
  padding: 12px 14px;
}

.identity-panel span,
.identity-panel strong {
  display: block;
}

.identity-panel span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .69rem;
}

.identity-panel strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: .86rem;
  line-height: 1.3;
}

.live-status-panel {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.live-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: .82rem;
}

.live-status-heading strong {
  color: var(--live);
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.relay-state {
  display: grid;
  flex: 1;
  grid-template-columns: clamp(170px, 19vw, 220px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
}

.signal-orb {
  display: grid;
  place-items: center;
  width: min(220px, 100%);
  aspect-ratio: 1;
  border: 1px solid rgba(85, 214, 138, .46);
  border-radius: 50%;
  color: var(--muted);
  background:
    radial-gradient(circle, rgba(85, 214, 138, .15), transparent 58%),
    var(--panel2);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.signal-orb span {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0;
}

.signal-orb.active {
  border-color: transparent;
  color: #07111f;
  background: radial-gradient(circle, #edfff5 0 11%, var(--ok) 12% 44%, rgba(85, 214, 138, .22) 45%);
  animation: on-air-pulse 1.8s ease-in-out infinite;
}

@keyframes on-air-pulse {
  0%, 100% { filter: brightness(.94); transform: scale(.985); }
  50% { filter: brightness(1.08); transform: scale(1); }
}

.tx-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "callsign callsign signal mode"
    "target target source duration"
    "quality quality quality quality";
  gap: 10px;
  margin: 0;
}

.tx-status-grid > div {
  padding: 12px;
}

.tx-status-grid > div:nth-child(1) { grid-area: callsign; }
.tx-status-grid > div:nth-child(2) { grid-area: signal; }
.tx-status-grid > div:nth-child(3) { grid-area: target; }
.tx-status-grid > div:nth-child(4) { grid-area: mode; }
.tx-status-grid > div:nth-child(5) { grid-area: source; }
.tx-status-grid > div:nth-child(6) { grid-area: duration; }
.tx-status-grid > div:nth-child(7) { grid-area: quality; }

.tx-status-grid dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 500;
}

.tx-status-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(.86rem, 1.25vw, 1rem);
  font-weight: 650;
  line-height: 1.22;
}

.tx-status-grid small {
  display: block;
  margin-top: 4px;
  color: var(--cyan);
  font-size: .7rem;
}

.station-overview-grid,
.traffic-log-grid {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.station-overview-grid {
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: stretch;
  margin-bottom: 16px;
}

.traffic-log-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 8px;
}

.station-overview-grid > .panel,
.traffic-log-grid > .panel,
body > .current-tx-panel { margin-bottom: 0; }

.station-overview-grid > .panel { min-width: 0; }
.station-overview-grid > .panel:only-child { grid-column: 1 / -1; }
.station-overview-grid > .panel .panel-body { height: calc(100% - 47px); }

body > .current-tx-panel {
  margin-bottom: 16px;
  border-color: rgba(97, 230, 255, .24);
}

.current-tx-panel::before,
.traffic-log-grid > .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), transparent 76%);
}

.current-tx-panel .table-responsive,
.traffic-log-grid .table-responsive,
.active-modes-panel .table-responsive { overflow-x: auto; }

.current-tx-panel .curTx {
  min-width: 760px;
  table-layout: fixed;
  width: 100%;
  font-size: .75rem;
}

.current-tx-panel .curTx th,
.current-tx-panel .curTx td {
  padding: 7px 8px !important;
  white-space: normal;
}

.repeaterinfo {
  width: 100%;
  font-size: .78rem;
}

.repeaterinfo > tbody > tr:first-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.repeaterinfo > tbody > tr:first-child > th,
.repeaterinfo > tbody > tr:first-child > td {
  display: block;
  padding: 10px 11px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-sm);
  background: var(--panel2);
}

.repeaterinfo > tbody > tr:first-child > th {
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.repeaterinfo > tbody > tr:first-child > td {
  color: var(--text);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
}

.repeaterinfo > tbody > tr:nth-child(2) > td {
  display: block;
  padding: 10px 0 0 !important;
  border: 0 !important;
}

.repeaterinfo > tbody > tr:nth-child(2) table,
.repeaterinfo > tbody > tr:nth-child(2) tbody,
.repeaterinfo > tbody > tr:nth-child(2) tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 7px;
}

.repeaterinfo > tbody > tr:nth-child(2) th,
.repeaterinfo > tbody > tr:nth-child(2) td {
  display: block;
  min-width: 0;
  padding: 8px 9px !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-sm);
  background: rgba(7, 17, 31, .6);
  white-space: normal;
  overflow-wrap: anywhere;
}

.repeaterinfo > tbody > tr:nth-child(2) th {
  color: var(--muted);
  font-size: .61rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.repeaterinfo > tbody > tr:nth-child(2) td {
  color: var(--text);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 650;
}

.active-modes-panel .panel-body { padding: 6px 12px 12px; }

body > .active-modes-panel { margin: 16px 0; }

.active-modes-table {
  table-layout: fixed;
  width: 100%;
  font-size: .76rem;
}

.active-modes-table > thead > tr > th,
.active-modes-table > tbody > tr > th,
.active-modes-table > tbody > tr > td {
  padding: 8px !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

.active-modes-table > thead > tr > th:nth-child(1),
.active-modes-table > tbody > tr > th:nth-child(1) { width: 17%; }
.active-modes-table > thead > tr > th:nth-child(2),
.active-modes-table > tbody > tr > td:nth-child(2) { width: 16%; }
.active-modes-table > thead > tr > th:nth-child(3),
.active-modes-table > tbody > tr > td:nth-child(3) { width: 42%; }
.active-modes-table > thead > tr > th:nth-child(4),
.active-modes-table > tbody > tr > td:nth-child(4) { width: 25%; }

.active-mode-state { text-align: left; }

.traffic-log-grid .panel-heading {
  padding: 11px 18px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.traffic-log-grid .panel-heading::before { display: none; }

.traffic-log-grid .mheard-panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.traffic-log-grid .mheard-panel-heading > :first-child { margin-right: auto; }

.traffic-log-grid .mheard-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.traffic-log-grid .mheard-length-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 400;
  white-space: nowrap;
}

.traffic-log-grid .mheard-length {
  height: 26px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background: rgba(7, 17, 31, .6);
  color: var(--text);
  font-size: .7rem;
}

.traffic-log-grid .mheard-search-label {
  margin: 0;
  font-weight: 400;
}

.traffic-log-grid .mheard-search {
  width: 116px;
  height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background: rgba(7, 17, 31, .6);
  color: var(--text);
  font-size: .7rem;
}

.traffic-log-grid .mheard-search::placeholder { color: var(--muted); }

.traffic-log-grid .mheard-search:focus {
  border-color: rgba(97, 230, 255, .55);
  box-shadow: 0 0 0 2px rgba(97, 230, 255, .1);
}

.traffic-log-grid .mheard-panel-heading .clickable { flex: 0 0 auto; }

.traffic-log-grid .dataTables_paginate {
  padding-top: 6px !important;
  font-size: .68rem;
}

.traffic-log-grid .dataTables_paginate .paginate_button {
  min-width: 24px !important;
  padding: 2px 6px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
}

.traffic-log-grid .dataTables_paginate .paginate_button.current,
.traffic-log-grid .dataTables_paginate .paginate_button:hover {
  border-color: var(--line) !important;
  background: rgba(97, 230, 255, .08) !important;
  color: var(--text) !important;
}

.traffic-log-grid .mheard-panel-body { padding: 8px 18px 12px; }

.traffic-log-grid .mheard-scroll {
  overflow-x: hidden;
  overflow-y: visible;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: rgba(7, 17, 31, .6);
}

.traffic-log-grid .lastHeard,
.traffic-log-grid .localTx {
  width: 100% !important;
  table-layout: fixed;
  font-size: .7rem;
}

.traffic-log-grid .lastHeard > thead > tr > th,
.traffic-log-grid .lastHeard > tbody > tr > td,
.traffic-log-grid .localTx > thead > tr > th,
.traffic-log-grid .localTx > tbody > tr > td {
  overflow: hidden;
  padding: 5px 7px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-log-grid .mheard-table > thead > tr > th {
  border-bottom: 0 !important;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.traffic-log-grid .mheard-table > tbody > tr > td {
  border-top: 0 !important;
  font-variant-numeric: tabular-nums;
}

.traffic-log-grid .mheard-table > tbody > tr > td:first-child {
  color: var(--text);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 800;
}

.traffic-log-grid .mheard-table img { display: none; }

.traffic-log-grid .mheard-table .tooltip2 {
  display: inline;
  border: 0;
}

.traffic-log-grid .mheard-table .tooltip2text { display: none !important; }

.traffic-log-grid .mheard-table th:nth-child(1) { width: 10%; }
.traffic-log-grid .mheard-table th:nth-child(2) { width: 16%; }
.traffic-log-grid .mheard-table th:nth-child(3) { width: 9%; }
.traffic-log-grid .mheard-table th:nth-child(4) { width: 14%; }
.traffic-log-grid .mheard-table th:nth-child(5) { width: 11%; }
.traffic-log-grid .mheard-table th:nth-child(6) { width: 27%; }
.traffic-log-grid .mheard-table th:nth-child(7) { width: 13%; }

.traffic-log-grid .mheard-table th:first-child,
.traffic-log-grid .mheard-table td:first-child { padding-inline: 4px !important; }

.traffic-log-grid .dataTables_wrapper { min-width: 0; }

.dapnet-table-shell {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: rgba(7, 17, 31, .6);
}

.dapnet-table-shell .dataTables_wrapper {
  padding: 10px 12px 12px;
}

.dapnet-table-shell .DAPNETTx > thead > tr > th {
  border-bottom-color: var(--line) !important;
  background: rgba(15, 30, 51, .64) !important;
  color: var(--muted);
}

.dapnet-table-shell .DAPNETTx > tbody > tr,
.dapnet-table-shell .DAPNETTx > tbody > tr > td {
  background: transparent !important;
  color: var(--text);
}

.dapnet-table-shell .DAPNETTx > tbody > tr:nth-child(odd) {
  background: rgba(97, 230, 255, .03) !important;
}

.dapnet-table-shell .DAPNETTx > tbody > tr:hover {
  background: rgba(97, 230, 255, .085) !important;
}

.dapnet-table-shell .dataTables_length select,
.dapnet-table-shell .dataTables_filter input {
  border-color: var(--line);
  background: rgba(15, 30, 51, .64);
  color: var(--text);
}

.dashboard-footer { margin-top: 16px; }

.dashboard-footer .panel-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  color: var(--muted);
  font-size: .73rem;
}

@media (max-width: 1120px) {
  .station-overview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .status-overview { grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); }
  .relay-state { grid-template-columns: 150px minmax(0, 1fr); }
  .tx-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "callsign signal"
      "target target"
      "mode source"
      "duration quality";
  }
}

@media (max-width: 780px) {
  body { padding: 14px 12px 40px; }

  .station-header {
    display: block;
  }

  .status-overview { grid-template-columns: 1fr; }

  .identity-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .identity-panel > div:last-child { grid-column: 1 / -1; }

  .relay-state {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .signal-orb { width: 150px; }

  .tx-status-grid { width: 100%; }

  .header-action-row,
  .header-actions,
  .admin-links { align-items: stretch; }

  .active-modes-table { min-width: 560px; }
  .dashboard-footer .panel-body { display: block; }
}

@media (max-width: 700px) {
  .traffic-log-grid { grid-template-columns: 1fr; }
  .traffic-log-grid .mheard-panel-heading { flex-wrap: wrap; }
  .traffic-log-grid .mheard-panel-heading > :first-child { width: calc(100% - 24px); }
  .traffic-log-grid .mheard-controls { order: 3; width: 100%; }
  .traffic-log-grid .mheard-search { flex: 1; width: 100%; }
  .traffic-log-grid .mheard-scroll { overflow-x: auto; }
  .traffic-log-grid .mheard-table,
  .traffic-log-grid .dataTables_wrapper { min-width: 520px; }
}

@media (max-width: 480px) {
  .identity-panel { grid-template-columns: 1fr; }
  .identity-panel > div:last-child { grid-column: auto; }

  .tx-status-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "callsign signal"
      "target target"
      "mode source"
      "duration quality";
  }

  .header-actions,
  .admin-links,
  .header-actions .btn,
  .admin-links .btn,
  .admin-links form,
  .admin-links form .btn { width: 100%; }
}