/* CROKU palette shared by the club, training plan and club management views. */
html:has(>body.croku-club),
html:has(>body.croku-workout-page),
html:has(>body.croku-platform) { background: #f4f9fd; }
body.croku-club,
body.croku-workout-page,
body.croku-platform {
  --ink: #0c1b34;
  --ink-2: #123b69;
  --text: #0c1b34;
  --muted: #60738c;
  --line: #d9e6f2;
  --paper: #f4f9fd;
  --soft: #f4f9fd;
  --mint: #3e89cd;
  --accent: #3e89cd;
  --accent-dark: #176dae;
  --accent-contrast: #0c1b34;
  --accent-text: #176dae;
  --blue: #3e89cd;
  background: #f4f9fd;
  color: #0c1b34;
}

/* Keep the approved left menu alongside the calendar in every CROKU role. */
.croku-club .club-header {
  width: calc(100% - 48px);
  max-width: 1360px;
  min-height: 104px;
  margin: 24px auto 0;
  padding: 16px 24px;
  border-radius: 22px;
  background: linear-gradient(115deg,#0c1b34 0%,#134a84 68%,#058fe6 100%);
  color: white;
}
.croku-club .club-brand-image { display: block; width: 190px; height: auto; }
.croku-club .club-brand span { display: none; }
.croku-club #account .muted,.croku-club .club-header .account-name { color: #d6e5f3; }
.croku-club .club-header .account-name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  align-self: center;
}
.croku-club .club-header .club-switcher a,
.croku-club .club-header .role-switcher button,
.croku-club .club-header #account .secondary.small {
  min-height: 40px;
  border-color: #d7e6f3;
  background: white;
  color: #0c1b34;
}
.croku-club .club-header .club-switcher a[aria-current=page],
.croku-club .club-header .role-switcher button[aria-pressed=true] {
  border-color: #3e89cd;
  background: #3e89cd;
  color: #0c1b34;
}
.croku-club .club-main {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  column-gap: 24px;
  align-items: start;
  width: calc(100% - 48px);
  max-width: 1360px;
  padding: 24px 0 42px;
}
.croku-club .club-main > :not(.tabs) { grid-column: 2; min-width: 0; }
.croku-club .club-main > .club-overview { grid-row: 1; }
.croku-club .club-main > .club-overview[hidden] { display: none !important; }
.croku-club .club-main:has(> .club-overview[hidden]) > .tabs { margin-top: 0; }
.croku-club .club-main > .tabs {
  grid-column: 1;
  grid-row: 1 / span 20;
  align-self: start;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 4px;
  margin: 1.4rem 0 0;
  padding: 18px 12px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}
.croku-club .club-main > .tabs::before {
  content: "MINU KLUBI";
  padding: 4px 12px 12px;
  color: #60738c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}
.croku-club .club-main > .tabs button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0c1b34;
  text-align: left;
  white-space: normal;
  font-size: 14px;
  font-weight: 700;
}
.croku-club .club-main > .tabs button:hover,
.croku-club .club-main > .tabs button.active {
  border: 0;
  background: #dceffc;
  color: #0c1b34;
}
.croku-club .club-main > .tabs button[hidden] { display: none !important; }

/* Calendars, passes, controls and owner cards use the same blue system. */
.croku-club .button { border-color: #3e89cd; background: #3e89cd; color: #0c1b34; }
.croku-club .button:hover { border-color: #6db5ef; background: #6db5ef; }
.croku-club .secondary { border-color: #cbdced; background: white; color: #0c1b34; }
.croku-club .secondary:hover { background: #e4f3fe; }
.croku-club .record-card { border-color: #cbdfee; background: linear-gradient(145deg,#e4f3fe,#f8fbfe); box-shadow: 0 14px 32px #0c1b3410; }
.croku-club .record-row { border-color: #cbdfee; }
.croku-club .role-badge { background: #dceffc; }
.croku-club input,.croku-club select { border-color: #cbdced; }
.croku-club .icon-button { background: #e4f3fe; }
.croku-club .club-calendar-day.is-outside { background: #f7fbff; color: #8094a9; }
.croku-club .club-calendar-day.has-sessions { background: #f3f9fe; }
.croku-club .club-calendar-session small { color: #d4e8f9; }
.croku-club .club-calendar-session.is-confirmed {
  border-color: #29a3e3;
  background: linear-gradient(135deg,#0d64a7,#0878b8);
  color: white;
  box-shadow: 0 5px 14px #0c5e9c35;
}
.croku-club .club-calendar-session.is-confirmed small { color: #eaf6ff; }
.croku-club .club-calendar-session.is-past { border-color: #d2e2ef; background: #edf3f8; color: #60738c; }
.croku-club .club-calendar-session.is-past small { color: #60738c; }
.croku-club .next-training-card {
  background:
    linear-gradient(132deg,transparent 0 63%,#0da7ee 63% 69%,transparent 69% 83%,#19aff3 83% 89%,transparent 89%),
    linear-gradient(110deg,#0c1b34 0%,#155184 66%,#078bdd 100%);
  box-shadow: 0 18px 38px #0c1b3420;
}
.croku-club .next-training-card .eyebrow { color: #8fd5f6; }
.croku-club .next-training-card p { color: #e4f3fe; }
.croku-club .next-training-meta span { color: #d2e6fa; }
.croku-club .next-training-card .button.is-confirmed {
  border-color: #e7f2fb;
  background: #e7f2fb;
  color: #0c1b34;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
}
.croku-club .next-training-card .button.is-confirmed:hover { border-color: white; background: white; }
.croku-club .next-training-card .button:disabled { opacity: 1; border-color: #345a82; background: #345a82; color: #f2f9ff; }
.croku-club .overview-partner-lane,
.croku-club .catalog-product,
.croku-club #create-product-form,
.croku-club .issued-pass-card,
.croku-club #invite-pass-fields,
.croku-club .admin-invoice-row { background: #f4f9fd; }
.croku-club .choice-card:has(input:checked),
.croku-club .pass-choice:has(input:checked) { background: #e4f3fe; }
.croku-club .overview-plan-edit:hover,
.croku-club .admin-subnav button:hover,
.croku-club .admin-subnav a:hover,
.croku-club .admin-subnav button.active { border-color: #bad7ed; background: #dceffc; }
.croku-club .owned-pass-card { box-shadow: 0 16px 35px #0c1b3412; }
.croku-club .owned-pass-card.is-active,
.croku-club .purchase-product-choice.is-selected,
.croku-club .purchase-product-choice:has(input:checked) {
  border-color: #134a84;
  background: linear-gradient(145deg,#0c1b34,#134a84);
  color: white;
  box-shadow: 0 18px 38px #0c1b3426;
}
.croku-club .owned-pass-card.is-upcoming,
.croku-club .purchase-product-choice { background: linear-gradient(145deg,#fff,#f0f8fe); }
.croku-club .owned-pass-card.is-expired { background: #ecf3f8; }
.croku-club .owned-pass-card.is-expired .owned-pass-status { background: #dce7f0; }
.croku-club .owned-pass-status,
.croku-club .purchase-product-badge { background: #3e89cd; color: #0c1b34; }
.croku-club .owned-pass-card.is-upcoming .owned-pass-status { background: #dceffc; }
.croku-club .purchase-product-choice:hover { box-shadow: 0 16px 34px #0c1b3416; }
.croku-club .purchase-product-choice.is-selected small,
.croku-club .purchase-product-choice:has(input:checked) small { color: #d4e8f9; }
.croku-club .training-card { --training-accent: #3e89cd; }
.croku-club .training-card.is-available { --training-accent: #3e89cd; }
.croku-club .training-card:not(.is-confirmed):not(.is-waitlisted):not(.is-full) { border-color: #d9e6f2; background: linear-gradient(135deg,#fff,#f4f9fd); }
.croku-club .training-card.is-full { --training-accent: #60738c; border-color: #d9e6f2; background: linear-gradient(135deg,#fff,#f1f5f9); }
.croku-club .training-card-date { border-color: #d9e6f2; background: #f1f7fc; }
.croku-club .training-card-status { background: #dceffc; }
.croku-club .training-card-details span+span:before { color: #8094a9; }
.croku-club .managed-training-card .eyebrow { color: #176dae; }
.croku-club .managed-training-card .training-card-main p { color: #60738c; }
.croku-club .trainer-mode-buttons button[aria-pressed=true] { border-color: #9bcbe9; background: #dceffc; color: #0c1b34; }
.croku-club .training-card:hover { border-color: #8bc0e8; box-shadow: 0 17px 36px #0c1b3415; }
.croku-club input:focus,.croku-club button:focus-visible,.croku-club a:focus-visible { outline-color: #3e89cd; }

/* The existing training-plan sidebar remains visible, with the approved header. */
body.croku-workout-page.shared-workout { background: #f4f9fd; }
.croku-workout-page .shared-workout-shell { color: #0c1b34; }
.croku-workout-page .shared-workout-topbar,
.croku-workout-page .shared-workout-shell.has-staff-sidebar > .shared-workout-topbar {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  padding: 16px 24px;
  border-radius: 22px;
  background: linear-gradient(115deg,#0c1b34 0%,#134a84 68%,#058fe6 100%);
}
.croku-workout-page .shared-workout-topbar .shared-workout-back {
  width: 180px;
  height: 72px;
  margin: 0;
  background: url('/assets/croku-logo.png') left center / contain no-repeat;
  font-size: 0;
}
.croku-workout-page .shared-workout-switchers,
.croku-workout-page .shared-workout-shell.has-staff-sidebar > .shared-workout-topbar .shared-workout-switchers {
  grid-column: 2;
  justify-self: end;
}
.croku-workout-page .shared-workout-header { background: #0c1b34; }
.croku-workout-page .shared-workout-shell .shared-workout-eyebrow { color: #3e89cd; }
.croku-workout-page .shared-workout-shell #shared-meta { color: #d4e8f9; }
.croku-workout-page .shared-workout-sidebar,
.croku-workout-page .shared-editor-nav,
.croku-workout-page .shared-plan-card,
.croku-workout-page .shared-plan-overview { border-color: #d9e6f2; }
.croku-workout-page .shared-workout-sidebar a,
.croku-workout-page .shared-workout-sidebar button,
.croku-workout-page .shared-workout-sidebar span { color: #0c1b34; }
.croku-workout-page .shared-workout-sidebar a:hover,
.croku-workout-page .shared-workout-sidebar button:hover,
.croku-workout-page .shared-workout-sidebar .active,
.croku-workout-page .shared-editor-nav a:hover { background: #dceffc; color: #0c1b34; }
.croku-workout-page .shared-sidebar-label,
.croku-workout-page .shared-plan-card-heading span { color: #60738c; }
.croku-workout-page .shared-editor-nav a,
.croku-workout-page .shared-workout-back { color: #0c1b34; }
.croku-workout-page .shared-partner-lane,
.croku-workout-page .shared-cardio-stations > div { border-color: #d9e6f2; background: #f4f9fd; }
.croku-workout-page .shared-plan-card li { border-color: #d9e6f2; }
.croku-workout-page .shared-plan-card li small { color: #60738c; }
.croku-workout-page .plan-copy-dialog { border-color: #d9e6f2; color: #0c1b34; }

/* The club selector and owner tools are part of the internal CROKU flow. */
.croku-platform header { background: linear-gradient(115deg,#0c1b34,#134a84 68%,#058fe6); }
.croku-platform .croku-platform-brand { display: inline-flex; align-items: center; }
.croku-platform .croku-platform-brand img { display: block; width: 150px; height: auto; }
.croku-platform .card,.croku-platform .club-sidebar { border-color: #d9e6f2; box-shadow: 0 9px 32px #0c1b340b; }
.croku-platform .eyebrow,.croku-platform .muted,.croku-platform .calendar-weekdays { color: #60738c; }
.croku-platform a { color: #134a84; }
.croku-platform header a,.croku-platform #global-context a,.croku-platform #global-context button { color: white; }
.croku-platform #global-context a[aria-current=page],
.croku-platform #global-context button[aria-pressed=true] { border-color: #3e89cd; background: #3e89cd; color: #0c1b34; }
.croku-platform button,.croku-platform .button,.croku-platform .session .edit-plan-link { background: #0c1b34; color: white; }
.croku-platform .club-sidebar nav a:hover,.croku-platform .club-sidebar nav .active,
.croku-platform .calendar-actions button,.croku-platform .trainer-choices button,.croku-platform .copy-option { background: #dceffc; color: #0c1b34; }
.croku-platform .calendar-date { border-color: #d9e6f2; background: #f4f9fd; color: #0c1b34; }
.croku-platform .calendar-date.has-training,.croku-platform .session-date { border-color: #b9d8f0; background: #e4f3fe; color: #0c1b34; }
.croku-platform .calendar-date .calendar-entry { background: #dceffc; color: #0c1b34; }
.croku-platform .calendar-date.is-selected { outline-color: #3e89cd; }
.croku-platform .session-accent { background: #3e89cd; }

@media(max-width:1100px) {
  .croku-club .club-overview { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:850px) {
  .croku-club .club-header { width: calc(100% - 32px); margin-top: 16px; padding: 16px; }
  .croku-club .club-brand-image { width: 170px; }
  .croku-club .club-header .account-name { min-height: 38px; }
  .croku-club .club-main { display: block; width: calc(100% - 32px); padding: 16px 0 32px; }
  .croku-club .club-main > .tabs { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 12px; }
  .croku-club .club-main > .tabs::before { flex-basis: 100%; padding: 2px 6px; }
  .croku-club .club-main > .tabs button { width: auto; min-height: 42px; }
  .croku-club .club-overview { margin-top: 0; }
  .croku-workout-page .shared-workout-topbar,
  .croku-workout-page .shared-workout-shell.has-staff-sidebar > .shared-workout-topbar { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .croku-workout-page .shared-workout-switchers,
  .croku-workout-page .shared-workout-shell.has-staff-sidebar > .shared-workout-topbar .shared-workout-switchers { grid-column: 1; justify-self: start; }
}
@media(max-width:700px) {
  .croku-club .club-header #account,
  .croku-club .club-header .account-summary,
  .croku-club .club-header .club-switcher,
  .croku-club .club-header .role-switcher { width: 100%; min-width: 0; }
  .croku-club .club-header .club-switcher,
  .croku-club .club-header .role-switcher { justify-content: flex-end; }
}

body.croku-club .next-training-plan .overview-plan-section-title:has(.overview-partner-mode) .overview-plan-section-timing { color: #3e89cd; }

.croku-club .push-settings { margin-bottom: 1.35rem; border-color: #cbdfee; background: #f4f9fd; }
.croku-club .push-settings .section-title { margin: 0; align-items: center; }
.croku-club .push-settings h3 { margin: 0; }
.croku-club .push-settings p { margin: .25rem 0 0; }
.croku-club .push-settings #push-status { margin-top: .7rem; }
@media (max-width: 700px) { .croku-club .push-settings #push-toggle { width: 100%; } }