/* Ügyfélportál – operátori felület a Hubban, Iroda: Értesítési e-mailek (pf-nt-), Számlázási címek (pf-ba-),
   Mérőórák, munkaórák és Ajánlatkérések (pf-). A portál admin-notifications.css és admin-office-2.css
   stílusaiból, „pf-” előtaggal; a közös elemek (statisztika, eszköztár, fülek, ablak) a portal-ops.css po- osztályai. */

/* --- Közös: a portál alaposztályainak megfelelői ----------------------------------- */
.pf-page .button, .pf-modal .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.pf-page .button .po-icon, .pf-modal .button .po-icon { width: 15px; height: 15px; margin: 0; flex: none; }
.pf-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.pf-nowrap { white-space: nowrap; }
.pf-dim { color: #a6b3ba; }
.pf-link { color: var(--blue-deep); font-weight: 800; text-decoration: none; }
.pf-link:hover { text-decoration: underline; }
.pf-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pf-person > span { display: grid; min-width: 0; }
.pf-person small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pf-logo { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #8fc0d2, var(--blue-dark)); color: #fff; }
.pf-logo .po-icon { width: 56%; height: 56%; }
.pf-logo.has-photo { overflow: hidden; padding: 0; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pf-logo.has-photo img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.pf-row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pf-row-actions.pf-center { justify-content: center; margin-top: 8px; }
.pf-soft-note { display: flex; align-items: center; gap: 8px; margin: 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pf-soft-note .po-icon { flex: none; }
.pf-warning { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border: 1px solid #f0ddb0; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 650; }
.pf-warning .po-icon { flex: none; margin-top: 1px; }
.pf-loading { display: grid; min-height: 92px; place-items: center; align-content: center; gap: 8px; padding: 14px; color: var(--muted); }
.pf-loading strong { color: var(--blue-deep); font-size: 13px; }
.pf-badge-icon { gap: 3px; }
.pf-badge-icon .po-icon { width: 12px; height: 12px; }
.pf-table table { min-width: 980px; }
.pf-table tr.pf-inactive td { color: var(--muted); }
.pf-table tr.pf-inactive strong { color: var(--muted); }
.pf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pf-panel-head h3 { margin: 0; font-size: 13.5px; }
.pf-panel-head p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.pf-page .po-empty-state p, .pf-modal .po-empty-state p { max-width: 430px; margin: 0; font-size: 12px; }
.pf-page .po-toolbar .pf-select { width: auto; min-width: 150px; max-width: 240px; min-height: 36px; }
.pf-busy { cursor: progress; opacity: .65; }

/* --- Ablak ---------------------------------------------------------------------------- */
.pf-modal .po-modal-foot { justify-content: flex-end; }
.pf-modal .po-modal-foot .po-spacer { flex: 1; }
.po-modal.pf-modal-wide { width: min(880px, calc(100vw - 30px)); }
.pf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pf-form-grid .pf-full { grid-column: 1 / -1; }
.pf-modal .form-hint { margin-bottom: 0; }

/* --- Értesítési e-mailek ---------------------------------------------------- */
.pf-nt-note { align-items: flex-start; }
.pf-nt-note .po-icon { margin-top: 1px; }
.pf-nt-table table { min-width: 0; table-layout: fixed; }
.pf-nt-table th:nth-child(1) { width: 27%; }
.pf-nt-table th:nth-child(3) { width: 96px; }
.pf-nt-table th:nth-child(4) { width: 150px; }
.pf-nt-table th:nth-child(5) { width: 112px; }
.pf-nt-table td { vertical-align: top; }
.pf-nt-table td.pf-nt-active-cell, .pf-nt-table td.pf-nt-save-cell { padding-top: 12px; }
.pf-nt-table .pf-person { padding-top: 3px; }
.pf-nt-table .pf-person .pf-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-nt-emails { display: block; width: 100%; min-height: 36px; max-height: 220px; padding: 7px 10px; overflow-y: auto; resize: none; border-color: #d9e2e6; font-size: 12.5px; line-height: 1.45; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.pf-nt-emails:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(98, 165, 192, .16); }
.pf-nt-emails[readonly] { border-color: transparent; background: #f8fafb; color: var(--ink); cursor: default; }
.pf-nt-emails[readonly]:focus { box-shadow: none; }
.pf-nt-emails::placeholder { color: #a3b0b6; }
tr.pf-dirty .pf-nt-emails:not([readonly]) { border-color: #e1c27e; background: #fffdf7; }
tr.pf-dirty td:first-child { box-shadow: inset 3px 0 0 #e1b85f; }
.pf-nt-hint { display: block; min-height: 0; margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.pf-nt-hint:empty { display: none; }
.pf-nt-hint.warn { color: var(--warn); }
.pf-nt-hint.bad { color: var(--bad); font-weight: 650; }
.pf-nt-none { margin-top: 4px; }
.pf-nt-save-cell { text-align: right; }
.pf-nt-save-cell .button { min-width: 88px; }
tr.pf-saved td { animation: pf-saved 1.6s ease; }
@keyframes pf-saved { 0% { background: var(--good-bg); } 100% { background: transparent; } }

/* Csúszókapcsoló – a natív checkbox marad (billentyűzet, képernyőolvasó). */
.pf-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; font-size: 11.5px; font-weight: 750; user-select: none; }
.pf-switch input { position: absolute; width: 36px; height: 20px; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: inherit; }
.pf-switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: #cfd9de; transition: background-color .2s ease; }
.pf-switch-track::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(29, 49, 58, .25); content: ""; transition: transform .2s ease; }
.pf-switch input:checked + .pf-switch-track { background: var(--blue-dark); }
.pf-switch input:checked + .pf-switch-track::after { transform: translateX(16px); }
.pf-switch input:focus-visible + .pf-switch-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.pf-switch input:disabled { cursor: default; }
.pf-switch input:disabled + .pf-switch-track { opacity: .55; }
.pf-switch-text { min-width: 16px; color: var(--muted); }
.pf-switch input:checked ~ .pf-switch-text { color: var(--blue-deep); }

/* Teszt- és előnézeti ablak */
.pf-nt-test-grid { margin-bottom: 12px; }
.pf-nt-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 6px; }
.pf-nt-day-head strong { color: var(--blue-deep); font-size: 13px; }
.pf-nt-day { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pf-nt-day .po-empty-state { min-height: 0; }
.pf-nt-day .form-error { margin: 10px 12px; }
.pf-nt-day-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.pf-nt-day-row:last-child { border-bottom: 0; }
.pf-nt-day-main { display: grid; min-width: 0; }
.pf-nt-day-main strong { font-size: 12.5px; }
.pf-nt-day-main small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pf-nt-day-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pf-nt-preview { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #edf3f5; }
.pf-nt-preview > .form-error { margin: 10px 12px; }
.pf-nt-preview-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.pf-nt-preview-head span { display: grid; min-width: 0; }
.pf-nt-preview-head small { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.pf-nt-preview-head strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pf-nt-preview-frame { display: block; width: 100%; height: 480px; border: 0; background: #edf3f5; }

/* --- Számlázási címek és árlisták ------------------------------------------- */
.pf-ba-table table { min-width: 0; }
.pf-ba-table th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
.pf-ba-table td { vertical-align: top; }
.pf-ba-table td:first-child { min-width: 150px; }
.pf-ba-table th, .pf-ba-table td { padding-right: 9px; padding-left: 9px; }
.pf-ba-table .pf-person { padding-top: 1px; }
.pf-ba-table .pf-person .pf-link { overflow-wrap: break-word; }
.pf-ba-strong { font-weight: 650; }
.pf-ba-address { display: block; min-width: 130px; }
.pf-ba-email { display: block; overflow-wrap: break-word; }
.pf-ba-count b { color: var(--blue-deep); font-size: 15px; font-variant-numeric: tabular-nums; }
.pf-ba-actions .pf-row-actions { flex-direction: column; align-items: stretch; }
.pf-ba-actions .button { justify-content: flex-start; }

@media (min-width: 1500px) {
  .pf-ba-actions .pf-row-actions { flex-direction: row; }
}

/* Asztali szélesség alatt kártyák: a kilenc oszlop táblázatban már nem fér el. */
@media (max-width: 1100px) {
  .pf-ba-table { overflow: visible; border: 0; background: none; }
  .pf-ba-table table, .pf-ba-table tbody { display: block; }
  .pf-ba-table thead { display: none; }
  .pf-ba-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .pf-ba-table tbody tr:hover td { background: none; }
  .pf-ba-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .pf-ba-table td[data-label]::before { display: block; margin-bottom: 3px; color: var(--muted); content: attr(data-label); font-size: 9.5px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
  .pf-ba-table td:first-child { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .pf-ba-table td:first-child::before { display: none; }
  .pf-ba-table td.pf-ba-actions { grid-column: 1 / -1; }
  .pf-ba-actions .pf-row-actions { flex-direction: row; justify-content: flex-start; }
  .pf-ba-address { min-width: 0; }
}

/* --- Mérőórák: eszköztár, időszakválasztó ------------------------------------------- */
.pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-tabs button .po-icon { width: 16px; height: 16px; }
.pf-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 12px; }
.pf-seg { display: inline-flex; flex: none; gap: 3px; padding: 3px; border-radius: 9px; background: #e8f1f5; }
.pf-seg button { min-height: 30px; padding: 5px 11px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.pf-seg button:hover { color: var(--blue-deep); }
.pf-seg button.active { background: #fff; color: var(--blue-deep); box-shadow: 0 2px 7px rgba(40, 87, 107, .14); }
.pf-period-nav { display: flex; align-items: center; gap: 4px; }
.pf-period-nav .po-icon-button .po-icon { width: 17px; height: 17px; }
.pf-period-nav > input[type=date] { width: 146px; min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.pf-period-label { min-width: 0; padding: 0 2px; color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.pf-period .button.small { min-height: 30px; }
.pf-period .button.small:disabled { opacity: .45; cursor: default; }

.pf-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.pf-stats .po-stat { min-width: 0; padding: 8px 12px 9px; }
.pf-stats .po-stat span { white-space: nowrap; }
.pf-stats .po-stat b { font-size: 16.5px; }
.pf-body { display: grid; gap: 10px; transition: opacity .2s ease; }
.pf-body.pf-busy, #pf-lead-body.pf-busy { opacity: .55; pointer-events: none; cursor: default; }
.pf-error p, .pf-notice p { max-width: 560px; line-height: 1.5; }

/* --- Mérőóra-táblázat ------------------------------------------------------------ */
.pf-meter-table th.pf-num, .pf-meter-table td.pf-num, .pf-attendance-table .pf-num { text-align: right; }
.pf-meter-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-meter-table td b { font-weight: 750; }
.pf-meter-table .pf-sticky { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--line); }
.pf-meter-table th.pf-sticky { z-index: 2; background: #f8fafb; }
.pf-meter-table tbody tr:hover td.pf-sticky { background: #fbfdfe; }
.pf-meter-table td.pf-sticky .badge { margin-top: 4px; }
.pf-meter-table .pf-weekend td.pf-sticky strong { color: var(--blue-dark); }
.pf-meter-table .pf-future td { color: #9aa8af; }
.pf-meter-table .pf-future td.pf-sticky strong { color: #9aa8af; }
.pf-today { color: var(--blue-dark); font-weight: 800; }
.pf-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 11px; font-size: 12px; font-weight: 800; }
.pf-pill.good { background: var(--good-bg); color: var(--good); }
.pf-pill.warn { background: var(--warn-bg); color: var(--warn); }
.pf-pill.bad { background: var(--bad-bg); color: var(--bad); }
.pf-negative { color: var(--bad); }
.pf-actions { width: 44px; text-align: right; }
.po-icon-button.pf-mini { width: 28px; height: 28px; border-radius: 7px; }
.po-icon-button.pf-mini .po-icon { width: 15px; height: 15px; }
.po-icon-button.pf-mini.primary { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff; }
.po-icon-button.pf-mini.primary:hover { background: var(--blue-deep); }
.pf-amount-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
.pf-amount-btn:hover, .pf-amount-btn:focus-visible { border-color: var(--line); background: var(--blue-soft); outline: none; }
.pf-amount-pen { display: grid; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.pf-amount-pen .po-icon { width: 14px; height: 14px; }
tr:hover .pf-amount-pen, .pf-amount-btn:focus-visible .pf-amount-pen { opacity: .8; }
@media (hover: none) { .pf-amount-pen { opacity: .6; } }
.pf-page .button.small.pf-ghost { border-style: dashed; color: var(--blue-dark); }
.pf-page .button.small.pf-ghost .po-icon { width: 14px; height: 14px; }
.pf-amount-form { display: inline-flex; align-items: center; gap: 4px; }
.pf-amount-form input { width: 118px; min-height: 30px; padding: 4px 8px; font-variant-numeric: tabular-nums; text-align: right; }
.pf-unit { color: var(--muted); font-size: 11.5px; font-weight: 700; }

/* --- Szerkesztő ablak --------------------------------------------------------------- */
.pf-o2-dialog .po-modal-foot { flex-wrap: wrap; align-items: center; }
.pf-meter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px 10px; min-width: 0; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.pf-fieldset legend { padding: 0 5px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.pf-fieldset legend small { color: var(--muted); font-weight: 650; }
.pf-fieldset input { font-variant-numeric: tabular-nums; }
.pf-use { grid-column: 1 / -1; min-height: 16px; margin: 0; color: var(--blue-deep); font-size: 11.5px; font-weight: 700; }
.pf-use.bad { color: var(--bad); }
.pf-fieldset .form-hint { grid-column: 1 / -1; margin: -4px 0 0; padding: 6px 9px; }
.pf-meter-hint { margin-top: 12px; }

/* --- Diagram ------------------------------------------------------------------------ */
.pf-chart-card .pf-panel-head { flex-wrap: wrap; padding: 12px 14px; }
.pf-chart-card .pf-panel-head h3 { margin: 0; font-size: 15px; }
.pf-chart-card .pf-panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.pf-chart { position: relative; min-height: 250px; padding: 10px 6px 0; }
.pf-chart .po-empty-state { min-height: 230px; align-content: center; }
.pf-chart .po-empty-state .po-icon { width: 28px; height: 28px; }
.pf-chart-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; outline: none; }
.pf-chart-svg:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px var(--blue); }
.pf-chart-svg text { font-family: inherit; }
.pf-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-axis-title { fill: var(--muted); font-size: 10.5px; font-weight: 750; letter-spacing: .2px; }
.pf-grid-line { stroke: #edf1f3; stroke-width: 1; }
.pf-baseline { stroke: #c9d5db; stroke-width: 1; }
.pf-bands rect { fill: transparent; }
.pf-bands rect.is-active { fill: var(--blue-soft); }
.pf-bars path { fill: var(--blue-dark); transition: fill .12s ease; }
.pf-bars path.is-active { fill: var(--blue-deep); }
.pf-missing { fill: #c3ced4; }
.pf-value-label { fill: var(--ink); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-tooltip { position: absolute; z-index: 5; display: grid; gap: 1px; min-width: 130px; max-width: 240px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(25, 55, 68, .16); pointer-events: none; transform: translate(-50%, -100%); }
.pf-tooltip[hidden] { display: none; }
.pf-tooltip strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.pf-tooltip span { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.pf-tooltip small { color: var(--muted); font-size: 10.5px; }
.pf-chart-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 16px 13px; color: var(--muted); font-size: 11.5px; }
.pf-chart-foot b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Jelenléti ív ----------------------------------------------------------------------- */
.pf-attendance-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 12px; }
.pf-attendance-main { display: grid; min-width: 0; gap: 10px; }
.pf-table.pf-attendance-table table { min-width: 640px; }
.pf-attendance-table td { font-variant-numeric: tabular-nums; }
.pf-pin { color: var(--muted); letter-spacing: 2px; }
.pf-people { min-width: 0; }
.pf-people .pf-panel-head h3 { margin: 0; font-size: 14px; }
.pf-people .pf-panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.pf-people-list { max-height: 560px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.pf-people-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.pf-people-list li:last-child { border-bottom: 0; }
.pf-people-list span { display: grid; min-width: 0; }
.pf-people-list strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.pf-people-list small { color: var(--muted); font-size: 10.5px; }
.pf-people-list b { color: var(--blue-deep); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-people-list i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--pf-share, 0%), #edf2f4 var(--pf-share, 0%)); }

/* --- Ajánlatkérések ----------------------------------------------------------------------- */
.pf-table.pf-lead-table table { min-width: 1020px; }
.pf-lead-table td .pf-sub { font-size: 10.5px; }
.pf-status { width: auto; min-width: 140px; min-height: 32px; padding: 4px 28px 4px 10px; border-radius: 9px; font-size: 12px; font-weight: 800; cursor: pointer; }
.pf-status.bad { border-color: #efc9c7; background-color: var(--bad-bg); color: var(--bad); }
.pf-status.warn { border-color: #efd9a9; background-color: var(--warn-bg); color: var(--warn); }
.pf-status.good { border-color: #b9dcc7; background-color: var(--good-bg); color: var(--good); }
.pf-status:disabled { opacity: .6; cursor: progress; }
.pf-status option { background: #fff; color: var(--ink); }
.pf-note { width: 240px; min-width: 170px; max-width: 240px; }
@media (min-width: 1600px) { .pf-note { width: 340px; max-width: 340px; } }
@media (max-width: 1399px) { .pf-note { width: 168px; min-width: 150px; max-width: 168px; } .pf-status { min-width: 132px; } .pf-table.pf-lead-table table { min-width: 900px; } .pf-lead-table th, .pf-lead-table td { padding-right: 9px; padding-left: 9px; } }
.pf-note-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: pre-line; }
.pf-src-link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue-dark); font-weight: 700; text-decoration: none; }
.pf-src-link .po-icon { width: 12px; height: 12px; }
.pf-stat-bad b { color: var(--bad); }
.pf-stat-warn b { color: var(--warn); }
.pf-stat-good b { color: var(--good); }
#pf-lead-body { transition: opacity .2s ease; }
.pf-notice .pf-sub { margin-top: 4px; }

/* --- QR kód --------------------------------------------------------------------------------- */
.pf-qr { display: grid; justify-items: center; gap: 12px; text-align: center; }
.pf-qr-frame { width: min(260px, 68vw); padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.pf-qr-frame svg { display: block; width: 100%; height: auto; }
.pf-qr-url { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-deep); font-size: 13px; font-weight: 800; text-decoration: none; word-break: break-all; }
.pf-qr-url .po-icon { width: 14px; height: 14px; flex: none; }
.pf-qr .form-hint { max-width: 420px; }

/* --- Reszponzív ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pf-attendance-grid { grid-template-columns: 1fr; }
  .pf-people-list { max-height: none; }
}
@media (max-width: 760px) {
  /* Értesítési e-mailek: soronként kártya, a kapcsoló a jobb felső sarokban. */
  .pf-nt-table { overflow: visible; border: 0; background: none; }
  .pf-nt-table table, .pf-nt-table tbody { display: block; }
  .pf-nt-table thead { display: none; }
  .pf-nt-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
  .pf-nt-table tbody tr:hover td { background: none; }
  .pf-nt-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .pf-nt-table td.pf-nt-active-cell, .pf-nt-table td.pf-nt-save-cell { padding-top: 0; }
  .pf-nt-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .pf-nt-table td.pf-nt-active-cell { grid-column: 2; grid-row: 1; align-self: center; }
  .pf-nt-table td.pf-nt-emails-cell { grid-column: 1 / -1; }
  .pf-nt-table td:nth-child(4) { grid-column: 1; align-self: center; }
  .pf-nt-table td.pf-nt-save-cell { grid-column: 2; align-self: center; }
  .pf-nt-table td:nth-child(4)::before { display: block; margin-bottom: 2px; color: var(--muted); content: attr(data-label); font-size: 9.5px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
  tr.pf-dirty td:first-child { box-shadow: none; }
  .pf-nt-table tr.pf-dirty { border-color: #e1c27e; box-shadow: inset 3px 0 0 #e1b85f; }
  .pf-nt-emails { font-size: 16px; } /* iOS: 16 px alatt a mező fókuszálásakor ráközelítene. */
  .pf-nt-day-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-nt-day-badges { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .pf-nt-day-row .button { grid-column: 2; grid-row: 1 / span 2; }
  .pf-nt-preview-head { grid-template-columns: 1fr; gap: 6px; }
  .pf-nt-preview-frame { height: 420px; }
  .pf-form-grid { grid-template-columns: 1fr; }

  .pf-ba-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px; }
  .pf-ba-table td:nth-child(4), .pf-ba-table td:nth-child(5) { grid-column: 1 / -1; }
  .pf-ba-actions .pf-row-actions { flex-wrap: wrap; }
  .pf-ba-actions .button { flex: 1 1 120px; justify-content: center; }

  .pf-toolbar .po-spacer { display: none; }
  .pf-tabs { width: 100%; }
  .pf-tabs button { flex: 1; justify-content: center; padding: 8px 10px; }
  .pf-period { width: 100%; }
  .pf-period-label { flex: 1; text-align: right; }
  .pf-toolbar > #pf-export { margin-left: auto; }
  .pf-meter-form { grid-template-columns: 1fr; }
  .pf-chart-card .pf-panel-head .pf-seg { width: 100%; overflow-x: auto; }
  .pf-chart-card .pf-panel-head .pf-seg button { flex: 1; }
  .pf-chart { padding: 8px 2px 0; }
  .pf-modal .po-modal-foot .po-spacer { display: none; }
  .pf-modal .po-modal-foot .button { flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .pf-period { gap: 6px; padding: 6px; }
  .pf-period .pf-seg { order: 1; }
  .pf-period #pf-today { order: 2; margin-left: auto; }
  .pf-period-nav { order: 3; flex: 1 1 100%; }
  .pf-period-nav > input[type=date] { flex: 1; width: auto; min-width: 0; }
  .pf-period-label { order: 4; flex: 1 1 100%; padding: 0 4px 2px; text-align: center; }
  .pf-tabs button span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  tr.pf-saved td { animation: none; }
  .pf-switch-track, .pf-switch-track::after, .pf-nt-emails, .pf-body, #pf-lead-body, .pf-bars path, .pf-seg button { transition: none; }
}