@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

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

@import "./custom.css";
@import "./theme.css";

@layer components {
    /* --- BADGES (Status estilo Pílula - Cores Figma) --- */
    .badge-figma {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
    }

    .badge-success { background-color: #DCFCE7; color: #15803D; }
    .badge-warning { background-color: #FEF9C3; color: #A16207; }
    .badge-expired { background-color: #FFEDD5; color: #C2410C; }
    .badge-error   { background-color: #FEE2E2; color: #B91C1C; }

    /* Badge de Notificação (Contador no botão Filtros) */
    .badge-notification {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #FFE4E6;
        color: #E11D48;
        border-radius: 6px;
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 700;
        margin-left: 6px;
    }

    /* --- DROPDOWN (Menu de Ações) --- */
    .dropdown-wrapper {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        position: fixed;
        background-color: #FFFFFF;
        border: 1px solid #E5E7EB;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        width: 160px;
        border-radius: 0.5rem;
        padding: 4px;
        z-index: 50;
        display: none;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        height: 36px;
        padding: 0 0.75rem;
        font-size: 0.875rem;
        color: #374151;
        border-radius: 0.375rem;
        transition: background-color 0.15s ease;
        text-align: left;
        cursor: pointer;
        white-space: nowrap;
        background: none;
        border: none;
    }

    .dropdown-item:hover {
        background-color: #F3F4F6;
    }
}