/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ============================================================
   Scrollbars — follow the app theme (light + dark)
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb, #cbd5e1) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb, #cbd5e1);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover, #94a3b8);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   iOS SAFE AREA (notched iPhones / landscape home indicator)
   The layout is full-bleed (viewport-fit=cover + black-translucent
   status bar): on notched iPhones the page draws under the status
   bar, so every top-anchored surface must clear it with
   env(safe-area-inset-top). Without this the status bar overlaps
   the controls at the top of the screen and blocks taps on them.
   The bottom inset is already handled by .mobile-nav and
   .date-picker-sheet. These unlayered rules win over Tailwind's
   layered utilities (same pattern as .date-picker-sheet).
   ============================================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Sticky top bars (app header, impersonation bar): their own
     background extends under the notch while the nav content stays
     below it. The padding lives on the bar itself, not on <body>,
     so a pinned bar (sticky top-0) does not slide under the status
     bar on scroll. */
  body > header,
  body > div.sticky.top-0 {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* The impersonation bar sits above the header and owns the top
     inset; the header below it must not add a second one. */
  body > div.sticky.top-0 ~ header {
    padding-top: 0;
  }

  /* Pages whose header is hidden on phones (athlete/coach mobile):
     <main> is the topmost surface, so it must clear the notch.
     calc keeps the design's 1.5rem top padding on top of the inset;
     env() is 0 on desktop, so this matches pt-6 there. */
  body:has(> header.hidden) main {
    padding-top: calc(env(safe-area-inset-top) + 1.5rem);
  }

  /* When the impersonation bar is present it already covers the
     status bar area, so main keeps the design's normal padding. */
  body:has(> div.sticky.top-0) main {
    padding-top: 1.5rem;
  }

  /* Landscape: the notch and home indicator move to the sides. */
  main {
    padding-left: calc(env(safe-area-inset-left) + 0.75rem);
    padding-right: calc(env(safe-area-inset-right) + 0.75rem);
  }

  /* Full-screen modals (fixed inset-0): push their content below
     the status bar. Centered cards just center within the padded
     area; top-anchored cards (items-start) clear the notch so the
     modal header buttons stay tappable. */
  .fixed.inset-0 {
    padding-top: env(safe-area-inset-top);
  }

  /* Toasts are pinned to the top-right corner — keep them clear of
     the status bar so their action buttons stay tappable. */
  #toast-container {
    top: calc(env(safe-area-inset-top) + 1rem);
  }

  /* Section tab bar on activity pages (sticky, flush to the top on
     phones): extend its background under the notch while the tabs
     stay below it. On sm+ env() is 0, so this adds nothing there. */
  .calendar-tabs {
    padding-top: env(safe-area-inset-top);
  }
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.payments-table th,
.payments-table td {
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border-light, #e2e8f0);
    vertical-align: middle;
}

.payments-table tbody tr:nth-child(odd) {
    background: var(--color-panel-muted, #f8fafc);
}

.payments-table tbody tr:hover {
    background: var(--color-brand-light, #eef2ff);
}

.actions-cell {
    min-width: 12rem;
}

.payment-actions,
.action-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.35rem;
    justify-content: center;
    flex-wrap: wrap;
}

.payment-actions > *,
.action-buttons > * {
    width: auto;
}

.payment-actions .payment-action,
.action-buttons .payment-action,
.payment-actions form > input[type="submit"],
.action-buttons form > input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.1;
    border-radius: 0.25rem;
    border: 1px solid var(--color-border-light, #e2e8f0);
    background: var(--color-panel-muted, #f8fafc);
    color: var(--color-txt-main, #0f172a);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

.payment-actions .payment-action:hover,
.action-buttons .payment-action:hover,
.payment-actions form > input[type="submit"]:hover,
.action-buttons form > input[type="submit"]:hover {
    background: var(--color-border-light, #e2e8f0);
}

.payment-actions form,
.action-buttons form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.payment-actions button,
.payment-actions input[type="submit"],
.action-buttons button,
.action-buttons input[type="submit"] {
    background: transparent;
    border: none;
}

.payments-summary {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.athlete-nav {
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}

.athlete-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.athlete-nav > ul > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    min-width: 10rem;
}

.athlete-nav li {
    margin: 0;
}

.athlete-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-btn, 0.5rem);
    border: 1px solid transparent;
    background: var(--color-panel-muted, #f8fafc);
    color: var(--color-txt-main, #0f172a);
    text-decoration: none;
    font-size: 0.9rem;
}

.athlete-nav__link:hover,
.athlete-nav li.active > .athlete-nav__link {
    background: var(--color-brand-light, #eef2ff);
    border-color: var(--color-border-light, #e2e8f0);
}

.athlete-nav__sublist {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.35rem 0 0 0;
    padding: 0 0 0 1.25rem;
    list-style: none;
}

.athlete-nav__details {
    border: 1px solid transparent;
    border-radius: var(--radius-form, 0.75rem);
    padding: 0.35rem 0.4rem;
    background: var(--color-panel-muted, #f8fafc);
}

.athlete-nav__summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-btn, 0.5rem);
    border: 1px solid transparent;
    background: var(--color-panel-muted, #f8fafc);
    color: var(--color-txt-main, #0f172a);
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
}

.athlete-nav__details[open] .athlete-nav__summary,
.athlete-nav__details.active .athlete-nav__summary {
    background: var(--color-brand-light, #eef2ff);
    border-color: var(--color-border-light, #e2e8f0);
}

.athlete-nav__summary::-webkit-details-marker {
    display: none;
}

.athlete-nav__summary::after {
    content: "▾";
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.athlete-nav__sublist li {
    margin: 0;
}

.athlete-nav__link--sub {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
}

.athlete-nav__sublist li.active .athlete-nav__link--sub,
.athlete-nav__sublist li.active .athlete-nav__link--sub {
    background: var(--color-brand-light, #eef2ff);
    border-color: var(--color-border-focus, #6366f1);
}

/* ===== CRM Styles ===== */

.crm-table th {
    background: var(--color-panel-muted, #f8fafc);
    border-bottom: 2px solid var(--color-border-light, #e2e8f0);
}

.overdue-row {
    background-color: rgba(239, 68, 68, 0.04) !important;
}

.overdue-row:hover {
    background-color: rgba(239, 68, 68, 0.08) !important;
}

.overdue-row td:first-child {
    border-left: 3px solid #ef4444;
}

.overdue-row td:last-child .text-red-600 {
    color: #dc2626;
}

.overdue-row .rounded-full {
    outline: 2px solid #fff;
    outline-offset: -1px;
}

.action-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border-light, #e2e8f0);
    background: var(--color-panel-main, #ffffff);
    color: var(--color-txt-main, #0f172a);
    text-decoration: none;
    font-size: 0.8rem;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.action-icon-btn:hover {
    background: var(--color-panel-muted, #f8fafc);
    border-color: var(--color-brand, #4f46e5);
}

.status-select {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    border-radius: 0.375rem;
}

/* ===== Calendar Drag-and-Drop ===== */

/* Make task elements look draggable */
[data-task-id] {
    cursor: grab;
    user-select: none;
}

[data-task-id]:active {
    cursor: grabbing;
}

/* Drop zone highlighting */
.drop-target {
    background-color: #eef2ff !important;
    outline: 2px dashed #6366f1;
    outline-offset: -2px;
}

/* ===== Workout Comments ===== */

/* Modal wrapper — contains form card + comments panel */
.wkt-modal-wrapper {
  position: relative;
  border-radius: 0.75rem;
}

/* Workout form modal — the form card is the scroll container. Keep pan
   gestures inside it on iOS instead of chaining to the page behind (the body
   scroll is locked while the modal is open, see activities-workout-form). */
.wkt-modal-wrapper > .bg-panel-main {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Comments panel — overlays the right side of the modal card */
.wkt-comments-panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-panel-main, #ffffff);
  border-left: 1px solid var(--color-border-light, #e2e8f0);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
}

.wkt-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
  flex-shrink: 0;
}

.wkt-comments-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.wkt-comments-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-txt-muted, #64748b);
}

.wkt-comments-close:hover {
  background: var(--color-panel-muted, #f8fafc);
  color: var(--color-txt-main, #0f172a);
}

.wkt-comments-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wkt-comments-loading,
.wkt-comments-empty,
.wkt-comments-error {
  text-align: center;
  color: var(--color-txt-muted, #64748b);
  font-size: 0.85rem;
  padding: 24px 0;
}

.wkt-comments-input-area {
  border-top: 1px solid var(--color-border-light, #e2e8f0);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.wkt-comments-input-area textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.875rem;
  line-height: 1.4;
  background: var(--color-panel-muted, #f8fafc);
  color: var(--color-txt-main, #0f172a);
  box-sizing: border-box;
}

.wkt-comments-input-area textarea:focus {
  outline: none;
  border-color: var(--color-border-focus, #6366f1);
  box-shadow: 0 0 0 2px var(--color-brand-light, #eef2ff);
}

.wkt-comments-submit {
  align-self: flex-end;
  padding: 6px 18px;
  background: var(--color-brand, #e6c619);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}

.wkt-comments-submit:hover {
  background: var(--color-brand-hover, #d4b515);
}

.wkt-comments-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Comments modal (opened from calendar cards) — reuses the form panel markup */
.wkt-comments-modal {
  width: 440px;
  max-width: calc(100vw - 32px);
}
.wkt-comments-modal-panel {
  width: 100%;
  height: min(85vh, 640px);
  border-left: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* the inner list scrolls, not the panel */
}

/* Comment sections (Planned / Performed): vertical rhythm between messages */
.comment-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Comment item — wrapper: author name sits outside the bubble */
.comment {
  max-width: 85%;
}

/* Chat alignment: own messages on the right (name on the right), others on the left.
   Neutral palette — own bubbles slightly elevated, others plain. */
.comment--own {
  align-self: flex-end;
}
.comment--other {
  align-self: flex-start;
}

/* Author name — outside the bubble */
.comment-meta {
  margin-bottom: 2px;
}
.comment--own .comment-meta {
  text-align: right;
}

.comment-author {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-txt-main, #0f172a);
}

/* Message bubble */
.comment-bubble {
  position: relative;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-panel-muted, #f8fafc);
  border: 1px solid var(--color-border-light, #e2e8f0);
}
.comment--own .comment-bubble {
  background: var(--color-panel-elevated, #ffffff);
  border-color: var(--color-border-strong, #cbd5e1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Own bubbles: reserve room for the kebab button (top-right corner) so it never covers the text */
.comment--own .comment-body {
  padding-right: 20px;
}

.comment-time {
  font-size: 0.6875rem;
  color: var(--color-txt-muted, #64748b);
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2px;
}

.comment-body {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-txt-main, #0f172a);
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.edited-badge {
  font-size: 0.6875rem;
  color: var(--color-txt-muted, #64748b);
  font-style: italic;
  margin-left: 4px;
}

/* Kebab menu (3 dots) — top-right of the bubble, visible on hover */
.comment-menu-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-txt-muted, #64748b);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.comment-bubble:hover .comment-menu-btn,
.comment-menu-btn:focus-visible {
  opacity: 1;
}
.comment-menu-btn:hover {
  background: var(--color-panel-muted, #f8fafc);
  color: var(--color-txt-main, #0f172a);
}

.comment-menu {
  position: absolute;
  top: 24px;
  right: 4px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 110px;
  padding: 4px;
  background: var(--color-panel-main, #ffffff);
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.comment-menu[hidden] {
  display: none;
}

.comment-menu-item {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: none;
  font-size: 0.8125rem;
  text-align: left;
  color: var(--color-txt-main, #0f172a);
  cursor: pointer;
}
.comment-menu-item:hover {
  background: var(--color-panel-muted, #f8fafc);
}
.comment-menu-item--danger {
  color: var(--color-txt-danger, #dc2626);
}

/* Source badge — shows if comment came from planned or performed */
.source-badge {
  font-size: 0.625rem;
  font-weight: 600;
  color: #ffffff;
  background: #6366f1;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Comment section separator */
.comment-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-txt-muted, #64748b);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
  margin-bottom: 8px;
}

/* Edit mode */
.comment-edit-textarea {
  width: 100%;
  max-width: 100%;
  resize: vertical;
  min-height: 56px;
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.875rem;
  background: var(--color-panel-main, #ffffff);
  color: var(--color-txt-main, #0f172a);
  box-sizing: border-box;
}

.comment-edit-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus, #6366f1);
}

.comment-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.comment-edit-actions button {
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border-light, #e2e8f0);
  background: var(--color-panel-main, #ffffff);
  color: var(--color-txt-main, #0f172a);
}

.comment-edit-actions button:first-child {
  background: var(--color-brand, #e6c619);
  color: #ffffff;
  border-color: var(--color-brand, #e6c619);
}

.comment-edit-actions button:first-child:hover {
  background: var(--color-brand-hover, #d4b515);
}

/* Comment indicator on workout card in calendar */
.wkt-comment-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.wkt-comment-count {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .wkt-comments-panel {
    width: 100vw;
    max-width: 100vw;
  }
  .wkt-comments-overlay {
    display: none;
  }
  .wkt-comments-modal {
    width: 100%;
  }
  .wkt-comments-modal-panel {
    width: 100%;
    max-width: 100%;
    height: 85vh;
  }
}

/* Date field in the planned workout form: hide the native picker indicator
   and center the displayed date (native pseudo-elements, theme agnostic) */
.wkt-date-field {
  text-align: center;
}
.wkt-date-field::-webkit-calendar-picker-indicator {
  display: none;
}
.wkt-date-field::-webkit-datetime-edit {
  text-align: center;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION
   Fixed icon bar for screens below `sm` (40rem / 640px).
   The Calendar tab rises above the bar inside a semicircular
   cutout; the cutout shows the page surface (--color-panel-main).
   ============================================================ */
.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--mobile-nav-bg, #0f172a);
  border-top: 1px solid var(--mobile-nav-border, rgba(255, 255, 255, 0.08));
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav__row {
  position: relative;
  display: flex;
  height: 60px;
}

.mobile-nav__link {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding-bottom: 7px;
  color: var(--mobile-nav-text, #94a3b8);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__link svg {
  width: 22px;
  height: 22px;
}

/* Keep long labels (e.g. "Meeting Notes") on one line in the bar */
.mobile-nav__link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav__link.is-active {
  color: var(--mobile-nav-active, #e6c619);
}

.mobile-nav__link:focus-visible {
  outline: 2px solid var(--mobile-nav-active, #e6c619);
  outline-offset: -2px;
}

/* Raised Calendar medallion — rests as a theme-adapted surface disc
   (light surface in light theme, elevated surface in dark theme) and
   lights up in the brand gold while the Calendar tab is active. */
.mobile-nav__medallion {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mobile-nav-medallion-bg, #ffffff);
  border: 1px solid var(--mobile-nav-medallion-border, rgba(15, 23, 42, 0.08));
  color: var(--mobile-nav-medallion-text, #64748b);
  box-shadow: var(--mobile-nav-medallion-shadow, 0 4px 14px rgba(15, 23, 42, 0.12));
}

.mobile-nav__medallion svg {
  width: 26px;
  height: 26px;
}

.mobile-nav__link.is-active .mobile-nav__medallion {
  background: var(--mobile-nav-medallion-active-bg, #e6c619);
  border-color: transparent;
  color: var(--mobile-nav-medallion-active-text, #0f172a);
  box-shadow: var(--mobile-nav-medallion-active-shadow, 0 6px 18px rgba(230, 198, 25, 0.35));
}

/* ============================================================
   COACH MOBILE BOTTOM NAVIGATION (below `sm` — 40rem)
   The active section's icon rises above the bar inside a gold
   disc — the same visual language as the athlete calendar
   medallion, but dynamic: the disc follows whichever tab is
   active instead of a fixed middle tab.
   ============================================================ */
.mobile-nav__disc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-nav__disc svg {
  width: 22px;
  height: 22px;
}

.mobile-nav__link.is-active .mobile-nav__disc {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mobile-nav-medallion-active-bg, #e6c619);
  border: 1px solid transparent;
  color: var(--mobile-nav-medallion-active-text, #0f172a);
  box-shadow: var(--mobile-nav-medallion-active-shadow, 0 6px 18px rgba(230, 198, 25, 0.35));
}

.mobile-nav__link.is-active .mobile-nav__disc svg {
  width: 24px;
  height: 24px;
}

/* Back to the athlete list — a distinct control at the end of the bar */
.mobile-nav__back {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  border-left: 1px solid var(--mobile-nav-border, rgba(255, 255, 255, 0.08));
  color: var(--mobile-nav-text, #94a3b8);
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-nav__back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav__back:hover,
.mobile-nav__back:focus-visible {
  color: var(--mobile-nav-active, #e6c619);
}

.mobile-nav__back:focus-visible {
  outline: 2px solid var(--mobile-nav-active, #e6c619);
  outline-offset: -2px;
}

/* ============================================================
   MOBILE CARD BADGES (goal status, race priority, meta)
   Tinted translucent backgrounds work on both light and dark
   surfaces without per-theme overrides.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--pending,
.badge--soon,
.badge--new {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.badge--in_progress,
.badge--priority-b {
  background: rgba(59, 130, 246, 0.14);
  color: #2563eb;
}

.badge--achieved,
.badge--completed,
.badge--paid {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.badge--cancelled,
.badge--canceled,
.badge--overdue,
.badge--priority-a {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.badge--permanent {
  background: rgba(230, 198, 25, 0.16);
  color: var(--color-txt-main, #0f172a);
}

.badge--neutral,
.badge--priority-c {
  background: rgba(148, 163, 184, 0.16);
  color: var(--color-txt-muted, #64748b);
}

/* Sport icon chip on personal record cards */
.sport-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.sport-icon svg {
  width: 22px;
  height: 22px;
}

.sport-icon--running {
  background: rgba(230, 198, 25, 0.16);
  color: var(--color-brand, #e6c619);
}

.sport-icon--swimming {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6;
}

.sport-icon--cycling {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
}

.sport-icon--triathlon {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
}

/* Dark theme: brighten text tints on dark surfaces */
[data-theme="dark"] .badge--pending,
[data-theme="dark"] .badge--soon,
[data-theme="dark"] .badge--new {
  color: #fbbf24;
}

[data-theme="dark"] .badge--in_progress,
[data-theme="dark"] .badge--priority-b {
  color: #60a5fa;
}

[data-theme="dark"] .badge--achieved,
[data-theme="dark"] .badge--completed,
[data-theme="dark"] .badge--paid {
  color: #34d399;
}

[data-theme="dark"] .badge--cancelled,
[data-theme="dark"] .badge--canceled,
[data-theme="dark"] .badge--overdue,
[data-theme="dark"] .badge--priority-a {
  color: #f87171;
}

[data-theme="dark"] .badge--permanent {
  color: var(--color-brand, #f5d742);
}

[data-theme="dark"] .sport-icon--swimming {
  color: #60a5fa;
}

[data-theme="dark"] .sport-icon--cycling {
  color: #34d399;
}

[data-theme="dark"] .sport-icon--triathlon {
  color: #a78bfa;
}

/* Mark-complete button on mobile task cards — green tint, theme-aware */
.complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-btn, 0.5rem);
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease;
}
.complete-btn:hover {
  background: rgba(16, 185, 129, 0.2);
}
[data-theme="dark"] .complete-btn {
  color: #34d399;
}

/* Mobile task card — the whole card opens the task modal via a stretched link.
   The link is an invisible overlay; action buttons lift above it (z-10) and
   stay interactive (pointer-events-auto on the buttons). */
.task-card {
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.task-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.task-card__link:focus-visible {
  outline: 2px solid var(--color-border-focus, #e6c619);
  outline-offset: -2px;
}

.task-card:has(.task-card__link:hover) {
  border-color: var(--color-border-strong, #cbd5e1);
  box-shadow: var(--shadow-elevated, 0 4px 16px rgba(15, 23, 42, 0.08));
}

/* ============================================================
   MODALS ON PHONES
   Below `sm` (40rem / 640px) modal cards open at the full device
   width instead of a centered dialog. All modals share the
   `.fixed.inset-0 > .bg-panel-main` card structure; the overlay's
   side padding and the card's side margins are removed so the card
   spans the whole mobile width edge to edge.
   ============================================================ */
@media (max-width: 639px) {
  .fixed.inset-0:has(> .bg-panel-main) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fixed.inset-0 > .bg-panel-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Workout form modal — its card nests inside .wkt-modal-wrapper.
     `>` scopes this to the card itself: the duration/distance/RPE inputs
     inside the card reuse the `bg-panel-main` class for their background,
     and a descendant selector would stamp width:100% !important and the
     card's side padding onto them (clipping the duration digits on phones). */
  .wkt-modal-wrapper > .bg-panel-main {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   ADMIN PANEL — indigo accent (--color-accent) marks admin-only
   actions, distinct from the gold brand used for business UI.
   ============================================================ */
.admin-nav-active {
  background-color: var(--color-accent);
  color: #ffffff;
}

.admin-nav-active:hover {
  background-color: var(--color-accent-hover);
  color: #ffffff;
}

.admin-accent-btn {
  background-color: var(--color-accent);
  color: #ffffff;
}

.admin-accent-btn:hover {
  background-color: var(--color-accent-hover);
  color: #ffffff;
}

/* ============================================================
   Date picker: mobile bottom sheet
   The workout-date-picker controller adds .date-picker-sheet on
   phones (< 640px) and clears the popover's inline positioning.
   The sheet is pinned to the viewport (bottom-anchored, height
   capped), so the calendar can never overflow the screen. These
   unlayered rules win over Tailwind's layered utilities that
   style the popup (absolute/right-0/top-full/w-64/z-50).
   ============================================================ */
.date-picker-sheet {
  position: fixed;
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0.75rem 0.75rem 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 10000;
}

/* Date picker: month dropdown inside the calendar header. It opens upward
   (positioned inline by the workout-date-picker controller), so the month
   list never overflows the screen like the native <select> did. */
.date-picker-month-list {
  z-index: 10001;
  min-width: 9rem;
  max-height: 280px;
  overflow-y: auto;
}

/* ============================================================
   Guest header controls — theme + language. Styled to match the
   public coach page (.cp-icon-btn / .cp-lang__btn) so the landing,
   the sign-in page and the coach page share one control language.
   ============================================================ */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--color-txt-muted);
  background: var(--color-panel-muted);
  border: 1px solid var(--color-border-light);
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-icon-btn:hover {
  color: var(--color-txt-main);
  background: var(--color-border-light);
}

.nav-icon-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Sun shows in dark theme, moon in light — same behaviour as the coach page. */
.nav-theme .theme-sun {
  display: none;
  color: var(--color-brand);
}

[data-theme="dark"] .nav-theme .theme-sun {
  display: inline-flex;
}

[data-theme="dark"] .nav-theme .theme-moon {
  display: none;
}

.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-txt-muted);
  background: var(--color-panel-muted);
  border: 1px solid var(--color-border-light);
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-lang-btn:hover {
  color: var(--color-txt-main);
  border-color: var(--color-border-strong);
}