/**
 * Componentes CSS Otimizados
 * Estilos customizados para componentes da aplicação
 */

/* ===== COMPONENTES BASE ===== */

/* Cards */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-300;
}

.card:hover {
    @apply shadow-md transform -translate-y-1;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700;
}

/* Botões */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply bg-transparent border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Inputs */
.input {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

.input-error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

.input-success {
    @apply border-green-300 focus:ring-green-500 focus:border-green-500;
}

/* Select */
.select {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200;
}

/* ===== COMPONENTES ESPECÍFICOS ===== */

/* Stat Cards */
.stat-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300;
}

.stat-card:hover {
    @apply shadow-md;
}

.stat-icon {
    @apply p-3 rounded-lg;
}

.stat-icon.blue {
    @apply bg-blue-100 dark:bg-blue-900;
}

.stat-icon.green {
    @apply bg-green-100 dark:bg-green-900;
}

.stat-icon.yellow {
    @apply bg-yellow-100 dark:bg-yellow-900;
}

.stat-icon.red {
    @apply bg-red-100 dark:bg-red-900;
}

.stat-icon.purple {
    @apply bg-purple-100 dark:bg-purple-900;
}

/* Tabelas */
.table-container {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden;
}

.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table thead {
    @apply bg-gray-50 dark:bg-gray-700;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

.table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200;
}

.table tbody tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-800;
}

/* Gráficos */
.chart-container {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

.chart-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-4;
}

/* Modais */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-50;
}

.modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-content {
    @apply inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
}

.modal-header {
    @apply px-4 pt-5 pb-4 sm:p-6 sm:pb-4;
}

.modal-body {
    @apply px-4 pb-4 sm:p-6;
}

.modal-footer {
    @apply px-4 py-3 bg-gray-50 dark:bg-gray-700 sm:px-6 sm:flex sm:flex-row-reverse;
}

/* Toasts */
.toast {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full transform transition-all duration-300;
}

.toast.success {
    @apply bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700;
}

.toast.error {
    @apply bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700;
}

.toast.warning {
    @apply bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700;
}

.toast.info {
    @apply bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700;
}

/* Loading */
.loading-spinner {
    @apply animate-spin rounded-full border-4 border-gray-200 border-t-blue-600;
}

.loading-spinner.sm {
    @apply w-4 h-4;
}

.loading-spinner.md {
    @apply w-8 h-8;
}

.loading-spinner.lg {
    @apply w-12 h-12;
}

.loading-overlay {
    @apply fixed inset-0 bg-white bg-opacity-75 flex items-center justify-center z-50;
}

/* ===== UTILITÁRIOS ===== */

/* Animações */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.fade-out {
    animation: fadeOut 0.5s ease-in-out;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-out-right {
    animation: slideOutRight 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Estados */
.disabled {
    @apply opacity-50 cursor-not-allowed;
}

.hidden {
    @apply display-none;
}

.visible {
    @apply display-block;
}

/* Responsividade */
@media (max-width: 640px) {
    .card {
        @apply mx-2;
    }
    
    .table-container {
        @apply overflow-x-auto;
    }
    
    .modal-content {
        @apply mx-4;
    }
}

/* ===== TEMAS ===== */

/* Dark mode específico */
.dark .card {
    @apply bg-gray-800 border-gray-700;
}

.dark .btn-outline {
    @apply border-gray-600 text-gray-300 hover:bg-gray-700;
}

.dark .input {
    @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
}

.dark .select {
    @apply bg-gray-700 border-gray-600 text-white;
}

.dark .table thead {
    @apply bg-gray-700;
}

.dark .table th {
    @apply text-gray-300 hover:bg-gray-600;
}

.dark .table td {
    @apply text-white;
}

.dark .table tbody tr {
    @apply hover:bg-gray-700;
}

.dark .table tbody tr:nth-child(even) {
    @apply bg-gray-800;
}

/* ===== PERFORMANCE ===== */

/* Otimizações de renderização */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Reduz reflow/repaint */
.transform-layer {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== ACESSIBILIDADE ===== */

/* Focus visível */
.focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== PRINT ===== */

@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }
}