/* =========================================================
       CSS VARIABLES — DESIGN SYSTEM (from your theme)
       ========================================================= */
:root {
  --accent: #5a83d3;
  --body: #e9ebf3;
  --dashboard: #d1d4df;
  --sidebar: #eaecf2;
  --card: #fcfcfc;
  --sidebarActive: #dde2ee;
  --iconBackground: #f0f0f6;
  --inputBackground: #fcfcfc;
  --tableHeader: #f9f7fb;
  --textPrimary: #000000;
  --textSecondary: #212529b2;
  --textAccent: #4c78ce;
  --textMuted: #6b7280;
  --borderLight: #ebe7e7;
  --cardBorder: #dee1e7;
  --inputBorder: #e4e3eb;
  --cardShadow: 0px 16px 20px -13px #00000026;
  --shadow2:
    0px 2px 4px 0px #b5b5b51a, 0px 8px 8px 0px #b5b5b517,
    0px 18px 11px 0px #b5b5b50d, 0px 31px 12px 0px #b5b5b503,
    0px 49px 14px 0px #b5b5b500;
  --shadow3:
    0px 0px 4px 0px #b5b5b51a, 0px 2px 4px 0px #b5b5b517,
    0px 8px 4px 0px #b5b5b50d, 0px 12px 4px 0px #b5b5b503,
    0px 45px 14px 0px #b5b5b500;
  --btnPrimaryBg: #5a83d3;
  --btnPrimaryBorder: #2d5ebb;
  --btnPrimaryColor: #ffffff;
  --btnSecondaryBg: #f4f7fa;
  --btnSecondaryBorder: #ebe7e7;
  --btnSecondaryColor: #212529b2;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebarWidth: 245px;
  --dashboardMaxWidth: 1440px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* =========================================================
       BASE
       ========================================================= */
@font-face {
  font-family: "Helvetica Neue";
  src: url(./assets/fonts/HelveticaNeueRoman.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url(./assets/fonts/HelveticaNeueBold.otf) format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url(./assets/fonts/HelveticaNeueMedium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url(./assets/fonts/RalewayVariableFont.ttf) format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html,
body {
  /* height: 100%; */
  overflow-y: auto;
}
@media (min-width:992px){
  
html,
body {
  height: 100%;
}
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--body);
  color: var(--textPrimary);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 63px 48px;
  min-height: auto;
}

/* =========================================================
       LAYOUT
       ========================================================= */
.app-layout {
  display: flex;
  /* min-height: 100vh; */
  max-width: var(--dashboardMaxWidth);
  margin: 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0px 6px 20px 0px #0000001f;
  min-height: 100%;
}

/* =========================================================
       DESKTOP SIDEBAR
       ========================================================= */
.sidebar {
  width: var(--sidebarWidth);
  background-color: var(--sidebar);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0px 0 16px 0;
  border-right: 1px solid #dfe3e9;
}

.sidebar-brand {
  text-align: center;
  margin-bottom: 24px;
  padding: 10px;
  border-bottom: 1px solid #f4f7fa;
}

.sidebar-brand img {
  max-width: 63px;
  height: auto;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.sidebar-nav-item {
  margin-bottom: 2px;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12.5px 20px;
  color: var(--textSecondary);
  text-decoration: none;
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  border-radius: 0;
  margin-left: 10px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.sidebar-nav-link:hover {
  /* background-color: rgba(0, 0, 0, 0.03); */
  background-color: var(--sidebarActive);
  /* color: var(--textPrimary); */
}

.sidebar-nav-link.active {
  background-color: var(--sidebarActive);
  color: var(--textAccent);
  font-weight: var(--fw-medium);
}

.sidebar-nav-link i,
.sidebar-nav-link svg {
  font-size: 20px;
  width: 25px;
  text-align: center;
  flex-shrink: 0;
  color: #000;
}
.sidebar-nav-link.active svg {
  color: var(--textAccent);
}

/* =========================================================
       MOBILE SIDEBER DRAWER
       ========================================================= */
.mobile-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.show {
  display: block;
  opacity: 1;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background-color: var(--sidebar);
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px 0;
  overflow-y: auto;
}

.mobile-sidebar.open {
  transform: translateX(0);
}

.mobile-sidebar .sidebar-brand {
  text-align: left;
  padding: 0 20px;
  margin-bottom: 20px;
}

.mobile-sidebar .sidebar-brand img {
  max-width: 80px;
}

.mobile-sidebar .sidebar-nav-link {
  padding: 12px 20px;
  font-size: 16px;
}

.mobile-sidebar .sidebar-nav-link i,
.mobile-sidebar .sidebar-nav-link svg {
  font-size: 20px;
  width: 28px;
}

.mobile-sidebar-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--textSecondary);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* =========================================================
       MOBILE TOP HEADER
       ========================================================= */
.mobile-top-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--sidebar);
  border-bottom: 1px solid var(--cardBorder);
}

.mobile-top-header .brand-logo {
  height: 32px;
}

.mobile-top-header .menu-toggle {
  background: none;
  border: none;
  color: var(--textSecondary);
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* =========================================================
       MAIN CONTENT
       ========================================================= */
.main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* =========================================================
       PAGE HEADER
       ========================================================= */
.page-header {
  background-color: #fcfcfd;
  padding: 34px 27px 29px;
  border: 1px solid var(--borderLight);
  border-inline: none;
}

.page-header-title {
  font-size: 35px;
  line-height: 38px;
  letter-spacing: -0.3px;
  font-weight: var(--fw-bold);
  margin: 0;
}

.page-header-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: var(--textSecondary);
  margin: 0;
}

.page-header-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================================================
       DATE PICKER
       ========================================================= */

.date-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}
@media (pointer:fine) and (hover: hover) {
.date-picker-wrapper:hover {
  box-shadow: var(--shadow2);
  border-color: #9ca3af;
}
}
.date-picker-wrapper:active {
  box-shadow: var(--shadow2);
  border-color: #9ca3af;
}
.date-picker-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 10px;
}

.date-picker-main i {
  color: var(--textSecondary);
}

.date-picker-main svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #000;
}

.date-picker-chevron i {
  color: var(--textPrimary);
  transition: transform 0.2s ease;
  font-size: 14px;
}

.date-picker-wrapper.picker-open .date-picker-chevron i {
  transform: rotate(180deg);
}

#dateDisplay {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--textSecondary);
  flex: 1;
}

.date-picker-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-left: 1px solid var(--borderLight);
}

.date-picker-chevron svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #000;
  transition: transform 0.2s ease;
}

.date-picker-wrapper.picker-open .date-picker-chevron svg {
  transform: rotate(180deg);
}

/* Stop iOS Safari zooming the page when a date field is opened.
   Safari zooms whenever a focused form control has a font-size under 16px, and
   the custom calendar (js/portal-calendar.js) focuses the field to open — so
   tapping the calendar chevron auto-zoomed the whole page and left the member
   scrolled sideways. None of these inputs declared a font-size at all, so they
   fell back to the UA default of roughly 13px.

   Every one of them is an invisible opacity:0 overlay sitting on top of the
   styled wrapper, so 16px changes nothing visually — it only clears Safari's
   zoom threshold. .pcal-input is the class portal-calendar.js stamps on every
   input it enhances, which covers any picker not named individually here.

   Deliberately NOT fixed with `maximum-scale=1` on the viewport meta: that
   stops the zoom by banning pinch-zoom everywhere, which takes the page's
   zoom away from anyone who needs it. */
.date-picker-input,
.acc-chart-date-picker-input,
.pcal-input,
#dateInput,
#accChartdobInput {
  font-size: 16px;
}

.date-picker-input,
#dateInput {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 10;
  -webkit-appearance: none;
    appearance: none;
}

/* =========================================================
       BODY CONTENT
       ========================================================= */
.body-content {
  padding: 30px 27px 37px;
  background-image: url(./assets/images/background-body.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #f4f6f8;
  flex: 1;
}

/* =========================================================
       INSTRUCTION TEXT
       ========================================================= */
.instruction-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--textSecondary);
  margin-bottom: 16px;
}

/* =========================================================
       CARDS AREA
       ========================================================= */

.card-ds {
  background-color: var(--card);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  box-shadow: var(--cardShadow);
  padding: 0 23px 10px 23px;
  height: 100%;
}

.card-ds-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 0 13px 0;
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--textSecondary);
}

.card-ds-header i {
  color: var(--textPrimary);
  font-size: 20px;
}
.card-ds-header svg {
  color: var(--textPrimary);
  font-size: 25px;
}

/* =========================================================
       LOG ROW
       ========================================================= */
.log-list {
  border-top: 0.5px solid var(--borderLight);
}

.log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 0.5px solid var(--borderLight);
}

.log-row:last-child {
  border-bottom: none;
}

label.error {
  display: block;
  width: 100%;
  order: 3;
  font-size: 12px;
  color: #dc2626;
  margin-top: -6px;
  padding-bottom: 6px;
}
.log-row + label.error {
    margin-top: -20px;
    padding-bottom: 0;
    /* position: absolute; */
}

.log-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 20px;
  color: var(--textSecondary);
  flex-shrink: 0;
}

.log-row-label i {
  color: var(--textPrimary);
  font-size: 20px;
}
.log-row-label svg {
  color: var(--textPrimary);
  font-size: 25px;
}

.log-row-controls {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.23px solid #c9ccd3;
}

.log-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 24px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  border-right: 1.23px solid #c9ccd3;
  background-color: var(--iconBackground);
  color: var(--textSecondary);
}

.log-btn:last-child {
  border-right: none;
}

@media (pointer:fine) and (hover: hover) {
.log-btn:hover {
  background-color: var(--body);
}
}
.log-btn:active {
  background-color: var(--body);
}

.log-btn.active-check,
.log-btn.active-plus,
.log-btn.active-minus,
.log-btn.active-zero {
  /* box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08); */
}
.log-btn.active-check {
  background-color: var(--textAccent);
}
.log-btn.active-check svg path {
  fill: #ffffff;
}
.log-btn.active-plus {
  background-color: var(--textAccent);
}
.log-btn.active-plus svg path {
  fill: #ffffff;
}
.log-btn.active-minus {
  background-color: var(--textAccent);
}
.log-btn.active-minus svg path {
  fill: #ffffff;
}
.log-btn.active-zero {
  background-color: var(--textAccent);
}
.log-btn.active-zero svg path {
  fill: #ffffff;
}

.log-btn:active {
  background-color: rgba(45, 94, 187, 0.17);
}

.log-btn i {
  font-size: 16px;
  color: #6b7280;
}
.log-btn svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
}
.log-btn:last-child svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

/* =========================================================
       ACTION BAR / FOOTER
       ========================================================= */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 30px;
  background-color: var(--card);
  border-top: 1px solid var(--cardBorder);
}

.action-bar-mobile {
  display: none;
  margin-top: 30px;
  border-radius: var(--radius-sm);
  box-shadow: var(--cardShadow);
  border: 1px solid var(--cardBorder);
  align-items: start;
}

.how-to-use-btn-mobile {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 9px;
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--fw-regular);
  text-decoration: underline;
  transition: all 0.15s ease;
  color: var(--textSecondary);
}
@media (pointer:fine) and (hover: hover) {
.how-to-use-btn-mobile:hover {
  text-decoration: none;
}
}
.how-to-use-btn-mobile:active {
  text-decoration: none;
}

.how-to-use-btn {
  background-color: #f4f7fa;
  border: 1px solid #e3e6ef;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--textMuted);
}

.btn-ds-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--btnSecondaryBg);
  border: 1px solid #e3e6ef;
  color: var(--btnSecondaryColor);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
@media (pointer:fine) and (hover: hover) {
.btn-ds-secondary:hover {
  background-color: var(--sidebarActive);
}
}
.btn-ds-secondary:active {
  background-color: var(--sidebarActive);
}

.btn-ds-primary {
  display: block;
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
  padding: 17.5px 24px;
  background-color: var(--btnPrimaryBg);
  border: 1px solid var(--btnPrimaryBorder);
  color: var(--btnPrimaryColor);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.1s ease;
  text-align: center;
}
@media (pointer:fine) and (hover: hover) {
.btn-ds-primary:hover {
  opacity: 0.92;
}
}
.btn-ds-primary:active {
  opacity: 0.92;
}

.btn-ds-primary:active {
  transform: translateY(1px);
}

/* =========================================================
       MOBILE BOTTOM NAV
       ========================================================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--card);
  border-top: 1px solid var(--cardBorder);
  padding: 10px 12px 20px 12px;
  z-index: 1000;
  height: 80px;
  box-shadow: 0px 10px 25px 10px #0000001a;
  transition: transform 0.25s ease;
  will-change: transform;
}

/* Hide-on-scroll-down / show-on-scroll-up (toggled by member-footer.php) */
.mobile-bottom-nav.nav-hidden {
  transform: translateY(120%);
}

.mobile-bottom-nav-list {
  display: flex;
  justify-content: space-between;
  align-items: start;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #7c7c7c;
  font-size: 10px;
  line-height: 14px;
  padding: 4px 8px;
  transition: color 0.15s ease;
  font-weight: var(--fw-medium);
  text-align: center;
}

.mobile-bottom-nav-link i {
  font-size: 20px;
}
.mobile-bottom-nav-link svg {
  width: 25px;
  height: 25px;
}

.mobile-bottom-nav-link.active,
.mobile-bottom-nav-link:has(a.active) {
  color: var(--textAccent);
}
.mobile-bottom-nav-link:active,
.mobile-bottom-nav-link:active span,
.mobile-bottom-nav-link:has(a:active) {
  color: var(--textAccent)!important;
}
.dropdown-menu.dropdown-globe-menu {
  background: #fefefe;
  border: 1px solid #ebe7e7;
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow3);
}
.dropdown-menu.dropdown-globe-menu li:not(:last-child) {
  margin-bottom: 3px;
}
.dropdown-menu.dropdown-globe-menu li a {
  padding: 8px 10px;
  display: flex;
  border-radius: 6px;
  gap: 10px;
  font-size: 16px;
  line-height: 20px;
  color: var(--textSecondary);
  transition: all 0.15s ease;
}
.dropdown-menu.dropdown-globe-menu li a svg {
  width: 20px;
  height: 20px;
}
.dropdown-menu.dropdown-globe-menu li a.active {
  background-color: var(--sidebarActive);
  color: var(--textAccent);
}
.dropdown-menu.dropdown-globe-menu li a.delete-link,
.dropdown-menu.dropdown-globe-menu li a.active.delete-link {
  color: #d54248;
}
.dropdown-menu.dropdown-globe-menu li a:active {
  background-color: #dde2eebd;  
}

/* =========================================================
       MOBILE TOP BAR (logo bar on mobile)
       ========================================================= */
.mobile-top-bar {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: #f4f7fa;
}

.mobile-top-bar img {
  max-width: 63px;
}

/* =========================================================
       RESPONSIVE — TABLET/MOBILE (max-width: 991px)
       ========================================================= */
@media (max-width: 991px) {
  body {
    padding: 0px;
    padding-bottom: 80px;
  }

  .app-layout {
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100% - 85px);
  }

  .sidebar {
    display: none;
  }

  .mobile-top-header {
    display: flex;
  }

  .mobile-top-bar {
    display: flex;
  }

  .page-header {
    padding: 34px 27px 29px;
  }

  .page-header-title {
    font-size: 28px;
    line-height: 36px;
  }

  .mobile-bottom-nav {
    display: block;
  }

  .card-ds {
    padding: 0 23px 10px 23px;
  }

  .action-bar {
    padding: 20px 24px;
  }

  .action-bar-mobile {
    display: flex;
  }

  .action-bar-desktop {
    display: none;
  }
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  body {
    padding-bottom: 74px;
    /* svh, NOT dvh: dvh tracks the mobile URL bar, so the page height changed
       on every frame of a swipe. On short pages (e.g. Homework with all
       accordions closed) that made the page flip between scrollable and
       not-scrollable mid-gesture, which is what flickered. svh is stable. */
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
  }

  .app-layout {
    flex-direction: column;
  }

  .page-header {
    padding: 20px 12px 26px;
  }

  .body-content {
    padding: 30px 12px 20px;
  }

  .page-header-title {
    font-size: 25px;
    line-height: 32px;
  }

  .page-header-subtitle {
    font-size: 16px;
    line-height: 20px;
  }

  .page-header-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .instruction-text {
    font-size: 16px;
    line-height: 20px;
  }

  .card-ds {
    padding: 0 16px 10px 16px;
  }

  .log-row {
    padding: 13px;
    margin: 0 -16px;
  }

  .log-row-label {
    /* font-size: 14px; */
    /* line-height: 18px; */
    font-size: 16px;
    line-height: 20px;
  }

  .log-row-label i {
    font-size: 18px;
  }

  .mobile-bottom-nav {
    display: block;
  }

  .how-to-use-btn {
    display: block;
  }

  .log-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 17px;
  }

  .log-btn i {
    font-size: 14px;
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .btn-ds-secondary {
    display: none;
  }

  .btn-ds-primary {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px 0;
  }

  /* .main-content {
    padding-bottom: 80px;
  } */
  .dropdown-menu.dropdown-globe-menu li a {
    font-size: 14px;
    line-height: 18px;
  }
}
@media (max-width:380px){
.mobile-bottom-nav-list li {
    /* flex: 1; */
}
}
/* =========================================================
       RESPONSIVE — SMALL MOBILE (max-width: 359px)
       ========================================================= */
@media (max-width: 359px) {
  .page-header-title {
    font-size: 22px;
    line-height: 28px;
  }

  .log-btn {
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
  }
}
@media (min-width: 1280px) {
  .col-2xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}


/*--------------------------- TRAINING PROGRAM PAGE ---------------------------*/
/* Page header */

/* Cards grid */
.tp-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 20px;
}

/* Training card */
.link-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px 27px 22px 22px;
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
  height: 118px;
}
@media (pointer:fine) and (hover: hover) {
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 20px 24px -10px #00000030;
}
}
.link-card:active {
  transform: translateY(-2px);
  box-shadow: 0px 20px 24px -10px #00000030;
}

/* Card icon container */
.link-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 73px;
  background-color: var(--iconBackground, #f0f0f6);
  border-radius: var(--radius-sm, 8px);
  flex-shrink: 0;
}

.link-card-icon i {
  font-size: 24px;
  color: var(--textPrimary, #000000);
}
.link-card-icon svg {
  width: 40px;
  height: 40px;
  color: var(--textPrimary, #000000);
}

/* Card content */
.link-card-content {
  flex: 1;
  min-width: 0;
}

.link-card-title {
  font-size: 18px;
  line-height: 25px;
  font-weight: var(--fw-bold, 700);
  color: var(--textPrimary, #000000);
  margin: 0 0 8px 0;
}

.link-card-desc {
  font-size: 16px;
  line-height: 20px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}

/* Card arrow */
.link-card-arrow {
  color: var(--textSecondary, #212529b2);
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
@media (pointer:fine) and (hover: hover) {
.link-card:hover .link-card-arrow {
  transform: translateX(4px);
}
}
.link-card:active .link-card-arrow {
  transform: translateX(4px);
}

/* Document card — icon/content + explicit View/Download actions,
   used in place of a single whole-card link so each action is unambiguous */
.link-card-doc {
  flex-wrap: wrap;
  cursor: default;
}
@media (pointer:fine) and (hover: hover) {
.link-card-doc:hover {
  transform: none;
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
}
}
.link-card-doc:active {
  transform: none;
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
}

.link-card-doc-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
  margin-top: 4px;
}

.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 14px;
  font-weight: var(--fw-bold, 700);
  text-decoration: none;
  border: 1px solid var(--cardBorder, #dee1e7);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
@media (pointer:fine) and (hover: hover) {
.doc-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
}
.doc-btn:active {
  text-decoration: none;
  transform: translateY(-1px);
}

.doc-btn-view {
  background-color: var(--iconBackground, #f0f0f6);
  color: var(--textPrimary, #000000);
}
@media (pointer:fine) and (hover: hover) {
.doc-btn-view:hover {
  background-color: var(--cardBorder, #dee1e7);
  color: var(--textPrimary, #000000);
}
}
.doc-btn-view:active {
  background-color: var(--cardBorder, #dee1e7);
  color: var(--textPrimary, #000000);
}

.doc-btn-download,
.doc-btn-print {
  background-color: var(--brand, #2f6feb);
  border-color: var(--brand, #2f6feb);
  color: #fff;
}
@media (pointer:fine) and (hover: hover) {
.doc-btn-download:hover,
.doc-btn-print:hover {
  opacity: 0.9;
  color: #fff;
}
}
.doc-btn-download:active,
.doc-btn-print:active {
  opacity: 0.9;
  color: #fff;
}
@media (max-width: 480px) {
  .doc-btn span {
    display: inline;
  }
}

/* =========================================================
       RESPONSIVE — TABLET/WIDE (max-width: 1280px)
       ========================================================= */

@media (max-width: 1280px) {
  .tp-cards-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

/* =========================================================
       RESPONSIVE — TABLET (max-width: 991px)
       ========================================================= */
@media (max-width: 991px) {
  .tp-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .tp-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .link-card {
    padding: 12px 20px 12px 16px;
    gap: 9px;
    height: 77px;
  }

  .link-card-icon {
    width: 51px;
    height: 51px;
  }

  .link-card-icon i {
    font-size: 20px;
  }

  .link-card-icon svg {
    width: 28px;
    height: 28px;
  }

  .link-card-title {
    font-size: 12.53px;
    line-height: 17.41px;
    margin-bottom: 6px;
  }

  .link-card-desc {
    font-size: 11.14px;
    line-height: 13.92px;
  }

  .link-card-arrow {
    width: 31px;
    height: 31px;
  }
}

/* =========================================================
       RESPONSIVE — SMALL MOBILE (max-width: 359px)
       ========================================================= */
@media (max-width: 359px) {
  .link-card {
    padding: 12px;
    height: 70px;
  }

  .link-card-icon {
    width: 36px;
    height: 36px;
  }
  .link-card-icon svg {
      width: 26px;
      height: 26px;
  }
  .link-card-title {
      margin-bottom: 4px;
  }
}

.link-card-title, .link-card-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/*--------------------------- PHOTO FOOD JOURNAL PAGE ---------------------------*/

/* Body content area */
.photo-food-page-body {
  padding: 30px 27px 37px;
  background-color: #fcfcfc;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--cardBorder, #dee1e7);
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
}

/* Action cards row */
.action-cards-row {
  display: flex;
  gap: 9px;
  margin-bottom: 24px;
}

/* Action card — same height on all breakpoints */
.action-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 27px;
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow2);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
  flex: 1;
  height: 51px;
}
@media (pointer:fine) and (hover: hover) {
.action-card:hover {
  transform: translateY(-1px);
  /* box-shadow: 0px 20px 24px -10px #00000030; */
  box-shadow: var(--cardShadow);
}
}
.action-card:active {
  transform: translateY(-1px);
  /* box-shadow: 0px 20px 24px -10px #00000030; */
  box-shadow: var(--cardShadow);
}

.action-card i {
  font-size: 32px;
  color: var(--textPrimary, #000000);
  flex-shrink: 0;
}
.action-card svg {
  width: 32px;
  height: 32px;
  color: var(--textPrimary, #000000);
  flex-shrink: 0;
}

.action-card-text {
  font-size: 18px;
  line-height: 25px;
  font-weight: var(--fw-bold, 700);
  color: var(--textPrimary, #000000);
  flex: 1;
}

.action-card-arrow {
  color: var(--textMuted, #6b7280);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  width: 24px;
  height: 24px;
}
@media (pointer:fine) and (hover: hover) {
.action-card:hover .action-card-arrow {
  transform: translateX(4px);
}
}
.action-card:active .action-card-arrow {
  transform: translateX(4px);
}

/* Empty state card */
.photo-food-empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.photo-food-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93px;
  height: 93px;
  background-color: var(--iconBackground, #f0f0f6);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 30px;
}

.photo-food-empty-state-icon i {
  font-size: 32px;
  color: var(--textPrimary, #000000);
}
.photo-food-empty-state-icon svg {
  width: 65px;
  height: 65px;
  color: var(--textPrimary, #000000);
}

.photo-food-empty-state-title {
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
  margin: 0 0 24px 0;
}

.photo-food-empty-state-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .photo-food-page-body {
    padding: 25px 17px;
  }

  /* Stack action cards vertically on mobile */
  .action-cards-row {
    flex-direction: column;
  }

  .action-card {
    padding: 12px 23px;
    height: 51px; /* Same height */
  }

  .action-card i {
    font-size: 24px; /* Smaller icon on mobile */
  }
  .action-card svg {
    width: 25px;
    height: 25px;
  }

  .action-card-text {
    font-size: 16px; /* Smaller text on mobile */
    line-height: 20px;
  }

  .photo-food-empty-state-card {
    padding: 60px 24px;
    padding-top: 50px;
  }

  .photo-food-empty-state-icon {
    width: 61px;
    height: 61px;
    border-radius: 5.22px;
  }

  .photo-food-empty-state-icon i {
    font-size: 24px;
  }
  .photo-food-empty-state-icon svg {
    width: 42px;
    height: 42px;
  }

  .photo-food-empty-state-title {
    font-size: 22px;
    line-height: 25px;
    margin-bottom: 8px;
  }

  .photo-food-empty-state-subtitle {
    font-size: 16px;
    line-height: 20px;
  }
}

/*--------------------------- ADD FOOD ENTRY PAGE ---------------------------*/

/* Form card */
.form-card {
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
  padding: 44px 42px 50px 42px;
}

/* Date & Time row */
.datetime-row {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

/* .datetime-row .date-picker-wrapper {
      flex: 1;
      min-width: 200px;
    } */
.datetime-row .date-picker-wrapper:first-child {
  min-width: 292px;
}
.datetime-row .date-picker-wrapper:last-child {
  min-width: 219px;
}
.datetime-row .date-picker-main {
  flex: 1;
}
.form-card #timeDisplay {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textSecondary);
}

/* Form group */
.form-group-ds {
  margin-bottom: 24px;
}

.form-label-ds {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
  margin-bottom: 7px;
}

/* Select dropdown */
.select-ds {
  width: 100%;
  height: 68px;
  padding: 24px 22px;
  padding-right: 45px;
  background-color: var(--inputBackground, #fcfcfc);
  border: 1px solid var(--inputBorder, #e4e3eb);
  border-radius: var(--radius-sm, 8px);
  font-size: 16px;
  line-height: 20px;
  color: var(--textPrimary, #000000);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236B7280' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.select-ds option {
  color: var(--textPrimary, #000000);
}
.select-ds:has(option[value=""]:checked) {
  color: var(--textSecondary, #212529b2);
}

.select-ds:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

/* Photo upload area */
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 24px;
  background-color: var(--inputBackground, #fcfcfc);
  border: 1px solid var(--inputBorder, #e4e3eb);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
  text-align: center;
}
@media (pointer:fine) and (hover: hover) {
.upload-area:hover {
  border-style: dashed;
  border-color: var(--accent, #5a83d3);
  background-color: rgba(90, 131, 211, 0.03);
}
}
.upload-area:active {
  border-style: dashed;
  border-color: var(--accent, #5a83d3);
  background-color: rgba(90, 131, 211, 0.03);
}

.upload-area.drag-over {
  border-color: var(--accent, #5a83d3);
  background-color: rgba(90, 131, 211, 0.06);
}

.upload-area.has-file {
  border-style: solid;
  border-color: var(--accent, #5a83d3);
  background-color: rgba(90, 131, 211, 0.05);
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: var(--iconBackground, #f0f0f6);
  border-radius: var(--radius-sm, 8px);
  margin-inline: auto;
  margin-bottom: 10px;
}

.upload-icon i {
  font-size: 32px;
  color: var(--textPrimary, #000000);
}
.upload-icon svg {
  width: 70px;
  height: 70px;
  color: var(--textPrimary, #000000);
}

.upload-text {
  font-size: 35px;
  line-height: 45px;
  letter-spacing: -0.3px;
  font-weight: var(--fw-bold, 700);
  color: var(--textPrimary, #000000);
  margin: 0;
}

.upload-hint {
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary, #212529b2);
  margin: 4px 0 0 0;
}
.upload-preview-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius-sm, 8px);
}

/* Remove button */
.upload-remove {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
  z-index: 2;
}
@media (pointer:fine) and (hover: hover) {
.upload-remove:hover {
  background-color: #fee2e2;
  border-color: #ef4444;
}

.upload-remove:hover i {
  color: #ef4444;
}
}
.upload-remove:active {
  background-color: #fee2e2;
  border-color: #ef4444;
}

.upload-remove:active i {
  color: #ef4444;
}
.upload-remove:active {
  transform: scale(0.95);
}

.upload-remove i {
  font-size: 14px;
  color: var(--textSecondary, #212529b2);
}

/* Hide default state when file uploaded */
.upload-area.has-file .upload-default {
  display: none;
}

.upload-area.has-file .upload-preview-wrap {
  display: flex !important;
}

/* Notes textarea */
.textarea-ds {
  width: 100%;
  min-height: 106px;
  padding: 24px 22px;
  background-color: var(--inputBackground, #fcfcfc);
  border: 1px solid var(--inputBorder, #e4e3eb);
  border-radius: var(--radius-sm, 8px);
  font-size: 16px;
  line-height: 20px;
  color: var(--textPrimary, #000000);
  resize: vertical;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  font-family: inherit;
}

.textarea-ds::placeholder {
  color: var(--textSecondary, #212529b2);
  opacity: 0.6;
}

.textarea-ds:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

.notes-hint {
  color: #6b728080;
}

/* Save button */
.btn-save {
  width: 100%;
  max-width: 392px;
  margin: 0 auto;
  height: 64px;
}

/* =========================================================
       RESPONSIVE —  LAPTOP (max-width: 1280px)
       ========================================================= */

@media (max-width: 1280px) {
  .upload-area {
    padding: 40px 20px;
  }
  .upload-icon {
    width: 67px;
    height: 67px;
    margin-bottom: 12px;
  }

  .upload-icon svg {
    width: 48px;
    height: 48px;
  }

  .upload-text {
    font-size: 25px;
    line-height: 25px;
    font-weight: 500;
    margin: 0;
  }
  .form-card {
  padding: 36px 35px 40px 35px;
}
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .datetime-row .date-picker-wrapper:first-child #dateDisplay{
    font-size: 16px;
    line-height: 20px;
  }
  .form-card {
    padding: 35px 17px 36px 17px;
  }

  .datetime-row {
    flex-direction: column;
    margin-bottom: 17px;
  }

  .datetime-row .date-picker-wrapper {
    min-width: auto;
    width: fit-content;
  }
  .form-label-ds {
    margin-bottom: 8px;
  }
  .form-group-ds {
    margin-bottom: 25px;
  }

  .upload-area {
    padding: 30px 20px;
  }

  .upload-icon {
    width: 61px;
    height: 61px;
    margin-bottom: 30px;
  }

  .upload-icon svg {
    width: 42px;
    height: 42px;
  }

  .upload-text {
    font-size: 22px;
    line-height: 25px;
  }

  .btn-save {
    max-width: none;
    height: 54px;
  }
}
@media (max-width:389px){
.datetime-row .date-picker-wrapper:first-child {
    min-width: 0px;
}
}

/*--------------------------- FOOD JOURNAL HISTORY ---------------------------*/

/* Filter tabs row */
.white-black-filter-tabs {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.white-black-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  background-color: #ffffff;
  border: none;
  border-right: 1px solid #e8eaed;
  font-size: 13px;
  line-height: 100%;
  font-weight: var(--fw-medium, 500);
  color: var(--textMuted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.calendar-wrapper {
  position: relative;
  display: inline-block;
}

#white-black-filter-calendar-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

#white-black-filter-calendar-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
@media (pointer:fine) and (hover: hover) {
.white-black-filter-btn:hover,
.calendar-wrapper:hover .white-black-filter-btn {
  background-color: var(--sidebarActive, #dde2ee);
  /* color: var(--textPrimary, #000000); */
}
}
.white-black-filter-btn:active,
.calendar-wrapper:active .white-black-filter-btn {
  background-color: var(--sidebarActive, #dde2ee);
  /* color: var(--textPrimary, #000000); */
}
.white-black-filter-btn:last-child {
  border-right: none;
}

.white-black-filter-btn.active {
  background-color: #111827;
  border-color: #111827;
  color: #ffffff;
}

.white-black-filter-btn i,
.white-black-filter-btn svg {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

/* Table card */
.journal-table-wrap {
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--borderLight, #ebe7e7);
  border-radius: 12px;
  overflow-y: auto;
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
}

/* Table styles */
.journal-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.journal-table thead th {
  padding: 18px 40px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  text-align: left;
  border-bottom: 1px solid var(--borderLight, #ebe7e7);
  background-color: var(--tableHeader, #f8f9fa);
  white-space: nowrap;
  max-width: 200px;
}

.journal-table thead th:last-child {
  /* text-align: right; */
  max-width: 700px;
}

.journal-table tbody td {
  padding: 12px 40px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
  border-bottom: 1px solid var(--borderLight, #ebe7e7);
  vertical-align: middle;
}

.journal-table tbody tr:last-child td {
  border-bottom: none;
}

.journal-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

/* Meal title link */
.journal-meal-link {
  color: var(--textAccent, #4c78ce);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
@media (pointer:fine) and (hover: hover) {
.journal-meal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
}
.journal-meal-link:active {
  opacity: 0.8;
  text-decoration: underline;
}

/* Action menu button */
.journal-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--card, #fcfcfd);
  border: 1px solid var(--borderLight, #ebe7e7);
  border-radius: 8px;
  color: var(--textSecondary, #212529b2);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-size: 18px;
  padding: 0;
}
.journal-menu-btn svg {
  width: 24px;
  height: 24px;
}
@media (pointer:fine) and (hover: hover) {
.journal-menu-btn:hover {
  background-color: var(--iconBackground, #f0f0f6);
}
}
.journal-menu-btn:active {
  background-color: var(--iconBackground, #f0f0f6);
}

.journal-menu-btn::after {
  display: none;
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .journal-table-content {
    background-color: #fcfcfc;
    border: 1px solid var(--cardBorder, #dee1e7);
    border-radius: var(--radius-sm, 8px);
    padding: 30px 20px;
  }

  .journal-table tbody td {
    padding: 14px 13px;
  }

  .journal-table thead th:last-child {
    width: 60px;
  }
  .journal-table thead th {
    padding: 14px 13px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  /* Action menu button */
  .journal-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  .journal-menu-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* =========================================================
       RESPONSIVE — SMALL MOBILE (max-width: 359px)
       ========================================================= */
@media (max-width: 359px) {
  .journal-table thead th,
  .journal-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/*--------------------------- PROFILE PAGE  ---------------------------*/

.profile-body {
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
  padding: 44px 70px 78px 70px;
}

.profile-card {
  margin-bottom: 80px;
}
.profile-card:last-child {
  margin-bottom: 0;
}

/* Section header */
.profile-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.profile-section-head i {
  font-size: 20px;
  color: var(--textPrimary, #000000);
}
.profile-section-head svg {
  width: 24px;
  height: 24px;
  color: var(--textPrimary, #000000);
}

.profile-section-title {
  font-size: 18px;
  line-height: 16px;
  font-weight: var(--fw-bold, 700);
  color: #212529;
  margin: 0;
}

.profile-section-subtitle {
  font-size: 16px;
  line-height: 24px;
  color: #7c7c7c;
  margin: 0 0 54px 0;
}

/* Form grid */
.profile-form .row > *,
.profile-form .row {
  margin-top: 0px;
}

.profile-field {
  margin-bottom: 28px;
}

.profile-label {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
  margin-bottom: 11px;
}

.profile-input,
.profile-select,
.profile-date-picker-wrapper {
  width: 100%;
  height: 68px;
  padding: 20px 22px;
  background-color: var(--inputBackground, #fcfcfc);
  border: 1px solid var(--inputBorder, #e4e3eb);
  border-radius: var(--radius-sm, 8px);
  font-size: 16px;
  line-height: 20px;
  color: var(--textPrimary, #000000);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.profile-input::placeholder {
  color: #21252980;
}

.profile-input:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

/* Select dropdown */
.profile-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236B7280' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.profile-select option {
  color: var(--textPrimary, #000000);
}
.profile-select:has(option[value=""]:checked) {
  color: #21252980;
}

.profile-select:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

/* Date picker wrapper in profile */
.profile-date-wrap {
  position: relative;
}
.profile-date-wrap .profile-date-picker-wrapper {
  padding-right: 45px;
  display: flex;
  align-items: center;
}
.profile-date-wrap .profile-date-picker-icon svg {
  width: 23px;
  height: 24px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.profile-date-wrap #dobDisplay {
  color: var(--textPrimary); /* black when date selected */
}

.profile-date-wrap #dobDisplay.placeholder-color {
  color: #21252980;
}

/* Password field */
.profile-pass-field {
  display: flex;
  gap: 28px;
}
.profile-pass-label-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-basis: 165px;
  flex-shrink: 0;
}
.profile-pass-wrap {
  position: relative;
  flex: 1;
}
.profile-pass-label-wrap .profile-label {
  margin-bottom: 0;
}

.profile-pass-icon {
  width: 20px;
  height: 20px;
  color: var(--textPrimary, #000000);
  font-size: 16px;
}

/* =========================================================
       RESPONSIVE —  (max-width: 1280px)
       ========================================================= */
@media (max-width: 1280px) {
  .profile-body {
    padding: 33px 30px 43px 30px;
  }
  .profile-card {
    margin-bottom: 30px;
  }
  .profile-section-subtitle {
    margin-bottom: 33px;
  }
}
/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .profile-body {
    padding: 24px 17px 30px 17px;
    overflow: hidden;
  }
  .profile-info-form {
    padding-top: 20px;
    position: relative;
  }
  .profile-form-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 1px;
    background-color: #dee1e7;
  }

  .profile-card {
    margin-bottom: 88px;
  }
  .profile-section-subtitle {
    margin-bottom: 16px;
  }
  .profile-label {
    margin-bottom: 8px;
  }
  .profile-input,
  .profile-select,
  .profile-date-picker-wrapper {
    height: 52px;
    padding: 13px 22px;
  }
  .profile-pass-field {
    flex-direction: column;
    gap: 8px;
  }
  .profile-pass-label-wrap {
    flex-basis: auto;
  }
  .profile-field {
    margin-bottom: 16px;
  }
  .password-form {
    margin-top: 29px;
  }
}

/*--------------------------- INNER CHART PAGE  ---------------------------*/
.chart-inner-body .white-black-filter-tabs {
  margin-bottom: 34px;
}
.chart-card {
  background: #fcfcfc;
  border-radius: 8px;
  padding: 47px 53px 35px 53px;
  box-shadow: var(--cardShadow);
  border: 1px solid #dee1e7;
  margin-bottom: 33px;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 35px;
}

.chart-card-title {
  font-size: 18px;
  line-height: 16px;
  font-weight: 700;
  color: #212529;
  margin: 0;
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chart-wrapper {
  width: 100%;
  position: relative;
}

/* ===== APEXCHARTS CUSTOM STYLES ===== */
.chart-tooltip {
  background: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 15px 21px !important;
}
.apexcharts-tooltip {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0px 3.8px 3.8px -1.9px #00000026 !important;
}

/* .apexcharts-tooltip-title {
            background: transparent !important;
            border-bottom: none !important;
            font-family: inherit !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--textPrimary) !important;
            padding: 10px 14px 4px !important;
        }

        .apexcharts-tooltip-text {
            font-family: inherit !important;
            font-size: 12px !important;
            color: var(--textSecondary) !important;
            padding: 0 14px 10px !important;
        } */
.chart-tooltip-date,
.chart-tooltip-value {
  font-size: 11.39px;
  line-height: 16.01px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 6px;
  font-family:
    "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.chart-tooltip-value {
  margin-bottom: 0px;
}

.apexcharts-tooltip-marker {
  display: none !important;
}

/* =========================================================
       RESPONSIVE —  (max-width: 1280px)
       ========================================================= */
@media (max-width: 1280px) {
  .chart-inner-body .white-black-filter-tabs {
    margin-bottom: 18px;
  }
  .chart-card {
    padding: 21px 23px 28px 23px;
  }

  .chart-card-header {
    margin-bottom: 10px;
  }
  .chart-card-title {
    font-size: 12.06px;
    line-height: 10.72px;
  }
}

/* =========================================================
       RESPONSIVE — TABLET (max-width: 991px)
       ========================================================= */
@media (max-width: 991px) {
  .chart-inner-body .white-black-filter-tabs {
    margin-bottom: 18px;
  }
  .chart-card {
    margin-bottom: 28px;
  }
}

/* =========================================================
       RESPONSIVE — MOBILE (max-width: 767px)
       ========================================================= */
@media (max-width: 767px) {
  .chart-inner-body .white-black-filter-tabs {
    margin-bottom: 39px;
  }

  .chart-card-header {
    margin-bottom: 4px;
  }
  .chart-card-title {
    font-size: 14px;
    line-height: 15.06px;
  }
  .chart-card {
    padding: 20px 11px 21px 11px;
    margin-bottom: 20px;
  }
}

/*--------------------------- DASHBOARD PAGE  ---------------------------*/

/* Section spacing */
.dashboard-section {
  margin-bottom: 48px;
}
.activity-quick-row-section{
  margin-bottom: 31px;
}
.dashboard-section:last-child {
  margin-bottom: 0;
}

/* Section titles */
.dashboard-section-title {
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
  margin: 0;
}
.charts-header,
.section-header {
  margin: 0 0 14px 0;
}

/* ── Progress Summary Stats Grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.stat-card {
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow3, 0px 16px 20px -13px #00000026);
  padding: 20px 18px 22px 18px;
}

.stat-header {
  margin-bottom: 2px;
}

.stat-label {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary, #000000);
}

.stat-value {
  font-size: 35px;
  line-height: 45px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
  margin-bottom: 10px;
  /* "175.2" and "Lbs" are one reading unit — never let the narrow mobile card
     drop the unit onto its own line (client spec). */
  white-space: nowrap;
}

/* Same rule for every value+unit pair in the meta rows: Started, Change,
   Last entry and the last-entry delta each wrap their number and unit in
   .stat-num so the two can't be split across lines. The label ("Started:")
   sits outside it and may still wrap away from the value if space demands. */
.stat-num {
  white-space: nowrap;
}

.stat-unit {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--textPrimary, #000000);
}

/* The Started/Change row and the Last-entry row are two columns of the SAME
   grid: "Change" must sit above the last-entry delta, and "Started" above
   "Last entry" (client spec + Figma). .stat-row used to be space-between with
   no fixed columns while .meta-detail-row used flex 1.3/1 with a divider, so
   the two rows only ever lined up by accident at wide widths and drifted
   apart on a narrow card. They now share the same proportions and padding;
   only the divider and top border stay unique to the lower row. */
.stat-row,
.meta-detail-row {
  display: flex;
  align-items: center;
}
.stat-row {
    justify-content: space-between;
    gap: 8px;
}
.meta-detail-row {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--borderLight);
}
/* .stat-row > span, */
.meta-detail-row > span {
  flex: 1;
  min-width: 0;          /* shrink inside the grid cell instead of overflowing it */
}
/* .stat-row > span.stat-muted, */
.meta-detail-row .stat-muted {
  flex: 1.3;
  min-width: 0;     
}
/* .stat-row > span:first-child {
  padding-right: 15px;
  padding-left: 0;
}
.stat-row > span:last-child {
  padding-left: 15px;
} */
.meta-detail-row .stat-muted {
  border-right: 1px solid var(--borderLight);
  padding-right: 15px;
  padding-left:0!important;
}
.meta-detail-row .stat-change {
  padding-left: 15px;
  border-right: none!important;
}

.stat-muted {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textPrimary, #000000);
}
.stat-muted-label {
  color: #64676a;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  /* The whole cell used to be nowrap, which made its min-content the full
     "Change: -6.8 v" string — on a 320px phone that is wider than the column,
     so it spilled out of the card. The NUMBER and its unit are what must stay
     together, and .stat-num handles that; the "Change:" label is free to drop
     to its own line if the card really is that narrow. */
  white-space: normal;
  flex-wrap: wrap;
  justify-content: space-between;
}
.stat-change svg {
  width: 16px;
  height: 16px;
}
.stat-change.stat-change-down svg {
  rotate: 0deg;
}
.stat-change.stat-change-up svg {
  rotate: 180deg;
}

.stat-change-neutral {
  color: var(--textMuted, #6b7280);
  font-size: 12px;
}

/* ── Progress Charts ── */
.dashboard-body .white-black-filter-tabs {
  margin-bottom: 0;
}

.charts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.charts-header,
.section-header {
  margin-bottom: 16px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mini-chart-card {
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow3);
  padding: 20px 14px;
  min-width: 0;
}

.mini-chart-title {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary, #000000);
  margin: 0 0 12px 0;
}

.mini-chart-wrap {
  width: 100%;
  /* height: 140px; */
}
.mini-chart-tooltip-card {
  background: #273550;
  border: none;
  border-radius: 10px;
  padding: 9px 13px;
  min-width: 110px;
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); */
}
.mini-chart-tooltip-date {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 3px;
  font-weight: 500;
}
.mini-chart-tooltip-value {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #ffffff;
}

/* ── Activity & Tracking + Quick Access Row ── */
.activity-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  row-gap:34px;
}

.activity-tracking-col {
  min-width: 0;
}

.activity-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.activity-card {
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow3);
  padding: 20px 22px;
  position: relative;
}

.activity-card-title {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary, #000000);
  margin: 0 0 13px 0;
}

.score-badge {
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textAccent, #4c78ce);
}
/* Grade colours are shared by the Daily Log Score badge and the week's
   cumulative line: blue for every passing grade (B … A+), red for the
   sub-85% "X" (client spec). The weekly line used to inherit
   .score-cumulative-value's black, so the same grade rendered blue on the
   daily line and black on the weekly one. The percentage stays black in
   both places. */
.score-grade {
  color: var(--textAccent, #4c78ce);
}
.score-grade-fail {
  color: #F61B2E;
}
.score-badge-pct,
.score-pct {
  color: var(--textPrimary, #000000);
}

.score-label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
  margin-bottom: 23px;
}

.score-cumulative {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.score-cumulative-label {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--textSecondary, #212529b2);
}

.score-cumulative-value {
  font-size: 22px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
}

/* Latest Progress Entry card */
.activity-card-entry {
  position: relative;
  padding: 20px 18px;
}
.activity-card-entry .activity-card-title {
  margin-bottom: 7px;
}

.entry-date {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary, #000000);
  margin-bottom: 20px;
}

.entry-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entry-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textMuted);
}

.entry-item strong {
  color: var(--textPrimary, #000000);
  font-weight: 500;
}

.entry-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--textPrimary, #000000);
}
.entry-details-arrow {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8;
}

.entry-arrow {
  width: 24px;
  height: 24px;
  color: #00000080;
  text-decoration: none;
  transition: color 0.15s ease;
}

.entry-arrow:hover {
  color: var(--textAccent, #4c78ce);
}

/* Quick Access */
.quick-access-col {
  min-width: 0;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-access-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 12px;
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow3);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.quick-access-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 20px 24px -10px #00000030;
}

.quick-access-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #dde2ee80;
  border-radius: 9px;
  color: var(--textAccent, #4c78ce);
}

.quick-access-icon svg {
  width: 24px;
  height: 24px;
}

.quick-access-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  text-align: center;
}

/* ── Recent Activity ── */
.recent-activity-card {
  background-color: #fcfcfc;
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow3);
  padding-bottom: 10px;
}
.recent-activity-header {
  padding: 20px 29px;
  padding-bottom: 0;
  margin-bottom: 3px;
}
.recent-activity-title {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary, #000000);
  margin-bottom: 0;
}
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px 29px;
  border-bottom: 1px solid var(--borderLight, #ebe7e7);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-date {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  flex-basis: 60px;
  flex-shrink: 0;
}
.activity-item-details {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 1 0%;
  min-width: 0;
}
.activity-icon-desc {
  display: flex;
  align-items: center;
  gap: 8px;
  /* flex: 1 1 35%; */
  flex: 1 1 331px;
  min-width: 0;
}

.activity-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--textAccent, #4c78ce);
}

.activity-desc {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
}

.activity-value {
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary, #212529b2);
  flex: 1 1 65%;
  min-width: 0;
}
.activity-value strong {
  font-weight: 400;
  color: var(--textPrimary, #000000);
}

/* =========================================================
   RESPONSIVE — DESKTOP (max-width: 1280px)
   ========================================================= */
@media (max-width: 1280px) {
  .dashboard-section {
    margin-bottom: 36px;
  }
  .activity-quick-row-section{
    margin-bottom: 36px;
  }
  .charts-header,
  .section-header {
    margin-bottom: 21px;
  }
  /* .stats-grid {
    grid-template-columns: repeat(2, 1fr);    
  } */
  .stat-card {
    border-radius: 7.82px;
  }
  .stat-header {
    margin-bottom: 1.4px;
  }
  .stat-label {
    font-size: 17.6px;
    line-height: 24.44px;
  }
  .stat-value {
    font-size: 34.22px;
    line-height: 43.99px;
    letter-spacing: -0.29px;
    margin-bottom: 9px;
  }

  .stat-unit {
    font-size: 17.6px;
    line-height: 23.46px;
  }
  .stat-change svg {
    width: 15.64px;
    height: 15.64px;
  }
  .stat-muted,
  .stat-change {
    font-size: 15.64px;
    line-height: 19.55px;
  }

  .charts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
  }

  .mini-chart-card {
    padding: 26px 18px;
    border-radius: 10.47px;
  }

  .mini-chart-title {
    font-size: 23.56px;
    line-height: 32.73px;
  }

  .mini-chart-tooltip-value {
    font-size: 18.33px;
    line-height: 23.56px;
  }

  .activity-quick-row {
    grid-template-columns: 1fr;
  }

  .quick-access-grid {
    gap: 16px;
  }

  .quick-access-icon {
    width: 41px;
    height: 41px;
    border-radius: 9.67px;
  }

  .quick-access-icon svg {
    width: 26px;
    height: 26px;
  }

  .quick-access-label {
    font-size: 17.18px;
    line-height: 21.48px;
  }

  .activity-card {
    padding: 22px 23px;
  }

  .activity-card-title {
    font-size: 19.33px;
    line-height: 26.85px;
    margin: 0 0 14px 0;
  }

  .score-badge {
    font-size: 26.85px;
    line-height: 26.85px;
  }

  .score-label {
    font-size: 19.33px;
    line-height: 25.77px;
    margin-bottom: 24px;
  }

  .score-cumulative-label {
    font-size: 15.04px;
    line-height: 19.33px;
  }

  .score-cumulative-value {
    font-size: 23.63px;
    line-height: 26.85px;
    letter-spacing: -0.32px;
  }

  /* Latest Progress Entry card */
  .activity-card-entry {
    padding: 22px 30px;
  }
  .activity-card-entry .activity-card-title {
    margin-bottom: 8px;
  }

  .entry-date {
    font-size: 19.33px;
    line-height: 26.85px;
  }

  .entry-item {
    font-size: 17.18px;
    line-height: 21.48px;
  }

  .entry-item svg {
    width: 21px;
    height: 21px;
  }

  .entry-arrow {
    width: 25px;
    height: 25px;
  }

  .recent-activity-card {
    padding-bottom: 6px;
  }
  .recent-activity-header {
    padding: 20px 31px;
    padding-bottom: 0;
    margin-bottom: 5px;
  }
  .recent-activity-title {
    font-size: 19.33px;
    line-height: 26.85px;
  }

  .activity-item {
    padding: 16px 31px;
  }

  .activity-date {
    font-size: 15.04px;
    line-height: 19.33px;
  }

  .activity-icon svg {
    width: 17px;
    height: 17px;
  }

  .activity-desc {
    font-size: 15.04px;
    line-height: 19.33px;
  }

  .activity-value {
    font-size: 15.04px;
    line-height: 19.33px;
  }
}
/* =========================================================
   RESPONSIVE — TABLET (max-width: 991px)
   ========================================================= */
@media (max-width: 991px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .activity-quick-row {
    grid-template-columns: 1fr;
  }
  .activity-cards-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ========================================================= */
@media (max-width: 767px) {
  .dashboard-section {
    margin-bottom: 38px;
  }
  .activity-quick-row {
    row-gap:25px;
  }
  .activity-quick-row-section{
    margin-bottom: 20px;
  }
  .dashboard-section-title {
    font-size: 22px;
    line-height: 25px;
  }
  .charts-header,
  .section-header {
    margin-bottom: 14px;
  }
  .charts-header {
    gap:14px;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .stat-card {
    border-radius: 3.99px;
    padding: 11px 10px;
    box-shadow: 0px 0px 1.99px 0px #B5B5B51A,0px 1px 1.99px 0px #B5B5B517,0px 3.99px 1.99px 0px #B5B5B50D,0px 5.98px 1.99px 0px #B5B5B503,0px 22.44px 6.98px 0px #B5B5B500;

  }
  .stat-header {
    margin-bottom: 3.5px;
  }
  .stat-label {
    font-size: 13px;
    line-height: 18px;
  }
  .stat-value {
    font-size: 22px;
    line-height: 25px;
    letter-spacing: -0.25px;
    margin-bottom: 8px;
  }

  .stat-unit {
    font-size: 12px;
    line-height: 15px;
  }
  .stat-change svg {
    width: 12px;
    height: 12px;
  }

  .stat-muted,
  .stat-change {
    font-size: 13px;
    line-height: 15px;
  }
  .meta-detail-row {
    margin-top: 10px;
    padding-top: 10px;
  }

  .mini-chart-card {
    padding: 13.65px 9.5px 3px;
    border-radius: 5.31px;
    box-shadow: 0px 0px 2.65px 0px #B5B5B51A,0px 1.33px 2.65px 0px #B5B5B517,0px 5.31px 2.65px 0px #B5B5B50D,0px 7.96px 2.65px 0px #B5B5B503,0px 29.86px 9.29px 0px #B5B5B500;

  }

  .mini-chart-title {
    font-size: 14px;
    line-height: 18px;
  }

  .mini-chart-tooltip-value {
    font-size: 9.29px;
    line-height: 11.95px;
  }

  .charts-grid {
    /* grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
  }
  .activity-cards-row {
    /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
    gap: 10.13px;
  }

  .activity-card {
    padding: 14px;
  
    border-radius:5.06px;
    box-shadow: 0px 0px 2.53px 0px #B5B5B51A,0px 1.27px 2.53px 0px #B5B5B517,0px 5.06px 2.53px 0px #B5B5B50D,0px 7.6px 2.53px 0px #B5B5B503,0px 28.48px 8.86px 0px #B5B5B500;
  }

  .activity-card-title {
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 10px 0;
  }

  .score-badge {
    font-size: 18px;
    line-height: 18px;
  }

  .score-label {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 18px;
  }

  .score-cumulative-label {
    font-size: 12px;
    line-height: 14px;
  }

  .score-cumulative-value {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.19px;
  }

  /* Latest Progress Entry card */
  .activity-card-entry {
    padding: 14px 12px;
  }
  .activity-card-entry .activity-card-title {
    margin-bottom: 6px;
  }

  .entry-date {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 14px;
  }

  .entry-item {
    font-size: 12px;
    line-height: 15px;
  }

  .entry-item svg {
    width: 16px;
    height: 16px;
  }

  .entry-arrow {
    width: 18px;
    height: 18px;
  }

  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-access-card {
    gap: 12px;
    /* padding: 14px 6px 20px; */
    padding: 14px 6px 14px;
    min-height: 111px;
  }
  .quick-access-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .quick-access-icon svg {
    width: 24px;
    height: 24px;
  }

  .quick-access-label {
    font-size: 16px;
    line-height: 20px;
  }

  .recent-activity-card {
    /* padding-bottom: 22px; */
    padding-bottom: 21.52px;
  }
  .recent-activity-header {
    padding: 19px 14px;
    padding-bottom: 0;
  }
  .recent-activity-title {
    font-size: 18px;
    line-height: 25px;
  }

  .activity-item {
    padding: 11px 14px;
  }
  .activity-item {
    align-items: flex-start;
  }
  .activity-item-details {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .activity-icon-desc,
  .activity-value {
    flex: auto;
  }

  .activity-date {
    font-size: 14px;
    line-height: 18px;
  }

  .activity-icon svg {
    width: 16px;
    height: 16px;
  }

  .activity-desc {
    font-size: 14px;
    line-height: 18px;
    
  }

  .activity-value {
    font-size: 14px;
    line-height: 18px;
    margin-left: 24px;
  }
}

/* =========================================================
   RESPONSIVE — EXTRA SMALL MOBILE (max-width: 600px)
   ========================================================= */
@media (max-width: 600px) {
  .progress-chart-row-section{
    margin-bottom: 32px;
  }
  .stats-grid {
    /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
    gap: 8.98px;
  }
  .stat-card {
    border-radius: 3.99px;
    padding: 10.26px 9.35px;
  }
  .stat-header {
    line-height: 0;
    margin-bottom: 1px;
  }
  .stat-label {
    font-size: 8.98px;
    line-height: 12.47px;
  }
  .stat-value {
    font-size: 17.45px;
    line-height: 22.44px;
    letter-spacing: -0.15px;
    margin-bottom: 4px;
  }
  .dashboard-body .white-black-filter-btn{
    padding: 11px 10px;
  }

  .stat-unit {
    font-size: 8.98px;
    line-height: 11.97px;
  }
  /* Progress Summary meta rows. 7.98px was near-illegible on a phone; 11.25px
     is the largest size that still fits at EVERY phone width, measured in
     Chrome against the real card markup at 320/360/390/414/430px. 320px is the
     binding case — it starts overflowing at 11.5px, while 360px and wider would
     take 13.5px. The arrows are scaled to match the text. */
  .stat-change svg {
    /* Arrows track the text, but 11px was one pixel too greedy: it pushed the
       Change cell onto a second line at 390px. 10px is the measured fit and is
       still a 25% larger arrow than the 8px this block used to carry. */
    width: 10px;
    height: 10px;
  }

  /* Progress Summary meta rows — legibility on a phone.
     7.98px was the ceiling only because each cell had to fit
     "Started: 195.0 Lbs" on one line. The unit is already stated in the
     headline value right above ("190.0 Lbs"), so repeating it four more times
     per card bought nothing and cost all the width. Hiding it here (the markup
     keeps it, so desktop and tablet are unchanged) frees enough room for a 25%
     larger number.

     The size tracks the viewport because the ceiling does: measured in Chrome
     against the real cards, the largest size that keeps every cell on ONE line
     is 7.5px at 320px, 9px at 360px, 10px at 390px and 11.5px at 430px, so the
     size steps with the breakpoint below rather than being one value that the
     smallest phone has to survive. */
  /* .stat-num-unit {
    display: none;
  } */

  .stat-muted,
  .stat-change {
    font-size: 10px;
    line-height: 13px;
  }
  .stat-row {  
    /* gap: 6px; */
    gap:0;
  }
  .meta-detail-row {
    margin-top: 11px;
    padding-top: 5px;
  }

  .mini-chart-title {
    font-size: 11.95px;
    line-height: 16.59px;
    margin-bottom: 7px;
  }
  .charts-grid {
    /* grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
    gap:7.96px;
  }
  .activity-card {
    padding: 13.02px 13.93px 10.74px;
  }
  .score-cumulative {
      gap: 2px;
  }
  .activity-card-title {
    font-size: 11.39px;
    line-height: 15.82px;
    margin: 0 0 8px 0;
  }

  .score-badge {
    font-size: 15.82px;
    line-height: 15.82px;
  }

  .score-label {
    font-size: 11.39px;
    line-height: 15.19px;
    margin-bottom: 13px;
  }

  .score-cumulative-label {
    font-size: 8.86px;
    line-height: 11.39px;
  }

  .score-cumulative-value {
    font-size: 13.92px;
    line-height: 15.82px;
    letter-spacing: -0.19px;
  }

  /* Latest Progress Entry card */
  .activity-card-entry {
    padding: 13.02px 11.71px 10.74px;
  }
  .activity-card-entry .activity-card-title {
    margin-bottom: 4.52px;
  }

  .entry-date {
    font-size: 11.39px;
    line-height: 15.82px;
    margin-bottom: 12.17px;
  }
  .entry-details {
    gap: 6.3px;
  }
  .entry-item {
    font-size: 10.13px;
    line-height: 12.66px;
  }

  .entry-item svg {
    width: 13px;
    height: 13px;
  }

  .entry-arrow {
    width: 16px;
    height: 16px;
  }

  .activity-item {
    /* padding: 11px 9px; */
    padding: 11px 7.86px;
    gap:24px;
  }
  .recent-activity-header {
    /* padding: 22px 9px; */
    padding: 22.48px 7.86px;
    padding-bottom: 0;
    margin-bottom: 0;
}
  /* .stat-row > span:first-child, */
  .meta-detail-row .stat-muted {
    padding-right: 9px;
  }
  /* .stat-row > span:last-child, */
  .meta-detail-row .stat-change {
    padding-left: 9px;
  }
  .entry-item {
    gap: 6px;
}
}
/* --- Mobile dashboard scale fix (append at end of file) --- */
@media (max-width: 600px) {
    /* .stat-card {
        padding: 14px 12px;
        border-radius: 8px;
    } */

    /* .stat-header {
        line-height: normal;   
        margin-bottom: 4px;
    } */

    /* .stat-label {
        font-size: 12px;
        line-height: 16px;
    } */

    /* .stat-value {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.2px;
        margin-bottom: 6px;
    } */

    /* .stat-unit {
        font-size: 12px;
        line-height: 16px;
    } */

    /* .stat-muted,
    .stat-change {
        font-size: 11px;
        line-height: 14px;
    } */

    /* .stat-change svg {
        width: 10px;
        height: 10px;
    } */

    /* .meta-detail-row {
        margin-top: 12px;
        padding-top: 8px;
    } */
}
/* --- Mobile chart & activity card scale fix (append at end of file) --- */
@media (max-width: 767px) {
    /* .mini-chart-card {
        padding: 14px 10px;
        border-radius: 8px;
    } */
}

@media (max-width: 600px) {
    /* .mini-chart-title {
        font-size: 13px;
        line-height: 18px;
        margin: 0 0 8px 0;
    } */

    /* .activity-card,
    .activity-card-entry {
        padding: 14px 12px;
    } */

    /* .activity-card-title,
    .activity-card-entry .activity-card-title {
        font-size: 13px;
        line-height: 18px;
        margin: 0 0 8px 0;
    } */

    /* .score-badge {
        font-size: 20px;
        line-height: 22px;
    } */

    /* .score-label {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 10px;
    } */

    /* .score-label a {
        font-size: 12px;
        line-height: 1.3;
    } */

    /* .score-cumulative-label {
        font-size: 11px;
        line-height: 14px;
    } */

    /* .score-cumulative-value {
        font-size: 16px;
        line-height: 18px;
        letter-spacing: -0.2px;
    } */

    /* .entry-date {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 10px;
    } */

    /* .entry-item {
        font-size: 12px;
        line-height: 16px;
    } */

    /* .entry-item svg {
        width: 16px;
        height: 16px;
    } */
}

@media (max-width: 490px) {
    .stats-grid , .activity-cards-row{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 350px) {
   .quick-access-grid {
    gap: 10px;
}
}

@media (max-width: 358px) {
   
.stat-row{
  /* NOT flex-wrap: wrap. Wrapping pushed "Change" onto a line of its own
     under "Started" — the defect in the staging screenshot. The two columns
     stay side by side; a label may wrap above its own value inside its column,
     which is fine, but the columns themselves never stack. */
  flex-wrap: nowrap;
}
}

/* Narrow phones (<=375px) cannot carry the 10px above on a single line: the
   measured ceiling is 9px at 360px and 7.5px at 320px. Step down rather than
   let the cells wrap. Both are still far larger than the 6.40px this range
   used to get, which is where the "too small to read" complaint was worst. */
@media (max-width: 375px) {
  .stat-muted,
  .stat-change {
    font-size: 9px;
    line-height: 12px;
  }
  .stat-change svg {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 355px) {
  .stat-muted,
  .stat-change {
    /* font-size: 7.5px; */
    font-size: 8px;
    line-height: 10px;
  }
  .stat-change svg {
    width: 9px;
    height: 9px;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE (max-width: 359px)
   ========================================================= */
@media (max-width: 359px) {
  /* .quick-access-grid {
    grid-template-columns: 1fr;
  } */
  /* .stat-card {
    padding: 16px;
  } */
}

.stat-muted, .stat-change{
    font-weight:500;
}
.stat-muted .stat-muted-label, .stat-change .stat-muted-label{
    font-weight:400;
}
@media (max-width: 385px) {
  
  .meta-detail-row .stat-muted {
      flex: 1.7;
  }
  .charts-header {
      gap: 5px;
  }
  .dashboard-body .white-black-filter-btn {
      padding-inline: 9px;
  }
}


/* These trailing rules used to force the meta rows back down to 8px arrows and
   6.80px text, overriding the sizes set in the <=600px block far above. They
   pre-date the decision to hide the repeated unit on mobile: once
   "Started: 195.0 Lbs" becomes "Started: 195.0", the width that unit was eating
   pays for a 25% larger number on the same single line. The size now lives in
   one place (the <=600px block, with its <=375px and <=340px steps); only the
   spacing tweaks that are still useful are kept here. */
@media (max-width: 358px) {
    .stat-muted, .stat-change {
        gap: 3px;
    }
    .stat-row {
        gap: 2px;
    }
    .meta-detail-row .stat-change {
        padding-left: 6px;
    }
}




@media (max-width:600px){
.stat-muted, .stat-change-data-wrapper {
    display:flex;
    flex-direction:column;
}
.stat-label {
    font-size: 9px;
    line-height: 12.47px;
}
.stat-value {
    /* font-size: 18px; */
    font-size: 19px;
    line-height: 22.99px;
}
.stat-muted, .stat-change {
    font-size: 10px;
    line-height: 14px;
}
.stat-num {
        /* font-size: 13px;
        line-height: 15px; */
        font-size: 14px;
        line-height: 16px;
}

.stat-row .stat-change {
    flex: 1;
    min-width: 0;
    justify-content: space-between;
}
.stat-row .stat-muted {
    flex: 0.85;
    min-width: 0;
}
.stat-row .stat-muted {
    padding-right: 9px;
}
.stat-row .stat-change {
    padding-left: 9px;
}
.meta-detail-row .stat-muted {
    flex: 0.85;
}
.stat-change{
    gap:2px;
}
.stat-change svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
    .meta-detail-row .stat-change{
        align-self:flex-end;
        justify-content: space-between;
    }
    .meta-detail-row {
    margin-top: 7px;
}
}


@media (max-width: 410px){
    .stat-muted, .stat-change {
    font-size: 9.40px;
    line-height: 13px;
}
    .stat-num {
        /* font-size: 11px; */
        font-size: 12.75px;
    line-height: 15px;
}
    .stat-change {
    gap: 0px;
}
    .stat-row .stat-muted {
    flex: 0.85;
}
    .meta-detail-row .stat-muted {
    flex: 0.85;
}
    .stat-row .stat-muted {
    padding-right: 4px;
}
    .stat-row .stat-change {
    padding-left: 4px;
}
    .meta-detail-row .stat-muted {
    padding-right: 4px;
}
        .meta-detail-row .stat-change {
    padding-left: 4px;
}
}

@media (max-width: 358px){
    .stat-muted{
    gap: 0px;
}
    .stat-change {
        flex-wrap:nowrap;
    gap: 0px;
}
    .stat-muted, .stat-change {
    font-size: 8.50px;
    line-height: 12px;
}
    .stat-num {
        /* font-size: 10.35px; */
        /* line-height: 13px; */
        font-size: 11.95px;
    line-height: 14px;
}

    .stat-change svg {
    width: 15px;
    height: 15px;
}
 .stat-row .stat-muted {
    padding-right: 2.5px;
}
    .stat-row .stat-change {
    padding-left: 2.5px;
}
  .meta-detail-row .stat-muted {
    padding-right: 2.5px;
}
        .meta-detail-row .stat-change {
    padding-left: 2.5px;
}
}

@media (max-width: 600px) {
.stat-row .stat-muted, .meta-detail-row .stat-muted {
    flex: 0.80;
    min-width: 0;
}
.stat-row .stat-change, .meta-detail-row .stat-change {
    padding-left: 11px;
}
}
@media (max-width: 410px){
  .stat-row .stat-muted, .meta-detail-row .stat-muted  {
    flex: 0.78;
}
.stat-row .stat-change, .meta-detail-row .stat-change {
    padding-left: 6px;
}
}
@media (max-width: 358px) {
    .stat-row .stat-change, .meta-detail-row .stat-change {
        padding-left: 5px;
    }
}
/*--------------------------- CARDIO RESERVATIONS ---------------------------*/

/* Page body */
.cr-body {
  padding: 43px 48px 41px;
  background-color: var(--card, #fcfcfc);
  border: 1px solid var(--cardBorder, #dee1e7);
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
}

/* Section header */
.cr-section-head {
  margin-bottom: 20px;
}

.cr-section-title {
  font-size: 25px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
  margin: 0 0 4px 0;
}

.cr-section-subtitle {
  font-size: 18px;
  line-height: 24px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}

/* Equipment row card */
.cr-equip-card {
  display: flex;
  align-items: stretch;
  gap: 0px;
  background-color: var(--card, #fcfcfc);
  border-radius: 12px;
  box-shadow: var(--shadow3);
  margin-bottom: 24px;
}

.cr-equip-card:last-child {
  margin-bottom: 0;
}

/* Equipment info (left side) */
.cr-equip-info-wrap {
  padding: 47px 24px 47px 29px;
  flex-basis: 270px;
  flex-shrink: 0;
  background-color: #fefefe;
  border: 1px solid #b8b8b833;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.cr-equip-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.cr-equip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  flex-shrink: 0;
  background-color: var(--iconBackground, #f0f0f6);
  border-radius: 60px;
}

.cr-equip-icon svg {
  width: 58px;
  height: 58px;
  color: #374151;
}

.cr-equip-name {
  font-size: 22px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  margin-bottom: 9px;
}

.cr-equip-tag {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: #2d5ebb;
  background-color: #4c78ce1a;
  padding: 8px 19px;
  border-radius: 20px;
}

/* Equipment controls (right side) */
.cr-equip-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 25px 21px 25px 50px;
  gap: 37px;
}

/* Horizontal scroll container wrapper */
.cr-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Scrollable container */
.cr-scroll-container {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* Vertical gestures scroll the page; horizontal gestures are handled by JS
     (which calls preventDefault), so sideways swipes never scroll the page. */
  touch-action: pan-y;
}

.cr-scroll-track {
  display: flex;
  gap: 8px;
  transition: transform 0.3s ease;
  will-change: transform;
}
.cr-scroll-track {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Scroll arrow buttons */
.cr-scroll-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border: 1px solid var(--borderLight, #e3e6ef);
  border-radius: var(--radius-xs, 4px);
  color: var(--textSecondary, #212529b2);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.cr-scroll-arrow:hover {
  background-color: var(--sidebarActive, #dde2ee);
  border-color: var(--accent, #5a83d3);
  color: var(--textAccent, #4c78ce);
}

.cr-scroll-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cr-scroll-arrow svg {
  width: 16px;
  height: 16px;
  color: #00000080;
}

/* Show arrows when needed (JS toggles this) */
.cr-scroll-wrap.has-overflow .cr-scroll-arrow {
  display: flex;
}

/* Buttons common */
.cr-time-btn,
.cr-unit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border: 1px solid var(--borderLight, #e3e6ef);
  border-radius: var(--radius-xs, 4px);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium, 500);
  color: var(--textSecondary, #212529b2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0px 1px 2px 0px #2d588614;
}

/* Equipment unit buttons */
.cr-unit-btn {
  padding: 9px 19px;
}

.cr-unit-btn:hover,
.cr-time-btn:hover {
  background-color: var(--sidebarActive, #dde2ee);
  border-color: var(--accent, #5a83d3);
  color: var(--textAccent, #4c78ce);
}

.cr-unit-btn.active,
.cr-time-btn.active {
  background-color: var(--textAccent, #4c78ce);
  border-color: var(--textAccent, #4c78ce);
  color: #ffffff;
}

/* Time slot buttons */
.cr-time-btn {
  padding: 9px 25px;
}

/* Unavailable slots/units (past, reserved by others, or a fully-booked unit):
   keep the exact same button style, just fade it and make it non-interactive
   (client spec: ~40-50% opacity, not clickable). .reserved-mine is excluded —
   that is the member's own booking and stays highlighted. */
.cr-time-btn.past,
.cr-time-btn.reserved,
.cr-time-btn:disabled,
.cr-time-btn[disabled],
.cr-unit-btn.reserved-other,
.cr-unit-btn:disabled,
.cr-unit-btn[disabled] {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textSecondary, #212529b2);
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
/* Never apply hover styling to an unavailable button */
.cr-time-btn.past:hover,
.cr-time-btn.reserved:hover,
.cr-time-btn:disabled:hover,
.cr-unit-btn.reserved-other:hover,
.cr-unit-btn:disabled:hover {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textSecondary, #212529b2);
}

/* Action row */
.cr-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.cr-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border: 1px solid #dee1e7;
  border-radius: var(--radius-xs, 4px);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium, 500);
  color: var(--textSecondary, #212529b2);
  cursor: pointer;
  transition: color 0.15s ease;
  text-decoration: none;
  box-shadow: var(--shadow3);
}

.cr-clear-btn:hover {
  color: #d54248;
}

.cr-clear-btn svg {
  width: 16px;
  height: 16px;
}

.cr-reserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 21px;
  background-color: var(--textAccent, #4c78ce);
  border: 1px solid var(--textAccent, #4c78ce);
  border-radius: var(--radius-xs, 4px);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium, 500);
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cr-reserve-btn:hover {
  opacity: 0.92;
}

.cr-reserve-btn svg {
  width: 20px;
  height: 20px;
}

/* Footer note */
.cr-footer {
  margin-top: 24px;
  padding: 21px 0 0;
  position: relative;
}
.cr-footer-divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2000px;
  height: 1px;
  background-color: #b8b8b84d;
}
.cr-footer-note {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary, #212529b2);
}

/* =========================================================
           RESPONSIVE — TABLET (max-width: 1280px)
           ========================================================= */
@media (max-width: 1280px) {
  .cr-body {
    padding: 42px 34px 23px;
  }

  .cr-section-head {
    margin-bottom: 32px;
  }
  .cr-equip-info-wrap {
    padding: 40px 38px;
    flex-basis: 180px;
  }
  .cr-equip-info {
    flex-direction: column;
    gap: 8px;
  }

  .cr-equip-icon {
    width: 100px;
    height: 100px;
  }

  .cr-equip-icon svg {
    width: 62px;
    height: 62px;
    color: #374151;
  }
  .cr-equip-controls {
    gap: 24px;
    padding: 20px 20px 16px 38px;
  }
  .cr-equip-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
  .cr-equip-name {
    text-align: center;
    margin-bottom: 0;
  }
  .cr-unit-btn {
    padding: 9px 13px;
  }
  .cr-time-btn {
    padding: 9px 22px;
  }
  .cr-footer {
    margin-top: 28px;
  }
}
/* =========================================================
           RESPONSIVE — TABLET (max-width: 991px)
           ========================================================= */
@media (max-width: 991px) {
}

/* =========================================================
           RESPONSIVE — MOBILE (max-width: 767px)
           ========================================================= */
@media (max-width: 767px) {
  .cr-body {
    padding: 30px 12px;
  }
  .cr-section-head {
    margin-bottom: 31px;
    padding-inline: 10px;
  }

  .cr-section-title {
    font-size: 25px;
    line-height: 25px;
  }

  .cr-section-subtitle {
    font-size: 16px;
    line-height: 20px;
  }

  .cr-equip-card {
    flex-direction: column;
    margin-bottom: 20px;
  }
  .cr-equip-info-wrap {
    padding: 21px 14px;
    flex-basis: auto;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 8px;
  }

  .cr-equip-info {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: auto;
    gap: 12px;
  }

  .cr-equip-icon {
    width: 94px;
    height: 94px;
  }

  .cr-equip-icon svg {
    width: 58px;
    height: 58px;
  }

  .cr-equip-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .cr-equip-name {
    text-align: left;
  }
  .cr-equip-controls {
    padding: 17px 8px 27px;
    gap: 18px;
  }
  .cr-unit-btn {
    padding: 9px 15px;
  }

  .cr-time-btn {
    padding: 9px 19px;
  }
  .cr-action-row {
    margin-top: 10px;
  }
}

/*--------------------------- CONDITION PAGE ---------------------------*/
/* ── Outer card ── */

/* ── Accordion section ── */
.wpd-section {
  border-bottom: 1px solid var(--borderLight);
}
.wpd-section:last-child {
  border-bottom: none;
}
.wpd-section {
  box-shadow: var(--shadow3);
  border: 1px solid var(--cardBorder);
  background-color: var(--card);
  border-radius: 8px;
}
.wpd-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 16px 25px 23px;
  cursor: pointer;
  user-select: none;
  background-color: var(--card);
  border-radius: 8px;
  transition:
    background-color 0.15s ease,
    border-radius 0.15s ease;
}
.wpd-section-hdr:hover {
  background-color: #f7f8fa;
}
.wpd-section.is-open .wpd-section-hdr {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.wpd-section-name {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textSecondary);
}

.wpd-chevron {
  width: 24px;
  height: 24px;
  color: var(--textSecondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.wpd-section.is-open .wpd-chevron {
  transform: rotate(180deg);
}

.wpd-section-body {
  /* display: none; */
  border-top: 1px solid var(--borderLight);
}
/* .wpd-section.is-open .wpd-section-body {
  display: block;
} */
.wpd-section-body.inner-accordion {
  padding: 25px 30px;
}

/* ── Column header row ── */
.wpd-thead {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px;
  padding: 14px 100px 14px 60px;
  border-bottom: 1px solid var(--borderLight);
  gap: 36px;
}
.wpd-thead-5col {
  grid-template-columns: 1fr 85px 85px 85px 10px;
  gap: 4% !important;
}
.wpd-thead-cell {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textMuted);
  text-transform: uppercase;
}
.wpd-thead-cell + .wpd-thead-cell {
  text-align: center;
}

/* ── Flat exercise row (SMR / MetCon) ── */
.wpd-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px;
  align-items: center;
  padding: 14px 100px 14px 60px;
  border-bottom: 1px solid var(--borderLight);
  gap: 36px;
}
.wpd-row:last-child {
  border-bottom: none;
}

.wpd-ex-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wpd-ex-link {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textAccent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.wpd-ex-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.wpd-clip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--textPrimary);
  flex-shrink: 0;
  transition: color 0.15s ease;
  padding: 0;
}
.wpd-clip-btn:hover {
  color: var(--textAccent);
}
.wpd-clip-btn svg {
  width: 32px;
  height: 32px;
}

.wpd-val-cell {
  font-size: 18px;
  line-height: 25px;
  color: var(--textPrimary);
  padding: 5px 12px;
  display: inline-block;
  font-weight: 500;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  text-align: center;
}
.wpd-val-cell.is-empty {
  color: var(--textSecondary);
}

/* Mobile grouped values (hidden on desktop) */
.wpd-mob-vals {
  display: none;
  gap: 31px;
}
.wpd-mv-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wpd-mv-lbl {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textMuted);
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}
.wpd-mv-val {
  font-size: 18px;
  line-height: 25px;
  padding: 5px 10px;
  min-width: 85px;
  display: inline-block;
  text-align: center;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  color: var(--textPrimary);
}

.wpd-mv-val.is-empty {
  color: var(--textSecondary);
}

/* ── Block item (Exercise section) ── */
.wpd-block-item {
  border: 1px solid var(--borderLight);
  background-color: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow3);
  margin-bottom: 32px;
}
.wpd-block-item:last-child {
  margin-bottom: 0;
}

.wpd-block-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 46px 16px 39px;
  cursor: pointer;
  user-select: none;
  background-color: #fafafa;
  border-bottom: 1px solid transparent;
  transition: background-color 0.15s ease;
}
@media (pointer:fine) and (hover:hover){
.wpd-block-hdr:hover {
  background-color: var(--sidebarActive);
}
}
.wpd-block-hdr:active {
  background-color: var(--sidebarActive);
}
.wpd-block-item.is-open .wpd-block-hdr {
  border-bottom-color: var(--borderLight);
}

.wpd-block-hdr-l {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wpd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 100%;
  font-weight: var(--fw-bold);
  color: #fff;
  flex-shrink: 0;
}
.wpd-badge-a {
  background-color: var(--accent);
}
.wpd-badge-b {
  background-color: #6b7280;
}
.wpd-badge-c {
  background-color: #9ca3af;
}

.wpd-block-label {
  font-size: 22px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textPrimary);
}

.wpd-block-chev {
  width: 24px;
  height: 24px;
  color: var(--textSecondary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.wpd-block-item.is-open .wpd-block-chev {
  transform: rotate(180deg);
}

.wpd-block-body {
  /* display: none; */
}
.wpd-block-item.is-open .wpd-block-body {
  /* display: block; */
}

/* ── Block exercise row ── */
.wpd-brow-wrap,
.wpd-metcon-log-wrap {
  margin: 0 37px 30px;
  border-radius: 12px;
  background-color: var(--card);
  border: 1px solid var(--borderLight);
  box-shadow: var(--shadow3);
}

.wpd-block-body .wpd-thead {
  border-bottom: none;
}
.wpd-brow {
  border-bottom: 0.5px solid var(--borderLight);
}
.wpd-brow:last-child {
  border-bottom: none;
}

.wpd-brow-main,
.wpd-metcon-main {
  display: grid;
  grid-template-columns: 1fr 85px 85px 85px 27px;
  align-items: center;
  padding: 12px 24px;
  padding-right: 42px;
  gap: 4%;
}
.wpd-metcon-main {
padding-left: 60px;
}
.wpd-brow-ex {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wpd-brow-lbl {
  font-size: 18px;
  line-height: 25px;
  font-weight: var(--fw-bold);
  color: var(--textPrimary);
  flex-shrink: 0;
  min-width: 25px;
}

.wpd-brow-mob-vals {
  display: none;
  gap: 20px;
  padding: 0 24px 10px;
}

/* ── Expand / collapse (+/−) button ── */
.wpd-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #212529b2;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
}
.wpd-plus-btn:hover {
  color: var(--textPrimary);
}
.wpd-plus-btn svg {
  width: 100%;
  height: 100%;
}

/* ── Log panel ── */
.wpd-log-panel {
  /* display: none; */
}
.wpd-brow.log-open .wpd-log-panel,
.wpd-metcon-row.log-open .wpd-log-panel {
  /* display: block; */
}

.wpd-log-inner {
  padding: 0px 0px 34px;
  overflow-x: auto;
}

.wpd-log-head {
  font-size: 18px;
  line-height: 25px;
  font-weight: var(--fw-bold);
  color: var(--textSecondary);
  margin: 11px 15px 8px;
}

.wpd-log-hint {
  font-size: 14px;
  line-height: 18px;
  font-weight: 300;
  color: var(--textSecondary);
  margin: 26.7px 0 0px 0;
  text-align: center;
}

.wpd-log-tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}
.wpd-log-tbl th {
  padding: 16px 26px;
  text-align: center;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textSecondary);
  border-bottom: 1px solid var(--borderLight);
  border-top: 1px solid var(--borderLight);
  border-right: 1px solid var(--borderLight);
  white-space: nowrap;
}
.wpd-log-tbl th:first-child {
  text-align: left;
  width: 200px;
}
.wpd-log-tbl th:first-child,
.wpd-log-tbl th:last-child {
  border-right: none;
}
.wpd-log-tbl td {
  padding: 8px 15px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--borderLight);
  border-right: 1px solid var(--borderLight);
}
/* .wpd-log-tbl tbody tr:last-child td {
  border-bottom: none;
} */
.wpd-log-tbl td:first-child {
  text-align: left;
  font-size: 18px;
  line-height: 25px;
  padding-left: 26px;
}
.wpd-log-tbl td:first-child,
.wpd-log-tbl td:last-child {
  border-right: none;
}
.wpd-log-tbl td span {
  display: inline-block;
  padding: 7px 8px;
  min-width: 70px;
  background-color: #f4f7fa;
  border-radius: 4px;
  border: 1px solid var(--borderLight);
}
/* Editable weight cell — visually identical to the read-only pill above so the
   Log-Weight design is unchanged; it just accepts typing and autosaves. */
.wpd-log-tbl td .wpd-log-input {
  display: inline-block;
  width: 70px;
  padding: 7px 8px;
  background-color: #f4f7fa;
  border-radius: 4px;
  border: 1px solid var(--borderLight);
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--textPrimary);
  text-align: center;
  font-family: inherit;
  text-transform: uppercase;
}
.wpd-log-input:focus,
.wpd-log-set-input:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  background-color: #fff;
}
.wpd-log-input.is-saving,
.wpd-log-set-input.is-saving { opacity: 0.6; }
.wpd-log-input.is-saved,
.wpd-log-set-input.is-saved { border-color: #4caf82; }
.wpd-log-input.is-error,
.wpd-log-set-input.is-error { border-color: #d74549; }

/* ── MetCon rows (no block label, same expand/log behavior) ── */
.wpd-metcon-row {
  border-bottom: 0.5px solid var(--borderLight);
}
.wpd-metcon-row:last-child {
  border-bottom: none;
}

.wpd-metcon-main {
  /* display: grid;
  grid-template-columns: 1fr 90px 90px 90px 44px;
  align-items: center;
  padding: 12px 24px;
  gap: 4px; */
  padding-right: 76px;
}
.wpd-metcon-log-wrap .wpd-log-tbl th {
  border-top: none;
}

.wpd-metcon-mob-vals {
  display: none;
  gap: 20px;
  padding: 0 24px 10px;
}

/* Week tab strip */
.wpd-log-mob {
  border-top: 1px solid var(--borderLight);
}
.wpd-log-week-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 15px 15px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}
.wpd-log-week-tabs::-webkit-scrollbar {
  display: none;
}

.wpd-log-wtab {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--borderLight);
  background: var(--card);
  font-size: 14px;
  line-height: 20.99px;
  font-weight: var(--fw-medium);
  color: var(--textSecondary);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}
.wpd-log-wtab.is-active {
  border-color: var(--textAccent);
}

/* Set rows */
/* .wpd-log-sets {
  padding: 4px 0 6px;
} */

.wpd-log-set-row {
  display: flex;
  align-items: center;
  padding: 14px 17px;
  border-bottom: 1px solid var(--borderLight);
}
.wpd-log-set-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.wpd-log-set-lbl {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--textSecondary);
  flex-basis: 60px;
}

.wpd-log-set-val {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 18px;
  background-color: #f4f7fa;
  border: 0.84px solid var(--borderLight);
  font-weight: var(--fw-medium);
  color: var(--textSecondary);
  flex: 1 1 0%;
}
/* Editable mobile weight cell — matches .wpd-log-set-val exactly. */
.wpd-log-set-input {
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 18px;
  background-color: #f4f7fa;
  border: 0.84px solid var(--borderLight);
  font-weight: var(--fw-medium);
  color: var(--textPrimary);
  flex: 1 1 0%;
  min-width: 0;
  font-family: inherit;
  text-transform: uppercase;
}

@media (max-width: 1280px) {
  .wpd-section-hdr {
    padding: 25px 50px 25px 23px;
  }

  .wpd-thead {
    padding: 14px 50px 14px 20px;
    gap: 20px;
  }
  .wpd-row {
    padding: 14px 50px 14px 20px;
    gap: 20px;
  }
  .wpd-section-body.inner-accordion {
    padding: 25px 23px;
  }
  .wpd-block-hdr {
    padding: 16px 37px 16px 30px;
  }

  .wpd-badge {
    width: 31px;
    height: 31px;
    font-size: 15.11px;
    line-height: 100%;
  }

  .wpd-block-label {
    font-size: 18.47px;
    line-height: 20.99px;
    letter-spacing: -0.25px;
  }
  .wpd-block-chev {
    width: 20px;
    height: 20px;
  }
  .wpd-brow-wrap,
  .wpd-metcon-log-wrap {
    margin: 0 20px 28px;
  }
  .wpd-block-item .wpd-thead-cell {
    font-size: 13.43px;
    line-height: 16.79px;
  }
  .wpd-thead-5col {
    grid-template-columns: 1fr 76px 76px 76px 8px;
    padding-left: 38px;
    padding-right: 59px;
    gap: 2% !important;
  }

  .wpd-brow-main,
  .wpd-metcon-main {
    display: grid;
    grid-template-columns: 1fr 76px 76px 76px 20px;
    padding-right: 22px;
    gap: 2%;
  }
  .wpd-metcon-main {
    padding-right: 46px;
    padding-left: 38px;
  }
  .wpd-brow-lbl {
    font-size: 15.11px;
  }
  .wpd-block-item .wpd-ex-link {
    font-size: 15.11px;
    line-height: 20.99px;
  }
  .wpd-block-item .wpd-clip-btn svg {
    width: 27px;
    height: 27px;
  }
  .wpd-block-item .wpd-val-cell {
    font-size: 15.11px;
    line-height: 20.99px;
    min-height:30px;
  }
  .wpd-plus-btn {
    width: 20px;
    height: 20px;
  }

  .wpd-log-inner {
    padding: 0px 0px 12px;
  }

  .wpd-log-tbl th {
    padding: 10px 13px;
    font-size: 15.11px;
    line-height: 20.99px;
  }
  .wpd-log-tbl th:first-child {
    padding-left: 20px;
  }
  .wpd-log-tbl th:first-child {
    width: 150px;
  }
  .wpd-log-tbl td {
    padding: 7px 12px;
    font-size: 11.75px;
    line-height: 15.11px;
  }
  .wpd-log-tbl td:first-child {
    font-size: 15.11px;
    line-height: 20.99px;
    padding-left: 20px;
  }
  .wpd-log-tbl td span {
    padding: 5px 8px;
    min-width: 60px;
  }
  .wpd-log-hint {
    margin-top: 16px;
  }
}

@media (max-width: 800px) {
  .wpd-log-tbl td {
    padding: 7px 10px;
}
}
/* =========================================================
           RESPONSIVE — TABLET/MOBILE (max-width: 991px)
           ========================================================= */
@media (max-width: 767px) {
  /* Hide column headers on mobile */
  .wpd-block-item .wpd-thead {
    display: none;
  }
  .wpd-thead .wpd-thead-cell.hide-on-mob {
    display: none;
  }

  /* Flat row: name full width, values row below */
  .wpd-row {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 21px;
    gap: 16px 0;
  }
  .wpd-ex-cell {
    flex: 0 0 100%;
  }

  .wpd-ex-link {
    font-size: 16px;
    line-height: 20px;
  }

  .wpd-clip-btn svg {
    width: 25px;
    height: 25px;
  }
  .wpd-row .wpd-val-cell {
    display: none;
  }
  .wpd-row .wpd-mob-vals {
    display: flex;
    justify-content: space-between;
    flex: 0 0 90%;
    gap:20px;
  }
  .wpd-log-tbl {
    display: none;
  }
  .wpd-log-mob {
    display: block;
  }

  /* Block row */
  .wpd-brow-wrap,
  .wpd-metcon-log-wrap {
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
  .wpd-brow-main,
  .wpd-metcon-main {
    grid-template-columns: 1fr 20px;
    padding: 18px 22px 16px;
  }
  .wpd-brow-main .wpd-val-cell,
  .wpd-metcon-main .wpd-val-cell {
    display: none;
  }

  .wpd-brow-mob-vals,
  .wpd-metcon-mob-vals {
    display: flex;
    gap: 17px;
    padding: 0 18px 25px;
    /* max-width: 50%; */
    /* justify-content: space-between; */
    /* SETS / REPS / REST must stay on one line together; the items shrink
       (min-width:0 below) instead of REST dropping to a second row. */
    flex-wrap: nowrap;
    max-width: 100%;
    justify-content: flex-start;
  }
  .wpd-brow-mob-vals .wpd-mv-item,
  .wpd-metcon-mob-vals .wpd-mv-item {
    min-width: 0;
  }

  .wpd-brow-lbl {
    font-size: 16px;
    line-height: 20px;
  }
  .wpd-block-item .wpd-ex-link {
    font-size: 16px;
    line-height: 20px;
  }
  .wpd-block-item .wpd-clip-btn svg {
    width: 22px;
    height: 22px;
  }
  .wpd-plus-btn {
    margin-inline: auto;
  }
  .wpd-section-hdr {
    padding: 15px 16px;
  }
  .wpd-block-hdr {
    /* padding: 12px 16px; */
    padding: 16px 16px;
  }
  .wpd-log-inner {
    padding: 0px 0px 14px;
    border-top: 1px solid var(--borderLight);
  }
  .wpd-log-hint {
    display: none;
  }
}
@media (max-width: 767px) {
  .wpd-section-hdr {
    padding: 25px 20px 25px 20px;
  }
  .wpd-section-body.inner-accordion {
    padding: 14px 13px;
  }
  .wpd-section-body.inner-accordion:has(div.wpd-metcon-row) {
    padding: 0;
  }
  .wpd-block-item:has(div.wpd-metcon-row) {
    border: none;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }
  .wpd-block-item {
    margin-bottom: 16px;
  }
  .wpd-brow-main,
  .wpd-metcon-main {
    grid-template-columns: 1fr 20px;
    padding: 15px 14px 12px;
  }

  .wpd-brow-mob-vals,
  .wpd-metcon-mob-vals {
    display: flex;
    padding: 0 14px 21px;
  }

  .wpd-log-head {
    margin: 9px 9px 6px;
  }
  .wpd-log-week-tabs {
    padding: 11px 9px 0;
    gap: 0;
  }

  .wpd-log-wtab {
    padding: 5px 6px;
    font-size: 12px;
    line-height: 20.99px;
  }

  .wpd-log-set-row {
    padding: 13px 12px;
  }
  .wpd-badge {
    width: 38px;
    height: 38px;
    font-size: 18px;
    line-height: 25px;
  }
  .wpd-block-label{
    font-size: 22px;
    line-height: 25px;
    letter-spacing: -0.3px;    
  }

  /* new addition */

  .wpd-section-hdr {
    padding: 25px 20px 25px 20px;
  }
  .wpd-section-body.inner-accordion {
    padding: 14px 13px;
  }
  .wpd-section-body.inner-accordion:has(div.wpd-metcon-row) {
    padding: 0;
  }
  .wpd-block-item:has(div.wpd-metcon-row) {
    border: none;
    background-color: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }
        .wpd-block-item:has(div.wpd-metcon-row) .wpd-thead{
            display:block;
            padding: 14px 20px 14px 15px;
        }
        .wpd-block-item:has(div.wpd-metcon-row) .wpd-thead .wpd-thead-cell {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--textMuted);
    text-transform: uppercase;
}
}

@media (max-width:620px){
  .wpd-row .wpd-mob-vals {
    justify-content: flex-start;
    flex: 0 0 100%;
    }
    .wpd-log-wtab {
    font-size: 11px;
}
.wpd-metcon-log-wrap .wpd-log-wtab {
    font-size: 12px;
}
.wpd-log-set-lbl {
    font-size: 15.11px;
    line-height: 20.99px;
}
.wpd-log-set-val{
font-weight: 500;
font-size: 11.75px;
line-height: 15.11px;
letter-spacing: 0%;
        padding: 5px 8.4px;
        border-radius: 3.36px;
}
}
@media (max-width:392px){
  .wpd-log-wtab{
    padding: 5px 3.5px;
    vertical-align: middle;
  }
}

/* Weight-log week selector: all six weeks must fit the card with no lateral
   scroll (client spec / Figma). The strip was overflow-x:auto with
   flex-shrink:0 tabs, so Weeks 5 and 6 sat off-screen behind a swipe. Let the
   six tabs share the row instead. Only applies below 768px, the same
   breakpoint that shows .wpd-log-mob at all. */
@media (max-width: 767px) {
  .wpd-log-week-tabs {
    overflow-x: visible;
    /* gap: 4px; */
    /* gap: 2px; */
  }
  .wpd-log-wtab {
    flex: 1 1 0;
    min-width: 0;
    /* flex-shrink: 1; */
    /* padding-inline: 2px;
    text-align: center; */
  }
}
/* Narrowest phones: six "Week N" labels only clear ~38px each, so ease the
   type down rather than let a tab overflow its box. */
@media (max-width: 359px) {
  .wpd-log-wtab,
  .wpd-metcon-log-wrap .wpd-log-wtab {
    font-size: 10px;
    letter-spacing: -0.2px;
  }
}
.wpd-val-cell, .wpd-mv-val{
  min-height:37px;
}
/* -------------------------- food journal history: journal-table -------------------------- */
.journal-table-wrap {
  background-color: var(--card, #fcfcfd);
  border: 1px solid var(--borderLight, #ebe7e7);
  border-radius: 12px;
  overflow-y: auto;
  box-shadow: var(--cardShadow, 0px 16px 20px -13px #00000026);
}

.journal-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.journal-table thead th {
  padding: 18px 40px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  text-align: left;
  border-bottom: 1px solid var(--borderLight, #ebe7e7);
  background-color: var(--tableHeader, #f8f9fa);
  white-space: nowrap;
  max-width: 200px;
}

.journal-table thead th:last-child {
  max-width: 700px;
}

.journal-table tbody td {
  padding: 12px 40px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textSecondary, #212529b2);
  border-bottom: 1px solid var(--borderLight, #ebe7e7);
  vertical-align: middle;
}

.journal-table tbody tr:last-child td {
  border-bottom: none;
}

.journal-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

.journal-meal-link {
  color: var(--textAccent, #4c78ce);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.journal-meal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.journal-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--card, #fcfcfd);
  border: 1px solid var(--borderLight, #ebe7e7);
  border-radius: 8px;
  color: var(--textSecondary, #212529b2);
  cursor: pointer;
  transition: background-color 0.15s ease;
  font-size: 18px;
  padding: 0;  
}
.journal-menu-btn svg {
  width: 24px;
  height: 24px;
}

.journal-menu-btn:hover {
  background-color: var(--iconBackground, #f0f0f6);
}

.journal-menu-btn::after {
  display: none;
}

@media (max-width: 767px) {
  .journal-table-content {
    background-color: #fcfcfc;
    border: 1px solid var(--cardBorder, #dee1e7);
    border-radius: var(--radius-sm, 8px);
    padding: 30px 20px;
  }

  .journal-table tbody td {
    padding: 14px 13px;
  }

  .journal-table thead th:last-child {
    width: 60px;
  }
  .journal-table thead th {
    padding: 14px 13px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  .journal-menu-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    margin-inline: auto;
  }
  .journal-menu-btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 359px) {
  .journal-table thead th,
  .journal-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .wpd-log-set-lbl {
    font-size: 15.11px;
    line-height: 20.99px;
  }

  .wpd-log-set-val {
    padding: 5px 9px;
    border-radius: 3.36px;
    font-size: 11.75px;
    line-height: 15.11px;
  }
}
@media (max-width: 392px) {
  .wpd-mob-vals {
    gap: 10px!important;
    flex-wrap: wrap;
  }
  .wpd-mv-val {
    padding: 5px 8px;
    min-width: 80px;
  }
}
@media (min-width: 768px) {
  .wpd-brow-mob-vals,
  .wpd-metcon-mob-vals {
    display: none;
  }
  .wpd-log-head {
    display: none;
  }
  .wpd-log-mob {
    display: none;
  }
}
@media (max-width: 340px) {
    .wpd-mv-val {
        min-width: 70px;
    }
    .wpd-brow-mob-vals, .wpd-metcon-mob-vals {
    gap: 10px;
}
}

/* -------------------------- food journal history: start/end date range -------------------------- */
/* Same visual language as .white-black-filter-tabs (border, radius, flush
   dividers between segments) so it reads as a sibling control group rather
   than a bare, disconnected row of native inputs. */
.pg-range-picker {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.pg-range-label {
  display: inline-flex;
  align-items: center;
  padding: 11px 10px 11px 14px;
  background-color: #ffffff;
  border-right: 1px solid #e8eaed;
  font-size: 13px;
  line-height: 100%;
  font-weight: var(--fw-medium, 500);
  color: var(--textMuted, #6b7280);
  white-space: nowrap;
}

.pg-range-input {
  display: inline-flex;
  align-items: center;
  padding: 11px 14px;
  background-color: #ffffff;
  border: none;
  border-right: 1px solid #e8eaed;
  font-size: 13px;
  line-height: 100%;
  font-weight: var(--fw-medium, 500);
  color: var(--textPrimary, #000000);
  cursor: pointer;
}

.pg-range-input:hover,
.pg-range-input:focus {
  background-color: var(--sidebarActive, #dde2ee);
  outline: none;
}

.pg-range-picker .white-black-filter-btn {
  border-right: none;
  background-color: #111827;
  border-color: #111827;
  color: #ffffff;
}
@media (pointer:fine) and (hover: hover) {
.pg-range-picker .white-black-filter-btn:hover {
  background-color: #1f2937;
}
}
.pg-range-picker .white-black-filter-btn:active {
  background-color: #1f2937;
}

@media (max-width: 767px) {
  .pg-range-picker {
    width: 100%;
  }
  .pg-range-label,
  .pg-range-input {
    flex: 1 1 auto;
  }
}

/* -------------------------- cardio reservations: dynamic states + panels -------------------------- */
/* Time/unit slot already reserved by someone else, or in the past — extends
   the base .cr-unit-btn/.cr-time-btn/.cr-time-btn.reserved states above. */
.cr-unit-btn.reserved-other,
.cr-time-btn.reserved-other {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  cursor: not-allowed;
}
.cr-unit-btn.reserved-other:hover,
.cr-time-btn.reserved-other:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.cr-unit-btn.past {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textMuted, #9ca3af);
  text-decoration: line-through;
  cursor: not-allowed;
}
.cr-unit-btn.past:hover {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textMuted, #9ca3af);
}
.cr-time-btn:disabled{
  opacity: 40%;
  cursor: not-allowed;
}
.cr-time-btn.past:hover {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textSecondary, #9ca3af);
  /* text-decoration: line-through; */
  cursor: not-allowed;
}


.cr-time-btn.reserved-mine,
.cr-unit-btn.reserved-mine {
  background-color: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}
.cr-time-btn.reserved-mine:hover {
  background-color: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

.cr-reserve-btn:disabled {
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border-color: var(--borderLight, #e3e6ef);
  color: var(--textMuted, #9ca3af);
  cursor: not-allowed;
}
.cr-reserve-btn:disabled:hover {
  opacity: 1;
}

.cr-sunday-notice {
  font-size: 16px;
  color: var(--textSecondary, #212529b2);
  padding: 8px 0;
  margin: 0;
}

/* Social-distancing / half-availability notice pill */
.cr-distancing-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  font-size: 13px;
  font-weight: var(--fw-medium, 500);
  padding: 8px 16px;
  border-radius: 999px;
}

/* Admin-only availability toggle bar */
.cr-admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm, 8px);
  padding: 12px 18px;
  font-size: 14px;
  margin-bottom: 20px;
}
.cr-admin-label {
  font-weight: var(--fw-medium, 600);
  color: #92400e;
}
.cr-admin-select {
  padding: 6px 10px;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-xs, 4px);
  background-color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.cr-admin-clear {
  padding: 6px 12px;
  border-radius: var(--radius-xs, 4px);
  background-color: transparent;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 13px;
  font-weight: var(--fw-medium, 600);
  cursor: pointer;
}
.cr-admin-clear:hover {
  background-color: #fef3c7;
}

/* My Reservations panel */
.cr-my-res-panel {
  background-color: var(--card, #fcfcfc);
  border: 1px solid var(--cardBorder, #dee1e7);
  border-radius: 12px;
  box-shadow: var(--shadow3);
  padding: 28px 29px;
  margin-bottom: 24px;
}
.cr-my-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.cr-my-res-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: var(--textPrimary, #000000);
  margin: 0;
}
.cr-my-res-subtitle {
  font-size: 14px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}
.cr-my-res-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-my-res-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border: 1px solid var(--borderLight, #e3e6ef);
  border-radius: var(--radius-sm, 8px);
  padding: 14px 18px;
}
.cr-my-res-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cr-my-res-name {
  font-size: 15px;
  font-weight: var(--fw-medium, 600);
  color: var(--textPrimary, #000000);
  margin: 0;
}
.cr-my-res-time {
  font-size: 13px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}
.cr-my-res-empty {
  font-size: 14px;
  color: var(--textSecondary, #212529b2);
  margin: 0;
}
.cr-unreserve-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-xs, 4px);
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 13px;
  font-weight: var(--fw-medium, 600);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cr-unreserve-btn:hover {
  background-color: #fecaca;
}

@media (max-width: 767px) {
  .cr-my-res-panel {
    padding: 20px 18px;
  }
  .cr-my-res-item {
    flex-direction: column;
    align-items: flex-start;
  }
}





/* =========================================================
   ACCOUNTABILITY CHARTS PAGE
   ========================================================= */
.attach-docs-card {
  margin-top: 20px;
  background-color: #fcfcfd;
  border-radius: var(--radius-lg);
  padding: 23px 25px 64px;
  overflow: hidden;
}

.attach-docs-accordion .accordion-item {
  background-color: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.attach-docs-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.attach-docs-accordion .accordion-button {
  padding: 13px 26px 13px 19px;
  background-color: transparent;
  box-shadow: none;
  color: var(--textSecondary);
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attach-docs-accordion .accordion-button::after {
  margin-left: auto;
  width: 16px;
  height: 16px;
  background-size: 16px;
  filter: brightness(0) saturate(100%) invert(45%) sepia(10%) saturate(400%) hue-rotate(180deg);
  transition: transform 0.2s ease;
}

.attach-docs-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.attach-docs-accordion .accordion-button:focus {
  box-shadow: none;
}

.attach-docs-accordion .accordion-body {
  padding: 0 0 16px 0;
}

.attach-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--textAccent);
  font-size: 16px;
  background: #eef0f9;
  border-radius: 8px;
}

.attach-section-icon svg {
  width: 24.5px;
  height: 24.5px;
}

.res-training-title {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary);
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 10px;
}
.res-training-title svg {
  width: 21px;
  height: 21px;
}
.res-training-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.res-training-body .attach-docs-card {
  margin-top: 20px;
  flex: 1;
}

.homework-1-body .attach-docs-card {
  padding: 24px 25px 64px;
}

.acc-chart-body {
  padding: 24px 25px 60px 19px;
  border-top: 1px solid var(--borderLight);
}
.acc-chart-header {
  color: var(--textSecondary);
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.acc-chart-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--textAccent);
  font-size: 16px;
  background: #eef0f9;
  border-radius: 8px;
}

.acc-chart-header-icon svg {
  width: 24px;
  height: 24px;
}

.acc-chart-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  max-width: 919px;
  width: 100%;
}

.acc-chart-scroll-container {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.acc-chart-scroll-track {
  display: flex;
  gap: 8px;
  transition: transform 0.3s ease;
  will-change: transform;
}

.acc-chart-scroll-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background-color: #eef0f9;
  border: none;
  border-radius: 8px;
  color: var(--textAccent);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.acc-chart-scroll-arrow:hover {
  background-color: var(--sidebarActive, #dde2ee);
  border-color: var(--accent, #5a83d3);
  color: var(--textAccent, #4c78ce);
}

.acc-chart-scroll-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.acc-chart-scroll-arrow svg {
  width: 24px;
  height: 24px;
  color: var(--textAccent);
}

.acc-chart-scroll-wrap.has-overflow .acc-chart-scroll-arrow {
  display: flex;
}

.acc-chart-week-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--btnSecondaryBg, #f4f7fa);
  border: 1px solid var(--borderLight, #ebe7e7);
  border-radius: var(--radius-xs, 4px);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textPrimary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  padding: 8px 19px;
}

.acc-chart-week-btn:hover {
  background-color: var(--sidebarActive, #dde2ee);
  border-color: var(--accent, #5a83d3);
  color: var(--textAccent, #4c78ce);
}

.acc-chart-week-btn.active {
  background-color: var(--textAccent, #4c78ce);
  border-color: var(--textAccent, #4c78ce);
  color: #ffffff;
}

.acc-chart-fields {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.acc-chart-date-fields-wrapper {
  flex: 1 1 617px;
}
.acc-chart-field-wrapper {
  max-width: 617px;
  width: 100%;
}

.acc-chart-label {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--textSecondary);
  margin-bottom: 8px;
}

.acc-chart-select-wrapper {
  position: relative;
}
.acc-chart-select-calender-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 17px;
  width: 18px;
  height: 18px;
}
.acc-chart-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 13px 35px 13px 41px;
  background-color: white;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-xs);
  font-size: 16px;
  line-height: 19px;
  color: var(--textSecondary);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M5.15552 7.7334L10.3111 12.8889L15.4666 7.7334' stroke='black' stroke-width='0.859258' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.acc-chart-select option {
  color: var(--textPrimary, #000000);
}
.acc-chart-select:has(option[value=""]:checked) {
  color: #21252980;
}
.acc-chart-select:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.acc-chart-preview-btn {
  border: 1px solid var(--borderLight);
  background-color: transparent;
  border-radius: 4px;
  padding: 10px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  line-height: 20px;
  color: var(--textAccent);
  cursor: pointer;
  transition: all 0.15s ease;
}
.acc-chart-preview-btn svg {
  width: 20px;
  height: 20px;
}
.acc-chart-preview-btn:hover {
  background-color: var(--sidebarActive, #dde2ee);
}
.acc-chart-preview-btn:focus {
  transform: translateY(1px);
}

@media (max-width: 1280px) {
  .acc-chart-week-btn {
    padding: 9px 13px;
  }
  .acc-chart-header-icon {
    width: 40px;
    height: 40px;
  }
  .acc-chart-header-icon svg {
    width: 22px;
    height: 22px;
  }
  .acc-chart-header {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    gap: 8px;
  }
  .acc-chart-scroll-wrap {
    gap: 8px;
  }
  .acc-chart-week-btn {
    gap: 4px;
    font-size: 14px;
    line-height: 18px;
    padding: 6px 15px;
  }
  .res-training-title {
    font-size: 16px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .acc-chart-week-btn {
    padding: 9px 15px;
  }
  .acc-chart-body {
    padding: 20px 20px 30px 14px;
  }
  .acc-chart-scroll-arrow {
    width: 38px;
    height: 38px;
  }
  .homework-1-body .attach-docs-card {
    padding: 16px;
    padding-bottom: 40px;
  }
}

.acc-chart-scroll-container {
    overflow: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   BASELINE / GOALS READ-ONLY VIEW PAGES (Training Program)
   ========================================================= */
.body-comp-card {
  background-color: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-lg);
  padding: 28px 27px;
  overflow: hidden;
}
.body-comp-card:not(:first-child) {
  margin-top: 24px;
}
.body-comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 18px;
}
.body-comp-header-left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.body-comp-icon-wrap {
  width: 47px;
  height: 47px;
  background-color: #eef0f9;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.body-comp-icon-wrap svg {
  width: 24px;
  height: 24px;
  color: var(--textPrimary);
}
.body-comp-header-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  margin-bottom: 0;
}
.body-comp-table-wrap {
  border: 1px solid var(--borderLight);
  background-color: #fcfcfd;
  border-radius: 12px;
  margin-top: 20px;
  overflow-x: auto;
}
.body-comp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
}
.body-comp-table thead th {
  padding: 13px 14px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--borderLight);
  background-color: transparent;
  white-space: nowrap;
  border-right: 1px solid var(--borderLight);
}
.body-comp-table thead th:first-child {
  width: 180px;
  min-width: 180px;
  padding-left: 23px;
  background-color: #f7f9fc;
}
.body-comp-table thead th:not(:first-child) {
  min-width: 160px;
}
.body-comp-table thead th:first-child,
.body-comp-table thead th:last-child {
  border-right: none;
}
.body-comp-table-date {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--textSecondary);
  text-transform: none;
}
.body-comp-table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-right: 1px solid var(--borderLight);
}
.body-comp-table tbody tr td:first-child {
  padding-left: 23px;
  background-color: #f7f9fc;
}
.body-comp-table tbody td:first-child,
.body-comp-table tbody td:last-child {
  border-right: none;
}
.body-comp-param-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textSecondary);
  text-transform: uppercase;
  white-space: nowrap;
}
.body-comp-value {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textPrimary);
}

/* Goals */
.goals-card {
  background-color: #fcfcfd;
  border: 1px solid #e4e3eb;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.goals-card .goals-card-header-table {
  padding: 28px 27px 34px;
}
.goals-table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  position: relative;
}
.goals-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 500px;
}
.goals-table thead th {
  padding: 12px 8px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  white-space: nowrap;
}
.goals-table thead th:first-child {
  width: 120px;
  min-width: 120px;
}
.goals-table thead th:not(:first-child) {
  min-width: 220px;
}
.goals-param-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  white-space: nowrap;
  display: block;
  padding-top: 8px;
}
.goals-value-box {
  width: 100%;
  min-height: 100px;
  padding: 9px;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-xs);
  background-color: white;
  font-size: 14px;
  line-height: 1.5;
  color: var(--textSecondary);
  white-space: pre-wrap;
}

@media (max-width: 767px) {
  .body-comp-card {
    padding: 24px 20px;
  }
  .body-comp-card:not(:first-child) {
    margin-top: 20px;
  }
  .body-comp-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .body-comp-icon-wrap svg {
    width: 20px;
    height: 20px;
  }
  .body-comp-table thead th {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 18px;
  }
  .body-comp-table thead th:first-child {
    padding-left: 18px;
  }
  .body-comp-table tbody tr td:first-child {
    padding-left: 18px;
  }
  .body-comp-param-label,
  .body-comp-value {
    font-size: 14px;
    line-height: 18px;
  }
}

/* =========================================================
   EMAIL NOTES / COACHING CALL — READ-ONLY DETAIL VIEW
   ========================================================= */
.note-detail-card {
  background-color: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-lg);
  padding: 28px 27px;
}
.note-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borderLight);
  margin-bottom: 20px;
}
.note-detail-title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--textPrimary);
  margin: 0 0 6px;
}
.note-detail-date {
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
  margin: 0;
}
.note-detail-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--textSecondary);
}
.note-detail-body p:last-child {
  margin-bottom: 0;
}
.attach-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 19px;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-sm);
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.attach-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.attach-item-name {
  font-size: 16px;
  line-height: 20px;
  color: var(--textSecondary);
}
.attach-item-preview {
  font-size: 16px;
  line-height: 20px;
  color: var(--textAccent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.15s ease;
}
.attach-item-preview:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.attach-item-preview svg {
  width: 20px;
  height: 20px;
}

/* =========================================================
   WEEKLY SCHEDULE — READ-ONLY VIEW
   ========================================================= */
.ws-card {
  background-color: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-lg);
  padding: 28px 27px;
  margin-bottom: 20px;
}
.ws-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ws-summary-item {
  flex: 1 1 200px;
}
.ws-label {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--textSecondary);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ws-value {
  font-size: 16px;
  line-height: 22px;
  color: var(--textPrimary);
  white-space: pre-wrap;
}
.ws-schedule-card {
  background-color: #fcfcfd;
  border-radius: var(--radius-lg);
  padding: 24px 25px 28px;
}
.ws-schedule-content-wrapper {
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #fcfcfd;
  container: ws-schedule-content-wrapper/inline-size;
}
.ws-schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.ws-day-column {
  border-right: 1px solid var(--borderLight);
  display: flex;
  flex-direction: column;
}
.ws-day-column:last-child {
  border-right: none;
}
.ws-day-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 14px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textSecondary);
  text-transform: uppercase;
  border-bottom: 1px solid var(--borderLight);
  background-color: #f4f7fa;
}
.ws-day-header svg {
  width: 25px;
  height: 25px;
}
.ws-day-slots {
  padding: 13px 14px 27px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.ws-slot-value {
  width: 100%;
  min-height: 70px;
  padding: 9px;
  background-color: white;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--textSecondary);
  line-height: 1.4;
  white-space: pre-wrap;
}

@media (max-width: 1440px) {
  .ws-schedule-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ws-day-column:nth-child(4) {
    border-right: none;
  }
  .ws-day-column:nth-child(1),
  .ws-day-column:nth-child(2),
  .ws-day-column:nth-child(3),
  .ws-day-column:nth-child(4) {
    border-bottom: 1px solid var(--borderLight);
  }
  .ws-day-column:last-child {
    border-right: 1px solid var(--borderLight);
  }
}
@container ws-schedule-content-wrapper (max-width:767px) {
  .ws-schedule-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ws-day-column:nth-child(3),
  .ws-day-column:nth-child(6) {
    border-right: none;
  }
  .ws-day-column:nth-child(4) {
    border-right: 1px solid var(--borderLight);
  }
  .ws-day-column:nth-child(5),
  .ws-day-column:nth-child(6) {
    border-bottom: 1px solid var(--borderLight);
  }
}
@media (max-width: 767px) {
  .ws-card {
    padding: 20px 16px;
  }
  .ws-schedule-card {
    padding: 20px 16px 20px;
  }
  .ws-day-header {
    padding: 12px 10px;
    font-size: 15px;
  }
  .ws-day-header svg {
    width: 21px;
    height: 21px;
  }
  .ws-schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ws-day-column:nth-child(2),
  .ws-day-column:nth-child(4) {
    border-right: none;
  }
  .ws-day-column:nth-child(3),
  .ws-day-column:nth-child(5) {
    border-right: 1px solid var(--borderLight);
  }
}
@media (max-width: 480px) {
  .ws-schedule-grid {
    grid-template-columns: 1fr;
  }
  .ws-day-column {
    border-right: none !important;
    border-bottom: 1px solid var(--borderLight);
  }
}

/* =========================================================
   NEW-DESIGN SECTIONS (added): Weekly Schedule grid + Body Composition
   ========================================================= */
/* -------------------------------weekly-schedule------------------------ */
/* =========================================================
       TOP HEADER BAR
       ========================================================= */
.schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fcfcfd;
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  padding: 21px 19px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.schedule-header-item {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: #64676a;
  text-transform: uppercase;
}
.schedule-header-item span {
  color: var(--textPrimary);
  font-weight: 400;
}

/* =========================================================
       WEEK GRID
       ========================================================= */
.week-grid-wrapper {
  container: week-grid-wrapper/inline-size;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto auto auto auto; /* header row + 3 slot rows */
  grid-auto-flow: column; /* fills header→morning→midday→evening per day, then next day */
  /* gap: 15px; */
  background: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: 8px;
  overflow: hidden;
  padding-inline: 7px;
}

.day-column {
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  min-height: 520px;
  display: contents;
}
.first-column{
  display:none!important;
}
.day-header {
  text-align: center;
  padding: 12px 8px;
  font-size: 18px;
  line-height: 25px;
  font-weight: var(--fw-bold);
  color: #00000099;
  text-transform: uppercase;
  border-bottom: 1px solid var(--borderLight);
  background: #fafafb;
}
.week-grid .day-column:first-child .day-header,
.week-grid .day-column:nth-child(2) .day-header,
.week-grid .day-column:last-child .day-header {
  margin-inline: -7px;
}
.day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fcfcfd;
  border: 1px solid var(--borderLight);
  margin: 13px 7px;
  border-radius: 8px;
  /* gap: 12px; */
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid; /* inherits the 3 row tracks from week-grid */
  grid-row: span 3;
}

/* =========================================================
       TIME SLOT
       ========================================================= */
.time-slot {
  flex: 1;
  border-bottom: 1px solid var(--borderLight);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
.time-slot:hover {
  border-color: var(--cardBorder);
}
.day-body .time-slot:last-child {
  border-bottom: none;
}
.slot-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 14px;
  font-weight: var(--fw-semibold);
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  padding: 9.5px;
  padding-bottom: 0;
}
.slot-label svg {
  width: 20px;
  height: 20px;
}
.slot-label.morning {
  background: #ffffff;
  border-bottom: 1px solid var(--borderLight);
  padding-bottom: 8.5px;
}
.slot-content {
  padding: 9.5px;
  padding-top: 14px;
  padding-bottom: 25px;
}
/* =========================================================
       ACTIVITY PILL
       ========================================================= */
.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5.5px 9.6px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 17px;
  word-break: break-word;
  font-weight: 400;
  color: var(--textPrimary);
  background: #f4f7fa;
  border: 1px solid #dce5f5;
  width: fit-content;
  cursor: default;
  transition: transform 0.1s ease;
}
.activity-pill:hover {
  transform: translateY(-1px);
}
.activity-pill svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.activity-pill.pill-rest svg,
.activity-pill.pill-interval svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =========================================================
       ACTIVITY DETAIL BLOCK
       ========================================================= */
.activity-detail {
  margin-top: 8px;
  font-size: 14px;
  line-height: 18px;
  color: var(--textPrimary);
  font-weight: 700;
}
.activity-detail div {
  margin-top: 8px;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */
@media (max-width: 1100px) {
  .schedule-header {
    padding: 18px 18px;
  }
  .schedule-header-item {
    font-size: 16px;
    line-height: 22px;
  }
}
@media (max-width: 640px) {
  .schedule-header {
    padding: 15px 12px;
    gap:6px;
    box-shadow: 0px 8px 8px -9.05px #00000026;
}
    .schedule-header-item {
    font-size: 14px;
    line-height: 18px;
  }
  .week-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    padding: 0;
  }
  .day-column {
    background: #fcfcfc;
    border: 1px solid #dee1e7;
    box-shadow: 0px 8px 8px -9.05px #00000026;
    border-radius: 6px;
    min-height: auto;
  }
  .week-grid .day-column .day-header {
    margin-inline: 0px!important;
  }
  .day-header {
    text-align: left;
    padding: 13px 21px 6px;
    background: transparent;
  }
  .day-body {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
    flex: 0 0 auto;
  }
  .time-slot {
    padding: 15px 21px 28px;
    flex-direction: row;
    gap: 22px;
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .slot-label {
    background: transparent !important;
    border: none !important;
    padding: 0;
    flex-basis: 108px;
    flex-shrink: 0;
  }
  .slot-content {
    padding: 0;
  }
  .activity-detail {
    margin-top: 13px;
  }
  .activity-detail div {
    margin-top: 4px;
  }
  .week-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .day-column {
    display: block; /* back to a normal box so the card styling applies */
  }
  .day-column > .day-header,
  .day-column > .day-body {
    grid-column: auto;
    grid-row: auto;
  }
  .day-body {
    display: flex;
    flex-direction: column;
  }
}
.arrow-group {
  display: none;
}
@media (min-width:639px) and  (max-width: 1440px) {
 .week-grid-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borderLight);
}
.week-grid{
  grid-template-columns: 140px repeat(7, 200px); /* explicit tracks — was falling back to the base repeat(7,1fr) plus one implicit auto column, which is why sizing was off */
  width: max-content;
  padding-inline: 0;
  background: #FCFCFD;
   overflow: visible;
   border:none;
}
.slot-label.morning{
  background: #FCFCFD;
}
.first-column{
  display: contents!important;
}
.first-column .slot-label.midday{
border-bottom: 1px solid var(--borderLight);
}
.week-grid .day-column:first-child .day-header, .week-grid .day-column:nth-child(2) .day-header, .week-grid .day-column:last-child .day-header{
  margin-inline: 0;
}

.arrow-btn{
  width: 85px;
  height: 49px;
  border-radius: 8px;
  background-color: #fcfcfc;
  border:none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  border: 1px solid var(--sidebarActive);
  margin-block: 16px;
}
.arrow-btn svg{
  width: 36px;
  height: 36px;
}
@media (pointer:fine) and (hover:hover){
  
.arrow-btn:hover{  
  background: #f4f7fa;
}
}
.arrow-btn:active{
  opacity: 0.8;
  background: #f4f7fa;
}
.arrow-group {
  display: inline-flex;
  gap: 8px;
}
.arrow-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.first-column .day-header,
.first-column .day-body {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #FAFAFB;
}
  .day-column {
    background: #fcfcfc;
    border: 1px solid #dee1e7;
    box-shadow: 0px 8px 8px -9.05px #00000026;
    border-radius: 6px;
    min-height: auto;
  }

  .day-header, .day-body{
    border-right: 1px solid #dee1e7!important;
  }
  .day-column:last-child .day-header, .day-column:last-child .day-body{
    border-right: none!important;
  }
  .week-grid .day-column .day-header {
    margin-inline: 0px;
  }
  .day-header {
    text-align: left;
    padding: 13px 21px 6px;
    background: #FAFAFB;
    text-align: center;
  }
  .day-body {
    background: transparent;
    border: none;
    margin: 0;
    border-radius: 0;
    flex: 0 0 auto;
  }
  .time-slot {
    padding: 15px 21px 28px;
    flex-direction: row;
    gap: 22px;
    align-items: flex-start;
    flex: 0 0 auto;
  }
  .slot-label {
    display: none;
  }
  .first-column .slot-label{
    display:flex;
  }
  .slot-content {
    padding: 0;
  }
  .activity-detail {
    margin-top: 13px;
  }
  .activity-detail div {
    margin-top: 4px;
  }
}



/*--------------------------- Body Composition page  ---------------------------*/


/* =========================================================
       HEADER
       ========================================================= */
.body-comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 18px;
}

.body-comp-header-left {
  display: flex;
  align-items: center;
  gap: 11px;
}

.body-comp-icon-wrap {
  width: 47px;
  height: 47px;
  background-color: #eef0f9;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.body-comp-icon-wrap svg {
  width: 24px;
  height: 24px;
  color: var(--textPrimary);
}

.body-comp-header-title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  margin-bottom: 0;
}

.body-comp-add-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  background-color: transparent;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xs);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textSecondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.body-comp-add-col-btn:hover {
  background-color: var(--sidebarActive);
  color: var(--accent);
}

.body-comp-add-col-btn svg {
  width: 21px;
  height: 21px;
}

/* =========================================================
       GOALS CARD
       ========================================================= */
.goals-card {
  background-color: #fcfcfd;
  border: 1px solid #e4e3eb;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.goals-card .goals-card-header-table {
  padding: 28px 27px 34px;
}

/* =========================================================
       TABLE
       ========================================================= */
.goals-table-wrap {
  margin-top: 40px;
  overflow-x: auto;
  position: relative;
  overflow-y: clip;
}

.goals-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 500px;
  overflow-y: clip;
}

/* Table header */
.goals-table thead th {
  padding: 12px 8px;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  white-space: nowrap;
}

.goals-table thead th:first-child {
  width: 120px;
  min-width: 120px;
}
.goals-table thead th:not(:first-child) {
  min-width: 220px;
}
.goals-table .swap-btn-cell {
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
}

/* Table body */
.goals-table tbody td {
  padding: 12px 8px;
  vertical-align: top;
  position: relative;
}

.goals-table tbody td {
  padding:8px;
}


/* Parameter label column */
.goals-param-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--textPrimary);
  white-space: nowrap;
  display: block;
  padding-top: 8px;
}

/* =========================================================
       TEXTAREA WRAP
       ========================================================= */
.goals-textarea-wrap {
  position: relative;
  width: 100%;
}

.goals-textarea {
  width: 100%;
  min-height: 120px;
  padding: 9px;
  padding-bottom: 18px;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-xs);
  background-color: white;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
  resize: vertical;
  outline: none;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.goals-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

.goals-textarea::placeholder {
  color: var(--textMuted);
}

/* =========================================================
       SWAP BUTTON (centered between columns)
       ========================================================= */
.goals-swap-btn-wrap {
  /* position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      pointer-events: none; */
}

.goals-swap-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #eef0f9;
  color: var(--textAccent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}
.goals-swap-btn-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: var(--wrapper-height);
  border: 1px dotted #e4e3eb;
  z-index: -1;
}

.goals-swap-btn:hover {
  background-color: var(--sidebarActive);
}
.goals-swap-btn:active {
  opacity: 0.8;
}

.goals-swap-btn svg {
  width: 21px;
  height: 21px;
}

/* =========================================================
       SAVE BUTTON
       ========================================================= */
.goals-save-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 24px 34px;
  border-top: 1px solid #e4e3eb;
}

.goals-save-btn {
  padding: 12px 20px;
  max-width: fit-content;
  margin: 0 auto;
}

/* =========================================================
       DATE PICKER (reused from your design)
       ========================================================= */

.goals-table-wrap .date-picker-wrapper {
  width: 100%;
  background-color: white;
}
.goals-table-wrap .date-picker-main svg {
  width: 22px;
  height: 22px;
}
.goals-table-wrap .date-picker-main {
  gap: 8px;
  padding: 8px;
  flex: 1;
}
.goals-table-wrap .date-picker-chevron {
  border-left: none;
  padding: 8px;
}
.goals-table-wrap .date-picker-chevron svg {
  width: 22px;
  height: 22px;
}
.goals-table-wrap .date-display {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--textSecondary);
  text-transform: none;
}

/* =========================================================
       RESPONSIVE
       ========================================================= */
@media (max-width: 767px) {
   .body-comp-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .body-comp-icon-wrap svg {
    width: 20px;
    height: 20px;
  }
  .goals-card .goals-card-header-table {
    padding: 24px 20px 34px;
  }
  .goals-table-wrap {
    margin-top: 30px;
  }
  .goals-table thead th,
  .goals-table tbody td {
    padding: 6px 6px;
  }
  .goals-param-label,
  .goals-table thead th {
    font-size: 14px;
    line-height: 18px;
  }
  .goals-textarea {
    min-height: 100px;
  }
  .goals-table thead th:first-child {
    width: 105px;
    min-width: 105px;
  }
}


/* =============== update body composite page ================ */
.portal-body-com .goals-table-wrap {
  margin-top: 30px;
  background-color: #FCFCFD;
  border:1px solid var(--borderLight);
  border-radius: 12px;
}

/* table header */


.portal-body-com .goals-table-wrap thead th {
padding: 13px;
border-bottom: 1px solid var(--borderLight);
border-right: 1px solid var(--borderLight);
}


/* table body */

.portal-body-com .goals-table tbody td {
  padding: 8px 13px;
  border-right: 1px solid var(--borderLight);
}

.portal-body-com .goals-table tbody tr:first-child td {
  padding-top: 16px;
}
.portal-body-com .goals-table tbody tr:last-child td {
  padding-bottom: 24px;
}

/* table header and body common */

.portal-body-com .goals-table thead th:first-child,
.portal-body-com .goals-table tbody td:first-child {
  padding-left: 23px;
  background: #F7F9FC;
  border-right:none
}
.portal-body-com .goals-param-label{
  color: var(--textSecondary);
  font-weight: 500;
}

.portal-body-com .goals-table thead th:last-child,
.portal-body-com .goals-table tbody td:last-child {
  border-right:none
}
.portal-body-com .goals-table thead th:nth-child(2),
.portal-body-com .goals-table tbody td:nth-child(2) {
  padding-left: 33px;
}
.portal-body-com .goals-save-wrap{
  border-top:none;
}
.goals-input{
  background-color: white;
  border: 1px solid var(--borderLight);
  border-radius: 3.55px;
  padding: 9px 12px;
  font-size: 16px;
  line-height: 20px;
  color: var(--textSecondary);
  outline:none;
  width: 100%;
}
.portal-body-com .goals-table thead th:not(:first-child){
  min-width: 200px;
}
.portal-body-com .goals-table {
  min-width: auto;
}

.goals-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}

/* responsive */
@media (max-width:1280px){
  .portal-body-com .goals-table thead th:nth-child(2),
.portal-body-com .goals-table tbody td:nth-child(2) {
  padding-left: 15px;
}
}
@media (max-width:767px){
  .portal-body-com .goals-table-wrap {
    margin-top: 20px;
  }
}


/* mobile layout */
@media (max-width:640px){
  .portal-body-com .goals-card .goals-card-header-table {
    padding: 0;
}
   .portal-body-com .goals-table-wrap {
    background-color: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .portal-body-com .goals-card{
 background-color: transparent;
    border: none;
    border-radius: 0;

  }

  /* unwrap the table so th/td become direct flex children of goals-table-wrap */
  .portal-body-com .goals-table,
  .portal-body-com .goals-table thead,
  .portal-body-com .goals-table tbody,
  .portal-body-com .goals-table tr {
    display: contents;
  }

  .portal-body-com .goals-table thead th:first-child,
  .portal-body-com .goals-table tbody td:first-child {
    display: none; /* PARAMETER column — each card shows its own labels instead */
  }

  .portal-body-com .goals-table thead th,
  .portal-body-com .goals-table tbody td:not(:first-child) {
    min-width: 0;
    white-space: normal;
  }

  .portal-body-com .goals-table thead th {
    order: calc(var(--col-index) * 3);
    background: #F7F9FC;
    border: 1px solid #EBE7E7;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 11px 16px;
    text-align: center;
  }
  .portal-body-com .goals-table thead th .date-picker-wrapper {
    width: auto;
    max-width: fit-content;
    margin: 0 auto;
    /* background-color: transparent; */
    /* border:none!important; */
    /* box-shadow: none!important; */
  }
  .portal-body-com .goals-table thead th .date-picker-wrapper .date-picker-chevron{
    /* display:none; */
  }
.portal-body-com .goals-table tbody td{
  border-top: 1px solid #EBE7E7;
}
  .portal-body-com .goals-table tbody td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FCFCFD;
    border-left: 1px solid var(--borderLight);
    border-right: 1px solid var(--borderLight);
    padding: 10px 20px;
  }
  .portal-body-com .goals-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    flex-basis:103px;
    color: var(--textSecondary);
  }
  .portal-body-com .goals-table tbody td:not(:first-child) .goals-input {
    /* max-width: 130px; */
    flex: 1;
    /* text-align: right; */
  }

  .portal-body-com .goals-table tbody tr:first-of-type td:not(:first-child) {
    order: calc(var(--col-index) * 3 + 1);
  }
  .portal-body-com .goals-table tbody tr:last-of-type td:not(:first-child) {
    order: calc(var(--col-index) * 3 + 2);
    border-bottom: 1px solid var(--borderLight);
    border-radius: 0 0 12px 12px;
    padding-bottom: 22px;
    margin-bottom: 16px;
  }
  .portal-body-com .goals-save-wrap {
    padding: 0px 0 0px;
  }
  .portal-body-com .goals-save-wrap .goals-save-btn{
    width: 100%;
    max-width: 100%;
}
}

/* =========================================================
   MERGED FROM new.css — page-specific rules for
   cardio-conditioning-1.php and homework-mom.php
   (shared design-system rules omitted: style.css already defines them)
   ========================================================= */
.page-top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-header-notification {
  background: transparent;
  border: none;
  padding: 6px;
  color: black;
  position: relative;
  cursor: pointer;
  transition: all 0.15s ease;
}
.page-header-notification svg {
  width: 28px;
  height: 28px;
}
.page-header-notification:hover {
  color: var(--textAccent);
}
.header-notification-count {
  position: absolute;
  min-width: 21px;
  min-height: 21px;
  background-color: var(--textAccent);
  border-radius: 50px;
  color: #fff;
  font-size: 10.15px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -4px;
  right: -1px;
  font-variant: tabular-nums;
  text-box-trim: trim-both;
  padding: 5px;
  height: 21px;
}
.page-header-profile-btn {
  background: var(--textAccent);
  width: 51px;
  height: 51px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  line-height: 25px;
  cursor: pointer;
  border: none;
}
@media (max-width: 991px) {
  .page-header-notification {
    padding: 6px;
  }
  .page-header-notification svg {
    width: 24px;
    height: 24px;
  }
  .header-notification-count {
    font-size: 9px;
  }
  .page-header-profile-btn {
    width: 42px;
    height: 42px;
    font-size: 15px;
    line-height: 20px;
  }
}
@media (max-width: 767px) {
  .page-top-actions {
    display: none;
  }
}
.link-card-right {
  display: flex;
  align-items: center;
  justify-content: end;
}
.link-card-view-btn {
  font-size: 16px;
  line-height: 20px;
  padding: 6px 14px;
  border: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 4px;
  color: var(--textSecondary, #212529b2);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.link-card-view-btn svg {
  width: 24px;
  height: 24px;
}
.link-card-view-btn:hover {
  background: var(--sidebarActive);
}
.link-card-view-btn:active {
  background: #ced5e3;
}
@media (max-width: 767px) {
  .link-card-view-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 4px 10px;
    gap: 4px;
  }
  .link-card-view-btn svg {
    width: 20px;
    height: 20px;
  }
}
.white-black-filter-btn:last-child,
.white-black-filter-btn.white-black-btn-border-right-none {
  border-right: none;
}
.dropdown-menu.dropdown-small-variant {
  background: #fefefe;
  border: 1px solid #ebe7e7;
  border-radius: 8px;
  padding: 10px;
  box-shadow: var(--shadow3);
}
.dropdown-menu.dropdown-small-variant li:not(:last-child) {
  margin-bottom: 3px;
}
.dropdown-menu.dropdown-small-variant li a,
.dropdown-menu.dropdown-small-variant li button {
  padding: 8px 10px;
  display: flex;
  border-radius: 6px;
  gap: 10px;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
  transition: all 0.15s ease;
}
.dropdown-menu.dropdown-small-variant li a svg,
.dropdown-menu.dropdown-small-variant li button svg {
  width: 20px;
  height: 20px;
}
.dropdown-menu.dropdown-small-variant li a.active,
.dropdown-menu.dropdown-small-variant li button.active {
  background-color: var(--sidebarActive);
  color: var(--textAccent);
}
.dropdown-menu.dropdown-small-variant li a:hover,
.dropdown-menu.dropdown-small-variant li button:hover {
  background-color: var(--sidebarActive);
}
.dropdown-menu.dropdown-small-variant li a:active,
.dropdown-menu.dropdown-small-variant li button:active {
  background-color: #cdd6ec;
}
.dropdown-menu.dropdown-small-variant li a.delete-link,
.dropdown-menu.dropdown-small-variant li a.active.delete-link,
.dropdown-menu.dropdown-small-variant li button.delete-link,
.dropdown-menu.dropdown-small-variant li button.active.delete-link {
  color: #d54248;
}
.ph-accordion .accordion-item {
  background-color: #fcfcfd;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-sm);
  
  margin-bottom: 2px;
}
.ph-accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.ph-accordion .accordion-button {
  padding: 21px 26px 21px 19px;
  background-color: transparent;
  box-shadow: none;
  color: var(--textSecondary);
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ph-accordion-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ph-accordion-right {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  gap: 17px;
}
.ph-accordion .accordion-button::after {
  content: none;
}
.edit-ph-section-chevron {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.ph-accordion .accordion-button:not(.collapsed) .edit-ph-section-chevron {
  transform: rotate(180deg);
}
.ph-accordion .accordion-body {
  padding: 0 0 16px 0;
}
.ph-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--textAccent);
  font-size: 16px;
  background: #eef0f9;
  border-radius: 8px;
}
.ph-section-icon svg {
  width: 24.5px;
  height: 24.5px;
}
.ph-accordion-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid var(--borderLight);
  background: white;
  border-radius: 4px;
  color: var(--textAccent);
  font-size: 13.57px;
  line-height: 17.44px;
  white-space: nowrap;
  font-weight: 500;
}
.ph-accordion-note svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.ph-accordion-content {
  display: flex;
  flex-direction: column;
  padding: 13px 25px 13px 19px;
  border-top: 1px solid var(--borderLight);
}
.ph-accordion-list {
  padding: 28px;
  background-color: #f4f7fa;
  border: 1px solid #f4f7fa;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--textSecondary);
  width: 100%;
  list-style: none;
}
.ph-accordion-list li {
  position: relative;
  padding-left: 33px;
}
.ph-accordion-list li:not(:last-child) {
  margin-bottom: 9px;
}
.ph-accordion-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12.1 13.1C12.6523 13.1 13.1 12.6523 13.1 12.1C13.1 11.5477 12.6523 11.1 12.1 11.1C11.5477 11.1 11.1 11.5477 11.1 12.1C11.1 12.6523 11.5477 13.1 12.1 13.1Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateY(-50%);
}
.ph-thead {
  display: grid;
  grid-template-columns: 1fr 82px 82px 82px;
  padding: 14px 100px 14px 60px;
  border-bottom: 1px solid var(--borderLight);
  gap: 36px;
}
.ph-thead-cell {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textMuted);
  text-transform: uppercase;
}
.ph-thead-cell + .ph-thead-cell {
  text-align: center;
}
.ph-row {
  display: grid;
  grid-template-columns: 1fr 82px 82px 82px;
  align-items: center;
  padding: 14px 100px 14px 60px;
  border-bottom: 1px solid var(--borderLight);
  gap: 36px;
}
.ph-row:last-child {
  border-bottom: none;
}
.ph-ex-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ph-ex-link {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textAccent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.ph-ex-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}
.ph-clip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--textPrimary);
  flex-shrink: 0;
  transition: color 0.15s ease;
  padding: 0;
}
.ph-clip-btn:hover {
  color: var(--textAccent);
}
.ph-clip-btn svg {
  width: 32px;
  height: 32px;
}
.ph-val-cell {
  font-size: 18px;
  line-height: 25px;
  color: var(--textPrimary);
  padding: 5px 12px;
  display: inline-block;
  font-weight: 500;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  text-align: center;
}
.ph-val-cell.is-empty {
  color: var(--textSecondary);
}
.ph-mob-vals {
  display: none;
  gap: 31px;
}
.ph-mv-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ph-mv-lbl {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--textMuted);
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}
.ph-mv-val {
  font-size: 18px;
  line-height: 25px;
  padding: 5px 10px;
  min-width: 85px;
  display: inline-block;
  text-align: center;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  color: var(--textPrimary);
}
.ph-mv-val.is-empty {
  color: var(--textSecondary);
}
@media (max-width: 1280px) {
  .ph-thead {
    padding: 14px 50px 14px 20px;
    gap: 20px;
  }
  .ph-row {
    padding: 14px 50px 14px 20px;
    gap: 20px;
  }
}
@media (max-width: 991px) {
  .ph-accordion .accordion-button {
    padding: 16px 26px 16px 19px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    gap: 8px;
  }
  .ph-section-icon {
    width: 40px;
    height: 40px;
  }
  .ph-section-icon svg {
    width: 22.5px;
    height: 22.5px;
  }
  .ph-accordion-list {
    padding: 22px;
  }
  .ph-accordion-list {
    font-size: 16px;
    line-height: 20px;
  }
  .ph-accordion-list li {
    padding-left: 30px;
  }
  .ph-accordion-list li:not(:last-child) {
    margin-bottom: 6px;
  }
  .ph-accordion-list li::before {
    width: 22px;
    height: 22px;
  }
  .ph-thead .ph-thead-cell.hide-on-mob {
    display: none;
  }
  .ph-row {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 21px;
    gap: 16px 0;
  }
  .ph-ex-cell {
    flex: 0 0 100%;
  }
  .ph-ex-link {
    font-size: 16px;
    line-height: 20px;
  }
  .ph-clip-btn svg {
    width: 25px;
    height: 25px;
  }
  .ph-row .ph-val-cell {
    display: none;
  }
  .ph-row .ph-mob-vals {
    display: flex;
    justify-content: space-between;
    flex: 0 0 90%;
    flex-wrap: wrap;
  }
  .ph-log-tbl {
    display: none;
  }
  .ph-log-mob {
    display: block;
  }
}
@media (max-width: 767px) {
  .edit-ph-section-chevron {
    width: 22px;
    height: 22px;
  }
  .ph-accordion .accordion-button {
    padding: 13px 20px 13px 14px;
  }
  .ph-accordion-content {
    padding: 13px 20px 13px 14px;
  }
  .ph-accordion-list {
    padding: 16px;
  }
}
@media (max-width: 392px) {
  .ph-mob-vals {
    gap: 10px;
    flex-wrap: wrap;
  }
  .ph-mv-val {
    padding: 5px 8px;
    min-width: 80px;
  }
}
.ph-exercise-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--borderLight);
  border-radius: 8px;
}
.ph-exercise-table {
  width: 100%;
  border-collapse: collapse;
}
.ph-exercise-table thead th {
  padding: 20px 20px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textSecondary);
  text-transform: uppercase;
  text-align: center;
  background-color: #eef0f9;
  border-bottom: 1px solid var(--borderLight);
  white-space: nowrap;
}
.ph-th-no {
  width: 50px;
  padding-left: 20px !important;
  text-align: left;
}
.ph-th-exercise {
  min-width: 280px;
  text-align: left !important;
}
.ph-th-sets,
.ph-th-reps,
.ph-th-rest {
  min-width: 80px;
}
.ph-exercise-table tbody td {
  padding: 15px 20px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  background-color: #fcfcfd;
  color: var(--textSecondary);
  border-bottom: 1px solid var(--borderLight);
  vertical-align: middle;
}
.ph-exercise-table tbody tr:last-child td {
  border-bottom: none;
}
.ph-td-no {
  padding-left: 20px !important;
  color: var(--textAccent) !important;
}
.ph-td-exercise {
  text-align: left;
  color: var(--textAccent) !important;
}
.ph-td-sets {
  text-align: center;
}
.ph-col-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfcfc;
  border: 1px solid #e4e3eb;
  border-radius: 4px;
  padding: 6px 9px;
  max-width: 65px;
  min-width: 60px;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
}
.ph-td-reps {
  text-align: center;
}
.ph-td-rest {
  text-align: center;
}
@media (max-width: 767px) {
  .ph-exercise-table thead th {
    padding: 16px 14px;
    font-size: 16px;
    line-height: 20px;
  }
  .ph-exercise-table tbody td {
    padding: 13px 14px;
    font-size: 16px;
    line-height: 20px;
  }
  .ph-th-no,
  .ph-td-no {
    padding-left: 12px !important;
  }
}
.cc-table-wrap {
  overflow-x: auto;
  margin-bottom: 28px;
      border: 1px solid var(--borderLight);
    border-radius: 8px;
}
.cc-zones-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.cc-zones-table thead {
  
}
.cc-zones-table thead th {
  padding: 21px 20px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--borderLight);
  white-space: nowrap;
  
  background:white;
}
.cc-th-zone {
  width: 60px;
  text-align: left!important;
}
.cc-th-hr {
  min-width: 160px;
  white-space: normal!important;
}
.cc-th-hrr {
  min-width: 100px;
}
.cc-th-rpe {
  min-width: 80px;
}
.cc-th-sets {
  min-width: 80px;  
}
.cc-th-reps {
  min-width: 80px;  
}
.cc-th-rest {
  min-width: 80px;  
}
.cc-zones-table tbody td {
  padding: 12px 20px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--textPrimary);
  background-color: #FCFCFD;
  border-bottom: 1px solid var(--borderLight);
  vertical-align: middle;
}
.cardio-condition-1-page-body .cc-zones-table tbody td {
padding-block: 15px;
}
.cc-zones-table tbody tr:last-child td {
  border-bottom: none;
}
.cc-td-zone {
  width: 120px;
  text-align: left!important;
  color: var(--textSecondary) !important;
  
}
.cc-td-hr {
  
}
.cc-td-hrr {
white-space: nowrap;
}
.cc-col-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfcfc;
  border: 1px solid #e4e3eb;
  border-radius: 4px;
  padding: 6px 9px;
  max-width: 65px;
  min-width: 60px;
  font-size: 14px;
  line-height: 18px;
  color: var(--textSecondary);
}
.cc-weeks-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(410px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(321px, 1fr));
  column-gap: 28px;
  row-gap:20px;
}
.cc-week-card {
  background-color: #FCFCFD;
  border: 1px solid var(--borderLight);
  border-radius: 8px;
  padding-bottom: 10px;
}
.cc-week-header {  
  padding: 20px 25px 15px;
  border-bottom: 1px solid #EBE7E7;
}
.cc-week-title {
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: var(--textPrimary);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}
.cc-week-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cc-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 13px 25px;
  border-bottom: 1px solid var(--borderLight);
}
.cc-info-row:last-child {
  border-bottom: none;
}
.cc-info-label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.cc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24.3px;
  height: 24.3px;
  color: #0000;
  flex-shrink: 0;
}
.cc-info-icon svg {
  width: 100%;
  height: 100%;
}
.cc-info-text {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--textSecondary);
  word-break: break-word;
}
.cc-info-value {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--textPrimary);
  flex: 1;
  min-width: 0;
}
@media (max-width:1280px){
  .cc-weeks-grid {
  column-gap: 12px;
  row-gap:20px;
}
.cc-table-wrap{
  margin-bottom: 20px;
}
.cc-info-row, .cc-week-header{
  padding-inline:15px;
}
.cc-zones-table {
  min-width: 664px;
}
}
@media (max-width: 767px) {
  .cc-table-wrap {
    margin-bottom: 18px;
  }
  .cc-zones-table thead th {
    padding: 16px 10px;
    font-size: 16px;
    line-height: 20px;
}
  .cc-zones-table tbody td {
    padding: 13px 10px;
    font-size: 16px;
    line-height: 20px;
}
  .cc-weeks-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0px;
  row-gap:18px;
}
  .cc-week-header {  
  padding: 16px 16px 14px;
}
  .cc-week-title {
  font-size: 16px;
  line-height: 20px;
}
  .cc-info-row {
  padding: 12px 16px;
}
  .cc-info-label {
  gap: 7px;
}
  .cc-info-icon {
  width: 20px;
  height: 20px;
}
  .cc-info-text, .cc-info-value {
    font-size: 16px;
    line-height: 20px;
  }
  /* .cardio-condition-1-page-body .cc-week-title {
    font-size: 18px;
    line-height: 25px;
  }
  .cardio-condition-1-page-body .cc-info-text, .cardio-condition-1-page-body .cc-info-value {
    font-size: 18px;
    line-height: 24px;
  } */
}
.cc-body-content .ph-accordion-content.excercise-table {
padding: 0;
}
.ph-thead, .ph-row {
  padding-left: 13px;
  padding-right: 13px;
}
.ph-exercise-table thead th {
    font-weight: 400;
    background-color: #FFFFFF;
}
.ph-col-value {
  color: black;
}
@media (min-width:768px) {
  .cc-body-content .ph-accordion-content {
  padding: 13px 28px 13px 28px;
}
  .cc-body-content .ph-accordion .accordion-button {
padding: 21px 26px 21px 28px;
}
  .ph-thead, .ph-row {
  padding-left: 28px;
  padding-right: 28px;
}
  .hide-on-desktop {
  display: none;
}
}
.cc-zones-table tbody .cc-td-zone, .cc-zones-table tbody .cc-td-rpe{
white-space: nowrap;
}
@media (max-width: 767px) {
  .ph-accordion .accordion-button {
        padding: 10.5px 13px 10.5px 13px;
        font-size: 14px;
        line-height: 18px;
    }
  .cc-zones-table thead th {
    padding: 8px 8px;
    font-size: 16px;
    line-height: 20px;    
    
    white-space: nowrap;
    background: transparent;
}
  .cc-table-wrap {
    margin-bottom: 5px;
    
}
  .cc-zones-table tbody td {
  width: fit-content;
  border-bottom: none;
}

  .cc-zones-table {    
    min-width: auto;
}
  .cc-weeks-grid {
    row-gap: 5px;
}
  .cc-body-content .ph-accordion-content.excercise-table {
  padding: 13px 20px 13px 14px;
}
  .ph-table-container {
    border: 1px solid #EBE7E7;
    border-radius: 8px;
    overflow: hidden;
}
  .ph-thead {
  background-color: white;;
}
  .ph-thead-cell {
    font-size: 14px;
    line-height: 18px;
}
  .ph-row {
    gap: 10px 0;
    padding-top: 13px;
    padding-bottom: 13px;
}
  .hide-on-mobile {
  display: none;
}
}
@media (max-width: 640px) {
  .ph-mv-lbl {
    font-size: 14px;
    line-height: 18px;
    min-width: 80px;
}
  .ph-mv-val {
    font-size: 13.2px;
    line-height: 16.97px;
    padding: 5px 10px;
    min-width: 80px;
}
  .ph-row .ph-mob-vals {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 0 100%;
}
}
@media (min-width:991px) and (max-width: 1280px) {
    .cardio-condition-1-page-body .cc-zones-table {
        min-width: 548px;
    }
}

/* =========================================================
   DESIGNER OVERRIDE LAYER (added) — supports the new-design markup
   (date pickers, training-program link-card buttons, baseline/goal
   date pills, homework weight cells, etc.). Intentionally appended
   last so its rules win where designed.
   ========================================================= */

/* ======================= dashboadf page ======================= */
.score-label a {
    font-size: 16px;
    line-height: 20px;
}
@media (max-width: 767px) {
    .score-label a {
    font-size: 14px;
    line-height: 18px;
}
}
@media (max-width: 600px) {
    .score-label a {
    font-size: 12px;
    line-height: 1.25;
}
}

@media (min-width: 992px) {
    .action-bar-desktop, .action-bar.d-none.d-xl-flex {
        display: flex!important;
    }
}




/* ======================= profile page ======================= */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    background-color: var(--body)!important;
    color: var(--textPrimary)!important;
    font-size: 16px!important;
    line-height: 20px!important;
    font-weight: var(--fw-regular)!important;
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
    padding: 63px 48px!important;
    min-height: auto!important;
}
@media (max-width: 991px) {
    body {
        padding: 0px !important;
        padding-bottom: 80px !important;
    }
}
@media (max-width: 767px) {
    body {
        padding-bottom: 74px !important;
        /* See the note on the base mobile rule: svh keeps the page height
           stable while the mobile URL bar collapses; dvh made it change on
           every scroll frame (flicker). */
        min-height: 100vh !important;
        min-height: 100svh !important;
        position: relative;
    }
}


.log-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 24px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  border-right: 1.23px solid #c9ccd3;
  background-color: var(--iconBackground);
  color: var(--textSecondary);
}


.log-btn svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
  flex-shrink: 0;
}
.log-btn:last-child svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

@media (max-width: 767px) {
   .log-row {
      gap: 7px;
    }
  .log-btn {
    height: 38px;
    min-width: 36px;
    padding: 0 17px;
  }

  .log-btn i {
    font-size: 14px;
  }
  }
.log-row{
  container:log-row-container/inline-size;
}
@media (min-width:768px){ 
  @container log-row-container (max-width: 402px) {
    .log-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 17px;
    }
  }
}

  @container log-row-container (max-width: 350px) {
   .log-btn {
    height: 35px;
    min-width: 30px;
    padding: 0 15px;
}
.log-row-label {
    font-size: 15.8px;
    line-height: 18px;
}
.log-btn svg {
    width: 19px;
    height: 19px;
}
.log-btn:last-child svg {
    width: 15px;
    height: 15px;
}
  }

  @container log-row-container (max-width: 320px) {
   .log-btn {
    height: 36px;
    min-width: 26px;
    padding: 0 13.3px;
}
.log-row-label {
    font-size: 15.8px;
    line-height:  18px;
}
.log-btn svg {
    width: 17px;
    height: 17px;
}
.log-btn:last-child svg {
    width: 14px;
    height: 14px;
}
.log-row-label {
    flex-basis:115px;
}
.log-row-controls, .log-btn{
  flex:1;
}

/* Keep the control at 25% */
.log-btn {
    min-width: 0;
}
.log-row-controls{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
}
/* Single button: keep the control at 25% and center the + */
.log-row-controls:has(.log-btn:only-child) {
    border:none;    
}

.log-row-controls:has(.log-btn:only-child) .log-btn {
    border: 1.23px solid #c9ccd3;
    border-radius: var(--radius-sm);
    grid-column:4
}
  }

@media (max-width: 350px) {
   .log-row {
      gap: 2px;
    }
  .log-row-label {
    font-size: 15px;
    gap:7px;
}
.log-btn {
    height: 35px;
    padding: 0 11px;
}
.log-btn svg {
    width: 16px;
    height: 16px;
}
.log-btn:last-child svg {
    width: 12.8px;
    height: 12.8px;
}
.log-row-label {
    flex-basis: 108px;
}


}




  /* ======================= Training page ======================= */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;
    background-color: var(--body)!important;
    color: var(--textPrimary)!important;
    font-size: 16px!important;
    line-height: 20px!important;
    font-weight: var(--fw-regular)!important;
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
    padding: 63px 48px!important;
    min-height: auto!important;
}
@media (max-width: 991px) {
    body {
        padding: 0px !important;
        min-height: 100dvh !important;
        padding-bottom: 80px !important;
    }
    /* for;layout fix */
    body {
        display: flex;
        flex-direction: column;  min-height: 100vh!important;   
    }
    .app-layout {
        flex: 1;                    
    }
}
@media (max-width: 767px) {
    body {
        padding-bottom: 74px !important;
        /* See the note on the base mobile rule: svh keeps the page height
           stable while the mobile URL bar collapses; dvh made it change on
           every scroll frame (flicker). */
        min-height: 100vh !important;
        min-height: 100svh !important;
        position: relative;
    }
}
@media (max-width: 767px) {
    .body-content {
        padding: 30px 12px 20px;
    }
    .page-header {
        padding: 20px 12px 26px;
    }
}
@media (max-width: 991px) {
    /* The bottom-nav reserve (body padding-bottom) must stay CONSTANT while the
       nav auto-hides. Dropping it to 0 shrank the document by 74px mid-scroll;
       the browser then clamped scrollTop, that clamp fired a "scrolled up"
       scroll event, the nav came back, the padding returned — an oscillation
       that read as flicker, and as a jump when an accordion collapsed. The nav
       is position:fixed, so keeping the reserve costs nothing but empty space
       below the last element while it is hidden. */
    /* add border for the layout fliker */
     body:has(nav.nav-hidden) {
        padding-bottom: 0px !important;
    }
    body{
      border:1px solid transparent;
      /* border:10px solid red; */
    }
 
}
/* bcz the body has the border  */
.lightboxOverlay {
    inset: 0!important;
    position: fixed!important;
}
/* @media (max-width: 991px) {
    .app-layout {
        overflow: visible;
    }
    .main-content {
        overflow-y: visible;
    }
} */



/* ======================= Body Composition, Circumference Measurements, Blood Pressure page ======================= */

.chart-inner-body{
  container: chart-inner-body/inline-size;
}

/* Date picker wrapper in profile */
.acc-chart-date-wrap {
  position: relative;
  width: 100%;
}
.acc-chart-date-wrap .acc-chart-date-picker-wrapper {
  padding-right: 45px;
  display: flex;
  align-items: center;
}
.acc-chart-date-wrap .acc-chart-date-picker-icon svg {
  width: 20px;
  height: 22px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.acc-chart-date-wrap #dobDisplay {
  color: var(--textPrimary); /* black when date selected */
}

.acc-chart-date-wrap #dobDisplay.placeholder-color {
  color: #21252980;
}


.acc-chart-date-picker-wrapper {
  width: 100%;
  height: 47px;
  padding: 13px 41px 13px 15px;
  background-color: white;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  font-size: 16px;
    line-height: 19px;
  color: var(--textSecondary);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.acc-chart-date-picker-wrapper {
  padding-right: 45px;
  display: flex;
  align-items: center;
}

.acc-chart-date-picker-wrapper:has(.acc-chart-date-picker-input:focus) {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.acc-chart-date-picker-input,
#accChartdobInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 2;
}
@container chart-inner-body (max-width: 545px) {
  .pg-range-picker{
    margin-bottom: 18px;
        display: grid;
    grid-template-columns: 140px 1fr;
  }
 .pg-range-label {
    padding: 16px 10px 16px 20px;
}
.pg-range-input {
    padding: 11px 20px;
}
.pg-range-picker .white-black-filter-btn {
 grid-column: -1 / 1;
 padding: 13px 14px;
}
.pg-range-picker > *:nth-child(-n+2) {
  border-bottom: 1px solid #e8eaed;
}
}
@media (max-width: 767px) {
    .chart-inner-body .white-black-filter-tabs {
        margin-bottom: 20px;
    }
}

.pg-range-picker {
    min-height: 40px;
}

.acc-chart-date-wrap .date-display {
    color: var(--textPrimary);
}

.acc-chart-date-wrap .date-display.placeholder-color {
    color: #21252980;
}

.pg-range-input .date-display{
  font-size: 13px;
  line-height: 100%;
}
.pg-range-input .acc-chart-date-picker-icon svg {
    width: 18px;
    height: 20px;
    right: 10px;
}
.acc-chart-date-picker-wrapper.pg-range-input {
    background: white;
    border: none;
    border-right: 1px solid #e8eaed;
    padding: 11px 14px;
    padding-right:40px;
    height: 100%;
    border-radius: 0;
}
.pg-range-picker .acc-chart-date-wrap{
width: auto;
}
.pg-range-picker .acc-chart-date-picker-wrapper:has(.acc-chart-date-picker-input:focus) {
    outline: none;
     border-color: transparent;
    box-shadow: none;
}
@media (max-width: 767px) {
    .pg-range-picker .acc-chart-date-wrap{
        flex: 1 1 auto;
    }
}


.progress-graph-meta{
  font-size: 16px;
  line-height: 20px;
}
.progress-graph-meta >*:not(:last-child){
  margin-bottom: 5px;
}




/* ================================== accountability page ================================ */
.acc-chart-field-wrapper #log_from_date_picker{
    height:50px;
}
.accountability-page .res-training-body .attach-docs-card:first-child{
  margin-top: 0;
}
@media (max-width:1200px){
    .homework-1-body .attach-docs-card{
        padding:0;
        margin:0;
        border-radius: 0;
        background:transparent;
    }
    .accountability-page .attach-docs-accordion .accordion-item{
      border:none;
      border-radius:16px;
    }
    .accountability-page .acc-chart-header {
    font-size: 18px;
    line-height: 25px;
}
    .acc-chart-preview-btn {
    padding: 14px 15px;
}
    .acc-chart-fields{
        align-items:flex-end;
        margin-top:60px;
    }
    .acc-chart-date-fields-wrapper {
    flex: 1 1 200px;
}
}
@media (max-width:767px){
     .acc-chart-fields{
        margin-top:25px;
    }
    .acc-chart-label{
font-size:14px;
    line-height:18px;
        }
    .attach-docs-accordion .accordion-button {
    padding: 12px 16px 12px 16px;
        font-size:16px;
        line-height:20px;
}
    .attach-section-icon {
    width: 38px;
    height: 38px;
}
    .attach-section-icon svg {
    width: 22px;
    height: 22px;
}
    .acc-chart-scroll-arrow {
    width: 35px;
    height: 35px;
}
    .accountability-page .attach-docs-accordion .accordion-item{     
      border-radius:12px;
    }
    .accountability-page .acc-chart-header {
            font-size: 16px;
        line-height: 20px;
}
.acc-chart-body {
    padding: 12px 20px 20px 14px;
}
}

.acc-chart-date-wrap {
  position: relative;
  width: 100%;
}
.acc-chart-date-wrap .acc-chart-date-picker-wrapper {
  padding-right: 45px;
  display: flex;
  align-items: center;
}
.acc-chart-date-wrap .acc-chart-date-picker-icon svg {
  width: 20px;
  height: 22px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.acc-chart-date-wrap #dobDisplay {
  color: var(--textPrimary); /* black when date selected */
}

.acc-chart-date-wrap #dobDisplay.placeholder-color {
  color: #21252980;
}


.acc-chart-date-picker-wrapper {
  width: 100%;
  height: 47px;
  padding: 13px 41px 13px 15px;
  background-color: white;
  border: 1px solid var(--borderLight);
  border-radius: 4px;
  font-size: 16px;
    line-height: 19px;
  color: var(--textSecondary);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.acc-chart-date-picker-wrapper {
  padding-right: 45px;
  display: flex;
  align-items: center;
}

.acc-chart-date-picker-wrapper:has(.acc-chart-date-picker-input:focus) {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.acc-chart-date-picker-input,
#accChartdobInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  z-index: 2;
}

/* ================================= cardio reservation page ================================ */

.cr-admin-bar {
    background-color: #fcfcfd;
    border: 1px solid #E4E3EB;
    padding: 20px 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    container:cr-admin-bar / inline-size;
}
.cr-admin-label {
    font-size: 18px;
    line-height: 24px;
    color: #000;
    font-weight: 700;
}
.cr-admin-bar label {
    font-size: 16px!important;
    margin-bottom: 0!important;
    line-height: 20px!important;
    color: #212529b2!important;
}
.cr-admin-select {
    width: 100%;
    height: 50px;
    padding: 13px 20px;
    padding-right: 45px;
    background-color: var(--inputBackground, #fcfcfc);
    border: 1px solid var(--inputBorder, #e4e3eb);
    border-radius: var(--radius-sm, 8px);
    font-size: 16px;
    line-height: 20px;
    color: var(--textPrimary, #000000);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%236B7280' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    cursor: pointer;
    transition: border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cr-admin-select option {
  color: var(--textPrimary, #000000);
}
.cr-admin-select:has(option[value=""]:checked) {
  color: var(--textSecondary, #212529b2);
}

.cr-admin-select:focus {
  outline: none;
  border-color: var(--accent, #5a83d3);
  box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.cr-admin-bar form {
    display: flex!important;
    align-items: center;
    gap: 10px;
}
@container cr-admin-bar (max-width: 375px) {
    .cr-admin-bar form {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10px;
}
}
@media (max-width: 767px) {
    .cr-admin-bar {
    padding: 17px 20px;
    gap: 9px;
    }
    .cr-admin-select {
    padding: 13px 14px;
    padding-right: 37px;
    background-position: right 8px center;
}
}



.cr-my-res-panel {
    background-color: #fcfcfd;
    border: 1px solid #E4E3EB;
    padding: 24px 28px;
    border-radius: 8px;
}
.cr-my-res-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
}
.cr-my-res-title {
  font-size: 25px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--textPrimary, #000000);
  margin: 0 0 4px 0;
    padding: 0;
    background: transparent;
    text-align: left;
}
.cr-my-res-head p{
    font-size: 14px!important;
    line-height: 18px;
    font-weight: 400;
    color: var(--textSecondary, #212529b2)!important;
}
.cr-my-res-empty{
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #7c7c7c;
}
@media (max-width: 767px) {
    .cr-my-res-panel {
    padding: 24px 22px;
    }

  .cr-my-res-title {
    font-size: 25px;
    line-height: 25px;
  }

.cr-my-res-head p{

    font-size: 14px!important;
    line-height: 18px;

}

}

.cr-equip-info-wrap button.cr-admin-clear {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px;
    background-color: var(--btnSecondaryBg, #f4f7fa);
    border: 1px solid #dee1e7;
    border-radius: var(--radius-xs, 4px);
    font-size: 14px;
    line-height: 18px;
    font-weight: var(--fw-medium, 500);
    color: var(--textSecondary, #212529b2);
    cursor: pointer;
    transition: color 0.15s ease;
    text-decoration: none;

}
@media (min-width: 768px) {
.cr-equip-info-wrap form:has(.cr-admin-clear) {
    margin-inline: auto!important;
    width:fit-content;
}
}
.cr-equip-info-wrap form:has(.cr-admin-clear) {
    margin-top:20px!important;
}


.cr-section-head{
    margin-top: 20px;
}
.cr-equip-list{
    gap: 0px;
}

@media (min-width: 768px) {
    .cr-equip-card{
        flex-direction: row;
    }
}





/* ========================================================= food jourenal history */
.journal-body{
    container: journal-body-container/inline-size
}

@container journal-body-container (max-width: 545px) {
  .pg-range-picker{
    margin-bottom: 18px;
        display: grid;
    grid-template-columns: 140px 1fr;
  }
 .pg-range-label {
    padding: 16px 10px 16px 20px;
}
.pg-range-input {
    padding: 11px 20px;
}
.pg-range-picker .white-black-filter-btn {
 grid-column: -1 / 1;
 padding: 13px 14px;
}
.pg-range-picker > *:nth-child(-n+2) {
  border-bottom: 1px solid #e8eaed;
}
}
@media (max-width: 767px) {
    .journal-body-container .white-black-filter-tabs {
        margin-bottom: 20px;
    }
}

.pg-range-picker {
    min-height: 40px;
}

.acc-chart-date-wrap .date-display {
    color: var(--textPrimary);
}

.acc-chart-date-wrap .date-display.placeholder-color {
    color: #21252980;
}

.pg-range-input .date-display{
  font-size: 13px;
  line-height: 100%;
}
.pg-range-input .acc-chart-date-picker-icon svg {
    width: 18px;
    height: 20px;
    right: 10px;
}
.acc-chart-date-picker-wrapper.pg-range-input {
    background: white;
    border: none;
    border-right: 1px solid #e8eaed;
    padding: 11px 14px;
    padding-right:40px;
    height: 100%;
    border-radius: 0;
}
.pg-range-picker .acc-chart-date-wrap{
width: auto;
}
.pg-range-picker .acc-chart-date-picker-wrapper:has(.acc-chart-date-picker-input:focus) {
    outline: none;
     border-color: transparent;
    box-shadow: none;
}
@media (max-width: 767px) {
    .pg-range-picker .acc-chart-date-wrap{
        flex: 1 1 auto;
    }
}


@media (max-width: 767px) {
.journal-table tbody td{
    font-size:14px;
    line-height:18px;
}
.journal-table .journal-meal-link{
  font-size: 16px;
  line-height: 20px;
}
}




/* ========================================================= training program details */
.link-card-view-btn{
    text-decoration: none!important;
}



/* ========================================================= baseline details */


.body-comp-table-date {
    position: relative;
  width:100%;
    display: inline-flex;
    align-items: center;
    background-color: var(--card);
    border: 1px solid var(--cardBorder);
    border-radius: var(--radius-xs);
  padding: 8px;
  gap:6px;
    transition: all 0.2s ease;
    user-select: none;
    overflow: hidden;
}
.body-comp-table-date svg {
    width: 20px;
    height: 20px;
}
.body-comp-value {
  display:flex;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borderLight);
  border-radius: var(--radius-xs);
  background-color: white;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--textSecondary);
  outline: none;
  transition: border-color 0.15s ease;
}

.body-comp-input-pair {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  gap: 2px;
}
.body-comp-input-pair .body-comp-input {
  flex: 1;
}

  .body-comp-table tbody td {
  padding: 8px 14px;
  }

.body-comp-table tbody tr:first-child td {
  padding-top: 16px;
}
.body-comp-table tbody tr:last-child td {
  padding-bottom: 16px;
}

@media (max-width: 767px) {
  .body-comp-value {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 18px;
  }
  .body-comp-table tbody td {
    padding: 6px 14px;
  }

  .body-comp-table tbody tr:first-child td {
    padding-top: 14px;
  }
  .body-comp-table tbody tr:last-child td {
    padding-bottom: 14px;
  }
}





/* ========================================================= goal details */

.body-comp-table-date {
    position: relative;
    display: inline-flex;
    align-items: center;
        width: 100%;
    background-color: white;
    border: 1px solid var(--cardBorder);
    border-radius: var(--radius-xs);
    transition: all 0.2s ease;
    user-select: none;
    overflow: hidden;
        gap: 6px;
    padding: 8px;
    flex: 1;
}
.body-comp-table-date svg {
    width: 20px;
    height: 20px;
}



/* =========================================================homework momn */

.ph-accordion .accordion-item:has(.accordion-button[aria-expanded="true"]){
    background:#FAFAFB!important;
}
.homework-mom-page-body .ph-accordion-content{
    padding:0;
}
.homework-mom-page-body .ph-accordion-left{
  word-break: break-word;
}
.homework-mom-page-body .ph-notes-panel {
    border-top: 1px solid var(--borderLight);
}
.ph-exercise-table-wrap {
    overflow-x: auto;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}
.ph-td-weight input[type="text"]{
        display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfcfc;
    border: 1px solid #e4e3eb;
    border-radius: 4px;
    padding: 6px 9px;
    max-width: 85px;
    min-width: 60px;
    font-size: 14px;
    line-height: 18px;
    color: black;
    margin-inline:auto;
    outline:none;
}
.ph-td-weight input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(90, 131, 211, 0.1);
}
.ph-accordion .accordion-body {
    padding: 0 0 10px 0;
}
.homework-mom-page-body .ph-exercise-table thead th:first-child,
.homework-mom-page-body .ph-exercise-table tbody td:first-child{
padding-left: 36px;
}
.homework-mom-page-body .ph-exercise-table thead th:last-child,
.homework-mom-page-body .ph-exercise-table tbody td:last-child {
padding-right: 36px;
}
@media (max-width: 767px) {
    .ph-table-container {
    border: none;
    border-radius: 0;
    overflow: hidden;
}
    .ph-mv-item.ph-mv-weight input[type="text"] {
    font-size: 18px;
    line-height: 25px;
    padding: 5px 10px;
    min-width: 85px;
    display: inline-block;
    text-align: center;
    border: 1px solid var(--borderLight);
    border-radius: 4px;
    color: var(--textPrimary);
        background:#FCFCFC;
        width:50px;
}
}
@media (max-width: 640px) {
    .ph-mv-item.ph-mv-weight input[type="text"] {
        font-size: 13.2px;
        line-height: 16.97px;
        padding: 5px 10px;
        min-width: 80px;
    }
}

@media (min-width:768px){
  .homework-mom-page-body .ph-accordion-content{ 
    border-top:none;
}
.homework-details-error-handle{
    border-top: 1px solid var(--borderLight);
}
}
.homework-details-error-handle{
      padding: 21px 26px 21px 19px;
}


@media (max-width: 991px) {
    .homework-mom-page-body .ph-accordion .accordion-button {
        padding: 21px 26px 21px 19px;
    }
}

.homework-mom-page-body .accordion-item {
    container: homework-acc-container / inline-size;
}
@container homework-acc-container (max-width:323px){
    .homework-mom-page-body .ph-accordion .accordion-button {
    padding: 21px 16px 21px 16px;
        font-size: 16px;
        line-height: 20px;
        gap:4px;
}
    .homework-mom-page-body .ph-accordion-right {
    gap: 10px;
}
}


/* ========================================================= weekly_schedule_view.php */
.slot-label {
    font-weight:400;
}





/* ========================================================= cardio conditioning 1 */
.cc-week-title {
    color: #64676A;
}
.cardio-condition-1-page-body .ph-accordion .accordion-button{
padding: 24px 19px 24px 19px;
}
@media (max-width: 991px) {
    .ph-accordion .accordion-button {
        padding: 24px 19px 24px 19px;
        font-size:18px;
        line-height:25px;
    }
}
@media (max-width: 767px) {
    .ph-accordion .accordion-button {
        padding: 24px 14px 24px 14px;
        font-size:18px;
        line-height:25px;
    }
}
@media (max-width: 600px) {
.cardio-condition-1-page-body .ph-accordion-content {
    padding: 0;
    border: 0;
}

.cardio-condition-1-page-body .cc-table-wrap {
    /* border: none; */
    border-top:0;
    border-radius: 0;
    border-bottom-left-radius:var(--radius-sm);
    border-bottom-right-radius:var(--radius-sm);
    margin-bottom: 0;
}

.cardio-condition-1-page-body .cc-zones-table thead th {
    background: #FCFCFD;
    color: #64676A;
    border: none;
    font-weight: 400;
    padding-top: 16px;
    padding-inline: 2px;
}

.cardio-condition-1-page-body .cc-zones-table thead th:first-child,
.cardio-condition-1-page-body .cc-zones-table tbody td:first-child {
    padding-left: 13px;
}

.cardio-condition-1-page-body .accordion-item {
    background: transparent!important;
    overflow:hidden;
    border:none!important;
    
}
.cardio-condition-1-page-body .ph-accordion .accordion-button{
    background-color: #fcfcfd;
    border:1px solid var(--borderLight);
    /* border-bottom:0; */
    border-radius:var(--radius-sm)!important;
}
.cardio-condition-1-page-body .ph-accordion .accordion-button[aria-expanded="true"]{
    background: #FAFAFB!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
}
.cardio-condition-1-page-body .ph-accordion .accordion-item:has(.accordion-button[aria-expanded="true"]){
background:transparent!important;
}
.cardio-condition-1-page-body .cc-weeks-grid{
    gap:0;
}

.cardio-condition-1-page-body .cc-th-hrr {
    min-width: auto;
}
.cardio-condition-1-page-body .cc-th-rpe {
    min-width: auto;
}
.cardio-condition-1-page-body .cc-zones-table tbody td {
    padding-inline: 2px;
}
.cardio-condition-1-page-body .cc-zones-table thead th:last-child, .cardio-condition-1-page-body .cc-zones-table tbody td:last-child {
    padding-right: 10px;
}
.cardio-condition-1-page-body .ph-accordion-content.excercise-table {
    padding: 0!important;
    border: 0;
}

.cardio-condition-1-page-body .ph-table-container {
    border-top: 0;
    border-radius: 0;
    background: #FCFCFC;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.cardio-condition-1-page-body .ph-thead-cell {
    font-size: 16px;
    line-height: 20px;
}
}


.link-card-stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.link-card{
  position:relative;
}
.link-card-right a{
    position: relative;
    z-index: 2;
}

.body-comp-input-pair .body-comp-value {
    flex: 1;
}
.input-divider {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--textSecondary);
    white-space: nowrap;
}
@media (max-width: 767px) {
    .input-divider {
        font-size: 14px;
        line-height: 18px;
    }
}

.cardio-condition-1-page-body .cc-zones-table thead th {
    vertical-align: baseline;
}
@media (max-width:767px){
    .cardio-condition-1-page-body .cc-zones-table thead th.cc-th-hr {
        white-space: normal!important;
    min-width: auto;
}
}
@media (max-width:350px){
   .cardio-condition-1-page-body .cc-zones-table thead th {
    
    font-size: 15px;
    line-height: 18px;
}
 .cardio-condition-1-page-body .cc-zones-table tbody td {    
    font-size: 15px;
    line-height: 18px;
}
 .cardio-condition-1-page-body .cc-zones-table thead th {   
    padding-inline: 4px;
}
 .cardio-condition-1-page-body .cc-zones-table tbody td {
    padding-inline: 4px;
}
}

/* ========================================================= food journal history */
.food-journal-history-page .lb-outerContainer,
.food-journal-history-page .lb-image {
    max-height: 90vh !important;
}

.food-journal-history-page .lb-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-journal-history-page .lightbox {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.food-journal-history-page #lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.food-journal-history-page .white-black-filter-tabs, .chart-inner-body .white-black-filter-tabs{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: fit-content;
  /* Dragging past either end used to rubber-band and expose the empty track
     behind the pills. This was `contain`, which does NOT fix that: `contain`
     only stops the scroll CHAINING to an ancestor, and explicitly keeps the
     element's own elastic bounce. `none` is the value that suppresses the local
     bounce as well, so the strip stops dead at its first and last pill.

     That difference is why the report was "fine on Android, wrong on iPhone and
     web": Android draws a glow at the limit and has nothing to expose, while
     iOS Safari and desktop (trackpad) draw a true elastic overscroll and drag
     the content away from the edge, showing the rail behind it.

     Axis-scoped on purpose. The shorthand would also govern the Y axis, and on
     a strip that cannot scroll vertically that turns it into a dead end which
     swallows an upward swipe instead of passing it to the page. */
  overscroll-behavior-x: none;
  /* Make the lateral scroll glide instead of feeling sticky. The pills are
     <a> links, so without a touch-action hint the browser waits each drag to
     decide "tap the link or pan?", which adds the sticky hesitation before the
     strip moves. `pan-x` commits it to horizontal panning immediately. We also
     stop the drag from being captured as a text-selection or a link drag, and
     drop the tap-highlight flash. (pan-x means a vertical swipe started ON this
     thin strip won't scroll the page — the page is scrolled from the content
     area below it, so that trade is fine here.) */
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.food-journal-history-page .white-black-filter-btn {
  -webkit-user-drag: none;
  user-select: none;
}

.food-journal-history-page .white-black-filter-tabs::-webkit-scrollbar,
.chart-inner-body .white-black-filter-tabs::-webkit-scrollbar
 {
  display: none;
  height: 0;
}

.food-journal-history-page .white-black-filter-btn,  .chart-inner-body .white-black-filter-tabs {
  white-space: nowrap;
  flex: 0 0 auto;
}

.food-journal-history-page .calendar-wrapper,  .chart-inner-body .white-black-filter-tabs .calendar-wrapper{
  flex: 0 0 auto;
  overflow: hidden!important;
}
.chart-filter-wrapper{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap:4px;
  width:100%;
  min-width:0;  
}
.chart-filter-wrapper > .white-black-filter-tabs{
  width: 100%;
}
@media (min-width:768px){
.journal-body .journal-table thead th:first-child,
.journal-body .journal-table tbody td:first-child{
  padding-left: 26px;
}
.journal-body .journal-table thead th:last-child,
.journal-body .journal-table tbody td:lastt-child{
  padding-right: 26px;
}
}
@media (min-width:1281px){
.journal-body .journal-table thead th:first-child,
.journal-body .journal-table tbody td:first-child{
  padding-left: 54px;
}
.journal-body .journal-table thead th:last-child,
.journal-body .journal-table tbody td:lastt-child{
  padding-right: 54px;
}
}


/* ========================================================= global back arrow */

.global-back-arrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;    
    outline: none;
    color: var(--textSecondary);
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 10px;
}
.global-back-arrow svg{
    width: 20px;
    height: 20px;
}
@media (max-width:767px){
  .global-back-arrow {
    gap: 6px;
    font-size: 15px;
    line-height: 18px;
}
.global-back-arrow svg {
    width: 18px;
    height: 18px;
}
}
@media (pointer: fine) and (hover: hover) {
.global-back-arrow:hover{    
    color: var(--textPrimary);
    opacity: 0.8;
}
}
.global-back-arrow:active{
    color: var(--textPrimary);
}
/* ========================================================= global calendar component */
.pcal-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 20000;
    display: none;
}
.pcal-backdrop.pcal-open { display: block; }

.pcal {
    position: fixed;
    z-index: 20001;
    display: none;
    width: 300px;
    max-width: calc(100vw - 16px);
    background: var(--card, #fff);
    border: 1px solid var(--cardBorder, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    padding: 12px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
.pcal.pcal-open { display: block; }

.pcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
/* The title is the month/year-selector toggle.
   OVERLAP FIX: the header is a flex row, the nav buttons never shrink
   (flex: 0 0 34px) and the title is the only flexible track — but a flex item's
   default `min-width: auto` refuses to shrink below its content, so a long
   month name ("September 2026") pushed the title over the arrows. `min-width: 0`
   lets it shrink and the ellipsis take over, so the three controls can never
   overlap at any width, for any month name. */
.pcal-title {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0 4px;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--textPrimary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcal-title .pcal-caret { flex: 0 0 16px; }
.pcal-nav {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borderLight, #e5e7eb);
    border-radius: 8px;
    background: transparent;
    color: var(--textSecondary, #6b7280);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}
.pcal-nav:active { background: var(--sidebarActive, #eef2ff); }
@media (pointer: fine) and (hover: hover) {
    .pcal-nav:hover { background: var(--sidebarActive, #eef2ff); color: var(--textAccent, #4c78ce); }
}

.pcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.pcal-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--textSecondary, #9ca3af);
    padding: 4px 0;
}
/* Week-start accent: Sunday on general calendars (the visual first column).
   Accountability (opt-in .pcal-mon-halo) keeps Monday as its accent instead. */
.pcal-weekdays .pcal-wd-sun { color: var(--textAccent, #4c78ce); }
.pcal.pcal-mon-halo .pcal-weekdays .pcal-wd-sun { color: var(--textSecondary, #9ca3af); }
.pcal.pcal-mon-halo .pcal-weekdays .pcal-wd-mon { color: var(--textAccent, #4c78ce); }

.pcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.pcal-day {
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--textPrimary, #111827);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.pcal-day--muted { color: var(--textSecondary, #c4c8ce); opacity: 0.55; }
/* Sunday carries the blue week-start accent by default. Monday stays plain here
   and only turns blue (plus the halo below) in accountability's .pcal-mon-halo. */
.pcal-day--sun { color: var(--textAccent, #4c78ce); font-weight: 500; }
.pcal.pcal-mon-halo .pcal-day--sun:not(.pcal-day--selected) { color: var(--textPrimary, #111827); font-weight: 400; }
.pcal.pcal-mon-halo .pcal-day--mon:not(.pcal-day--selected) { color: var(--textAccent, #4c78ce); font-weight: 500; }
.pcal-day--today { box-shadow: inset 0 0 0 1.5px var(--textAccent, #4c78ce); }
.pcal-day--selected,
.pcal-day--selected.pcal-day--mon,
.pcal-day--selected.pcal-day--sun {
    background: var(--textAccent, #4c78ce);
    color: #fff;
    font-weight: 500;
}
.pcal-day--disabled { opacity: 0.3; cursor: default; }

/* ── Monday blue halo (opt-in via data-pcal-mondays="halo") ───────────────
   Marks the start of each Monday–Sunday accountability week. Purely visual:
   cells stay clickable, and a selected Monday keeps its solid fill while the
   halo becomes an inner white ring so both states read clearly at once. */
.pcal.pcal-mon-halo .pcal-day--mon:not(.pcal-day--selected) {
    box-shadow: inset 0 0 0 1px var(--textAccent, #4c78ce);
    background: rgba(76, 120, 206, 0.10);
}
.pcal.pcal-mon-halo .pcal-day--mon.pcal-day--selected {
    /* box-shadow: inset 0 0 0 2px #fff; */
}
@media (pointer: fine) and (hover: hover) {
    .pcal-day:not(.pcal-day--disabled):not(.pcal-day--selected):hover {
        background: var(--sidebarActive, #eef2ff);
    }
}
.pcal-day:not(.pcal-day--disabled):not(.pcal-day--selected):active {
    background: var(--sidebarActive, #eef2ff);
}

/* ── Month / year selector (client reference design) ─────────────────────
   Shown in place of the day grid; the month arrows stay usable underneath it
   only when it is closed, so the two never compete for the same space. */
.pcal-my { display: none; }
.pcal.pcal-my-open .pcal-weekdays,
.pcal.pcal-my-open .pcal-grid { display: none; }
.pcal.pcal-my-open .pcal-my { display: block; }
.pcal.pcal-my-open .pcal-nav { visibility: hidden; }

/* Tall enough to show the open year's month grid plus the next four years
   without scrolling (reference design); earlier years remain scrollable above. */
.pcal-my-years {
    max-height: 364px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pcal-my-year + .pcal-my-year { border-top: 1px solid var(--borderLight, #eef0f3); }
.pcal-my-year-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 10px 4px;
    font-size: 15px;
    color: var(--textPrimary, #111827);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.pcal-my-year--open > .pcal-my-year-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--textSecondary, #6b7280);
    padding-bottom: 6px;
}
.pcal-my-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 2px 0 12px;
}
.pcal-my-month {
    padding: 10px 0;
    border: 1px solid var(--borderLight, #e5e7eb);
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--textPrimary, #111827);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.pcal-my-month--selected {
    background: var(--textAccent, #4c78ce);
    border-color: var(--textAccent, #4c78ce);
    color: #fff;
    font-weight: 400;
}
.pcal-my-month--disabled { opacity: 0.35; cursor: default; }
@media (pointer: fine) and (hover: hover) {
    .pcal-my-month:not(.pcal-my-month--disabled):not(.pcal-my-month--selected):hover {
        background: var(--sidebarActive, #eef2ff);
    }
}
.pcal-my-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--borderLight, #eef0f3);
    padding-top: 10px;
    margin-top: 4px;
}
.pcal-my-action {
    border: none;
    background: transparent;
    padding: 6px 4px;
    font-size: 15px;
    color: var(--textAccent, #4c78ce);
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    /* .pcal { background: #1f2430; border-color: #333b4a; }
    .pcal-title { color: #f3f4f6; }
    .pcal-day { color: #e5e7eb; }
    .pcal-nav { border-color: #333b4a; color: #cbd2dc; }
    .pcal-my-year-label { color: #f3f4f6; }
    .pcal-my-year--open > .pcal-my-year-label { color: #9aa4b2; }
    .pcal-my-month { color: #e5e7eb; border-color: #333b4a; }
    .pcal-my-year + .pcal-my-year,
    .pcal-my-actions { border-color: #333b4a; } */
}

.pcal-my-months-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.pcal-caret {
    transition: transform 0.2s ease;
}
.pcal-my-year--open .pcal-caret {
    transform: rotate(90deg);
}






/* ========================================================= daily tracker score popup (client-approved) */
.sp-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sp-popup-overlay.open { opacity: 1; visibility: visible; }
.sp-popup-card {
    background: #FCFDFE;
    border-radius: 22px;
    padding: 40px 48px 32px;
    width: 100%;
    max-width: 450px;
    margin-inline: 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    transform: scale(0.85) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sp-popup-overlay.open .sp-popup-card { transform: scale(1) translateY(0); }
.sp-trophy-wrap {
    width: 63px; height: 63px; border-radius: 50%;
    background: var(--textAccent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; border: 1px solid #FFFFFF;
    box-shadow: 0px 2px 5px 0px #00000026;
}
.sp-trophy-wrap svg { width: 34px; height: 34px; }
.sp-card-header { margin-bottom: 20px; }
.sp-title {
    font-size: 25px; line-height: 100%; letter-spacing: -0.3px;
    font-weight: 500; color: var(--textPrimary);
}
.sp-desc { font-size: 16px; line-height: 13.09px; color:#32363F; font-weight: 500; margin-top: 8px; }
.sp-score-ring { position: relative; width: 242px; height: 242px; margin: 0 auto 8px; margin-top: -8px; }
.sp-ring-svg { width: 100%; height: 100%; transform: rotate(128.5deg); }
.sp-ring-bg { fill: none; stroke: #e8ecf4; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 565; }
.sp-ring-fill {
    fill: none; stroke: var(--textAccent); stroke-width: 7; stroke-linecap: round;
    stroke-dasharray: 565; stroke-dashoffset: 565;
    transition: stroke-dashoffset 0.8s ease-in-out;
}
.sp-score-content {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; margin-top: 43px;
}
.sp-score-label { font-size: 18px; line-height: 13.09px; font-weight: 500; color: var(--textAccent); margin-bottom: 20px; }
.sp-score-grade {
    font-size: 156.24px; line-height: 109px; letter-spacing: -1.04px;
    font-weight: var(--fw-bold); color: var(--textAccent); position: relative;
}
.sp-score-plus {
    font-size: 68.77px; line-height: 48px; letter-spacing: -0.46px;
    position: absolute; top: 0px; right: -28px; color: var(--textAccent);
}
.sp-score-value { font-size: 18.32px; line-height: 23.55px; letter-spacing: -0.16px; font-weight: 700; color: #6B7280; margin-top: 21px; }
.sp-weekly-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 13px;
    background: #F2F4FC; border-radius: 8px; padding: 14px 16px; margin-top: 22px; text-align: left;
}
.sp-weekly-bar-left { display: flex; align-items: center; gap: 13px; }
.sp-weekly-icon {
    width: 44px; height: 44px; border-radius: 50%; background: var(--textAccent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sp-weekly-icon svg { width: 24px; height: 24px; }
.sp-weekly-info { flex: 1; }
.sp-weekly-label { font-size: 12px; line-height: 13.09px; font-weight: 500; color: var(--textAccent); text-transform: uppercase; margin-bottom: 3px; }
.sp-weekly-score { font-size: 14px; line-height: 13.09px; letter-spacing: -0.16px; font-weight: 500; color: var(--textSecondary); }
.sp-weekly-score span { font-size: 24px; line-height: 24.19px; letter-spacing: -0.14px; font-weight: 700; text-transform: uppercase; color: var(--textAccent); }
/* Weekly Score of "X" is always shown in red (color only — same red as the
   failed state), regardless of the daily score / card state or viewport. */
.sp-weekly-score span.sp-weekly-x { color: #F61B2E; }
.sp-weekly-bar-right { flex-basis: 91px; }
.sp-weekly-bar-right-title { font-size: 12px; line-height: 13.09px; color:#32363F; margin-bottom: 3px; }
.sp-weekly-bar-right-desc { font-size: 10px; line-height: 13.09px; color:#646467; margin-bottom: 0; }
.sp-confetti-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sp-popup-card-close-btn {
    position:absolute; top: 10px; right: 8px; cursor: pointer;
    background: transparent; border:none; transition: transform 0.15s ease;
}
.sp-popup-card-close-btn svg { width: 32px; height: 32px; }
.sp-popup-card-close-btn:hover { transform: scale(1.1); }
.sp-popup-card.failed .sp-trophy-wrap,
.sp-popup-card.failed .sp-weekly-icon { background: #F61B2E; }
.sp-popup-card.failed .sp-ring-fill { stroke: #F61B2E; }
.sp-popup-card.failed .sp-weekly-bar { background:#FEF4F5; }
.sp-popup-card.failed .sp-score-label,
.sp-popup-card.failed .sp-score-grade,
.sp-popup-card.failed .sp-weekly-label,
.sp-popup-card.failed .sp-score-plus,
.sp-popup-card.failed .sp-weekly-score span { color: #F61B2E; }
.sp-popup-overlay .sp-ring-bg{
    /* stroke-dashoffset:0; */
    stroke-dashoffset:122;
}
.sp-popup-overlay .sp-ring-bg{
  stroke-dasharray: 565;
}
@media (max-width: 767px) {
    .sp-popup-card { border-radius: 20px; padding: 30px 24px 28px; max-width: 350px; }
    .sp-trophy-wrap { width: 50px; height: 50px; margin: 0 auto 10px; }
    .sp-trophy-wrap svg { width: 27px; height: 27px; }
    .sp-popup-card-close-btn svg { width: 28px; height: 28px; }
    .sp-title { font-size: 22px; letter-spacing: -0.3px; }
    .sp-desc { font-size: 14px; line-height: 11px; margin-top: 8px; }
    .sp-score-label { font-size: 14px; line-height: 14px; margin-bottom: 7px; }
    .sp-score-grade { font-size: 120px; line-height: 100px; letter-spacing: -1.04px; }
    .sp-score-plus { font-size: 50px; line-height: 42px; letter-spacing: -0.40px; right: -20px; }
    .sp-score-value { font-size: 15px; line-height: 18px; margin-top: 4px; }
    .sp-weekly-bar { padding: 10px 12px; margin-top: 18px; gap: 8px; }
    .sp-weekly-icon { width: 38px; height: 38px; }
    .sp-weekly-icon svg { width: 20px; height: 20px; }
    .sp-weekly-label { font-size: 12px; line-height: 13.09px; margin-bottom: 3px; }
    .sp-weekly-score { font-size: 14px; line-height: 13.09px; letter-spacing: -0.16px; }
    .sp-weekly-score span { font-size: 22px; line-height: 22px; letter-spacing: -0.10px; }
    .sp-weekly-bar-right-title { font-size: 12px; line-height: 13.09px; margin-bottom: 3px; }
    .sp-weekly-bar-right-desc { font-size: 10px; line-height: 13.09px; }
    .sp-score-ring { margin-top: -7px; width: 194px; height: 194px; }
}






.add-food-journal-page-body .date-picker-input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* ── Litepicker (Food Journal date-range calendar) ────────────────────────
   Shared styling for the Litepicker instances that remain on
   foodjournal_list.php. The Accountability Charts calendar no longer uses
   Litepicker — it uses the shared Portal calendar (js/portal-calendar.js) —
   so the .acc-week-pop / .accountability-page rules that lived here were
   removed with it. */
.litepicker .container__months {
    border: 1px solid var(--cardBorder);
    box-shadow: none!important;
}

.litepicker select.month-item-year, .litepicker select.month-item-name {
    border: 1px solid var(--cardBorder);
    padding: 4px!important;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1px center;
    background-size: 18px 18px;
    padding-right: 20px!important;
    outline: none;
    transition: all 0.15s ease;
}
.litepicker select.month-item-year:active,
.litepicker select.month-item-name:active,
.litepicker select.month-item-year:hover,
.litepicker select.month-item-name:hover {
    box-shadow: var(--shadow2);
    border-color: #9ca3af;
}
.litepicker .container__days {
    gap: 2px;
}
.litepicker .container__days>div, .litepicker .container__days>a {
    flex-shrink: 1;
    width: calc(var(--litepicker-day-width) - 2px)!important;
}

/* ========================================================= global time picker component
   Client-approved "Select Time" panel (Food Journal Entry). Deliberately built
   as a sibling of the .pcal calendar above: same card chrome, same fixed
   positioning + JS anchoring, so the two pickers in the datetime-row read as
   one family. Behaviour lives in js/portal-timepicker.js. */
.ptime-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 20000;
    display: none;
}
.ptime-backdrop.ptime-open { display: block; }

.ptime {
    position: fixed;
    z-index: 20001;
    display: none;
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: var(--card, #fff);
    border: 1px solid var(--cardBorder, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    padding: 14px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
.ptime.ptime-open { display: block; }

.ptime-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--textPrimary, #111827);
    margin: 0 0 12px;
}

.ptime-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 1px solid var(--borderLight, #eef0f3);
    border-radius: 10px;
    overflow: hidden;
}
.ptime-col { min-width: 0; padding: 8px 6px; }
.ptime-col + .ptime-col { border-left: 1px solid var(--borderLight, #eef0f3); }

.ptime-collabel {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--textSecondary, #9ca3af);
    padding-bottom: 6px;
}

/* Chevron steppers above/below each wheel — the reference design's affordance
   for nudging the value without scrolling. */
.ptime-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--textSecondary, #9ca3af);
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
}
.ptime-step:active { background: var(--sidebarActive, #eef2ff); }
@media (pointer: fine) and (hover: hover) {
    .ptime-step:hover { background: var(--sidebarActive, #eef2ff); color: var(--textAccent, #4c78ce); }
}

/* 5 rows of 32px visible, the rest scrolls — snap keeps values aligned. */
.ptime-list {
    height: 160px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ptime-list::-webkit-scrollbar { display: none; width: 0; }

.ptime-opt {
    flex: 0 0 auto;
    height: 32px;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--textPrimary, #111827);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
@media (pointer: fine) and (hover: hover) {
    .ptime-opt:hover { background: var(--sidebarActive, #eef2ff); }
}
.ptime-opt[aria-selected="true"] {
    background: var(--textPrimary, #111827);
    color: #fff;
    font-weight: 600;
}
.ptime-opt:focus-visible {
    outline: 2px solid var(--textAccent, #4c78ce);
    outline-offset: -2px;
}

/* AM/PM is a two-item choice, not a wheel — centred against the wheels. */
.ptime-ampm {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 0 4px;
}
.ptime-mer {
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--textSecondary, #6b7280);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
@media (pointer: fine) and (hover: hover) {
    .ptime-mer:hover { background: var(--sidebarActive, #eef2ff); }
}
.ptime-mer[aria-selected="true"] {
    background: #e8eefb;
    color: var(--textAccent, #4c78ce);
    font-weight: 500;
}
.ptime-mer:focus-visible {
    outline: 2px solid var(--textAccent, #4c78ce);
    outline-offset: -2px;
}

.ptime-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borderLight, #f1f2f4);
}
.ptime-btn {
    border-radius: 5px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.ptime-cancel {
    background: #fff;
    border: 1px solid var(--cardBorder, #d1d5db);
    color: var(--textPrimary, #374151);
}
.ptime-apply {
    background: var(--textAccent, #4c78ce);
    border: 1px solid var(--textAccent, #4c78ce);
    color: #fff;
}

/* Touch targets grow a little on small screens; layout is unchanged. */
@media (max-width: 480px) {
    .ptime-list, .ptime-ampm { height: 176px; }
    .ptime-opt { height: 36px; }
    .ptime-mer { height: 40px; }
}

.pcal-my-years {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #bbb transparent;
}

.pcal-my-years::-webkit-scrollbar {
  width: 4px;
}

.pcal-my-years::-webkit-scrollbar-track {
  background: transparent;
}

.pcal-my-years::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}
.ptime-cols{
    border:none;
}
.ptime-list-btn-wrapper {
    border: 1px solid var(--borderLight, #eef0f3);
    border-radius: 8px;
    overflow: clip;
}

.ptime-list {
    gap: 0;
}

.ptime-opt {
    border-radius: 0;
}

.ptime-col + .ptime-col {
    border-left: none;
}

.ptime-step {
    height: 25px;
    border-radius: 0;
}

.ptime-opt[aria-selected="true"] {
    background: var(--sidebarActive);
    background: #e8eefb;
    color: var(--textAccent);
    font-weight: 500;
}
@media (pointer: fine) and (hover: hover) {
    .ptime-opt:hover {
        background: var(--sidebarActive);
    }
}
@media (pointer: fine) and (hover: hover) {
    .ptime-step:hover {
        background: var(--sidebarActive);
        color: var(--textAccent, #4c78ce);
    }
}

.ptime-step:active {
    background: var(--sidebarActive, #eef2ff);
}

.ptime-collabel {
    font-weight: 400;
}

.ptime-ampm {
    border: 1px solid var(--borderLight);
    border-radius: 8px;
    padding: 0;
    overflow: clip;
    gap: 0;
}

.ptime-mer {
    border-radius: 0;
    flex: 1;
}

.ptime-btn {
    font-weight: 400;
}
@media (pointer: fine) and (hover: hover) {
    .ptime-mer:hover {
        background: var(--sidebarActive);
    }
}


.wpd-val-cell, .wpd-mv-val {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* clip-path: inset(0 round 4px); */
    box-sizing:border-box;
}
.wpd-mv-val{
    max-width: 85px;
}

.wpd-val-cell::-webkit-scrollbar {
    display: none;
}
/* =============== body composition: tablet fits three columns =============== */
/*
 * Tablet sits between the mobile card layout (<=640px) and desktop. The table's
 * min-width:500px plus min-width:220px per data column forced 780px of content
 * into a ~768px viewport, so the section scrolled sideways. With only three
 * entries on screen there is no reason to scroll: let the columns share the
 * width instead, the way they do on desktop.
 */
@media (min-width: 641px) and (max-width: 1024px) {
  .portal-body-com .goals-table-wrap {
    overflow-x: hidden;
  }
  .portal-body-com .goals-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  .portal-body-com .goals-table thead th:not(:first-child),
  .portal-body-com .goals-table tbody td:not(:first-child) {
    min-width: 0;
    width: auto;
  }
  /* The date label is the widest thing in a column; let it wrap rather than
     push the column out. */
  .portal-body-com .goals-table thead th {
    white-space: normal;
  }
  .portal-body-com .goals-table-wrap .date-display {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .portal-body-com .goals-input {
    width: 100%;
    min-width: 0;
  }
}

/* ── Weight-logging fields: stop iOS zooming on focus ────────────────────────
   Safari zooms the page whenever a focused input's font-size is under 16px.
   The Log-Weight fields are 13px (mobile) / 14px (table), so tapping one to
   enter a weight zoomed the whole workout stack. Raise them to 16px only where
   that happens — touch/small screens — so the desktop table keeps its size. */
@media (max-width: 1024px) {
    /* .wpd-log-tbl td .wpd-log-input is more specific than a bare class, so
       match it here or the table field keeps its 14px (and still zooms). */
    .wpd-log-tbl td .wpd-log-input,
    .wpd-log-input,
    .wpd-log-set-input { font-size: 16px; }
}

/* (The Body Composition date column's 16px rule that used to sit here is now
   part of the consolidated date-input rule near the top of this file, which
   also covers the Accountability, chart and Daily Log pickers it missed.) */

/* ── Resistance Training weight-log: no lateral scroll on tablet ──────────────
   The Set × Week table has a fixed min-width + a 200px label column, so once the
   sidebar returns (≈1024px and down) the panel is narrower than the table and
   .wpd-log-inner scrolled sideways. Make the table fluid at these widths — fixed
   layout, no min-width, a slim label column and cells/inputs that shrink to fit —
   so all six weeks stay visible and the horizontal scroll never appears. Desktop
   (>1024px, where the table fits) keeps the original layout. */
@media (max-width: 1024px) {
  .wpd-log-inner { overflow-x: hidden; }
  .wpd-log-tbl { min-width: 0; table-layout: fixed; }
  .wpd-log-tbl th,
  .wpd-log-tbl td { padding-left: 6px; padding-right: 6px; }
  .wpd-log-tbl th:first-child,
  .wpd-log-tbl td:first-child { width: 66px; padding-left: 12px; }
  .wpd-log-tbl td span,
  .wpd-log-tbl td .wpd-log-input {
    min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box;
  }
}


@media (min-width: 912px) and (max-width: 991px) {
    .wpd-log-tbl th:first-child, .wpd-log-tbl td:first-child {
        width: 77px;
        padding-left: 20px;
    }
    .wpd-log-tbl th, .wpd-log-tbl td {
    padding-left: 16px;
    padding-right: 16px;
}
}


/* Log-Weight table on tablet portrait (768-911px).
   The mobile card layout is hidden above 767px, so a tablet gets the full
   seven-column table (Week + Week 1..6). Its min-content width is ~748px while
   an iPad-portrait panel is only 668px wide, so the panel — which is
   overflow-x:auto — became laterally scrollable. Above ~912px there is already
   room and nothing here applies.
   Trim the horizontal padding and the input width so the seven columns fit the
   panel instead; nothing is hidden and the table keeps its structure. */
@media (min-width: 768px) and (max-width: 911px) {
  .wpd-log-tbl th {
    padding: 12px 8px;
    font-size: 15px;
    line-height: 20px;
  }
  .wpd-log-tbl td {
    padding: 8px 5px;
  }
  .wpd-log-tbl td .wpd-log-input {
    width: 65px;
    padding: 6px 4px;
  }
  .wpd-log-tbl td:first-child,
  .wpd-log-tbl th:first-child {
    padding-left: 16px;
    padding-right: 8px;
  }
}


/* ===================================== fixed header and sidebar only scroll the content ===================================== */
@media (min-width:992px){
  html,body{
    overflow:hidden;
  }
.app-layout{
  height:100%;
}
.sidebar .sidebar-nav{
  padding-top: 24px!important;
}
.sidebar-brand{
  margin-bottom: 0;
}
.main-content {
        scroll-behavior: smooth;
    }
.sidebar-nav, .main-content{
  overflow:auto;
}
.page-header {
    position: sticky;
    top: 0;
    /* z-index: 9999; */
    z-index: 999;
}
.sidebar-nav, .main-content {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #999 #ffffffb8; /* thumb track */
}

.sidebar-nav::-webkit-scrollbar ,
.main-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sidebar-nav::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background: #ffffffb8;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background: #999;
}
}
@media (min-width: 992px) and (max-width: 1440px) {
  body{
    padding-block: 50px!important;
  }
}