/* R5 redizajn V6.2 (3D_V3/PLAN-DALSIA-FAZA/REDIZAJN-V6-2/PLAN.md časť 5): spoločné komponenty z web/ui-kit-v62.js (hlavička stránky, dlaždice KPI, čipy, záložky, panely, prázdny stav).
   Súbor založil a v web/index.html pripojil R1 iba s touto hlavičkou; pravidlá píše vlastník balíka, tokeny sú v tokens-v62.css. */
/* Pravidlá R5: hodnoty z prototypu V6.2 (OTVORIT-PROTOTYP-V6.2.html riadky 58 až 75, 255 až 268, 365 až 367, 587, 658 až 711, 1091 až 1093),
   farby z tokenov; doslovné odtiene iba tam, kde ich V6.2 nemá ako token. Triedy majú predponu v62-; panel, upozornenie a záložky dopĺňajú .panel, .notice a .tabs. */
.v62-page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:14px}
.v62-page-title{min-width:0}
.v62-page-head h1{margin:0;font-size:var(--text-3xl);line-height:1.2;letter-spacing:-.4px;overflow-wrap:anywhere}
.v62-eyebrow,.v62-page-sub{margin:0}
.v62-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.v62-page-sub{margin-top:2px;font-size:var(--text-sm);color:var(--muted);overflow-wrap:anywhere}
.v62-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.v62-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(136px,100%),1fr));gap:var(--space-2)}
.v62-tile{display:flex;flex-direction:column;gap:1px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:inherit;text-align:left}
button.v62-tile:hover{border-color:#b9cadd;background:#fbfdff}
.v62-tile-label,.v62-tile-sub{overflow:hidden;font-size:var(--text-xs);color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.v62-tile-sub{line-height:1.35}
.v62-tile-label{font-weight:600}
.v62-tile-value{overflow:hidden;font-size:20px;line-height:26px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.v62-tile.tone-amber{box-shadow:inset 3px 0 0 #e0a43a}.v62-tile.tone-amber .v62-tile-value{color:#8a5a10}
.v62-tile.tone-red{box-shadow:inset 3px 0 0 #d9534a}.v62-tile.tone-red .v62-tile-value{color:var(--red)}
.v62-tile.tone-green{box-shadow:inset 3px 0 0 #3aa577}.v62-tile.tone-green .v62-tile-value{color:var(--green)}
.v62-tile.tone-violet{box-shadow:inset 3px 0 0 #8c74c4}.v62-tile.tone-violet .v62-tile-value{color:var(--violet)}
.v62-tile.tone-blue{box-shadow:inset 3px 0 0 #4f86dd}
.v62-tile.is-on{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow-ring)}
.v62-tile.is-on .v62-tile-label{color:var(--blue)}
.v62-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.v62-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px;border:1px solid #d6e0eb;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-2);font-size:var(--text-xs);font-weight:600}
.v62-chip:hover{border-color:var(--accent-line)}
.v62-chip.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.v62-count{min-width:18px;padding:0 6px;border-radius:var(--radius-pill);background:var(--gray-bg);color:var(--ink-2);font-size:var(--text-xs);font-weight:600;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.v62-chip.is-on .v62-count,.tabs .tab.active .v62-count{background:var(--accent);color:var(--surface)}
.v62-seg{display:inline-flex;gap:2px;max-width:100%;padding:2px;overflow-x:auto;border-radius:var(--radius-control);background:#e9eef5;scrollbar-width:none}
.v62-seg-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:0 11px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.v62-seg-item.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(21,36,56,.14)}
.v62-panel-head{justify-content:flex-start}
.v62-panel-sub{color:var(--muted);font-size:var(--text-xs)}
.v62-panel-right{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.v62-notice{display:flex;align-items:flex-start;gap:9px}
.v62-notice>.icon{margin-top:2px}
.v62-notice-text{min-width:0}
.v62-notice.tone-blue>.icon{color:var(--blue)}
.v62-notice.tone-amber>.icon{color:var(--amber)}
.v62-notice.tone-red{border-color:#f5c9c3;background:var(--red-bg)}.v62-notice.tone-red>.icon{color:var(--red)}
.v62-notice.tone-green{border-color:#c9e8d6;background:var(--green-bg)}.v62-notice.tone-green>.icon{color:var(--green)}
.v62-notice.tone-violet{border-color:#ddd5f3;background:var(--violet-bg)}.v62-notice.tone-violet>.icon{color:var(--violet)}
.v62-notice.tone-gray{border-color:#dde4ec;background:var(--gray-bg)}.v62-notice.tone-gray>.icon{color:var(--gray)}
.v62-kv{display:grid;grid-template-columns:fit-content(50%) minmax(0,1fr);gap:6px 14px;margin:0;font-size:var(--text-sm)}
.v62-kv dt{color:var(--muted);overflow-wrap:anywhere}
.v62-kv dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.v62-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;color:var(--muted);text-align:center}
.v62-empty b{color:var(--ink);font-size:var(--text-md)}
.v62-empty p{max-width:440px;margin:0;font-size:var(--text-sm)}
.v62-empty .btn{margin-top:6px}
.v62-locked{display:flex;flex-direction:column;gap:5px;min-width:0;color:#4a5f76;font-size:var(--text-xs);font-weight:600}
.v62-locked-value{display:flex;align-items:flex-start;gap:7px;min-height:36px;padding:8px 10px;border:1px dashed #cfd9e5;border-radius:var(--radius-control);background:var(--surface-2);color:var(--ink-2);font-size:var(--text-sm);line-height:1.45;overflow-wrap:anywhere}
.v62-locked-value>.icon{margin-top:2px;color:var(--muted)}
.v62-locked-reason{color:var(--muted);font-weight:400;line-height:1.35}
.v62-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;padding:0;list-style:none}
.v62-steps li{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--text-sm);font-weight:600}
.v62-steps li+li::before{content:"";width:22px;height:2px;margin:0 8px;background:var(--line)}
.v62-step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#e9eef5;color:var(--ink-2);font-size:var(--text-xs);font-weight:700}
.v62-steps .is-current{color:var(--accent)}
.v62-steps .is-current .v62-step-n{background:var(--accent);color:var(--surface)}
.v62-steps .is-done{color:var(--ink)}
.v62-steps .is-done .v62-step-n{background:var(--green);color:var(--surface)}
:is(.v62-tiles,.v62-tile,.v62-chip,.v62-seg-item):focus-visible{outline:3px solid #93b4ff;outline-offset:2px}
.v62-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:560px){
 .v62-tiles{display:flex;overflow-x:auto;padding-bottom:2px;scroll-snap-type:x proximity;scrollbar-width:thin}
 .v62-tiles>.v62-tile{flex:0 0 136px;scroll-snap-align:start}
 .v62-page-actions{width:100%}
}
@media (max-width:699px){
 :is(.v62-chip,.v62-seg-item,button.v62-tile){min-height:44px}
}
/* R5b otázka na neuložené zmeny v okne portálu (web/modal-unsaved-guard.js, prototyp V6.2 .modal .mf.mfask): pás dole v tele okna. */
.v62-unsaved{position:sticky;bottom:calc(-1 * var(--dialog-pad-block));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:var(--space-3) calc(-1 * var(--dialog-pad)) calc(-1 * var(--dialog-pad-block));padding:var(--space-3) var(--dialog-pad);border-top:1px solid var(--line);background:var(--amber-bg);color:var(--ink)}
.v62-unsaved>.icon{flex:0 0 auto;color:var(--amber)}
.v62-unsaved>p{flex:1 1 200px;margin:0;font-weight:600}
.v62-unsaved-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media(max-width:699px){.v62-unsaved-actions{flex-direction:column;width:100%}.v62-unsaved-actions>.btn{width:100%}}