/* ============================================
   SyncIMAPWeb - Custom CSS
   Estilos que Tailwind no cubre directamente
   ============================================ */

/* Terminal output styling */
#resultOutput,
#batchResultOutput {
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
}

/* Custom scrollbar for terminal output */
#resultOutput::-webkit-scrollbar,
#batchResultOutput::-webkit-scrollbar {
    width: 8px;
}

#resultOutput::-webkit-scrollbar-track,
#batchResultOutput::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

#resultOutput::-webkit-scrollbar-thumb,
#batchResultOutput::-webkit-scrollbar-thumb {
    background: #BB4C81;
    border-radius: 4px;
}

#resultOutput::-webkit-scrollbar-thumb:hover,
#batchResultOutput::-webkit-scrollbar-thumb:hover {
    background: #a3426f;
}

/* Accounts list scrollbar */
#accountsList::-webkit-scrollbar {
    width: 6px;
}

#accountsList::-webkit-scrollbar-track {
    background: #f5eef8;
    border-radius: 3px;
}

#accountsList::-webkit-scrollbar-thumb {
    background: #d9c8e0;
    border-radius: 3px;
}

#accountsList::-webkit-scrollbar-thumb:hover {
    background: #BB4C81;
}

/* Firefox scrollbar */
#resultOutput,
#batchResultOutput {
    scrollbar-width: thin;
    scrollbar-color: #BB4C81 rgba(255, 255, 255, 0.1);
}

#accountsList {
    scrollbar-width: thin;
    scrollbar-color: #d9c8e0 #f5eef8;
}

/* Focus visible for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid #BB4C81;
    outline-offset: 2px;
}

/* Details/Summary marker styling */
details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

/* Smooth animations */
@media (prefers-reduced-motion: no-preference) {
    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Print styles */
@media print {
    .cookie-banner,
    .cookie-modal,
    button,
    .btn-primary,
    .btn-secondary {
        display: none !important;
    }

    body {
        background: white !important;
        padding: 0 !important;
    }
}