/*
 * FIT Tracker dashboard layout and contrast remediation
 *
 * Scope: independent production dashboard presentation only.
 * This layer overrides the broad legacy button treatment where roster cards,
 * filters, and sidebar controls were unintentionally styled as primary actions.
 */
:root {
  --fit-text-strong: #f8fafc;
  --fit-text: #edf1f5;
  --fit-muted: #bac4cf;
  --fit-muted-strong: #d5dce5;
  --fit-panel: #151820;
  --fit-panel-raised: #1d212b;
  --fit-border: rgba(226, 232, 240, 0.18);
  --fit-red: #df2634;
  --fit-red-bright: #ff6974;
  --fit-red-deep: #8e1721;
  --fit-green: #75d8bc;
}

/* Let the roster use the full available desktop canvas without ever forcing a
   horizontal overflow. The content column retains a readable outer gutter. */
.workspace {
  box-sizing: border-box;
  max-width: none !important;
  min-width: 0;
  padding: clamp(28px, 3.25vw, 52px) !important;
}

.page-header,
.detail-header {
  gap: 24px;
}

.page-header p,
.detail-header p,
.workspace .subtle,
.workspace small,
.metrics span {
  color: var(--fit-muted) !important;
}

.group-heading,
.form-label,
.disclosure summary,
.backup-status {
  color: var(--fit-muted-strong) !important;
}

/* Restore a hierarchy of actions: only selected navigation and primary form
   actions are red; roster cards and filters are neutral, readable surfaces. */
.app.app aside nav button:not(.secondary):not(.back) {
  background: transparent !important;
  border: 1px solid transparent;
  color: #dce4eb !important;
  padding: 10px 12px;
}

.app.app aside nav button:not(.secondary):not(.back):hover,
.app.app aside nav button.active:not(.secondary):not(.back) {
  background: linear-gradient(
    100deg,
    var(--fit-red-deep),
    var(--fit-red)
  ) !important;
  border-color: rgba(255, 126, 137, 0.42);
  color: #fff !important;
}

.workspace .group-filter > button:not(.secondary):not(.back) {
  background: #252b36 !important;
  border: 1px solid rgba(226, 232, 240, 0.16);
  color: #e7ecf2 !important;
  padding: 8px 11px;
}

.workspace .group-filter > button:not(.secondary):not(.back):hover {
  background: #353c48 !important;
  border-color: rgba(255, 105, 116, 0.46);
}

.workspace .group-filter > button.selected:not(.secondary):not(.back) {
  background: linear-gradient(
    100deg,
    var(--fit-red-deep),
    var(--fit-red)
  ) !important;
  border-color: rgba(255, 126, 137, 0.5);
  color: #fff !important;
}

.workspace .group-filter span {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* The roster grid has explicit responsive minimums, gap rhythm, and safe
   shrink behavior for long names and email addresses. */
.cards {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  min-width: 0;
}

.cards > button.client {
  align-items: start;
  background: linear-gradient(155deg, #202530 0%, #12151c 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.17) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  color: var(--fit-text) !important;
  column-gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 136px;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.cards > button.client:hover {
  background: linear-gradient(155deg, #292f3b 0%, #171b23 100%) !important;
  border-color: rgba(255, 105, 116, 0.6) !important;
  transform: translateY(-1px);
}

.cards > button.client:focus-visible {
  outline: 3px solid rgba(255, 105, 116, 0.78);
  outline-offset: 2px;
}

.cards > button.client > :first-child {
  min-width: 0;
}

.cards > button.client p {
  color: #ffacb3 !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cards > button.client h2 {
  color: var(--fit-text-strong) !important;
  line-height: 1.18;
  margin: 0 0 7px;
  overflow-wrap: anywhere;
}

.cards > button.client small,
.cards > button.client .subtle {
  color: var(--fit-muted) !important;
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cards > button.client .card-side {
  align-items: end;
  gap: 12px;
  min-width: max-content;
}

.cards > button.client strong {
  color: var(--fit-green) !important;
  font-size: clamp(25px, 2vw, 31px);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.cards > button.client .status,
.cards > button.client .active-status {
  background: #2b3240 !important;
  border: 1px solid rgba(226, 232, 240, 0.16);
  color: #f7f9fc !important;
}

.cards > button.client .active-status {
  background: #173b36 !important;
  border-color: rgba(117, 216, 188, 0.33);
  color: #9be8d2 !important;
}

/* A contained account footer gives the signed-in identity and sign-out action
   a stable, readable home without competing with the main navigation. */
.app > aside footer {
  background: rgba(9, 11, 16, 0.52);
  border-top: 1px solid rgba(226, 232, 240, 0.18) !important;
  border-radius: 10px 10px 0 0;
  gap: 12px;
  margin: auto -1px -1px;
  padding: 17px 10px 10px !important;
}

.app.app > aside footer button:not(.secondary):not(.back) {
  background: linear-gradient(
    100deg,
    var(--fit-red-deep),
    var(--fit-red)
  ) !important;
  border: 1px solid rgba(255, 126, 137, 0.42);
  border-radius: 8px;
  color: #fff !important;
  display: block;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.app.app > aside footer button:not(.secondary):not(.back):hover {
  background: linear-gradient(
    100deg,
    #ae1c28,
    var(--fit-red-bright)
  ) !important;
}

@media (max-width: 1180px) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 238px), 1fr));
  }
}

@media (max-width: 880px) {
  .workspace {
    padding: 24px 16px 40px !important;
  }

  .app > aside footer {
    margin: 12px 0 0;
  }
}

@media (max-width: 520px) {
  .cards {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .cards > button.client {
    min-height: 124px;
    padding: 17px;
  }
}

/* Weekly FIT workflow: preserve the smaller Latest FIT card and compress the
   Client Record by putting Notes beside compact identity fields. */
.detail-view .overview-summary-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.38fr) minmax(500px, 0.62fr);
  margin-bottom: 18px;
  max-width: 900px;
}

.detail-view .overview-summary-grid .panel {
  height: 188px;
  min-width: 0;
  padding: 15px;
}

.detail-view .overview-summary-grid .score-summary {
  display: block;
  overflow: auto;
  min-height: 0;
}

.detail-view .overview-summary-grid .score-summary strong {
  font-size: clamp(42px, 4vw, 54px);
  margin: 6px 0;
}

.detail-view .client-record-form {
  align-items: stretch;
  display: grid;
  gap: 8px 12px;
  grid-template-areas: "fields notes";
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, 0.55fr);
}

.detail-view .client-record-fields {
  align-content: start;
  display: grid;
  gap: 6px 8px;
  grid-area: fields;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-view .client-record-fields label {
  font-size: 10px;
  gap: 4px;
}

.detail-view .client-record-fields input,
.detail-view .client-record-fields select {
  min-width: 0;
  padding: 6px 8px;
}

.detail-view .client-record-notes {
  grid-area: notes;
  min-width: 0;
}

.detail-view .client-record-notes textarea {
  height: 118px;
  min-height: 118px;
  resize: vertical;
}

.detail-view .client-record-save {
  align-self: end;
  min-width: 0;
  padding: 8px 9px;
  white-space: nowrap;
}

.detail-view .overview-fit-form {
  border-top: 2px solid var(--fit-red) !important;
  margin-top: 0;
  padding: clamp(22px, 2.3vw, 32px);
}

.detail-view .overview-fit-form h2 {
  font-size: clamp(20px, 2.1vw, 26px);
}

/* History stays focused on a single quick F/I-N-E-S-S entry line and the
   saved history. It deliberately does not repeat the full clinical form. */
.history-heading {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.history-heading .subtle {
  margin: -4px 0 0;
}

.detail-view .tabbar button {
  background: #242731 !important;
  border: 1px solid var(--fit-border);
  color: var(--fit-text) !important;
}

.detail-view .tabbar button:hover {
  background: #303541 !important;
  color: #fff !important;
}

.detail-view .tabbar button.active {
  background: linear-gradient(
    100deg,
    var(--fit-red-deep),
    var(--fit-red)
  ) !important;
  border-color: rgba(255, 126, 137, 0.5);
  color: #fff !important;
}

.history-quick-score-form {
  border-bottom: 1px solid var(--fit-border);
  margin: 16px 0;
  padding: 0 0 16px;
}

.history-quick-score-form .form-label {
  margin: 0 0 8px;
}

.history-quick-score-grid {
  align-items: end;
  display: grid;
  gap: 9px;
  grid-template-columns:
    minmax(132px, 1.6fr) repeat(5, minmax(62px, 0.78fr))
    minmax(160px, 1.45fr) minmax(64px, 0.7fr) auto;
}

.history-quick-score-grid label {
  color: var(--fit-muted-strong) !important;
  font-size: 10px;
  gap: 4px;
}

.history-quick-score-grid input {
  min-width: 0;
  padding: 8px;
}

.history-quick-score-grid .quick-history-notes {
  min-width: 0;
}

.quick-fit-total {
  align-items: center;
  align-self: stretch;
  background: rgba(117, 216, 188, 0.12);
  border: 1px solid rgba(117, 216, 188, 0.33);
  border-radius: 8px;
  color: var(--fit-green);
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 6px 8px;
}

.quick-fit-total span {
  color: var(--fit-muted-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.quick-fit-total strong {
  color: var(--fit-green);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.history-quick-score-grid button {
  min-height: 39px;
  padding: 9px 11px;
  white-space: nowrap;
}

.history-scorecard-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
}

.history-scorecard-scroll {
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: 12px;
  margin-top: 0;
  min-width: 0;
  overflow-x: auto;
}

.history-scorecard-table {
  border-collapse: collapse;
  min-width: 760px;
  table-layout: fixed;
  width: 100%;
}

.history-scorecard-table caption {
  color: var(--fit-muted);
  padding: 14px 16px 8px;
  text-align: left;
}

.history-scorecard-table th,
.history-scorecard-table td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.13);
  padding: 13px 10px;
  text-align: center;
  vertical-align: middle;
}

.history-scorecard-table thead th {
  background: #202530;
  color: var(--fit-text-strong);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-scorecard-table thead th:first-child,
.history-scorecard-table tbody th {
  min-width: 112px;
  text-align: left;
}

.history-scorecard-table tbody th {
  color: var(--fit-text-strong);
  font-weight: 700;
}

.history-scorecard-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.history-scorecard-table tbody tr:hover {
  background: rgba(255, 105, 116, 0.07);
}

.history-scorecard-table td {
  color: var(--fit-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.history-scorecard-table .scorecard-short-label {
  color: #ffacb3;
  display: block;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.history-scorecard-table small {
  color: var(--fit-muted);
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  margin-top: 4px;
  text-transform: none;
}

.history-scorecard-table .fit-total-cell {
  color: var(--fit-green);
  font-size: 17px;
}

.history-scorecard-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-width: 184px;
}

.history-scorecard-actions button {
  padding: 7px 8px;
  white-space: nowrap;
}

/* Hover or keyboard-focus a weekly history row to reveal the complete saved
   record below the scorecard. Keeping the details in-flow prevents long notes
   from being clipped by the table or browser viewport. */
.history-scorecard-table tbody tr {
  cursor: default;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.history-scorecard-table tbody tr.is-inspected,
.history-scorecard-table tbody tr:focus,
.history-scorecard-table tbody tr:focus-within {
  background: rgba(255, 105, 116, 0.13);
  outline: none;
}

.history-week-detail {
  background: linear-gradient(145deg, #202530, #171b23);
  border: 1px solid rgba(255, 126, 137, 0.38);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  margin-top: 0;
  padding: 18px;
  position: sticky;
  top: 16px;
}

.history-week-detail-heading {
  align-items: start;
  border-bottom: 1px solid rgba(226, 232, 240, 0.14);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.history-week-detail-heading .eyebrow {
  color: #ffacb3 !important;
  margin-bottom: 5px;
}

.history-week-detail h3,
.history-week-detail h4 {
  color: var(--fit-text-strong) !important;
  margin: 0;
}

.history-week-detail h3 {
  font-size: clamp(18px, 2vw, 23px);
}

.history-week-fit {
  background: rgba(117, 216, 188, 0.13);
  border: 1px solid rgba(117, 216, 188, 0.35);
  border-radius: 999px;
  color: var(--fit-green) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  padding: 7px 10px;
  white-space: nowrap;
}

.history-week-detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  padding-top: 16px;
}

.history-week-supporting-details {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.history-week-supporting-details > div {
  background: rgba(10, 12, 17, 0.36);
  border: 1px solid rgba(226, 232, 240, 0.11);
  border-radius: 8px;
  min-width: 0;
  padding: 9px 10px;
}

.history-week-supporting-details dt {
  color: var(--fit-muted) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.history-week-supporting-details dd {
  color: var(--fit-text-strong) !important;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  margin: 3px 0 0;
}

.history-week-note {
  background: rgba(10, 12, 17, 0.28);
  border-left: 3px solid var(--fit-red);
  min-width: 0;
  padding: 3px 0 3px 12px;
}

.history-week-note h4 {
  font-size: 13px;
}

.history-week-note p {
  color: var(--fit-text) !important;
  line-height: 1.5;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .history-week-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .history-week-supporting-details {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .history-week-detail-heading,
  .history-week-detail-grid {
    grid-template-columns: 1fr;
  }

  .history-week-detail-heading {
    align-items: start;
    flex-direction: column;
  }

  .history-week-supporting-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .history-scorecard-layout {
    grid-template-columns: minmax(0, 1fr) minmax(238px, 290px);
  }

  .history-quick-score-grid {
    grid-template-columns:
      minmax(124px, 1.45fr) repeat(5, minmax(54px, 0.72fr))
      minmax(136px, 1.15fr) minmax(60px, 0.65fr) auto;
  }
}

@media (max-width: 880px) {
  .detail-view .overview-summary-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .detail-view .overview-summary-grid .panel {
    height: auto;
  }

  .detail-view .client-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-scorecard-layout {
    grid-template-columns: 1fr;
  }

  .history-week-detail {
    position: static;
  }

  .history-quick-score-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .history-quick-score-grid .quick-week {
    grid-column: span 2;
  }

  .history-quick-score-grid .quick-history-notes {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .detail-view .client-record-form {
    grid-template-areas: "fields" "notes";
    grid-template-columns: 1fr;
  }

  .detail-view .client-record-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-view .client-record-notes textarea {
    min-height: 84px;
  }

  .history-quick-score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .history-quick-score-grid .quick-week {
    grid-column: span 3;
  }

  .history-quick-score-grid .quick-history-notes {
    grid-column: span 3;
  }
}