/* ==========================================================================
   My Profile modal (Components/Account/ProfileModal) — design "2a".
   Global, not scoped: the modal is five child components, and scoped CSS cannot reach a child's
   elements without ::deep on every rule. Every class carries the pm- prefix instead.
   The weight card's rules are in profile-modal-weight.css (the repo keeps files under 500 lines).
   ⚠️ Every rule is under .pm-modal on purpose: App.razor loads Bootstrap AFTER this file, so a
   bare single-class rule loses to .btn, .modal-content and friends at equal specificity.
   Colours are the design tokens; macro colours are the app-wide ones and never mean good or bad.
   The one verdict colour is --fs-error, for "behind your goal pace".
   ========================================================================== */

.pm-modal {
  background-color: var(--fs-backdrop);
}

/* One column since the tabs: at 920px each card stretched to the full width with its figures stranded
   at the left edge. */
.pm-modal .pm-dialog {
  max-width: 600px;
}

.pm-modal .pm-content {
  border: none;
  border-radius: var(--fs-radius-xl);
  box-shadow: var(--fs-shadow-dialog);
  color: var(--fs-text-primary);
}

/* --- Header --------------------------------------------------------------- */

.pm-modal .pm-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
  padding: 16px 8px 8px 20px;
}

.pm-modal .pm-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pm-modal .pm-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--fs-text-primary); /* the global h2 colour is the brand gold */
}

.pm-modal .pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  order: 3;
  flex-basis: 100%;
}

.pm-modal .pm-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-bg-selected);
  color: var(--fs-text-primary);
  font-size: 13px;
  font-weight: 600;
}

.pm-modal .pm-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fs-bg-primary);
  color: var(--fs-text-primary);
  font-size: 12px;
}

.pm-modal .pm-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--fs-text-secondary);
  font-size: 20px;
}

.pm-modal .pm-close:hover {
  background: var(--fs-bg-tertiary);
}

/* --- Body ----------------------------------------------------------------- */

.pm-modal .pm-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Daily target + macros ------------------------------------------------ */

.pm-modal .pm-target {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 176px;
  padding: 14px;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-macro-kcal);
  color: var(--fs-text-on-macro);
}

.pm-modal .pm-target-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.pm-modal .pm-target-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fs-text-on-macro-a14);
}

.pm-modal .pm-target-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.pm-modal .pm-target-unit {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
}

.pm-modal .pm-target-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.pm-modal .pm-target-bar-solid {
  background: var(--fs-text-on-macro);
}

.pm-modal .pm-target-bar-gap {
  background: repeating-linear-gradient(
    135deg,
    var(--fs-text-on-macro-a55) 0 2px,
    transparent 2px 5px
  );
}

.pm-modal .pm-target-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pm-modal .pm-macros {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--fs-border-default);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-bg-primary);
}

.pm-modal .pm-macro-bar {
  display: grid;
  gap: 3px;
  height: 10px;
}

.pm-modal .pm-macro-segment:first-child {
  border-radius: 5px 0 0 5px;
}
.pm-modal .pm-macro-segment:last-child {
  border-radius: 0 5px 5px 0;
}
.pm-modal .pm-macro-segment:only-child {
  border-radius: 5px;
}

.pm-modal .pm-macro-protein {
  background: var(--fs-macro-protein);
}
.pm-modal .pm-macro-carbs {
  background: var(--fs-macro-carbs);
}
.pm-modal .pm-macro-fat {
  background: var(--fs-macro-fat);
}

/* A key to the bar, not columns under it: whether a range fits under its segment depends on the day's split. */
.pm-modal .pm-macro-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
}

.pm-modal .pm-macro-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pm-modal .pm-macro-name::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
}

.pm-modal .pm-macro-protein-text::before {
  background: var(--fs-macro-protein);
}
.pm-modal .pm-macro-carbs-text::before {
  background: var(--fs-macro-carbs);
}
.pm-modal .pm-macro-fat-text::before {
  background: var(--fs-macro-fat);
}

.pm-modal .pm-macro-protein-text {
  color: var(--fs-macro-protein-text);
}
.pm-modal .pm-macro-carbs-text {
  color: var(--fs-macro-carbs-text);
}
.pm-modal .pm-macro-fat-text {
  color: var(--fs-macro-fat-text);
}

/* Forced colours paint backgrounds over: the bar is drawn in the user's text colour, its gaps still parting the macros. Three
   squares in one colour say nothing, so they go, and the names match the bar by order. */
@media (forced-colors: active) {
  .pm-modal .pm-macro-segment {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .pm-modal .pm-macro-name::before {
    display: none;
  }
}

.pm-modal .pm-macro-grams {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.pm-modal .pm-macro-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-text-secondary);
}

/* --- Secondary actions ---------------------------------------------------- */

.pm-modal .pm-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.pm-modal .pm-retake {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.pm-modal .pm-retake-note {
  font-size: 12px;
  color: var(--fs-text-secondary);
}

.pm-modal .pm-sources-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--fs-text-secondary);
}

.pm-modal .pm-sources-toggle:hover {
  color: var(--fs-text-primary);
}

.pm-modal .pm-sources-chevron {
  font-size: 10px;
}

.pm-modal .pm-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg-secondary);
  list-style: none;
  font-size: 13px;
}

.pm-modal .pm-sources li {
  display: flex;
  flex-direction: column;
}

.pm-modal .pm-source-title {
  font-weight: 600;
}

.pm-modal .pm-source-orgs {
  font-size: 12px;
  color: var(--fs-text-secondary);
}

/* --- Footer --------------------------------------------------------------- */

.pm-modal .pm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px;
  border-top: 1px solid var(--fs-border-default);
}

.pm-modal .pm-sign-out {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-text-secondary);
  text-decoration: none;
}

.pm-modal .pm-sign-out:hover {
  color: var(--fs-text-primary);
}

.pm-modal .pm-delete {
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--fs-text-secondary);
}

.pm-modal .pm-delete:hover {
  color: var(--fs-error-text);
  text-decoration: underline;
}

/* --- Tabs: Daily targets | Weight ----------------------------------------- */

.pm-modal .pm-tabs {
  display: flex;
  gap: 4px;
  margin: 0 20px;
  border-bottom: 1px solid var(--fs-border-default);
}

.pm-modal .pm-tab {
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--fs-text-secondary);
}

.pm-modal .pm-tab.pm-tab-active {
  border-bottom-color: var(--fs-primary-text);
  color: var(--fs-text-primary);
}

.pm-modal .pm-tab:focus-visible {
  outline: 2px solid var(--fs-primary-text);
  outline-offset: -2px;
}

/* --- Calories: one tile, maintenance folded in (3a) --------------------------- */

.pm-modal .pm-target-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-modal .pm-target-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pm-modal .pm-maintenance-bracket {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.pm-modal .pm-bracket-rule {
  flex: 1;
  border-top: 1px dashed var(--fs-text-on-macro-a60);
}

.pm-modal .pm-bracket-label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* --- Footer's feedback link ----------------------------------------------- */

.pm-modal .pm-feedback {
  font-size: 13px;
}


/* --- Desktop: the header holds the chips on its right; bigger hero and chart --- */

@media (min-width: 992px) {
  .pm-modal .pm-header {
    flex-wrap: nowrap;
    padding: 16px 8px 12px 28px;
  }

  .pm-modal .pm-title {
    font-size: 22px;
  }

  .pm-modal .pm-chips {
    order: 0;
    flex-basis: auto;
    padding-top: 8px;
  }

  .pm-modal .pm-footer {
    padding: 4px 28px;
  }

  .pm-modal .pm-target {
    padding: 20px;
  }
  .pm-modal .pm-target-value {
    font-size: 52px;
  }
  .pm-modal .pm-chart svg {
    height: 120px;
  }
  .pm-modal .pm-readout-value {
    font-size: 34px;
  }
}

/* --- Phones: dock to the bottom as a sheet -------------------------------- */

@media (max-width: 575.98px) {
  .pm-modal .pm-dialog {
    align-items: flex-end;
    min-height: 100%;
    margin: 0;
  }

  .pm-modal .pm-dialog.modal-dialog-scrollable {
    height: 100%;
  }

  /* Three classes, not two: Bootstrap's .modal-dialog-scrollable .modal-content sets max-height:100%
     at the same weight and loads later, which pinned the sheet to the top edge. */
  .pm-modal .pm-dialog.modal-dialog-scrollable .pm-content {
    max-height: calc(100% - 24px);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--fs-shadow-lg); /* docked to the bottom: the upward sheet shadow */
  }

  .pm-modal .pm-header {
    padding-top: 12px;
  }
}

/* 320px: the three footer actions wrap as whole items instead of breaking each label in two. */
@media (max-width: 359.98px) {
  .pm-modal .pm-footer {
    flex-wrap: wrap;
    column-gap: 12px;
    padding-inline: 16px;
  }

  .pm-modal .pm-footer > * {
    white-space: nowrap;
  }

  /* Delete stays far right, away from the other actions, when it wraps. */
  .pm-modal .pm-delete {
    margin-left: auto;
  }
}

/* Hover (#1074, Claude Design 9eae6aed): the inactive tab's text turns ink and its underline shows in the
   control grey. Pointer devices only. */
@media (hover: hover) {
  .pm-modal .pm-tab:not(.pm-tab-active):hover {
    border-bottom-color: var(--fs-border-control);
    color: var(--fs-text-primary);
  }
}