/* ============================================================
   ZABEZPIECZENIE: MODAL NIGDY NIE PRZEKRACZA DOSTĘPNEGO OBSZARU
   ============================================================ */

/* Szerokość: nawet po modyfikacjach stylami inline,
   dialog nigdy nie wyjedzie poza szerokość widocznego ekranu. */
.modal-dialog-scrollable {
    max-width: calc(100vw - 1rem);
}

/* Wysokość: niezależnie od zawartości, dialog nigdy nie jest
   wyższy niż wysokość okna minus marginesy. */
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
}

/* ============================================================
   EASYMDE / CODEMIRROR - PEŁNA WYSOKOŚĆ (MAXIMIZED)
   ============================================================ */

/* 1. Reset modala - wymusza elastyczny (flex) układ w stanie rozciągania */
.modal-dialog.maximized .modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.modal-dialog.maximized .modal-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Zabezpieczenie przed zmniejszaniem (spłaszczaniem) innych pól formularza np. tytułu, daty */
.modal-dialog.maximized .modal-body > div:not(.field-desc) {
    flex-shrink: 0 !important;
}

/* 2. Kontener główny pola Opis (.field-desc) zajmuje całą resztę dostępnego miejsca */
.modal-dialog.maximized .field-desc {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

/* Etykieta nad polem nie powinna się rozciągać */
.modal-dialog.maximized .field-desc label {
    flex-shrink: 0 !important;
}

/* 3. Kontener wstrzyknięty przez bibliotekę EasyMDE dopasowuje się do reszty miejsca */
.modal-dialog.maximized .field-desc .EasyMDEContainer {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* 4. Toolbar (ikony na górze) i Statusbar (na dole) nie mogą się rozciągać w pionie */
.modal-dialog.maximized .field-desc .editor-toolbar,
.modal-dialog.maximized .field-desc .editor-statusbar {
    flex: 0 0 auto !important;
}

/* 5. Główne pole wpisywania CodeMirror wypełnia pozostałą pustą przestrzeń */
.modal-dialog.maximized .field-desc .CodeMirror {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 6. Wewnętrzna skrolowalna sekcja w CodeMirror działa na pełnej wysokości i zyskuje scroll-y */
.modal-dialog.maximized .field-desc .CodeMirror-scroll {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* ============================================================
   POPRAWKI: MAKSIMALIZACJA MODALA (textarea/EasyMDE)
   ============================================================ */

/* 1. Wymuszenie pełnego rozmiaru dla stanu .maximized */
.modal-dialog.maximized {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 2. Formularze w modalach jako elastyczne kontenery */
/* Często <form> opakowuje nagłówek, treść i stopkę, przerywając łańcuch flexboxa */
.modal-dialog.maximized .modal-content > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

/* 3. Zapobieganie ściskaniu nagłówka i stopki wewnątrz formularza */
.modal-dialog.maximized .modal-content > form > .modal-header,
.modal-dialog.maximized .modal-content > form > .modal-footer {
    flex-shrink: 0 !important;
}

/* 4. Zabezpieczenie, że .modal-body w formularzach rozciąga się poprawnie */
.modal-dialog.maximized .modal-content > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* 5. Dodatkowe zabezpieczenie dla EasyMDE, by wypełnił dostępne miejsce */
.modal-dialog.maximized .field-desc .EasyMDEContainer {
    height: 100% !important;
}

/* ============================================================
   POPRAWKI: MODAL PODGLĄDU ELEMENTU (View Item Modal)
   ============================================================ */

/* 1. Kontener Markdown w podglądzie rozciąga się na całą dostępną wysokość */
/* Nadpisuje poprzednią regułę dla div:not(.field-desc) */
.modal-dialog.maximized .modal-body #view-markdown-container {
    flex: 1 1 auto !important;
    flex-shrink: 1 !important; 
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* 2. Sekcja metadanych (na dole podglądu) nie kurczy się i nie rozciąga */
.modal-dialog.maximized .modal-body #view-item-meta {
    flex: 0 0 auto !important;
}

/* ============================================================
   PRZYCISK MAKSYMALIZACJI (.btn-maximize) — wygląd jak .btn-close
   ============================================================ */
.btn-maximize {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    margin-left: 0.5rem;
    color: #000;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.6;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.btn-maximize:hover,
.btn-maximize:focus-visible {
    opacity: 1;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Białe ikony na ciemnych/kolorowych nagłówkach */
.modal-header.bg-primary .btn-maximize,
.modal-header.bg-success .btn-maximize,
.modal-header.bg-danger .btn-maximize,
.modal-header.bg-dark .btn-maximize,
.modal-header.bg-info .btn-maximize,
.modal-header.bg-secondary .btn-maximize {
    color: #fff;
}

/* ============================================================
   MODALE KOMPAKTOWE (.modal-compact) — Edycja / Podgląd
   Stały rozmiar, wyśrodkowane. Rozmiar sterowany przyciskiem
   maksymalizacji.
   ============================================================ */

/* 1. Nakładka .modal staje się kontenerem flex — dialog jest
       wyśrodkowany zarówno poziomo, jak i pionowo.
       Zakres: tylko gdy modal jest widoczny (.show), aby nie nadpisać
       Bootstrapowego display:none w stanie ukrytym. */
.modal.show:has(.modal-compact.modal-dialog) {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. Stan domyślny (świeżo otwarty): 1/3 szerokości × pełna wysokość */
.modal-dialog.modal-compact {
    width: 33.33vw;
    max-width: 33.33vw;
    height: calc(100vh - 1rem);
    max-height: calc(100vh - 1rem);
    margin: 0;
}

/* 3. Stan zmaksymalizowany: 95% szerokości × 90% wysokości. */
.modal-dialog.modal-compact.maximized {
    width: 95vw !important;
    max-width: 95vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    margin: 0 !important;
}

/* 4. Zawartość wypełnia dialog (flex-column), body przewija się wewnętrznie */
.modal-dialog.modal-compact .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Gdy formularz otacza nagłówek/treść/stopkę (Edit Item),
   musi przejąć ten sam układ flex-column, by treść wypełniła dialog. */
.modal-dialog.modal-compact .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0;
}

.modal-dialog.modal-compact .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 5. Pasek przewijania nie przeszkadza w układzie flex */
.modal-dialog.modal-compact .modal-header,
.modal-dialog.modal-compact .modal-footer {
    flex-shrink: 0;
}

/* 6. Na małych ekranach zawsze pełna dostępna szerokość */
@media (max-width: 767.98px) {
    .modal-dialog.modal-compact,
    .modal-dialog.modal-compact.maximized {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* ============================================================
   MODAL ELEMENTU (#uniItemModal) — 75% szerokości ekranu w trybie add
   (tryb edit używa klasy .modal-compact, sekcja wyżej)
   ============================================================ */
#uniItemModal .modal-dialog[data-mode="add"] {
    width: 75vw;
    max-width: 75vw;
}

/* Na małych ekranach wraca do pełnej dostępnej szerokości */
@media (max-width: 991.98px) {
    #uniItemModal .modal-dialog[data-mode="add"] {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
}