/* Modal redimensionável — componente <x-resizable-modal> e modais marcados com
 * data-resizable-modal (cards 978827 e 978871). Carregado nos dois layouts (head-css e
 * master-employee); o JS (resizable-modal.init.js) grava as variáveis de tamanho e
 * alterna as classes is-resized / is-maximized / is-resizing. */

.resizable-modal .modal-header {
    gap: 0.5rem;
}

.resizable-modal .modal-title {
    user-select: none;
}

.resizable-modal-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.resizable-modal-controls .btn-close {
    margin: 0;
}

/* Botão injetado pelo JS num modal marcado só com o atributo: fica no próprio header,
 * antes do btn-close (sem o wrapper .resizable-modal-controls do componente). */
.resizable-modal .modal-header > .resizable-modal-toggle {
    margin-left: auto;
}

.resizable-modal .modal-header > .resizable-modal-toggle + .btn-close {
    margin: 0 0 0 0.25rem;
}

.resizable-modal-toggle {
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
}

.resizable-modal-toggle:hover,
.resizable-modal-toggle:focus-visible {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

/* ── Alças ─────────────────────────────────────────────────────────────── */
.resizable-modal-handle {
    position: absolute;
    z-index: 2;
    touch-action: none;
}

.resizable-modal-handle-e {
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
}

.resizable-modal-handle-s {
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    cursor: ns-resize;
}

.resizable-modal-handle-se {
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    /* grip diagonal discreto no canto */
    background: linear-gradient(
        135deg,
        transparent 0 55%,
        var(--bs-secondary-color) 55% 60%,
        transparent 60% 70%,
        var(--bs-secondary-color) 70% 75%,
        transparent 75%
    );
    opacity: 0.6;
}

.resizable-modal .modal-dialog.is-maximized .resizable-modal-handle {
    display: none;
}

/* ── Tamanho escolhido pelo usuário ────────────────────────────────────── */
.resizable-modal .modal-dialog.is-resized {
    max-width: calc(100vw - 1rem);
    width: var(--resizable-modal-width);
    height: auto;
}

.resizable-modal .modal-dialog.is-resized .modal-content {
    height: var(--resizable-modal-height);
    max-height: calc(100vh - 2 * var(--bs-modal-margin));
}

/* Modal sem modal-dialog-scrollable: com altura fixa, o corpo passa a rolar por dentro
 * em vez de vazar para fora do modal quando fica menor que o conteúdo. */
.resizable-modal .modal-dialog.is-resized .modal-body,
.resizable-modal .modal-dialog.is-maximized .modal-body {
    min-height: 0;
    overflow-y: auto;
}

/* Maximizado vem depois: vence o tamanho manual e, ao restaurar, ele volta. */
.resizable-modal .modal-dialog.is-maximized {
    max-width: none;
    width: calc(100vw - 2rem);
    height: calc(100vh - 2rem);
    margin: 1rem auto;
}

.resizable-modal .modal-dialog.is-maximized .modal-content {
    height: 100%;
    max-height: none;
}

/* Durante o arraste o iframe (PDF) não pode engolir o ponteiro nem selecionar texto. */
.resizable-modal .modal-dialog.is-resizing {
    user-select: none;
}

.resizable-modal .modal-dialog.is-resizing iframe {
    pointer-events: none;
}

/* ── Conteúdo que acompanha o tamanho ──────────────────────────────────── */
.resizable-modal-fill {
    display: block;
    width: 100%;
    height: 75vh;
    border: 0;
}

.resizable-modal-fit {
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
}

.resizable-modal .is-resized .modal-body:has(> .resizable-modal-fill, > .resizable-modal-fit),
.resizable-modal .is-maximized .modal-body:has(> .resizable-modal-fill, > .resizable-modal-fit) {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

.resizable-modal .is-resized .resizable-modal-fill,
.resizable-modal .is-maximized .resizable-modal-fill {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.resizable-modal .is-resized .resizable-modal-fit,
.resizable-modal .is-maximized .resizable-modal-fit {
    max-height: 100%;
    min-height: 0;
}