:root {
  --noc-background: #111;
  --noc-text: #eee;
  --noc-card: #1d1d1d;
  --noc-border: #333;
  --noc-muted: #aaa;
}

body.light-mode {
  --noc-background: #f5f7fa;
  --noc-text: #111;
  --noc-card: #ffffff;
  --noc-border: #d1d5db;
  --noc-muted: #555;
}

body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: var(--noc-background);
  color: var(--noc-text);
}

h1 {
  text-align: center;
  margin-bottom: 5px;
}

#updated {
  text-align: center;
  color: var(--noc-muted);
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

.card h2 {
  margin-top: 0;
  color: var(--noc-text);
  border-bottom: 1px solid var(--noc-border);
  padding-bottom: 8px;
}

.ok {
  color: #00ff66;
  font-weight: bold;
}

.check {
  color: #ff4444;
  font-weight: bold;
}

ol {
  padding-left: 22px;
}

li {
  margin: 6px 0;
}
.wide {
  grid-column: 1 / -1;
}

.activity-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr 90px 90px 90px;
  gap: 10px;
  border-bottom: 1px solid var(--noc-border);
  padding: 8px 0;
  font-size: 14px;
}

.activity-row.header {
  color: var(--noc-muted);
  font-weight: bold;
}

.badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--noc-border);
  font-size: 12px;
}
.status-banner {
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0 20px 0;
  text-align: center;
}

.health-score {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
}

.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--noc-border);
  font-weight: bold;
}

.pill.ok {
  background: #064d22;
  color: #00ff66;
}

.pill.check {
  background: #4d0707;
  color: #ff5555;
}

.score-ok {
  color: #00ff66;
}

.score-warn {
  color: #ffcc00;
}

.score-bad {
  color: #ff5555;
}
.alert-banner {
  margin: 0 0 18px 0;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.alert-banner.ok {
  background: #064d22;
  color: #00ff66;
  border: 1px solid #00aa44;
}

.alert-banner.warn {
  background: #4d3d00;
  color: #ffcc00;
  border: 1px solid #cc9900;
}

.alert-banner.bad {
  background: #4d0707;
  color: #ff5555;
  border: 1px solid #cc2222;
}
.live-card {
  border-color: #0066aa;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  text-align: center;
}

.label {
  color: var(--noc-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.big-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--noc-text);
}

.quality-good {
  color: #00ff66;
}

.quality-weak {
  color: #ffcc00;
}

.quality-loud {
  color: #ff8844;
}

/* ================= ANALYTICS ================= */

.analytics-controls {
  margin: 14px;
  padding: 14px;
  background: var(--noc-background);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}

.analytics-controls input,
.analytics-controls button {
  margin-left: 8px;
  padding: 7px 10px;
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px;
}

.analytics-card {
  background: var(--noc-background);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.analytics-label {
  color: var(--noc-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.analytics-value {
  font-size: 25px;
  font-weight: bold;
}

.analytics-bar-row,
.analytics-quality-row {
  display: grid;
  grid-template-columns: 65px 1fr 75px;
  gap: 10px;
  align-items: center;
  margin: 7px 0;
}

.analytics-hour,
.analytics-quality-label {
  font-size: 13px;
}

.analytics-bar-track {
  height: 15px;
  background: #050505;
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  overflow: hidden;
}

.analytics-bar-fill {
  height: 100%;
  background: #ffd166;
  min-width: 0;
}

.analytics-bar-count,
.analytics-quality-count {
  text-align: right;
  font-size: 13px;
}

.operator-row {
  display: grid;
  grid-template-columns: 1fr 80px 110px;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #222;
}

.operator-header {
  color: #ffd166;
  font-weight: bold;
}

@media (max-width: 800px) {
  .analytics-summary {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-bar-row,
  .analytics-quality-row {
    grid-template-columns: 55px 1fr 60px;
  }
}

@media (max-width: 500px) {
  .analytics-summary {
    grid-template-columns: 1fr;
  }
}

/* ================= OPERATOR PROFILE ================= */

.operator-search-box {
  margin: 14px;
  padding: 14px;
  background: var(--noc-background);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}

.operator-search-box input,
.operator-search-box button {
  margin-left: 8px;
  padding: 8px 11px;
}

.operator-profile-heading {
  margin: 12px;
  text-align: center;
}

.operator-profile-heading h2 {
  font-size: 34px;
  margin: 12px 0;
}

.operator-activity-row {
  grid-template-columns:
    110px
    90px
    90px
    100px
    100px
    90px
    60px;
}

@media (max-width: 900px) {
  .operator-activity-row {
    grid-template-columns:
      100px
      80px
      80px
      90px
      90px
      80px
      50px;
  }
}
/* Analytics page header */
#analyticsUpdated {
    text-align: center;
    font-size: 0.95em;
    color: #bdbdbd;
    margin: 12px 0 18px 0;
}

/* ================= NET MANAGER ================= */

#netsUpdated {
  text-align: center;
  color: #bdbdbd;
  margin: 12px 0 18px;
}

.net-card {
  position: relative;
}

.net-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.net-description {
  color: var(--noc-muted);
  margin-top: 5px;
}

.net-status {
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.net-scheduled {
  background: var(--noc-border);
  color: #ddd;
}

.net-upcoming {
  background: #5a4300;
  color: #ffd166;
}

.net-active {
  background: #123c24;
  color: #66ff99;
}

.net-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 16px;
}

.net-details {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #2a2a2a;
}

.net-countdown {
  color: #ffd166;
}

@media (max-width: 900px) {
  .net-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 550px) {
  .net-heading {
    display: block;
  }

  .net-status {
    display: inline-block;
    margin-top: 12px;
  }

  .net-summary-grid {
    grid-template-columns: 1fr;
  }
}
/* Net Host Links */

.net-hosts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.net-host {
  padding: 10px;
  background: var(--noc-background);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

.net-host a {
  font-size: 0.9em;
}

/* ================= NET HISTORY ================= */

.net-history-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.5fr)
    70px
    100px
    100px
    minmax(170px, 1.4fr)
    minmax(160px, 1.3fr);
  gap: 12px;
  align-items: center;
  padding: 10px 6px;
  border-bottom: 1px solid #222;
}

.net-history-header {
  color: #ffd166;
  font-weight: bold;
  border-bottom: 1px solid #444;
}

@media (max-width: 900px) {
  .net-history-row {
    grid-template-columns: 1fr 70px 90px;
  }

  .net-history-row > div:nth-child(4),
  .net-history-row > div:nth-child(5),
  .net-history-row > div:nth-child(6) {
    display: none;
  }
}

/* ================= FINAL NET MANAGER POLISH ================= */

.net-control-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.net-control-label {
  color: var(--noc-muted);
  font-weight: bold;
}

.net-control-callsigns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.net-control-callsigns a {
  color: #ffd166;
  font-size: 1.05em;
  font-weight: bold;
  text-decoration: none;
}

.net-control-callsigns a:hover {
  text-decoration: underline;
}

.net-control-separator {
  color: #777;
}

.net-future-button {
  min-width: 52px;
  padding: 6px 9px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #191919;
  color: #777;
  cursor: not-allowed;
  opacity: 0.75;
}

/* Eight columns: date, TX, participants, airtime,
   activity window, longest TX, replay and report. */
.net-history-row {
  grid-template-columns:
    minmax(180px, 1.5fr)
    60px
    95px
    95px
    minmax(160px, 1.3fr)
    minmax(145px, 1.2fr)
    65px
    80px;
}

@media (max-width: 1050px) {
  .net-history-row {
    grid-template-columns:
      minmax(160px, 1.4fr)
      60px
      90px
      90px
      minmax(150px, 1.2fr)
      minmax(135px, 1.1fr);
  }

  .net-history-row > div:nth-child(7),
  .net-history-row > div:nth-child(8) {
    display: none;
  }
}

/* ================= NET ADMINISTRATION ================= */

#netAdminStatus {
  text-align: center;
  color: #bdbdbd;
  margin: 12px 0 18px;
}

#netAdminActionResult {
  margin-top: 15px;
  font-weight: bold;
}

.net-apply-button {
  background: #7a1d1d;
  color: white;
  border: 1px solid #b64545;
}

.net-apply-button:hover {
  background: #9a2727;
}

.net-admin-row {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.8fr)
    110px
    135px
    minmax(140px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px 5px;
  border-bottom: 1px solid #222;
}

.net-admin-header {
  color: #ffd166;
  font-weight: bold;
  border-bottom: 1px solid #444;
}

.net-change-card {
  padding: 12px;
  margin: 10px 0;
  background: var(--noc-background);
  border: 1px solid var(--noc-border);
  border-radius: 8px;
}

.net-change-card > div {
  padding-top: 6px;
}

.net-old-value {
  color: #ff9f9f;
}

.net-new-value {
  color: #78e89b;
}

@media (max-width: 750px) {
  .net-admin-row {
    grid-template-columns: 1fr 90px;
  }

  .net-admin-row > div:nth-child(3),
  .net-admin-row > div:nth-child(4) {
    display: none;
  }
}
.public-header {
    text-align: center;
}

.public-header p {
    text-align: center;
    font-size: 1.1em;
}

.public-nav {
    text-align: center;
}

.network-status {
    text-align: center;
    margin-top: 15px;
}
.public-brand {
    text-align: center;
    margin-bottom: 20px;
}

.kcwide-logo {
    display: block;
    width: 500px;
    max-width: 90%;
    height: auto;
    margin: 20px auto;
}

.tagline {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}
/* ================================
   KCWide Public Net Cards
   ================================ */


.net-card {

    background: white;

    border-radius: 12px;

    padding: 20px;

    margin: 15px auto;

    max-width: 420px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);

    text-align: center;

}



.net-title {

    font-size: 1.4em;

    margin-bottom: 12px;

}



.net-time {

    font-size: 1.1em;

    margin-bottom: 15px;

}



.net-control {

    margin-bottom: 20px;

}



.net-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

}



.net-actions button {

    padding: 8px 14px;

    border-radius: 6px;

    border: none;

    cursor: pointer;

}



#publicUpcomingNets {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

}



/* Mobile display */

@media (max-width: 600px) {


    .net-card {

        width: 90%;

    }


    .net-actions {

        flex-wrap: wrap;

    }


}

/* Theme aware public net cards */

.net-card {
    background: var(--noc-card);
    color: var(--noc-text);
    border: 1px solid var(--noc-border);
}

.net-card strong {
    color: var(--noc-text);
}

.net-card .net-title {
    color: var(--noc-text);
    font-weight: bold;
}

.net-card .net-time {
    color: var(--noc-text);
}

.net-card .net-control {
    color: var(--noc-muted);
}

.net-card button {
    color: var(--noc-text);
    background: var(--noc-background);
    border: 1px solid var(--noc-border);
}

/* ================================
   KCWide Currently Active Net Card
   ================================ */


.active-card {

    border: 3px solid #28a745;

    background: #f8fff8;

    max-width: 500px;

    transform: scale(1.03);

}



.active-card .net-title {

    font-size: 1.6em;

}



.active-card strong {

    color: #1b7a2a;

}



.active-card::before {

    content: "🟢 CURRENTLY ACTIVE";

    display: block;

    font-weight: bold;

    margin-bottom: 10px;

    color: #1b7a2a;

}
/* ==================================
   KCWide Currently Active Net Display
   ================================== */


.active-card {

    border: 3px solid #28a745;

    background: #f3fff5;

    max-width: 520px;

    margin: 20px auto;

    transform: scale(1.03);

}


.active-card .net-title {

    font-size: 1.6em;

    margin-bottom: 12px;

}


.active-card .net-time {

    font-size: 1.15em;

}


.active-card .net-control {

    margin-top: 15px;

}


.active-card::before {

    content: "🟢 CURRENTLY ON AIR";

    display: block;

    font-weight: bold;

    font-size: 1.1em;

    margin-bottom: 12px;

    color: #198754;

}
/* ==================================
   KCWide Replay Library Styling
   ================================== */


.replay-audio {

    margin-top: 15px;

    text-align: center;

}


.replay-audio audio {

    width: 100%;

    max-width: 420px;

}



.replay-unavailable {

    margin-top: 15px;

    padding: 10px;

    border-radius: 8px;

    text-align: center;

    font-style: italic;

}



.net-card .replay-audio,
.net-card .replay-unavailable {

    margin-bottom: 10px;

}
/* ==================================
   KCWide Replay Empty State
   ================================== */

.replay-empty {

    text-align: center;

    padding: 25px;

    font-style: italic;

}

.noc-user-display {
  display: block;
  margin: 12px 0;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: normal;
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  color: var(--noc-text);
}

/* ================= SOURCE REPORT CARDS ================= */

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.source-card {
  background: var(--noc-background);
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  padding: 14px;
  line-height: 1.5;
}

.source-card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.source-card-value {
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
}

.theme-toggle {

  background: var(--noc-card);
  color: var(--noc-text);
  border: 1px solid var(--noc-border);

  border-radius: 8px;

  padding: 8px 14px;

  cursor: pointer;

  font-weight: bold;

}

.theme-toggle:hover {

  opacity: .8;

}

/* Recent Activity scrolling window */
#recentActivity {
  max-height: 650px;
  overflow-y: auto;
  padding-right: 8px;
}

/* ================= REPEATER OPERATOR DASHBOARD ================= */

#repeaterInventory {
  overflow-x: auto;
}

.repeater-row {
  grid-template-columns:
    minmax(120px, 1.25fr)
    115px
    75px
    85px
    minmax(120px, 1.1fr)
    135px
    105px
    65px
    65px
    70px;

  min-width: 1050px;
  align-items: center;
  gap: 10px;
}

.repeater-row.header {
  color: #ffd166;
  font-weight: bold;
  border-bottom: 1px solid var(--noc-border);
}

.repeater-row > div {
  min-width: 0;
}

.repeater-row > div:nth-child(8),
.repeater-row > div:nth-child(9),
.repeater-row > div:nth-child(10) {
  text-align: center;
  font-weight: 600;
}

@media (max-width: 900px) {

  .repeater-row {
    min-width: 900px;
    grid-template-columns:
      120px
      105px
      70px
      80px
      115px
      125px
      95px
      55px
      55px
      60px;
  }

}

/* ================= REPEATER DETAIL PANEL ================= */

.repeater-detail-panel {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--noc-border);
  border-radius: 12px;
  background: var(--noc-card);
}

.repeater-detail-panel[hidden] {
  display: none;
}

.repeater-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--noc-border);
}

.repeater-detail-header h2 {
  margin: 0;
}

.repeater-detail-location {
  margin-top: 4px;
  color: var(--noc-muted);
}

.repeater-detail-close {
  padding: 7px 12px;
  border: 1px solid var(--noc-border);
  border-radius: 7px;
  background: var(--noc-background);
  color: inherit;
  cursor: pointer;
}

.repeater-detail-close:hover {
  border-color: #ffd166;
}

.repeater-detail-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.repeater-detail-item {
  padding: 12px;
  border: 1px solid var(--noc-border);
  border-radius: 8px;
  background: var(--noc-background);
}

.repeater-detail-label {
  margin-bottom: 5px;
  color: var(--noc-muted);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.repeater-detail-value {
  font-size: 16px;
  font-weight: 600;
}

.repeater-row:not(.header) {
  cursor: pointer;
}

.repeater-row:not(.header):hover {
  background: rgba(255,255,255,0.04);
}


/* ================= REPEATER ANALYTICS ================= */

.repeater-analytics-section {
  margin-top: 20px;
}

.repeater-analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.repeater-analytics-header h2 {
  margin-top: 0;
}

.repeater-analytics-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.repeater-analytics-periods button {
  padding: 8px 12px;
  border: 1px solid var(--noc-border);
  border-radius: 7px;
  background: var(--noc-card);
  color: var(--noc-text);
  cursor: pointer;
}

.repeater-analytics-periods button:hover {
  border-color: #00cfe8;
}

.repeater-analytics-periods button.active {
  border-color: #00cfe8;
  box-shadow: 0 0 0 1px #00cfe8 inset;
}

.repeater-busiest-value {
  font-size: 22px;
}

.repeater-chart-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.repeater-chart-card {
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  padding: 16px;
}

.repeater-chart-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

.repeater-chart {
  min-height: 180px;
}

.repeater-bar-row {
  display: grid;
  grid-template-columns:
    minmax(85px, 140px)
    minmax(100px, 1fr)
    55px;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}

.repeater-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.repeater-bar-track {
  height: 14px;
  background: rgba(127,127,127,.18);
  border-radius: 8px;
  overflow: hidden;
}

.repeater-bar-fill {
  height: 100%;
  min-width: 2px;
  background: #00cfe8;
  border-radius: 8px;
}

.repeater-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.repeater-daily-chart {
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-top: 15px;
  border-bottom:
    1px solid var(--noc-border);
}

.repeater-daily-column {
  flex: 1;
  min-width: 5px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.repeater-daily-bar {
  width: 100%;
  min-height: 2px;
  background: #00cfe8;
  border-radius: 3px 3px 0 0;
}

.repeater-daily-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  font-size: 11px;
  color: var(--noc-muted);
}

.repeater-top-operators {
  margin-top: 16px;
}

.repeater-operator-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.repeater-operator-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--noc-border);
  border-radius: 7px;
}

.repeater-empty {
  color: var(--noc-muted);
  padding: 20px 0;
  text-align: center;
}


@media (max-width: 850px) {

  .repeater-analytics-header {
    flex-direction: column;
  }

  .repeater-chart-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .repeater-bar-row {
    grid-template-columns:
      80px 1fr 45px;
  }

}


/* ================= REPORTS ANALYTICS ================= */

.report-analytics-section {
  margin-top: 18px;
  margin-bottom: 18px;
}

.report-analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.report-analytics-header h2 {
  margin-top: 0;
}

.report-chart-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.report-chart-card {
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  padding: 16px;
}

.report-chart-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

.report-chart {
  min-height: 200px;
}

.report-daily-chart {
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-top: 15px;
  border-bottom:
    1px solid var(--noc-border);
}

.report-daily-column {
  flex: 1;
  min-width: 5px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.report-daily-bar {
  width: 100%;
  min-height: 2px;
  background: #00cfe8;
  border-radius: 3px 3px 0 0;
}

.report-airtime-bar {
  background: #8e7dff;
}

.report-daily-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--noc-muted);
}

.report-bar-row {
  display: grid;
  grid-template-columns:
    minmax(90px, 150px)
    minmax(100px, 1fr)
    70px;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
}

.report-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.report-bar-track {
  height: 14px;
  background: rgba(127,127,127,.18);
  border-radius: 8px;
  overflow: hidden;
}

.report-bar-fill {
  height: 100%;
  min-width: 2px;
  background: #00cfe8;
  border-radius: 8px;
}

.report-bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-top-operators-chart {
  margin-top: 16px;
}

.report-empty {
  color: var(--noc-muted);
  text-align: center;
  padding: 24px 0;
}


@media (max-width: 850px) {

  .report-chart-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .report-bar-row {
    grid-template-columns:
      80px 1fr 55px;
  }

}


/* ================= REPORT PERIOD COMPARISON ================= */

.report-comparison-section {
  margin-top: 18px;
  margin-bottom: 18px;
}

.report-comparison-header {
  margin-bottom: 16px;
}

.report-comparison-header h2 {
  margin-top: 0;
}

.report-comparison-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(150px, 1fr));
  gap: 14px;
}

.report-comparison-card {
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  padding: 16px;
}

.report-comparison-detail {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--noc-muted);
}

.report-change {
  font-weight: 700;
}

.report-change-up {
  color: #35c759;
}

.report-change-down {
  color: #ff5d5d;
}

.report-change-flat {
  color: var(--noc-muted);
}


@media (max-width: 900px) {

  .report-comparison-grid {
    grid-template-columns:
      repeat(2, minmax(150px, 1fr));
  }

}


@media (max-width: 600px) {

  .report-comparison-grid {
    grid-template-columns: 1fr;
  }

}


/* ================= REPORT HISTORICAL TRENDS ================= */

.report-trend-grid {
  margin-top: 16px;
}

.report-trend-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-trend-series {
  border-bottom: 1px solid var(--noc-border);
  padding-bottom: 12px;
}

.report-trend-series:last-child {
  border-bottom: 0;
}

.report-trend-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 13px;
}

.report-trend-bars {
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.report-trend-column {
  flex: 1;
  min-width: 3px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.report-trend-bar {
  width: 100%;
  min-height: 2px;
  background: #00cfe8;
  border-radius: 2px 2px 0 0;
}

.report-trend-dates {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--noc-muted);
}

.report-trend-more {
  margin-top: 10px;
  font-size: 12px;
  color: var(--noc-muted);
}


/* ================= REPEATER REPORT COMPARISON ================= */

.repeater-report-comparison-section {
  margin-top: 18px;
  margin-bottom: 18px;
}

.repeater-report-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #d69e2e;
  border-radius: 8px;
  background: rgba(214,158,46,.10);
  line-height: 1.45;
}

.repeater-report-busiest {
  font-size: 22px;
}

.repeater-report-change-card {
  margin-top: 16px;
  padding: 16px;
  background: var(--noc-card);
  border: 1px solid var(--noc-border);
  border-radius: 10px;
}

.repeater-report-change-card h3 {
  margin-top: 0;
}

.repeater-change-header,
.repeater-change-row {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.5fr)
    90px
    90px
    90px
    90px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

.repeater-change-header {
  font-weight: 700;
  border-bottom: 1px solid var(--noc-border);
}

.repeater-change-row {
  border-bottom: 1px solid var(--noc-border);
}

.repeater-change-row:last-child {
  border-bottom: 0;
}

.repeater-change-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


@media (max-width: 750px) {

  .repeater-change-header {
    display: none;
  }

  .repeater-change-row {
    grid-template-columns: 1fr 1fr;
  }

  .repeater-change-number {
    text-align: left;
  }

}


/* ================= PRINTABLE NOC REPORT ================= */

.report-print-header {
  display: none;
}


@media print {

  @page {
    size: letter;
    margin: 0.55in;
  }


  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt;
  }


  body {
    margin: 0;
    padding: 0;
  }


  body > h1,
  .nav,
  #updated,
  .report-print-exclude,
  .report-print-button,
  button,
  input,
  select {
    display: none !important;
  }


  .report-print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid #000;
  }


  .report-print-header h1 {
    display: block !important;
    margin: 0 0 6px 0;
    font-size: 20pt;
    color: #000 !important;
  }


  .report-print-header h2 {
    margin: 0 0 10px 0;
    font-size: 15pt;
    color: #000 !important;
  }


  #reportPrintPeriod,
  #reportPrintGenerated {
    margin: 3px 0;
    font-size: 10pt;
  }


  .grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }


  .card,
  .analytics-card,
  .report-chart-card,
  .report-comparison-card,
  .repeater-report-change-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }


  .card.wide,
  .report-analytics-section,
  .report-comparison-section,
  .repeater-report-comparison-section {
    grid-column: 1 / -1 !important;
  }


  .report-chart-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .report-comparison-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }


  .analytics-value,
  .big-value {
    color: #000000 !important;
  }


  .label,
  .analytics-label,
  .report-comparison-detail,
  .report-trend-dates,
  .report-trend-more {
    color: #444444 !important;
  }


  .report-bar-track,
  .repeater-bar-track {
    background: #eeeeee !important;
    border: 1px solid #cccccc;
  }


  .report-bar-fill,
  .report-daily-bar,
  .report-trend-bar,
  .repeater-bar-fill,
  .repeater-daily-bar {
    background: #555555 !important;
  }


  .report-airtime-bar {
    background: #888888 !important;
  }


  .report-change-up,
  .report-change-down,
  .report-change-flat {
    color: #000000 !important;
  }


  .repeater-report-warning {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }


  .repeater-change-header,
  .repeater-change-row {
    grid-template-columns:
      minmax(140px, 1.5fr)
      70px
      70px
      70px
      70px !important;
  }


  a {
    color: #000000 !important;
    text-decoration: none !important;
  }

}


/* ================= PRINTABLE REPORT POLISH ================= */

@media print {

  /*
   * Preserve chart fills and other report graphics
   * in Chromium / Chrome / Edge printing.
   */
  html,
  body,
  body * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }


  /*
   * Usage Reports contains interactive controls only.
   * The selected period is already in the print header.
   */
  .report-controls-card {
    display: none !important;
  }


  /*
   * Search and Daily Summary are interactive/live tools,
   * not part of the formal historical report.
   */
  .report-print-exclude {
    display: none !important;
  }


  /*
   * Force report chart graphics to remain visible
   * even if the browser suppresses normal backgrounds.
   */
  .report-daily-bar {
    background-color: #555555 !important;
    border: 1px solid #444444 !important;
  }


  .report-airtime-bar {
    background-color: #888888 !important;
    border-color: #777777 !important;
  }


  .report-bar-track {
    background-color: #eeeeee !important;
    border: 1px solid #bbbbbb !important;
  }


  .report-bar-fill {
    background-color: #555555 !important;
    border-right: 1px solid #333333 !important;
  }


  .report-trend-bar {
    background-color: #666666 !important;
    border: 1px solid #555555 !important;
  }


  /*
   * Source Usage should use the complete printable width.
   */
  .report-source-card {
    grid-column: 1 / -1 !important;
    width: auto !important;
  }


  /*
   * The source cards themselves can use two columns
   * on a letter-size report.
   */
  .report-source-card #sourceReport {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
  }


  .report-source-card #sourceReport > * {
    break-inside: avoid;
    page-break-inside: avoid;
  }

}


/* ================= PRINT SOURCE CARD FIX ================= */

@media print {

  .report-source-card .source-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #999999 !important;
    box-shadow: none !important;
  }


  .report-source-card .source-card * {
    color: #000000 !important;
  }

}


/* ================= PRINT REPORT HEADING CONTRAST ================= */

@media print {

  /*
   * Darken report section/card headings for printed and PDF reports.
   * Print only — does not change the normal NOC screen appearance.
   */
  .card h2,
  .report-chart-card h3,
  .report-comparison-section h2,
  .repeater-report-comparison-section h2,
  .report-source-card h2 {
    color: #222222 !important;
    opacity: 1 !important;
  }

}


/* ================= ANALYTICS HOURLY DRILLDOWN ================= */

.analytics-hourly-hint {
  margin-top: -8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--noc-muted);
}

.analytics-hour-clickable {
  cursor: pointer;
  border-radius: 6px;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.analytics-hour-clickable:hover {
  background: rgba(127,127,127,.10);
}

.analytics-hour-clickable:active {
  transform: translateY(1px);
}

.hourly-activity-detail {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--noc-border);
}

.hourly-activity-detail h3 {
  margin-top: 0;
}


/* ================= ANALYTICS HOURLY DRILLDOWN ================= */

.analytics-hourly-hint {
  margin-top: -8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--noc-muted);
}

.analytics-hour-clickable {
  cursor: pointer;
  border-radius: 6px;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.analytics-hour-clickable:hover {
  background: rgba(127,127,127,.10);
}

.analytics-hour-clickable:active {
  transform: translateY(1px);
}

.hourly-activity-detail {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--noc-border);
}

.hourly-activity-detail h3 {
  margin-top: 0;
}


/* ================= SYSTEM HEALTH ================= */

.system-health-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.system-health-summary-card {
  background: var(--card-bg, #1b1f24);
  border: 1px solid rgba(128,128,128,.28);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}

.system-health-summary-label {
  font-size: .9rem;
  opacity: .75;
  margin-bottom: 8px;
}

.system-health-summary-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.system-health-text-healthy {
  color: #55c878;
}

.system-health-text-warning {
  color: #e5b84f;
}

.system-health-text-critical {
  color: #e46464;
}

.system-health-text-unknown {
  color: #a8adb5;
}

.system-health-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.system-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(128,128,128,.22);
  border-radius: 8px;
}

.system-health-row-name {
  font-weight: 700;
}

.system-health-row-detail,
.system-health-section-note,
.system-health-wiresx-detail {
  font-size: .88rem;
  opacity: .72;
}

.system-health-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .88rem;
}

.system-health-badge {
  display: inline-block;
  min-width: 86px;
  padding: 4px 9px;
  border-radius: 999px;
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.system-health-badge-healthy {
  background: rgba(85,200,120,.18);
  border: 1px solid rgba(85,200,120,.6);
}

.system-health-badge-warning {
  background: rgba(229,184,79,.18);
  border: 1px solid rgba(229,184,79,.6);
}

.system-health-badge-critical {
  background: rgba(228,100,100,.18);
  border: 1px solid rgba(228,100,100,.6);
}

.system-health-badge-unknown {
  background: rgba(150,155,165,.16);
  border: 1px solid rgba(150,155,165,.45);
}

.system-health-badge-informational {
  background: rgba(100,155,220,.16);
  border: 1px solid rgba(100,155,220,.45);
}

.system-health-wiresx-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.system-health-wiresx-card {
  border: 1px solid rgba(128,128,128,.24);
  border-radius: 9px;
  padding: 16px;
}

.system-health-wiresx-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.system-health-wiresx-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.system-health-wiresx-detail {
  margin-top: 4px;
}

.system-health-problems {
  border-width: 2px;
}

.system-health-problem {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding: 12px;
  margin-top: 8px;
  border-radius: 8px;
}

.system-health-problem-warning {
  border: 1px solid rgba(229,184,79,.55);
}

.system-health-problem-critical {
  border: 1px solid rgba(228,100,100,.6);
}

.system-health-problem-detail {
  grid-column: 1 / -1;
  font-size: .88rem;
  opacity: .8;
}

.system-health-empty {
  opacity: .7;
  padding: 12px 0;
}


@media (max-width: 800px) {

  .system-health-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .system-health-wiresx-grid {
    grid-template-columns: 1fr;
  }

  .system-health-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .system-health-row-meta {
    justify-content: flex-start;
  }

}