/* 
 * Testeam - Custom CSS
 * Estilos personalizados para la aplicación
 */

/* ===================================
   CORRECCIÓN: Elipsis para títulos largos
   =================================== */

/* Elipsis para items de archivos en el sidebar */
.file-item {
    overflow: hidden !important; /* Evitar desbordamiento horizontal */
}

/* CRÍTICO: El contenedor flex debe tener min-width: 0 */
.file-item .d-flex.align-items-center {
    min-width: 0 !important;
}

.file-item .flex-grow-1 {
    min-width: 0 !important; /* Permite que el contenido se encoja */
    overflow: hidden !important;
}

.file-item .fw-semibold {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Elipsis para nombre de archivo en historial */
.history-filename {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important; /* Ancho máximo antes de aplicar elipsis */
    display: block !important;
}

/* Contenedor del historial para evitar overflow */
.history-item {
    overflow: hidden !important;
}

.history-item .d-flex.justify-content-between {
    min-width: 0 !important; /* Permite que flexbox funcione correctamente con ellipsis */
}

.history-item .d-flex.justify-content-between > div:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 !important;
}

/* ===================================
   SCROLL VERTICAL - LISTAS
   =================================== */

/* Asegurar que toda la cadena de contenedores use flexbox */
#kt_app_sidebar_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#kt_app_sidebar_wrapper .menu {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Los tabs no deben crecer */
.sidebar-tabs {
    flex-shrink: 0 !important;
}

/* Hacer que filesContent e historyContent usen flexbox y ocupen el espacio restante */
#filesContent,
#queueContent,
#historyContent,
#jobsContent {
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* Mostrar como flex solo cuando está visible */
#filesContent:not([style*="display: none"]),
#queueContent:not([style*="display: none"]),
#historyContent:not([style*="display: none"]),
#jobsContent:not([style*="display: none"]) {
    display: flex !important;
}

/* Menu-item (header) no debe crecer */
#filesContent .menu-item,
#queueContent .menu-item,
#historyContent .menu-item,
#jobsContent .menu-item {
    flex-shrink: 0 !important;
}

/* Contenedor de archivos con scroll - ocupa todo el espacio restante */
#fileList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

/* Contenedor de fila con scroll - ocupa todo el espacio restante */
#queueList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

/* Contenedor de historial con scroll - ocupa todo el espacio restante */
#historyList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

/* Contenedor de jobs con scroll - ocupa todo el espacio restante */
#jobsList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

/* El botón de limpiar historial tampoco debe crecer */
#clearHistoryBtn {
    flex-shrink: 0 !important;
    z-index: 10 !important; /* Asegurar que sea clickeable */
    position: relative !important;
    pointer-events: auto !important; /* Forzar que sea clickeable */
    cursor: pointer !important;
}

/* Scrollbar personalizado para listas - Tema oscuro */
#fileList::-webkit-scrollbar,
#queueList::-webkit-scrollbar,
#historyList::-webkit-scrollbar,
#jobsList::-webkit-scrollbar {
    width: 8px;
}

#fileList::-webkit-scrollbar-track,
#queueList::-webkit-scrollbar-track,
#historyList::-webkit-scrollbar-track,
#jobsList::-webkit-scrollbar-track {
    background: #1e1e2d;
    border-radius: 10px;
}

#fileList::-webkit-scrollbar-thumb,
#queueList::-webkit-scrollbar-thumb,
#historyList::-webkit-scrollbar-thumb,
#jobsList::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
    border: 2px solid #1e1e2d;
}

#fileList::-webkit-scrollbar-thumb:hover,
#queueList::-webkit-scrollbar-thumb:hover,
#historyList::-webkit-scrollbar-thumb:hover,
#jobsList::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Para Firefox */
#fileList,
#queueList,
#historyList,
#jobsList {
    scrollbar-width: thin;
    scrollbar-color: #667eea #1e1e2d;
}

/* ===================================
   FIX: SweetAlert2 Modal Visibility
   =================================== */

/* Forzar visibilidad de modales SweetAlert2 */
.swal2-container {
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.swal2-popup {
    z-index: 999999 !important;
    position: relative !important;
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 0 !important;
    max-width: 500px !important;
    width: 90% !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Header del modal (título + icono) */
.swal2-header {
    padding: 30px 30px 0 30px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Icono en el header */
.swal2-icon {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: none !important;
    font-size: 32px !important;
    flex-shrink: 0 !important;
}

.swal2-icon.swal2-warning::before {
    content: '🗑️' !important;
    font-size: 32px !important;
}

.swal2-icon.swal2-success::before {
    content: '✅' !important;
    font-size: 32px !important;
}

/* Ocultar elementos internos del icono de Swal */
.swal2-icon .swal2-icon-content,
.swal2-icon [class^='swal2-success'],
.swal2-icon [class^='swal2-x-mark'] {
    display: none !important;
}

/* Título del modal */
.swal2-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Contenido del modal (texto + warning) */
.swal2-html-container {
    color: #d4d4d4 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 20px 30px 25px 30px !important;
    text-align: left !important;
}

/* Botones */
.swal2-actions {
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 30px 30px 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: transparent !important;
}

.swal2-cancel {
    background: #4b5563 !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    order: 1 !important;
    transition: all 0.2s !important;
}

.swal2-cancel:hover {
    background: #6b7280 !important;
}

.swal2-confirm {
    background: #ef4444 !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    order: 2 !important;
    transition: all 0.2s !important;
}

.swal2-confirm:hover {
    background: #dc2626 !important;
}

/* Asegurar que el overlay sea visible */
.swal2-container.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Forzar que el modal esté centrado y visible */
.swal2-container.swal2-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.swal2-shown > [aria-hidden="true"] {
    filter: blur(10px);
}

body.swal2-toast-shown .swal2-container {
    z-index: 999999 !important;
}

/* Asegurar que nada bloquee el modal */
body.swal2-shown {
    overflow: hidden !important;
}

/* Forzar visibilidad del popup */
.swal2-popup.swal2-show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.swal2-popup .swal2-validation-message {
    padding: 0 30px 25px 30px !important;
}

.swal2-deny {
    border-radius: 6px;
}