/* ============================================================
   Maglen Training Center – responsive hardening
   Loaded after style.css and features.css.
   ============================================================ */

:root {
  --mobile-nav-h: 68px;
  --page-pad: clamp(14px, 2.4vw, 32px);
}

html {
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

input,
select,
textarea {
  font-size: 16px;
}

main,
.page-view,
.page-view > *,
.cd-panel,
.cd-tab-content,
.cd-tab-panel,
.calendar-panel,
.chat-main-panel,
.staff-main-panel {
  min-width: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  transform: translateY(-150%);
  background: #fff;
  color: var(--topbar);
  padding: 10px 14px;
  border-radius: 9px;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); }

/* Prevent long API data, names and links from forcing horizontal overflow. */
.client-card,
.trainer-card,
.group-session-card,
.gym-section-card,
.credentials-card,
.diag-card,
.assigned-program-card,
.program-library-card,
.operations-item,
.notification-item,
.chat-message-bubble,
.cd-info-row,
.cd-prehlad-notes-body,
.settings-helper,
.protocol-library-lock {
  overflow-wrap: anywhere;
}

/* Desktop and compact laptop navigation. */
@media (max-width: 1320px) and (min-width: 1101px) {
  .topnav-logo { width: 205px; padding-inline: 12px; }
  .topnav-link { padding-inline: 9px; }
  .topnav-admin { padding-inline: 12px; gap: 8px; }
  .topnav-admin-meta { max-width: 110px; }
  #currentUserLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .topnav-logo { width: 62px; justify-content: center; padding: 0; }
  .topnav-logo .logo-text { display: none; }
  .topnav-link { padding-inline: 8px; }
  .topnav-admin-meta { display: none; }
  .gym-stats-grid--expanded { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet and mobile shell. */
@media (max-width: 1100px) {
  :root { --nav-h: 56px; }

  html,
  body { min-height: 100%; }

  body {
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  }

  .topnav {
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .topnav-logo {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    border-right: 0;
    padding: 0 10px;
    gap: 9px;
  }
  .topnav-logo .logo-icon { width: 38px; height: 38px; }
  .topnav-logo .logo-text {
    display: block;
    max-width: min(48vw, 250px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
  }

  .topnav-title,
  .topnav-links,
  .topnav-admin-meta { display: none !important; }

  .topnav-admin {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 0 9px;
    border-left: 0;
    gap: 6px;
  }
  .topnav-notification-btn,
  .admin-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
    padding: 5px 4px env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #dce5ee;
    box-shadow: 0 -8px 28px rgba(25,50,75,.10);
    z-index: 5000;
  }
  .mobile-bottom-nav::-webkit-scrollbar { display: none; }
  .mobile-bottom-nav button {
    flex: 1 0 72px;
    min-width: 64px;
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #60778e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    font-size: .61rem;
    font-weight: 700;
    line-height: 1.05;
  }
  .mobile-bottom-nav button.active,
  .mobile-bottom-nav button:active {
    color: var(--blue);
    background: rgba(47,127,191,.09);
  }
  .mobile-bottom-nav i { font-size: 1.08rem; }
  .mobile-bottom-nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .notification-panel {
    position: fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top) + 6px);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: min(68dvh, 520px);
  }
  .notification-list { max-height: calc(min(68dvh, 520px) - 52px); }

  .gym-overview-page,
  .list-page {
    margin-top: calc(var(--nav-h) + env(safe-area-inset-top));
    min-height: calc(100dvh - var(--nav-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px var(--page-pad) 24px;
    overflow: visible;
  }

  #pageKalendar.active {
    margin-top: calc(var(--nav-h) + env(safe-area-inset-top));
    height: calc(100dvh - var(--nav-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 480px;
  }
  #pageKalendar .app-body {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .calendar-info-sidebar {
    display: none;
  }

  .calendar-panel--main {
    border: 0;
    min-height: 0;
  }

  .cal-header {
    padding: 9px 10px 8px;
    gap: 7px;
    flex-wrap: wrap;
  }
  .cal-header-left {
    flex: 1 1 auto;
    gap: 6px;
  }
  .cal-header-right { flex: 0 1 auto; }
  .cal-title { display: none; }
  .cal-nav,
  .cal-today-btn,
  .cal-add-btn {
    min-height: 40px;
  }
  .cal-nav { min-width: 40px; padding-inline: 10px; }
  .cal-add-btn { padding-inline: 11px; }
  .calendar-scope-badge { display: none; }

  .week-strip {
    padding-left: 48px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .day-col { min-width: 0; padding: 7px 1px 6px; }
  .day-label { font-size: .56rem; }
  .day-num { width: 29px; height: 29px; font-size: .88rem; margin-top: 2px; }

  .time-grid-wrap {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .time-labels { width: 48px; }
  .time-label { padding-right: 6px; }
  .time-grid {
    min-width: 0 !important;
    width: calc(100vw - 48px);
  }
  .time-grid::before {
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 63px, var(--border) 63px, var(--border) 64px);
  }
  .session-block {
    padding: 6px 8px;
    border-radius: 8px;
  }
  .session-block .session-time { font-size: .64rem; }
  .session-block span { font-size: .72rem; }
  .session-block small { font-size: .61rem; }

  .gym-page-header,
  .list-page-header {
    align-items: stretch;
    gap: 14px;
    margin-bottom: 18px;
  }
  .gym-page-title,
  .list-page-title { font-size: clamp(1.22rem, 5vw, 1.5rem); }
  .gym-page-date { align-self: flex-start; }
  .list-page-actions { width: 100%; }
  .list-search-wrap { flex: 1 1 220px; width: 100%; }
  .list-search-input { min-width: 0; width: 100%; }
  .btn-add-primary,
  .list-add-btn { min-height: 42px; justify-content: center; }

  .gym-stats-grid--expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gym-overview-two-col,
  .operations-grid { grid-template-columns: 1fr; }
  .gym-stat-card { min-width: 0; }
  .today-session-item { grid-template-columns: 72px minmax(0, 1fr); }
  .today-session-item .attendance-pill { grid-column: 2; justify-self: start; }

  .client-cards-grid,
  .trainer-cards-grid,
  .group-sessions-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  .cd-body {
    margin-top: calc(var(--nav-h) + env(safe-area-inset-top));
    height: auto;
    min-height: calc(100dvh - var(--nav-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: visible;
  }
  .cd-sidebar {
    position: static !important;
    overflow: visible;
    padding: 16px var(--page-pad);
  }
  .cd-avatar-wrap {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "avatar name" "avatar plan";
    column-gap: 12px;
    align-items: center;
    text-align: left;
    margin-bottom: 14px;
  }
  .cd-avatar { grid-area: avatar; width: 58px; height: 58px; margin: 0; }
  .cd-name { grid-area: name; font-size: 1.16rem; margin: 0; }
  .cd-plan-badge { grid-area: plan; justify-self: start; margin-top: 3px; }
  .cd-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 12px;
  }
  .cd-info-row { min-width: 0; }
  .cd-body-stats { margin-bottom: 10px; }
  .cd-sidebar-actions {
    margin-top: 0;
    padding-top: 4px;
    flex-direction: row;
  }
  .cd-sidebar-actions > * { flex: 1 1 0; }
  .cd-panel { min-height: 0; overflow: visible; }
  .cd-tab-header {
    position: sticky;
    top: calc(var(--nav-h) + env(safe-area-inset-top));
    z-index: 20;
  }
  .cd-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cd-tabs::-webkit-scrollbar { display: none; }
  .cd-tabs .nav-link { min-height: 44px; display: flex; align-items: center; }
  .cd-tab-content { overflow: visible; }
  .cd-prehlad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px var(--page-pad) 0; }
  .cd-prehlad-notes-card { margin: 12px var(--page-pad); }
  .diag-grid { padding: 12px var(--page-pad); }

  .assigned-program-card,
  .program-library-card {
    flex-direction: column;
  }
  .assigned-program-actions,
  .program-library-actions,
  .assigned-program-card > div:last-child,
  .program-library-card > div:last-child {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
  }

  .chat-shell,
  .staff-chat-shell {
    grid-template-columns: 1fr;
    min-height: min(640px, calc(100dvh - 180px));
  }
  .chat-thread-list { max-height: 180px; }
  .staff-main-panel .chat-messages,
  .chat-messages { min-height: 260px; max-height: none; }

  .modal-dialog {
    width: auto;
    max-width: none;
    margin: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom));
  }
  .modal-dialog-centered { min-height: calc(100% - 1rem); }
  .modal-content { max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .modal-body { overflow-y: auto; }
  .modal-header,
  .modal-footer { flex-shrink: 0; }
  .modal-footer { gap: 8px; }
  .modal-footer > * { margin: 0; }

  .credentials-table,
  .trn-table { white-space: nowrap; }
  .credentials-table-wrap,
  .trn-table-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .toast-container,
  body > .position-fixed.bottom-0.end-0 {
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    padding: 0 !important;
  }
}

@media (max-width: 620px) {
  input, select, textarea { font-size: 16px !important; }
  .topnav-logo .logo-text { max-width: 42vw; }

  .gym-overview-page,
  .list-page { padding-top: 16px; }

  .gym-page-header { flex-direction: column; }
  .list-page-header { flex-direction: column; }
  .list-page-actions { flex-direction: column; align-items: stretch; }
  .btn-add-primary,
  .list-add-btn { width: 100%; }

  .gym-stats-grid--expanded { gap: 10px; }
  .gym-stat-card { padding: 13px 12px; gap: 10px; }
  .gym-stat-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 1.12rem; }
  .gym-stat-value { font-size: 1.5rem; }
  .gym-stat-label { font-size: .67rem; }
  .gym-section-header { padding: 12px 13px; }
  .gym-quick-actions { display: grid; grid-template-columns: 1fr; padding: 13px; }
  .gym-quick-btn { justify-content: center; min-height: 44px; }

  .trainer-load-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .trainer-load-name { min-width: 0; }
  .trainer-load-bar-wrap { grid-column: 2 / -1; width: 100%; }
  .trainer-load-count { min-width: 0; }

  .cal-header-right { width: 100%; }
  .cal-add-btn { width: 100%; justify-content: center; }

  .cd-info-list { grid-template-columns: 1fr; }
  .cd-prehlad-grid { grid-template-columns: 1fr; }
  .cd-prehlad-stat { min-width: 0; }
  .cd-sidebar-actions { flex-direction: column; }

  .measurement-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-form-grid,
  .program-meta-grid,
  .health-grid,
  .parq-grid,
  .training-feedback-grid,
  .measurement-goals-grid,
  .nutrition-target-grid,
  .nutrition-days-grid { grid-template-columns: 1fr !important; }
  .measurement-wide,
  .training-feedback-wide,
  .measurement-goal-wide,
  .program-meta-grid label:last-child { grid-column: auto; }
  .parq-grid label { grid-template-columns: 1fr; }

  .program-builder-toolbar,
  .feature-section-head,
  .two-factor-enable,
  .security-actions,
  .credential-actions,
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .program-builder-toolbar > *,
  .security-actions > *,
  .credential-actions > *,
  .two-factor-enable > *,
  .actions > * { width: 100%; }

  .program-day-card { padding: 10px; }
  .program-day-card header { gap: 8px; align-items: flex-start; }
  .program-day-card header input { min-width: 0; width: 100%; }
  .program-exercise-row { grid-template-columns: 1fr !important; gap: 7px; }
  .program-exercise-row > * { grid-column: auto !important; width: 100%; }

  .group-participant-row { grid-template-columns: minmax(0, 1fr) 92px 36px; }
  .group-participant-add { grid-template-columns: 1fr; }

  .checkin-link { grid-template-columns: 1fr auto; }
  .checkin-link > :first-child { grid-column: 1 / -1; }

  .chat-main-header { padding: 12px; }
  .chat-main-subtitle { line-height: 1.35; }
  .chat-compose { grid-template-columns: 40px minmax(0, 1fr) 42px; padding: 9px; }
  .staff-main-panel .chat-compose { grid-template-columns: minmax(0, 1fr) 42px; }
  .chat-message-bubble { max-width: 94%; }

  .diagnostic-toolbar { align-items: stretch; }
  .diagnostic-toolbar > * { width: 100%; margin-left: 0; }
  .diagnostic-upload-btn,
  .diagnostic-compare-btn,
  .diagnostic-compare-clear { justify-content: center; }
  .diagnostic-file-preview { height: 48dvh; min-height: 270px; }
  .diagnostic-compare-preview { height: 52dvh; min-height: 300px; }

  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .modal-footer {
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  .modal-footer .btn { flex: 1 1 140px; min-height: 42px; }

  .login-body { padding: 16px; min-height: 100dvh; }
  .login-shell { max-width: 100%; }
  .login-card { width: 100%; padding: 22px 16px; border-radius: 16px; }
  .login-brand .logo-icon { width: min(128px, 38vw); height: min(128px, 38vw); }
  .login-logo-title { font-size: 1.15rem; }
}

@media (max-width: 390px) {
  .topnav-logo .logo-text { display: none; }
  .gym-stats-grid--expanded { grid-template-columns: 1fr; }
  .mobile-bottom-nav button { font-size: .57rem; }
  .mobile-bottom-nav i { font-size: 1rem; }
  .week-strip { padding-left: 44px; }
  .time-labels { width: 44px; }
  .time-grid { width: calc(100vw - 44px); }
  .day-num { width: 27px; height: 27px; }
}

/* Landscape phones and short tablets: keep critical controls usable. */
@media (max-height: 520px) and (max-width: 1100px) and (orientation: landscape) {
  :root { --mobile-nav-h: 56px; }
  .mobile-bottom-nav button { min-height: 44px; flex-direction: row; gap: 6px; }
  .topnav-logo .logo-text { display: none; }
  #pageKalendar.active { min-height: 350px; }
  .modal-content { max-height: calc(100dvh - .5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Final responsive pass – dynamic content, short viewports and
   edge widths that are not covered by the component breakpoints.
   ============================================================ */

html,
body,
main {
  width: 100%;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Flex/grid children with long data must be allowed to shrink. */
.cal-header > *,
.gym-page-header > *,
.list-page-header > *,
.feature-section-head > *,
.operations-item > *,
.measurement-history article > *,
.audit-log-list article > *,
.attendance-actions-title > *,
.trainer-load-row > *,
.trn-active-header > *,
.trn-active-footer > *,
.chat-main-header > *,
.notification-panel-header > * {
  min-width: 0;
}

.gym-page-title,
.list-page-title,
.gym-section-header,
.feature-section-head,
.operations-item,
.measurement-history article,
.audit-log-list article,
.attendance-actions-title,
.retest-row,
.health-warning {
  overflow-wrap: anywhere;
}

.checkin-link code,
.credential-secret,
.audit-log-list article,
.measurement-history article,
.operations-item {
  word-break: break-word;
}

@media (max-width: 1100px) {
  .topnav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .mobile-bottom-nav {
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }

  .calendar-panel--main,
  .time-grid-wrap,
  .gym-overview-page,
  .list-page,
  .cd-body,
  .cd-panel,
  .cd-tab-content {
    width: 100%;
    max-width: 100%;
  }

  /* Let flexbox calculate the remaining width instead of tying the
     calendar to the viewport (which breaks inside scrollbars/insets). */
  .time-grid {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0 !important;
  }

  .gym-section-header,
  .attendance-actions-title,
  .measurement-history article,
  .audit-log-list article,
  .operations-item,
  .retest-row {
    gap: 8px 12px;
    flex-wrap: wrap;
  }

  .operations-item > div,
  .measurement-history article > div,
  .audit-log-list article > div {
    min-width: min(100%, 180px);
    flex: 1 1 180px;
  }

  .audit-log-list article time,
  .measurement-history article button,
  .operations-item button {
    flex: 0 0 auto;
  }

  .checkin-link code {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .credentials-table-wrap,
  .trn-table-wrap,
  .kal-table-wrap {
    max-width: 100%;
    scrollbar-gutter: stable;
  }

  .modal-content,
  .diagnostic-modal-content {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .trainer-stats-grid,
  .trainer-stats-meta,
  .trainer-calendar-color-panel,
  .kal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trainer-calendar-color-panel > :first-child {
    grid-column: 1 / -1;
  }

  .trainer-calendar-color-panel button {
    min-height: 42px;
  }

  .trn-active-heading,
  .trn-day-switcher,
  .trn-active-actions,
  .trn-current-actions {
    max-width: 100%;
  }

  .trn-day-switcher {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .trn-active-actions > button,
  .trn-current-actions > button {
    min-height: 42px;
  }

  .diagnostic-toolbar,
  .program-builder-toolbar,
  .assigned-program-actions,
  .program-library-actions {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .gym-page-title,
  .list-page-title {
    align-items: flex-start;
    line-height: 1.2;
  }

  .gym-section-header {
    align-items: flex-start;
  }

  .attendance-actions-title,
  .measurement-history article,
  .audit-log-list article,
  .retest-row {
    align-items: flex-start;
  }

  .attendance-button-grid button,
  .security-actions button,
  .credential-actions button,
  .program-builder-toolbar button,
  .assigned-program-actions button,
  .program-library-actions button {
    min-height: 42px;
  }

  .trainer-stats-grid,
  .trainer-stats-meta,
  .trainer-calendar-color-panel {
    grid-template-columns: 1fr;
  }

  .trainer-calendar-color-panel > :first-child {
    grid-column: auto;
  }

  .kal-summary {
    gap: 8px;
  }

  .kal-macro-card {
    min-width: 0;
  }

  .session-block {
    padding-inline: 4px;
  }

  .session-block small {
    display: none;
  }

  .session-block span,
  .session-block .session-time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modal-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .modal-header .btn-close {
    flex: 0 0 auto;
  }
}

@media (max-width: 430px) {
  .group-participant-row {
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: start;
  }

  .group-participant-row strong {
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .group-participant-row select {
    grid-column: 1;
    width: 100%;
  }

  .group-participant-row button {
    grid-column: 2;
  }

  .checkin-link {
    grid-template-columns: 1fr;
  }

  .checkin-link > * {
    grid-column: auto !important;
    width: 100%;
  }

  .checkin-link button {
    min-height: 40px;
  }

  .kal-summary {
    grid-template-columns: 1fr 1fr;
  }

  .modal-footer .btn {
    flex-basis: 100%;
  }
}

/* Short landscape screens must use the available viewport instead of
   forcing a taller calendar underneath the fixed bottom navigation. */
@media (max-height: 520px) and (max-width: 1100px) and (orientation: landscape) {
  #pageKalendar.active {
    min-height: 0;
    height: calc(100dvh - var(--nav-h) - var(--mobile-nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .cal-header {
    padding-block: 5px;
  }

  .cal-nav,
  .cal-today-btn,
  .cal-add-btn {
    min-height: 36px;
  }

  .week-strip {
    flex-shrink: 0;
  }

  .cd-sidebar {
    padding-block: 10px;
  }

  .cd-back-btn {
    margin-bottom: 10px;
  }

  .cd-info-list,
  .cd-avatar-wrap,
  .cd-body-stats {
    margin-bottom: 8px;
  }
}

/* Trainer card footer: keep all controls readable at narrow card widths. */
.trainer-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 10px;
}

.trainer-client-badge {
  justify-self: start;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.trainer-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.trainer-card-actions > button,
.trainer-card-actions > .trainer-stats-btn {
  flex: 1 1 105px;
  width: auto !important;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
  line-height: 1.2;
}

.trainer-card-actions > button span {
  min-width: 0;
  white-space: nowrap;
}

/* Classic month calendar responsive behavior */
@media (max-width: 1100px) {
  .cal-period-title {
    flex: 1 1 auto;
    margin-left: 3px;
    font-size: .94rem;
  }
  .calendar-view-switch { order: 1; }
  .calendar-view-btn { min-height: 34px; padding-inline: 9px; }
  .month-grid {
    grid-template-rows: repeat(6, minmax(82px, 1fr));
    min-height: 492px;
  }
  .month-day { padding: 5px 4px 4px; }
  .month-day-number { width: 26px; height: 26px; margin-bottom: 4px; font-size: .72rem; }
  .month-event { min-height: 20px; padding: 3px 4px; font-size: .57rem; }
}

@media (max-width: 700px) {
  .cal-header-left { width: 100%; }
  .cal-header-right {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .calendar-view-switch { justify-self: start; }
  .calendar-trainer-filter { justify-self: end; }
  .cal-add-btn { grid-column: 1 / -1; }
  .calendar-view-btn { padding-inline: 10px; }
  .month-weekdays span { padding: 7px 1px; font-size: .57rem; }
  .month-grid {
    grid-template-rows: repeat(6, minmax(74px, 1fr));
    min-height: 444px;
  }
  .month-day { padding: 4px 2px 3px; }
  .month-day-number { width: 24px; height: 24px; margin-bottom: 3px; font-size: .68rem; }
  .month-day-events { gap: 2px; }
  .month-event {
    display: block;
    min-height: 18px;
    padding: 3px;
    border-radius: 4px;
    font-size: .54rem;
    text-align: center;
  }
  .month-event-time { display: none; }
  .month-event-title { display: block; }
  .month-event-more { padding: 1px 2px; font-size: .53rem; text-align: center; }
}

@media (max-width: 390px) {
  .cal-period-title { font-size: .84rem; }
  .calendar-view-btn span { display: none; }
  .calendar-view-btn { width: 36px; padding-inline: 0; }
  .month-grid {
    grid-template-rows: repeat(6, minmax(68px, 1fr));
    min-height: 408px;
  }
  .month-event { font-size: .5rem; }
}