.nav-link {
  display: block;
  text-decoration: none;
}

/* Gym HQ uses the available desktop canvas. Keep KPI blocks focused,
   but let the operational client table breathe on ultrawide monitors. */
.main {
  width: 100%;
  max-width: none;
  margin: 0;
}

.topbar,
.gym-summary,
.signal-strip {
  width: min(1540px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.portfolio-section {
  width: 100%;
  max-width: none;
}

.gym-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.gym-summary .summary-card {
  min-height: 132px;
}

.gym-summary .summary-card strong {
  font-size: clamp(28px, 3vw, 42px);
}

.risk-card {
  background:
    radial-gradient(circle at top right, rgba(255,107,107,.10), transparent 46%),
    var(--panel);
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 34px;
}

.signal-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: #fff;
  text-align: left;
}

.signal-card span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
}

.signal-card strong {
  font-size: 24px;
  line-height: 1;
}

.signal-card small {
  color: var(--muted);
  font-size: 10px;
}

.signal-card.blue span,
.signal-card.blue strong { color: #8fc9ff; }

.signal-card.warn span,
.signal-card.warn strong { color: var(--warning); }

.signal-card:hover,
.signal-card.active {
  border-color: var(--accent);
  background: #151515;
}

.portfolio-section { margin-top: 8px; }
.gym-heading { align-items: center; }
.gym-helper { margin-top: 6px; color: var(--muted-2); font-size: 10px; }

.gym-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gym-search,
.gym-select,
.gym-form input,
.gym-form select {
  color: #fff;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 11px;
  outline: none;
}

.gym-search { min-width: 220px; }
.gym-select { min-width: 135px; }

.gym-search:focus,
.gym-select:focus,
.gym-form input:focus,
.gym-form select:focus { border-color: var(--accent); }

.gym-table { min-width: 1880px; }
.gym-table td { vertical-align: middle; }

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.sort-header:hover,
.sort-header.active { color: var(--accent); }
.sort-indicator {
  min-width: 9px;
  color: var(--muted-2);
  font-size: 8px;
  line-height: 1;
}
.sort-header.active .sort-indicator { color: var(--accent); }

.client-primary { font-weight: 900; color: #fff; }
.client-secondary {
  display: block;
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 9px;
}
.package-main { color: #fff; font-weight: 750; }

.remaining-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #171717;
  color: #ddd;
  font-size: 10px;
  font-weight: 900;
}
.remaining-pill.low {
  color: var(--warning);
  border-color: rgba(242,193,78,.28);
  background: rgba(242,193,78,.08);
}
.remaining-pill.zero {
  color: #ff8b8b;
  border-color: rgba(255,107,107,.30);
  background: rgba(255,107,107,.10);
}

.attention-pill,
.renewal-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
  border: 1px solid var(--border);
  background: #191919;
}

.attention-pill.green {
  color: var(--success);
  border-color: rgba(95,211,141,.20);
  background: rgba(95,211,141,.08);
}
.attention-pill.yellow {
  color: var(--warning);
  border-color: rgba(242,193,78,.22);
  background: rgba(242,193,78,.09);
}
.attention-pill.red {
  color: #ff8b8b;
  border-color: rgba(255,107,107,.25);
  background: rgba(255,107,107,.10);
}
.attention-pill.blue {
  color: #8fc9ff;
  border-color: rgba(143,201,255,.22);
  background: rgba(143,201,255,.08);
}
.attention-pill.grey { color: #777; }

.renewal-pill.hot { color: #ff8b8b; border-color: rgba(255,107,107,.22); }
.renewal-pill.upcoming { color: var(--warning); border-color: rgba(242,193,78,.20); }
.renewal-pill.contacted { color: #8fc9ff; border-color: rgba(143,201,255,.20); }
.renewal-pill.confirmed { color: var(--accent); border-color: rgba(191,254,0,.28); background: var(--accent-soft); }
.renewal-pill.lost { color: #777; }
.renewal-pill.none { color: var(--muted); }

.attention-red td:first-child { box-shadow: inset 2px 0 0 var(--danger); }
.attention-yellow td:first-child { box-shadow: inset 2px 0 0 var(--warning); }
.attention-blue td:first-child { box-shadow: inset 2px 0 0 #8fc9ff; }

.row-action {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  padding: 7px 9px;
  font-weight: 900;
  font-size: 9px;
  white-space: nowrap;
}
.row-action:hover { background: var(--accent); color: #080808; }

.next-cash {
  display: grid;
  gap: 3px;
}
.next-cash strong { color: var(--accent); }
.next-cash span { color: var(--muted); font-size: 9px; }
.next-cash.empty strong { color: var(--muted-2); }

.next-action-cell {
  min-width: 190px;
  max-width: 260px;
}
.next-action-cell strong {
  display: block;
  color: #fff;
  font-size: 10px;
  white-space: normal;
}
.next-action-cell span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.gym-modal {
  width: min(620px, 100%);
  max-height: min(880px, calc(100vh - 40px));
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
}
.modal-close:hover { color: var(--accent); }

.gym-form { display: grid; gap: 11px; }
.gym-form label { display: grid; gap: 6px; }
.gym-form label > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.gym-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

@media (max-width:1050px) {
  .gym-summary { grid-template-columns: repeat(2,1fr); }
  .signal-strip { grid-template-columns: 1fr; }
  .gym-heading { align-items:flex-start; flex-direction:column; }
  .gym-controls { justify-content:flex-start; width:100%; }
}

@media (max-width:720px) {
  .gym-summary { grid-template-columns:1fr; }
  .gym-controls > * { width:100%; min-width:0; }
  .gym-form-grid { grid-template-columns:1fr; }
  .signal-card { grid-template-columns: auto auto; }
  .signal-card small { grid-column: 1 / -1; }
}