/*
 * Copyright (c) SupportSystem s.r.o. Všechna práva vyhrazena.
 * Autoři: Petr Marek, Jan Kučera
 *
 * @uses-design-tokens-v2
 * @fileoverview Modal v2 — moderní base modal styly (PPP_UKOL_199+).
 *
 * Selektor: .modal-overlay-v2 (UPLNĚ izolovaný od legacy .modal-overlay)
 * Cílí JEN modaly postavené na core/components/base-v2/BaseModal-v2.ts.
 * Staré modaly (BaseModal v1) se neovlivňují — používají .modal-overlay v modal-base.css.
 *
 * Pouze --ui-* design tokens (žádný --modal-*, --barva-*).
 * Všechny class names končí -v2 (validátor A12 to vynucuje).
 */

/* ─── OVERLAY (backdrop) ──────────────────────────────────────────────────── */

.modal-overlay-v2 {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--ui-overlay-backdrop-bg);
    z-index: 1000;
    padding: var(--ui-spacing-xl);
    box-sizing: border-box;
    overflow-y: auto;
}

.modal-overlay-v2.is-open {
    display: flex;
}

/* ─── CONTENT (panel) ─────────────────────────────────────────────────────── */

/*
 * Frame design — designerova reference editace-ukolu.jsx (PPP_UKOL_221 F3c):
 *   - tinted bg (jemně tónované per scheme, NE bílé)
 *   - yellow outline 1px (--ui-field-emphasis-border) na celém modalu
 *   - card shadow (jemný stín pro odsazení od mica backgroundu)
 */
.modal-overlay-v2 .modal-content-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--ui-surface-tinted-bg);
    color: var(--ui-surface-tinted-text);
    border: 1px solid var(--ui-field-emphasis-border, #ff0000);
    border-radius: var(--ui-radius-large);
    box-shadow: var(--ui-shadow-card);
    /* `overflow: clip` (ne `hidden`) — zakazuje programmatic scroll.
       Fix: focus na <input> uvnitř modal body způsoboval auto-scroll-into-view
       na content elementu, což posunulo obsah mimo viewport (vidět jako prázdná
       výplň). `clip` je modernější varianta která tuto cestu blokuje. */
    overflow: clip;
    font-family: var(--ui-font-base);
}

/* ─── STATICKÝ ZOOM VNITŘKU MODAL (body + footer, overlay context) ──────────
 *
 * Aktivuje se z TS — `BaseModalV2.render()` při `layout.contentZoom != 1`
 * nastaví:
 *   - CSS proměnnou `--overlay-content-zoom` na ratio (např. 1.5 = 150 %)
 *   - data atribut `[data-overlay-content-zoom="true"]` pro tento selektor
 *
 * Zoom se aplikuje JEN NA VNITŘEK modalu — `.modal-body-v2` + `.modal-actions-v2`
 * (footer). Hlavička `.modal-header-v2` ZŮSTÁVÁ V PŮVODNÍ VELIKOSTI (chrome
 * tlačítka close/resize/title fixní napříč zoom level). Velikost samotného
 * modal-content boxu se zoomem NEMĚNÍ — definuje ji `contentMaxWidth` +
 * `contentHeight` z layoutu (per-pokladna `pos_X_sirka` + `pos_X_vyska`).
 * Pokud zoomovaný obsah přeteče výšku body, body má `overflow-y: auto`.
 *
 * Hodnota se v POS WEB modálech čte z per-pokladna konfigurace
 * `pos_X_zoom` (PluSeznam, ZakaznikSeznam, UcetSeznam, TextySeznam,
 * Separace, Transfer, TiskSelhal, ZakaznikForm) — admin nastavuje v UI,
 * uživatel v modalu nemění.
 *
 * @dynamic-css-var: --overlay-content-zoom — runtime hodnota nastavovaná z TS.
 *
 * **DŮLEŽITÉ — oddělení od interaktivního zoomu PanelAwareModalV2:**
 * Toto pravidlo NEKOLIDUJE s `--panel-zoom` (PPP_UKOL_253.A) — ten zoom
 * žije ve workspace contextu (`.app-shell-workspace-v2[data-layout-mode]`
 * + `.modal-content-v2--in-panel` selektor), zatímco tento pracuje
 * v overlay módu (modal v `document.body`). Žádný modal nemůže být
 * v obou stavech současně. Chování ale je analogické multi-panel módu
 * PanelAware (header fixed, body+footer zoom).
 *
 * Fallback `1` (= 100 %) je neutrální hodnota (žádný zoom). Pravidlo #4.1
 * vyžaduje červený fallback jen pro barevné vlastnosti; `zoom` není barva,
 * neutrální `1` je správný default.
 * ──────────────────────────────────────────────────────────────────────── */
.modal-overlay-v2 .modal-content-v2[data-overlay-content-zoom] .modal-body-v2,
.modal-overlay-v2 .modal-content-v2[data-overlay-content-zoom] .modal-actions-v2 {
    zoom: var(--overlay-content-zoom, 1);
    transition: zoom 0.15s ease;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────── */

/*
 * Header design — header-tint bg + accent bottom border + inset highlight
 * (designer .eu-modal-head).
 *
 * 2-row layout:
 *   __top-row → H2 + akce (mode badge, flag, help, resize, close) — flex row,
 *               align-items center → osa všech prvků projde středem H2 textu.
 *   __sub-row → subtitle + extras (priority chip, progress pille, ...) —
 *               volitelný řádek pod top-row. Vykresluje se jen pokud subtitle
 *               nebo extras existují.
 */
.modal-overlay-v2 .modal-header-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-sm);
    padding: var(--ui-spacing-lg) var(--ui-spacing-xl) var(--ui-spacing-md);
    background: var(--ui-surface-header-tint-bg);
    color: var(--ui-surface-header-tint-text);
    border-bottom: 1px solid var(--ui-action-primary-bg, #ff0000);
    box-shadow: inset 0 -1px 0 var(--ui-window-frame-inset-highlight-color, #ff0000);
    flex-shrink: 0;
}

.modal-overlay-v2 .modal-header-v2__top-row {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-md);
}

.modal-overlay-v2 .modal-header-v2__sub-row {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    flex-wrap: wrap;
}

.modal-overlay-v2 .modal-title-section-v2 {
    flex: 1;
    min-width: 0;
}

/*
 * Title — designer 22px/700 (.eu-modal-head h1). Tokeny
 * `--ui-text-size-heading-xlarge` (22px) a `--ui-text-weight-bold` (700)
 * pridány v UKOL_221.
 */
.modal-overlay-v2 .modal-title-v2 {
    margin: 0;
    font-size: var(--ui-text-size-heading-xlarge);
    font-weight: var(--ui-text-weight-bold);
    color: var(--ui-text-primary);
    line-height: var(--ui-text-leading-tight);
}

.modal-overlay-v2 .modal-subtitle-v2 {
    font-size: var(--ui-text-size-heading-medium);
    font-weight: var(--ui-text-weight-medium);
    color: var(--ui-text-tertiary);
}

/* Close button — Button v2 typ iconOnly s extra třídou .modal-close-v2 */
.modal-overlay-v2 .modal-close-v2 {
    flex-shrink: 0;
}

/* Help button — Button v2 typ secondary s extra třídou .modal-help-v2 */
.modal-overlay-v2 .modal-help-v2 {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    font-size: var(--ui-text-size-heading-medium);
    font-weight: var(--ui-text-weight-semibold);
}

/* ─── BODY ────────────────────────────────────────────────────────────────── */

/*
 * Body — transparentní (dědí tinted bg z content-v2). Sekce uvnitř (form-section-v2)
 * mají vlastní bílý card-bg, kontrast vůči tinted modal pozadí.
 */
.modal-overlay-v2 .modal-body-v2 {
    flex: 1;
    overflow-y: auto;
    padding: var(--ui-spacing-lg) var(--ui-spacing-lg) var(--ui-spacing-lg);
    background: transparent;
    color: var(--ui-text-primary);
    font-size: var(--ui-text-size-label);
    line-height: var(--ui-text-leading-normal);
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-md);
}

/* ─── SCROLL BUTTONS (vertical overlay) ──────────────────────────────────── */

/*
 * Overlay wrapper pro ScrollButtonsV2 vertical — absolutní pozice vpravo
 * na středu modalu (KRITICKÉ PRAVIDLO č. 8). Wrapper ScrollButtonsV2 má
 * `display: contents` (buttons jsou děti rodiče), proto je nutný vlastní
 * container s positioning + flex-column layoutem.
 *
 * Z-index NENÍ potřeba — `position: absolute` automaticky vytvoří vyšší
 * stacking úroveň než static-positioned sourozenci (header, body, footer)
 * v rámci `.modal-content-v2` stacking contextu.
 *
 * Buttons se automaticky skryjí (.is-hidden) když není co scrollovat —
 * ScrollButtonsV2 si to řeší přes ResizeObserver na target.
 */
/* Scope: vlastní třída — funguje v `.modal-overlay-v2` (BaseModalV2) i v legacy
 * `.modal-overlay` (BaseModal v1 — po migraci na ScrollButtonsV2). */
.modal-scroll-buttons-v2 {
    position: absolute;
    right: var(--ui-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-sm);
    pointer-events: auto;
}

/* ─── FOOTER (modal-actions) ──────────────────────────────────────────────── */

/*
 * Footer — header-tint bg + accent top border + inset highlight z opačné strany
 * (designer .eu-bottom-bar).
 */
.modal-overlay-v2 .modal-actions-v2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-spacing-sm);
    padding: var(--ui-spacing-md) var(--ui-spacing-lg);
    background: var(--ui-surface-header-tint-bg);
    border-top: 1px solid var(--ui-action-primary-bg, #ff0000);
    box-shadow: inset 0 1px 0 var(--ui-window-frame-inset-highlight-color, #ff0000);
    flex-shrink: 0;
}

/* ─── DENSITY (compact / cozy / roomy) ────────────────────────────────────── */

body.density-compact .modal-overlay-v2 .modal-header-v2 {
    padding: var(--ui-density-compact-header-py) var(--ui-spacing-lg);
}

body.density-cozy .modal-overlay-v2 .modal-header-v2 {
    padding: var(--ui-density-cozy-header-py) var(--ui-spacing-xl);
}

body.density-roomy .modal-overlay-v2 .modal-header-v2 {
    padding: var(--ui-density-roomy-header-py) var(--ui-spacing-2xl);
}

body.density-compact .modal-overlay-v2 .modal-body-v2 {
    padding: var(--ui-spacing-md) var(--ui-spacing-lg);
    font-size: var(--ui-density-compact-text-body);
}

body.density-cozy .modal-overlay-v2 .modal-body-v2 {
    padding: var(--ui-spacing-lg) var(--ui-spacing-xl);
    font-size: var(--ui-density-cozy-text-body);
}

body.density-roomy .modal-overlay-v2 .modal-body-v2 {
    padding: var(--ui-spacing-xl) var(--ui-spacing-2xl);
    font-size: var(--ui-density-roomy-text-body);
}

/* ─── KEYBOARD ANIMATION FREEZE (UKOL 229 iter 5, vrstva C) ──────────────── */

/*
 * `.kb-animating-v2` třída se nastaví na <html> z MobileKeyboardService při
 * `ppp:kbAnimStart` custom event. Event dispatchuje JS bridge z APK wrapperu
 * (MainActivity.kt — WindowInsetsAnimationCompat.Callback.onPrepare()).
 *
 * Co dělá:
 *   - `contain: layout paint` — zamrazí reflow + repaint této CSS containment
 *     subtree (browser ignoruje resize signály které by jinak vyvolaly layout)
 *   - `pointer-events: none` — user nemůže klepat do "frozen" modalu
 *
 * Trvá jen po dobu keyboard slide animace (~250-300 ms). Po `onEnd` se třída
 * odebere → modal se znovu zapojí do layoutu v cílovém stavu (vše plynule).
 *
 * Vyžaduje native bridge — funguje JEN v APK Lupa NET Úkoly. V mobilním
 * browseru (lupaai.cz) třída nikdy není set → fallback je `interactive-widget=
 * resizes-content` v viewport meta (= browser atomicky resizuje 1× při start).
 */
.kb-animating-v2 .modal-overlay-v2 .modal-content-v2,
.kb-animating-v2 .modal-overlay-v2 {
    contain: layout paint;
    pointer-events: none;
}

/* UKOL 249: Modal v panelu — overlay → panel CSS reset přesunut do
 * `panel-aware-modal-v2.css` (k PanelAwareModalV2 vrstvě). */