/**
 * Jednotný popup shell – Členská i Správa.
 * Overlay + centrovaná karta. Formulář uvnitř se mění, vzhled shellu ne.
 * Načítej PO stránkových CSS (komunikace, soupiska, modul…), ať vyhraje.
 */

:root {
    --cleni-dlg-scrim: light-dark(rgba(10, 10, 10, 0.52), rgba(0, 0, 0, 0.78));
    --cleni-dlg-sheet: light-dark(#fff, #161618);
    --cleni-dlg-ink: light-dark(#141414, #f4f4f5);
    --cleni-dlg-muted: light-dark(#3f3f46, #c4c4cc);
    --cleni-dlg-line: light-dark(rgba(20, 20, 20, 0.08), rgba(255, 255, 255, 0.1));
    --cleni-dlg-fill: light-dark(rgba(20, 20, 20, 0.05), rgba(255, 255, 255, 0.08));
    --cleni-dlg-input: light-dark(#f4f4f5, #0f0f10);
    --cleni-dlg-width: 28rem;
    --cleni-dlg-width-wide: 40rem;
    --cleni-dlg-radius: 1.15rem;
    --cleni-dlg-pad: 1.25rem 1.35rem 1.15rem;
    --cleni-dlg-ease: var(--draci-ease, cubic-bezier(0.22, 1, 0.36, 1));
    --cleni-dlg-shadow: 0 22px 50px light-dark(rgba(10, 10, 10, 0.14), rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   1) Overlay (div-based)
   ========================================================================== */

.soup-dialog,
.karta-role-dialog,
.cleni-ucast-dlg,
.sys-modal,
.cleni-dlg,
.posta-overlay,
.pzn-overlay:not(.hidden),
.kal-form-modal.is-open,
.kal-preview-modal.is-open,
#kal-form-modal.is-open,
#kal-preview-modal.is-open,
[role="dialog"].fixed:not(.hidden):not(.chat-activity-panel),
[role="dialog"][class*="fixed"]:not(.hidden):not(.chat-activity-panel),
#modal-skupina:not(.hidden),
#modal-poll:not(.hidden),
#modal-meta:not(.hidden),
#modal-clenove:not(.hidden),
#modal-delete:not(.hidden),
#modal-nova:not(.hidden),
#modal-simple:not(.hidden),
#modal-forward:not(.hidden),
#modal-attach:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--cleni-dlg-scrim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color-scheme: light dark;
}

.sys-modal { z-index: 9000; }
.posta-overlay { z-index: 80; }
.pzn-overlay:not(.hidden) { z-index: 85; }
#modal-skupina:not(.hidden),
#modal-poll:not(.hidden),
#modal-meta:not(.hidden),
#modal-clenove:not(.hidden),
#modal-delete:not(.hidden),
#modal-nova:not(.hidden),
#modal-simple:not(.hidden),
#modal-forward:not(.hidden),
#modal-attach:not(.hidden),
[role="dialog"].fixed:not(.hidden):not(.chat-activity-panel),
[role="dialog"][class*="fixed"]:not(.hidden):not(.chat-activity-panel) {
    z-index: 120;
}

.soup-dialog[hidden],
.karta-role-dialog[hidden],
.cleni-ucast-dlg[hidden],
.sys-modal[hidden],
.cleni-dlg[hidden],
.posta-overlay[hidden] {
    display: none !important;
}

/* Tailwind/absolute scrimy uvnitř [role=dialog] – sjednoť na stejný tón, bez druhého „díru“. */
[role="dialog"] > .absolute.inset-0,
[role="dialog"] > [class*="bg-black"],
[role="dialog"] > [data-close-skupina],
[role="dialog"] > [data-close-poll],
[role="dialog"] > [data-close-meta],
[role="dialog"] > [data-close-forward],
[role="dialog"] > [data-close-attach],
#kal-form-modal-backdrop,
#kal-preview-modal-backdrop,
.kal-form-modal > .absolute,
.kal-preview-modal > .absolute {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Flex wrapper uvnitř komunikace (relative z-10 min-h-full flex…) */
[role="dialog"] > .relative.z-10,
[role="dialog"] > .relative[class*="min-h"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
    width: 100%;
    pointer-events: none;
}
[role="dialog"] > .relative.z-10 > *,
[role="dialog"] > .relative[class*="min-h"] > * {
    pointer-events: auto;
}

/* ==========================================================================
   2) Native <dialog> = karta + ::backdrop = scrim
   ========================================================================== */

dialog.ws-dlg,
dialog.souperi-dlg,
dialog.todo-dlg,
dialog.hesla-dlg,
dialog.testy-dlg,
dialog.cleni-dlg {
    box-sizing: border-box;
    width: min(100% - 2rem, var(--cleni-dlg-width-wide)) !important;
    max-width: min(100% - 2rem, var(--cleni-dlg-width-wide)) !important;
    max-height: min(46rem, calc(100dvh - 2.5rem)) !important;
    margin: auto !important;
    padding: 0 !important;
    border: 1px solid var(--cleni-dlg-line) !important;
    border-radius: var(--cleni-dlg-radius) !important;
    background: var(--cleni-dlg-sheet) !important;
    background-image: none !important;
    color: var(--cleni-dlg-ink) !important;
    box-shadow: var(--cleni-dlg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    color-scheme: light dark;
}

dialog.ws-dlg:not(.ws-dlg--wide),
dialog.souperi-dlg {
    width: min(100% - 2rem, var(--cleni-dlg-width)) !important;
    max-width: min(100% - 2rem, var(--cleni-dlg-width)) !important;
}

dialog.ws-dlg::backdrop,
dialog.souperi-dlg::backdrop,
dialog.todo-dlg::backdrop,
dialog.hesla-dlg::backdrop,
dialog.testy-dlg::backdrop,
dialog.cleni-dlg::backdrop {
    background: var(--cleni-dlg-scrim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

dialog .ws-dlg__form,
dialog .todo-dlg__karta,
dialog .hesla-dlg__karta,
dialog .souperi-form,
dialog .modal-detail-telo,
dialog > form {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-height: min(46rem, calc(100dvh - 2.5rem));
    overflow: auto;
    padding: var(--cleni-dlg-pad);
}

/* ==========================================================================
   3) Karty (div-based)
   ========================================================================== */

.soup-dialog-karta,
.karta-role-karta,
.cleni-ucast-dlg__karta,
.sys-okno,
.cleni-dlg__karta,
.ck-modal-panel,
.ck-modal-card,
.pzn-okno,
.posta-okno,
.sys-okno,
#kal-form-modal-panel,
#kal-preview-modal-panel,
.todo-dlg__karta,
.hesla-dlg__karta {
    box-sizing: border-box !important;
    width: min(100%, var(--cleni-dlg-width)) !important;
    max-width: min(100%, var(--cleni-dlg-width)) !important;
    min-height: 0 !important;
    margin: auto !important;
    border-radius: var(--cleni-dlg-radius) !important;
    border: 1px solid var(--cleni-dlg-line) !important;
    background: var(--cleni-dlg-sheet) !important;
    background-color: var(--cleni-dlg-sheet) !important;
    background-image: none !important;
    color: var(--cleni-dlg-ink) !important;
    box-shadow: var(--cleni-dlg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: var(--cleni-dlg-pad) !important;
    max-height: min(46rem, calc(100dvh - 2.5rem));
    overflow: auto;
    animation: draci-enter var(--draci-dur, 220ms) var(--cleni-dlg-ease) both;
}

.soup-dialog-karta--kat,
.soup-popup-karta--wide,
.soup-dialog-karta.soup-popup-karta--wide,
.karta-role-karta,
.ck-modal-panel.w-full.max-w-md,
#kal-form-modal-panel,
.todo-dlg__karta,
.pzn-okno--vyber {
    width: min(100%, var(--cleni-dlg-width-wide)) !important;
    max-width: min(100%, var(--cleni-dlg-width-wide)) !important;
}

/* Komunikace: panel už má max-w-md v markupu – stejně drž token. */
.ck-modal-panel {
    width: min(100%, var(--cleni-dlg-width)) !important;
    max-width: min(100%, var(--cleni-dlg-width)) !important;
}

/* Bottom sheet v chatu zůstane sheet (ne centrovaná karta). */
.ck-sheet:not(.ck-modal-panel) {
    /* neměnit bottom-sheet chování */
}

/* Typografie nadpisů shellu */
.soup-dialog-tit,
.soup-popup-bar strong,
.cleni-dlg__tit,
.cleni-ucast-dlg__tit,
.ck-modal-head h3,
.ws-dlg__hlava h2,
.todo-dlg__hlava h3,
.hesla-dlg__hlava h3,
.sys-okno h2,
#kal-form-modal-panel h2,
#kal-preview-modal-panel h2 {
    font-family: Oswald, Inter, sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: var(--cleni-dlg-ink) !important;
}

/* Text uvnitř shellu: nikdy natvrdo černá / světlá mimo tokeny. */
.soup-dialog-karta,
.soup-popup-karta,
.ck-modal-panel,
.sys-okno,
.cleni-dlg__karta,
#kal-form-modal-panel,
#kal-preview-modal-panel {
    color: var(--cleni-dlg-ink);
}
.soup-dialog-karta strong,
.soup-popup-karta strong,
.soup-dialog-karta h2,
.soup-dialog-karta h3,
.soup-popup-karta h2,
.soup-popup-karta h3 {
    color: var(--cleni-dlg-ink);
}

.soup-dialog-perex,
.cleni-dlg__perex,
.ck-modal-hint,
.todo-dlg__hlava p,
.hesla-dlg__hlava p {
    color: var(--cleni-dlg-muted) !important;
}

/* Zavírací kolečko */
.ck-modal-close,
.soup-popup-x,
.ws-dlg__x,
.souperi-dlg__x,
.todo-dlg__zavrit,
.hesla-dlg__zavrit,
.cleni-ucast-dlg__x,
#kal-form-modal-close {
    background: var(--cleni-dlg-fill) !important;
    color: var(--cleni-dlg-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
}

/* ==========================================================================
   4) Iframe Správy – stejná pravidla (výhra nad cleni-embed glass)
   ========================================================================== */

html.cleni-in-iframe .soup-dialog,
html.cleni-sprava-embed .soup-dialog,
html.cleni-in-iframe .karta-role-dialog,
html.cleni-in-iframe .cleni-ucast-dlg,
html.cleni-in-iframe .sys-modal,
html.cleni-in-iframe .kal-form-modal.is-open,
html.cleni-in-iframe .kal-preview-modal.is-open,
html.cleni-in-iframe [role="dialog"].fixed:not(.hidden) {
    align-items: center !important;
    justify-content: center !important;
    background: var(--cleni-dlg-scrim) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.cleni-in-iframe .soup-dialog-karta,
html.cleni-sprava-embed .soup-dialog-karta,
html.cleni-in-iframe .soup-dialog-karta--kat,
html.cleni-sprava-embed .soup-dialog-karta--kat,
html.cleni-in-iframe .karta-role-karta,
html.cleni-in-iframe .cleni-ucast-dlg__karta,
html.cleni-in-iframe .sys-okno,
html.cleni-in-iframe .ck-modal-panel,
html.cleni-in-iframe .pzn-okno,
html.cleni-in-iframe .posta-okno,
html.cleni-in-iframe #kal-form-modal-panel,
html.cleni-in-iframe #kal-preview-modal-panel,
html.cleni-in-iframe dialog.ws-dlg,
html.cleni-in-iframe dialog.souperi-dlg,
html.cleni-in-iframe dialog.todo-dlg,
html.cleni-in-iframe dialog.hesla-dlg,
html.cleni-in-iframe dialog.testy-dlg {
    background: var(--cleni-dlg-sheet) !important;
    background-image: none !important;
    border-color: var(--cleni-dlg-line) !important;
    box-shadow: var(--cleni-dlg-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: auto !important;
    border-radius: var(--cleni-dlg-radius) !important;
}

html.cleni-in-iframe .soup-dialog-karta--kat,
html.cleni-sprava-embed .soup-dialog-karta--kat {
    width: min(100%, var(--cleni-dlg-width-wide)) !important;
    max-width: min(100%, var(--cleni-dlg-width-wide)) !important;
    min-height: 0 !important;
    padding: var(--cleni-dlg-pad) !important;
}

/* ==========================================================================
   5) Formulář uvnitř shellu – solidní inputy, akce jako Nová skupina
   ========================================================================== */

.soup-dialog-karta .soup-form-input,
.soup-dialog-karta input.soup-form-input,
.soup-dialog-karta select.soup-form-input,
.ck-modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.ck-modal-panel select,
.ck-modal-panel textarea,
#kal-form-modal-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
#kal-form-modal-panel select,
#kal-form-modal-panel textarea {
    background: var(--cleni-dlg-input) !important;
    background-image: none !important;
    color: var(--cleni-dlg-ink) !important;
    border: 1px solid var(--cleni-dlg-line) !important;
    border-radius: 0.7rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.soup-form-akce {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
}

.soup-form-akce .soup-dialog-zrusit {
    width: auto !important;
    margin: 0 !important;
    padding: 0.45rem 0.35rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cleni-dlg-ink) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

.soup-form-akce .soup-form-ulozit,
.soup-dialog-uloz {
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: var(--draci-pink, #db2071) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.15rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.soup-form-akce .soup-form-ulozit:hover,
.soup-dialog-uloz:hover {
    background: #c01b64 !important;
}

/* Dlaždice výběru uvnitř popupů – neprůhledné, bez glass */
.soup-vyzadat-volba,
.soup-popup-karta .grid > label,
#soupiska-vyzadat.soup-popup form .grid > label {
    background: var(--cleni-dlg-input) !important;
    background-image: none !important;
    border: 1px solid var(--cleni-dlg-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--cleni-dlg-ink) !important;
}
.soup-vyzadat-volba strong { color: var(--cleni-dlg-ink) !important; }
.soup-vyzadat-volba small { color: var(--cleni-dlg-muted) !important; }
.soup-vyzadat-vzkaz {
    background: var(--cleni-dlg-input) !important;
    color: var(--cleni-dlg-ink) !important;
    border: 1px solid var(--cleni-dlg-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   6) Jednotné akce dialogu (DESIGN.md → Components → Dialog)
   ========================================================================== */

.ck-modal-actions,
.cleni-dlg__akce,
.ws-dlg__akce,
.todo-dlg__akce,
.hesla-dlg__akce,
.sys-okno__akce,
.soup-form-akce {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin-top: 1rem !important;
}

.ck-modal-btn--primary,
.cleni-dlg__btn--primary,
.ws-dlg__uloz,
.sys-okno [type="submit"]:not(.ck-modal-btn--danger):not(.ck-modal-btn--ghost),
.ck-modal-btn--primary {
    border: 0 !important;
    background: var(--draci-pink, #db2071) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.15rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    cursor: pointer;
}
.ck-modal-btn--primary:hover,
.cleni-dlg__btn--primary:hover {
    background: var(--draci-pink-dark, #a01855) !important;
}

.ck-modal-btn--ghost,
.cleni-dlg__btn--ghost,
.ck-modal-btn--ghost {
    border: 0 !important;
    background: transparent !important;
    color: var(--cleni-dlg-ink) !important;
    border-radius: 999px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.ck-modal-btn--danger,
.cleni-dlg__btn--danger {
    border: 0 !important;
    background: var(--ds-err-ink, #a11d1d) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.15rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer;
}

/* Anti-glass: žádný blur na známých overlayích / kartách */
.sys-modal,
.sys-okno,
.cleni-ucast-dlg,
.cleni-ucast-dlg__karta,
.posta-overlay,
.posta-okno,
.pzn-overlay,
.pzn-okno {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}