/*!
 * Proven components used by the portals: nav details and mobile drawer, stats, wizard stepper,
 * forms, choice cards, toolbars, tables, feeds. Tokens only. Loaded after proven.css.
 */

/* ============================================================== shell: nav details & drawer */

.pvNavItem__icon {
  width: 18px;
  text-align: center;
  color: var(--pv-text-muted);
  font-size: 15px;
  flex: none;
}

.pvNavItem--active .pvNavItem__icon {
  color: var(--pv-accent);
}

.pvNavItem__text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvNavItem__badge {
  font-size: var(--pv-fs-xs);
  color: var(--pv-text-faint);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-pill);
  padding: 0 6px;
}

.pvNavItem--disabled {
  color: var(--pv-text-faint);
  cursor: default;
}

.pvNavItem--disabled:hover {
  background: transparent;
}

.pvNav__footer {
  margin-top: var(--pv-space-6);
  padding: var(--pv-space-3);
  border-top: 1px solid var(--pv-border);
}

html .pvHeader__menuButton {
  display: none;
}

/* Routed pages fill the main area and scroll inside it. */
.pvMain > .sapMNav,
.pvMain .sapMNav > .sapMNavItem {
  height: 100%;
  background: transparent;
}

.pvMain .sapMNav > .sapMNavItem {
  overflow-y: auto;
}

.pvAvatar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pv-accent-soft);
  color: var(--pv-accent);
  font-size: var(--pv-fs-sm);
  font-weight: var(--pv-fw-semibold);
  flex: none;
}

/* Text controls used as avatars (account menu) keep the avatar box. */
html .pvAvatar.sapMText {
  display: inline-grid;
  line-height: 1;
}

.pvAvatar--lg,
html .pvAvatar--lg.sapMText {
  width: 40px;
  height: 40px;
  font-size: var(--pv-fs-md);
}

/* ============================================================== account button + menu */

/* Header trigger: avatar + name + chevron; one hover surface, a visible focus ring, no UI5 chrome. */
.pvAccountBtn {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  max-width: 16rem;
  height: var(--pv-control-h);
  padding: 0 var(--pv-space-2) 0 var(--pv-space-1);
  border: 1px solid transparent;
  border-radius: var(--pv-radius-pill);
  background: transparent;
  color: var(--pv-text);
  font: inherit;
  font-size: var(--pv-fs-sm);
  font-weight: var(--pv-fw-medium);
  cursor: pointer;
  transition: background var(--pv-dur-fast) var(--pv-ease), border-color var(--pv-dur-fast) var(--pv-ease);
}

.pvAccountBtn:hover,
.pvAccountBtn[aria-expanded="true"] {
  background: var(--pv-surface-2);
  border-color: var(--pv-border);
}

.pvAccountBtn:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus-ring);
}

.pvAccountBtn__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html .pvAccountBtn__chevron {
  font-size: .625rem;
  color: var(--pv-text-muted);
  transition: transform var(--pv-dur-fast) var(--pv-ease);
}

.pvAccountBtn[aria-expanded="true"] .pvAccountBtn__chevron {
  transform: rotate(180deg);
}

html .pvAcctPopover.sapMPopover {
  margin-top: var(--pv-space-1);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-pop);
  overflow: hidden;
}

.pvAcct {
  display: flex;
  flex-direction: column;
  background: var(--pv-surface);
}

.pvAcct__who {
  display: flex;
  gap: var(--pv-space-3);
  align-items: center;
  padding: var(--pv-space-4);
}

.pvAcct__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html .pvAcct__name.sapMText {
  color: var(--pv-text);
  font-size: var(--pv-fs-base);
  font-weight: var(--pv-fw-semibold);
}

html .pvAcct__email.sapMText {
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-sm);
  overflow-wrap: anywhere;
}

html .pvAcct__context.sapMText {
  margin-top: var(--pv-space-1);
  color: var(--pv-text-faint);
  font-size: var(--pv-fs-xs);
}

.pvAcct__section,
.pvAcct__footer {
  display: flex;
  flex-direction: column;
  padding: var(--pv-space-2);
  border-top: 1px solid var(--pv-border);
}

html .pvAcct__label.sapMText {
  padding: var(--pv-space-1) var(--pv-space-2) var(--pv-space-2);
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-xs);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: var(--pv-tracking-label);
  text-transform: uppercase;
}

/* Menu rows: full width, left aligned, icon in a fixed column. */
html .pvAcct__item.sapMBtn {
  width: 100%;
  height: auto;
  padding: 0;
}

html .pvAcct__item .sapMBtnInner {
  width: 100%;
  justify-content: flex-start;
  padding: 0 var(--pv-space-2);
  border-radius: var(--pv-radius);
  color: var(--pv-text);
  font-weight: var(--pv-fw-regular);
}

html .pvAcct__item .sapMBtnInner .sapMBtnIcon {
  width: 1.25rem;
  margin-right: var(--pv-space-2);
  color: var(--pv-text-muted);
}

html .pvAcct__item .sapMBtnContent {
  text-align: left;
}

html .pvAcct__item--current .sapMBtnInner {
  color: var(--pv-accent);
  font-weight: var(--pv-fw-medium);
}

html .pvAcct__item--current .sapMBtnInner .sapMBtnIcon {
  color: var(--pv-accent);
}

html .pvAcct__theme.sapMSegB {
  padding: 0 var(--pv-space-2) var(--pv-space-1);
}

/* ============================================================== page header & panels (UI5 parts) */

html .pvPageHeader__title.sapMTitle {
  font-size: var(--pv-fs-xl);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: -.01em;
}

html .pvPageHeader__subtitle.sapMText {
  display: block;
  margin-top: var(--pv-space-1);
  color: var(--pv-text-muted);
}

/* Section titles rendered as UI5 Titles keep the micro-label look. */
html .pvLabel.sapMTitle {
  font-size: var(--pv-fs-xs);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: var(--pv-tracking-label);
  text-transform: uppercase;
  color: var(--pv-text-muted);
}

html .pvPanel__empty.sapMText {
  display: block;
  padding: var(--pv-space-8) var(--pv-space-4);
  text-align: center;
}

.pvBackLink {
  display: inline-flex;
  margin-bottom: var(--pv-space-2);
}

/* ============================================================== stats */

.pvStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pv-space-4);
}

.pvStat {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-1);
  padding: var(--pv-space-4) var(--pv-space-5);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-1);
}

.pvStat__value {
  font-size: var(--pv-fs-2xl);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.pvStat--ok .pvStat__value { color: var(--pv-ok); }
.pvStat--warn .pvStat__value { color: var(--pv-warn); }
.pvStat--danger .pvStat__value { color: var(--pv-danger); }
.pvStat--accent .pvStat__value { color: var(--pv-accent); }

.pvStat__hint {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

.pvStat__skeleton {
  width: 80px;
  height: 26px;
  margin: 2px 0;
}

/* ============================================================== stepper (wizards) */

.pvStepper {
  display: flex;
  gap: var(--pv-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pvStepper__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
  padding: var(--pv-space-3) var(--pv-space-1);
  border-top: 3px solid var(--pv-border);
  color: var(--pv-text-faint);
  font-size: var(--pv-fs-md);
  min-width: 0;
  transition: border-color var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}

.pvStepper__step--current {
  border-top-color: var(--pv-accent);
  color: var(--pv-text);
  font-weight: var(--pv-fw-semibold);
}

.pvStepper__step--done {
  border-top-color: var(--pv-accent);
  color: var(--pv-text-muted);
  cursor: pointer;
}

.pvStepper__step--done:hover .pvStepper__title {
  text-decoration: underline;
}

.pvStepper__marker {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--pv-border-strong);
  font-size: var(--pv-fs-sm);
  flex: none;
  background: var(--pv-surface);
}

.pvStepper__step--current .pvStepper__marker {
  background: var(--pv-accent);
  border-color: var(--pv-accent);
  color: var(--pv-text-on-accent);
}

.pvStepper__step--done .pvStepper__marker {
  background: var(--pv-accent-soft);
  border-color: var(--pv-accent-soft);
  color: var(--pv-accent);
}

.pvStepper__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvWizard {
  max-width: 760px;
}

.pvWizard__footer {
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
  padding: var(--pv-space-3) var(--pv-space-4);
  border-top: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
  border-radius: 0 0 var(--pv-radius-lg) var(--pv-radius-lg);
}

/* ============================================================== forms */

.pvForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than its container, whatever the fields' fixed widths */
  gap: var(--pv-space-4);
}

/* Fields with a fixed width (width="20rem") shrink on narrow screens instead of running off the page. */
html .pvPage .sapMInputBase,
html .pvPage .sapMSlt,
html .pvPage .sapMSF,
html .pvPage .sapMStepInput,
html .pvPage .sapMMultiComboBox,
html .sapMDialog .sapMInputBase,
html .sapMDialog .sapMSlt {
  max-width: 100%;
}

.pvField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

html .pvField__help {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

.pvFormRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pv-space-4);
}

html .pvField .sapMLabel {
  font-size: var(--pv-fs-md);
  font-weight: var(--pv-fw-medium);
  color: var(--pv-text);
  height: auto;
  line-height: 1.4;
  padding-bottom: 0;
}

/* VBox wraps children in flex items; let the field's own gap set the rhythm. */
html .pvField > .sapMFlexItem {
  margin: 0;
}

/* Choice cards: pick one of several options (packages, segments). Rendered by proven.shared.control.Choice. */
.pvChoices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--pv-space-3);
}

.pvChoice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pv-space-3) var(--pv-space-4);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--pv-dur-fast) var(--pv-ease), background var(--pv-dur-fast) var(--pv-ease), box-shadow var(--pv-dur-fast) var(--pv-ease);
}

.pvChoice:hover {
  border-color: var(--pv-text-faint);
}

.pvChoice:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus-ring);
}

.pvChoice--selected,
.pvChoice--selected:hover {
  border-color: var(--pv-accent);
  background: var(--pv-accent-soft);
  box-shadow: inset 0 0 0 1px var(--pv-accent);
}

.pvChoice__title {
  font-weight: var(--pv-fw-semibold);
  /* Its own colour: inherited, it came out near-white inside the settings window (theme cards). */
  color: var(--pv-text);
}

.pvChoice__value {
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
  margin-top: var(--pv-space-1);
}

.pvChoice__meta {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

/* Secret shown once (temporary password) */
.pvSecret {
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
  padding: var(--pv-space-2) var(--pv-space-3);
  border: 1px dashed var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
}

html .pvSecret .sapMText {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-fs-lg);
  letter-spacing: .04em;
}

/* ============================================================== toolbars, tables, feeds */

.pvToolbar {
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
  flex-wrap: wrap;
  padding: var(--pv-space-2) var(--pv-space-4);
  border-bottom: 1px solid var(--pv-border);
}

.pvToolbar__spacer {
  flex: 1;
}

/* Tables sit flush inside panels: no double borders, quiet header. */
html .pvPanel .sapMList,
html .pvPanel .sapMListTbl {
  background: transparent;
}

html .pvPanel .sapMListTblHeader {
  background: var(--pv-surface-2);
}

html .pvPanel .sapMListTblCell {
  padding-top: 10px;
  padding-bottom: 10px;
}

html .pvCellTitle.sapMText {
  font-weight: var(--pv-fw-medium);
}

html .pvNum.sapMText,
html .pvNum {
  font-variant-numeric: tabular-nums;
}

.pvFeed {
  display: flex;
  flex-direction: column;
}

.pvFeed__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--pv-space-3);
  padding: var(--pv-space-3) var(--pv-space-4);
  border-bottom: 1px solid var(--pv-border);
}

/* Two-column page body: main + side panel */
.pvSplit {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--pv-space-4);
  align-items: start;
}

/* Dialog content padding (UI5 dialogs have none by default). */
html .pvDialog .sapMDialogScrollCont {
  padding: var(--pv-space-5);
}

html .pvDialog .sapMDialogFooter .sapMIBar {
  background: var(--pv-surface-2);
  box-shadow: inset 0 1px 0 0 var(--pv-border);
}

/* Wizard "done" state */
.pvDone {
  align-items: flex-start;
}

html .pvDone__icon.sapUiIcon {
  font-size: 32px;
  color: var(--pv-ok);
}

html .pvDone__title.sapMTitle {
  font-size: var(--pv-fs-xl);
}

.pvReview {
  padding: var(--pv-space-4);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
}

.pvReview > .sapMText:nth-child(even) {
  justify-self: end;
  text-align: right;
}

/* Getting-started checklist */
.pvChecklist {
  margin: 0;
  padding: var(--pv-space-2) 0;
  list-style: none;
}

.pvChecklist__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--pv-space-3);
  padding: var(--pv-space-3) var(--pv-space-4);
}

.pvChecklist__item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html .pvChecklist__icon.sapUiIcon {
  color: var(--pv-text-faint);
  font-size: 18px;
  margin-top: 2px;
}

html .pvChecklist__item--done .pvChecklist__icon.sapUiIcon {
  color: var(--pv-ok);
}

/* Tenant switcher in the header */
html .pvTenantSwitch.sapMSlt {
  border-color: transparent;
  background: transparent;
  font-weight: var(--pv-fw-medium);
}

/* PAYG band editor rows: from | to | price | remove */
.pvBandRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--pv-space-2);
  align-items: center;
}

/* ============================================================== responsive */

@media (max-width: 900px) {
  html .pvHeader__menuButton {
    display: inline-flex;
  }

  .pvShell--navOpen .pvNav {
    display: block;
    position: fixed;
    top: var(--pv-header-h);
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: 10;
    box-shadow: var(--pv-shadow-pop);
    animation: pvFadeIn var(--pv-dur) var(--pv-ease) both;
  }

  .pvSplit,
  .pvFormRow {
    grid-template-columns: 1fr;
  }

  .pvStepper__title {
    display: none;
  }

  .pvStepper__step--current .pvStepper__title {
    display: inline;
  }
}

.pvFeed__item > .pvBadge {
  justify-self: end;
}

/* Phone header: brand + menu + icon-only account button. */
@media (max-width: 600px) {
  html .pvHeader .pvBrand__context.sapMText,
  html .pvHeader .pvTenantSwitch {
    display: none;
  }

  .pvAccountBtn__name,
  html .pvAccountBtn__chevron {
    display: none;
  }

  .pvAccountBtn {
    padding: var(--pv-space-1);
  }
}

/* ============================================================== results: score ring (ev:ScoreRing) */

.pvRing {
  --pv-ring-tone: var(--pv-accent);
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--pv-surface) 78%, transparent 79% 100%),
    conic-gradient(var(--pv-ring-tone) calc(var(--pv-ring-value) * 1%), var(--pv-surface-3) 0);
}

/* the pass mark as a tick on the ring */
.pvRing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 12px;
  margin-left: -1px;
  background: var(--pv-text-muted);
  transform-origin: 1px 56px;
  transform: rotate(calc(var(--pv-ring-pass) * 3.6deg));
}

.pvRing--ok { --pv-ring-tone: var(--pv-ok); }
.pvRing--danger { --pv-ring-tone: var(--pv-danger); }
.pvRing--neutral { --pv-ring-tone: var(--pv-text-faint); }

.pvRing__value {
  font-size: var(--pv-fs-2xl);
  font-weight: var(--pv-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--pv-text);
}

/* ============================================================== results: question review (ev:QuestionReview) */

.pvReviewList {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-3);
}

.pvReview {
  padding: var(--pv-space-5);
  border: 1px solid var(--pv-border);
  border-left: 3px solid var(--pv-border-strong);
  border-radius: var(--pv-radius-lg);
  background: var(--pv-surface);
}

.pvReview--right { border-left-color: var(--pv-ok); }
.pvReview--partial { border-left-color: var(--pv-warn); }
.pvReview--wrong { border-left-color: var(--pv-danger); }
.pvReview--unanswered { border-left-color: var(--pv-text-faint); }

.pvReview__head {
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
  margin-bottom: var(--pv-space-3);
  font-size: var(--pv-fs-sm);
}

.pvReview__num {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pv-surface-3);
  font-weight: var(--pv-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.pvReview__type { color: var(--pv-text-muted); }

.pvReview__marks {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--pv-text-muted);
}

.pvReview__outcome {
  font-weight: var(--pv-fw-semibold);
  padding: 2px var(--pv-space-2);
  border-radius: var(--pv-radius-pill);
  background: var(--pv-surface-3);
  color: var(--pv-text-muted);
}

.pvReview--right .pvReview__outcome { background: var(--pv-ok-soft); color: var(--pv-ok); }
.pvReview--partial .pvReview__outcome { background: var(--pv-warn-soft); color: var(--pv-warn); }
.pvReview--wrong .pvReview__outcome { background: var(--pv-danger-soft); color: var(--pv-danger); }

.pvReview__stem {
  margin-bottom: var(--pv-space-3);
  font-size: var(--pv-fs-md);
  line-height: var(--pv-lh);
  color: var(--pv-text);
}

.pvReview__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-1);
}

.pvReview__option {
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
  padding: var(--pv-space-2) var(--pv-space-3);
  border-radius: var(--pv-radius);
  color: var(--pv-text-muted);
}

.pvReview__tick {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--pv-border-strong);
  box-sizing: border-box;
}

.pvReview__option--selected { color: var(--pv-text); background: var(--pv-surface-2); }
.pvReview__option--selected .pvReview__tick { border-color: var(--pv-text-muted); background: var(--pv-text-muted); }
.pvReview__option--right { color: var(--pv-text); }
.pvReview__option--right .pvReview__tick { border-color: var(--pv-ok); background: var(--pv-ok); }
.pvReview__option--right.pvReview__option--selected { background: var(--pv-ok-soft); }
.pvReview__option--wrong { background: var(--pv-danger-soft); }
.pvReview__option--wrong .pvReview__tick { border-color: var(--pv-danger); background: var(--pv-danger); }

.pvReview__optionText { flex: 1; font-size: var(--pv-fs-base); }

.pvReview__tag {
  font-size: var(--pv-fs-xs);
  color: var(--pv-text-muted);
}

.pvReview__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pv-fs-sm);
}

.pvReview__table th {
  text-align: left;
  padding: var(--pv-space-2) var(--pv-space-3);
  font-size: var(--pv-fs-xs);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: var(--pv-tracking-label);
  text-transform: uppercase;
  color: var(--pv-text-muted);
  border-bottom: 1px solid var(--pv-border);
}

.pvReview__table td {
  padding: var(--pv-space-2) var(--pv-space-3);
  border-bottom: 1px solid var(--pv-border);
  color: var(--pv-text);
}

.pvReview__table tr:last-child td { border-bottom: 0; }
.pvReview__row--right td:nth-child(2) { color: var(--pv-ok); font-weight: var(--pv-fw-medium); }
.pvReview__row--wrong td:nth-child(2) { color: var(--pv-danger); }
.pvReview__expected { color: var(--pv-text-muted); }

.pvReview__pos {
  width: 32px;
  color: var(--pv-text-faint);
  font-variant-numeric: tabular-nums;
}

.pvReview__explanation {
  margin-top: var(--pv-space-3);
  padding: var(--pv-space-3);
  border-radius: var(--pv-radius);
  background: var(--pv-info-soft);
  font-size: var(--pv-fs-sm);
  line-height: var(--pv-lh);
}

.pvReview__explanationLabel {
  display: block;
  margin-bottom: var(--pv-space-1);
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-info);
}

/* ============================================================== server-sanitised rich text (ev:SafeHtml) */

.pvSafeHtml p { margin: 0 0 var(--pv-space-2); }
.pvSafeHtml p:last-child { margin-bottom: 0; }
.pvSafeHtml ul, .pvSafeHtml ol { margin: 0 0 var(--pv-space-2); padding-left: var(--pv-space-6); }
.pvSafeHtml code {
  font-family: var(--pv-font-mono);
  font-size: .92em;
  padding: 1px 4px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface-3);
}


/* ============================================================== delivery pages (links, results) */

/* Exam picker in the links wizard: wide cards, one per row. */
.pvChoices--stack {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Long links stay on one line, truncated (full text is copied with the button). */
html .pvLinkCell.sapMText {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-sm);
}

/* Result detail: summary on the left, answers on the right. */
.pvSplit--result {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.pvResultSummary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pv-space-5);
}

.pvResultSummary .pvKv {
  width: 100%;
}

@media (max-width: 1080px) {
  .pvSplit--result {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================== integrations */

/* Page-level section switcher (Integrations): left-aligned, never full width. */
html .pvTabs.sapMSegB {
  align-self: flex-start;
}

.pvToolbar--end {
  justify-content: flex-end;
  border-bottom: 0;
  border-top: 1px solid var(--pv-border);
}

.pvToolbar--end:empty {
  display: none;
}

/* Code samples and payloads: mono, hairline box, scrolls instead of stretching the page. */
.pvCode {
  margin: 0;
  padding: var(--pv-space-3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
  font-family: var(--pv-font-mono);
  font-size: var(--pv-fs-sm);
  line-height: 1.55;
  color: var(--pv-text);
  white-space: pre;
  overflow: auto;
  max-height: 22rem;
}

/* Event subscription checkboxes in the endpoint dialog. */
.pvEventGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 var(--pv-space-3);
}

/* Small layout helpers used by dialogs built in controllers. */
html .pvGrow {
  flex: 1 1 auto;
  min-width: 0;
}

html .pvFacts.sapMFlexBox {
  gap: var(--pv-space-3) var(--pv-space-6);
}

html .pvFieldRow.sapMFlexBox {
  gap: var(--pv-space-3);
}

html .pvFieldRow.sapMFlexBox > * {
  flex: 1 1 0;
  min-width: 0;
}

html .pvSecret .sapMText {
  word-break: break-all;
}

/* ============================================================== email (Phase 8) */

.pvSplit.pvSplit--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .pvSplit.pvSplit--even {
    grid-template-columns: 1fr;
  }
}

.pvRow.pvRow--between {
  justify-content: space-between;
  align-items: center;
}

html .pvDangerText.sapMText {
  color: var(--pv-danger);
  font-size: var(--pv-fs-sm);
}

html .pvPreWrap.sapMText {
  white-space: pre-wrap;
}

html .pvMonoInput textarea {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-fs-sm);
}

html .pvProgressBar.sapMPI {
  margin: 0;
}

/* Email preview: the message as the recipient sees it, in a sandboxed frame on a "mail client" grey. */
.pvMailPreview {
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  overflow: hidden;
  background: var(--pv-surface-2);
}

html .pvMailPreview__subject.sapMText {
  display: block;
  padding: var(--pv-space-2) var(--pv-space-3);
  border-bottom: 1px solid var(--pv-border);
  background: var(--pv-surface);
  font-weight: 600;
}

.pvMailPreview__frame {
  display: block;
  width: 100%;
  height: 26rem;
  border: 0;
  background: var(--pv-mail-canvas);
}

/* Shown only on narrow screens (e.g. "this tool works best on a larger screen"). */
@media (min-width: 761px) {
  html .pvNarrowOnly {
    display: none;
  }
}

/* Person cells: name and email cut at two lines (long emails mustn't make one huge row). */
html .pvClamp2.sapMText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

html .pvBreakAll.sapMText {
  word-break: break-all;
}

html .pvPersonCell.sapMFlexBox {
  min-width: 0;
  max-width: 28rem;
}

/* ============================================================== settings dialog (shared/util/SettingsDialog) */

.pvSettings {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-5);
  min-height: 18rem;
}

html .pvSettings__tabs.sapMSegB {
  align-self: flex-start;
}

.pvSettings__busy {
  align-self: center;
  margin-top: var(--pv-space-8);
}

.pvSettings__panel {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-4);
}

.pvSettings__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pv-space-4);
}

html .pvSettings__hint.sapMText {
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-sm);
}

html .pvSettings__row + .pvField + .pvSettings__hint.sapMText {
  margin-top: calc(-1 * var(--pv-space-3));
}

.pvSettings__themes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Danger zone: one bordered block, red only where it matters. */
.pvSettings__danger {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-3);
  padding: var(--pv-space-4);
  border: 1px solid color-mix(in srgb, var(--pv-danger) 35%, var(--pv-border));
  border-radius: var(--pv-radius-lg);
}

html .pvSettings__dangerTitle.sapMTitle {
  font-size: var(--pv-fs-md);
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-danger);
}

html .pvSettings__dangerButton.sapMBtn {
  align-self: flex-start;
}

.pvSettings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-2);
}

.pvSettings__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pv-space-2);
}

@media (max-width: 600px) {
  .pvSettings__row,
  .pvSettings__themes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================== main menu: settings pinned to the bottom */

.pvNav {
  display: flex;
  flex-direction: column;
}

.pvNav > .pvNav__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-2);
  padding: var(--pv-space-3) 0 var(--pv-space-1);
}

.pvNav__home {
  padding: var(--pv-space-1) var(--pv-space-3);
  font-size: var(--pv-fs-sm);
}

/* ============================================================== settings: second menu (tenant portal) */

.pvSubNav {
  display: none;
  grid-area: sub;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pv-space-4) var(--pv-space-2) var(--pv-space-6);
  background: var(--pv-surface-2);
  border-right: 1px solid var(--pv-border);
}

.pvShell--settings {
  grid-template-columns: var(--pv-sidenav-w) var(--pv-subnav-w) 1fr;
  grid-template-areas: "header header header" "nav sub main";
}

.pvShell--settings > .pvSubNav {
  display: flex;
  animation: pvFadeIn var(--pv-dur-fast) var(--pv-ease) both;
}

.pvSubNav__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--pv-space-3) var(--pv-space-3);
}

html .pvSubNav__title.sapMTitle {
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-text);
}

html .pvSubNav__context.sapMText {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

html .pvSubNav__group.sapMText {
  display: block;
  padding: var(--pv-space-4) var(--pv-space-3) var(--pv-space-1);
  font-size: var(--pv-fs-xs);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: var(--pv-tracking-label);
  text-transform: uppercase;
  color: var(--pv-text-faint);
}

.pvSubNav .pvNavItem {
  height: 32px;
  font-size: var(--pv-fs-sm);
}

.pvSubNav .pvNavItem--active {
  background: var(--pv-surface);
  box-shadow: var(--pv-shadow-1);
}

/* Settings pages: a calmer reading width than work pages. */
/* Settings pages use the same column as every other page (and the two-factor banner above them); their forms keep
   a readable width themselves (.pvNarrowForm). */
.pvSettingsPage {
  max-width: var(--pv-content-max);
}

/* A row with an explanation on the left and its control on the right. */
.pvSettingsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pv-space-4);
}

.pvSettingsRow__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pv-space-1);
  min-width: 0;
  flex: 1 1 18rem;
}

.pvSettingsRow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-space-2);
}

.pvSettingsKv {
  margin: 0;
  row-gap: var(--pv-space-3);
}

.pvSettingsKv > dd {
  min-width: 0;
}

/* ---------------------------------------------------------------- brand colour */

.pvBrandPicker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pv-space-4) var(--pv-space-6);
}

.pvSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-2);
}

/* Default (no colour) shows the Proven accent from the token; data colours come in as --pv-swatch. */
.pvSwatch {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--pv-surface);
  outline: 1px solid var(--pv-border);
  background: var(--pv-swatch, var(--pv-accent-default));
  cursor: pointer;
  transition: transform var(--pv-dur-fast) var(--pv-ease);
}

.pvSwatch:hover {
  transform: scale(1.08);
}

.pvSwatch:focus-visible {
  box-shadow: var(--pv-focus-ring);
}

.pvSwatch--selected {
  outline: 2px solid var(--pv-text);
  outline-offset: 1px;
}

.pvBrandPicker__custom {
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
}

.pvBrandPreview {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-2);
  padding: var(--pv-space-4);
  border: 1px dashed var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
}

.pvBrandPreview__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-space-4);
}

/* ---------------------------------------------------------------- save bar */

.pvSaveBar {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--pv-space-2);
  padding: var(--pv-space-3) var(--pv-space-4);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-2);
}

/* ---------------------------------------------------------------- phones and small tablets */

@media (max-width: 900px) {
  /* The second menu becomes a scrollable strip of the same items above the page. */
  .pvShell--settings {
    grid-template-columns: 1fr;
    grid-template-rows: var(--pv-header-h) auto 1fr;
    grid-template-areas: "header" "sub" "main";
  }

  .pvShell--settings > .pvSubNav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--pv-space-2) var(--pv-space-3);
    border-right: 0;
    border-bottom: 1px solid var(--pv-border);
    scrollbar-width: none;
  }

  .pvShell--settings .pvSubNav__head,
  html .pvShell--settings .pvSubNav__group.sapMText {
    display: none;
  }

  .pvShell--settings .pvSubNav__items {
    display: flex;
    gap: var(--pv-space-1);
  }

  .pvShell--settings .pvSubNav .pvNavItem {
    flex: none;
    white-space: nowrap;
  }

  .pvShell--navOpen .pvNav {
    display: flex;
  }
}

.pvPanel__footer {
  padding: var(--pv-space-3) var(--pv-space-4);
  border-top: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
  border-radius: 0 0 var(--pv-radius-lg) var(--pv-radius-lg);
}

.pvSaveBar {
  animation: pvFadeIn var(--pv-dur-fast) var(--pv-ease) both;
}

html .pvSaveBar__icon {
  color: var(--pv-accent);
}

html .pvSaveBar__discard.sapMBtn {
  margin-left: auto;
}

html .pvStrong.sapMText {
  color: var(--pv-text);
  font-weight: var(--pv-fw-medium);
}

@media (max-width: 900px) {
  /* The main menu stays a drawer on phones (the flex layout above must not reveal it). */
  .pvNav {
    display: none;
  }

  .pvShell--navOpen .pvNav {
    display: flex;
  }

  html .pvShell--settings .pvSubNav__items.sapMFlexBox {
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================================== table filters, views and paging */

/* Table toolbar (shared/fragment/TableTools): search · Filters · … · View ▾, then the active filters as chips. */
html .pvTableBar {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--pv-border);
}

html .pvTableBar__row {
  gap: var(--pv-space-2);
  padding: var(--pv-space-3) var(--pv-space-4);
}

html .pvTableBar__search.sapMSF {
  flex: 1 1 18rem;
  max-width: 28rem;
  min-width: 12rem;
}

html .pvTableBar__spacer {
  flex: 1 1 auto;
}

/* The saved-view button stays small: just the view's name and a chevron. */
html .pvTableBar__view.sapMBtn .sapMBtnInner {
  max-width: 14rem;
  color: var(--pv-text-muted);
}

html .pvTableBar__view.sapMBtn .sapMBtnContent {
  overflow: hidden;
  text-overflow: ellipsis;
}

html .pvTableBar__chips {
  gap: var(--pv-space-2);
  padding: 0 var(--pv-space-4) var(--pv-space-3);
}

html .pvTableBar__chipsLabel.sapMText {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-faint);
}

.pvFilterChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-2);
}

html .pvFilterChip {
  gap: var(--pv-space-1);
  height: 28px;
  padding: 0 2px 0 var(--pv-space-3);
  border: 1px solid var(--pv-accent);
  border-radius: var(--pv-radius-pill);
  background: var(--pv-accent-soft);
  max-width: 100%;
}

html .pvFilterChip .sapMText {
  font-size: var(--pv-fs-sm);
  white-space: nowrap;
}

html .pvFilterChip__label.sapMText {
  color: var(--pv-text-muted);
}

html .pvFilterChip__value.sapMText {
  color: var(--pv-text);
  font-weight: var(--pv-fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

html .pvFilterChip__remove.sapMBtn,
html .pvFilterChip__remove.sapMBtn .sapMBtnInner {
  height: 24px;
  min-width: 24px;
  width: 24px;
  border-radius: 50%;
}

html .pvFilterChip__remove.sapMBtn .sapMBtnInner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html .pvFilterChip__remove.sapMBtn .sapMBtnIcon {
  position: static;
  margin: 0;
  font-size: .625rem;
  line-height: 1;
  width: auto;
}

html .pvTableBar__clear.sapMLnk {
  font-size: var(--pv-fs-sm);
}

@media (max-width: 640px) {
  html .pvTableBar__search.sapMSF {
    flex-basis: 100% !important;
    max-width: none;
  }
}

/* The filter area under the toolbar, opened with "Filters": the controls in a tidy grid, label above each. */
html .pvFilterArea {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--pv-space-3) var(--pv-space-4);
  align-items: end;
  padding: var(--pv-space-4);
  background: var(--pv-surface-2);
  border-bottom: 1px solid var(--pv-border);
}

/* Segmented filters (status …) need more room than one grid cell. */
html .pvFilterArea .pvFilter--wide {
  grid-column: span 2;
}

html .pvFilterArea .sapMSlt,
html .pvFilterArea .sapMInputBase,
html .pvFilterArea .sapMDP {
  width: 100% !important;
}

/* Sortable column headings (pv:SortHeader). */
.pvSortHeader {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-1);
  max-width: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.pvSortHeader:hover .pvSortHeader__text,
.pvSortHeader--active .pvSortHeader__text {
  color: var(--pv-text);
}

.pvSortHeader:focus-visible {
  outline: 2px solid var(--pv-focus-ring);
  outline-offset: 2px;
  border-radius: var(--pv-radius-sm);
}

.pvSortHeader__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The arrow: two faint triangles when not sorted, one strong triangle for the current direction. */
.pvSortHeader__arrow {
  position: relative;
  flex: none;
  width: 8px;
  height: 12px;
}

.pvSortHeader__arrow::before,
.pvSortHeader__arrow::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: .35;
}

.pvSortHeader__arrow::before {
  top: 0;
  border-bottom: 4px solid currentColor;
}

.pvSortHeader__arrow::after {
  bottom: 0;
  border-top: 4px solid currentColor;
}

.pvSortHeader:hover .pvSortHeader__arrow::before,
.pvSortHeader:hover .pvSortHeader__arrow::after {
  opacity: .6;
}

.pvSortHeader__arrow--ascending::before,
.pvSortHeader__arrow--descending::after {
  opacity: 1 !important;
  color: var(--pv-accent);
}

.pvSortHeader__arrow--ascending::after,
.pvSortHeader__arrow--descending::before {
  opacity: 0 !important;
}

/* Right-aligned (numeric) columns: arrow before the text so the numbers' edge stays in line. */
html .sapMListTblHeaderCell.sapMTableTH[style*="text-align: right"] .pvSortHeader,
html th[style*="right"] .pvSortHeader {
  flex-direction: row-reverse;
}

html .pvFilterArea > .sapMFlexItem,
html .pvFilter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html .pvFilter .sapMLabel {
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

html .pvVariantRow {
  width: 100%;
  padding: var(--pv-space-2) var(--pv-space-3);
  box-sizing: border-box;
  gap: var(--pv-space-3);
}

.pvPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--pv-space-3);
  padding: var(--pv-space-2) var(--pv-space-4);
  border-top: 1px solid var(--pv-border);
  font-size: var(--pv-fs-sm);
  color: var(--pv-text-muted);
}

.pvPager--empty {
  display: none;
}

.pvPager__range {
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

.pvPager__size {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
}

.pvPager__select,
.pvPager__button {
  font: inherit;
  color: var(--pv-text);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius-sm);
  min-height: 2rem;
}

.pvPager__select {
  padding: 0 var(--pv-space-2);
}

.pvPager__button {
  min-width: 2rem;
  font-size: var(--pv-fs-lg);
  line-height: 1;
  cursor: pointer;
}

.pvPager__button:disabled {
  opacity: .45;
  cursor: default;
}

.pvPager__button:focus-visible,
.pvPager__select:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus-ring);
}

.pvPager__page {
  font-variant-numeric: tabular-nums;
}

/* ============================================================== phones (responsive sweep 2026-10-08) */
@media (max-width: 600px) {
  /* Stat tiles two by two instead of one tall column. */
  .pvStats,
  .pvStats--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pv-space-3);
  }

  .pvStat {
    padding: var(--pv-space-3) var(--pv-space-4);
  }

  /* Segmented buttons (tabs, filters, question types) keep their natural widths and scroll sideways,
     rather than squeezing every label to "Settin…". */
  html .sapMSegB {
    display: flex;
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html .sapMSegB::-webkit-scrollbar {
    display: none;
  }

  html .sapMSegB > .sapMSegBBtn {
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Checklist rows: the action moves under the text instead of squeezing it. */
  html .pvChecklist__item.sapMFlexBox {
    flex-wrap: wrap;
  }

  /* The text keeps its place next to the icon; only the action drops underneath. */
  html .pvChecklist__item > .sapMFlexItem:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
  }

  /* !important: UI5 writes the flex item's basis as an inline style. */
  html .pvChecklist__item > .sapMFlexItem:nth-child(3) {
    flex-basis: 100% !important;
    padding-left: 2rem;
  }
}

/* A segmented filter (status …) takes two grid cells where there is room for two. */
@media (min-width: 641px) {
  html .pvFilterArea .pvFilter:has(.sapMSegB) {
    grid-column: span 2;
  }
}

html .pvFilterArea .sapMSegB {
  width: auto !important;
  max-width: 100%;
}

/* In a phone's pop-in ("Test: …") the heading is only a label: no arrow, not clickable. */
html .sapMListTblSubCntHdr .pvSortHeader {
  pointer-events: none;
  text-transform: none;
  letter-spacing: normal;
}

/* Pop-in labels use the muted text colour in both themes (UI5's own colour was unreadable in dark mode). */
html .sapMListTblSubCntHdr,
html .sapMListTblSubCntHdr .pvSortHeader__text,
html .sapMListTblSubCntHdr .pvSortHeader--active .pvSortHeader__text {
  color: var(--pv-text-muted);
}

html .sapMListTblSubCntHdr .pvSortHeader__arrow {
  display: none;
}

/* ============================================================== email templates (shared page) */

/* List · editor · preview; the preview moves under the editor on narrower screens, the list on top on phones. */
.pvEtLayout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--pv-space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .pvEtLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .pvEtList {
    display: none;
  }
}

@media (min-width: 901px) {
  html .pvEtPicker {
    display: none !important;
  }
}

/* Long email names wrap in the list rather than being cut off. */
.pvEtList .pvNavItem__text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.pvEtList {
  padding: var(--pv-space-3);
  position: sticky;
  top: var(--pv-space-4);
}

html .pvEtGroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--pv-space-3);
}

html .pvEtGroup__label.sapMText {
  padding: var(--pv-space-1) var(--pv-space-2);
  font-size: var(--pv-fs-xs);
  font-weight: var(--pv-fw-semibold);
  letter-spacing: var(--pv-tracking-label);
  text-transform: uppercase;
  color: var(--pv-text-faint);
}

html .pvEtHead__title.sapMTitle {
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
}

.pvEtChips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-2);
  margin: var(--pv-space-1) 0;
}

html .pvEtChip.sapMBtn .sapMBtnInner {
  height: 26px;
  min-height: 26px;
  padding: 0 var(--pv-space-2);
  border-radius: var(--pv-radius-pill);
  font-family: var(--pv-font-mono);
  font-size: var(--pv-fs-xs);
}

html .pvEtChip.sapMBtn .sapMBtnContent {
  line-height: 24px;
}

html .pvEtActions {
  gap: var(--pv-space-2);
  padding-top: var(--pv-space-4);
  border-top: 1px solid var(--pv-border);
}

/* Preview dialog: the inbox line, then the email on a neutral "desk" at the chosen device width. */
html .pvEtPreview {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pvEtStage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--pv-space-4);
  background: var(--pv-surface-3);
}

.pvEtDevice {
  flex: none;
  transform-origin: top left;
  min-height: 480px;
  margin: 0 auto;
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius-lg);
  overflow: hidden;
  box-shadow: var(--pv-shadow-2);
  box-sizing: border-box;
  transition: width var(--pv-dur) var(--pv-ease);
}

/* Centred when it fits; scaled devices are placed from the left (their transform origin). */
.pvEtStage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* A phone gets a thicker, rounder frame so the size reads at a glance. */
.pvEtDevice[data-device="phone"] {
  border-width: 8px;
  border-color: var(--pv-border-strong);
  border-radius: 28px;
}

/* The dialog's content fills its height, so the "desk" reaches the footer. */
html .pvEtPreviewDialog .sapMDialogScroll,
html .pvEtPreviewDialog .sapMDialogScrollCont {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

html .pvEtPreviewDialog .pvEtPreview {
  flex: 1 1 auto;
  min-height: 0;
}

/* The device switch keeps its full labels. */
html .pvEtPreviewDialog .sapMBarRight .sapMSegB {
  width: auto !important;
  margin-left: var(--pv-space-2);
}

html .pvEtPreviewDialog .sapMBarRight .sapMSegBBtn {
  width: auto !important;
}

@media (max-width: 640px) {
  html .pvEtPreviewDialog .sapMSegBBtn .sapMSegBBtnInner .sapMBtnContent,
  html .pvEtPreviewDialog .sapMSegBBtn > .sapMSegBBtnInner > .sapMSegBBtnContent {
    display: none;
  }
}

html .pvEtPreview__subject {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pv-space-3) var(--pv-space-4);
  border-bottom: 1px solid var(--pv-border);
}

html .pvEtPreview__subjectText.sapMText {
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-text);
}

/* The email itself is always light (as in a mail client). */
.pvEtFrame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  background: var(--pv-mail-canvas);
}

html .pvEtList .pvNavItem {
  height: auto;
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.3;
}


/* ============================================================== form system (D-154)
   One pattern for every form, from established guidance (NN/g, GOV.UK Design System, Baymard, WCAG 2.2):
   - the label above its field, strong and close to it; a hint (pvField__help) right under the field (UI5 wraps
     form items differently per view, so the order is the markup's: label, field, hint);
   - every control boxed the same way at one height (--pv-field-h), hover and focus clearly visible;
   - labels with and without a "?" line up, so fields side by side start at the same height;
   - sections with a real heading (sentence case), generous but consistent spacing on the 4px grid;
   - the actions in one row at the end of the form, separated by a hairline. */

/* Field rhythm: label → hint → control, 6px apart; fields 20px apart. */
html .pvForm {
  gap: var(--pv-space-5);
}

html .pvField {
  gap: 6px;
}

/* Labels: semibold, the text colour, one line height whether or not there is a help icon. */
html .pvField .sapMLabel:not(.sapMCbLabel):not(.sapMRbBLabel),
html .pvField__labelRow > .sapMLabel {
  font-size: var(--pv-fs-md);
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-text);
  line-height: 20px;
  min-height: 20px;
}

html .pvField > .pvField__labelRow,
html .pvField > .sapMLabel {
  min-height: 20px;
  align-items: center;
}

/* UI5 wraps the children of a (non-bare) VBox in boxes; as inline boxes they add the line's spacing below a label
   (27px for a 20px label), so fields without a "?" sat lower than their neighbours. */
html .pvField > div.sapMFlexItem:not(.sapMFlexBox):has(> .sapMLabel) {
  display: flex;
  flex-direction: column;
}

html .pvField__labelRow .pvHelp {
  margin-top: -2px;
  margin-bottom: -2px;
}

html .pvField__help.sapMText,
html .pvField__help {
  font-size: var(--pv-fs-sm);
  line-height: 1.45;
  color: var(--pv-text-muted);
  max-width: 68ch;
}

/* Controls: ONE height for every field and button (--pv-field-h, 32px), so a button next to a field lines up and
   forms look the same on every page. Areas with bigger controls (sign-in card, test runner) set the variable larger. */
html.sapUiSizeCompact .sapMInputBase:not(.sapMTextArea):not(.pvInlineTitle__input),
html.sapUiSizeCozy .sapMInputBase:not(.sapMTextArea):not(.pvInlineTitle__input),
html .sapMStepInput {
  height: var(--pv-field-h);
  margin-top: 0;
  margin-bottom: 0;
}

html .sapMInputBase:not(.sapMTextArea):not(.pvInlineTitle__input) .sapMInputBaseContentWrapper {
  height: 100%;
  box-sizing: border-box;
}

html .sapMInputBase:not(.sapMTextArea):not(.pvInlineTitle__input) .sapMInputBaseInner {
  height: 100%;
  padding: 0 10px;
  font-size: var(--pv-fs-base);
  line-height: normal;
}

html .sapMInputBase:not(.sapMTextArea) .sapMInputBaseIconContainer {
  height: 100%;
  display: inline-flex;
  align-items: center;
}

/* Number steppers: the value centred, narrow padding (the − / + buttons take the sides). */
html .sapMStepInput .sapMInputBase:not(.sapMTextArea) .sapMInputBaseInner.sapMInputBaseInner {
  padding: 0 4px;
  text-align: center;
}

html .sapMTextArea .sapMInputBaseInner {
  padding: 7px 10px;
  font-size: var(--pv-fs-base);
  line-height: 1.5;
}

/* Buttons at the same height as fields; icon-only buttons square. */
html.sapUiSizeCompact .sapMBtn:not(.sapMBtnIconOnlyTransparentAlwaysVisible),
html.sapUiSizeCozy .sapMBtn {
  height: var(--pv-field-h);
  padding-top: 0;
  padding-bottom: 0;
}

html .sapMBtn .sapMBtnInner {
  height: var(--pv-field-h);
  min-width: var(--pv-field-h);
  box-sizing: border-box;
}

html .sapMBtn .sapMBtnInner:not(.sapMBtnIconFirst) .sapMBtnContent,
html .sapMBtn .sapMBtnInner .sapMBtnContent {
  line-height: calc(var(--pv-field-h) - 2px);
}

html .sapMBtn .sapMBtnInner .sapMBtnIcon {
  line-height: calc(var(--pv-field-h) - 2px);
  height: calc(var(--pv-field-h) - 2px);
}

/*
 * Segmented switches (tabs, filters, choices), everywhere — owner, 2026-10-13: "you can see the different buttons in
 * the group". One bordered track; the segments inside have no borders or dividers; the chosen one is a soft accent
 * fill with an accent outline. UI5 draws a border on both the wrapper and the inner part of every segment, so both
 * are cleared here (selectors one step stronger than UI5's, which load after ours). Same height as fields and the search box.
 */
html body .sapMSegB {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  height: var(--pv-field-h);
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
  box-shadow: none;
}

html body .sapMSegB .sapMSegBBtn,
html.sapUiSizeCompact body .sapMSegB .sapMSegBBtn {
  padding: 0;
  margin: 0;
  height: 100%;
  min-width: 0;
  line-height: normal;
  box-sizing: border-box;
  border: 0;
  background: transparent;
}

html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInnerWrapper,
html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInner {
  height: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: calc(var(--pv-radius) - 2px);
  background: transparent;
  box-shadow: none;
}

html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInnerWrapper {
  border: 0;
}

html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pv-space-1);
  padding: 0 var(--pv-space-3);
  line-height: normal;
  color: var(--pv-text-muted);
  font-weight: var(--pv-fw-medium);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

html body .sapMSegB .sapMSegBBtn:not(.sapMSegBBtnSel):not(.sapMSegBBtnDis):hover .sapMSegBBtnInner {
  background: var(--pv-surface);
  color: var(--pv-text);
}

html body .sapMSegB .sapMSegBBtn.sapMSegBBtnSel .sapMSegBBtnInner {
  border-color: var(--pv-accent);
  background: var(--pv-accent-soft);
  color: var(--pv-accent);
  font-weight: var(--pv-fw-semibold);
}

html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInner .sapMSegBBtnIcon,
html body .sapMSegB .sapMSegBBtn .sapMSegBBtnInner .sapUiIcon {
  color: inherit;
}

/* No UI5 focus frame on a click; a soft ring for keyboard users. */
html body .sapMSegB .sapMSegBBtn:focus,
html body .sapMSegB .sapMSegBBtn:focus .sapMSegBBtnInner { outline: none; }
html body .sapMSegB .sapMSegBBtn:focus::before,
html body .sapMSegB .sapMSegBBtn:focus .sapMSegBBtnInner::before { content: none; display: none; }
html body .sapMSegB .sapMSegBBtn:focus-visible .sapMSegBBtnInner { box-shadow: var(--pv-focus-ring); }

/* An empty hint takes no room (some hints only fill in after a test, e.g. the storage account's name). */
html .pvField__help.sapMText:empty {
  display: none;
}

html .sapMSF,
html.sapUiSizeCompact .sapMSF {
  height: var(--pv-field-h);
}

html .sapMSF .sapMSFF,
html .sapMSF .sapMSFI {
  height: 100%;
}

/* Selects are boxed like inputs (Horizon draws them as a bare line in compact mode). */
html .sapMSlt:not(.sapMSltIconOnly):not(.pvPlainSelect) {
  height: var(--pv-field-h);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color var(--pv-dur-fast) var(--pv-ease), box-shadow var(--pv-dur-fast) var(--pv-ease);
}

html .sapMSlt:not(.sapMSltIconOnly):not(.pvPlainSelect)::after,
html .sapMSlt:not(.sapMSltIconOnly):not(.pvPlainSelect)::before {
  display: none;
}

html .sapMSlt.sapMSltHoverable:not(.sapMSltIconOnly):hover {
  border-color: var(--pv-text-faint);
  background: var(--pv-surface);
}

html .sapMSlt.sapMSltFocused:not(.sapMSltIconOnly),
html .sapMSlt:not(.sapMSltIconOnly):focus-within {
  border-color: var(--pv-accent);
  box-shadow: var(--pv-focus-ring);
}

html .sapMSlt:not(.sapMSltIconOnly) .sapMSltLabel,
html .sapMSlt:not(.sapMSltIconOnly) .sapMSltArrow {
  height: 100%;
  line-height: calc(var(--pv-field-h) - 2px);
}

html .sapMSlt:not(.sapMSltIconOnly) .sapMSltLabel {
  padding-left: 10px;
  font-size: var(--pv-fs-base);
}

/* Hover on every boxed field: the border darkens a step, so the field reads as clickable. */
html .sapMInputBase:not(.sapMInputBaseReadonly):not(.sapMInputBaseDisabled) .sapMInputBaseContentWrapper:hover {
  border-color: var(--pv-text-faint);
}

/* Checkboxes and radio buttons in forms: the text at body size and colour, aligned with the box. */
html .pvForm .sapMCb .sapMCbLabel,
html .pvForm .sapMRb .sapMRbBLabel {
  font-size: var(--pv-fs-base);
  color: var(--pv-text);
}

/* Section headings: a real heading in sentence case instead of the small uppercase label. */
html .pvPanel__header {
  min-height: 52px;
  padding: var(--pv-space-2) var(--pv-space-3) var(--pv-space-2) var(--pv-space-5);
}

html .pvPanel__header .pvLabel.sapMTitle,
html .pvPanel__header > .pvLabel {
  font-size: 0.9375rem;
  font-weight: var(--pv-fw-semibold);
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--pv-text);
}

html .pvPanel__body.pvForm,
html .pvPanel__body > .pvForm {
  padding: var(--pv-space-5);
}

/* The form's actions: one row at the end, separated by a hairline; the main action last (right). */
html .pvForm > .pvToolbar--end,
html .pvForm > .pvToolbar:last-child {
  margin-top: var(--pv-space-1);
  padding-top: var(--pv-space-4);
  border-top: 1px solid var(--pv-border);
}

/* Settings rows (label + hint left, control right): the hint sits under the label, the control centred. */
html .pvSettingsRow {
  align-items: center;
}

html .pvSettingsRow .sapMLabel,
html .pvSettingsRow__main > .sapMText:first-child {
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-text);
}

/* Read-only and disabled fields look calm, not broken. */
html .sapMInputBaseReadonly .sapMInputBaseContentWrapper,
html .sapMInputBaseDisabled .sapMInputBaseContentWrapper {
  border-style: solid;
}

/* ============================================================== organisations (D-171) */

/* Organisation cards: a band in the organisation's colour (--pv-org-color, set per card), its logo or initials,
   its name and one line of detail. */
.pvOrgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--pv-space-4);
}

.pvOrgCard {
  --pv-org-color: var(--pv-accent-default);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  background: var(--pv-surface);
  color: var(--pv-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pv-dur-fast) var(--pv-ease), box-shadow var(--pv-dur-fast) var(--pv-ease), transform var(--pv-dur-fast) var(--pv-ease);
}

.pvOrgCard:hover {
  border-color: var(--pv-border-strong);
  box-shadow: var(--pv-shadow-2);
  transform: translateY(-2px);
}

.pvOrgCard:focus-visible {
  outline: none;
  box-shadow: var(--pv-focus-ring);
}

.pvOrgCard__band {
  height: 6px;
  background: var(--pv-org-color);
}

.pvOrgCard__body {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-2);
  padding: var(--pv-space-5);
}

.pvOrgCard__logo {
  display: grid;
  place-items: center start;
  height: 48px;
  margin-bottom: var(--pv-space-2);
}

.pvOrgCard__img {
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
  /* Logos are made for light backgrounds: a light plate in dark mode (transparent in light mode). */
  padding: 4px 6px;
  border-radius: var(--pv-radius);
  background: var(--pv-logo-plate);
}

.pvOrgCard__initials {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pv-radius);
  background: var(--pv-org-color);
  color: var(--pv-text-on-accent);
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
}

.pvOrgCard__name {
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
  overflow-wrap: anywhere;
}

.pvOrgCard__meta {
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-sm);
}

/* Compact: only the logo tile (a test's organisations, D-174). */
.pvOrgCard.pvOrgCard--compact {
  flex: 0 0 auto;
  min-width: 44px;
  max-width: 104px;
  height: 44px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--pv-radius);
}
.pvOrgCard--compact:hover { transform: none; }
.pvOrgCard--compact .pvOrgCard__logo { height: auto; margin: 0; place-items: center; }
.pvOrgCard--compact .pvOrgCard__img { max-height: 32px; max-width: 92px; padding: 2px; }
.pvOrgCard--compact:has(.pvOrgCard__initials) { padding: 0; }
.pvOrgCard--compact .pvOrgCard__initials { width: 44px; height: 44px; border-radius: 0; font-size: var(--pv-fs-sm); }

/* A test's organisations (test editor, D-174): a row each — who, its certificate design, on/off; links and results. */
.pvOrgLinks {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-3);
}
.pvOrgLink {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-lg);
  background: var(--pv-surface);
}
html .pvOrgLink__head {
  gap: var(--pv-space-3);
  padding: var(--pv-space-3) var(--pv-space-4);
  flex-wrap: wrap;
}
/* The name keeps room to read; on a phone the status badge drops below it. */
html .pvOrgLink__head > .pvGrow { min-width: 10rem; }
html .pvOrgLink__name.sapMLnk {
  font-weight: var(--pv-fw-semibold);
  font-size: var(--pv-fs-base);
}
html .pvOrgLink__foot {
  gap: var(--pv-space-1);
  padding: var(--pv-space-2) var(--pv-space-3);
  border-top: 1px solid var(--pv-border);
  background: var(--pv-surface-2);
  border-radius: 0 0 var(--pv-radius-lg) var(--pv-radius-lg);
}

/* The invite dialog's "Links for <organisation>" line. */
html .pvInviteFor {
  gap: var(--pv-space-2);
  padding: var(--pv-space-2) var(--pv-space-3);
  border-radius: var(--pv-radius);
  background: var(--pv-accent-soft);
}
html .pvInviteFor__icon.sapUiIcon { color: var(--pv-accent); }

/* Below a field: a small action (e.g. "Use the built-in design"). */
html .pvFieldLink.sapMLnk { font-size: var(--pv-fs-sm); margin-top: var(--pv-space-1); }

/* A wrap of small chips (e.g. an organisation's workspaces). */
.pvChipList {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-2);
}

/* A panel for an action that can't be undone. */
.pvPanel--danger {
  border-color: color-mix(in srgb, var(--pv-danger) 35%, var(--pv-border));
}

/* A menu button's arrow (UI5 draws it as an overlay 24px high at the top): centred on our field-height buttons. */
html body .sapMMenuBtn .sapMBtnInner::after {
  top: 0;
  bottom: 0;
  height: auto;
  line-height: calc(var(--pv-field-h) - 2px);
}

/* A toolbar's group of actions: together, pushed right (also when they wrap under the intro text). */
html .pvToolbar__actions { gap: var(--pv-space-2); margin-left: auto; flex: 0 0 auto; }
html .pvToolbar > .pvGrow { flex: 1 1 20rem; }

/* A toolbar inside a panel's body (an intro with its actions): no divider — it belongs to the content below it. */
html .pvPanel__body .pvToolbar:not(.pvToolbar--end),
html .pvLinks > .pvToolbar:not(.pvToolbar--end) {
  padding: 0;
  border-bottom: 0;
}
html .pvLinks > .pvToolbar:not(.pvToolbar--end) { margin-bottom: var(--pv-space-2); }

/*
 * Dialog footers, every dialog (owner, 2026-10-13: "squished"): room around and between the buttons, the primary one
 * on the left of the pair as UI5 places it.
 */
html body .sapMDialog .sapMDialogFooter .sapMIBar,
html.sapUiSizeCompact body .sapMDialog .sapMDialogFooter .sapMIBar {
  height: auto;
  min-height: 3.75rem;
  padding: var(--pv-space-3) var(--pv-space-5);
  box-sizing: border-box;
}
html body .sapMDialog .sapMDialogFooter .sapMBarRight,
html body .sapMDialog .sapMDialogFooter .sapMBarLeft {
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
  height: auto;
}
html body .sapMDialog .sapMDialogFooter .sapMBarChild {
  margin: 0;
}
html body .sapMDialog .sapMDialogFooter .sapMBtn {
  min-width: 6rem;
}

/* Category tree rows: name, test count, then "+" and "move" (faint until the row is hovered or chosen). */
html .pvTreeRow { gap: var(--pv-space-2); width: 100%; min-height: 32px; }
html .pvTreeRow__count { min-width: 1.5rem; text-align: right; }
html .pvTreeRow__actions { gap: 2px; flex: 0 0 auto; opacity: .45; transition: opacity .15s ease; }
html .sapMLIB:hover .pvTreeRow__actions,
html .sapMLIBSelected .pvTreeRow__actions,
html .pvTreeRow__actions:focus-within { opacity: 1; }
@media (hover: none) { html .pvTreeRow__actions { opacity: 1; } }
html .pvTreeRow__btn.sapMBtn,
html .pvTreeRow__btn.sapMBtn .sapMBtnInner { height: 28px; min-width: 28px; width: 28px; padding: 0; }
html .pvTreeRow__btn.sapMBtn .sapMBtnInner .sapMBtnIcon { line-height: 26px; height: 26px; width: 26px; margin: 0; font-size: .875rem; }
html .pvTreeRow__icon.sapUiIcon { color: var(--pv-text-muted); font-size: 1rem; }

/* The selected category's facts: where it sits, what is filed under it (icon and text spaced). */
.pvCatFacts { display: flex; flex-direction: column; gap: var(--pv-space-2); }
html .pvCatFact { gap: var(--pv-space-2); }
html .pvCatFact__icon.sapUiIcon { color: var(--pv-text-muted); font-size: 1rem; width: 1.25rem; }

/* The move dialog's tree fills the dialog body. */
html .pvMoveTree { border: 1px solid var(--pv-border); border-radius: var(--pv-radius); }