/*!
 * Proven-specific components on top of the shared design language (tokens.css → ui5-bridge.css →
 * proven.css → components.css). Colours come only from tokens.
 */

/* ---- Help "?" (design rule: explain settings that aren't self-evident) -------------------------- */
.pvHelp {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: var(--pv-space-1);
  padding: 0;
  border: 1px solid var(--pv-border-strong);
  border-radius: 50%;
  background: var(--pv-surface);
  color: var(--pv-text-muted);
  font: var(--pv-fw-semibold) 10px/1 var(--pv-font);
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--pv-dur-fast) var(--pv-ease), color var(--pv-dur-fast) var(--pv-ease);
}
.pvHelp:hover { background: var(--pv-accent-soft); color: var(--pv-accent); border-color: var(--pv-accent); }
/* The icon stays small, but fingers get a 40px target (touch guidelines) without moving anything. */
.pvHelp { position: relative; }
.pvHelp::after { content: ""; position: absolute; inset: -12px; }
.pvHelp:focus-visible { outline: none; box-shadow: var(--pv-focus-ring); }
html .pvHelp__text.sapMText { display: block; padding: var(--pv-space-3) var(--pv-space-4); line-height: var(--pv-lh); }
.pvField__labelRow { display: flex; align-items: center; gap: 2px; }
/* Labels with and without a help icon line up across a form row. */
html .pvField > .sapMLabel, html .pvField > .pvField__labelRow { min-height: 20px; display: flex; align-items: center; }

/* ---- File picker (logo upload, imports) ------------------------------------------------------------ */
.pvFilePicker { display: inline-flex; }
.pvFilePicker__input { display: none; }
.pvFilePicker__button {
  height: var(--pv-control-h);
  padding: 0 var(--pv-space-3);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  color: var(--pv-text);
  font: var(--pv-fw-medium) var(--pv-fs-md) var(--pv-font);
  cursor: pointer;
  transition: background var(--pv-dur-fast) var(--pv-ease), border-color var(--pv-dur-fast) var(--pv-ease);
}
.sapUiSizeCompact .pvFilePicker__button { height: var(--pv-control-h-compact); }
.pvFilePicker__icon { margin-right: var(--pv-space-2); font-size: 0.875rem; }
.pvFilePicker__button:hover { background: var(--pv-surface-2); border-color: var(--pv-accent); }
.pvFilePicker__button:focus-visible { outline: none; box-shadow: var(--pv-focus-ring); }
.pvFilePicker__button:disabled { opacity: .5; cursor: default; }

/* ---- Logo preview --------------------------------------------------------------------------------- */
.pvLogoRow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pv-space-5); }
.pvLogoPreview {
  display: grid;
  place-items: center;
  min-width: 220px;
  min-height: 88px;
  padding: var(--pv-space-3);
  border: 1px dashed var(--pv-border-strong);
  border-radius: var(--pv-radius);
  background: var(--pv-surface-2);
}
html .pvLogoPreview__img img, html img.pvLogoPreview__img { max-height: 64px; max-width: 200px; object-fit: contain; }
html .pvLogoRow .pvToolbar { border: none; padding: 0; }

/* ---- Sign-in: the organisation's brand ---------------------------------------------------------- */
html .pvAuth__org { margin-bottom: var(--pv-space-5); }
html .pvAuth__logo img, html img.pvAuth__logo { max-height: 56px; max-width: 240px; object-fit: contain; }
html .pvAuth__orgName.sapMTitle { font-size: var(--pv-fs-xl); font-weight: var(--pv-fw-semibold); }
html .pvAuth__invite.sapMMsgStrip { margin-bottom: var(--pv-space-4); }
.pvAuth__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pv-space-1);
  margin-top: var(--pv-space-5);
}
html .pvAuth__powered.sapMText { color: var(--pv-text-faint); font-size: var(--pv-fs-sm); }

/* ---- Settings dialog ---------------------------------------------------------------------------- */
html .pvSettings__heading.sapMTitle {
  margin: var(--pv-space-5) 0 var(--pv-space-2);
  font-size: var(--pv-fs-lg);
  font-weight: var(--pv-fw-semibold);
}
html .pvSettings__panel > .pvSettings__heading:first-child { margin-top: 0; }
.pvTfa__scan { display: flex; flex-wrap: wrap; gap: var(--pv-space-5); align-items: center; margin: var(--pv-space-3) 0; }
html .pvTfa__qr img, html img.pvTfa__qr { background: var(--pv-mail-canvas); border-radius: var(--pv-radius); padding: var(--pv-space-2); }
.pvTfa__keyBox { display: flex; flex-direction: column; gap: var(--pv-space-1); }
html .pvTfa__key.sapMText { font-family: var(--pv-font-mono); font-size: var(--pv-fs-lg); letter-spacing: .04em; word-break: break-all; }
html .pvTfa__codes.sapMList { margin: var(--pv-space-3) 0; columns: 2; font-family: var(--pv-font-mono); }
html .pvTfa__codes .sapMLIB { min-height: 2rem; border: none; }

/* ---- Impersonation banner (spec §3) ------------------------------------------------------------- */
/* A floating bar at the bottom of the screen: always in view, outside the shell's grid. */
.pvImpersonation {
  position: fixed;
  left: 50%;
  bottom: var(--pv-space-4);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--pv-space-3);
  max-width: calc(100vw - 2 * var(--pv-space-4));
  padding: var(--pv-space-2) var(--pv-space-2) var(--pv-space-2) var(--pv-space-4);
  background: var(--pv-warn-soft);
  color: var(--pv-warn);
  border: 1px solid var(--pv-warn);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-pop);
  font-size: var(--pv-fs-md);
  font-weight: var(--pv-fw-medium);
}
html .pvImpersonation .sapMText { color: inherit; }

/* ---- Organisation brand in portal headers -------------------------------------------------------- */
html .pvBrand__logo img, html img.pvBrand__logo { max-height: 28px; max-width: 160px; object-fit: contain; display: block; }

/* Takes the free space in a flex row (instead of an html spacer, which can't live inside bound templates). */
html .pvGrow { flex: 1 1 auto; min-width: 0; }
.pvChecklist__item { gap: var(--pv-space-3); padding: var(--pv-space-3) 0; border-bottom: 1px solid var(--pv-border); }
.pvChecklist__item:last-child { border-bottom: none; }

/* ---- Lists of cards (tests, defaults, designs) --------------------------------------------------- */
.pvCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--pv-space-4); }
.pvSectionTitle { margin: var(--pv-space-6) 0 var(--pv-space-3); }
html .pvSectionTitle.sapMTitle { font-size: var(--pv-fs-lg); font-weight: var(--pv-fw-semibold); }
html .pvMeta.sapMText { color: var(--pv-text-muted); font-size: var(--pv-fs-sm); }

/* ---- Small shared helpers -------------------------------------------------------------------------- */
html .pvMono, html .pvMono.sapMText { font-family: var(--pv-font-mono); font-size: var(--pv-fs-md); }
html .pvBreakAll, html .pvBreakAll.sapMText { word-break: break-all; }
.pvBadges { display: flex; flex-wrap: wrap; gap: var(--pv-space-1); align-items: center; }
.pvTitleRow { display: flex; flex-wrap: wrap; gap: var(--pv-space-3); align-items: center; }
html .pvHelpPopover .sapMPopoverCont { max-width: 22rem; }
html .pvDialogBody { display: flex; flex-direction: column; gap: var(--pv-space-4); }

/* ---- Question result (admin result detail and the test taker's own result) ------------------------- */
.pvResultList { display: flex; flex-direction: column; gap: var(--pv-space-3); }
.pvResultQ {
  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);
}
.pvResultQ--right { border-left-color: var(--pv-ok); }
.pvResultQ--wrong { border-left-color: var(--pv-danger); }
.pvResultQ--unanswered { border-left-color: var(--pv-text-faint); }
.pvResultQ__head { display: flex; align-items: center; gap: var(--pv-space-3); margin-bottom: var(--pv-space-3); font-size: var(--pv-fs-sm); }
.pvResultQ__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;
}
.pvResultQ__type { color: var(--pv-text-muted); }
.pvResultQ__points { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--pv-text-muted); }
.pvResultQ__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);
}
.pvResultQ__head .pvResultQ__outcome:first-of-type:last-child { margin-left: auto; }
.pvResultQ--right .pvResultQ__outcome { background: var(--pv-ok-soft); color: var(--pv-ok); }
.pvResultQ--wrong .pvResultQ__outcome { background: var(--pv-danger-soft); color: var(--pv-danger); }
.pvResultQ__text { margin-bottom: var(--pv-space-3); font-size: var(--pv-fs-base); line-height: var(--pv-lh); color: var(--pv-text); }
.pvResultQ__options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pv-space-1); }
.pvResultQ__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);
}
.pvResultQ__mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--pv-border-strong); box-sizing: border-box; }
.pvResultQ__option--chosen { color: var(--pv-text); background: var(--pv-surface-2); }
.pvResultQ__option--chosen .pvResultQ__mark { border-color: var(--pv-text-muted); background: var(--pv-text-muted); }
.pvResultQ__option--correct { color: var(--pv-text); }
.pvResultQ__option--correct .pvResultQ__mark { border-color: var(--pv-ok); background: var(--pv-ok); }
.pvResultQ__option--correct.pvResultQ__option--chosen { background: var(--pv-ok-soft); }
.pvResultQ__option--wrong { background: var(--pv-danger-soft); }
.pvResultQ__option--wrong .pvResultQ__mark { border-color: var(--pv-danger); background: var(--pv-danger); }
.pvResultQ__optionText { flex: 1; font-size: var(--pv-fs-base); }
.pvResultQ__tag { font-size: var(--pv-fs-xs); color: var(--pv-text-muted); }
.pvResultQ__answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pv-space-3); }
.pvResultQ__answer { padding: var(--pv-space-3); border-radius: var(--pv-radius); background: var(--pv-surface-2); font-size: var(--pv-fs-md); }
.pvResultQ__answer ul { margin: 0; padding-left: var(--pv-space-4); }
.pvResultQ__answer--correct { background: var(--pv-ok-soft); }
.pvResultQ__answerTitle {
  margin-bottom: 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-muted);
}
.pvResultQ__none { color: var(--pv-text-faint); }
.pvResultQ__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-md); }
.pvResultQ__explanationLabel { display: block; margin-bottom: var(--pv-space-1); font-size: var(--pv-fs-xs); font-weight: var(--pv-fw-semibold); text-transform: uppercase; letter-spacing: var(--pv-tracking-label); color: var(--pv-text-muted); }

/* ---- Locked (synced) settings ------------------------------------------------------------------- */
.pvLocked { position: relative; }
html .pvLocked .sapMInputBase, html .pvLocked .sapMSelect, html .pvLocked .sapMSwitch { opacity: .65; }

/* ---- System portal: billing ------------------------------------------------------------------------- */
/* Billing (system portal): the period bar with its chips, and the breakdown chips. */
.pvBillBar {
  display: flex;
  flex-direction: column;
  gap: var(--pv-space-3);
  padding: var(--pv-space-4) var(--pv-space-5);
}
html .pvBillBar__row { gap: var(--pv-space-3); }
html .pvBillBar__meta { gap: var(--pv-space-2); min-height: 28px; }
html .pvBillBar__icon.sapUiIcon { color: var(--pv-accent); font-size: 1rem; }
html .pvBillBar__error.sapMMsgStrip { margin: 0; }
html .pvBillChips { gap: var(--pv-space-2); }

/* A chip: a pill that is filled when chosen (sap.m.ToggleButton underneath). */
html .pvBillChip.sapMBtn { height: auto; padding: 0; }
html .pvBillChip.sapMBtn .sapMBtnInner {
  height: 32px;
  min-width: 0;
  padding: 0 var(--pv-space-3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-pill);
  background: var(--pv-surface);
  color: var(--pv-text-muted);
  font-size: var(--pv-fs-sm);
  font-weight: var(--pv-fw-medium);
  text-shadow: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html .pvBillChip.sapMBtn .sapMBtnInner .sapMBtnContent { line-height: 30px; }
html .pvBillChip.sapMBtn .sapMBtnIcon { color: inherit; font-size: .875rem; }
html .pvBillChip.sapMBtn:hover .sapMBtnInner {
  border-color: var(--pv-accent);
  color: var(--pv-text);
  background: var(--pv-surface);
}
html .pvBillChip.sapMBtn .sapMToggleBtnPressed,
html .pvBillChip.sapMBtn:hover .sapMToggleBtnPressed {
  border-color: var(--pv-accent);
  background: var(--pv-accent-soft);
  color: var(--pv-accent);
  font-weight: var(--pv-fw-semibold);
}
html .pvBillChips--small { gap: 6px; }
html .pvBillChips--small .pvBillChip.sapMBtn .sapMBtnInner { height: 28px; padding: 0 10px; }
html .pvBillChips--small .pvBillChip.sapMBtn .sapMBtnInner .sapMBtnContent { line-height: 26px; }

/* A card head whose controls sit under the titles (the breakdown chips). */
.pvDashCard__head--stack { flex-direction: column; align-items: stretch; }
html .pvBillMore.sapMLnk { display: inline-block; margin-top: var(--pv-space-3); font-size: var(--pv-fs-sm); }

@media (max-width: 640px) {
  .pvBillBar { padding: var(--pv-space-3) var(--pv-space-4); }
  html .pvBillBar .sapMDRS { width: 100% !important; }
}

/* ---- System portal: API reference ------------------------------------------------------------------- */
.pvCodeBlock { margin: 0; padding: var(--pv-space-3) var(--pv-space-4); border-radius: var(--pv-radius); background: var(--pv-surface-2);
  border: 1px solid var(--pv-border); overflow-x: auto; }
html .pvCodeBlock .sapMText { font-family: var(--pv-font-mono); font-size: var(--pv-fs-sm); }
html .pvApiTable .pvMono.sapMText { word-break: break-all; }

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

/* ---- Analytics consent banner (shared/analytics.js — plain DOM, outside UI5) ------------------------ */
.pvConsent {
  position: fixed;
  left: var(--pv-space-4);
  right: var(--pv-space-4);
  bottom: var(--pv-space-4);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-space-3) var(--pv-space-4);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--pv-space-4);
  background: var(--pv-surface);
  color: var(--pv-text);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius-lg);
  box-shadow: var(--pv-shadow-2, var(--pv-shadow-1));
  font: var(--pv-fs-sm)/1.5 var(--pv-font);
}

.pvConsent__text { flex: 1 1 18rem; margin: 0; }

.pvConsent__actions { display: flex; gap: var(--pv-space-2); margin-left: auto; }

.pvConsent__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-2);
  min-height: 2.25rem;
  padding: 0 var(--pv-space-4);
  font: inherit;
  font-weight: var(--pv-fw-semibold);
  color: var(--pv-text);
  background: var(--pv-surface);
  border: 1px solid var(--pv-border-strong);
  border-radius: var(--pv-radius);
  cursor: pointer;
}

.pvConsent__btn--primary { background: var(--pv-accent); border-color: var(--pv-accent); color: var(--pv-on-accent, var(--pv-surface)); }

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

html .pvApiSection { gap: var(--pv-space-2); }
.pvCodeBlock--tall { max-height: 22rem; overflow: auto; }
html .pvApiParams .sapMListTblCell { vertical-align: top; }