/* Є ПЛАН — one shared circular shape for navigation and icon-only dismiss actions.
   Loaded AFTER the existing light/dark styles; keep every screen and the floating
   five-item tab bar unchanged. Do not round full-width actions or row chevrons. */

body.eplan-redesign:is(.client-ui,.trainer-ui) {
  --eplan-round-bg:#f1f6fc;
  --eplan-round-border:#d8e3f0;
  --eplan-round-ink:#183153;
  --eplan-round-focus:#1677ff;
}
body.eplan-redesign:is(.client-ui,.trainer-ui)[data-eplan-theme="dark"] {
  --eplan-round-bg:#11161d;
  --eplan-round-border:#455e7d;
  --eplan-round-ink:#c5e0ff;
  --eplan-round-focus:#71b1ff;
}

/* Icon-only back and close controls; calendar month arrows retain their original styles. */
body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal,.trainer-shell) :is(
  .unified-back-button,
  .redesign-back-title > button,
  .trainer-back-button,
  .trainer-theme-back,
  .redesign-progress-kpi-arrows > button,
  button[aria-label^="Назад"],
  button[aria-label="До клієнтів"],
  button[aria-label="Закрити"],
  .notification-close,
  .profile-close,
  .lyfta-history-close,
  .history-nutrition-close,
  .nutrition-date-close,
  .rest-timer-picker-close,
  .workout-confirm-close,
  .workout-timed-close,
  .cardio-entry-close,
  .trainer-new-client-close,
  .trainer-program-picker-close,
  .trainer-program-form-close,
  .trainer-review-complete-close,
  .trainer-four-week-close,
  .trainer-nutrition-calc-close,
  .auto-meal-close,
  .edit-exercise-close,
  .trainer-extra-day-modal-card .edit-exercise-close,
  .trainer-client-actions-head > button[aria-label="Закрити"]
) {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  place-items:center!important;
  box-sizing:border-box!important;
  padding:0!important;
  border:1px solid var(--eplan-round-border)!important;
  border-radius:50%!important;
  background:var(--eplan-round-bg)!important;
  color:var(--eplan-round-ink)!important;
  box-shadow:none!important;
  text-align:center!important;
  line-height:1!important;
  -webkit-tap-highlight-color:transparent;
}
/* The dark-theme rules can carry an extra attribute selector in legacy CSS. */
body.eplan-redesign:is(.client-ui,.trainer-ui)[data-eplan-theme="dark"] :is(#app,.modal,.trainer-shell) :is(
  .unified-back-button,
  .redesign-back-title > button,
  .trainer-back-button,
  .trainer-theme-back,
  .redesign-progress-kpi-arrows > button,
  button[aria-label^="Назад"],
  button[aria-label="До клієнтів"],
  button[aria-label="Закрити"],
  .notification-close,
  .profile-close,
  .lyfta-history-close,
  .history-nutrition-close,
  .nutrition-date-close,
  .rest-timer-picker-close,
  .workout-confirm-close,
  .workout-timed-close,
  .cardio-entry-close,
  .trainer-new-client-close,
  .trainer-program-picker-close,
  .trainer-program-form-close,
  .trainer-review-complete-close,
  .trainer-four-week-close,
  .trainer-nutrition-calc-close,
  .auto-meal-close,
  .edit-exercise-close,
  .trainer-extra-day-modal-card .edit-exercise-close,
  .trainer-client-actions-head > button[aria-label="Закрити"]
) {
  border-color:var(--eplan-round-border)!important;
  border-radius:50%!important;
  background:var(--eplan-round-bg)!important;
  color:var(--eplan-round-ink)!important;
  box-shadow:none!important;
}

/* Make each round back control fit the first column in title headers. */
body.eplan-redesign.client-ui #app .redesign-back-title {
  grid-template-columns:44px minmax(0,1fr);
}
body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal) :is(
  .unified-back-button,
  .redesign-back-title > button,
  .trainer-back-button,
  button[aria-label^="Назад"],
  button[aria-label="До клієнтів"]
) {
  flex-shrink:0!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
}

/* Keep original calendar month arrows and their existing button shapes/styles. */
body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal) .redesign-progress-kpi-arrows > button {
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  border-radius:50%!important;
}

/* Center existing SVG glyphs; do not replace approved in-app icons. */
body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal,.trainer-shell)
  :is(.trainer-back-button,.notification-close,.edit-exercise-close) > svg {
  display:block!important;
  margin:auto!important;
  flex-shrink:0!important;
  stroke:currentColor!important;
}

/* Client chevrons are CSS-drawn: match their stroke to the current theme. */
body.eplan-redesign.client-ui #app :is(.unified-back-button,.redesign-back-title > button)::before {
  border-left-color:var(--eplan-round-ink)!important;
  border-bottom-color:var(--eplan-round-ink)!important;
}

/* Some picker controls have ID-based original styles; keep their old 36px size. */
body.eplan-redesign.trainer-ui #recipeTemplatePicker #recipeTemplateClose,
body.eplan-redesign.trainer-ui #trainerNutritionCalcModal .trainer-nutrition-calc-close,
body.eplan-redesign.trainer-ui #autoMealPlanModal .auto-meal-close {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border-radius:50%!important;
  border-color:var(--eplan-round-border)!important;
  background:var(--eplan-round-bg)!important;
  color:var(--eplan-round-ink)!important;
}

/* Keyboard accessibility and pointer feedback, with no layout shift. */
body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal,.trainer-shell) :is(
  .unified-back-button,
  .redesign-back-title > button,
  .trainer-back-button,
  .trainer-theme-back,
  .redesign-progress-kpi-arrows > button,
  button[aria-label^="Назад"],
  button[aria-label="До клієнтів"],
  button[aria-label="Закрити"],
  .notification-close,
  .profile-close,
  .lyfta-history-close,
  .history-nutrition-close,
  .nutrition-date-close,
  .rest-timer-picker-close,
  .workout-confirm-close,
  .workout-timed-close,
  .cardio-entry-close,
  .trainer-new-client-close,
  .trainer-program-picker-close,
  .trainer-program-form-close,
  .trainer-review-complete-close,
  .trainer-four-week-close,
  .trainer-nutrition-calc-close,
  .auto-meal-close,
  .edit-exercise-close,
  .trainer-extra-day-modal-card .edit-exercise-close,
  .trainer-client-actions-head > button[aria-label="Закрити"]
):focus-visible {
  outline:2px solid var(--eplan-round-focus)!important;
  outline-offset:2px!important;
}
@media (hover:hover) {
  body.eplan-redesign:is(.client-ui,.trainer-ui) :is(#app,.modal,.trainer-shell) :is(
  .unified-back-button,
  .redesign-back-title > button,
  .trainer-back-button,
  .trainer-theme-back,
  .redesign-progress-kpi-arrows > button,
  button[aria-label^="Назад"],
  button[aria-label="До клієнтів"],
  button[aria-label="Закрити"],
  .notification-close,
  .profile-close,
  .lyfta-history-close,
  .history-nutrition-close,
  .nutrition-date-close,
  .rest-timer-picker-close,
  .workout-confirm-close,
  .workout-timed-close,
  .cardio-entry-close,
  .trainer-new-client-close,
  .trainer-program-picker-close,
  .trainer-program-form-close,
  .trainer-review-complete-close,
  .trainer-four-week-close,
  .trainer-nutrition-calc-close,
  .auto-meal-close,
  .edit-exercise-close,
  .trainer-extra-day-modal-card .edit-exercise-close,
  .trainer-client-actions-head > button[aria-label="Закрити"]
):hover {
    filter:brightness(.98);
  }
}