/* ─────────────────────────────────────────────────────────────────────
 * modal-helpers.css — drag + minimize para modais Bootstrap 5.
 *
 * Aplicado globalmente (incluído em layouts/app.blade.php) e ativado
 * automaticamente pelo modal-helpers.js. Modais que NÃO devem ter os
 * helpers podem optar-out com data-modal-helpers="false" no elemento
 * .modal — o JS pula a inicialização.
 * ───────────────────────────────────────────────────────────────────── */

/* Header arrastável: cursor "move" no header todo, mas mantém pointer
   "padrão" nos botões dentro dele (close, minimize). */
.modal-header.modal-header-draggable {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}
.modal-header.modal-header-draggable button,
.modal-header.modal-header-draggable a {
    cursor: pointer;
}

/* Botão minimizar — mesmo tamanho/comportamento visual do .btn-close
   do Bootstrap, mas com ícones no estilo "controles de janela do Windows":
   - normal: traço horizontal inferior (minimize ▁)
   - quando minimizado: dois quadrados sobrepostos (restore ❐)
   Os SVGs são embutidos como background image, mesma técnica do .btn-close. */
.btn-modal-minimize {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    margin-right: 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    color: #000;
    opacity: 0.5;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 13h11v1.2h-11z'/%3E%3C/svg%3E")
        center / 1em auto no-repeat;
}
/* Bootstrap empurra apenas o .btn-close para a direita via margin-left:auto.
   Quando inserimos .btn-modal-minimize ANTES do close, ele fica colado no
   título. Transferimos o margin-left:auto para o minimize, e o close vira
   irmão à direita imediato (sem nova margem) — ambos ficam juntos no canto. */
.modal-header .btn-modal-minimize {
    margin-left: auto;
}
.modal-header .btn-modal-minimize + .btn-close {
    margin-left: 0;
}
.btn-modal-minimize:hover {
    opacity: 0.75;
}
.btn-modal-minimize:focus {
    opacity: 1;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* Estado restaurar (quando a modal está minimizada): ícone "❐" estilo Windows. */
.btn-modal-minimize.btn-modal-restore {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2h9v9h-3v3H2V5h3V2zm1 1.2v1.8h6V10h1.8V3.2H6zM3.2 6.2v6.6H10V6.2H3.2z'/%3E%3C/svg%3E");
}
/* Em tema escuro/AdminLTE escuro, espelha o tratamento do .btn-close: inverte. */
[data-bs-theme="dark"] .btn-modal-minimize {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ─── Estado minimizado ───
   A modal vira uma "pílula" fixa no canto inferior direito mostrando
   só o header. O usuário pode clicar no header pra restaurar; o resto
   da tela (formulário atrás) volta a ser interativo. */
.modal.modal-minimized {
    /* Libera cliques fora do dialog para o conteúdo da página. */
    pointer-events: none !important;
}
.modal.modal-minimized .modal-dialog {
    pointer-events: auto;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    margin: 0 !important;
    max-width: 360px;
    width: 360px;
    /* Reseta qualquer translate aplicado pelo drag. */
    transform: none !important;
    transition: none;
}
.modal.modal-minimized .modal-content {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
}
.modal.modal-minimized .modal-body,
.modal.modal-minimized .modal-footer {
    display: none;
}
.modal.modal-minimized .modal-header {
    border-bottom: 0;
    cursor: pointer; /* clica no header pra restaurar */
    border-radius: 0.5rem;
}
.modal.modal-minimized .modal-header .modal-title {
    /* Trunca título longo na pílula minimizada. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quando algum modal está minimizado, escondemos o backdrop e
   liberamos o scroll do body — interação livre com a página de fundo. */
.modal-backdrop.modal-backdrop-hidden {
    opacity: 0 !important;
    pointer-events: none;
}
body.modal-minimized-active {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Em telas pequenas: pílula ocupa toda a largura disponível. */
@media (max-width: 575.98px) {
    .modal.modal-minimized .modal-dialog {
        width: auto;
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }
}