/* Custom CSS for CMS DHRU */

/* HTMX Loading States */
.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

/* Smooth page transitions */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 200ms ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: oklch(var(--b2));
}

::-webkit-scrollbar-thumb {
    background: oklch(var(--bc) / 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--bc) / 0.5);
}

/* Table improvements */
.table tr:hover td {
    background-color: oklch(var(--b2));
}

/* Card hover effect */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Stats card gradient borders */
.stats-gradient {
    background: linear-gradient(135deg, oklch(var(--p)) 0%, oklch(var(--s)) 100%);
    padding: 2px;
    border-radius: 1rem;
}

.stats-gradient .stat {
    background: oklch(var(--b1));
    border-radius: calc(1rem - 2px);
}

/* Form focus animations */
.input:focus, .select:focus, .textarea:focus {
    transition: all 0.2s ease;
}

/* Badge pulse animation */
@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.badge-pulse {
    animation: pulse-badge 2s infinite;
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        oklch(var(--b3)) 25%,
        oklch(var(--b2)) 50%,
        oklch(var(--b3)) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Copy button success animation */
.copy-success {
    animation: copy-flash 0.5s ease;
}

/* Panel de notificaciones: scroll suave */
.notif-panel-scroll {
    scroll-behavior: smooth;
}

@keyframes copy-flash {
    0%, 100% {
        background-color: oklch(var(--su));
    }
    50% {
        background-color: oklch(var(--su) / 0.5);
    }
}

/* Panel usuario: responsivo en todo momento */
@media (max-width: 767px) {
    /* Contenedor principal sin overflow horizontal */
    .overflow-y-auto {
        overflow-x: hidden;
    }
}

/* Tablas y grids del panel: evitar desborde */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* API Keys: responsive en móvil y tablet */
@media (max-width: 767px) {
    .api-keys-page .api-keys-card-body {
        padding: 0.875rem 0.9rem;
    }
    .api-keys-page .card-body .mockup-code pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Documentación API: responsive en móvil y tablet */
@media (max-width: 767px) {
    .api-docs-page .api-docs-card-body {
        padding: 0.875rem 0.9rem;
    }
    .api-docs-page .mockup-code,
    .api-docs-page .overflow-x-auto {
        max-width: 100%;
    }
    .api-docs-page .mockup-code pre,
    .api-docs-page pre code {
        word-break: break-all;
        white-space: pre-wrap;
    }
}