@tailwind base;
@tailwind components;
@tailwind utilities;

/* Alpine.js Cloak */
[x-cloak] {
    display: none !important;
}

/* Responsive Typography */
html {
    font-size: 14px;
    /* Base size for mobile */
}

@media (min-width: 640px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px;
        /* Standard size for desktop */
    }
}

@media (min-width: 1536px) {
    html {
        font-size: 17px;
    }
}

/* Catppuccin Global Overrides */
input,
select,
textarea {
    @apply bg-latte-surface0 dark:bg-mocha-surface0 text-latte-text dark:text-mocha-text border-latte-surface2 dark:border-mocha-surface2;
}

input::placeholder,
textarea::placeholder {
    @apply text-latte-subtext0 dark:text-mocha-subtext0;
}

/* Card base styles */
.card {
    @apply bg-latte-surface0 dark:bg-mocha-surface0 border border-latte-surface2 dark:border-mocha-surface2 shadow-sm;
}

/* Custom Scrollbar */
aside div::-webkit-scrollbar {
    width: 4px;
}

/* Zebra Striped Tables */
.table-zebra tbody tr:nth-child(even) {
    @apply bg-latte-surface0/50 dark:bg-mocha-surface0/30;
}

.table-zebra tbody tr:hover {
    @apply bg-latte-surface1/50 dark:bg-mocha-surface1/30;
}

/* Catppuccin Text Utilities */
.text-ctp-blue {
    @apply text-latte-blue dark:text-mocha-blue;
}

.text-ctp-red {
    @apply text-latte-red dark:text-mocha-red;
}

.text-ctp-green {
    @apply text-latte-green dark:text-mocha-green;
}

.text-ctp-yellow {
    @apply text-latte-yellow dark:text-mocha-yellow;
}

.text-ctp-peach {
    @apply text-latte-peach dark:text-mocha-peach;
}

.text-ctp-mauve {
    @apply text-latte-mauve dark:text-mocha-mauve;
}

.text-ctp-text {
    @apply text-latte-text dark:text-mocha-text;
}

.text-ctp-subtext0 {
    @apply text-latte-subtext0 dark:text-mocha-subtext0;
}


aside div::-webkit-scrollbar-track {
    background: transparent;
}

aside div::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 20px;
}

/* ==========================================
   SKELETON LOADING
   Estilos para placeholders de carregamento
   ========================================== */

/* Animação shimmer (brilho que passa) */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Classe base do skeleton */
.skeleton {
    background: linear-gradient(90deg,
            rgba(156, 163, 175, 0.2) 0%,
            rgba(156, 163, 175, 0.4) 50%,
            rgba(156, 163, 175, 0.2) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}

/* Dark mode */
.dark .skeleton {
    background: linear-gradient(90deg,
            rgba(75, 85, 99, 0.3) 0%,
            rgba(75, 85, 99, 0.5) 50%,
            rgba(75, 85, 99, 0.3) 100%);
    background-size: 200% 100%;
}

/* Variantes */
.skeleton-text {
    height: 1rem;
    width: 100%;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
}

.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.skeleton-image {
    width: 100%;
    height: 12rem;
}

.skeleton-card {
    padding: 1rem;
    border-radius: 0.5rem;
}

.skeleton-button {
    height: 2.5rem;
    width: 6rem;
}

/* Skeleton de linha de tabela */
.skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.skeleton-table-cell {
    height: 1rem;
    flex: 1;
}

/* ==========================================
   LAZY LOADING IMAGES
   Transição suave quando imagem carrega
   ========================================== */

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([data-src]) {
    opacity: 1;
}

/* Placeholder enquanto carrega */
.lazy-image-wrapper {
    position: relative;
    overflow: hidden;
    background: rgba(156, 163, 175, 0.1);
}

.lazy-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    background-size: 200% 100%;
}

.lazy-image-wrapper img.loaded+.lazy-image-wrapper::before {
    display: none;
}