/**
 * Styles for sync status badges and enhanced curator UI
 */

/* Blocos #sync-with-server* removidos (ago/2026): ids mortos — o sync
   manual vive no chip do header (#btn-sync-details, SyncStatusModule).
   Ficam os estilos de curator abaixo (curatorModule renderiza os ids
   dinamicamente). */
/* Data origin badges removidos — dead CSS: o SourceUtils emite o padrão
   único .chip chip--{tone} (components.css + tokens do design-system). Ago/2026. */

/* .restaurant-card removido (ago/2026): zero referências — o status
   visual dos cards vive no .card-accent-* (components.css). */

/* Curator selector styles */
#curator-selector-container {
    margin-bottom: 1rem;
}

.curator-selector-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

#curator-selector {
    flex-grow: 1;
}

/* Sync controls */
.sync-controls {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Curator filter toggle */
.curator-filter-toggle {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-neutral-600);
}

.curator-filter-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    accent-color: var(--color-primary-600);
}

/* Compact curator section styles */
#curator-section {
    transition: all 0.2s ease;
}

#curator-section.editing {
    padding: 1rem;
}

/* Compact display mode */
#curator-compact-display {
    display: flex;
}

/* Hover states for compact buttons */
#curator-compact-display button,
#curator-edit-form button,
#curator-selector-compact button {
    transition: all 0.15s ease;
}

/* Mobile optimizations */
@media (max-width: 639px) {
    #curator-compact-display {
        padding: 0.25rem 0;
    }
    
    #curator-compact-display > div {
        width: 100%;
    }
}

/* Smooth slide-down animation for form sections */
#curator-edit-form:not(.hidden),
#curator-selector-compact:not(.hidden) {
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* API key visibility toggle button */
#toggle-api-visibility {
    cursor: pointer;
    user-select: none;
}

#toggle-api-visibility:focus {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
    border-radius: 0.25rem;
}