/**
 * LA OFICINA - Modal Fixes
 * Fecha: 2025-02-09
 * Autor: Kai
 * 
 * Fix para los problemas de scroll y layout en modales de tareas y proyectos
 */

/* ==================== FIX MODAL SCROLL ==================== */

/* El modal debe tener altura controlada y estructura flex */
.modal {
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* El header y footer son fijos (no hacen scroll) */
.modal-header {
    flex-shrink: 0;
}

/* El formulario (body) es el que hace scroll */
.modal form {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Grid de dos columnas dentro del formulario */
.modal form > div[style*="grid-template-columns"] {
    flex: 1;
    min-height: 0; /* Importante para que el grid respete el contenedor flex */
    height: 100%;
}

/* Columnas del grid deben tener altura controlada */
.modal form > div[style*="grid-template-columns"] > div {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
}

/* Scroll suave para las columnas */
.modal form > div[style*="grid-template-columns"] > div::-webkit-scrollbar {
    width: 6px;
}

.modal form > div[style*="grid-template-columns"] > div::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.modal form > div[style*="grid-template-columns"] > div::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.modal form > div[style*="grid-template-columns"] > div::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* ==================== FIX DESCRIPCIÓN ==================== */

/* La descripción debe tener altura controlada */
.description-editor {
    display: flex;
    flex-direction: column;
    max-height: 350px;
}

.description-textarea,
.description-preview {
    flex: 1;
    overflow-y: auto;
    min-height: 150px;
    max-height: 300px;
}

/* ==================== FIX PESTAÑAS Y CONTENIDO ==================== */

/* Las pestañas (Detalles/Comentarios) con flex: 1 deben tener scroll */
.modal [x-show="taskModalTab === 'options'"],
.modal [x-show="taskModalTab === 'comments'"],
.modal [x-show="projectModalTab === 'details'"],
.modal [x-show="projectModalTab === 'comments'"] {
    overflow-y: auto;
    max-height: 100%;
}

/* Los contenedores de comentarios necesitan scroll independiente */
.modal [x-show="editingTask"][style*="display: flex; flex-direction: column; height: 100%"],
.modal [x-show="editingProject"][style*="display: flex; flex-direction: column; height: 100%"] {
    overflow-y: auto;
}

/* Lista de comentarios con altura máxima */
.modal [x-show="editingTask"] > div[style*="flex: 1; display: flex; flex-direction: column; gap: 0.5rem"],
.modal [x-show="editingProject"] > div[style*="flex: 1; display: flex; flex-direction: column; gap: 0.5rem"] {
    overflow-y: auto;
    max-height: 400px;
}

/* ==================== FIX RESPONSIVE MÓVIL ==================== */

@media (max-width: 768px) {
    /* En móvil, el modal ocupa casi toda la pantalla */
    .modal {
        max-height: 95vh !important;
        max-width: 95vw !important;
    }
    
    /* Grid de 2 columnas se convierte en 1 columna */
    .modal form > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    /* Remover el border-left de la columna derecha en móvil */
    .modal form > div[style*="grid-template-columns"] > div[style*="border-left"] {
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
    
    /* Reducir altura máxima de descripción en móvil */
    .description-editor {
        max-height: 250px;
    }
    
    .description-textarea,
    .description-preview {
        max-height: 200px;
    }
    
    /* Grid de detalles (2 columnas) en móvil a 1 columna */
    .modal [style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== FIX BOTONES EN MODAL ==================== */

/* Los botones de acción deben quedar fijos al final */
.modal [style*="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border)"] {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    margin-top: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem;
}

/* ==================== MEJORAS DE MARKDOWN PREVIEW ==================== */

/* Ya existe en ui-improvements.css pero aseguramos que funcione */
.description-preview {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.description-preview h1,
.description-preview h2,
.description-preview h3,
.description-preview h4,
.description-preview h5,
.description-preview h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.description-preview h1:first-child,
.description-preview h2:first-child,
.description-preview h3:first-child {
    margin-top: 0;
}

.description-preview h1 { font-size: 1.5rem; }
.description-preview h2 { 
    font-size: 1.25rem; 
    border-bottom: 1px solid var(--border); 
    padding-bottom: 0.5rem; 
}
.description-preview h3 { font-size: 1.1rem; }

.description-preview p {
    margin-bottom: 1rem;
}

.description-preview ul, 
.description-preview ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.description-preview li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.description-preview code {
    background: var(--bg-primary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--accent-primary);
}

.description-preview pre {
    background: var(--bg-primary);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.description-preview pre code {
    background: transparent;
    padding: 0;
    color: var(--text-primary);
}

.description-preview blockquote {
    border-left: 3px solid var(--accent-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

.description-preview strong {
    font-weight: 600;
    color: var(--text-primary);
}

.description-preview em {
    font-style: italic;
    color: var(--text-secondary);
}

.description-preview a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.description-preview a:hover {
    border-bottom-color: var(--accent-primary);
}

.description-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.description-preview th,
.description-preview td {
    padding: 0.5rem;
    border: 1px solid var(--border);
    text-align: left;
}

.description-preview th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.description-preview tr:nth-child(even) {
    background: var(--bg-tertiary);
}

.description-preview hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.description-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1rem 0;
}

/* ==================== FIX PARA CAMPOS QUE SE SALEN ==================== */

/* Asegurar que los inputs y selects no se salgan del contenedor */
.modal .form-input,
.modal .form-select,
.modal .form-textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* Los grupos de formulario con background no deben crecer infinito */
.modal .form-group[style*="background: var(--bg-tertiary)"] {
    flex-shrink: 0;
}

/* ==================== INDICADOR DE SCROLL ==================== */

/* Indicador visual de que hay contenido debajo (sombra) */
.modal form > div[style*="grid-template-columns"] > div::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 20px;
    margin: -20px 0 0 0;
    pointer-events: none;
}

/* ==================== RESPONSIVE MÓVIL ==================== */
@media (max-width: 768px) {
    /* Modal ocupa toda la pantalla */
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;

/* ==================== DESACTIVAR EN MÓVIL ==================== */
/* Todos los estilos de este archivo se desactivan en móvil */
/* Aria rediseñará el modal para móvil desde cero */
@media (max-width: 768px) {
    .modal,
    .modal form,
    .modal form > div,
    .modal form > div > div {
        all: revert !important;
    }
}