/**
 * ============================================================================
 * VOYGER - Dashboard Modal System
 * Sistema unificado de modais para todos os módulos do dashboard
 * ============================================================================
 * 
 * CLASSES PRINCIPAIS:
 * - .dashboard-modal: Overlay do modal
 * - .dashboard-modal-content: Container do conteúdo
 * - .modal-header: Cabeçalho (fundo preto)
 * - .modal-body: Corpo (scroll interno)
 * - .modal-footer: Rodapé com botões
 * 
 * VARIANTES:
 * - .dashboard-modal-content.small: Modal menor (480px)
 * - .dashboard-modal-content.large: Modal maior (1200px)
 */

/* ============================================================================
   Modal Container - Ensure it's above sidebar
   ============================================================================ */
#modal-container {
    position: relative;
    z-index: 30001 !important;
    /* Higher than sidebar (10000) and dashboard-container (10001) */
    pointer-events: none;
    /* Allow clicks to pass through when modals are hidden */
}

#modal-container .modal.active,
#modal-container .modal.show {
    pointer-events: auto;
    /* Enable clicks when modal is visible */
}

/* ============================================================================
   CSS Variables
   ============================================================================ */
:root {
    /* Modal Colors */
    --dm-overlay-bg: rgba(0, 0, 0, 0.7);
    --dm-content-bg: #ffffff;
    --dm-header-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    --dm-header-text: #ffffff;
    --dm-body-bg: #ffffff;
    --dm-footer-bg: #ffffff;
    --dm-border-color: #e5e7eb;

    /* Shadows */
    --dm-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Sizing */
    --dm-border-radius: 20px;
    --dm-padding: 32px;
    --dm-gap: 16px;
    --dm-overlay-padding: 24px;

    /* Mobile tuning */
    --dm-padding-mobile: 14px;
    --dm-radius-mobile: 0px;
    --dm-overlay-padding-mobile: 0px;
    --dm-height-mobile: 100dvh;

    /* Z-index */
    --dm-z-index: 30000;

    /* Transitions */
    --dm-transition: 0.2s ease;
}

/* ============================================================================
   Modal Overlay
   ============================================================================ */
.dashboard-modal {
    /* Positioning */
    position: fixed;
    inset: 0;
    z-index: var(--dm-z-index) !important;

    /* Display - hidden by default */
    display: none;
    align-items: center;
    justify-content: center;

    /* Background */
    background: var(--dm-overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Padding for mobile */
    padding: var(--dm-overlay-padding);
}

/* Modal visible state */
.dashboard-modal.active,
.dashboard-modal.show {
    display: flex;
}

/* ============================================================================
   Modal Content Container
   ============================================================================ */
.dashboard-modal-content {
    /* Sizing */
    max-width: min(960px, 95vw);
    width: 100%;
    max-height: 90vh;

    /* Background */
    background: var(--dm-content-bg);

    /* Border & Shadow */
    border-radius: var(--dm-border-radius);
    border: none;
    box-shadow: var(--dm-shadow-xl);

    /* Layout */
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    gap: 0;
}

/* Size variants */
.dashboard-modal-content.small {
    max-width: min(480px, 92vw);
}

.dashboard-modal-content.large {
    max-width: min(1200px, 96vw);
}

.dashboard-modal-content.large-modal,
.dashboard-modal-content.modal-lg {
    max-width: min(900px, 96vw);
}

/* ============================================================================
   Modal Header
   ============================================================================ */
.dashboard-modal .modal-header {
    /* Background - Preto com gradiente */
    background: var(--dm-header-gradient);
    color: var(--dm-header-text);

    /* Spacing */
    padding: 24px var(--dm-padding);

    /* Border */
    border: none;
    border-radius: var(--dm-border-radius) var(--dm-border-radius) 0 0;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dm-gap);

    /* Prevent shrinking */
    flex-shrink: 0;
}

/* Header title */
.dashboard-modal .modal-header h2,
.dashboard-modal .modal-header h3,
.dashboard-modal .modal-header h4 {
    color: inherit;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Header title icon */
.dashboard-modal .modal-header i {
    color: inherit;
}

/* Close button */
.dashboard-modal .close-modal,
.dashboard-modal .modal-close {
    width: auto;
    height: auto;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: var(--dm-header-text);
    font-size: 1.3rem;
    cursor: pointer;
    transition: all var(--dm-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-modal .close-modal:hover,
.dashboard-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

/* ============================================================================
   Modal Body
   ============================================================================ */
.dashboard-modal .modal-body {
    /* Background */
    background: var(--dm-body-bg);

    /* Spacing */
    padding: var(--dm-padding);

    /* Scroll configuration - CRITICAL for flexbox */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Scrollbar styling */
.dashboard-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}

.dashboard-modal .modal-body::-webkit-scrollbar-track {
    background: #f9fafb;
}

.dashboard-modal .modal-body::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

.dashboard-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================================================
   Modal Footer
   ============================================================================ */
.dashboard-modal .modal-footer {
    /* Background */
    background: var(--dm-footer-bg);

    /* Spacing */
    padding: 24px var(--dm-padding);

    /* Border */
    border-top: 1px solid var(--dm-border-color);
    border-radius: 0 0 var(--dm-border-radius) var(--dm-border-radius);

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dm-gap);

    /* Prevent shrinking */
    flex-shrink: 0;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.dashboard-modal .btn-primary {
    background: var(--dm-header-gradient);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--dm-shadow-md);
    transition: all var(--dm-transition);
    cursor: pointer;
}

.dashboard-modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--dm-shadow-lg);
}

.dashboard-modal .btn-secondary {
    background: #ffffff;
    color: #2d2d2d;
    border: 1px solid var(--dm-border-color);
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--dm-transition);
    cursor: pointer;
}

.dashboard-modal .btn-secondary:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.dashboard-modal .btn-danger {
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #dc2626;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--dm-transition);
    cursor: pointer;
}

.dashboard-modal .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    transform: translateY(-1px);
}

/* ============================================================================
   Form Elements
   ============================================================================ */
.dashboard-modal .form-section {
    border-radius: 18px;
    border: 1px solid var(--dm-border-color);
    padding: 24px;
    background: #ffffff;
}

.dashboard-modal .form-section h4 {
    color: #000000;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-modal .form-group {
    margin-bottom: 16px;
}

.dashboard-modal .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
    margin-bottom: 6px;
}

.dashboard-modal .form-group input,
.dashboard-modal .form-group select,
.dashboard-modal .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--dm-border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    color: #111827;
    background: #ffffff;
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.dashboard-modal .form-group input:focus,
.dashboard-modal .form-group select:focus,
.dashboard-modal .form-group textarea:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.dashboard-modal .field-help {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: 4px;
}

.dashboard-modal .required {
    color: #dc2626;
}

/* ============================================================================
   Body Scroll Lock
   ============================================================================ */
body.modal-open {
    overflow: hidden;
}

/* ============================================================================
   Responsive - Tablet
   ============================================================================ */
@media (max-width: 992px) {
    .dashboard-modal {
        padding: 16px;
    }

    .dashboard-modal-content {
        max-width: 98vw;
        max-height: 95vh;
    }

    .dashboard-modal .modal-header {
        padding: 20px 24px;
    }

    .dashboard-modal .modal-body {
        padding: 24px;
    }

    .dashboard-modal .modal-footer {
        padding: 20px 24px;
    }
}

/* ============================================================================
   Responsive - Mobile
   ============================================================================ */
@media (max-width: 768px) {
    .modal.dashboard-modal {
        padding: var(--dm-overlay-padding-mobile) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .modal.dashboard-modal .dashboard-modal-content {
        width: 100vw !important;
        width: 100svw !important;
        width: 100dvw !important;
        height: 100vh;
        height: 100svh;
        height: var(--dm-height-mobile);
        height: 100dvh;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        max-height: var(--dm-height-mobile) !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: var(--dm-radius-mobile) !important;
        box-shadow: none !important;
    }

    .dashboard-modal .modal-header {
        border-radius: var(--dm-radius-mobile) !important;
        padding-left: var(--dm-padding-mobile) !important;
        padding-right: var(--dm-padding-mobile) !important;
        padding-top: calc(var(--dm-padding-mobile) + env(safe-area-inset-top)) !important;
        padding-bottom: var(--dm-padding-mobile) !important;
    }

    .dashboard-modal .modal-body {
        padding: var(--dm-padding-mobile) !important;
        gap: 12px;
    }

    .dashboard-modal .modal-footer {
        border-radius: var(--dm-radius-mobile) !important;
        padding: var(--dm-padding-mobile) !important;
        padding-bottom: calc(var(--dm-padding-mobile) + env(safe-area-inset-bottom)) !important;
        flex-wrap: wrap;
        gap: 12px;
    }

    .dashboard-modal .form-section {
        padding: 16px;
        border-radius: 14px;
        border-width: 1px;
    }

    .dashboard-modal .btn-primary,
    .dashboard-modal .btn-secondary,
    .dashboard-modal .btn-danger {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================================
   Modal Tabs (for modules with top tabs inside modals)
   ============================================================================ */
.dashboard-modal .modal-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px var(--dm-padding);
    background: #f6f6f7;
    border-bottom: 1px solid var(--dm-border-color);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.dashboard-modal .modal-tabs::-webkit-scrollbar {
    height: 6px;
}

.dashboard-modal .modal-tabs::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

.dashboard-modal .modal-tab {
    border: 1px solid var(--dm-border-color);
    background: #ffffff;
    color: #1f2937;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--dm-transition), color var(--dm-transition), border-color var(--dm-transition), transform var(--dm-transition);
    white-space: nowrap;
}

.dashboard-modal .modal-tab:hover {
    border-color: #111827;
    transform: translateY(-1px);
}

.dashboard-modal .modal-tab.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.dashboard-modal .modal-tab i {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .dashboard-modal .modal-tabs {
        padding: 10px var(--dm-padding-mobile);
        gap: 8px;
    }

    .dashboard-modal .modal-tab {
        padding: 7px 14px;
        font-size: 0.85rem;
    }
}

/* ============================================================================
   Accessibility
   ============================================================================ */
.dashboard-modal:focus {
    outline: none;
}

.dashboard-modal [role="dialog"] {
    outline: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    .dashboard-modal,
    .dashboard-modal * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   Product Modal - Largura Maior
   Para acomodar melhor os campos fiscais
   ============================================================================ */
#product-modal.dashboard-modal .dashboard-modal-content {
    max-width: min(1200px, 96vw);
}

@media (max-width: 992px) {
    #product-modal.dashboard-modal .dashboard-modal-content {
        max-width: 98vw;
    }
}

/* Hardening: ensure dashboard modal layout wins over module-specific modal styles */
.modal.dashboard-modal {
    background: var(--dm-overlay-bg) !important;
    padding: var(--dm-overlay-padding) !important;
}

.modal.dashboard-modal .dashboard-modal-content {
    background: var(--dm-content-bg) !important;
    border-radius: var(--dm-border-radius) !important;
    box-shadow: var(--dm-shadow-xl) !important;
    border: none !important;
}

.modal.dashboard-modal .modal-header {
    background: var(--dm-header-gradient) !important;
    color: var(--dm-header-text) !important;
}

.modal.dashboard-modal .modal-footer {
    background: var(--dm-footer-bg) !important;
}

/* Final mobile override to keep full-screen layout after hardening rules */
@media (max-width: 768px) {
    .modal.dashboard-modal {
        padding: var(--dm-overlay-padding-mobile) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .modal.dashboard-modal .dashboard-modal-content {
        border-radius: var(--dm-radius-mobile) !important;
        box-shadow: none !important;
    }

    .modal.dashboard-modal .modal-header,
    .modal.dashboard-modal .modal-footer {
        border-radius: var(--dm-radius-mobile) !important;
    }
}