/* ==========================================================================
   SenPro reskin — page-specific layouts
   One file, sectioned per area, loaded globally from base.html after the
   shell. Keep sections in the same order as the design handoff README.
   ========================================================================== */

/* ==========================================================================
   FEED (nutritionist dashboard + scheduled posts + post detail)
   ========================================================================== */

.sp-feed {
  max-width: none; /* width comes from .sp-page__inner */
  margin: 0 auto;
}
/* LayoutFeed.md: post column (fills) + 280px rail, space-24 apart */
.sp-feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-24);
  align-items: start;
}
.sp-feed-main {
  flex: 1;
  min-width: 0;
  max-width: none; /* width comes from .sp-page__inner */
}
.sp-feed-main > h1 {
  margin: 0 0 20px;
}
.sp-feed-rail {
  min-width: 0; /* sits at the top of the page; does not stick */
}
.sp-feed-rail .sp-card {
  padding: 20px;
}
.sp-feed-rail .sp-card-title {
  margin-bottom: 8px;
}
.sp-activity-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
/* ActivityList.md: one sentence per row in 14px ink, caption timestamp
   below, rows separated by divider-row */
.sp-activity {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-activity:last-child {
  border-bottom: 0;
}
.sp-activity a {
  font-weight: 600;
  color: var(--ink);
}
.sp-activity a:hover {
  color: var(--brand);
}
.sp-activity-time {
  font: var(--text-caption);
  color: var(--ink-muted);
  margin-top: 2px;
}
.sp-activity-empty {
  font: var(--text-body-sm);
  color: var(--ink-muted);
  padding: 6px 0;
}

/* Composer */
.sp-composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-composer .sp-avatar-circle {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.sp-composer-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  background: var(--surface-subtle);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink-placeholder);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.sp-composer-input:hover {
  background: var(--border);
}

/* Post cards */
.sp-post {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-20);
  margin-bottom: var(--space-16);
}
/* CardPost.md: 36px avatar, author 15/600, meta line with time + audience */
.sp-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-post-head .sp-avatar-circle {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.sp-post-meta {
  flex: 1;
  min-width: 0;
}
.sp-post-author {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-post-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sp-post-time {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-post-actions-top {
  flex-shrink: 0;
}
.sp-post-text {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
.sp-post-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-post-more {
  display: none;
  margin: -6px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.sp-post-more.is-visible {
  display: inline-block;
}
.sp-post-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
}
.sp-post-link:hover {
  background: var(--border);
  color: var(--ink);
  text-decoration: none;
}
.sp-post-link img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.sp-post-link-title {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--brand);
}
.sp-post-link-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
}
.sp-post-link-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-placeholder);
  font-weight: 600;
  margin-bottom: 2px;
}
.sp-post-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--ink-muted);
}
.sp-post-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.sp-post-action:hover {
  color: var(--ink);
  text-decoration: none;
}
.sp-post-action svg {
  flex-shrink: 0;
}
/* Liked: the heart fills in danger (DropdownMenu.md's favourite heart), and
   the count sits beside it, so it isn't colour alone */
.post_engagement_btn_neg svg {
  fill: currentColor;
}
.post_engagement_btn_neg {
  color: var(--danger);
}
.sp-post-foot .post_engagement {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sp-post-foot .post_engagement_score {
  padding: 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.sp-post-foot .post_engagement_score:empty {
  display: none;
}
.sp-post-comments {
  flex: 1;
}
.sp-post-stats {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
}
.sp-post-stats:hover {
  color: var(--ink);
}

/* Legacy infinite scroll hooks */
.sp-feed .loading {
  padding: 12px;
  text-align: center;
  color: var(--ink-placeholder);
  font-size: 13px;
}

/* The rail drops under the posts when the main area gets narrow
   (LayoutFeed.md: "below about 1100px"; measured on the viewport so a
   1366px laptop keeps the rail beside a ~620px post column). */
@media (max-width: 1119px) {
  .sp-feed-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Post detail */
.sp-post-detail {
  max-width: none; /* width comes from .sp-page__inner */
}
.sp-post-detail .sp-post {
  padding: 20px;
  margin-bottom: 26px;
}
.sp-post-detail .sp-post-foot {
  justify-content: space-between;
  padding-top: 14px;
}
.sp-post-detail h2 {
  font-size: 18px;
  margin: 0 0 14px;
}
.sp-engagement-table {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 26px;
}
.sp-engagement-table .table {
  margin: 0;
}
.sp-engagement-table .table th {
  padding: 12px 20px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--ink-subtle);
}
.sp-engagement-table .table td {
  padding: 14px 20px;
}
.sp-engagement-table .table td + td {
  color: var(--ink-muted);
}
.sp-comment {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.sp-comment-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.sp-comment-author {
  font-size: 13px;
  font-weight: 600;
}
.sp-comment-age {
  font-size: 12px;
  color: var(--ink-placeholder);
}
.sp-comment-text {
  font-size: 13.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sp-comment-remove {
  font-size: 12px;
  color: var(--ink-subtle);
  margin-top: 6px;
  display: inline-block;
}
.sp-comment-remove:hover {
  color: var(--danger);
}
.sp-comment-form textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border-radius: var(--radius-xl);
  padding: 14px;
  margin-bottom: 14px;
}
.sp-no-comments {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

/* ==========================================================================
   SHARED MODAL FORMS (post to feed, assign, quick add — core/modals/*)
   ========================================================================== */

.sp-form-label,
.sp-modal-form label,
.sp-modal-form .text-sm {
  display: block;
  font: var(--text-label);
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.sp-modal-form textarea.new_post,
.sp-modal-form textarea {
  width: 100%;
  min-height: 104px;
  padding: 12px var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink);
  font: var(--text-body);
  resize: vertical;
}
.sp-form-error {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
}
.sp-form-error ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-form-hint {
  font: var(--text-caption);
  color: var(--ink-muted);
  margin-top: var(--space-6);
}
.sp-form-hint a {
  color: var(--brand);
}

/* Choice pills (post type: Text / Resource / External link): radio inputs
   shown as pills; unselected white with a control border, selected solid
   ink (prototype "Create a Post"). */
.sp-segment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-14);
}
.sp-segment label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-sm);
  margin: 0;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink-secondary);
  font: var(--text-caption);
  font-weight: 600;
  cursor: pointer;
}
.sp-segment label:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.sp-segment input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.sp-segment label:has(input:checked),
.sp-segment label.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface-card);
}
.sp-segment label:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}

/* File picker row */
.sp-file-row {
  margin-top: 14px;
}
/* Image/file picker (TextField.md): dashed box on surface-sunken */
.sp-file-row input[type="file"] {
  width: 100%;
  padding: var(--space-14);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-md);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-file-row input[type="file"]::file-selector-button {
  margin-right: var(--space-10);
  min-height: var(--control-sm);
  padding: 0 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

/* Checkbox list (audience) */
.sp-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.sp-check,
.modal-body label.sp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  cursor: pointer;
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-check input[type="checkbox"],
.sp-check input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.sp-check small,
.sp-check .sp-check-hint {
  display: block;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-modal-form .selectpicker + .btn-group,
.sp-modal-form .bootstrap-select {
  width: 100% !important;
}

/* Collapsible section header inside forms (Schedule Post) */
.sp-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  margin-bottom: 6px;
  user-select: none;
}
.sp-collapse-toggle svg {
  transition: transform 0.2s ease;
}
.sp-collapse-toggle.is-open svg {
  transform: rotate(180deg);
}
.sp-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand) !important;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
}
.sp-pro-badge svg {
  width: 12px;
  height: 12px;
}
.sp-schedule-fields {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sp-schedule-fields > div:first-child {
  flex: 1;
  min-width: 140px;
}
.sp-schedule-fields label {
  font: var(--text-label);
  margin-bottom: var(--space-6);
}
.sp-schedule-fields select {
  min-width: 80px;
}
.sp-schedule-fields input,
.sp-schedule-fields select {
  min-height: var(--control-md);
  padding: 0 var(--space-14);
  background-color: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body);
  color: var(--ink);
  width: 100%;
}
.sp-schedule-fields select {
  padding-right: 40px;
}
.sp-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--on-warning-soft);
  font-size: 13px;
}
.sp-notice svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.sp-notice a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* Modal footer row for assignable forms */
.sp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

/* ==========================================================================
   CLIENTS (nutritionist/manage.html + tab partials)
   ========================================================================== */

.sp-clients .nav-pills {
  border-bottom: 0;
  margin-bottom: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  padding-bottom: 2px;
}
.sp-clients .nav-pills .nav-item {
  flex-shrink: 0;
}
.sp-clients .nav-pills .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sp-clients .nav-pills .nav-link .sp-pill-count {
  font-weight: 500;
  opacity: 0.65;
}
.sp-clients .nav-pills .nav-link .sp-pill-count:empty {
  display: none;
}
.sp-clients .select_bar {
  margin: 0 0 8px;
}
.sp-clients .select_bar .btn {
  margin-bottom: 0;
}
.sp-client-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.sp-client-toolbar .sp-icon-btn.d-none {
  display: none !important;
}

/* Card grid */
/* Clients use the shared three-per-row card grid (LayoutCard.md) */
.sp-client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
}
.sp-client-card-col,
.sp-client-card-col.client-card {
  display: flex;
  min-width: 0;
  max-width: none; /* css-v2 .client-card caps it at 20% */
}
@media (max-width: 767px) {
  .sp-client-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sp-client-card-col.d-none {
  display: none !important;
}
.sp-client-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  text-align: left;
  color: var(--ink);
}
.sp-client-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
a.sp-client-card-head:hover {
  color: inherit;
  text-decoration: none;
}
/* CardClient.md: 36px avatar, name 15/600, email caption */
.sp-client-avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.sp-client-avatar.red-circle,
.sp-client-avatar.green-circle,
.sp-client-avatar.amber-circle {
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px currentColor;
}
.sp-client-avatar.red-circle   { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--danger) !important; }
.sp-client-avatar.green-circle { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--success) !important; }
.sp-client-avatar.amber-circle { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--warning) !important; }
.sp-client-meta {
  min-width: 0;
  flex: 1;
}
.sp-client-name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-client-email {
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* One small secondary Manage button */
.sp-client-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  min-height: var(--control-sm);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink);
  font: var(--text-body-sm);
  font-weight: 600;
  text-decoration: none;
}
.sp-client-manage:hover {
  background: var(--surface-secondary-hover);
  border-color: var(--border-strong);
  color: var(--ink);
  text-decoration: none;
}
/* A group card's Add clients (button): icon before the label; admins only */
button.sp-client-manage {
  gap: var(--space-6);
  font: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
}
button.sp-client-manage:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.sp-client-manage:disabled:hover {
  background: var(--surface-card);
  border-color: var(--border-control);
}
.sp-client-flag {
  position: absolute;
  top: 12px;
  right: 12px;
}
/* Pending: a warning Badge in the top-right corner; a status, not a button (RS-148) */
.sp-chip.sp-client-flag {
  border: 0;
  background: var(--warning-soft);
  color: var(--on-warning-soft);
}
/* Copy activation link: takes Manage's place on a pending client's card; dashed until it's copied, then the
   success colours with a tick for two seconds */
.sp-client-manage.sp-client-copylink {
  border-style: dashed;
  background: var(--surface-sunken);
}
.sp-client-manage.sp-client-copylink:hover {
  background: var(--surface-secondary-hover);
}
.sp-client-manage.sp-client-copylink.is-copied,
.sp-client-manage.sp-client-copylink.is-copied:hover {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--on-success-soft);
}
.sp-client-copylink__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.sp-client-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--ink);
}
.sp-client-detail span {
  display: inline-block;
  min-width: 52px;
  color: var(--ink-placeholder);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-client-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.sp-client-card-actions .btn,
.sp-client-card-actions .sp-client-manage {
  flex: 1;
  margin-top: 0;
}
.sp-group-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: -6px 0 14px;
}
.sp-clients .sp-empty {
  width: 100%;
}
.sp-clients-tab {
  width: 100%;
}
.sp-clients .tab-pane > .row,
.sp-clients .tab-pane .my-3.row {
  margin-left: 0;
  margin-right: 0;
}

/* Table (list) view — DataTables */
.sp-clients .client_rows .dataTables_wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 8px 0 0;
  overflow: hidden;
}
.sp-clients .dataTables_wrapper .dataTables_filter {
  float: none !important;
  padding: 6px 16px 12px;
  text-align: left;
}
.sp-clients .dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--ink-subtle);
}
.sp-clients .dataTables_wrapper .dataTables_filter input {
  margin-left: 0 !important;
  min-height: 40px;
  padding: 0 var(--space-14);
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: var(--text-body-sm);
  min-width: 280px;
}
.sp-clients table.dataTable {
  border-collapse: collapse !important;
  color: var(--ink);
  width: 100% !important;
}
.sp-clients table.dataTable thead th,
.sp-clients table.dataTable thead td {
  border-bottom: 1px solid var(--divider);
  border-top: 1px solid var(--divider);
  background: transparent;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px !important;
}
.sp-clients table.dataTable tbody td {
  border-top: 1px solid var(--divider);
  padding: 12px;
  font-size: 13px;
  vertical-align: middle;
}
.sp-clients table.dataTable tbody tr {
  background: transparent;
}
.sp-clients table.dataTable tbody tr:hover {
  background: var(--surface-subtle);
}
.sp-clients table.dataTable.no-footer {
  border-bottom: 0;
}
.sp-clients .dataTables_scrollHead,
.sp-clients .dataTables_scrollBody {
  background: transparent;
}
.sp-clients .client-table-row .client-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.sp-clients .client-table-row .client-email {
  color: var(--ink-muted);
  font-size: 12.5px;
}
.sp-clients .client-table-row .badge {
  background: var(--warning-soft);
  color: var(--on-warning-soft);
  border-radius: var(--radius-sm);
}
.sp-clients .client-table-row .badge.bg-black {
  background: var(--ink) !important;
  color: var(--surface-card);
}
.sp-clients .client-table-row .more-tags {
  color: var(--ink-placeholder);
}
.sp-clients .client-table-row .circle {
  background: var(--avatar);
  color: var(--brand);
  font-weight: 700;
}
.sp-clients .client-table-row .btn-outline-gold {
  text-transform: none;
  font-size: 12.5px;
  padding: 6px 10px;
}
.sp-clients .client-table-row .row-actions a {
  color: var(--ink-subtle);
}
.sp-clients .client-table-row .row-actions a:hover {
  color: var(--brand);
}
.sp-clients .client-table-row .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--radius-sm);
}
.sp-clients .client-table-row .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--brand);
}
.sp-clients .select2-container .select2-selection {
  background: var(--surface-subtle);
  border: 0;
  border-radius: 8px;
}
.sp-clients .select2-dropdown {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--ink);
}
.sp-clients .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--surface-subtle);
  color: var(--ink);
}
.sp-clients .fa-tshirt {
  color: var(--brand);
}

/* Licence footer line */
.sp-clients .tab-content > .tab-pane > .row .col > p {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-subtle);
}
.sp-clients .font-bold {
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 600px) {
  .sp-client-card-col {
    width: 100%;
  }
}

/* ==========================================================================
   CLIENT PROFILE — shared header + tabs (snippets/client_bar.html)
   ========================================================================== */

.sp-client-header {
  margin-bottom: 4px;
}
.sp-client-header--embedded {
  margin-top: 5px;
}
.sp-client-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 14px;
}
.sp-client-back svg {
  flex-shrink: 0;
}
.sp-client-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.sp-client-header-avatar {
  width: 56px;
  height: 56px;
  font-size: 18px;
  background-size: cover;
  background-position: center;
}
.sp-client-header-avatar.red-circle   { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--danger) !important; }
.sp-client-header-avatar.green-circle { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--success) !important; }
.sp-client-header-avatar.amber-circle { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--warning) !important; }
.sp-client-header-meta {
  flex: 1;
  min-width: 0;
}
.sp-client-header-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sp-client-header-prefix {
  font-weight: 500;
  color: var(--ink-muted);
}
/* The line under the name (a group's member count, snippets/group_bar.html) */
.sp-client-header-status {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.sp-fullscreen-btn {
  flex-shrink: 0;
  gap: var(--space-6);
}
.sp-fullscreen-btn .sp-fs-collapse,
.sp-fullscreen-btn .sp-fs-label-collapse {
  display: none;
}
body.sp-fullscreen .sp-fullscreen-btn .sp-fs-collapse,
body.sp-fullscreen .sp-fullscreen-btn .sp-fs-label-collapse {
  display: inline;
}
body.sp-fullscreen .sp-fullscreen-btn .sp-fs-expand,
body.sp-fullscreen .sp-fullscreen-btn .sp-fs-label-expand {
  display: none;
}

/* Client profile tabs follow Tabs.md: solid ink selected tab, no underline */
.sp-client-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-24);
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  padding: 0;
}
.sp-client-tabs::-webkit-scrollbar {
  display: none;
}
.sp-client-tabs a.client_result_links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-sm);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.sp-client-tabs a.client_result_links:hover {
  background: var(--surface-hover);
  color: var(--ink);
}
.sp-client-tabs a.client_result_links.active {
  background: var(--ink);
  color: var(--surface-card);
  font-weight: 600;
}
.sp-client-tabs .sp-client-tab--settings svg {
  flex-shrink: 0;
}
.client_bar .mobile_settings {
  position: static;
}

@media (max-width: 767px) {
  .sp-client-header-row {
    flex-wrap: wrap;
  }
  .sp-fullscreen-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CLIENT PROFILE — Overview tab (nutritionist/client_overview.html)
   ========================================================================== */

.sp-overview {
  max-width: none; /* width comes from .sp-page__inner */
  margin: 0 auto;
}
.sp-overview-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.sp-overview-main {
  flex: 2;
  min-width: 400px;
}
.sp-overview-rail {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 760px) {
  .sp-overview-main {
    min-width: 0;
    width: 100%;
  }
  .sp-overview-rail {
    width: 100%;
  }
}

/* Dark client-info card */
.sp-client-info {
  position: relative;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-radius: var(--radius-xl);
  padding: 22px;
  margin-bottom: 20px;
}
.sp-client-info-edit {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
}
.sp-client-info-edit:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--on-inverse);
}
.sp-client-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  font-size: 13px;
  max-width: calc(100% - 44px);
}
.sp-client-info-grid > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sp-client-info-grid strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-right: 4px;
}
html[data-theme="dark"] .sp-client-info-grid strong {
  color: var(--ink-muted);
}
.sp-client-info-grid a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
.sp-client-info-grid a:hover {
  color: var(--on-inverse);
}
.sp-client-info-grid .clickable {
  cursor: pointer;
  opacity: 0.85;
}
.sp-client-info-grid .clickable:hover {
  opacity: 1;
  text-decoration: underline;
}
.sp-client-info .sp-chip {
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-inverse);
  margin: 0 4px 4px 0;
}
.sp-client-info .sp-chip a {
  color: inherit;
  text-decoration: none;
  margin-left: 4px;
  opacity: 0.7;
}
.sp-client-info .sp-chip a:hover {
  opacity: 1;
}
@media (max-width: 560px) {
  .sp-client-info-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding-right: 40px;
  }
}

/* Habits tracker card */
.sp-habits {
  padding: 22px;
  margin-bottom: 20px;
}
.sp-habits-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: 14px;
}
.sp-habits-head .sp-card-title {
  margin: 0;
}
.sp-habits-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-habits-week {
  min-width: 124px;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Next keeps its space when hidden so the label doesn't jump */
.sp-habits-nav .is-hidden {
  visibility: hidden;
}
.sp-habits-scroll {
  overflow-x: auto;
}
.sp-habits-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.sp-habits-table th,
.sp-habits-table td {
  padding: 0;
  border: 0;
  vertical-align: middle;
}
.sp-habits-table thead th {
  padding-bottom: 8px;
}
.sp-habits-name-col {
  width: 34%;
  text-align: left;
}
.sp-habits-day {
  height: auto;
  padding: 6px 4px;
  line-height: 1.2;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-subtle);
  border-radius: 8px;
}
.sp-habits-day .day {
  position: static;
  display: block;
  font-size: 11px;
}
.sp-habits-day .day svg {
  margin-left: 2px;
  vertical-align: -1px;
  color: var(--brand);
}
.sp-habits-date {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-placeholder);
  margin-top: 2px;
}
.sp-habits-day.comment {
  cursor: pointer;
}
.sp-habits-day.comment:hover {
  background: var(--surface-subtle);
}
.sp-habits-day.active {
  background: var(--ink);
  color: var(--surface-card);
}
.sp-habits-day.active .sp-habits-date {
  color: var(--surface-card);
  opacity: 0.7;
}
.sp-habits-table tbody tr {
  border-top: 1px solid var(--divider);
}
.sp-habits-table .habits-row {
  height: 40px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sp-habits-table td.sp-habits-name-col .habits-row {
  justify-content: flex-start;
  gap: 6px;
  padding-right: 8px;
}
.sp-habits-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-habits-table .delete-habit {
  position: static;
  float: none;
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: var(--ink-placeholder);
  font-size: 11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sp-habits-table .habit-row:hover .delete-habit {
  display: inline-flex;
}
.sp-habits-table .delete-habit:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.sp-habits-table .habit-light {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface-subtle);
  display: block;
}
.sp-habits-table .habit-light.green { background: var(--success); border-color: var(--success); }
.sp-habits-table .habit-light.amber { background: var(--warning); border-color: var(--warning); }
.sp-habits-table .habit-light.red   { background: var(--danger);  border-color: var(--danger); }
.sp-habits-table .light-select {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-menu);
  z-index: 5;
}
.sp-habits-table .light-select .habit-light {
  margin: 0;
  cursor: pointer;
}
.sp-habits-empty {
  padding: 14px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.sp-habits-new {
  height: auto;
  margin-top: 14px;
}
.sp-habits-new .add-new {
  gap: var(--space-6);
  margin-left: calc(-1 * var(--space-10));
}
.sp-habits-new .new-habit-input {
  display: flex;
  gap: 8px;
}
.sp-habits-new .new-habit-input.d-none {
  display: none;
}
.sp-habits-new .new-habit-input input {
  flex: 1;
  margin: 0;
}
.sp-habits .comment-box {
  position: absolute;
  top: 64px;
  left: 22px;
  right: 22px;
  width: auto;
  padding: 14px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  font-size: 13px;
  z-index: 6;
}
.sp-habits .comment-box .comment-meta {
  font-weight: 600;
  color: var(--ink-subtle);
  margin-bottom: 8px;
}
.sp-habits .comment-box .comment-submit {
  position: absolute;
  right: 22px;
  bottom: 22px;
}
.sp-habits .comment-box .comment-input {
  padding-right: 80px;
}

/* Recent activity card */
.sp-recent-activity {
  padding: 22px;
}
.sp-recent-activity-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.sp-recent-activity-head .sp-card-title {
  margin: 0;
}
.sp-recent-activity-head a {
  font-size: 13px;
}
.sp-recent-activity-list {
  max-height: 300px;
  overflow-y: auto;
}
.sp-recent-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--divider-row);
}
.sp-recent-activity-row:last-child {
  border-bottom: 0;
}
.sp-recent-activity-row .sp-avatar-circle {
  width: 28px;
  height: 28px;
  font-size: 10px;
  background-size: cover;
  background-position: center;
}
.sp-recent-activity-row .sp-ra-text {
  flex: 1;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-recent-activity-row .sp-ra-time {
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Check-in cards */
.sp-checkins {
  padding: 18px;
}
.sp-checkins-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sp-checkins-head .sp-card-title {
  margin: 0;
  font-size: 14px;
}
.sp-checkins-head .sp-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
}
.sp-checkins-list {
  max-height: 320px;
  overflow-y: auto;
}
.sp-checkins .checkin-row {
  padding: 0 !important;
}
/* CheckinList.md: 44px rows separated by divider-row, an 8px status dot
   before the date, the outcome on the right. (The status is still shown by
   colour alone until the wording is decided: see Reskin to-dos.) */
.sp-checkins .checkin-row > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: 0 !important;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
  margin: 0;
}
.sp-checkins .checkin-row:last-child > div {
  border-bottom: 0;
}
.sp-checkins .checkin-row > div > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.sp-checkins .checkin-row > div > div:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--ink-placeholder);
}
.sp-checkins .checkin-row > div > div:last-child {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-checkins .checkin-row > div a {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  text-decoration: none;
}
.sp-checkins .checkin-row.red > div > div:first-child::before   { background: var(--danger); }
.sp-checkins .checkin-row.amber > div > div:first-child::before { background: var(--warning); }
.sp-checkins .checkin-row.green > div > div:first-child::before { background: var(--success); }
.sp-checkins-empty {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ==========================================================================
   LIST CARDS (consultations, questionnaires, habits rows …)
   ========================================================================== */

/* ListRow.md: one panel of rows, >=64px, divider-row between, 20px left
   padding; title 15/600 with a caption meta line underneath; actions (one
   small secondary button at most, then ⋯) on the right. Grid placement
   puts .sp-list-meta under the title without template changes. */
.sp-list-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
/* No overflow: hidden on the card: it clipped a row's ⋯ menu, which hangs below the row, so on a list of one or two
   rows the menu was cut off (RS-188). The first and last rows take the card's corners instead, so their hover
   background still fits inside them. */
.sp-list-card:not(.sp-list-card--flat) > :first-child {
  border-top-left-radius: calc(var(--radius-xl) - 1px);
  border-top-right-radius: calc(var(--radius-xl) - 1px);
}
.sp-list-card:not(.sp-list-card--flat) > :last-child {
  border-bottom-left-radius: calc(var(--radius-xl) - 1px);
  border-bottom-right-radius: calc(var(--radius-xl) - 1px);
}
/* Enquiries have no ⋯ menu, and their open detail panels are tinted to the card's edge: keep clipping those. */
.sp-list-card.sp-enquiry-list {
  overflow: hidden;
}
.sp-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-16);
  row-gap: 2px;
  min-height: 64px;
  padding: 10px 12px 10px 20px;
  border-bottom: 1px solid var(--divider-row);
}
.sp-list-row > * {
  grid-column: 1 / -1;
}
.sp-list-row > .sp-list-main {
  grid-column: 1;
  grid-row: 1;
}
.sp-list-row > .sp-list-meta {
  grid-column: 1;
  grid-row: 2;
}
.sp-list-row > .sp-list-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
}
/* A right-aligned value (price, count) before the actions (ListRow.md) */
.sp-list-row:has(> .sp-list-value) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.sp-list-row > .sp-list-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  font: var(--text-label);
  color: var(--ink);
  white-space: nowrap;
}
.sp-list-row:has(> .sp-list-value) > .sp-list-actions {
  grid-column: 3;
}
/* A caption value (counts, frequency) rather than a price */
.sp-list-row > .sp-list-value--meta {
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-list-row .sp-list-actions:has(> .sp-btn) {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
/* No meta line: keep everything on one centred row */
.sp-list-row:not(:has(> .sp-list-meta)) > .sp-list-actions,
.sp-list-row:not(:has(> .sp-list-meta)) > .sp-list-value {
  grid-row: 1;
}
.sp-list-row:last-child {
  border-bottom: 0;
}
.sp-list-row:hover {
  background: var(--surface-secondary-hover);
}
.sp-list-main {
  min-width: 0;
}
.sp-list-title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
/* A linked title stays ink (ListRow.md); underline on hover */
.sp-list-title a {
  color: inherit;
}
.sp-list-title a:hover,
.sp-list-title a:focus-visible {
  color: inherit;
  text-decoration: underline;
}
.sp-list-sub,
.sp-list-meta {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-list-sub {
  margin-top: 2px;
}
.sp-list-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}
.sp-list-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
}
.sp-list-actions .text-link {
  font: var(--text-body-sm);
}
.sp-text-danger,
.sp-list-actions .sp-text-danger {
  color: var(--danger) !important;
}
.sp-consultations {
  max-width: none; /* width comes from .sp-page__inner */
}
.btn a {
  color: inherit !important;
}
@media (max-width: 640px) {
  .sp-list-row {
    flex-wrap: wrap;
  }
  .sp-list-meta,
  .sp-list-actions {
    width: 100%;
  }
}

/* ==========================================================================
   MESSAGES — MessageThread (messages.html, nutritionist/client_messages.html,
   snippets/message_thread.html)
   ========================================================================== */

.sp-messages--page,
.sp-messages--single {
  max-width: none; /* width comes from .sp-page__inner */
}
/* One card: conversations left, the open thread right, filling the viewport */
.sp-msg-layout {
  display: flex;
  height: calc(100vh - var(--topbar-height) - 150px);
  min-height: 480px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.sp-messages--single .sp-msg-thread {
  height: calc(100vh - var(--topbar-height) - 280px);
  min-height: 480px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Conversations */
.sp-msg-contacts {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sp-msg-contacts .recipientButton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--space-16);
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
  text-decoration: none;
}
.sp-msg-contacts .recipientButton:hover {
  background: var(--surface-subtle);
}
.sp-msg-contacts .recipientButton.active {
  background: var(--brand-soft);
}
.sp-msg-contacts .recipientButton:focus-visible {
  outline: none;
  box-shadow: inset var(--shadow-focus);
}
.sp-conv-avatar,
.sp-bubble-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--avatar);
  color: var(--ink-secondary);
  font: var(--text-micro);
  object-fit: cover;
}
.sp-conv-avatar {
  width: 36px;
  height: 36px;
}
.sp-conv-text {
  flex: 1;
  min-width: 0;
}
.sp-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
}
.sp-conv-name {
  min-width: 0;
  font: var(--text-label);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-conv-time {
  flex-shrink: 0;
  font: var(--text-caption);
  color: var(--ink-placeholder);
  white-space: nowrap;
}
.sp-conv-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-conv-preview__text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--badge-alert, var(--brand));
  color: var(--on-brand);
  font: var(--text-micro);
}
/* Unread conversations read as bold, not only by the badge colour */
.recipientButton:has(.sp-unread) .sp-conv-preview__text {
  color: var(--ink);
  font-weight: 600;
}

/* Thread */
.sp-msg-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sp-msg-thread--empty {
  align-items: center;
  justify-content: center;
}
.sp-msg-back {
  display: none;
}
.sp-msg-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  overflow-y: auto;
}
/* Legacy css-v2 #messageScroll: fixed height, 600px minimum, inset shadows */
.sp-msg-scroll#messageScroll {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: var(--space-20);
  overflow-y: auto;
  box-shadow: none;
}
.sp-msg-empty {
  margin: auto;
  padding: var(--space-20);
  font: var(--text-body-sm);
  color: var(--ink-muted);
  text-align: center;
}

/* Bubbles: theirs left on surface-page, yours right on brand */
.sp-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  max-width: 70%;
}
.sp-bubble-row.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.sp-bubble-avatar {
  width: 28px;
  height: 28px;
}
.sp-bubble {
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  color: var(--ink);
  font: var(--text-body-sm);
  overflow-wrap: anywhere;
}
.is-mine .sp-bubble {
  background: var(--brand);
  color: var(--on-brand);
}
.sp-bubble__meta {
  margin-bottom: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-bubble__name {
  font-weight: 600;
  color: var(--ink-secondary);
}
.is-mine .sp-bubble__meta,
.is-mine .sp-bubble__name {
  color: var(--on-brand);
  opacity: 0.85;
}
.sp-bubble__note {
  margin-top: var(--space-4);
  font: var(--text-caption);
  font-style: italic;
  opacity: 0.85;
}
.sp-bubble__image {
  display: block;
  max-width: 240px;
  max-height: 240px;
  width: auto;
  margin-top: var(--space-8);
  border-radius: var(--radius-md);
}

/* Composer pinned to the bottom */
.sp-msg-compose {
  flex-shrink: 0;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--divider);
  background: var(--surface-card);
}
.sp-msg-compose__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
}
.sp-msg-compose__field {
  flex: 1;
  min-width: 0;
}
/* equalise('.message_control') on the page sets a fixed height; let the field grow */
.sp-msg-compose .message_control {
  height: auto !important;
}
.sp-msg-compose__field textarea.form-control {
  display: block;
  min-height: var(--control-md);
  max-height: 160px;
  padding: 11px 14px;
  resize: none;
  field-sizing: content;
}
.sp-gif-btn {
  font: var(--text-micro);
}
.sp-gif-results {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: var(--space-8);
}
.sp-gif-results img.select_gif {
  height: 80px;
  width: auto;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#preview_gif img.select_gif {
  max-height: 160px;
  max-width: 200px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-sm);
}
#toggle_gifs {
  margin-bottom: 10px;
}
.sp-msg-compose #attachFileSection input[type="file"] {
  margin-top: 10px;
}

@media (max-width: 767px) {
  /* Phones: the list, or the open thread with an All messages link back */
  .sp-msg-layout {
    height: calc(100vh - var(--topbar-height) - 120px);
  }
  .sp-msg-contacts {
    width: 100%;
    border-right: 0;
  }
  .sp-msg-layout.has-thread .sp-msg-contacts,
  .sp-msg-layout:not(.has-thread) .sp-msg-thread {
    display: none;
  }
  .sp-msg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: var(--space-12) var(--space-12) 0;
    padding: 0 var(--space-8);
    min-height: var(--control-sm);
    color: var(--brand);
    font: var(--text-body-sm);
    font-weight: 600;
    text-decoration: none;
  }
  .sp-bubble-row {
    max-width: 85%;
  }
}

/* Questionnaires: archived */
.sp-archived-checkins {
  margin-top: 28px;
}
.sp-list-row--archived {
  opacity: 0.7;
}

/* ==========================================================================
   RECIPES / FOOD / MEALPLAN TEMPLATES
   ========================================================================== */

.sp-recipes .row {
  margin-left: -7px;
  margin-right: -7px;
}
.sp-recipes .row > .col-12 {
  padding-left: 7px;
  padding-right: 7px;
}
.sp-recipes .sp-recipe-section {
  align-items: center;
  min-height: 36px;
  margin: var(--space-8) 0 var(--space-12) !important;
}
/* Group heading (CardRecipe.md): section title with a quiet See all */
.sp-recipes .section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  margin: 0 !important;
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-recipes .section-header .viewall {
  margin-left: 0 !important;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-muted);
}
.sp-recipes .section-header .viewall:hover {
  color: var(--ink);
}
/* Card footer: tags left, the ⋯ menu right */
.sp-recipe-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
}
.sp-recipe-foot .sp-recipe-tags {
  margin-top: 0;
  min-width: 0;
}
/* A recipe you can edit: the tags sit above the footer (publish chip and ⋯), both at the foot of the card */
.sp-recipe-card .sp-recipe-tags--above {
  margin-top: auto;
  padding-top: var(--space-12);
}
.sp-recipe-tags--above + .sp-recipe-foot {
  margin-top: 0;
  padding-top: var(--space-10);
}
.sp-recipe-foot .sp-tile-actions {
  flex-shrink: 0;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
}
/* One 8px pull only, like the collection card's ⋯ (.sp-tile-foot); the
   general .sp-tile-actions .sp-dropdown -10px would stack on top of it */
.sp-recipe-foot .sp-tile-actions .sp-dropdown {
  margin-right: 0;
}
.sp-recipe-col {
  padding: 0 7px;
  margin-bottom: 14px !important;
  display: flex;
}
.sp-recipe-col > .mealCardCont {
  width: 100%;
}
.sp-recipe-card.mealCardCont {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 0;
  overflow: visible;
  height: auto;
}
.sp-recipe-card .sp-tile-media.image {
  margin: 0 !important; /* 16:9 from .sp-tile-media */
  height: auto !important; /* legacy .image caps it at 110px */
  max-height: none !important;
  aspect-ratio: 16 / 9;
}
.sp-recipe-card .other {
  height: auto;
}
.sp-recipe-card .sp-tile-title.title {
  width: auto;
}
/* CardRecipe.md: nutrition always visible as one caption line */
.sp-recipe-nutrition {
  font: var(--text-caption);
  color: var(--ink-muted);
  perspective: none !important;
}
.sp-recipe-nutrition .nutr_val {
  font-size: inherit;
  font-weight: inherit;
  display: inline;
}
/* Legacy .nutritionals right-aligns the line; the card reads left to right */
.sp-recipe-card .sp-recipe-nutrition {
  text-align: left;
  margin-top: 2px;
}
/* Tags: one neutral Badge plus an outline "+N more" (Badge.md) */
.sp-recipe-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.sp-recipe-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--surface-hover);
  color: var(--ink-secondary);
  font: 600 12px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.sp-recipe-tag:hover {
  color: var(--ink);
  text-decoration: none;
}
.sp-recipe-tag--more {
  background: transparent;
  border-color: var(--border-control);
  color: var(--ink-muted);
}
.mealCardCont .sp-recipe-tag.category_link:not(:last-child)::after {
  content: none;
  padding: 0;
}
/* The carousel clips its row (overflow: hidden), which cut off a card's ⋯ menu opening upwards. Stretch the clip
   box up by a menu's height; that extra area lets clicks through to the header and the row above. */
.sp-recipes .slick-list {
  padding-top: 440px;
  margin-top: -440px;
}
.sp-recipes .slick-slider,
.sp-recipes .slick-list {
  pointer-events: none;
}
.sp-recipes .slick-slide {
  pointer-events: auto;
}
.sp-recipes .slick-track {
  display: flex;
}
.sp-recipes .slick-slide {
  height: auto;
  display: flex;
}
.sp-recipes .slick-slide > div {
  width: 100%;
  display: flex;
}
.sp-recipes .arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Slider dots: 6px dots, the current slide a 18px ink pill */
.sp-recipes .slick-dots {
  position: static;
  order: -1;
  width: auto;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 var(--space-12) 0 0;
  padding: 0;
}
.sp-recipes .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}
.sp-recipes .slick-dots li button {
  display: block;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  font-size: 0;
  transition: width 0.15s ease;
}
.sp-recipes .slick-dots li button:before {
  content: none;
}
.sp-recipes .slick-dots li.slick-active button {
  width: 18px;
  background: var(--ink);
}
/* Previous / next: 36px round secondary buttons with a chevron */
.sp-recipes .slick-prev,
.sp-recipes .slick-next {
  position: static;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  transform: none;
}
.sp-recipes .slick-prev:hover,
.sp-recipes .slick-next:hover,
.sp-recipes .slick-prev:focus,
.sp-recipes .slick-next:focus {
  border-color: var(--border-strong);
  background: var(--surface-card);
}
.sp-recipes .slick-prev:focus-visible,
.sp-recipes .slick-next:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-recipes .slick-prev:before,
.sp-recipes .slick-next:before {
  content: "";
  width: 16px;
  height: 16px;
  opacity: 1;
  background: var(--ink);
  -webkit-mask: var(--sp-chevron) center / 16px 16px no-repeat;
  mask: var(--sp-chevron) center / 16px 16px no-repeat;
}
.sp-recipes .slick-prev:before {
  --sp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
.sp-recipes .slick-next:before {
  --sp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
.sp-recipes .slick-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Food tiles: three per row like every card; two per row on a phone */
.sp-food-col {
  width: auto;
}
@media (max-width: 767px) {
  .sp-tile-grid:has(> .sp-food-col) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sp-food-card.mealCardCont {
  margin-bottom: 0;
  overflow: visible;
}
.sp-food-card .sp-tile-media.image {
  margin: 0 !important;
}
.sp-food-card .sp-tile-title.title {
  width: auto;
}
.sp-food-card .sp-tile-actions {
  padding-top: 4px;
}

/* Template cards */
.sp-template-shared {
  align-self: flex-start;
}
.sp-tile-actions--divided {
  border-top: 0;
}

/* slick sets slide widths inline; stop the bootstrap col flex-basis from
   resolving against the (very wide) flex track */
.sp-recipes .slick-slide.food_card {
  flex: 0 0 auto;
  max-width: none;
  padding: 0 7px;
}
.sp-recipe-card .sp-tile-media.image {
  flex: 0 0 auto;
}
/* Recipe card: neutralise legacy hover-reveal nutritionals + fixed image height */
.mealCardCont .sp-recipe-nutrition.nutritionals,
.mealCardCont:hover .sp-recipe-nutrition.nutritionals,
.filtered .sp-recipe-nutrition.nutritionals {
  display: block !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-subtle) !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: default;
}
/* Every card photo is 16:9 (CardRecipe.md, LayoutCard.md) */
.sp-recipe-card.mealCardCont .sp-tile-media.image,
.slides.not-filtered .food_card .sp-recipe-card .sp-tile-media.image {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
}
.slides.not-filtered .food_card {
  height: auto !important;
}

/* ==========================================================================
   CLIENT PLANNER — week view (nutritionist/planner2.html + planner/*)
   ========================================================================== */

.sp-planner-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.sp-planner-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sp-planner-toolbar-right {
  display: flex;
  gap: 8px;
}
.sp-planner-toolbar-right .sp-icon-btn {
  width: 36px;
  height: 36px;
  color: var(--ink);
}
.sp-planner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sp-planner-dateform {
  width: 0;
  overflow: visible;
  position: relative;
}
.sp-week-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.sp-week-nav .sp-icon-btn {
  width: 30px;
  height: 30px;
  font-size: 12px;
}
.sp-week-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.sp-week.sevenDayContainer {
  padding: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  margin-bottom: 20px;
  padding-bottom: 6px;
}
.sp-week-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.sp-planner-day.date_child {
  flex: 1 1 0;
  min-width: 250px;
  max-width: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Day header */
.sp-day-head {
  margin-bottom: 12px;
}
.sp-day-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sp-day-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sp-day-title:hover {
  color: var(--brand);
}
.sp-day-menu .sp-kebab {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 15px;
}
.sp-day-menu .dropdown-menu {
  min-width: 170px;
}
.sp-day-menu.in_front {
  position: relative;
  z-index: 1050;
}
.sp-day-type select.date_type {
  width: 100%;
  min-height: var(--control-sm);
  padding: 0 36px 0 12px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-day-type .date_type_ind {
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: transparent;
}
.sp-day-type .date_type_ind.high_int { background: var(--success); }
.sp-day-type .date_type_ind.med_int  { background: var(--warning); }
.sp-day-type .date_type_ind.low_int  { background: var(--danger); }

/* Blocks */
.sp-day-cards {
  display: flex;
  flex-direction: column;
}
.sp-block.outline-box {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: none !important;
}
.sp-block .sp-block-inner {
  margin: 0;
}
.sp-block .sp-block-inner > [class*="col-"] {
  padding: 0;
}
.sp-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
}
.sp-block-title-wrap {
  min-width: 0;
}
.sp-block-time {
  font-size: 12px;
  color: var(--ink-placeholder);
  margin-bottom: 2px;
  cursor: pointer;
}
.sp-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: block;
  overflow-wrap: anywhere;
}
.sp-block-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sp-block-action {
  color: var(--ink-subtle);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.sp-block-action:hover {
  color: var(--brand);
}
.sp-block-action--danger:hover {
  color: var(--danger);
}
.sp-block-items.food-items {
  background: transparent;
  color: var(--ink);
  margin: 0;
  padding: 0 12px;
}
.sp-block-items:empty {
  display: none;
}
.sp-block-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--divider);
  font-size: 12.5px;
  color: var(--ink);
}
.sp-block-item:last-child {
  padding-bottom: 12px;
}
.sp-block-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.sp-block-item-link:hover {
  color: var(--brand);
}
.sp-block-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-subtle);
}
.sp-block-item-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sp-block-item-brand {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-muted);
}
.sp-block-item-kind {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  flex-shrink: 0;
}
.sp-block-item-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sp-block-item:hover .sp-block-item-tools {
  opacity: 1;
}
.sp-block-item-order {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.sp-block-item-remove {
  color: var(--ink-placeholder);
  font-size: 11px;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
}
.sp-block-item-remove:hover {
  color: var(--danger);
}
.sp-block-habit-light .habit-light {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface-subtle);
  display: block;
}
.sp-block-habit-light .habit-light.green { background: var(--success); border-color: var(--success); }
.sp-block-habit-light .habit-light.amber { background: var(--warning); border-color: var(--warning); }
.sp-block-habit-light .habit-light.red   { background: var(--danger);  border-color: var(--danger); }
.sp-block-macros.block-nutrition {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  margin: 0;
}
.sp-block-macro-label {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .sp-block-macro-label {
  color: var(--ink-muted);
}
.sp-block-macro-val {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.sp-block-plate {
  padding: 0 12px 10px !important;
}
.sp-block-plate .sp-plate-btn {
  font-size: 12.5px;
}
.sp-block-plate-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.sp-block--activity.outline-gold {
  border-color: var(--brand);
}
.sp-block-activity-meta {
  padding: 0 12px 12px !important;
  font-size: 12px;
  color: var(--ink-muted);
}
.sp-block--note {
  padding: 12px !important;
}
.sp-block-note-text {
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.sp-block-note-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-block-note-avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
  background-size: cover;
  background-position: center;
}
.sp-block-note-time {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-placeholder);
}

/* Add (+) menu */
.sp-day-add {
  position: relative;
  margin: 4px 0 16px;
  min-height: 32px;
}
.sp-day-add .btn-footer-container {
  position: static;
  display: flex;
  justify-content: center;
  z-index: auto;
}
.sp-day-add .btn-footer-container::before {
  display: none;
}
.sp-day-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--on-brand) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  line-height: 1;
}
.sp-day-add-btn:hover {
  background: var(--brand-hover);
  text-decoration: none;
}
.sp-day-add-menu.reveal-buttons {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
  z-index: 20;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  visibility: hidden;
}
.sp-day-add.active .sp-day-add-menu.reveal-buttons {
  visibility: visible;
}
.sp-day-add.active .btn-footer-container {
  display: flex;
}
.sp-day-add-menu .btn {
  flex: 1 0 45%;
  margin: 0;
  padding: 8px 6px;
  background: var(--surface-subtle) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 1;
  transform: none;
  animation: none !important;
}
.sp-day-add-menu .btn:hover {
  background: var(--border) !important;
}
.sp-day-add-menu.tw-hidden {
  display: none !important;
}

/* Nutrition card pinned to bottom */
.sp-day-nutrition.doc_item {
  margin-top: auto;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-radius: 10px;
  padding: 14px;
  height: auto;
  display: block;
  position: relative;
}
.sp-day-nutrition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}
.sp-day-nutrition-cfg {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 13px;
}
.sp-day-nutrition-cfg:hover {
  color: var(--on-inverse);
}
.sp-day-nutrition-list {
  margin: 0;
}
.sp-day-nutrition .target-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.sp-day-nutrition .target-progress .title {
  width: 34px;
  flex-shrink: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .sp-day-nutrition .target-progress .title {
  color: var(--ink-muted);
}
.sp-day-nutrition .sp-target-wrap {
  flex: 1;
  display: flex;
  min-width: 0;
}
.sp-day-nutrition .target-bar {
  flex: 1;
  position: relative;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border: 0 !important;
}
.sp-day-nutrition .main-bar {
  position: absolute;
  inset: 0;
  width: 0;
  height: 100%;
  background: var(--brand-tan) !important;
}
.sp-day-nutrition .targets {
  position: relative;
  display: block;
  font-size: 11px;
  color: var(--on-inverse);
  padding: 2px 6px;
  margin: 0 !important;
  white-space: nowrap;
  line-height: 16px;
}
.sp-day-nutrition .over-bar-container {
  width: 0;
  height: 20px;
  position: relative;
}
.sp-day-nutrition .over-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-width: 0;
  border-radius: 0 5px 5px 0;
}
.sp-day-nutrition .over-bar {
  display: none;
}
.sp-day-nutrition .over-bar:not([style*="width:0%"]):not([style*="width: 0%"]) {
  display: block;
}
.sp-day-nutrition .over-bar.bg-warning { background: var(--warning) !important; width: 6px !important; }
.sp-day-nutrition .over-bar.bg-danger  { background: var(--danger) !important; width: 6px !important; }
.sp-day-nutrition .over-bar-container:has(.over-bar:not([style*="width:0%"]):not([style*="width: 0%"])) {
  width: 8px;
  margin-left: 2px;
}

/* Weekly average */
.sp-week-average {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-top: 4px;
}
.sp-week-average-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.sp-week-average-item {
  font-size: 13px;
  color: var(--ink-muted);
}
.sp-week-average-item strong {
  color: var(--ink);
}

/* Legacy backdrop used by the day kebab */
.local_blur.modal-backdrop {
  opacity: 0.3;
  z-index: 1040;
}

/* MFP day block */
.sp-planner .date_cards .outline-box.date_card_cont:not(.sp-block) {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* ==========================================================================
   CLIENT PLANNER — day view (mealplan/manage_mealplans.html)
   ========================================================================== */

.sp-dayview {
  max-width: none; /* width comes from .sp-page__inner */
}
.sp-dayview-nav {
  flex-wrap: wrap;
}
.sp-dayview-type {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.sp-dayview-type .date_type_ind {
  width: 40px !important;
  height: 2px;
  border-radius: 2px;
}
/* Day view in the Week view's design: the same toolbar (.sp-ptoolbar) and white panel (.sp-week-panel), each block
   a MealSlot head over a DataTable of its foods, the Block total on the week cards' gold band, and Allergen Info and
   Nutrition Information as cards underneath. (.topcard / .row.header below are the MyFitnessPal rows, still built
   by script.) */
.sp-dayview-panel {
  padding: var(--space-14) var(--space-16) var(--space-16);
}
.sp-dayview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.sp-dayview-head .sp-day-title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-dayview-head .sp-day-title.is-today {
  color: var(--brand);
}
.sp-dayview-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.sp-dayblock {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-dayblock.is-menu-open {
  position: relative;
  z-index: 5;
}
.sp-dayblock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 10px 6px 10px var(--space-12);
}
.sp-dayblock__actions {
  display: flex;
  flex-shrink: 0;
}
/* With a mouse the buttons wait for hover, as on the week cards; touch screens always show them */
@media (hover: hover) {
  .sp-dayblock__actions {
    opacity: 0;
    transition: opacity 0.12s;
  }
  .sp-dayblock:hover .sp-dayblock__actions,
  .sp-dayblock__actions:focus-within,
  .sp-dayblock.is-menu-open .sp-dayblock__actions {
    opacity: 1;
  }
}
.sp-dayblock__client-note {
  margin: 0 var(--space-12) 10px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-dayblock__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-dayblock__row-icon {
  display: inline-flex;
  color: var(--ink-muted);
}
.sp-dayblock__row-text {
  flex: 1;
  min-width: 0;
}
.sp-dayblock__empty {
  margin: 0;
  padding: 0 var(--space-12) var(--space-12);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-dayblock__table {
  border-top: 1px solid var(--divider-row);
}
/* Fixed column widths, so every block's columns line up down the day */
.sp-daytable {
  width: 100%;
  table-layout: fixed;
}
.sp-daytable thead th:nth-child(1) {
  width: 30%;
}
.sp-daytable thead th:nth-child(2) {
  width: 12%;
}
.sp-daytable thead th:last-child {
  width: 48px;
}
/* Each food is its own tbody (it and its ingredients); no Bootstrap 2px line between them */
.sp-daytable tbody + tbody {
  border-top: 0;
}
.sp-daytable__title,
.sp-daytable__size {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-daytable th:first-child,
.sp-daytable td:first-child {
  padding-left: var(--space-12);
}
.sp-daytable th:last-child,
.sp-daytable td:last-child {
  padding-right: var(--space-8);
}
.sp-daytable__title .meal_link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.sp-daytable__title .meal_link:hover {
  color: var(--brand);
}
.sp-daytable__brand,
.sp-daytable__unit,
.sp-daytable__size span {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-daytable__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  vertical-align: middle;
}
.sp-daytable__expand:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.sp-daytable__expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.sp-daytable__size {
  white-space: nowrap;
}
.sp-daytable__size-btn {
  padding: 0;
  border: 0;
  background: none;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  cursor: pointer;
}
.sp-daytable__size-btn:hover {
  color: var(--brand);
}
.sp-daytable td.num {
  white-space: nowrap;
}
.sp-daytable__actions {
  width: 44px;
  text-align: right;
}
.sp-daytable__ingredient td {
  height: 36px;
  background: var(--surface-sunken);
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-daytable__ingredient .sp-daytable__title {
  padding-left: var(--space-32) !important;
}
/* The block total: the week cards' gold band */
.sp-daytable__total th,
.sp-daytable__total td {
  height: 40px;
  border-top: 0;
  background: var(--brand-soft);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--on-brand-soft);
}
.sp-daytable__total .sp-daytable__unit {
  color: var(--on-brand-soft);
}
.sp-daytable__total > :first-child {
  border-bottom-left-radius: var(--radius-xl);
}
.sp-daytable__total > :last-child {
  border-bottom-right-radius: var(--radius-xl);
}
.sp-dayview .sp-dayadd {
  margin-top: 0;
}
.sp-dayview-empty {
  padding: var(--space-24) var(--space-16);
  text-align: center;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-dayview-empty p {
  margin: 0 0 var(--space-8);
}
.sp-dropdown-caption {
  padding: var(--space-8) var(--space-12) var(--space-4);
  font: var(--text-caption);
  color: var(--ink-subtle);
}
.sp-dayview-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  margin: var(--space-16) 0 var(--space-24);
}
.sp-dayview-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-20);
}
.sp-dayview-card .sp-panel-title {
  margin: 0 0 var(--space-12);
}
.sp-dayview-info__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.sp-dayview-card .table {
  margin-bottom: var(--space-12);
}
.sp-dayview-info__sub {
  padding-left: var(--space-32) !important;
  color: var(--ink-secondary);
}
.sp-dayview-info__empty {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-dayview-info__flag {
  display: inline-flex;
  vertical-align: middle;
  color: var(--ink-muted);
}
/* Phones: the minor columns go, the bottom cards stack */
@media (max-width: 900px) {
  .sp-daytable__minor {
    display: none;
  }
}
@media (max-width: 767px) {
  .sp-dayview-info {
    grid-template-columns: 1fr;
  }
  .sp-dayblock__table {
    overflow-x: auto;
  }
  .sp-daytable {
    min-width: 560px;
  }
}

.sp-dayview #mealtable .topcard.outline-box,
.sp-dayview #mealtable .topcard {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0;
  margin-bottom: 24px;
  box-shadow: none;
  overflow: visible;
}
.sp-dayview #mealtable .psuedo-block {
  margin: 0;
}
.sp-dayview #mealtable .psuedo-block > [class*="col-"] {
  padding-left: 20px;
  padding-right: 20px;
}
.sp-dayview .block_header .row.border-bottom {
  padding: 16px 0 !important;
  margin: 0 0 4px !important;
  border-bottom: 1px solid var(--divider) !important;
  align-items: center;
}
.sp-dayview .block_header .row.border-bottom > [class*="col-"] {
  padding: 0 4px;
}
.sp-dayview .block_header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.sp-dayview .block_header .btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--ink);
  border: 0;
  margin-left: 6px !important;
}
.sp-dayview .block_header .btn-icon:hover {
  background: var(--border);
}
.sp-dayview .block_header .btn-icon span {
  display: none;
}
.sp-dayview .block_notes {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 0 20px 8px;
}
.sp-dayview .row.header {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-subtle);
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  margin: 0;
}
.sp-dayview .row.header > [class*="col-"],
.sp-dayview .mealitem .mainrow > [class*="col-"],
.sp-dayview .ingredient > [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
}
.sp-dayview .mealitem {
  margin: 0;
}
.sp-dayview .mealitem .mainrow {
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
  color: var(--ink);
  align-items: center;
}
.sp-dayview .mealitem .mainrow .title a.meal_link {
  color: var(--ink);
  font-weight: 500;
}
.sp-dayview .mealitem .mainrow .title a.meal_link:hover {
  color: var(--brand);
}
.sp-dayview .mealitem .nutrient {
  color: var(--ink);
}
.sp-dayview .mealitem .ing_size {
  color: var(--ink-muted);
}
.sp-dayview .mealitem .btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-subtle);
  border: 0;
}
.sp-dayview .mealitem .btn-icon:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}
.sp-dayview .mealitem .btn-icon span {
  display: none;
}
.sp-dayview .ingredient_parent {
  background: var(--surface-subtle) !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.sp-dayview .ingredient_parent.invisible {
  display: none;
}
.sp-dayview .ingredient_parent:not(.invisible) {
  visibility: visible;
}
.sp-dayview .row.border-top {
  border-top: 1px solid var(--divider) !important;
  font-weight: 700;
  font-size: 13px;
  margin: 0 !important;
  padding: 14px 0 16px !important;
}
.sp-dayview .row.border-top > [class*="col-"] {
  padding-left: 6px;
  padding-right: 6px;
}
.sp-dayview .add_row .btn-footer-container::before {
  display: none;
}
.sp-dayview .add_row .btn-footer-container {
  gap: 10px;
  margin: 0 0 30px !important;
}
.sp-dayview .showNoMealplansText {
  padding: 30px 20px;
  background: var(--surface-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.sp-dayview .showNoMealplansText p {
  margin: 0 0 4px;
  font-size: 13.5px;
}
.sp-dayview-allergens {
  margin-top: 0 !important;
}
.sp-dayview .allergen_list .icons_cont {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sp-dayview .allergen_list .icon_c {
  font-size: 12px;
  color: var(--ink-muted);
}
.sp-dayview #nutrient_block table {
  width: 100%;
  font-size: 12.5px;
  color: var(--ink);
}
.sp-dayview #nutrient_block thead td {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-subtle);
  padding: 6px 0;
  border-bottom: 1px solid var(--divider);
}
.sp-dayview #nutrient_block tbody td {
  padding: 5px 0;
  border-bottom: 1px solid var(--divider);
}
.sp-dayview #nutrient_block tbody td + td {
  color: var(--ink-muted);
}
.sp-dayview #nutrient_block .table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}
.sp-dayview #nutrient_block a {
  font-size: 12px;
}
.sp-dayview .row[style*="margin-top: 1em"] > [class*="col-"] {
  margin-bottom: 20px;
}
.sp-dayview-type .date_type_ind {
  background: transparent;
}
.sp-dayview-type .date_type_ind.high_int { background: var(--success); }
.sp-dayview-type .date_type_ind.med_int  { background: var(--warning); }
.sp-dayview-type .date_type_ind.low_int  { background: var(--danger); }

/* ==========================================================================
   ADD TO BLOCK MODAL (#addFoodModal, foods/create_mealplan_modal_new.html)
   coach-app "Add to: …": a 720px light modal with a modal-title header,
   source tabs (Tabs.md), a search field and result cards (+ in brand, name,
   macro bars in brand on surface-hover, quantity and unit). The rows, the
   basket and the food detail step are built by js/fmp_create_mealplan_modal.js,
   which also keeps each row's added state in its Font Awesome classes
   (.fa-plus / .fa-check / .fa-minus, .bg-gold); the glyphs are drawn here
   from our own icons.
   ========================================================================== */

#addFoodModal .modal-dialog {
  max-width: 720px !important;
}
#addFoodModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  padding: 0;
}
#addFoodModal .mealplan_create {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#addFoodModal .mealplan_create > .modal-header {
  margin: 0;
  border: 0;
}
/* Only the active step flexes; inactive tab panes stay hidden (Bootstrap) */
#addFoodModal .mealplan_create > .tab-content,
#addFoodModal #search_and_select_food.active,
#addFoodModal #search_and_select_food > .tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Source tabs: Regional, Foods, All sources, Recipe, Favourites, Habits */
#addFoodModal .search_switcher.nav-pills {
  flex-shrink: 0;
  margin: 0;
  padding: 0 var(--space-28);
  border: 0;
}
#addFoodModal .search_switcher .nav-link {
  border-bottom: 0 !important;
}
/* css-v2's -1px overlap (for an underlined tab strip): this bar has none, and its scroll box clipped the active tab */
#addFoodModal .modal-content .search_switcher .nav-link.active {
  margin-bottom: 0;
}
#addFoodModal #search_and_select_food > .tab-content > .tab-pane {
  flex: 1;
  min-height: 420px;
  padding: var(--space-12) var(--space-28) var(--space-28);
  overflow-y: auto;
}
#addFoodModal .form-control.in_pane_search {
  margin: 0 0 var(--space-16) !important;
}
/* Filter chips (food categories, recipe filters): FilterPills.md */
#addFoodModal .filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  height: auto;
  margin-bottom: var(--space-12);
  padding: 0;
  overflow: visible;
}
#addFoodModal .filter-container .badge {
  position: static;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-full);
  background: var(--surface-card) !important;
  color: var(--ink-secondary) !important;
  font: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
}
#addFoodModal .filter-container .badge:hover {
  background: var(--surface-hover) !important;
  color: var(--ink) !important;
}
#addFoodModal .filter-container .search_tags.selected {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--surface-card) !important;
  font-weight: 600;
}
/* The chips wrap, so the old "⋯ show more" toggle isn't needed */
#addFoodModal .filter-container .filter-container-button {
  display: none;
}
#addFoodModal .foods_cont {
  margin: 0 !important;
}
.sp-atb-empty,
#addFoodModal .foods_cont > .text-center {
  font: var(--text-body-sm);
  color: var(--ink-muted) !important;
}
.sp-atb-caption {
  margin-bottom: var(--space-8);
  font: var(--text-caption);
  color: var(--ink-muted);
}
/* Foods tab: the search with its Sources filter beside it */
.sp-atb-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
#addFoodModal .sp-atb-search-row .form-control.in_pane_search {
  flex: 1;
  min-width: 0;
  margin: 0 !important; /* the row has the gap below it, not the input (the rule above is !important) */
}
.sp-food-sources {
  position: relative;
  flex-shrink: 0;
}
.sp-food-sources > .sp-btn {
  height: var(--control-md);
}
.sp-food-sources__menu {
  min-width: 240px;
  padding: var(--space-12);
}
.sp-food-sources__menu .sp-form-label {
  margin-bottom: var(--space-8);
}
.sp-food-sources__option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-6) 0;
  font: var(--text-body-sm);
  color: var(--ink);
  cursor: pointer;
}
.sp-food-sources__region {
  display: block;
  margin: var(--space-4) 0 var(--space-8) var(--space-24);
  font: var(--text-caption);
  color: var(--ink-muted);
}
#addFoodModal .sp-food-sources__region .select_region_for_search {
  margin: var(--space-4) 0 0;
}
#addFoodModal .select_region_for_search {
  width: 100%;
  height: var(--control-md);
  margin-bottom: var(--space-12);
  padding: 0 var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: var(--text-body);
  color: var(--ink);
}

/* Result card */
#addFoodModal .atb-foodrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-14);
  margin: 0 0 var(--space-10);
  padding: var(--space-14);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
#addFoodModal .atb-foodrow > [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
#addFoodModal .atb-foodrow > .col-1 {
  flex: 0 0 36px;
  width: 36px;
}
#addFoodModal .atb-foodrow > .col-2 {
  flex: 0 0 44px;
  width: 44px;
}
#addFoodModal .atb-foodrow > .col-9,
#addFoodModal .atb-foodrow > .col-11 {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
#addFoodModal .atb-foodrow .image-container {
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-media);
}
#addFoodModal .atb-foodrow .image-container .bg-image {
  width: 44px;
  height: 44px;
  max-height: none;
}
/* + / ✓ / − button: 36px brand square; the glyph is a mask of our icon */
#addFoodModal .atb-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
}
#addFoodModal .atb-button:hover {
  background: var(--brand-hover);
}
#addFoodModal .atb-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--glyph-add) center / contain no-repeat;
  mask: var(--glyph-add) center / contain no-repeat;
}
#addFoodModal .atb-button.fa-check::before {
  -webkit-mask-image: var(--glyph-check);
  mask-image: var(--glyph-check);
}
#addFoodModal .atb-button.fa-minus::before {
  -webkit-mask-image: var(--glyph-minus);
  mask-image: var(--glyph-minus);
}
/* Added to the basket: ink, so the state isn't colour alone (it's a tick) */
#addFoodModal .atb-button.bg-gold {
  background: var(--ink) !important;
  color: var(--surface-card);
}
/* Inside a card: [title | quantity + unit], then the macro values, then
   their bars (values and bars are separate rows from the script, so both
   use the same four equal columns to line up) */
#addFoodModal .atb-foodrow .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-14);
  margin: 0;
}
#addFoodModal .atb-foodrow .row > [class*="col-"] {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
}
#addFoodModal .atb-foodrow .row > .row-title {
  flex: 1 1 auto;
  overflow: hidden;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Only the name opens the food (its onclick); the source chip is just a label */
#addFoodModal .atb-foodrow .row-title span[data-item] {
  cursor: pointer;
}
#addFoodModal .atb-foodrow .row-title span[data-item]:hover {
  text-decoration: underline;
}
/* Foods results: the name with where it comes from (a small light tag) on one line, a long name taking the
   ellipsis so the tag is never cut off; the brand under it in caption text */
#addFoodModal .sp-atb-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}
#addFoodModal .sp-atb-name-line > span[data-item] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#addFoodModal .sp-atb-source {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-xs);
  background: var(--surface-subtle);
  color: var(--ink-muted);
  font: var(--text-caption);
  white-space: nowrap;
  cursor: default; /* a label, not a link */
}
#addFoodModal .sp-atb-brand {
  display: block;
  overflow: hidden;
  font: var(--text-caption);
  color: var(--ink-muted);
  text-overflow: ellipsis;
  cursor: default;
}
#addFoodModal .atb-foodrow .row > .row-title + [class*="col-"] {
  flex: 0 0 auto;
}
/* Quantity + unit */
#addFoodModal .atb-foodrow .row-title + [class*="col-"] .row {
  gap: var(--space-8);
}
#addFoodModal .atb-foodrow .row-title + [class*="col-"] .row > [class*="col-"] {
  flex: 0 0 auto;
}
#addFoodModal .atb-foodrow .row.mt-2 {
  margin-top: var(--space-10) !important;
}
#addFoodModal .atb-foodrow .row.mt-2 + .row {
  margin-top: var(--space-4);
}
/* Macro values (KCAL, CHO, PRO, FAT) */
#addFoodModal .atb-foodrow .row.mt-2 > [class*="col-"] {
  font: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Phone (mobile.md stacking): the name on its own line, quantity and unit under it; macros two to a line */
@media (max-width: 575px) {
  #addFoodModal .atb-foodrow .row:has(> .row-title) {
    flex-wrap: wrap;
    gap: var(--space-8);
  }
  #addFoodModal .atb-foodrow .row > .row-title {
    flex: 1 1 100%;
    white-space: normal;
  }
  #addFoodModal .sp-atb-name-line {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }
  #addFoodModal .atb-foodrow .row.mt-2 {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }
  #addFoodModal .atb-foodrow .row.mt-2 > [class*="col-"] {
    flex: 1 1 40%;
  }
}
#addFoodModal .atb-foodrow .progress {
  height: 6px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-hover) !important;
}
/* Against the day's target: what's already planned (brand-tan, as the planner's day bars, NutritionBar.md), then
   what this food adds (ink), with a hairline between them */
#addFoodModal .atb-foodrow .progress-bar {
  background: var(--brand-tan) !important;
}
#addFoodModal .atb-foodrow .progress-bar.bg-warning {
  background: var(--ink) !important;
  box-shadow: -2px 0 0 var(--surface-card);
}
/* Quantity and unit */
#addFoodModal .portion_input,
#addFoodModal .atb-foodrow input,
#addFoodModal .atb-foodrow select {
  height: 36px !important;
  margin: 0 !important;
  padding: 0 var(--space-8);
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card) !important;
  font: var(--text-body-sm);
  color: var(--ink) !important;
}
#addFoodModal .atb-foodrow select {
  border-color: transparent !important;
  background-color: var(--surface-muted) !important;
  color: var(--ink-secondary) !important;
}
#addFoodModal .atb-foodrow .input-small {
  width: 48px !important;
  text-align: center;
}
#addFoodModal .atb-foodrow select {
  width: auto;
  min-width: 96px;
  max-width: 160px;
}
#addFoodModal .more_results {
  height: auto;
}

/* Basket bar: chosen items' thumbnails, then Edit and Add to block */
#addFoodModal .basket_bar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  height: auto;
  padding: var(--space-16) var(--space-28);
  border-top: 1px solid var(--divider);
  background: var(--surface-sunken);
}
#addFoodModal .basket_bar.d-none {
  display: none !important;
}
#addFoodModal .basket_bar::before {
  content: none;
}
#addFoodModal .basket_bar .images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  min-width: 0;
}
#addFoodModal .basket_bar .images img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.basket_bar__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-10);
}

/* Food detail step (#size_and_save_food) */
#addFoodModal #size_and_save_food {
  padding: 0 var(--space-28) var(--space-28);
  overflow-y: auto;
}
#addFoodModal .back-button-overlay {
  margin-bottom: var(--space-16);
}
#addFoodModal .sp-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}
#addFoodModal .sp-back-link:hover {
  color: var(--ink);
  text-decoration: none;
}

/* ==========================================================================
   CLIENT PROGRESS (analysis/progress/edit.html + view.html)
   ========================================================================== */

.progress-container .outline-box {
  padding: 20px !important;
}
.progress-container .outline-box .header {
  margin-bottom: 12px !important;
}
.progress-container .outline-box .header b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.progress-container .outline-box .target {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 6px;
}
.progress-container .no-chart-data .btn-icon,
.progress-container .btn-group .btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  margin-left: 6px !important;
  font-size: 12px;
}
.progress-container > .d-flex > .d-flex b {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.progress-container .btn-icon.btn-tooltip {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  margin-left: 8px !important;
}
.progress-container .btn-icon.btn-tooltip span {
  display: none;
}
.progress-container canvas.progress-chart {
  max-height: 160px;
}

/* ==========================================================================
   BUSINESS SETTINGS (templates/business_settings.html)
   ========================================================================== */

/* Shared by Business Settings and Account Settings (SettingsNav.md):
   a 220px white nav card beside one white panel, 20px apart. */
.sp-settings {
  max-width: none; /* width comes from .sp-page__inner */
  margin: 0 auto;
}
.sp-settings-layout {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
}
.sp-settings-nav-card,
.sp-settings-nav-col {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}
.sp-settings-nav.list-group {
  display: block;
  border-radius: 0;
  margin: 0 !important;
}
/* Items: Title Case, body-sm, 10/12 padding, radius-sm, ink-muted 500;
   active on brand-soft with on-brand-soft 600 */
.sp-settings-nav .list-group-item,
.sp-account-settings .sp-settings-nav .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 10px 12px;
  margin: 0 0 2px;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent;
  color: var(--ink-muted);
  font: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
}
.sp-settings-nav .list-group-item:hover,
.sp-account-settings .sp-settings-nav .list-group-item:hover:not(.active) {
  background: var(--surface-hover);
  color: var(--ink);
}
/* Must beat the generic "a.list-group-item.active:focus" ink rule in
   components.css, which otherwise turns a clicked (focused) tab black */
.sp-settings-nav .list-group-item.active,
.sp-settings-nav a.list-group-item.active,
.sp-settings-nav a.list-group-item.active:hover,
.sp-settings-nav a.list-group-item.active:focus,
.sp-account-settings .sp-settings-nav .list-group-item.active {
  background: var(--brand-soft) !important;
  border: 0 !important;
  color: var(--on-brand-soft) !important;
  font-weight: 600;
}
/* External hand-off (e.g. Billing Details → Stripe): 14px icon */
.sp-settings-nav .list-group-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-muted);
}
/* Group captions inside the card (Account Settings) */
.sp-settings-group-label {
  padding: var(--space-12) 12px var(--space-4);
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-subtle);
}
.sp-settings-group-label:first-child {
  padding-top: var(--space-4);
}
/* Panel: 28px padding, modal-title heading, one-line description,
   section-title sub-headings, Save changes bottom-right over a divider */
.sp-settings-panel {
  flex: 1;
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-28);
}
.sp-panel-title,
.sp-settings-panel h1 {
  margin: 0 0 var(--space-6);
  font: var(--text-modal-title);
  letter-spacing: var(--text-modal-title-tracking);
  color: var(--ink);
}
.sp-panel-desc {
  margin: 0 0 var(--space-20);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-panel-title:has(+ :not(.sp-panel-desc)) {
  margin-bottom: var(--space-16);
}
.sp-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--divider);
}
.sp-settings-panel .outline-box {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.sp-settings-panel .outline-box .table {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Integrations: title, status line and action sit straight in the panel */
.sp-settings-panel #nutr_settings_cont .topcard_colsafe {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.sp-settings-panel .sp-stripe-panel p {
  margin: 0 0 var(--space-16);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
/* Manage Subscription: each plan is a card on surface-page with the name
   and price left and a small danger Cancel membership right */
.sp-settings-panel #subscription_cont .topcard,
.sp-settings-panel #subscription_cont .outline-box,
.sp-settings-panel .pdf_preview {
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: none;
}
.sp-settings-panel #subscription_cont .outline-box h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-settings-panel #subscription_cont .outline-box h3 > div:first-child::first-line {
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-settings-panel #subscription_import {
  font: var(--text-body-sm);
  color: var(--ink);
}
/* Section header with an action on the right (Manage Coaches) */
.sp-settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
}
.sp-settings-section-head .sp-panel-desc {
  margin: 0;
}
/* Borderless table (DataTable.md, Manage coaches layout): overline-free
   caption header with a divider, 60px rows with a divider-row line */
.sp-table-borderless .table {
  border: 0 !important;
}
.sp-table-borderless .table th,
.sp-table-borderless .table thead th {
  height: auto;
  padding: 0 var(--space-16) var(--space-10) 0;
  background: transparent;
  border-bottom: 1px solid var(--divider);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-table-borderless .table td {
  height: 60px;
  padding: var(--space-8) var(--space-16) var(--space-8) 0;
  border-top: 0;
  border-bottom: 1px solid var(--divider-row);
}
.sp-table-borderless .table tr:last-child td {
  border-bottom: 0;
}
.sp-table-borderless .table th:last-child,
.sp-table-borderless .table td:last-child {
  padding-right: 0;
}
.coach-row-name {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
.coach-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--brand-soft);
  background-size: cover;
  background-position: center;
  color: var(--on-brand-soft);
  font: var(--text-caption);
  font-weight: 700;
}
.coach-row-title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.coach-row-email {
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Values read as plain text (they still open the access modal until the
   edit-pencil to-do is decided) */
.coach-permission,
.sp-settings-panel .client-mgmt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-secondary) !important;
  font: var(--text-body-sm);
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
}
.coach-permission:hover,
.sp-settings-panel .client-mgmt-btn:hover {
  color: var(--ink) !important;
  text-decoration: underline;
}
.sp-settings-panel .client-mgmt-btn.disabled {
  color: var(--ink-muted) !important;
  cursor: default;
  text-decoration: none;
}
.sp-settings-panel .client-mgmt-row > .d-flex {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
}
.sp-settings-panel .client-mgmt-row .fa-question-circle {
  margin: 0 !important;
}
.sp-settings-panel .client-mgmt-row:has(.fa-question-circle) .client-mgmt-btn {
  color: var(--danger) !important;
}
/* Manage Coaches when the table is narrow (phones, and laptops where the
   sidebar and settings nav leave the panel little room; mobile.md: simple
   lists wrap each row): each coach stacks as the name, then Permission and
   Client management as caption-labelled lines, and the header row is dropped */
.sp-table-borderless:has(.sp-coach-table) {
  container-type: inline-size;
}
@container (max-width: 599px) {
  .sp-coach-table,
  .sp-coach-table tbody,
  .sp-coach-table tr,
  .sp-coach-table td {
    display: block;
    width: 100%;
  }
  .sp-coach-table thead {
    display: none;
  }
  .sp-coach-table tr {
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--divider-row);
  }
  .sp-coach-table tr:last-child {
    border-bottom: 0;
  }
  .sp-table-borderless .sp-coach-table td {
    height: auto;
    padding: 0;
    border: 0;
  }
  .sp-coach-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin-top: var(--space-8);
    padding-left: 48px; /* under the name, past the 36px avatar and its gap */
    text-align: left;
  }
  .sp-coach-table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font: var(--text-caption);
    color: var(--ink-muted);
  }
  .sp-coach-table .client-mgmt-row {
    justify-content: flex-end !important;
    text-align: right;
  }
  .sp-coach-table td[data-label] > * {
    min-width: 0;
  }
  /* css-v2 gives the value a 140px minimum on one line; let it wrap instead */
  .sp-settings-panel .sp-coach-table .client-mgmt-btn {
    min-width: 0;
    max-width: none;
    white-space: normal;
    text-align: right;
  }
}
/* The section head wraps its Add new member button under the description */
@media (max-width: 767px) {
  .sp-settings-section-head {
    flex-wrap: wrap;
    gap: var(--space-12);
  }
}
/* Custom Branding: option checkboxes stacked */
.sp-branding-option {
  margin: 0 0 var(--space-12);
}
.sp-branding-option:first-of-type {
  margin-top: var(--space-4);
}
/* Single-choice style option rows (e.g. cancellation reasons): 44px
   bordered rows, the checked row takes the selected tile style */
.sp-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
}
.sp-choice-list > legend {
  margin-bottom: var(--space-8);
}
.sp-choice-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--control-md);
  margin: 0;
  padding: 0 var(--space-14);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  color: var(--ink);
  cursor: pointer;
}
.sp-choice-row input {
  margin: 0 !important;
  position: static;
}
.sp-choice-row:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-subtle);
}
.sp-settings-panel #custombranding .col-8 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 0 !important;
}
.sp-settings-panel h3 {
  font: var(--text-section-title);
  letter-spacing: var(--text-section-title-tracking);
}
.sp-stripe-panel p {
  font-size: 14px;
  color: var(--ink-muted);
}
.sp-settings-panel .client-mgmt-btn {
  font-size: 12px;
}
@media (max-width: 767px) {
  .sp-settings-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .sp-settings-panel {
    padding: var(--space-20);
  }
  /* Settings navigation becomes a dropdown (mobile.md; snippets/settings_nav_dropdown.html):
     a 44px select-style trigger showing the current section, the nav list
     opening under it as a DropdownMenu with the current section ticked */
  .sp-settings-nav-card,
  .sp-settings-nav-col {
    position: relative;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
  }
  .sp-settings-nav-card > .sp-settings-nav-trigger,
  .sp-settings-nav-col > .sp-settings-nav-trigger {
    display: flex;
  }
  .sp-settings-nav.list-group {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-4));
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-menu);
  }
  .is-open > .sp-settings-nav.list-group {
    display: block;
  }
  .sp-settings-nav .list-group-item,
  .sp-account-settings .sp-settings-nav .list-group-item {
    min-height: 40px;
    padding: 0 10px;
  }
  .sp-settings-nav .list-group-item.active .sp-settings-nav__tick {
    display: inline-flex;
  }
}
.sp-settings-nav-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  height: var(--control-md);
  padding: 0 var(--space-12) 0 var(--space-14);
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.sp-settings-nav-trigger svg {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 0.12s ease;
}
.is-open > .sp-settings-nav-trigger svg {
  transform: rotate(180deg);
}
.sp-settings-nav-trigger:focus-visible {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-focus);
}
.sp-settings-nav__tick {
  display: none;
}
.sp-settings-nav .list-group-item .sp-settings-nav__tick svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

/* ==========================================================================
   SERVICES / ENQUIRIES
   ========================================================================== */

.sp-services,
.sp-enquiries {
  max-width: none; /* width comes from .sp-page__inner */
  margin: 0 auto;
}
.sp-service-period {
  font: var(--text-caption);
  color: var(--ink-muted);
}
/* Service editor: currency select joined to the price, count + unit for length */
.sp-price-field,
.sp-length-field {
  display: flex;
  gap: var(--space-8);
}
.sp-price-field select {
  flex: 0 0 88px;
}
.sp-length-field > span {
  flex: 0 0 80px;
}
.sp-length-field select {
  flex: 1 1 auto;
  min-width: 0;
}
.sp-services-callout {
  margin-bottom: var(--space-20);
}
.sp-services-callout a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
}
.sp-archived-services {
  margin-top: 28px;
}
.sp-enquiry .sp-enquiry-row.topcard {
  box-shadow: none;
  padding: 16px 22px;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--divider);
}
.sp-enquiry:last-child .sp-enquiry-row.topcard {
  border-bottom: 0;
}
.sp-enquiry-detail {
  padding: 4px 22px 18px;
  background: color-mix(in srgb, var(--surface-subtle) 60%, transparent);
  border-bottom: 1px solid var(--divider);
}
.sp-enquiry-contact {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-muted);
  margin: 8px 0 12px;
}
.sp-enquiry-contact i {
  margin-right: 4px;
}
.sp-enquiry-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   APPOINTMENTS CALENDAR (nutritionist/planner.html + bootstrap-calendar)
   ========================================================================== */

.sp-calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sp-calendar-title {
  min-width: 240px;
  margin: 0;
  text-align: center;
}
.sp-calendar-card {
  padding: 0;
  overflow: hidden;
}
.sp-calendar-scroll {
  overflow-x: auto;
}
.sp-calendar-page .cal-context {
  min-width: 640px;
}
.sp-calendar-page .cal-row-fluid,
.sp-calendar-page .cal-month-box .cal-row-fluid {
  margin: 0;
  border: 0;
}
.sp-calendar-page .cal-month-box,
.sp-calendar-page .cal-week-box {
  border: 0;
  border-radius: 0;
}
/* Weekday header row on surface-sunken */
.sp-calendar-page .cal-row-head [class*="cal-cell"],
.sp-calendar-page .cal-row-head [class*="cal-cell"]:first-child {
  padding: var(--space-12);
  background: var(--surface-sunken);
  border: 0;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-caption);
  font-weight: 700;
  color: var(--ink-secondary);
  text-align: center;
}
.sp-calendar-page .cal-month-box [class*="cal-cell"] {
  min-height: 96px;
  border: 0;
  border-right: 1px solid var(--divider-row);
  border-top: 1px solid var(--divider-row);
  background: var(--surface-card);
}
.sp-calendar-page .cal-month-box .cal-row-fluid:first-child [class*="cal-cell"] {
  border-top: 0;
}
.sp-calendar-page .cal-month-box [class*="cal-cell"]:last-child {
  border-right: 0;
}
/* The day inside each cell (bootstrap-calendar names it cal-day-inmonth /
   cal-day-outmonth, plus cal-day-today) */
.sp-calendar-page .cal-month-box .cal-cell > div {
  position: relative;
  min-height: 96px;
  padding: var(--space-8);
  border: 0;
  font: var(--text-caption);
  color: var(--ink);
}
.sp-calendar-page .sp-cal-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font: var(--text-caption);
  font-weight: 600;
}
.sp-calendar-page .cal-week-box .cal-day-weekend,
.sp-calendar-page .cal-month-box .cal-day-weekend,
.sp-calendar-page .cal-day-today {
  background: transparent !important;
}
.sp-calendar-page .calendar-container .cal-day-today::after {
  content: none;
}
.sp-calendar-page .cal-row-head .cal-day-today {
  background: var(--surface-sunken) !important;
  color: var(--ink);
}
/* Week view: the head row's border already separates it from the events */
.sp-calendar-page .calendar-container hr {
  display: none;
}
/* Today: the number in a solid ink circle */
.sp-calendar-page .cal-day-today .sp-cal-daynum {
  background: var(--ink);
  color: var(--surface-card);
}
/* Days outside the month: sunken, no number */
.sp-calendar-page .cal-month-box [class*="cal-cell"]:has(> .cal-day-outmonth) {
  background: var(--surface-sunken);
}
.sp-calendar-page .cal-day-outmonth .sp-cal-daynum {
  visibility: hidden;
}
.sp-calendar-page #cal-slide-box,
.sp-calendar-page .cal-slide-content {
  background: var(--surface-subtle);
  color: var(--ink);
  border: 0;
  box-shadow: none;
}
.sp-calendar-page .calendar-container .events-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
/* Appointment labels (CalendarMonth.md): brand-soft, 12/600, one line */
.sp-cal-event,
.sp-calendar-page .calendar-container .event-box {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-left: 0;
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: var(--text-caption);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sp-cal-event:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-cal-event__time {
  font-weight: 500;
}
/* Week view keeps title and time on two lines */
.sp-calendar-page .calendar-container .sp-cal-event--stacked {
  margin-bottom: var(--space-4);
  padding: var(--space-6) var(--space-8);
  white-space: normal;
}
.sp-cal-event--stacked .small {
  font: inherit;
}
.sp-cal-event--stacked .small + .small {
  font-weight: 500;
}
.sp-calendar-page .cal-week-box .cal-day-hour {
  border-top: 1px solid var(--divider-row);
  color: var(--ink);
}
.sp-calendar-page .cal-week-box .cal-day-hour .cal-day-hour-part {
  border-top: 1px solid var(--divider-row);
}
.sp-calendar-page .cal-week-box .cal-day-hour .span1 {
  color: var(--ink-muted);
}
.sp-calendar-page .cal-hours {
  display: block;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Appointment form (single_appointment.html, loaded into the appointment
   modal on Appointments, Team schedule and Scheduled posts) */
.sp-appt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-appt-form label,
.sp-appt-form .sp-label {
  display: block;
}
.sp-appt-form .form-control,
.sp-appt-form .bootstrap-select {
  margin-bottom: 0 !important;
}
/* Editing: planner.html swaps the client picker for its plain summary */
.sp-appt-form .bootstrap-select.show-tick:not(:has(button)) {
  display: flex;
  align-items: center;
  min-height: var(--control-md);
  padding: 0 var(--space-14);
  font: var(--text-body);
  color: var(--ink);
}
.sp-appt-when {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-12);
  align-items: start;
}
.sp-appt-duration {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
@media (max-width: 600px) {
  .sp-appt-when {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   COACH PROFILE (nutritionist/profile.html)
   ========================================================================== */

/* Two columns (prototype): a 300px side column of cards, the main column
   fills the rest; one column on a phone. Cards are surface-card, radius-xl,
   20px padding (24px sides on the main column); section headings are
   section-title with a 36px ghost pencil. */
.sp-profile {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}
.sp-profile-side,
.sp-profile-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.sp-profile-card {
  padding: var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-profile-card--wide {
  padding: var(--space-20) var(--space-24);
}
.sp-profile-card--list {
  padding-bottom: var(--space-8);
}

/* Identity: 72px avatar with Change photo beside it, name, job title, location */
.sp-profile-id {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-12);
}
.sp-profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--brand-soft) center / cover no-repeat;
  color: var(--on-brand-soft);
  font: var(--text-modal-title);
  font-weight: 700;
}
.sp-profile-photo-form {
  display: flex;
  gap: var(--space-8);
  margin: 0;
}
.sp-profile-photo-form #submitImage {
  display: none;
}
.sp-profile-who {
  margin-top: var(--space-14);
}
.sp-profile-name {
  margin: 0;
  font: var(--text-modal-title);
  letter-spacing: var(--text-modal-title-tracking, -0.01em);
  color: var(--ink);
}
.sp-profile-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 28px;
  margin-top: 2px;
}
.sp-profile-jobtitle {
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-iconbtn--xs {
  width: 28px;
  height: 28px;
}
.sp-profile-location,
.sp-profile-add-location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 28px;
  margin-top: var(--space-4);
  font: var(--text-body-sm);
}
.sp-profile-location {
  color: var(--ink-secondary);
}
.sp-profile-location svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-profile-location.is-editable {
  cursor: pointer;
}
.sp-profile-add-location {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}
.sp-profile-location-edit form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* Sections inside a card, split by dividers */
.sp-profile-section {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--divider);
}
.sp-profile-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 32px;
  margin-bottom: var(--space-8);
}
.sp-profile-section__title {
  margin: 0;
  font: var(--text-section-title);
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Heading pencils are 36px ghost icon buttons (ProfileHeader.md) */
.sp-profile-section__head .sp-iconbtn {
  width: 36px;
  height: 36px;
  margin-right: -8px;
}
.sp-profile-section__head .sp-iconbtn svg,
.sp-iconbtn--xs svg {
  width: 16px;
  height: 16px;
}
.sp-profile-head-action {
  margin-right: -8px;
}
.sp-profile-empty {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-profile-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-profile-contact a {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  text-decoration: none;
}
.sp-profile-contact a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-profile-contact a:hover span {
  color: var(--ink);
  text-decoration: underline;
}
.sp-profile-contact svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.sp-profile-skills-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.sp-profile-skills-edit .select2-container {
  width: 100% !important;
}
/* Editing: the chips live in the picker, so hide the read-only tags */
.sp-profile-section:has(#EditallSkills.show, #EditallSkills.collapsing) .sp-profile-tags {
  display: none;
}
.sp-profile-section:has(#EditallSkills.show) .sp-profile-skills-edit {
  margin-top: 0;
}
.sp-profile-skills-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}
.sp-profile-skills-actions .sp-btn--tertiary {
  margin-left: -8px;
}
.sp-profile-quick-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* Availability: a tick per mode; a mode not offered is placeholder ink */
.sp-profile-avail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.sp-profile-avail__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-profile-avail__item svg {
  flex-shrink: 0;
  color: var(--success);
}
.sp-profile-avail__item.is-off {
  color: var(--ink-placeholder);
}
.sp-profile-avail__item.is-off svg {
  color: var(--ink-disabled);
}

/* About */
.sp-profile-about {
  font: var(--text-body);
  line-height: 1.55;
  color: var(--ink-secondary);
}
.sp-profile-about:empty::before {
  content: attr(data-empty);
  color: var(--ink-muted);
}
.sp-profile-about p:last-child {
  margin-bottom: 0;
}

/* Service and credential rows: title (+ tag), meta right-aligned, action */
.sp-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-16);
  min-height: 56px;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--divider-row);
}
.sp-profile-row__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-width: 0;
}
.sp-profile-row__title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
a.sp-profile-row__title:hover {
  color: var(--ink);
  text-decoration: underline;
}
.sp-profile-row__meta {
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sp-profile-row .sp-kebab,
.sp-profile-row > .sp-iconbtn {
  margin-right: -10px;
}
.sp-profile-row > .sp-iconbtn svg {
  width: 18px;
  height: 18px;
}
/* Availability modal: checkbox tiles stacked */
.sp-option-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

@media (max-width: 900px) {
  .sp-profile {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .sp-profile-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sp-profile-row__meta {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  .sp-profile-row .sp-dropdown,
  .sp-profile-row > .sp-iconbtn {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ==========================================================================
   ACCOUNT SETTINGS (templates/settings.html + account_settings/*)
   ========================================================================== */

.sp-settings-panel .helptext {
  display: none;
}
.sp-settings-panel .col-md-9 {
  flex: 0 0 100%;
  max-width: 100%;
}
.sp-settings-panel .tab-pane > p,
.sp-settings-panel .tab-pane > div > p {
  font-size: 14px;
  color: var(--ink-muted);
}
.sp-settings-panel .outline-box h3,
.sp-settings-panel .all_edit h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}
.sp-settings-panel .all_edit h3.mt-4 {
  margin-top: 24px !important;
}
.sp-settings-panel .profile-card {
  margin: 0;
}
.sp-settings-panel .profile-card .profile-image {
  position: relative;
  height: 190px;
  margin: -28px -28px 24px;
  background: var(--surface-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-settings-panel .profile-card .profile-image .img-circle,
.sp-settings-panel .profile-card .profile-image .circle {
  width: 110px !important;
  height: 110px !important;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--avatar);
  color: var(--brand);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 1 !important;
}
.sp-settings-panel .profile-card .profile-image form {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0 !important;
  gap: 6px;
}
.sp-settings-panel .profile-card .profile-image .submitImageClick {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: var(--on-inverse);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-settings-panel .profile-card .profile-image #submitImage {
  padding: 5px 10px;
  font-size: 12px;
}
.sp-settings-panel #integrations img {
  border-radius: 8px;
}
.sp-settings-panel #client_mfp_code {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border: 0;
  border-radius: 10px;
  color: var(--ink);
}
.sp-settings-panel label.col-2 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
}
.sp-settings-panel .col-10 {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 14px;
}
.sp-settings-panel .profile-card,
.sp-settings-panel .profile-card .profile-row {
  background: transparent !important;
  padding: 0;
  box-shadow: none;
}
.sp-settings-panel .profile-card .profile-image::before,
.sp-settings-panel .profile-card .profile-image::after {
  display: none;
}

/* ==========================================================================
   CLIENT-FACING PAGES (personal/*, library/*)
   ========================================================================== */

.sp-client-home .sp-overview-main {
  max-width: 680px;
}
.sp-list-card--flat {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.sp-list-card--flat .sp-list-row {
  padding: 12px 0;
}
.sp-list-row--link {
  color: inherit;
  text-decoration: none;
}
.sp-list-row--link:hover {
  color: inherit;
  text-decoration: none;
}
.sp-list-row--link .sp-list-actions {
  color: var(--ink-placeholder);
}
.sp-my-nutr.profile-card {
  padding: 22px;
  text-align: left;
  margin: 0;
  box-shadow: none;
  background: var(--surface-card);
}
.sp-my-nutr .profile-image .img-circle,
.sp-my-nutr .profile-image .circle {
  width: 64px !important;
  height: 64px !important;
  margin: 0 0 12px;
  background-size: cover;
  background-position: center;
  background-color: var(--avatar);
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 1 !important;
}
.sp-my-nutr .profile-row h2 {
  font-size: 16px;
  margin: 0;
}
.sp-my-nutr .profile-row h4 {
  font-size: 13px !important;
  color: var(--ink-muted);
  font-weight: 400;
  margin: 2px 0 0;
}
.sp-my-nutr .profile-row p {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.sp-my-nutr hr {
  margin: 14px 0;
}
.sp-my-nutr .text-gold {
  color: var(--ink-muted) !important;
  font-size: 13px;
}
.sp-my-nutr .social-icons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sp-my-nutr .social-icons a {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--ink-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.sp-my-nutr .text span {
  font-size: 12px;
  color: var(--on-warning-soft);
}
.sp-my-nutr .btn-block {
  margin-top: 16px;
}
.sp-client-home .show-on-mobile { display: none; }
.sp-client-home .hide-on-mobile { display: block; }
@media (max-width: 760px) {
  .sp-client-home .show-on-mobile { display: block; margin-bottom: 20px; }
  .sp-client-home .hide-on-mobile { display: none; }
}
.sp-planner-day--next {
  min-width: 160px;
  justify-content: flex-start;
  padding-top: 40px;
}
.sp-planner .sp-week-nav .sp-week-label {
  color: var(--ink);
  text-decoration: none;
}

/* Library */
.sp-library .sp-library-toolbar {
  align-items: flex-start;
}
.sp-library #item_type_tabs a {
  padding: 8px 14px !important;
  border-radius: var(--radius-md) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ink-subtle) !important;
  background: transparent !important;
}
.sp-library #item_type_tabs a:hover {
  background: var(--surface-subtle) !important;
  color: var(--ink) !important;
}
.sp-library #item_type_tabs a.tw-bg-gold-100 {
  background: var(--ink) !important;
  color: var(--surface-card) !important;
}
.sp-library input[type="search"] {
  background: var(--surface-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  outline: none !important;
  color: var(--ink) !important;
  padding: 10px 12px 10px 36px !important;
  box-shadow: none !important;
}
.sp-library input[type="search"]:focus {
  border-color: var(--brand) !important;
}
.sp-library #new_item_btn > *,
.sp-library #new_item_btn label {
  background: var(--surface-subtle) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  padding: 9px 14px !important;
  margin: 0;
}
.sp-library #new_item_btn label[for="toggle_create_item"]:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.sp-library #new_item_btn .tw-relative > label {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  padding: 9px 8px !important;
}
.sp-library #new_item_btn [role="menu"] {
  background: var(--surface-card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-menu) !important;
  padding: 6px !important;
}
.sp-library #new_item_btn [role="menu"] a,
.sp-library #new_item_btn a[role="menuitem"] {
  color: var(--ink) !important;
  border-radius: 8px !important;
  background: transparent !important;
  padding: 9px 12px !important;
}
.sp-library #new_item_btn [role="menu"] a:hover,
.sp-library #new_item_btn a[role="menuitem"]:hover {
  background: var(--surface-subtle) !important;
}
.sp-library nav.tw-border-t {
  border-top: 1px solid var(--divider) !important;
  margin-top: 8px;
}
.sp-library nav.tw-border-t a,
.sp-library nav.tw-border-t span,
.sp-library nav.tw-border-t input {
  color: var(--ink-subtle) !important;
  background: transparent;
  border-color: transparent !important;
}
.sp-library nav.tw-border-t input {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  margin-top: 8px;
  width: 52px !important;
  text-align: center;
}
.sp-library .col-11 {
  flex: 0 0 100%;
  max-width: 100%;
}
.sp-library .col-6,
.sp-library .col-5 {
  padding-left: 0;
  padding-right: 0;
}

/* Client account pages (memberships, payments, email prefs, personal profile) */
.client_membership.topcard,
.topcard_colsafe {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: none;
}

/* Licences / organisations / plan detail / misc uncovered pages */
.sp-licenses-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .sp-licenses-layout { grid-template-columns: 1fr; }
}
.sp-licenses-big {
  font-size: 18px;
  margin: 4px 0 12px;
}
.sp-licenses-list {
  max-height: 60vh;
  overflow-y: auto;
}
.sp-licenses-num {
  min-width: 22px;
  text-align: right;
  order: -1;
}
.sp-progress.progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  margin-bottom: 12px;
}
.sp-progress .progress-bar {
  background: var(--brand);
  font-size: 0;
}
.sp-plan-detail .outline-box {
  padding: 22px 24px;
}
.sp-plan-detail .outline-box h2 {
  font-size: 18px;
  margin-bottom: 0;
}
.sp-plan-detail .outline-box .price {
  font-size: 18px;
}
.sp-plan-detail .highlight_tab {
  display: none;
}
.sp-plan-detail .help-text {
  color: var(--ink-subtle);
}
.sp-workgroups .sp-page-intro {
  margin-top: 0;
}

/* Group sub pages */
.sp-group-subbar {
  margin-bottom: 16px;
}
.sp-group-sidebar {
  padding: 18px;
  text-align: center;
}
.sp-group-sidebar .logo_restrictor img {
  border-radius: var(--radius-xl);
  max-height: 160px;
  object-fit: cover;
  margin: 0 auto 12px;
}
.sp-group-sidebar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-subtle);
  margin: 10px 0 4px;
}
.sp-group-sidebar .list-group {
  margin-top: 8px;
  text-align: left;
}
.sp-group-sidebar .list-group-item {
  padding: 9px 12px;
  font-size: 13.5px;
  border-radius: 8px !important;
  border: 0;
  margin-bottom: 2px;
}
.sp-memberships .outline-box-container {
  display: block;
}
.sp-memberships .client_membership.topcard {
  margin-bottom: 12px;
}
.sp-group-sidebar .meta {
  display: block;
  margin: 0;
}
.sp-group-sidebar .meta > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* CardFood.md: the + add button sits on the right of the footer */
.sp-food-card .sp-tile-actions .sp-food-add {
  margin-left: auto;
}

/* Settings panels: forms sit straight in the panel, no inner card */
.sp-settings-panel .topcard,
.sp-settings-panel #custombranding_cont > .outline-box {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Settings panel content (SettingsNav.md, prototype Account Settings)
   -------------------------------------------------------------------------- */
/* Fields in a two-column grid (one column on a phone) */
.sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}
.sp-form-grid > * {
  min-width: 0;
}
.sp-form-grid > * > label,
.sp-form-grid > * > .sp-label,
.sp-form-stack label {
  display: block;
}
.sp-form-grid .form-group,
.sp-form-stack .form-group {
  margin-bottom: 0;
}
.sp-form-grid input:not([type='checkbox']):not([type='radio']),
.sp-form-stack input:not([type='checkbox']):not([type='radio']) {
  margin-bottom: 0 !important;
}
/* Single column of narrow fields (Password) */
.sp-form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 420px;
}
/* A read-only value in a field slot (Account type) */
.sp-form-static {
  display: flex;
  align-items: center;
  min-height: var(--control-md);
}
.sp-form-static a.sp-badge:hover {
  text-decoration: none;
}
/* Section sub-headings inside a panel */
.sp-settings-panel .all_edit h3,
.sp-settings-panel form > h3,
.sp-settings-panel #import_email h3 {
  margin: var(--space-24) 0 var(--space-12);
}
.sp-settings-panel .sp-panel-desc + form > h3:first-of-type {
  margin-top: var(--space-8);
}
/* Rows with a title/caption on the left and an action on the right (My Data) */
.sp-settings-rows .sp-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--divider-row);
}
.sp-settings-rows .sp-settings-row:first-child {
  padding-top: 0;
}
.sp-settings-rows .sp-settings-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.sp-settings-row__title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-settings-row__main p {
  margin: 2px 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-settings-row__main form,
.sp-settings-row__main .btn {
  margin-top: var(--space-10);
}
/* Profile photo: 72px avatar + Change photo */
.sp-profile-photo {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 var(--space-8);
}
.sp-profile-photo__avatar {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--brand-soft);
  background-size: cover;
  background-position: center;
  color: var(--on-brand-soft);
  font: 700 22px/1 var(--font-sans);
}
/* Allergies: 44px bordered checkbox tiles, four across (two on a phone) */
.sp-allergies-label {
  display: block;
  margin: var(--space-16) 0 var(--space-8);
}
.sp-check-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}
.sp-check-tile {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: var(--control-md);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  color: var(--ink);
  cursor: pointer;
}
.sp-check-tile input {
  margin: 0 !important;
}
.sp-check-tile:has(input:checked) {
  border-color: var(--ink);
  background: var(--surface-subtle);
}
/* My Organisations: cards two-up, the active one with an ink border */
.sp-org-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}
.sp-org-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-16) 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sp-org-card.is-active {
  border-color: var(--ink);
}
.sp-org-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
}
.sp-org-card__name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-org-card__role {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-org-card__role span {
  color: var(--ink);
}
.sp-org-card__note {
  margin-top: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-org-card form {
  margin-top: var(--space-6);
}
/* Email preferences: 56px rows, text left, switch right */
.sp-switch-rows {
  display: flex;
  flex-direction: column;
}
.sp-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  min-height: 56px;
  margin: 0;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.sp-switch-row:last-child {
  border-bottom: 0;
}
.sp-switch-row .sp-switch {
  margin: 0;
  flex-shrink: 0;
}
/* Switch row with a title and a caption (Switch.md), and a flush variant
   for form sections, where the section provides the dividers */
.sp-switch-row__text {
  min-width: 0;
}
.sp-switch-row__title {
  display: block;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-switch-row__desc {
  display: block;
  max-width: 560px;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-switch-row--flush {
  align-items: flex-start;
  min-height: 0;
  border-bottom: 0;
}
.sp-switch-row--flush .sp-switch {
  margin-top: 2px;
}
/* Add Credential modal (newQualifications_upload.html #import_quals): the
   type tabs sit on the modal, so the form loses its own card */
#addNewCredentialModalContent form.topcard {
  margin: var(--space-16) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* A small modal is too narrow for two fields side by side */
.modal-sm .sp-form-grid {
  grid-template-columns: minmax(0, 1fr);
}
.sp-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.sp-form-grid .form-text {
  display: block;
}
@media (max-width: 767px) {
  .sp-form-grid,
  .sp-org-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-check-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   QUESTIONNAIRE BUILDER (apps/questionnaires analysis/q_edit.html)
   A card per question: number circle, heading, remove on the last one;
   Question | Answer type | Metric (data point only); help text behind a link.
   ========================================================================== */

.sp-q-builder .sp-form-section__head {
  align-items: baseline;
}
.sp-q-count {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-q-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.sp-q-card.d-none {
  display: none !important;
}
.sp-q-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 36px;
}
.sp-q-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-muted);
  color: var(--ink-secondary);
  font: var(--text-caption);
  font-weight: 700;
}
.sp-q-card__title {
  margin: 0;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-q-card__remove {
  width: 36px;
  height: 36px;
  margin: 0 -6px 0 auto;
}
.sp-q-card__remove svg {
  width: 18px;
  height: 18px;
}
.sp-q-card__fields.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: var(--space-12);
  align-items: start;
  margin: 0;
}
.sp-q-card.is-datapoint .sp-q-card__fields.row {
  grid-template-columns: minmax(0, 1fr) 220px 180px;
}
.sp-q-card__fields label,
.sp-q-card__help label {
  display: block;
}
.sp-q-card__fields .form-control,
.sp-q-card__help .form-control {
  margin-bottom: 0 !important;
}
.sp-q-card__fields .form-text {
  display: block;
}
.sp-q-card__metric {
  display: none;
}
.sp-q-card.is-datapoint .sp-q-card__metric {
  display: block;
}
.sp-q-card__help {
  display: none;
}
.sp-q-card.has-help .sp-q-card__help {
  display: block;
}
.sp-q-card.has-help .sp-q-card__add-help {
  display: none;
}
.sp-q-card__add-help {
  align-self: flex-start;
  margin: -4px 0 -4px -8px;
}
.sp-q-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  height: var(--control-md);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-secondary);
  font: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
}
.sp-q-add:hover {
  border-color: var(--border-strong);
  color: var(--ink);
}
.sp-q-add svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 767px) {
  .sp-q-card__fields.row,
  .sp-q-card.is-datapoint .sp-q-card__fields.row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Assign questionnaire (analysis/q_assign.html): 560px card */
.sp-q-assign {
  max-width: 560px;
}
.sp-q-assign__note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-q-assign__table {
  max-height: 40vh;
  overflow-y: auto;
}
.sp-q-assign__table .table {
  margin: 0;
}
.sp-q-assign__table tr.is-scheduled td {
  color: var(--ink-muted);
}
.sp-q-assign label {
  display: block;
}
/* Only the picker for the chosen method is shown */
.sp-q-assign:has(input[name="method"][value="clients"]:checked) .sp-q-assign__group,
.sp-q-assign:has(input[name="method"][value="group"]:checked) .sp-q-assign__clients {
  display: none;
}
.sp-q-assign__when {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
label.sp-q-assign__when-row {
  display: grid;
  grid-template-columns: auto 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
  margin: 0;
  cursor: pointer;
}
.sp-q-assign__when-row input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}
.sp-q-assign__when-label {
  font: var(--text-body);
  color: var(--ink);
}
.sp-q-assign__when-row .form-control {
  margin: 0 !important;
}
@media (max-width: 600px) {
  label.sp-q-assign__when-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sp-q-assign__when-row .form-control {
    grid-column: 1 / -1;
  }
}

/* Questionnaire results (analysis/q_results.html) */
.sp-q-results {
  max-width: 640px;
}
.sp-q-results__range {
  margin: 0 0 var(--space-12);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-q-results__filter {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  max-width: 420px;
  margin-bottom: var(--space-24);
}
.sp-q-results__filter .bootstrap-select {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.sp-q-result {
  margin-bottom: var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.sp-q-result__title {
  margin: 0;
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--divider);
  font: var(--text-body);
  font-weight: 700;
  color: var(--ink);
}
.sp-q-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--divider);
}
.sp-q-result__row.overflow {
  display: none;
}
.sp-q-result__row:last-child {
  border-bottom: 0;
}
.sp-q-result__answer {
  min-width: 0;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-q-result__who {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-align: right;
  font: var(--text-caption);
  color: var(--ink);
}
.sp-q-result__who .response-meta {
  color: var(--ink-placeholder);
}
.sp-q-result__empty {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-q-result__more {
  margin: var(--space-8) var(--space-12);
}
/* slideDown leaves display:block inline; keep the row's flex layout */
.sp-q-result__row.overflow[style*="display: block"] {
  display: flex !important;
}

/* Consultations list (nutritionist/consultation/consultations.html) */
.sp-consult-actions {
  justify-content: flex-end;
  margin-bottom: var(--space-16);
}
.sp-consult-when {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sp-consultations .pagination {
  justify-content: center;
  margin-top: var(--space-20);
}

/* Consultation editor (nutritionist/consultation/edit_note.html) */
.sp-page-header--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
.sp-page-header--stacked .sp-page-desc {
  max-width: 680px;
  margin: 0;
}
.sp-report-list {
  gap: var(--space-8);
}
.sp-report-list__hint {
  margin: 6px 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-report {
  border-bottom: 1px solid var(--divider-row);
}
.sp-report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 52px;
}
.sp-report__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 52px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.sp-report__toggle svg {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}
.sp-report__toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}
.sp-report__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
.sp-report__vis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
  cursor: pointer;
}
.sp-report__vis input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}
.sp-report__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  padding: var(--space-4) 0 var(--space-20) 26px;
}
.sp-report__body[hidden] {
  display: none;
}
.sp-report__field {
  grid-column: 1 / -1;
  min-width: 0;
}
.sp-report__field--short {
  grid-column: auto;
}
.sp-report__field label {
  display: block;
}
.sp-report__field .form-control,
.sp-report__field .bootstrap-select {
  margin-bottom: 0 !important;
}
.sp-consult-finalise {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  max-width: 560px;
  margin: 0;
  cursor: pointer;
}
.sp-consult-finalise input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.sp-consult-finalise__title {
  display: block;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-consult-finalise__desc {
  display: block;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
/* Autosave indicator */
.sp-save-toast {
  position: fixed;
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: 1050;
  display: none;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--on-inverse);
  font: var(--text-body-sm);
  box-shadow: var(--shadow-menu);
}
@media (max-width: 600px) {
  .sp-report__head {
    flex-wrap: wrap;
    gap: 0 var(--space-16);
  }
  .sp-report__body {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
}
/* The Markdownx editors ignore rows; size them like the prototype's 4-row
   textareas and let the coach drag them taller */
.sp-consult-form textarea.form-control {
  height: 104px;
  min-height: 104px;
  resize: vertical;
}

/* Consultation report (nutritionist/consultation/view_note.html, also shown
   to clients): read-only card matching the editor. Basic info as a label /
   value grid; each report section a 52px row that expands. */
.consultation-page > .row > .col-12 > p {
  margin: -12px 0 var(--space-20);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.consultation-page .topcard {
  padding: var(--space-4) var(--space-28) var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.consultation-page .topcard h2 {
  margin: 0;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.consultation-page .topcard {
  padding-top: var(--space-20);
}
.consultation-page .topcard h2:not(.section_header) {
  margin-bottom: var(--space-12);
}
.consultation-page .topcard hr {
  margin: 0;
  border-top: 1px solid var(--divider-row);
}
.consultation-page .form-group {
  margin-bottom: var(--space-12);
}
.consultation-page .form-group label,
.consultation-page .section_body label {
  display: block;
  margin-bottom: 2px;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.consultation-page .form-group p,
.consultation-page .form-group > div {
  margin: 0;
  font: var(--text-body);
  color: var(--ink);
}
.consultation-page h2.section_header {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.consultation-page h2.section_header:hover {
  color: var(--ink);
}
.consultation-page .show_hide_icon {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-muted);
}
.consultation-page .section_body {
  padding: 0 0 var(--space-12);
}
.consultation-page .section_body p i {
  font: var(--text-caption);
  font-style: normal;
  color: var(--ink-muted);
}
/* Form stack without the 420px cap, for modal bodies */
.sp-form-stack--full {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-recipe-card .sp-recipe-nutrition .nutr_val {
  font-weight: inherit !important;
}

/* ==========================================================================
   RECIPE DETAIL (apps/recipes recipe_viewer.html)
   ========================================================================== */
.sp-recipe-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-20);
}
.sp-recipe-top .sp-back {
  margin-bottom: 0;
}
.sp-recipe-top__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.sp-fave-on {
  color: var(--danger) !important;
}
.sp-fave-on svg {
  fill: currentColor;
}
.sp-recipe-actions {
  min-width: 220px;
}
.sp-recipe-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.sp-recipe-actions .dropdown-item svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
/* Publish state: a word and a dot, never colour alone */
.sp-publish-state__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--ink-placeholder);
}
.sp-publish-state.is-published .sp-publish-state__dot {
  background: var(--success);
}

.sp-recipe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-24);
  align-items: start;
}
.sp-recipe-main,
.sp-recipe-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.sp-recipe-main {
  gap: var(--space-24);
}
.sp-recipe-hero {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  border-radius: var(--radius-xl);
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
}
.sp-recipe-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.sp-recipe-title {
  margin: 0;
  font: var(--text-page-title);
  letter-spacing: var(--text-page-title-tracking);
  color: var(--ink);
}
.sp-recipe-brand {
  font: var(--text-body);
  font-style: italic;
  color: var(--ink-muted);
}
.sp-recipe-adapted {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-recipe-intro .sp-recipe-tags {
  margin-top: 0;
}
.sp-recipe-desc {
  max-width: 640px;
  margin: 0;
  font: var(--text-body);
  line-height: 1.55;
  color: var(--ink-secondary);
}
.sp-recipe-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
  padding-top: var(--space-4);
}
.sp-recipe-facts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-recipe-facts svg {
  color: var(--ink-muted);
}
.sp-recipe-card-box {
  padding: var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-recipe-card-box--wide {
  padding: var(--space-20) var(--space-24);
}
.sp-recipe-section-title {
  margin: 0 0 var(--space-8);
  font: var(--text-section-title);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sp-recipe-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-8);
}
.sp-recipe-box-head .sp-recipe-section-title {
  margin: 0;
}
.sp-recipe-box-head .sp-iconbtn {
  width: 36px;
  height: 36px;
  margin-right: -8px;
}
.sp-recipe-box-head .sp-iconbtn svg {
  width: 16px;
  height: 16px;
}
/* Author card */
.sp-recipe-author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
}
.sp-recipe-author__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: var(--text-caption);
  font-weight: 700;
}
.sp-recipe-author__who {
  flex: 1;
  min-width: 0;
}
.sp-recipe-author__name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-recipe-author__who a {
  font: var(--text-caption);
}
.sp-recipe-author__links {
  display: flex;
  gap: var(--space-4);
}
.sp-recipe-author__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
.sp-recipe-author__links a:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* Ingredients / Allergens beside the Method */
.sp-recipe-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
  margin-top: var(--space-32, 32px);
}
.sp-recipe-body__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-recipe-portions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
}
.sp-recipe-portions .form-control {
  width: 52px;
  min-height: 32px !important;
  height: 32px;
  margin: 0 !important;
  padding: 0 6px;
  text-align: center;
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-recipe-ingredients {
  margin: 0;
}
.sp-recipe-ingredients li {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-recipe-ingredients li:last-child {
  border-bottom: 0;
}
.sp-recipe-ingredients strong {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.sp-recipe-allergens {
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-recipe-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-recipe-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--divider-row);
}
.sp-recipe-step:last-child {
  border-bottom: 0;
}
.sp-recipe-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--surface-card);
  font: var(--text-caption);
  font-weight: 700;
}
.sp-recipe-step__text {
  font: var(--text-body);
  line-height: 1.55;
  color: var(--ink-secondary);
}
.sp-recipe-step__img {
  width: 160px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 900px) {
  .sp-recipe-grid,
  .sp-recipe-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .sp-recipe-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .sp-recipe-step__img {
    grid-column: 2;
  }
}
/* Nutrition pane (foods/create_mealplan_modal_page2.html #importNutritionPane),
   on the recipe page's nutrition card and in Add to block's food detail step:
   quantity + unit, then 36px-row tables with per 100g and portion columns
   right-aligned */
.sp-nutrition-pane .size_row {
  display: flex;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
}
.sp-nutrition-pane .size_row > [class*="col-"] {
  flex: 0 0 auto;
  max-width: none;
  padding: 0;
}
.sp-nutrition-pane .size_row > .col-9 {
  flex: 1;
}
.sp-nutrition-pane #food_portion_quantity {
  width: 88px;
  height: var(--control-sm);
  min-height: 0;
  padding: 0 var(--space-10);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  text-align: center;
}
.sp-nutrition-pane #food_portion_unit {
  height: var(--control-sm);
  min-height: 0 !important;
  font: var(--text-body-sm);
}
.sp-nutrition-pane .food_title,
.sp-nutrition-pane .padded {
  margin: 0 !important;
  padding: 0 !important;
}
.sp-nutrition-pane table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sp-nutrition-pane table tr,
.sp-nutrition-pane table.table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}
.sp-nutrition-pane table th,
.sp-nutrition-pane table td {
  height: 36px;
  padding: 0 0 0 var(--space-8);
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
  vertical-align: middle;
}
.sp-nutrition-pane table th:first-child,
.sp-nutrition-pane table td:first-child {
  padding-left: 0;
}
.sp-nutrition-pane table thead th,
.sp-nutrition-pane table thead td {
  height: auto;
  padding-bottom: var(--space-8);
  border-bottom-color: var(--divider);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-nutrition-pane table th:not(:first-child),
.sp-nutrition-pane table td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
.sp-nutrition-pane table tbody td:nth-child(2) {
  color: var(--ink-secondary);
}
.sp-nutrition-pane table tbody td:last-child {
  font-weight: 600;
}
.sp-nutrition-pane .show_breakdown {
  display: inline-block;
  margin-top: var(--space-12);
  font: var(--text-body-sm);
  font-weight: 600;
  text-align: left;
}
.sp-nutrition-pane .show_breakdown .caret {
  display: none;
}
.sp-nutrition-pane .size_row {
  flex-wrap: nowrap;
}
.sp-nutrition-pane .size_row > .col-9 {
  min-width: 0;
}
.sp-nutrition-pane #food_portion_unit {
  width: 100%;
  text-align: left;
  text-align-last: left;
}
.sp-nutrition-pane .size_row > .col-3 {
  flex: 0 0 88px;
  width: 88px;
}
.sp-nutrition-pane .size_row > .col-9 {
  width: auto;
}
.sp-nutrition-pane .title_text {
  margin-bottom: var(--space-12) !important;
  font: var(--text-card-title);
  color: var(--ink);
}
.sp-nutrition-pane .hide_all_macros,
.sp-nutrition-pane .hide_all_micros {
  display: none;
}
.sp-nutrition-pane .breakdown_data > .text-link {
  display: inline-block;
  margin: var(--space-12) 0;
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-nutrition-pane .nutr_divider {
  margin: var(--space-8) 0 var(--space-4);
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-nutrition-pane .nutr_divider_micro {
  margin-top: var(--space-16) !important;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}

/* Food search (templates/foods/view_all_foods.html), CardFood.md */
.sp-food-card .sp-tile-media.image {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
}
.sp-food-foot {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-10);
  min-height: 44px;
}
.sp-food-energy {
  flex: 1;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-food-foot .sp-food-edit {
  color: var(--ink-muted);
}
.sp-grid-span {
  grid-column: 1 / -1;
}
/* Food detail: product photo as a 96px contained thumbnail above the name */
.sp-food-thumb {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.sp-recipe-allergens:empty::before {
  content: "None listed";
  color: var(--ink-muted);
}

/* Collection detail: title, description and item count; Actions menu and
   publish state on the right; a space-24 gap above the grid */
.sp-collection-header {
  align-items: flex-start;
  margin-bottom: var(--space-24);
}
.sp-collection-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  max-width: 680px;
}
.sp-collection-header__text .pagename,
.sp-collection-header__text .sp-page-desc {
  margin: 0;
}
.sp-collection-count {
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Content detail (my_content/document.html): the collection page's header, then the description, any video
   (16:9) and the file card with its preview and View / Download */
.sp-doc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 820px;
}
.sp-doc-desc {
  font: var(--text-body);
  color: var(--ink-secondary);
}
.sp-doc-desc > :last-child {
  margin-bottom: 0;
}
.sp-doc-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-media);
}
.sp-doc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sp-doc-file {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-doc-file__preview {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-media);
}
.sp-doc-file__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
}
.sp-doc-file__name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-doc-file__hint {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-doc-file__actions {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .sp-doc-file {
    flex-wrap: wrap;
  }
  .sp-doc-file__actions {
    width: 100%;
  }
  .sp-doc-file__actions .sp-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Clients: the grid / row switcher sits on the right of the tab row, shown
   only while the Clients tab is open */
.sp-clients > .sp-client-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.sp-client-toolbar {
  display: flex;
  gap: var(--space-8);
  margin: 0;
}
.sp-clients:not(:has(#clients.active)) .sp-client-toolbar {
  display: none;
}
/* Client card: the whole card opens the overview (a stretched link); the
   Pending tag and the ⋯ menu (bottom right) sit above it */
.sp-client-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.sp-client-cardlink {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.sp-client-cardlink:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-client-card:hover {
  border-color: var(--border-strong);
}
.sp-client-card .sp-client-flag,
.sp-client-card-foot .sp-dropdown {
  z-index: 2;
}
.sp-client-card-foot {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-12);
}
/* Manage takes the width, the ⋯ menu sits at its end; both above the card's cover link */
.sp-client-card-foot .sp-client-manage {
  position: relative;
  z-index: 2;
  flex: 1;
  margin-top: 0;
}
.sp-dropdown-menu--icons .sp-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.sp-dropdown-menu--icons .sp-dropdown-item svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}

/* Clients row view and Group Progress (DataTables #client_row) drawn as a ListRow card:
   caption headers, 64px rows on divider-row lines, no stripes */
:is(#client-table-view, .sp-client-table) .dataTables_wrapper {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
:is(#client-table-view, .sp-client-table) .dataTables_filter {
  float: none;
  padding: var(--space-12) var(--space-16) 0;
  text-align: right;
}
:is(#client-table-view, .sp-client-table) .dataTables_filter input {
  width: 240px;
  height: var(--control-sm);
  margin-left: var(--space-8);
  padding: 0 var(--space-12);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: var(--text-body-sm);
  color: var(--ink);
}
:is(#client-table-view, .sp-client-table) table.dataTable {
  border-collapse: collapse;
  border: 0;
  margin: 0 !important;
}
:is(#client-table-view, .sp-client-table) table.dataTable thead th {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--divider) !important;
  background: transparent;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
}
:is(#client-table-view, .sp-client-table) table.dataTable tbody tr,
:is(#client-table-view, .sp-client-table) table.dataTable.display tbody tr.odd,
:is(#client-table-view, .sp-client-table) table.dataTable.display tbody tr.even,
:is(#client-table-view, .sp-client-table) table.dataTable.display tbody tr > .sorting_1 {
  background: transparent !important;
}
:is(#client-table-view, .sp-client-table) table.dataTable tbody tr:hover {
  background: var(--surface-secondary-hover) !important;
}
:is(#client-table-view, .sp-client-table) table.dataTable tbody td {
  height: 64px;
  padding: var(--space-10) var(--space-16);
  border-top: 1px solid var(--divider-row) !important;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  vertical-align: middle;
}
:is(#client-table-view, .sp-client-table) table.dataTable tbody td p {
  margin: 0;
}
:is(#client-table-view, .sp-client-table) .dataTables_scrollBody {
  border-bottom: 0 !important;
}
.sp-client-rowhead {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 220px;
  color: inherit;
  text-decoration: none;
}
.sp-client-rowhead:hover {
  color: inherit;
  text-decoration: none;
}
.sp-client-rowhead .sp-client-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-client-rowhead .sp-client-name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-client-rowhead .sp-client-email {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-client-rowactions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}
.sp-client-rowactions .sp-kebab {
  margin-right: -10px;
}
/* DataTables: search on the right; the hidden copy of the header in the
   scroll body takes no space */
:is(#client-table-view, .sp-client-table) .dataTables_wrapper .top {
  display: flex;
  justify-content: flex-end;
}
:is(#client-table-view, .sp-client-table) .dataTables_scrollBody thead th,
:is(#client-table-view, .sp-client-table) .dataTables_scrollBody thead td {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}

/* ==========================================================================
   CLIENT OVERVIEW (nutritionist/client_overview.html), prototype layout:
   About 280px | Activity | Tracking 300px, each a caption label over cards
   ========================================================================== */
.sp-overview-cols {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: var(--space-24);
  align-items: start;
}
.sp-overview-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.sp-overview-col__label {
  margin: 0 0 -8px 2px;
  font: var(--text-caption);
  color: var(--ink-subtle);
}
.sp-ov-card,
.sp-overview-col .sp-habits.sp-card {
  margin: 0;
  padding: var(--space-16) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.sp-ov-card--alert {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.sp-ov-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 32px;
  margin-bottom: var(--space-8);
}
.sp-ov-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font: var(--text-section-title);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sp-ov-card--alert .sp-ov-card__title {
  color: var(--danger);
}
.sp-ov-edit {
  margin-right: -8px;
}
.sp-ov-iconbtn {
  width: 36px;
  height: 36px;
  margin-right: -8px;
}
.sp-ov-iconbtn svg {
  width: 16px;
  height: 16px;
}
.sp-ov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-allergy-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--danger);
  font: var(--text-caption);
  font-weight: 600;
}
.sp-ov-empty,
.sp-ov-muted {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* Icon, label, value rows on divider-row lines */
.sp-ov-list {
  margin: 0;
}
.sp-ov-row {
  display: grid;
  grid-template-columns: 20px 76px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
}
.sp-ov-row:last-child {
  border-bottom: 0;
}
.sp-ov-row > svg {
  color: var(--ink-muted);
}
.sp-ov-row dt {
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-ov-row dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.sp-ov-list--tags .sp-ov-row {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  padding: var(--space-8) 0;
}
.sp-ov-list--tags .sp-ov-row dt {
  line-height: 22px;
}
.sp-ov-set {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
}
.sp-chip__remove {
  display: inline-flex;
  margin-right: -2px;
  color: var(--ink-muted);
}
/* Priority: a dot plus the word (never colour alone) */
.sp-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 22px;
}
.sp-priority__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--ink-placeholder);
}
.sp-priority--red .sp-priority__dot { background: var(--danger); }
.sp-priority--amber .sp-priority__dot { background: var(--warning); }
.sp-priority--green .sp-priority__dot { background: var(--success); }
/* Recent activity: text and time on divider rows */
.sp-overview-col .sp-recent-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 40px;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
}
.sp-overview-col .sp-recent-activity-row:last-child {
  border-bottom: 0;
}
.sp-overview-col .sp-ra-text {
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-overview-col .sp-ra-time {
  flex-shrink: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
/* Check-ins: Due / Past, rows with a status bar on the left */
.sp-ov-tabs {
  margin-bottom: var(--space-12);
}
.sp-checkin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 52px;
  padding-left: var(--space-12);
  border-bottom: 1px solid var(--divider-row);
  box-shadow: inset 3px 0 0 var(--ink-placeholder);
}
.sp-checkin-row:last-child {
  border-bottom: 0;
}
.sp-checkin--green { box-shadow: inset 3px 0 0 var(--success); }
.sp-checkin--amber { box-shadow: inset 3px 0 0 var(--warning); }
.sp-checkin--red { box-shadow: inset 3px 0 0 var(--danger); }
.sp-checkin-row__date {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-checkin-row__sub {
  font: var(--text-caption);
  color: var(--ink-muted);
}
@media (max-width: 1100px) {
  .sp-overview-cols {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .sp-overview-cols > .sp-overview-col:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  .sp-overview-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CLIENT PLANNER (week) — PlannerToolbar, MealSlot, NutritionBar
   nutritionist/planner2.html + nutritionist/planner/*
   ========================================================================== */

/* Compact icon buttons (block actions: 36px hit area) */
.sp-iconbtn--sm {
  width: var(--control-sm);
  height: var(--control-sm);
}
.sp-iconbtn--sm svg {
  width: 16px;
  height: 16px;
}
.sp-iconbtn--danger:hover,
.sp-iconbtn--danger:focus {
  background: var(--danger-soft);
  color: var(--danger);
}
.sp-kebab--sm {
  width: var(--control-sm);
  height: var(--control-sm);
}

/* Toolbar: one white bar; "where am I" left, actions right */
.sp-ptoolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding: 10px var(--space-12);
  margin-bottom: var(--space-16);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-ptoolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
.sp-ptoolbar__group:first-child {
  gap: var(--space-12);
}
.sp-ptoolbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sp-ptoolbar .sp-btn svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-ptoolbar__date {
  min-width: 190px;
  font: var(--text-body);
  font-weight: 600;
}
.sp-ptoolbar .sp-segmented__btn {
  text-decoration: none;
}
.sp-ptoolbar .sp-dropdown-menu {
  z-index: 30;
}

/* Day columns: at least 250px, stretch evenly, scroll sideways below that. The week sits in one white panel
   like the toolbar's, days split by dividers (Planner UI considerations, Sean 2026-10-05); planner-week.js fades
   the edge while there are more days to scroll to. */
.sp-week-panel {
  position: relative;
  margin-bottom: 20px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-week-panel::before,
.sp-week-panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 48px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.sp-week-panel::before {
  left: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: linear-gradient(to left, transparent, var(--surface-card));
}
.sp-week-panel::after {
  right: 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: linear-gradient(to right, transparent, var(--surface-card));
}
.sp-week-panel.has-more-left::before,
.sp-week-panel.has-more-right::after {
  opacity: 1;
}
/* Sticky day names (planner-week.js): a bar at the top of the screen once the days' headings have scrolled off,
   each name over its column; clipped to the week panel's width and following it sideways */
.sp-week-daybar {
  position: fixed;
  top: 0;
  z-index: 25;
  height: 44px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s, visibility 0.12s;
  pointer-events: none;
}
.sp-week-daybar.is-shown {
  opacity: 1;
  visibility: visible;
}
.sp-week-daybar__day {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-12);
  font: var(--text-caption);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.sp-week-daybar__day + .sp-week-daybar__day {
  border-left: 1px solid var(--divider);
}
.sp-week-daybar__day.is-today {
  color: var(--brand);
}
.sp-planner .sp-week-panel .sp-week.sevenDayContainer {
  margin-bottom: 0;
  padding-bottom: 0;
}
.sp-planner .sp-week-row {
  gap: 0;
  /* An empty week still looks like a planner, not a strip of day headings (RS-164) */
  min-height: var(--planner-min-height);
}
.sp-planner .sp-week-panel .sp-planner-day.date_child {
  padding: var(--space-14) var(--space-12);
}
.sp-planner .sp-week-panel .sp-planner-day.date_child + .sp-planner-day.date_child {
  border-left: 1px solid var(--divider);
}
/* Planner outlines (RS-167, Sean's mockup): the toolbar, the week panel, each block and the Nutrition cards are
   drawn in ink-subtle so the planner's structure reads at a glance. Notes keep their own colour; the day dividers,
   + Add and the day-type selects stay light. Week and Day view, coach and client. */
.sp-planner .sp-ptoolbar,
.sp-planner .sp-week-panel,
.sp-planner .sp-meal:not(.sp-meal--note),
.sp-planner .sp-day-nutr__card,
.sp-planner .sp-week-avg {
  border-color: var(--ink-subtle);
}
.sp-planner .sp-day-title {
  font: var(--text-caption);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.sp-planner .sp-planner-day.is-today .sp-day-title {
  color: var(--brand);
}
.sp-planner .sp-day-menu .sp-kebab {
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.sp-planner .sp-day-menu .sp-dropdown-menu {
  z-index: 30;
}

/* Day type: filled with brand-soft when set, dashed and quiet when not */
.sp-planner .sp-day-type select.date_type {
  height: var(--control-sm);
  min-height: 0;
  border: 1px dashed var(--border-control);
  background-color: transparent;
  color: var(--ink-muted);
}
.sp-planner .sp-day-type.is-set select.date_type {
  border: 1px solid transparent;
  background-color: var(--brand-soft);
  color: var(--on-brand-soft);
  font-weight: 600;
}

.sp-planner .sp-day-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-planner .sp-day-cards:not(:empty) {
  margin-bottom: 10px;
}

/* MealSlot */
.sp-meal {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Dragging a card to another day (planner-move.js): grab cursor on cards that move, the dragged card faded,
   and the day under it outlined. Days stay in time order, so there's no in-day drop marker. */
.sp-planner [data-move-kind] .sp-meal__head {
  cursor: grab;
}
.sp-planner [data-move-kind] .sp-meal__actions,
.sp-planner [data-move-kind] button.sp-meal__title {
  cursor: pointer;
}
.sp-planner .is-drag-ghost {
  opacity: 0.4;
}
/* No text selection on cards that drag (a press that turns into a drag would otherwise start selecting text), nor
   anywhere while dragging, and no focus box on the picked-up card */
.sp-planner [data-move-kind],
.is-planner-dragging {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: a long press (how a touch drag starts) doesn't open the copy / look up menu */
}
.sp-planner .is-drag-ghost :focus {
  outline: none;
  box-shadow: none;
}
.sp-planner .is-drag-chosen {
  box-shadow: var(--shadow-menu);
}
/* The copy of the card that follows the pointer (Sortable's fallback, on the body, so outside .sp-planner): no
   buttons, which otherwise sat in the head's flow and pushed the name onto more lines, and its own height, so
   nothing (the totals) is cut off by the original card's height that Sortable sets */
.sortable-fallback.sp-meal {
  height: auto !important;
  rotate: 2deg; /* picked up; "rotate" stacks with the transform Sortable moves it with */
  opacity: 0.92 !important;
  box-shadow: var(--shadow-menu);
  cursor: grabbing;
}
.sortable-fallback .sp-meal__actions,
.sortable-fallback .sp-meal__tools {
  display: none !important;
}
/* Copying (Option / Ctrl held): the card stays as it is, and the dragged copy carries the duplicate icon */
.is-planner-copying .sp-planner .is-drag-ghost {
  opacity: 1;
}
.sp-copy-badge {
  display: none;
}
.is-planner-copying .sortable-fallback .sp-copy-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-menu);
}
/* While a card is dragged, each day is covered by a drop layer (planner-move.js), so the whole column takes the
   drop. The day under the card fills gold with a dashed border and "Move to Wed 7 Oct" at the top. */
.sp-planner .sp-planner-day.date_child {
  position: relative;
}
.sp-day-drop {
  display: none;
}
.is-planner-dragging .sp-planner .sp-day-drop {
  display: block;
  position: absolute;
  inset: 4px;
  z-index: 4;
  border-radius: var(--radius-xl);
  pointer-events: none; /* only shows the target; the day is worked out from the pointer (planner-move.js) */
}
/* Let go: the zone goes at once (planner-move.js adds is-planner-dropped) */
.is-planner-dropped .sp-planner .sp-day-drop {
  visibility: hidden;
}
.sp-planner .sp-planner-day.is-drop-day .sp-day-drop {
  background: var(--brand-soft);
  border: 1px dashed var(--border-strong);
}
.sp-planner .sp-planner-day.is-drop-day .sp-day-drop::before {
  content: attr(data-drop-label);
  position: absolute;
  top: var(--space-20);
  left: 0;
  right: 0;
  text-align: center;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--on-brand-soft);
  pointer-events: none;
}
/* Under it, how to copy instead ("Hold ⌥ Option to copy" / "Hold Ctrl to copy"; planner-move.js) */
.sp-planner .sp-planner-day.is-drop-day .sp-day-drop::after {
  content: attr(data-drop-hint);
  position: absolute;
  top: calc(var(--space-20) + 24px);
  left: var(--space-8);
  right: var(--space-8);
  text-align: center;
  font: var(--text-caption);
  color: var(--on-brand-soft);
  pointer-events: none;
}
/* The "Move to…" menu opens out of the card, above the cards below it (move_menu.html sets is-menu-open) */
.sp-meal.is-menu-open {
  position: relative;
  z-index: 5;
  overflow: visible;
}
.sp-move-menu__day {
  justify-content: space-between;
}
.sp-move-menu__note {
  color: var(--ink-subtle);
  font-weight: 400;
}
/* 17 hours: the list scrolls inside the menu */
.sp-move-menu__hours {
  max-height: 280px;
  overflow-y: auto;
}
.sp-meal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 10px 6px 10px var(--space-12);
}
.sp-meal__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 2px 0 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
}
button.sp-meal__title {
  cursor: pointer;
}
button.sp-meal__title:hover .sp-meal__name {
  color: var(--brand);
}
.sp-meal__time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.sp-meal__name {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sp-meal__actions {
  display: flex;
  flex-shrink: 0;
}
.sp-meal__items {
  padding: 0 var(--space-12);
}
.sp-meal__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--divider-row);
}
.sp-meal__food {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.sp-meal__food:hover .sp-meal__food-name {
  color: var(--brand);
}
.sp-meal__thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-media);
  object-fit: cover;
}
.sp-meal__food-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-meal__food-name {
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sp-meal__brand {
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-meal__qty {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-meal__text {
  flex: 1;
  min-width: 0;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
}
.sp-meal__text--note {
  font: var(--text-caption);
  font-weight: 400;
  color: var(--ink-secondary);
}
/* Reorder / remove appear over the row's end on hover, so names keep the full width */
.sp-meal__row {
  position: relative;
}
.sp-meal__tools {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  padding-left: var(--space-4);
  background: var(--surface-card);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.12s;
}
.sp-meal__row:hover .sp-meal__tools,
.sp-meal__tools:focus-within {
  opacity: 1;
}
@media (hover: none) {
  .sp-meal__tools {
    position: static;
    transform: none;
    opacity: 1;
  }
}
/* With a mouse, a card's own actions (add, duplicate, move, delete…) also wait for hover, sitting over the top-right
   of the card so the name gets the full width. They stay up while focused or while the Move to… menu is open;
   touch screens always show them. */
@media (hover: hover) {
  .sp-planner .sp-meal__head {
    position: relative;
  }
  /* Covers the whole head height on the right, fading in from the left, so a long name never shows through */
  .sp-planner .sp-meal__actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    align-items: flex-start;
    padding: 6px 6px 0 var(--space-20);
    background: linear-gradient(to right, transparent, var(--surface-card) var(--space-16));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
  }
  .sp-planner .sp-meal--note .sp-meal__actions {
    background: linear-gradient(to right, transparent, var(--surface-subtle) var(--space-16));
  }
  .sp-planner .sp-meal:hover .sp-meal__actions,
  .sp-planner .sp-meal__actions:focus-within,
  .sp-planner .sp-meal.is-menu-open .sp-meal__actions {
    opacity: 1;
    pointer-events: auto;
  }
  /* Not while another card is being dragged over this one */
  .is-planner-dragging .sp-planner .sp-meal:not(.is-drag-chosen):hover .sp-meal__actions {
    opacity: 0;
  }
}
.sp-meal__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
.sp-meal__remove:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

/* Habit rows: brand-soft tile where a thumbnail would be, then a status square */
.sp-meal__habit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
}
.sp-meal__light {
  display: inline-flex;
  flex-shrink: 0;
}
.sp-meal__light > div {
  display: inline-flex;
  height: auto;
}
.sp-meal .habit-light {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
}
/* A habit's status light in a block (habits/includes/habit_light.html), week planner and Day view alike */
.sp-meal__light .habit-light,
.sp-habit-pick .habit-light {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
}
.sp-meal__light .habit-light.green,
.sp-habit-pick .habit-light.green { background: var(--success); border-color: var(--success); }
.sp-meal__light .habit-light.amber,
.sp-habit-pick .habit-light.amber { background: var(--warning); border-color: var(--warning); }
.sp-meal__light .habit-light.red,
.sp-habit-pick .habit-light.red   { background: var(--danger);  border-color: var(--danger); }
.sp-meal__light .habit-light:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* While a habit's status picker is open its block lets the menu out (the card clips for its rounded corners) and
   sits above the blocks below; the totals band keeps the rounded bottom itself */
.sp-meal:has(.sp-habit-pick) {
  position: relative;
  z-index: 20;
  overflow: visible;
}
.sp-meal:has(.sp-habit-pick) .sp-meal__totals {
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}
/* The status picker (habits/traffic_lights.html): a menu under the light, each status named */
.sp-habit-pick {
  position: relative;
  display: inline-flex;
}
.sp-habit-pick__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-menu);
}
.sp-habit-pick__option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: var(--text-body-sm);
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.sp-habit-pick__option:hover,
.sp-habit-pick__option:focus-visible {
  outline: none;
  background: var(--surface-hover);
}
.sp-habit-pick__option.is-current {
  font-weight: 600;
}
.sp-habit-pick__option .habit-light {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0; /* css-v2's .habit-light centres itself, pushing the label away */
  cursor: inherit;
}

/* Quiet totals line: bold kcal, then C / P / F */
/* The block's totals: a full-width gold (brand-soft) band at the foot of the card, no divider above */
.sp-meal__totals {
  padding: var(--space-8) var(--space-12);
  background: var(--brand-soft);
  font: var(--text-caption);
  color: var(--on-brand-soft);
  font-variant-numeric: tabular-nums;
}
.sp-meal__totals strong {
  font-weight: 600;
  color: var(--on-brand-soft);
}

/* Activity block */
.sp-meal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 var(--space-12);
  padding: var(--space-8) 0 10px;
  border-top: 1px solid var(--divider-row);
  font: var(--text-caption);
}
.sp-meal__meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
}
.sp-meal__meta-line svg {
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-meal__burn,
.sp-meal__burn svg {
  color: var(--on-success-soft);
}

/* Note block: reads as a message, not a meal */
.sp-meal--note {
  background: var(--surface-subtle);
  border-color: var(--brand-tan);
}
.sp-meal__note {
  padding: 0 var(--space-12) var(--space-12);
  font: var(--text-caption);
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.sp-meal__byline {
  margin-top: -6px;
  padding: 0 var(--space-12) var(--space-12);
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Performance plate inside a block */
.sp-meal .sp-block-plate {
  padding: 0 var(--space-12) var(--space-12);
}

/* + Add: dashed full-width button, then a 280px menu with icon tiles */
.sp-dayadd {
  display: block;
  margin-bottom: var(--space-16);
}
.sp-dayadd__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-lg);
  background: transparent;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}
.sp-dayadd__btn:hover,
.sp-dayadd__btn[aria-expanded="true"] {
  background: var(--surface-card);
  border-color: var(--border-strong, var(--border-control));
  color: var(--ink);
}
.sp-dayadd__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-add-menu.sp-dropdown-menu {
  left: 0;
  right: auto;
  width: 280px;
  z-index: 30;
}
/* The day's + Add menu floats over the page, placed by spFloatingMenu (planner-week.js) */
.sp-add-menu--floating.sp-dropdown-menu {
  position: fixed;
  top: 0;
  left: 0;
}
.sp-add-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  min-height: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.sp-add-menu__item:hover,
.sp-add-menu__item:focus-visible {
  background: var(--surface-subtle);
  outline: none;
}
.sp-add-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--ink-secondary);
}
.sp-add-menu__name {
  display: block;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-add-menu__desc {
  display: block;
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* NutritionBar: a white card at the foot of each day, all seven aligned */
.sp-day-nutr {
  margin-top: auto;
}
.sp-day-nutr__card {
  padding: var(--space-12) 14px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-day-nutr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px -6px 2px 0;
}
.sp-day-nutr__title {
  font: var(--text-label);
  color: var(--ink);
}
.sp-nbar {
  padding-top: 6px;
}
.sp-nbar__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  font: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
.sp-nbar__name {
  color: var(--ink-muted);
}
.sp-nbar__value strong {
  font-weight: 700;
  color: var(--ink);
}
.sp-nbar__target {
  padding-left: var(--space-4);
  color: var(--ink-placeholder);
}
.sp-nbar__track {
  height: 6px;
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  overflow: hidden;
}
.sp-nbar__fill {
  height: 100%;
  max-width: 100%;
  border-radius: var(--radius-full);
  background: var(--brand-tan);
}
.sp-nbar.is-over .sp-nbar__value strong {
  color: var(--danger);
}
.sp-nbar.is-over .sp-nbar__fill {
  background: var(--danger);
}

/* Week Average */
.sp-week-avg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-24);
  padding: var(--space-16) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-week-avg__title {
  min-width: 120px;
  font: var(--text-section-title);
  letter-spacing: var(--text-section-title-tracking);
  color: var(--ink);
}
.sp-week-avg__item span {
  display: block;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-week-avg__item strong {
  display: block;
  margin-top: 2px;
  font: var(--text-body);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-week-avg__planned {
  margin-left: auto;
  text-align: right;
}

/* Customise Display modal */
.sp-planner-settings .sp-form-section__label {
  margin: var(--space-20) 0 var(--space-4);
}
.sp-planner-settings__plates {
  margin: var(--space-4) 0 0 -10px;
}
.sp-planner-settings__help {
  margin: 0 0 var(--space-12);
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-planner-settings__mfp {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}
.sp-planner-settings__mfp .form-control {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .sp-ptoolbar,
  .sp-ptoolbar__group {
    width: 100%;
  }
  .sp-ptoolbar__date {
    flex: 1;
    min-width: 0;
  }
  .sp-ptoolbar__nav {
    flex: 1;
  }
  .sp-week-avg__planned {
    margin-left: 0;
    text-align: left;
  }
}

/* Status glyphs (masks) shared by habit lights and report status marks */
:root {
  --glyph-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --glyph-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --glyph-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  /* 1.5px icon glyphs (templates/icons add / check / minus) for mask-drawn buttons */
  --glyph-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E");
  --glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --glyph-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* Habit status is never colour alone (HabitGrid.md): a tick for Done,
   a dash for Partly done, a cross for Missed, on every habit light */
.habit-light.green,
.habit-light.amber,
.habit-light.red {
  position: relative;
}
.habit-light.green::after,
.habit-light.amber::after,
.habit-light.red::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: var(--on-brand);
  -webkit-mask: var(--habit-glyph) center / contain no-repeat;
  mask: var(--habit-glyph) center / contain no-repeat;
}
.habit-light.green {
  --habit-glyph: var(--glyph-tick);
}
.habit-light.amber {
  --habit-glyph: var(--glyph-dash);
}
.habit-light.red {
  --habit-glyph: var(--glyph-cross);
}
.sp-meal .habit-light.green { background: var(--success); border-color: var(--success); }
.sp-meal .habit-light.amber { background: var(--warning); border-color: var(--warning); }
.sp-meal .habit-light.red   { background: var(--danger);  border-color: var(--danger); }

/* Nutrition Targets modal (nutritionist/client_targets_modal.html, loaded into
   #updateNutritionCont by the planner and the Day view) */
.sp-targets .form-group {
  margin-bottom: 0;
}
.sp-targets label {
  display: block;
}
.sp-targets-calc {
  margin-bottom: var(--space-20);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sp-targets-calc > summary {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 52px;
  padding: var(--space-8) var(--space-16);
  list-style: none;
  cursor: pointer;
}
.sp-targets-calc > summary::-webkit-details-marker {
  display: none;
}
.sp-targets-calc > summary > svg {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}
.sp-targets-calc[open] > summary > svg {
  transform: rotate(180deg);
}
.sp-targets-calc > summary:focus-visible {
  outline: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-focus);
}
.sp-targets-calc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--ink-secondary);
}
.sp-targets-calc__title {
  display: block;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-targets-calc__desc {
  display: block;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-targets-calc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-top: 1px solid var(--divider-row);
}
.sp-targets-calc__panel,
.sp-targets-calc__panel > .method:not([style*="none"]),
.sp-targets-calc__split {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
/* Label straight above its equation, like any field */
.sp-targets-calc__panel > .wcf.method {
  gap: 0;
}
.sp-targets-calc__split > .sp-btn {
  align-self: flex-start;
}
/* The worked equation: TER = BMR × PAL = total */
.sp-targets-calc__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.sp-targets-calc__line strong {
  color: var(--ink);
}
.sp-targets-calc__mini {
  width: 110px;
}
input.sp-targets-calc__mini {
  width: 80px;
}
.sp-targets .sp-form-section__label {
  margin-bottom: var(--space-12);
}
.sp-targets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}
.sp-targets-grid label span {
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-targets-grid input {
  -moz-appearance: textfield;
}
.sp-targets-grid input::-webkit-inner-spin-button,
.sp-targets-grid input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 575px) {
  .sp-targets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   CLIENT PROGRESS — CardStat (analysis/progress/edit.html + stat_card.html)
   ========================================================================== */
.sp-progress-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.sp-progress-toolbar .sp-btn svg,
.sp-progress-section__head .sp-btn svg,
.sp-stat__empty .sp-btn svg {
  flex-shrink: 0;
}
.sp-progress-section + .sp-progress-section {
  margin-top: var(--space-28);
}
.sp-progress-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.sp-progress-section__title {
  margin: 0 0 var(--space-12);
  font: var(--text-section-title);
  letter-spacing: var(--text-section-title-tracking);
  color: var(--ink);
}
.sp-progress-section__head .sp-progress-section__title {
  margin: 0;
}
.sp-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}

/* The card */
.sp-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-16) var(--space-16) var(--space-12);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-stat__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}
.sp-stat__name {
  min-width: 0;
  font: var(--text-label);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-stat__actions {
  display: flex;
  gap: 2px;
  margin-right: -6px;
}
.sp-stat__actions .sp-iconbtn {
  width: 32px;
  height: 32px;
}
.sp-stat__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: var(--space-4);
}
.sp-stat__number {
  /* TODO(design): CardStat.md's Manrope 700 26px has no type token yet */
  font: var(--text-stat, 700 26px/1.1 var(--font-display));
  letter-spacing: var(--text-stat-tracking, -0.02em);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-stat__unit {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-stat__change {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: var(--space-4);
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-stat__range {
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-stat__target {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-stat__target svg {
  flex-shrink: 0;
  color: var(--brand);
}
.sp-stat__chart {
  position: relative;
  height: 90px;
  margin-top: var(--space-12);
}
.sp-stat__ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-placeholder);
}
.sp-stat__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 150px;
  margin-top: var(--space-12);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-lg);
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Skinfolds: one wide card around progress_radial.html (shared with the
   client's own Progress page, so only restyled here) */
.sp-sf-card > .outline-box {
  padding: var(--space-20) var(--space-24);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.sp-sf-card > .outline-box > .row {
  align-items: center;
}
.sp-sf-card #sfChart {
  max-width: 380px;
  margin: 0 auto;
}
.sp-sf-card .skinfold-header {
  padding: 0 0 6px !important;
  font: var(--text-label);
  color: var(--ink);
  white-space: nowrap;
}
.sp-sf-card .skinfold-header b {
  font-weight: 600;
}
.sp-sf-card .list-unstyled {
  margin: 0;
}
.sp-sf-card .list-unstyled li {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0 !important;
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-sf-card .text-center li {
  justify-content: center;
  font-weight: 600;
}
.sp-sf-card .labels li b {
  font-weight: 400;
  color: var(--ink-secondary);
}
.sp-sf-card .list-unstyled li:last-child {
  font: var(--text-caption);
}
.sp-sf-card .list-unstyled li a {
  color: var(--ink-muted);
  text-decoration: none;
}
.sp-sf-card .list-unstyled li a:hover {
  color: var(--ink);
}

@media (max-width: 1100px) {
  .sp-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .sp-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-progress-toolbar {
    justify-content: flex-start;
  }
}

/* Loaded modal forms (Set Target, Add Entry, body composition): the form
   brings its own header into .modal-body, so pull it out to the modal edges */
.modal-body > .sp-mfrag > .modal-header {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-28)) 0;
}
.sp-mfrag .form-group {
  margin-bottom: var(--space-16);
}
.sp-mfrag .sp-form-grid .form-group {
  margin-bottom: 0;
}
.sp-mfrag label {
  display: block;
}
.sp-label-note {
  font-weight: 400;
  color: var(--ink-muted);
}
/* Dual-unit entry (st + lb, ft + in): two unit fields side by side */
.sp-unit-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
.sp-mfrag__current {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--space-12);
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-mfrag__current strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-mfrag input[type="number"] {
  -moz-appearance: textfield;
}
.sp-mfrag input[type="number"]::-webkit-inner-spin-button,
.sp-mfrag input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Body composition: Date / Height / Weight, then one site table per tab */
.sp-bodycomp__basics {
  margin-bottom: var(--space-20);
}
.sp-bodycomp__tabs {
  margin-bottom: var(--space-16);
}
/* With the tabs showing (a full record), only the chosen table shows */
.sp-bodycomp:has(.sp-bodycomp__tabs:not(.d-none) [value="sf"]:not(:checked)) #bodycomp_skinfolds,
.sp-bodycomp:has(.sp-bodycomp__tabs:not(.d-none) [value="circ"]:not(:checked)) #bodycomp_circ,
.sp-bodycomp:has(.sp-bodycomp__tabs:not(.d-none) [value="br"]:not(:checked)) #bodycomp_breadths {
  display: none;
}
.sp-bc-panel__title {
  display: none;
  margin-bottom: var(--space-8);
  font: var(--text-label);
  color: var(--ink);
}
.sp-bc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 72px);
  align-items: center;
  gap: var(--space-8);
  min-height: 48px;
  border-top: 1px solid var(--divider-row);
}
.sp-bc-row--head {
  min-height: 0;
  padding-bottom: 6px;
  border-top: 0;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-bc-row--head span:not(:first-child) {
  text-align: right;
}
.sp-bc-row__label {
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-bc-row__label span {
  color: var(--ink-muted);
}
.sp-bc-row__inputs {
  display: contents;
}
.sp-bc-row .form-control {
  height: var(--control-sm);
  min-height: 0;
  padding: 0 var(--space-10);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) {
  .sp-bc-row {
    grid-template-columns: minmax(0, 1fr) repeat(3, 56px);
    gap: 6px;
  }
}

/* ==========================================================================
   EDIT METRICS (analysis/progress/edit_log.html + metric_log_card.html,
   metric_log_row.html, bodycomp_log.html): CardStat head over a reading table
   ========================================================================== */
.sp-progress-toolbar--split {
  justify-content: space-between;
  align-items: center;
}
.sp-log-card {
  gap: var(--space-8);
}
.sp-log-scroll {
  max-height: 296px;
  margin: 0 calc(-1 * var(--space-16)) calc(-1 * var(--space-12));
  overflow-y: auto;
}
.sp-log-card--wide .sp-log-scroll {
  max-height: none;
  overflow-x: auto;
}
.sp-log-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
}
.sp-log-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding: 0 var(--space-8);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--divider);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
  text-align: left;
  white-space: nowrap;
}
.sp-log-table th:first-child,
.sp-log-table td:first-child {
  padding-left: var(--space-16);
}
.sp-log-table th:last-child,
.sp-log-table td:last-child {
  padding-right: var(--space-8);
}
.sp-log-table tbody tr + tr > * {
  border-top: 1px solid var(--divider-row);
}
.sp-log-table tbody td,
.sp-log-table tbody th {
  height: 48px;
  padding: 6px var(--space-8);
  vertical-align: middle;
}
.sp-log-table .num {
  text-align: right;
}
.sp-log-date {
  font-weight: 400;
  color: var(--ink-secondary);
  white-space: nowrap;
}
/* The reading reads as plain text until Edit unlocks it */
.sp-log-display,
.sp-log-cell[readonly] {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: right;
  pointer-events: none;
}
.sp-log-value:has(.sp-log-edit:not(.d-none)) .sp-log-display {
  display: none;
}
.sp-log-value .form-control {
  min-width: 110px;
  height: var(--control-sm);
  min-height: 0;
  text-align: right;
}
.sp-log-value .sp-input-unit > input {
  padding-right: 44px !important;
}
.sp-log-cell {
  -moz-appearance: textfield;
}
.sp-log-cell::-webkit-inner-spin-button,
.sp-log-cell::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Unlocked skinfold cells get a field outline */
.sp-log-cell:not([readonly]) {
  width: 64px;
  height: var(--control-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--ink);
  font: inherit;
  text-align: right;
}
.sp-log-cell:not([readonly]):focus {
  outline: none;
  border-color: var(--border-focus, var(--brand));
  box-shadow: var(--shadow-focus);
}
.sp-log-table--sites .sp-log-cell {
  min-width: 48px;
}
.sp-log-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.sp-log-actions > * {
  vertical-align: middle;
}
.sp-log-actions .sp-btn {
  margin-right: var(--space-4);
}

/* Add / Edit Activity (personal/activityplan/activity_modal.html) */
.sp-activity-form > .form-group {
  margin-bottom: var(--space-16);
}
.sp-activity-more {
  margin-top: var(--space-20);
}
.sp-activity-more .form-group {
  margin-bottom: 0;
}
/* Calories burned only once "I know the calories burned" is ticked (MealSlot.md) */
.sp-activity-more:has(#external_cals input:not(:checked)) #id_calories_cont {
  display: none;
}
.sp-activity-form .sp-modal-actions .dropdown-toggle::after {
  display: none;
}

/* Client Library (my_content/docs.html) */
.sp-client-library .sp-page-header .sp-search--narrow {
  margin-bottom: 0;
}
.sp-section-title--spaced {
  margin-top: var(--space-32);
}

/* Client planner (personal/planner/planner.html): the day type the coach set,
   read-only, looking like the coach's filled day-type select */
.sp-planner .sp-day-type--static {
  display: flex;
  align-items: center;
  height: var(--control-sm);
  padding: 0 var(--space-12);
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-planner .sp-page-header + .sp-ptoolbar {
  margin-top: 0;
}

/* Client Dashboard (personal/home.html): To Complete rows are icon, text, chevron on one line (the list row is a
   grid that stacks extra children, so this row is flex) */
.sp-list-row.sp-todo-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.sp-todo-row > .sp-list-main {
  flex: 1;
  min-width: 0;
}
.sp-todo-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--ink-secondary);
}
.sp-todo-row__chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sp-checkin-row__actions {
  display: flex;
  gap: var(--space-4);
}
/* Your coach */
.sp-my-coach {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sp-my-coach__label {
  align-self: flex-start;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-my-coach__label--center {
  align-self: center;
  margin-top: var(--space-16);
}
.sp-my-coach__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-top: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
  font: var(--text-section-title);
  object-fit: cover;
}
.sp-my-coach__name {
  margin-top: var(--space-12);
  font: var(--text-section-title);
  letter-spacing: var(--text-section-title-tracking);
  color: var(--ink);
}
.sp-my-coach__tag {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-my-coach .sp-chip {
  margin-top: var(--space-8);
}
.sp-my-coach__links {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: var(--space-8);
}
.sp-my-coach__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-8);
}
.sp-my-coach__chips .sp-chip {
  margin-top: 0;
}
.sp-my-coach__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  width: 100%;
  margin-top: var(--space-16);
}

/* ==========================================================================
   RECIPE EDITOR + NEW RECIPE MODAL (recipes/recipe_creator.html,
   recipes/modals/create.html, recipes/includes/recipe_fields.html,
   recipes/add_meal_modal.html)
   ========================================================================== */
.sp-recipe-form .form-group {
  margin-bottom: 0;
}
/* The CSRF input comes first, so the first section isn't :first-child */
.sp-recipe-form > .sp-form-section:first-of-type {
  border-top: 0;
}
.sp-recipe-form label,
.sp-recipe-mealtypes legend {
  display: block;
  margin-bottom: var(--space-6);
  font: var(--text-label);
  color: var(--ink);
}
/* Details: image left (280px), title and description right; stacked in the modal */
.sp-recipe-details {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-24);
  align-items: start;
}
.sp-recipe-details__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.sp-recipe-details--modal {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}
.sp-recipe-details--modal .sp-recipe-details__text {
  gap: 0;
}
.sp-recipe-image .sp-label {
  display: block;
}
.sp-recipe-image__pick {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0 !important;
  cursor: pointer;
}
.sp-recipe-image__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
  color: var(--ink-muted);
}
.sp-recipe-image__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.sp-recipe-image__name {
  min-width: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-recipe-image__pick:focus-within .sp-btn,
.sp-recipe-image:has(#id_image:focus-visible) .sp-btn {
  box-shadow: var(--shadow-focus);
}
/* Modal: one dashed row with a 48px thumbnail */
.sp-recipe-details--modal .sp-recipe-image__pick {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-lg);
}
.sp-recipe-details--modal .sp-recipe-image__preview {
  width: 48px;
  height: 48px;
  aspect-ratio: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.sp-recipe-details--modal .sp-recipe-image__row {
  flex: 1;
  min-width: 0;
}
/* Properties: four across (two on phones), then Meal type tiles */
.sp-recipe-props,
.sp-check-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}
.sp-check-tiles {
  gap: var(--space-8);
}
.sp-recipe-mealtypes {
  margin: 0;
  padding: 0;
  border: 0;
}
.sp-check-tile {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: var(--control-md);
  margin: 0 !important;
  padding: 0 var(--space-12);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: var(--text-body-sm) !important;
  color: var(--ink);
  cursor: pointer;
}
.sp-check-tile input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.sp-check-tile:has(input:checked) {
  border-color: var(--ink);
  font-weight: 600 !important;
}
.sp-check-tile:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
/* In the modal the header already spaces the first section, and the
   sections go without their Details / Properties labels */
.sp-recipe-form--modal > .sp-form-section:first-of-type {
  padding-top: var(--space-4);
}
.sp-recipe-form--modal .sp-recipe-edit-section > .sp-form-section__label {
  display: none;
}
/* The file input is visually hidden; legacy rules (css-v2 #id_image, file
   input widths) made it full width, which scrolled the modal sideways */
.sp-recipe-image {
  position: relative;
}
.sp-recipe-image input#id_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}
.sp-recipe-form--modal .sp-modal-actions .sp-btn svg {
  margin-left: 2px;
}

/* Ingredients */
.sp-recipe-edit-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.sp-portions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.sp-stepper__btn {
  width: 32px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: var(--text-body);
  cursor: pointer;
}
.sp-stepper__btn:hover {
  background: var(--surface-hover);
}
.sp-stepper__value {
  width: 44px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
  -moz-appearance: textfield;
}
.sp-stepper__value::-webkit-inner-spin-button,
.sp-stepper__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sp-ing-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.sp-ing-row {
  display: grid;
  grid-template-columns: 40px minmax(160px, 1fr) 84px 132px repeat(5, 56px) 36px;
  align-items: center;
  gap: var(--space-8);
  min-width: 760px;
  padding: var(--space-8) var(--space-12);
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.sp-ing-row--head {
  border-top: 0;
  background: var(--surface-sunken);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
#ing_rows:empty + .sp-ing-row--total {
  border-top: 1px solid var(--divider-row);
}
.sp-ing-row .num {
  text-align: right;
}
.sp-ing-row__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-media);
  overflow: hidden;
}
.sp-ing-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-ing-row__thumb img:not([src]) {
  display: none;
}
.sp-ing-row__name {
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.sp-ing-row .form-control {
  height: var(--control-sm);
  min-height: 0;
  padding: 0 var(--space-8);
}
.sp-ing-row .multiplier {
  text-align: right;
}
.sp-ing-row--total {
  min-height: 0;
}
.sp-ing-row--portion {
  font-weight: 600;
  color: var(--ink);
}
.sp-ing-row__label {
  text-align: right;
  color: var(--ink-muted);
}
.sp-ing-row--portion .sp-ing-row__label {
  color: var(--ink);
}
/* Add an ingredient */
.sp-ing-add {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-ing-add__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}
.sp-ing-add__search {
  flex: 1;
  min-width: 260px;
}
.sp-ing-add .sp-check {
  align-items: center;
}
.sp-ing-results {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* Hidden until a search (or the frequent list) puts results in it */
.sp-ing-results:not(:has(.result)) {
  display: none;
}
.sp-ing-results .result {
  display: block;
  padding: 10px var(--space-12);
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.sp-ing-results .result:first-child {
  border-top: 0;
}
.sp-ing-results .result:hover {
  background: var(--surface-subtle);
}
.sp-ing-add__hint {
  font: var(--text-caption);
  color: var(--ink-muted);
}
/* Method */
.sp-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 128px auto;
  gap: var(--space-12);
  align-items: start;
}
.sp-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--surface-card);
  font: var(--text-caption);
  font-weight: 700;
}
.sp-step__text {
  margin: 4px 0 0;
  font: var(--text-body);
  color: var(--ink);
  white-space: pre-line;
}
.sp-step__img {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.sp-step__actions {
  display: flex;
  margin-top: -4px;
}
.sp-steps__empty {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-step-new {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--border-control);
}
.sp-step-new .form-group {
  margin: 0;
}
.sp-step-new label {
  display: block;
}
.sp-step-new__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
}
.sp-step-new__row label.sp-btn {
  display: inline-flex;
  margin: 0;
}
@media (max-width: 767px) {
  .sp-recipe-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-recipe-props,
  .sp-check-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-step {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }
  .sp-step__img {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Add a Meal / Add an Empty Block (mealplan/mealplan_block_form.html) */
.sp-block-form .form-group {
  margin-bottom: 0;
}
.sp-block-form label {
  display: block;
}
.sp-block-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: var(--space-12);
}
.sp-block-form__suggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-16);
}
.sp-block-form__caption {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-block-form .sp-pill {
  min-height: 32px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border-input);
  background: var(--surface-card);
  color: var(--ink-secondary);
}
.sp-block-form .sp-pill[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface-card);
  font-weight: 600;
}
.sp-block-form .sp-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Image picker: a dashed row with a thumbnail, the file name and Choose image.
   The real file input is visually hidden (1px) and opened by the label. */
.sp-image-field {
  position: relative;
}
.sp-image-field .sp-label {
  display: block;
}
.sp-image-pick {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 14px;
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 400 !important;
}
.sp-image-pick__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
  color: var(--ink-muted);
}
.sp-image-pick__name {
  flex: 1;
  min-width: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-image-pick:hover .sp-btn {
  border-color: var(--border-strong);
}
.sp-image-field:has(.sp-image-pick__input:focus-visible) .sp-image-pick .sp-btn {
  box-shadow: var(--shadow-focus);
}
.sp-image-field .sp-image-pick__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}

/* Upload / Edit Food (foods/upload_food.html + includes/upload_food_fields.html) */
.sp-food-form label {
  display: block;
}
.sp-food-form .form-group {
  margin-bottom: 0;
}
.sp-food-form .help-block {
  margin: var(--space-4) 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-food-form--modal > input[type="hidden"] + .sp-form-section {
  border-top: 0;
  padding-top: var(--space-4);
}
.sp-food-nutr-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-12) var(--space-24);
}
.sp-food-nutr-controls .form-group {
  width: 320px;
  max-width: 100%;
}
.sp-food-nutr-controls .sp-check {
  min-height: var(--control-md);
  align-items: center;
}
.sp-food-nutr {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.sp-food-nutr table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font: var(--text-body-sm);
  font-variant-numeric: tabular-nums;
}
.sp-food-nutr thead th {
  height: 40px;
  padding: 0 var(--space-16);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--divider);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
  text-align: left;
}
.sp-food-nutr thead th.num {
  text-align: right;
}
.sp-food-nutr tbody tr + tr > * {
  border-top: 1px solid var(--divider-row);
}
.sp-food-nutr tbody th,
.sp-food-nutr tbody td {
  height: 52px;
  padding: 6px var(--space-16);
  vertical-align: middle;
}
.sp-food-nutr tbody th {
  font-weight: 500;
  color: var(--ink);
}
.sp-food-nutr__sub th {
  padding-left: calc(var(--space-16) + var(--space-16)) !important;
  font-weight: 400 !important;
  color: var(--ink-secondary) !important;
}
.sp-food-nutr tbody td {
  width: 160px;
}
.sp-food-nutr .form-control {
  height: var(--control-sm);
  min-height: 0;
  text-align: right;
}
/* Values worked out by the page read as plain numbers */
.sp-food-nutr .form-control[readonly] {
  border-color: transparent;
  background: transparent;
  color: var(--ink-secondary);
  box-shadow: none;
}

/* Upload / Edit Content (my_content/edit_doc.html) */
.sp-doc-form label {
  display: block;
}
.sp-doc-form .form-group {
  margin-bottom: 0;
}
.sp-doc-form .help-block {
  margin: var(--space-4) 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-form-card__actions {
  display: flex;
  gap: var(--space-10);
}
.sp-confirm-list {
  margin: 0;
  padding-left: var(--space-20);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}

/* Mealplan Templates: Assign / Share modals — Clients or Group, then the matching picker */
.sp-audience {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-audience:has([value="clients"]:checked) .sp-audience__group,
.sp-audience:has([value="group"]:checked) .sp-audience__clients {
  display: none;
}

/* New Client (page and Add Client modal): nutritionist/includes/new_client_fields.html */
.sp-new-client {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-new-client .form-group {
  margin: 0;
}
.sp-form-card > .sp-new-client-form > .sp-new-client {
  padding: var(--space-24) 0;
}
.sp-callout[hidden] {
  display: none;
}

/* ==========================================================================
   GROUP PAGE (groups/home.html): client-header styles until it has a design
   ========================================================================== */
.sp-group-header .sp-back {
  margin-bottom: var(--space-12);
}
.sp-group-header .sp-client-header-avatar {
  background-color: var(--surface-muted);
  color: var(--ink-secondary);
}
.sp-group-header + .sp-client-tabs .client_result_links svg {
  color: currentColor;
}
.sp-group .sp-empty {
  grid-column: 1 / -1;
}

/* Food Photos: photo cards in a grid; each opens the Food Photo modal */
.sp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-24);
}
.sp-photo-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  cursor: pointer;
}
.sp-photo-card:hover {
  border-color: var(--border-strong);
}
.sp-photo-card:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.sp-photo-card__image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
}
.sp-photo-card__tags {
  position: absolute;
  left: var(--space-10);
  bottom: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.sp-photo-card__tags .sp-badge {
  background: var(--surface-card);
  color: var(--ink);
}
.sp-photo-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16);
}
.sp-photo-card__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: 12px;
  background-size: cover;
  background-position: center;
}
.sp-photo-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sp-photo-card__name {
  font: var(--text-label);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-photo-card__date {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-more-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-24);
}
.sp-more-row:not(:has(*)) {
  display: none;
}

/* Group Progress: the Clients row-view table plus a column button, tags under the name and sparkline cells */
.sp-client-table {
  position: relative;
}
.sp-client-table__tools {
  position: absolute;
  top: var(--space-12);
  left: var(--space-16);
  z-index: 2;
}
.sp-client-table .dataTables_wrapper .top {
  min-height: calc(var(--control-sm) + var(--space-12));
}
.sp-client-rowtags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0 44px;
}
.sp-client-rowtags .sp-btn {
  margin-left: calc(var(--space-8) * -1);
}
.sp-client-rowtags .sp-badge + .sp-btn {
  margin-left: 0;
}
.sp-metric-cell {
  display: flex;
  flex-direction: column;
  min-width: 140px;
}
.sp-metric-cell__value {
  font: var(--text-label);
  color: var(--ink);
}
.sp-metric-cell__chart {
  position: relative;
  width: 140px;
  height: 48px;
  overflow: hidden;
}
.sp-metric-cell__chart canvas {
  display: block;
}
.sp-metric-cell__target {
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Settings tab */
.sp-group-settings {
  max-width: 720px;
}
.sp-group-settings__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) 0;
}
.sp-group-settings__body .form-group {
  margin: 0;
}

/* Food Photo (page and modal body): foods/view_food_photo.html */
.sp-food-photo {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-food-photo__image {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: var(--surface-media);
  border-radius: var(--radius-lg);
}
.sp-food-photo__title {
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-food-photo__sub {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-food-photo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.sp-food-photo__comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--divider);
}
.sp-food-photo__comment {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-food-photo__author {
  font: var(--text-label);
  color: var(--ink);
}
.sp-food-photo__empty {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-food-photo__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-food-photo__actions {
  display: flex;
  justify-content: flex-end;
}
/* In the modal the page header is not loaded; the photo fills the body */
.modal-body .sp-food-photo {
  width: 100%;
}

/* ==========================================================================
   GROUP REPORTS (habits/habit_report.html, groups/planner_report.html):
   a toolbar, a key, then one card per member. No design yet.
   ========================================================================== */
.sp-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-report__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.sp-report__range {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-report__bar .sp-dropdown-item.active {
  font-weight: 600;
  color: var(--ink);
}
.sp-report__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-report__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.sp-report-card {
  padding: var(--space-16) var(--space-20) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-report-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-12);
}
.sp-report-card__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.sp-report-card__score-value {
  font: var(--text-modal-title);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-report-card__score-label {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-report-card__empty {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}

/* Habits Report: habit | 30 small HabitGrid cells | 7-day | 30-day */
.sp-hreport {
  display: flex;
  flex-direction: column;
}
.sp-hreport__row {
  display: grid;
  /* the cells column is exactly 30 cells wide, so every row (and the header) lines up */
  grid-template-columns: minmax(140px, 1fr) calc(30 * 16px + 29 * 3px) 64px 64px;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-hreport__row--head {
  border-top: 0;
  padding-top: 0;
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-hreport__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sp-hreport__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(30 * 16px + 29 * 3px);
}
.sp-hreport__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* A compact HabitGrid cell: 16px with a 10px glyph */
.habit-light.sp-hcell {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-xs);
  background: transparent;
}
.habit-light.sp-hcell.green { background: var(--success); border-color: var(--success); }
.habit-light.sp-hcell.amber { background: var(--warning); border-color: var(--warning); }
.habit-light.sp-hcell.red   { background: var(--danger);  border-color: var(--danger); }
.habit-light.sp-hcell::after {
  width: 10px;
  height: 10px;
}
@media (max-width: 1023px) {
  .sp-hreport__row {
    grid-template-columns: 1fr 56px 56px;
  }
  .sp-hreport__row--head span:nth-child(2) {
    display: none;
  }
  .sp-hreport__cells {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Status mark: a 16px circle with a glyph matching its colour (never colour alone) */
.sp-status-mark {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
}
.sp-status-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  background: var(--on-brand);
  -webkit-mask: var(--mark-glyph) center / contain no-repeat;
  mask: var(--mark-glyph) center / contain no-repeat;
}
.sp-status-mark--good { background: var(--success); --mark-glyph: var(--glyph-tick); }
.sp-status-mark--near { background: var(--warning); --mark-glyph: var(--glyph-dash); }
.sp-status-mark--off  { background: var(--danger);  --mark-glyph: var(--glyph-cross); }

/* Planner Report: rows (activities, energy, macros, photos) by day, plus the week average */
.sp-preport-scroll {
  overflow-x: auto;
}
.sp-preport {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}
.sp-preport th,
.sp-preport td {
  padding: var(--space-8);
  border-top: 1px solid var(--divider-row);
  vertical-align: top;
  font: var(--text-caption);
  color: var(--ink-secondary);
  text-align: left;
}
.sp-preport thead th {
  border-top: 0;
  font-weight: 600;
  color: var(--ink);
}
.sp-preport thead th span {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-preport tbody th {
  width: 88px;
  padding-left: 0;
  font-weight: 600;
  color: var(--ink);
}
.sp-preport tbody th span {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-preport thead th:first-child {
  width: 88px;
}
.sp-preport__avg {
  width: 96px;
  font-weight: 600;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}
.sp-preport__none {
  color: var(--ink-muted);
}
.sp-preport__activity span {
  color: var(--ink-muted);
}
.sp-rmacro__line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
}
.sp-rmacro__line strong {
  color: var(--ink);
}
.sp-rmacro__target {
  color: var(--ink-muted);
}
.sp-rmacro .sp-nbar__track {
  margin-top: var(--space-6);
}
.sp-rmacro.is-green .sp-nbar__fill { background: var(--success); }
.sp-rmacro.is-amber .sp-nbar__fill { background: var(--warning); }
.sp-rmacro.is-red .sp-nbar__fill   { background: var(--danger); }
.sp-preport__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.sp-preport__photo {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.sp-preport__photo:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Choose Columns modal (nutritionist/includes/columns_modal.html) */
.sp-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.sp-columns__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sp-switch-rows--compact .sp-switch-row {
  min-height: 44px;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-columns__note {
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* Clients: licence note under the list when one licence or none is left */
.sp-licence-note {
  align-items: center;
  margin-top: var(--space-24);
}
.sp-licence-note__text {
  flex: 1;
  min-width: 0;
}
.sp-licence-note__text strong {
  color: var(--ink);
}
.sp-licence-note .sp-btn {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .sp-licence-note {
    flex-wrap: wrap;
  }
}

/* Inactive clients: Reactivate sits bottom right of the card */
.sp-inactive-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: var(--space-12);
}

/* Clients: the pending-requests dot on the Requests tab (as on the sidebar's Clients item) */
.sp-tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--badge-alert);
  flex-shrink: 0;
}
.sp-tab-dot[hidden] {
  display: none;
}

/* Manage Subscription tab (nutritionist/account/subscription.html #subscription_import) */
.sp-subscription {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-subscription__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-12) var(--space-20);
  margin: 0;
}
.sp-subscription__summary dt {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-subscription__summary dd {
  margin: 0;
  font: var(--text-label);
  color: var(--ink);
}
.sp-subscription__note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-subscription__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 18px 20px;
  background: var(--surface-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.sp-subscription__plan-text {
  min-width: 0;
}
.sp-subscription__plan-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-subscription__plan-price {
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-subscription__plan .sp-btn,
.sp-subscription__plan > .sp-badge {
  flex-shrink: 0;
}
.sp-subscription__boltons {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-cancel-more {
  display: block;
  margin-top: var(--space-16);
}

/* Plans (license_options.html): billing and currency controls, then plan cards */
.sp-plans__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  margin-bottom: var(--space-24);
}
.sp-plans__note {
  margin-bottom: var(--space-16);
}
.sp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-24);
  align-items: stretch;
}
.sp-plan-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.sp-plan-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-12);
  padding: var(--space-24);
}
.sp-plan-card__title {
  margin: 0;
  font: var(--text-modal-title);
  color: var(--ink);
}
.sp-plan-card__price {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-plan-card__price strong {
  font: var(--text-page-title);
  color: var(--ink);
}
.sp-plan-card__features ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-plan-card__features br {
  display: none;
}
.sp-plan-card__features li svg {
  margin-right: var(--space-6);
  vertical-align: -3px;
  color: var(--brand);
}
.sp-plan-card__cta {
  width: 100%;
  margin-top: auto;
}
.sp-plan-card select + select,
.sp-plan-card .show_currency.form-control {
  margin-top: 0;
}
.sp-plan-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-plan-card__more.d-none {
  display: none;
}
/* the checkout button sits in a per-currency wrapper: push that wrapper to the card's foot */
.sp-plan-card__body > div.show_currency {
  margin-top: auto;
}

/* Result card: the outcome of a flow that left the app (Stripe connected) */
.sp-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 560px;
  margin: var(--space-24) auto 0;
  padding: var(--space-24);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-result-card p {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-status-mark.sp-result-card__mark {
  width: 40px;
  height: 40px;
}
.sp-status-mark.sp-result-card__mark::after {
  width: 22px;
  height: 22px;
}
.sp-result-card__title {
  margin: 0;
  font: var(--text-modal-title);
  color: var(--ink);
}
.sp-result-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-10);
  margin-top: var(--space-8);
}

/* Client Settings tab (nutritionist/client_memberships.html) */
.sp-client-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 880px;
}
.sp-client-settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.sp-client-settings__section .sp-section-title {
  margin: 0;
}
.sp-client-settings__empty,
.sp-client-settings__desc {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-client-settings__status {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-client-settings__status .sp-btn {
  flex-shrink: 0;
}
.sp-client-settings__help {
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-membership-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.sp-membership {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.sp-membership__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.sp-membership__title {
  font: var(--text-section-title);
  color: var(--ink);
}
.sp-membership__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-24);
  margin: 0;
}
.sp-membership__meta dt {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-membership__meta dd {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-membership__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
}
.sp-membership__note {
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-membership__panel {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-top: var(--space-12);
  border-top: 1px solid var(--divider);
}
.sp-membership__panel[hidden] {
  display: none;
}
.sp-membership__panel .form-group {
  margin: 0;
}
.sp-membership__payment {
  display: grid;
  grid-template-columns: 90px 90px 1fr;
  align-items: center;
  gap: var(--space-12);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-membership__payment-status {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
}
.sp-membership__panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}
@media (max-width: 767px) {
  .sp-membership,
  .sp-client-settings__status {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .sp-membership__actions {
    justify-content: flex-start;
  }
}

/* Client header: camera on the avatar opens the Profile Photo overlay */
.sp-client-header-photo {
  position: relative;
  flex-shrink: 0;
}
.sp-client-header-camera {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--ink-secondary);
  box-shadow: var(--shadow-menu);
  cursor: pointer;
}
.sp-client-header-camera:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}
.sp-client-header-camera:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Client edit overlays (client_overview.html) */
.sp-edit-allergies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-16);
  margin: 0;
  padding: 0;
  border: 0;
}
.sp-edit-sport {
  margin-top: var(--space-4);
}
.sp-edit-readonly {
  margin-top: var(--space-12);
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-edit-readonly span:last-child {
  color: var(--ink);
  font-weight: 600;
}
.sp-priority-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.sp-priority-pick__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--control-sm);
  padding: 0 var(--space-14);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: var(--text-body-sm);
  color: var(--ink);
  cursor: pointer;
}
.sp-priority-pick__btn.active,
.sp-priority-pick__btn[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-weight: 600;
}

/* Archive Service confirmation (nutritionist/archive_plan.html#confirm): modal body or page */
.sp-archive-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}
.sp-archive-confirm__lead,
.sp-archive-confirm__note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-archive-confirm__lead strong {
  color: var(--ink);
}
.sp-archive-confirm__clients {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.sp-archive-confirm__clients li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-14);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-archive-confirm__clients li + li {
  border-top: 1px solid var(--divider-row);
}
.sp-archive-confirm .form-group {
  margin: 0;
}
.sp-archive-page {
  max-width: 640px;
  padding-top: var(--space-24);
}

/* Nutrition Targets: missing client details (nutritionist/client_card_modal.html) */
.sp-missing-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  margin-bottom: var(--space-20);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--divider);
}
.sp-missing-details .form-group {
  margin: 0;
}
.sp-missing-details__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-14);
}

/* Performance plates: the pie (planner blocks and the plate modal) in brand shades, not main.css's greys/hex */
.pie__segment:nth-of-type(1) { background: var(--brand); }
.pie__segment:nth-of-type(2) { background: var(--brand-tan); }
.pie__segment:nth-of-type(3) { background: var(--brand-pressed); }
.pie__segment:nth-of-type(4) { background: var(--brand-hover); }
.pie__segment div { color: var(--on-brand); }
.pie__segment:hover,
.pie__segment.active {
  background: var(--ink) !important;
}
.pie__segment:hover div,
.pie__segment.active div {
  color: var(--surface-card);
}

/* Performance Plate modal (nutritionist/performance_plate.html) */
.sp-plate {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-plate__lead {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-plate .pie {
  margin: 0 auto;
  cursor: pointer;
}
.sp-plate-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 3px;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}
.sp-plate-tabs .nav-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--control-sm);
  padding: var(--space-4) var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink-muted);
  text-align: center;
  cursor: pointer;
}
.sp-plate-tabs .nav-link:hover {
  color: var(--ink);
}
.sp-plate-tabs .nav-link.active {
  background: var(--surface-card);
  box-shadow: var(--shadow-menu);
  font-weight: 600;
  color: var(--ink);
}
.sp-plate-tabs__note {
  display: block;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-plate-pane {
  padding-top: var(--space-4);
}
.sp-plate-foods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-12);
}
.sp-plate-food {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.sp-plate-food__img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background-color: var(--surface-media);
  background-size: cover;
  background-position: center;
}
.sp-plate-food__name {
  font: var(--text-caption);
  color: var(--ink-secondary);
}
.sp-plate-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--divider);
}
.sp-plate-examples__label {
  grid-column: 1 / -1;
}
.sp-plate-example {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
}
.sp-plate-example img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-media);
}
.sp-plate-example figcaption {
  font: var(--text-caption);
  color: var(--ink-secondary);
}

/* Configure Performance Plates (nutritionist/client_plate_settings.html) */
.sp-plate-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-plate-meals {
  display: flex;
  flex-direction: column;
}
.sp-plate-meal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 150px auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--divider-row);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-plate-meal__time {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.sp-plate-meal__type.form-control {
  height: var(--control-sm);
  min-height: var(--control-sm);
}
.sp-plate-meals__empty {
  margin: 0;
  padding: var(--space-8) 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
.sp-plate-add {
  padding-top: var(--space-12);
}
.sp-plate-add .sp-btn--tertiary {
  margin-left: calc(var(--space-12) * -1);
}
.sp-plate-add .collapse.show,
.sp-plate-add .collapsing {
  margin-top: var(--space-12);
}
.sp-form-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sp-plate-add__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.sp-plate-add__saving {
  font: var(--text-caption);
  color: var(--ink-muted);
}
@media (max-width: 767px) {
  .sp-plate-meal {
    grid-template-columns: minmax(0, 1fr) 56px auto;
  }
  .sp-plate-meal__type {
    grid-column: 1 / 3;
  }
  .sp-form-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A planner block's plate picker ("High carb ▾"): a neutral picker, not main.css's per-type colours */
.sp-block-plate .sp-plate-btn.btn,
.sp-block-plate .sp-plate-btn.btn:hover,
.sp-block-plate .sp-plate-btn.btn:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-sm);
  padding: 0 var(--space-12);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink);
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-block-plate .sp-plate-btn.btn:hover {
  border-color: var(--border-strong);
}
.sp-block-plate .dayType {
  margin-bottom: var(--space-8);
}

/* "Who can see it?" audience picker (core/modals/assignable_includes.html): toggle chips, then pickers */
.sp-audience-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
}
.sp-audience-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
}
/* doubled class: modal label rules set display:block */
.sp-audience-chips .sp-audience-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-sm);
  margin: 0;
  padding: 0 var(--space-14);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.sp-audience-chip input[type="checkbox"] {
  position: static;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}
.sp-audience-chip > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 16px;
  line-height: 16px;
}
/* Selected: fill, border and tick only; the weight stays 500 so a chip never gets wider and pushes others down */
.sp-audience-chip:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--on-brand-soft);
}
.sp-audience-chip:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
.sp-audience-chip__note {
  font-weight: 400;
  color: var(--ink-muted);
}
.sp-audience-picker__help {
  margin: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-audience-picker__field .sp-form-label {
  display: block;
  margin-bottom: var(--space-6);
}


/* Delete Note? (notes/modal/delete_note.html) */
.sp-delete-note__quote {
  margin: 0;
  padding: var(--space-12) var(--space-14);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-delete-note__day {
  display: block;
  margin-bottom: var(--space-4);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-delete-note__note {
  margin: var(--space-10) 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}

/* A pinned planner note: the pin icon alone (its label is the tooltip / screen-reader text) */
.sp-note-pin {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
}

/* New Team Member (modals/add_coach.html): Details and Client access
   sections, then the invite callout */
.sp-new-member .sp-form-section:first-child {
  padding-top: var(--space-4);
}
.sp-new-member .sp-form-section .form-group {
  margin-bottom: 0;
}
/* Client access (business_settings/includes/client_access_fields.html):
   the Groups picker only shows for Specific groups */
.sp-client-access:has(input[value="true"]:checked) .sp-client-access__groups {
  display: none;
}
/* Edit Team Member (coach_client_management_modal.html) */
.sp-edit-member .sp-form-section:first-child {
  padding-top: var(--space-4);
}
.sp-edit-member .sp-form-section .form-group {
  margin-bottom: 0;
}

/* Request a Specialism (nutritionist/addSkills.html, in My Profile's
   #addSkillsModal): the name, then existing specialisms as chips */
.sp-request-skill .form-group {
  margin-bottom: 0;
}
.sp-request-skill__existing {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-20);
}
.sp-request-skill__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Add Credential (nutritionist/newQualifications_upload.html #import_quals,
   in My Profile's #addNewCredentialModal): type tabs, then one form per tab */
.sp-credential .sp-tabs {
  margin-bottom: var(--space-20);
}
.sp-credential__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-credential__form .form-group,
.sp-credential__form .sp-file-row {
  margin: 0;
}
.sp-credential__form .sp-modal-actions {
  margin-top: var(--space-8);
}

/* Data template (analysis/progress/data_template_modal.html): one metric
   per row with a remove button, then + Add metric */
.sp-data-template__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-data-template__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sp-data-template__row > :first-child {
  flex: 1;
  min-width: 0;
}
.sp-data-template__add {
  margin-top: var(--space-8);
}

/* Note forms (notes/modal/create_note.html planner note, notes app block note):
   Note, then Show it (Pinned | At a time) and the Time field */
.sp-note-form .sp-label {
  display: block;
  margin-bottom: var(--space-6);
}
.sp-note-form .sp-note-form__time {
  max-width: 160px;
}

/* MyFitnessPal diary on a planner day (nutritionist/planner/includes/mfp_day.html
   and the client planner's renderBlankMealBlockCard): read-only MealSlots
   tagged MyFitnessPal (word, not colour alone), placed at 09:00 among the
   day's blocks as before, under a small Refresh MyFitnessPal button at the top */
.sp-mfp-refresh {
  align-self: flex-start;
  gap: var(--space-6);
  order: -1;
}
.sp-meal--mfp {
  order: 900; /* where the old inline "order: 0900" put it */
}
.sp-mfp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-mfp-tag img {
  border-radius: var(--radius-xs);
}
.sp-mfp-loading {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  order: -1;
  padding: var(--space-12);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-mfp-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}
.sp-mfp-error p {
  margin: var(--space-4) 0 var(--space-8);
}

/* Shopping List (apps/shopping planner_detail.html + includes/item.html):
   a caption heading per day or block, 40px checkbox rows, ticked items
   struck through (the tick, not colour alone), Delete all in the footer */
.sp-shopping__group + .sp-shopping__group {
  margin-top: var(--space-16);
}
.sp-shopping__heading {
  margin: 0 0 var(--space-6);
  font: var(--text-caption);
  font-weight: 700;
  color: var(--ink-muted);
}
.sp-shopping__item {
  margin: 0;
}
.sp-shopping__item .sp-check {
  align-items: center;
  min-height: 40px;
}
.sp-shopping__item .sp-check input {
  margin: 0;
}
.sp-shopping__name {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-8);
  min-width: 0;
}
.sp-shopping__qty {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.sp-shopping__item:has(input:checked) .sp-shopping__name {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.sp-shopping__empty {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* A row's action on the right (My Data: Request download / Download) */
.sp-settings-row__action {
  flex-shrink: 0;
}
.sp-settings-row__action form {
  margin: 0;
}
.sp-settings-row__action .sp-btn {
  gap: var(--space-6);
}
@media (max-width: 600px) {
  .sp-settings-rows .sp-settings-row:has(.sp-settings-row__action) {
    flex-wrap: wrap;
  }
}

/* Collection form (collations/forms/div.html) with enable_marketplace_seller:
   Price and Currency side by side, Price's hint under the price */
.sp-form-stack--full:has(.sp-form-stack__field--price) {
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--space-12);
}
.sp-form-stack--full:has(.sp-form-stack__field--price) > .sp-form-stack__field {
  flex: 1 1 100%;
  min-width: 0;
}
.sp-form-stack--full > .sp-form-stack__field--price {
  flex: 1 1 0 !important;
}
.sp-form-stack--full > .sp-form-stack__field--currency {
  flex: 0 0 140px !important;
}

/* Client Payments (personal/my_payments.html #import_payments): Upcoming and
   History lists; each row is what/who and when, the amount, then a status
   badge (word, not colour alone) and Pay by card when it can be paid */
.sp-payments .sp-form-section__label {
  margin: var(--space-20) 0 var(--space-4) !important;
}
.sp-payments__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--divider-row);
}
.sp-payments__row:last-child {
  border-bottom: 0;
}
.sp-payments__main {
  flex: 1 1 220px;
  min-width: 0;
}
.sp-payments__title {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-payments__meta {
  margin-top: 2px;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-payments__amount {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-payments__status {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sp-payments__empty {
  margin: var(--space-8) 0 0;
  font: var(--text-body-sm);
  color: var(--ink-muted);
}

/* Check-in form (analysis/q_response.html) and read-only view
   (viewonly_q_response.html): one question per block, its label/legend in
   label type; choices are pill radios (selected: ink), traffic lights carry a
   colour dot and the word so the answer isn't colour alone */
.sp-checkin-form .sp-checkin-q {
  margin: 0 0 var(--space-20);
  padding: 0;
  border: 0;
}
.sp-checkin-form .sp-checkin-q > label,
.sp-checkin-form .sp-checkin-q > legend {
  display: block;
  width: auto;
  margin: 0 0 var(--space-8);
  font: var(--text-label);
  color: var(--ink);
}
.sp-checkin-q__number {
  max-width: 240px;
}
.sp-checkin-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.sp-checkin-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-sm);
  margin: 0;
  padding: 0 var(--space-14);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  font: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.sp-checkin-choices--emoji .sp-checkin-choice,
.sp-checkin-choices--thumbs .sp-checkin-choice {
  font: var(--text-modal-title); /* emoji at 20px, as the prototype sizes them */
}
.sp-checkin-choice:hover {
  border-color: var(--border-strong);
}
.sp-checkin-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sp-checkin-choice:has(input:checked),
.sp-checkin-choice.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface-card);
  font-weight: 600;
}
.sp-checkin-choice:has(input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
.sp-checkin-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1.5px var(--surface-card);
}
.sp-checkin-dot--red { background: var(--danger); }
.sp-checkin-dot--amber { background: var(--warning); }
.sp-checkin-dot--green { background: var(--success); }
/* Read-only check-in: question, then the answer */
.sp-checkin-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
}
.sp-checkin-answer dt {
  margin-bottom: var(--space-6);
  font: var(--text-label);
  color: var(--ink);
}
.sp-checkin-answer dd {
  margin: 0;
}
.sp-checkin-choice--static {
  cursor: default;
}
.sp-checkin-choice--emoji {
  font: var(--text-modal-title);
}
.sp-checkin-value {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-checkin-text {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-checkin-text p:last-child {
  margin-bottom: 0;
}
.sp-checkin-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--divider);
}
.sp-checkin-feedback__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-14);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}
.sp-checkin-feedback__from {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.sp-checkin-feedback__from .sp-avatar-circle {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
.sp-checkin-feedback__name {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-checkin-feedback__time {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-checkin-feedback__image {
  max-width: 250px;
  max-height: 250px;
  border-radius: var(--radius-md);
}

/* Apply a Template (coach: manage_mealplans.html#template-apply-form; client:
   personal/templates_for_day.html) */
.sp-apply-template__lead {
  margin: 0 0 var(--space-16);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* One row that scrolls sideways rather than wrapping (mobile.md) */
.sp-apply-template .sp-filter-pills {
  flex-wrap: nowrap;
  margin-bottom: var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
}
/* More collections off to the right: fade the edge so it's clear the row scrolls */
.sp-apply-template .sp-filter-pills.has-more {
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, currentColor calc(100% - 48px), transparent);
}
.sp-apply-template .sp-filter-pills::-webkit-scrollbar {
  display: none;
}
.sp-apply-template .sp-filter-pill {
  flex-shrink: 0;
  white-space: nowrap;
}
.sp-apply-template__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
}
.sp-apply-template__view:hover {
  color: var(--ink);
  text-decoration: underline;
}
.sp-tpl-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.sp-tpl-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.sp-tpl-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-14);
  cursor: pointer;
  list-style: none;
}
.sp-tpl-card__head::-webkit-details-marker {
  display: none;
}
.sp-tpl-card__name {
  margin-right: auto;
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-tpl-card__chevron {
  display: inline-flex;
  color: var(--ink-muted);
  transition: transform 0.12s ease;
}
.sp-tpl-card details[open] .sp-tpl-card__chevron {
  transform: rotate(180deg);
}
.sp-tpl-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 0 var(--space-14);
}
.sp-tpl-card__block-title {
  margin-bottom: var(--space-4);
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-tpl-card__meal {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-4) 0;
  font: var(--text-body-sm);
  color: var(--ink);
}
.sp-tpl-card__meal img {
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-media);
}
.sp-tpl-card__actions {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-12) var(--space-14);
}

/* Service purchase (service_sale/1–3): the step card beside a service
   summary card; the summary goes first on a phone */
.sp-purchase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-24);
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
}
.sp-purchase-step {
  padding: var(--space-28);
}
.sp-purchase-step__label {
  font: var(--text-caption);
  font-weight: 600;
  color: var(--ink-muted);
}
.sp-purchase-step__title {
  margin: var(--space-8) 0 var(--space-6);
  font: var(--text-modal-title);
  letter-spacing: var(--text-modal-title-tracking);
  color: var(--ink);
}
.sp-purchase-step__lead {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-purchase-step__ref {
  margin: var(--space-12) 0 0;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-purchase-step__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-24);
  padding-top: var(--space-20);
  border-top: 1px solid var(--divider);
}
.sp-purchase-step__spinner {
  width: 24px;
  height: 24px;
  margin-top: var(--space-20);
  border: 2px solid var(--ink-muted);
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp-spin 0.8s linear infinite;
}
.sp-purchase-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-20);
}
.sp-purchase-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sp-purchase-choice__title {
  font: var(--text-body);
  font-weight: 600;
  color: var(--ink);
}
.sp-purchase-choice p {
  margin: 0 0 var(--space-8);
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-purchase-choice .sp-btn {
  margin-top: auto;
}
.sp-purchase-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-purchase-result svg {
  padding: var(--space-4);
  border-radius: var(--radius-full);
}
.sp-purchase-result--success svg { background: var(--success); color: var(--ink); }
.sp-purchase-result--pending svg { background: var(--warning); color: var(--ink); }
.sp-purchase-result--error svg { background: var(--danger); color: var(--on-brand); }
.sp-purchase-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-20);
}
.sp-purchase-summary__coach {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--divider-row);
}
.sp-purchase-summary__coach .sp-avatar-circle {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.sp-purchase-summary__caption {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-purchase-summary__coach-name {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.sp-purchase-summary__title {
  margin-top: var(--space-4);
  font: var(--text-card-title);
  color: var(--ink);
}
.sp-purchase-summary__price {
  font: var(--text-modal-title);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sp-purchase-summary__price span {
  margin-left: var(--space-4);
  font: var(--text-body-sm);
  color: var(--ink-muted);
}
/* Logged out (step 1) there's no app shell padding around the page */
body.anonymous .sp-purchase {
  padding: var(--space-32) var(--space-16);
}
.sp-purchase-summary__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font: var(--text-caption);
  color: var(--ink-muted);
}
@media (max-width: 767px) {
  .sp-purchase {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-purchase-summary {
    order: -1;
  }
  .sp-purchase-step {
    padding: var(--space-20);
  }
  .sp-purchase-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Service page (plan_detail.html): the Join / Request Service button under
   the price; logged out there's no app shell, so keep a 16px phone gutter
   and stop the Bootstrap row's negative margins overflowing */
.sp-plan-detail .sp-plan-join {
  margin-top: var(--space-12);
}
body.anonymous .sp-plan-detail {
  padding: var(--space-24) var(--space-16);
}
@media (max-width: 767px) {
  body.anonymous .sp-plan-detail > .row {
    margin-left: 0;
    margin-right: 0;
  }
  body.anonymous .sp-plan-detail > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Client template page (personal/template_detail.html): the coach template page without editing.
   Header with Add to planner, day tabs, one card per block with a scrolling nutrition table,
   then Allergens and Nutrition Information side by side (stacked on phones). */
.sp-tpl-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}
.sp-tpl-detail__desc {
  margin: var(--space-4) 0 0;
  font: var(--text-body);
  color: var(--ink-muted);
}
.sp-tpl-detail__days {
  margin-bottom: var(--space-24);
}
.sp-tpl-detail__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sp-tpl-block__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--divider);
}
.sp-tpl-block__time {
  font: var(--text-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sp-tpl-block__title {
  margin: 0;
  font: var(--text-body);
  font-weight: 600;
}
.sp-tpl-block__note {
  margin: 0;
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--divider);
  font: var(--text-body-sm);
  color: var(--ink-secondary);
}
.sp-tpl-block__scroll {
  overflow-x: auto;
}
.sp-tpl-block__table {
  min-width: 640px;
  margin: 0;
}
.sp-tpl-block__table th:first-child,
.sp-tpl-block__table td:first-child {
  min-width: 160px;
}
.sp-tpl-block__table tfoot th,
.sp-tpl-block__table tfoot td {
  border-top: 1px solid var(--divider) !important;
  padding: 12px 16px !important;
  font: var(--text-body-sm);
  font-weight: 600;
}
.sp-tpl-block__unit,
.sp-tpl-block__brand {
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-tpl-block__brand {
  display: block;
}
.sp-tpl-block__ingredients summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  list-style: none;
}
.sp-tpl-block__ingredients summary::-webkit-details-marker {
  display: none;
}
.sp-tpl-block__ingredients[open] summary svg {
  transform: rotate(180deg);
}
.sp-tpl-block__ingredients ul {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font: var(--text-caption);
  color: var(--ink-muted);
}
.sp-tpl-block__ingredients li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 2px 0;
}
.sp-tpl-detail__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-32);
  align-items: start;
}
.sp-tpl-allergens__label {
  margin: 0 0 var(--space-8);
  font: var(--text-label);
}
.sp-tpl-allergens__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}
.sp-tpl-nutrition {
  margin: 0;
}
.sp-tpl-nutrition__micro summary {
  margin-top: var(--space-12);
  font: var(--text-body-sm);
  color: var(--brand);
  cursor: pointer;
}
@media (max-width: 767px) {
  .sp-tpl-detail__header {
    flex-direction: column;
  }
  .sp-tpl-detail__panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Coach template page (edit_template.html): day tabs above the blocks */
.sp-template-days {
  margin: var(--space-16) 0 var(--space-8);
}

/* Food Search rows (view_all_foods.html): a 40px thumbnail before the name and macros */
.sp-food-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.sp-food-row__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-media) center / cover no-repeat;
}
.sp-food-row__text {
  min-width: 0;
}

/* Phones: a list row with a right-hand value (Questionnaires' counts, My Services' price, Mealplan Templates'
   Shared) gives the title the full width, then puts the value and the actions on the line below (Sean, 2026-09-30) */
@media (max-width: 767px) {
  .sp-list-row:has(> .sp-list-value) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sp-list-row:has(> .sp-list-value) > .sp-list-main,
  .sp-list-row:has(> .sp-list-value) > .sp-list-meta {
    grid-column: 1 / -1;
  }
  .sp-list-row:has(> .sp-list-value) > .sp-list-main {
    grid-row: 1;
  }
  .sp-list-row:has(> .sp-list-value) > .sp-list-meta {
    grid-row: 2;
  }
  .sp-list-row:has(> .sp-list-value) > .sp-list-value {
    grid-column: 1;
    grid-row: 3;
  }
  .sp-list-row:has(> .sp-list-value) > .sp-list-actions {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Clients page: the search before the view switcher; full width on a phone */
.sp-client-toolbar {
  align-items: center;
}
.sp-client-search {
  width: 260px;
  margin: 0;
}
@media (max-width: 767px) {
  .sp-client-toolbar {
    flex: 1 1 100%;
  }
  .sp-client-search {
    flex: 1;
    width: auto;
  }
}
/* Clients page: a card that doesn't match the search (searchClients in nutritionist/manage.html) */
#client-grid-view .client-card.sp-search-miss {
  display: none !important;
}

/* Add Activity: a long activity type name ends in an ellipsis on a phone (one line: the list's rows are a fixed height) */
.sp-activity-form .bootstrap-select .dropdown-menu .dropdown-item .text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Recipes by author (recipes/view_user_foods.html): the author's Avatar (40px) beside the page title, with the
   recipe count under the name */
.sp-author-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}
.sp-author-head .pagename {
  margin: 0;
}
.sp-author-head__count {
  font: var(--text-body-sm);
  color: var(--ink-muted);
}

/* Coach profile location (RS-151): Town or city and Country, stacked in the narrow profile card, then Save */
.sp-profile-location-fields {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.sp-profile-location-fields .sp-form-label {
  margin-bottom: var(--space-4);
}