/* Sistema de Anotações - Estilos */

/* Animações */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Botão flutuante */
#notes-fab {
    animation: fadeIn 0.5s ease-in;
}

#notes-fab:hover {
    transform: scale(1.1);
}

#notes-fab:active {
    transform: scale(0.95);
}

/* Badge */
#notes-badge {
    animation: pulse 0.5s ease-in-out;
}

/* Drawer */
#notes-drawer {
    max-height: 85vh;
}

@media (min-width: 768px) {
    #notes-drawer {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 1rem 1rem 0 0;
    }
}

/* Notas */
.note-item {
    transition: all 0.3s ease;
    animation: slideUp 0.3s ease-out;
}

.note-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode específico para notas */
.dark #notes-drawer {
    background-color: #1f2937;
}

.dark .note-item {
    background-color: #374151;
}

.dark .note-item:hover {
    background-color: #4b5563;
}

/* Scrollbar customizada para área de notas */
#notes-list::-webkit-scrollbar {
    width: 6px;
}

#notes-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#notes-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#notes-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Focus states para acessibilidade */
#note-title:focus,
#note-content:focus {
    ring-color: var(--verde-principal);
    border-color: var(--verde-principal);
}

/* Responsividade */
@media (max-width: 640px) {
    #notes-fab {
        bottom: 1rem;
        right: 1rem;
        width: 3rem;
        height: 3rem;
    }
    
    #notes-fab i {
        font-size: 1.25rem;
    }
}

/* Animação de loading */
.notes-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estados de erro */
.notes-error {
    background-color: #fee;
    border-color: #fcc;
    color: #c33;
}

/* Transições suaves */
.note-tab {
    transition: all 0.2s ease;
}

.note-tab:hover:not(.text-verde) {
    background-color: rgba(103, 141, 114, 0.1);
}

/* Print styles */
@media print {
    #notes-fab,
    #notes-drawer {
        display: none !important;
    }
}