/*
 * Modal System CSS - IntGest Exec
 * Estilos para o sistema de modais HTMX com animações suaves
 */

/* ============================================================
 * CRUD Modal Container — Estados de animação
 * ============================================================
 * .modal-hidden   → Invisível, sem interação
 * .modal-visible  → Visível, interativo
 * Transição controlada via JS (toggle de classes)
 * ============================================================ */

#crud-modal-container.modal-hidden {
    pointer-events: none;
    visibility: hidden;
}

#crud-modal-container.modal-visible {
    pointer-events: auto;
    visibility: visible;
}

/* Backdrop: fade in/out */
#crud-modal-container.modal-visible #crud-modal-backdrop {
    opacity: 1;
}

/* Dialog: slide up + scale + fade */
#crud-modal-container.modal-visible #modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#crud-modal-container #modal-dialog {
    box-shadow:
        0 28px 90px rgba(15, 23, 42, 0.30),
        0 10px 24px rgba(15, 23, 42, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

#crud-modal-container #modal-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--ring) / 0.64), hsl(var(--primary) / 0.18));
    z-index: 1;
}

#crud-modal-container #modal-content {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}

#crud-modal-container #modal-content::-webkit-scrollbar,
#crud-modal-container .form-fields-wrapper::-webkit-scrollbar {
    width: 8px;
}

#crud-modal-container #modal-content::-webkit-scrollbar-track,
#crud-modal-container .form-fields-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

#crud-modal-container #modal-content::-webkit-scrollbar-thumb,
#crud-modal-container .form-fields-wrapper::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 999px;
}

#crud-modal-container #modal-content::-webkit-scrollbar-thumb:hover,
#crud-modal-container .form-fields-wrapper::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.45);
}

/* Responsive modal sizes */
@media (max-width: 640px) {
    #crud-modal-container #modal-dialog {
        max-height: calc(100dvh - 1.5rem);
    }

    .modal {
        left: 1rem !important;
        right: 1rem !important;
        top: 2rem !important;
        transform: translateX(0) translateY(0) !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        max-height: calc(100vh - 4rem) !important;
        position: fixed !important;
    }

    .modal.modal-enter {
        transform: translateX(0) translateY(-20px) scale(0.95);
    }

    .modal.modal-enter-active {
        transform: translateX(0) translateY(0) scale(1);
    }
}

/* Modal content scrolling */
.modal-content {
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 #F7FAFC;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: #F7FAFC;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: #CBD5E0;
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #A0AEC0;
}

/* Focus management */
.modal-focus-trap {
    outline: none;
}

/* Modal overlay z-index management — must be above sidebar (1030) and header (1020) */
.modal-overlay {
    z-index: var(--z-modal-backdrop, 1040);
}

[data-modal-backdrop] {
    z-index: var(--z-modal-backdrop, 1040);
}

.modal {
    z-index: var(--z-modal, 1050);
}

/* CRUD modal container — z-index via CSS para não depender do Tailwind JIT */
#crud-modal-container {
    z-index: var(--z-modal, 1050) !important;
}

/* Accessibility improvements */
.modal[aria-hidden="true"] {
    display: none !important;
}

.modal[aria-hidden="false"] {
    display: flex !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [data-modal-backdrop] {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal {
        border: 2px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .modal,
    [data-modal-backdrop] {
        transition: none !important;
        animation: none !important;
    }
}

/* Print styles */
@media print {
    .modal,
    [data-modal-backdrop] {
        display: none !important;
    }
}

/* Modal size variants */
.modal-sm { max-width: 24rem; }
.modal-md { max-width: 28rem; }
.modal-lg { max-width: 32rem; }
.modal-xl { max-width: 36rem; }
.modal-2xl { max-width: 42rem; }
.modal-3xl { max-width: 48rem; }
.modal-4xl { max-width: 56rem; }
.modal-5xl { max-width: 64rem; }
.modal-6xl { max-width: 72rem; }
.modal-7xl { max-width: 80rem; }

/* Full screen modal */
.modal-full {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
}

/* ============================================================
 * Audit history modal — modal de "Histórico" do CRUD admin
 * ============================================================
 * Garante constrainment vertical mesmo quando o Tailwind JIT
 * nao compila max-h-[92vh]/max-h-[76vh]. O painel cresce ate
 * 92dvh (com fallback vh) e o body rola internamente, com
 * header sticky para o botao de fechar permanecer visivel.
 * ============================================================ */
.audit-history-modal__panel {
    display: flex !important;
    flex-direction: column;
    max-height: 92vh;
    max-height: 92dvh; /* dvh evita corte com barra de URL mobile */
    overflow: hidden;
}

.audit-history-modal__header {
    position: sticky;
    top: 0;
    z-index: 10;
    flex: 0 0 auto;
}

.audit-history-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}

.audit-history-modal__body::-webkit-scrollbar { width: 8px; }
.audit-history-modal__body::-webkit-scrollbar-track { background: transparent; }
.audit-history-modal__body::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 999px;
}
.audit-history-modal__body::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.45);
}

/* Mobile: cobre quase toda a tela e sobrepoe o override generico de .modal */
@media (max-width: 640px) {
    [data-modal-id="audit-logs-modal"] {
        position: fixed !important;
        inset: 0 !important;
        padding: 0.75rem !important;
        align-items: stretch !important;
    }
    .audit-history-modal__panel {
        max-height: calc(100dvh - 1.5rem) !important;
        max-width: none !important;
        width: 100% !important;
        margin: auto;
    }
}

/* Modal states */
.modal-loading {
    pointer-events: none;
    opacity: 0.7;
}

.modal-error {
    border-left: 4px solid #EF4444;
}

.modal-success {
    border-left: 4px solid #10B981;
}

.modal-warning {
    border-left: 4px solid #F59E0B;
}

.modal-info {
    border-left: 4px solid #3B82F6;
}