/* ============================================================================
 * MelóPont — közös felugró ablak alap (DIALOG-BASE-01, 2026.10.10) — előtag: mp-rd-
 *   A <dialog class="mp-rd"> minden ablak alapja: válasz jelentkezésre (app-tracking.js),
 *   interjúra hívás / időpont-ajánló, lezárás (hiring-flow.js), visszaigazoló ablak (.mp-si-dlg).
 *   Eddig a css/app-tracking.css-ben élt — az /ajanlasok.html nem töltötte be, ott az
 *   „Interjúra hívás” ablak formázatlanul, a képernyő bal széléhez tapadva nyílt (László, 10.10).
 *   Szabály: minden oldal, ami a hiring-flow.js / app-tracking.js / quick-recs.js fájlt tölti,
 *   ezt is betölti — a dialog_check.py méri.
 * Színek csak tokenből. Min. betűméret 14px, gombok min. 44px magasak.
 * ========================================================================== */
:root {
  --rd-blue: var(--mp-blue);
  --rd-blue-soft: var(--mp-blue-light);
  --rd-green: var(--mp-green);
  --rd-green-ink: #06582F;
  --rd-red-ink: #A30D12;
  --rd-red-soft: var(--mp-red-light);
  --rd-ink: var(--mp-text-primary);
  --rd-text: #2B3340;
  --rd-muted: var(--mp-text-muted);
  --rd-soft: var(--mp-surface-2, #F6F8FB);
  --rd-line: var(--mp-card-border);
}

.mp-rd {
  /* a lapok globális `* { margin: 0 }` nullázása miatt a modális ablak balra tapadt — mérve 10.04 */
  margin: auto;
  max-width: calc(100vw - 24px);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--rd-line);
  border-radius: var(--mp-card-radius, 16px);
  background: var(--mp-white);
  color: var(--rd-text);
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
.mp-rd::backdrop { background: rgba(16, 24, 40, .55); }
.mp-rd-body { display: grid; gap: 10px; padding: 22px; overflow: auto; }
.mp-rd-title { margin: 0; font-size: calc(19px * var(--mp-fs, 1)); font-weight: 800; color: var(--rd-ink); line-height: 1.3; overflow-wrap: anywhere; }
.mp-rd-sub { margin: -4px 0 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--rd-muted); }
.mp-rd-hint { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.5; color: var(--rd-text); }
.mp-rd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-rd-templates { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mp-rd-tpl {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--rd-line); border-radius: 12px;
  background: var(--rd-soft); cursor: pointer;
  font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--rd-ink);
}
.mp-rd-tpl input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--rd-blue); }
.mp-rd-tpl:has(input:checked) { border-color: var(--rd-blue); background: var(--rd-blue-soft); }
.mp-rd--reject .mp-rd-tpl:has(input:checked) { border-color: var(--rd-red-ink); background: var(--rd-red-soft); }
.mp-rd-label { font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; color: var(--rd-ink); }
.mp-rd-text {
  width: 100%; box-sizing: border-box; min-height: 88px; padding: 10px 12px;
  border: 1px solid var(--rd-line); border-radius: 12px; resize: vertical;
  font: inherit; font-size: calc(16px * var(--mp-fs, 1)); line-height: 1.45; color: var(--rd-ink); background: var(--mp-white);
}
.mp-rd-text:focus { outline: none; border-color: var(--rd-blue); box-shadow: 0 0 0 3px var(--rd-blue-soft); }
.mp-rd-count { margin: -4px 0 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--rd-muted); }
.mp-rd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.mp-rd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: var(--mp-radius-pill);
  border: 1px solid transparent; font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; cursor: pointer;
}
.mp-rd-btn:focus-visible { outline: 3px solid var(--rd-blue); outline-offset: 2px; }
.mp-rd-btn:disabled { background: var(--mp-disabled-bg); border-color: var(--mp-disabled-border); color: var(--mp-disabled-text); cursor: progress; }
.mp-rd-btn--ghost { background: var(--mp-white); border-color: var(--rd-line); color: var(--rd-ink); }
.mp-rd-btn--ghost:hover { background: var(--rd-soft); }
.mp-rd-btn--accept { background: var(--rd-green); color: var(--mp-white); }
.mp-rd-btn--accept:hover { background: var(--rd-green-ink); }
.mp-rd-btn--reject { background: var(--rd-red-ink); color: var(--mp-white); }
.mp-rd-btn--reject:hover { background: var(--mp-red); }
/* AUDIT-UX-01 (10.19): nem végleges fő lépés (pl. „Szüneteltetem”) — a néző szerepkör-színe, nem a piros */
.mp-rd-btn--primary { background: var(--mp-role, #0A66C2); color: var(--mp-white); }
.mp-rd-btn--primary:hover { background: var(--mp-role-hover, #004182); }
@media (max-width: 480px) {
  .mp-rd-body { padding: 18px 14px; }
  .mp-rd-actions .mp-rd-btn { flex: 1 1 100%; }
}