/**
 * DentistaFeliz — Estilos Customizados
 * Complementa o Tailwind CSS para casos específicos
 */

/* ========================================
   SCROLLBAR PERSONALIZADA
   ======================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.5);
}
.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   SELEÇÃO DE TEXTO
   ======================================== */
::selection {
    background: rgba(59, 130, 246, 0.2);
    color: inherit;
}

/* ========================================
   TRANSIÇÕES SUAVES
   ======================================== */
* {
    scroll-behavior: smooth;
}

a, button, input, select, textarea {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* ========================================
   LOADING SKELETON
   ======================================== */
.df-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
    animation: df-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.75rem;
}
.dark .df-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 75%);
    background-size: 200% 100%;
}
@keyframes df-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   GLASS MORPHISM (DARK MODE)
   ======================================== */
.df-glass {
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* ========================================
   FORMULÁRIOS
   ======================================== */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
}
.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
}

/* Focus ring consistente */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* ========================================
   SIDEBAR LAYOUT (DASHBOARD)
   ======================================== */
#df-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 114, 128, 0.2) transparent;
}

/* ========================================
   ODONTOGRAMA
   ======================================== */
#odontograma-container svg path {
    transition: fill 0.2s, stroke 0.2s;
}

/* ========================================
   TOAST ANIMATIONS
   ======================================== */
.df-toast-enter {
    animation: df-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.df-toast-exit {
    animation: df-toast-out 0.3s ease-in forwards;
}
@keyframes df-toast-in {
    0% { opacity: 0; transform: translateX(100%) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes df-toast-out {
    0% { opacity: 1; transform: translateX(0) scale(1); }
    100% { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* ========================================
   MODAL ANIMATIONS
   ======================================== */
.df-modal-enter {
    animation: df-modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes df-modal-in {
    0% { opacity: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ========================================
   CALENDÁRIO
   ======================================== */
#df-calendar .group:hover svg path {
    opacity: 1;
}

/* ========================================
   RESPONSIVIDADE EXTRA
   ======================================== */
@media (max-width: 640px) {
    .df-hide-mobile {
        display: none !important;
    }
    #df-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 280px;
        height: 100vh;
        z-index: 9990;
        transition: left 0.3s ease;
    }
    #df-sidebar.open {
        left: 0;
    }
    #df-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9989;
    }
    #df-sidebar.open ~ #df-sidebar-overlay {
        display: block;
    }
}

/* ========================================
   PRINT
   ======================================== */
@media print {
    #df-header, #df-footer, #df-sidebar, #df-toasts, #df-modal, #df-error-console, #df-loading {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
    #df-content {
        padding: 0 !important;
    }
}