/* HardReps Coach — final visual layer.
   Presentation only: no IDs, state classes or interaction hooks are changed. */

:root {
  --field-canvas: #f3f1ea;
  --field-paper: #fffef9;
  --field-tint: #e9eee7;
  --field-ink: #17211c;
  --field-muted: #667269;
  --field-line: #d8ddd3;
  --field-green: #08765c;
  --field-green-deep: #173f33;
  --field-lime: #dced72;
  --field-coral: #e15d3f;
  --field-shadow: 0 10px 28px rgba(32, 49, 39, .08);
}

body[data-theme="dark"] {
  --field-canvas: #101612;
  --field-paper: #172019;
  --field-tint: #202b23;
  --field-ink: #f4f6ef;
  --field-muted: #a8b4aa;
  --field-line: #344139;
  --field-green: #72d8b7;
  --field-green-deep: #122d25;
  --field-lime: #cfe66d;
  --field-coral: #ff8062;
  --field-shadow: 0 12px 32px rgba(0, 0, 0, .26);
}

/* Keep the original HardReps wordmark unchanged. */
.topbar .brand {
  display: block !important;
  color: var(--red) !important;
  letter-spacing: 0 !important;
}

.brand::before {
  content: none !important;
  display: none !important;
}

body {
  background:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--field-lime) 30%, transparent), transparent 28rem),
    var(--field-canvas);
}

.topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--field-line) 76%, transparent) !important;
  background: color-mix(in srgb, var(--field-paper) 94%, transparent) !important;
  color: var(--field-ink) !important;
}

.brand,
.topbar .muted,
.trainer-form label {
  color: var(--field-ink) !important;
}

.topbar .muted,
.trainer-form label {
  color: var(--field-muted) !important;
}

.coach-main-nav button {
  border-radius: 999px !important;
  color: var(--field-muted) !important;
}

.coach-main-nav button.active,
.coach-main-nav button:hover {
  border-color: var(--field-ink) !important;
  background: var(--field-ink) !important;
  color: var(--field-paper) !important;
}

.workspace,
.workspace.client-selected.section-calendar,
.workspace.client-selected.section-dashboard,
.workspace.client-selected.section-atp {
  gap: 14px !important;
  padding: 14px !important;
  background: transparent !important;
}

.workspace.client-selected.section-calendar,
.workspace.client-selected.section-dashboard,
.workspace.client-selected.section-atp {
  grid-template-columns: 74px minmax(0, 1fr) !important;
}

.workspace > .tp-rail,
.workspace.client-selected.section-calendar > .tp-rail,
.workspace.client-selected.section-dashboard > .tp-rail,
.workspace.client-selected.section-atp > .tp-rail {
  border: 0 !important;
  border-radius: 20px !important;
  padding: 10px 5px !important;
  background: var(--field-green-deep) !important;
  box-shadow: var(--field-shadow) !important;
}

.workspace > .tp-rail button,
.workspace.client-selected.section-calendar > .tp-rail button,
.workspace.client-selected.section-dashboard > .tp-rail button,
.workspace.client-selected.section-atp > .tp-rail button {
  min-height: 60px !important;
  border-radius: 14px !important;
  padding: 6px 3px !important;
  color: #bdd2c5 !important;
}

.workspace > .tp-rail button.active,
.workspace > .tp-rail button:hover {
  background: var(--field-lime) !important;
  color: #17211c !important;
}

/* Keep pending client requests reachable on the coach home screen. */
.workspace.clients-home.section-home:not(.client-empty) {
  grid-template-columns: 74px minmax(280px, 320px) minmax(0, 1fr) !important;
}

.workspace.clients-home.section-home:not(.client-empty) > .sidebar {
  display: block !important;
}

.workspace.client-selected.section-calendar > .client-area,
.workspace.client-selected.section-dashboard > .client-area,
.workspace.client-selected.section-atp > .client-area {
  border: 1px solid var(--field-line) !important;
  border-radius: 20px !important;
  background: var(--field-paper) !important;
  box-shadow: var(--field-shadow) !important;
  overflow: clip !important;
}

.workspace.client-selected.section-calendar #tab-calendar,
.workspace.client-selected.section-dashboard #tab-progress,
.workspace.client-selected.section-atp #tab-atp {
  padding: 12px !important;
}

/* Calendar: separate field cards instead of one spreadsheet-like surface. */
.workspace.client-selected.section-calendar .section-title.calendar-toolbar {
  min-height: 66px !important;
  height: auto !important;
  margin-bottom: 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 10px 16px !important;
  background: var(--field-tint) !important;
}

.workspace.client-selected.section-calendar .calendar-title-row h3 {
  color: var(--field-ink) !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  letter-spacing: -.035em !important;
}

.workspace.client-selected.section-calendar .tp-calendar-shell,
.workspace.client-selected.section-calendar .tp-calendar-shell.summary-collapsed {
  grid-template-columns: minmax(0, 1fr) 38px minmax(250px, 296px) !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.workspace.client-selected.section-calendar .tp-calendar-shell.summary-collapsed {
  grid-template-columns: minmax(0, 1fr) 38px 0 !important;
}

.workspace.client-selected.section-calendar .calendar-week-head {
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  background: transparent !important;
}

.workspace.client-selected.section-calendar .calendar-week-head span {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--field-tint) !important;
  color: var(--field-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.workspace.client-selected.section-calendar .calendar-grid {
  gap: 8px !important;
  grid-template-rows: var(--calendar-week-rows, repeat(6, 188px)) !important;
  background: transparent !important;
}

.workspace.client-selected.section-calendar .calendar-day,
.workspace.client-selected.section-calendar .tp-week-action-cell,
.workspace.client-selected.section-calendar .tp-week-summary-card {
  min-height: 188px !important;
  border: 1px solid var(--field-line) !important;
  border-radius: 14px !important;
  background: var(--field-paper) !important;
  box-shadow: 0 5px 15px rgba(32, 49, 39, .045) !important;
  overflow: hidden !important;
}

.workspace.client-selected.section-calendar .calendar-day-head,
body[data-theme="dark"] .workspace.client-selected.section-calendar .calendar-day-head {
  border-bottom: 1px solid var(--field-line) !important;
  background: var(--field-tint) !important;
}

.workspace.client-selected.section-calendar .calendar-day.is-current-week .calendar-day-head,
body[data-theme="dark"] .workspace.client-selected.section-calendar .calendar-day.is-current-week .calendar-day-head {
  border-bottom-color: color-mix(in srgb, var(--field-lime) 55%, var(--field-line)) !important;
  background: color-mix(in srgb, var(--field-lime) 28%, var(--field-paper)) !important;
}

.workspace.client-selected.section-calendar .calendar-day.is-today .calendar-day-head,
body[data-theme="dark"] .workspace.client-selected.section-calendar .calendar-day.is-today .calendar-day-head {
  border-bottom-color: var(--field-green-deep) !important;
  background: var(--field-green-deep) !important;
  color: #fff !important;
}

.workspace.client-selected.section-calendar .calendar-running-mini {
  border-radius: 10px !important;
}

.workspace.client-selected.section-calendar .tp-calendar-week-actions,
.workspace.client-selected.section-calendar .tp-calendar-sidebar {
  gap: 8px !important;
  grid-template-rows: 34px var(--calendar-week-rows, repeat(6, 188px)) !important;
  background: transparent !important;
}

.workspace.client-selected.section-calendar .tp-calendar-week-actions-head,
.workspace.client-selected.section-calendar .tp-calendar-sidebar-head {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--field-tint) !important;
}

/* Analytics: editorial 8/4 composition instead of three equal TP columns. */
.workspace.client-selected.section-dashboard .tp-analytics-shell {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 14px !important;
  padding: 14px !important;
  background: transparent !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-tabs,
.workspace.client-selected.section-dashboard .tp-analytics-toolbar {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--field-tint) !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-tabs {
  min-height: 54px !important;
  padding: 7px !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-tabs button {
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 9px 15px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-toolbar {
  min-height: 76px !important;
  padding: 14px 18px !important;
}

.workspace.client-selected.section-dashboard [data-analytics-chart="performance"] {
  grid-column: 1 / span 8 !important;
  grid-row: auto !important;
  width: auto !important;
  min-height: 390px !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-summary-grid {
  display: grid !important;
  grid-column: 9 / -1 !important;
  grid-row: auto !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-summary-card,
.workspace.client-selected.section-dashboard .tp-analytics-summary-card:nth-child(n) {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  min-height: 184px !important;
  margin: 0 !important;
  border: 1px solid var(--field-line) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  background: var(--field-paper) !important;
  box-shadow: var(--field-shadow) !important;
}

.workspace.client-selected.section-dashboard [data-analytics-chart="fitness"],
.workspace.client-selected.section-dashboard .tp-analytics-history-grid {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

.workspace.client-selected.section-dashboard .tp-analytics-load-plot {
  height: 320px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-green) 6%, transparent), transparent) !important;
}

/* ATP uses the same visual language without changing phase or table logic. */
.workspace.client-selected.section-atp .tp-atp-chart,
.workspace.client-selected.section-atp .tp-atp-table-wrap,
.workspace.client-selected.section-atp .race-plan-panel {
  border: 1px solid var(--field-line) !important;
  border-radius: 18px !important;
  background: var(--field-paper) !important;
  box-shadow: var(--field-shadow) !important;
}

@media (max-width: 1180px) {
  .workspace.client-selected.section-dashboard [data-analytics-chart="performance"],
  .workspace.client-selected.section-dashboard .tp-analytics-summary-grid {
    grid-column: 1 / -1 !important;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .app-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
  }

  .workspace,
  .workspace.client-selected.section-calendar,
  .workspace.client-selected.section-dashboard,
  .workspace.client-selected.section-atp {
    min-height: 0 !important;
    overflow: visible !important;
    gap: 9px !important;
    padding: 9px !important;
  }

  .workspace.client-empty {
    display: block !important;
  }

  .workspace.client-empty > .tp-rail,
  .workspace.client-empty > .sidebar,
  .workspace.client-empty > .notifications {
    display: none !important;
  }

  .workspace.client-empty > .client-area {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .workspace.clients-home:not(.client-empty):not(.client-selected) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  .workspace.clients-home:not(.client-empty):not(.client-selected) > .tp-rail,
  .workspace.clients-home:not(.client-empty):not(.client-selected) > .notifications {
    display: none !important;
  }

  .workspace.clients-home:not(.client-empty):not(.client-selected) > .sidebar,
  .workspace.clients-home:not(.client-empty):not(.client-selected) > .client-area {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .workspace.clients-home.section-home:not(.client-empty) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .empty-state {
    min-height: 0 !important;
    padding: 28px 16px 36px !important;
  }

  .empty-card {
    width: min(100%, 680px) !important;
    margin: 0 auto !important;
  }

  .workspace.client-selected.section-calendar .tp-calendar-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workspace.client-selected.section-calendar .tp-calendar-week-actions,
  .workspace.client-selected.section-calendar .tp-calendar-sidebar {
    display: none !important;
  }
}

@media (max-width: 680px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "controls"
      "nav" !important;
    gap: 8px !important;
    padding: 10px 14px 8px !important;
  }

  .trainer-form {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  .trainer-identity {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
  }

  .trainer-form label {
    flex: 0 0 auto !important;
    font-size: 9px !important;
  }

  .trainer-form select,
  .trainer-form .trainer-language-select {
    flex: 1 1 74px !important;
    min-width: 64px !important;
  }

  .trainer-form button {
    flex: 1 1 auto !important;
    padding-inline: 10px !important;
  }

  .workspace.client-selected.section-calendar,
  .workspace.client-selected.section-dashboard,
  .workspace.client-selected.section-atp {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
  }

  .workspace.client-selected.section-calendar > .tp-rail,
  .workspace.client-selected.section-dashboard > .tp-rail,
  .workspace.client-selected.section-atp > .tp-rail {
    display: flex !important;
    flex-direction: row !important;
    grid-column: 1 !important;
    gap: 6px !important;
    height: auto !important;
    min-width: 0 !important;
    align-self: start !important;
    overflow-x: auto !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  .workspace.client-selected.section-calendar > .tp-rail button,
  .workspace.client-selected.section-dashboard > .tp-rail button,
  .workspace.client-selected.section-atp > .tp-rail button {
    flex: 1 0 106px !important;
    height: auto !important;
    min-height: 48px !important;
  }

  .workspace.client-selected.section-calendar > .client-area,
  .workspace.client-selected.section-dashboard > .client-area,
  .workspace.client-selected.section-atp > .client-area {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-tabs {
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-tabs button {
    flex: 0 0 auto !important;
  }

  .coach-main-nav {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .coach-main-nav::-webkit-scrollbar {
    display: none;
  }

  .coach-main-nav button {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  .login-code-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .login-code-row button,
  .login-code-row .primary-button {
    width: 100% !important;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-shell {
    display: block !important;
    padding: 8px !important;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-shell > * {
    margin-bottom: 10px !important;
  }

  .workspace.client-selected.section-dashboard .tp-analytics-summary-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}