/* ============================================
   DROPS - Pharmdata Design System
   Componentes alegres e coloridos para dados farmacêuticos
   Variações: badges, botões, redondos, ovais
   Alinhamentos: horizontal, vertical, flexbox
   ============================================ */

/* ========== DROP BASE STYLES ========== */

.drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

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

.drop:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ========== DROP SIZES ========== */

.drop-xs {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

.drop-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.drop-md {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.drop-lg {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

.drop-xl {
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
}

/* ========== DROP SHAPES ========== */

/* Rectangular (default badge) */
.drop-rect {
    border-radius: 0.375rem;
}

/* Rounded (pill shape) */
.drop-pill {
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Oval (more rounded than rect, less than pill) */
.drop-oval {
    border-radius: 0.75rem;
}

/* Perfect circle (icon only or with small badge number) */
.drop-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    padding: 0;
    font-size: 1rem;
}

.drop-circle.drop-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
}

.drop-circle.drop-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
}

/* ========== DROP BUTTON STYLES ========== */

.drop-button {
    cursor: pointer;
    border: none;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.drop-button:hover {
    opacity: 0.9;
}

.drop-button:active {
    transform: scale(0.98);
}

/* ========== ALIGNMENT CONTAINERS ========== */

/* Horizontal alignment */
.drops-horizontal {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.drops-horizontal.gap-sm {
    gap: 0.25rem;
}

.drops-horizontal.gap-md {
    gap: 0.75rem;
}

.drops-horizontal.gap-lg {
    gap: 1.5rem;
}

/* Vertical alignment */
.drops-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drops-vertical.gap-sm {
    gap: 0.25rem;
}

.drops-vertical.gap-md {
    gap: 0.75rem;
}

.drops-vertical.gap-lg {
    gap: 1.5rem;
}

/* Grid alignment (multiple rows/columns) */
.drops-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
}

.drops-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.drops-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.drops-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========== POSITIONING ========== */

.drops-container {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: rgba(183, 228, 213, 0.03);
    border: 1px solid rgba(183, 228, 213, 0.2);
}

/* Center alignment */
.drops-center {
    justify-content: center;
}

/* Left alignment */
.drops-left {
    justify-content: flex-start;
}

/* Right alignment */
.drops-right {
    justify-content: flex-end;
}

/* Space between */
.drops-between {
    justify-content: space-between;
}

/* Space around */
.drops-around {
    justify-content: space-around;
}

/* Space evenly */
.drops-evenly {
    justify-content: space-evenly;
}

/* ========== PHARMACEUTICAL CATEGORY COLORS ========== */

/* VTM - Molécula Terapêutica Virtual */
.drop-vtm {
    background: var(--drop-vtm-bg, #E0F7FA);
    color: var(--drop-vtm-text, #00838F);
    border: 1px solid rgba(0, 131, 143, 0.2);
}

.drop-vtm:hover {
    background: var(--drop-vtm-bg, #B2EBF2);
    box-shadow: 0 4px 12px rgba(0, 131, 143, 0.2);
}

/* DEC - Denominações Comerciais */
.drop-dec {
    background: var(--drop-dec-bg, #FCE4EC);
    color: var(--drop-dec-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-dec:hover {
    background: var(--drop-dec-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* SUB - Substâncias Ativas */
.drop-sub {
    background: var(--drop-sub-bg, #E3F2FD);
    color: var(--drop-sub-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

.drop-sub:hover {
    background: var(--drop-sub-bg, #BBDEFB);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

/* LAB - Laboratórios */
.drop-lab {
    background: var(--drop-lab-bg, #FFF3E0);
    color: var(--drop-lab-text, #EF6C00);
    border: 1px solid rgba(239, 108, 0, 0.2);
}

.drop-lab:hover {
    background: var(--drop-lab-bg, #FFE0B2);
    box-shadow: 0 4px 12px rgba(239, 108, 0, 0.2);
}

/* CNC - Concentrações */
.drop-cnc {
    background: var(--drop-cnc-bg, #E8F5E9);
    color: var(--drop-cnc-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.drop-cnc:hover {
    background: var(--drop-cnc-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* GTS - Gotas (Soluções Orais) */
.drop-gts {
    background: var(--drop-gts-bg, #E0F2F1);
    color: var(--drop-gts-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-gts:hover {
    background: var(--drop-gts-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* FOFA - Formas Farmacêuticas */
.drop-fofa {
    background: var(--drop-fofa-bg, #F3E5F5);
    color: var(--drop-fofa-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-fofa:hover {
    background: var(--drop-fofa-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* FAP - Formas de Apresentação */
.drop-fap {
    background: var(--drop-fap-bg, #E0F2F1);
    color: var(--drop-fap-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-fap:hover {
    background: var(--drop-fap-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* VIA - Vias de Administração */
.drop-via {
    background: var(--drop-via-bg, #EFEBE9);
    color: var(--drop-via-text, #5D4037);
    border: 1px solid rgba(93, 64, 55, 0.2);
}

.drop-via:hover {
    background: var(--drop-via-bg, #D7CCC8);
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* EMB - Embalagens */
.drop-emb {
    background: var(--drop-emb-bg, #E8EAF6);
    color: var(--drop-emb-text, #303F9F);
    border: 1px solid rgba(48, 63, 159, 0.2);
}

.drop-emb:hover {
    background: var(--drop-emb-bg, #C5CAE9);
    box-shadow: 0 4px 12px rgba(48, 63, 159, 0.2);
}

/* CAP - Capacidades */
.drop-cap {
    background: var(--drop-cap-bg, #FFFDE7);
    color: var(--drop-cap-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.2);
}

.drop-cap:hover {
    background: var(--drop-cap-bg, #FFF9C4);
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.2);
}

/* CHG - Enriquecimentos */
.drop-chg {
    background: var(--drop-chg-bg, #FAFAFA);
    color: var(--drop-chg-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.2);
}

.drop-chg:hover {
    background: var(--drop-chg-bg, #E0E0E0);
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.2);
}

/* UNK - Não Reconhecidos */
.drop-unk {
    background: var(--drop-unk-bg, #FFEBEE);
    color: var(--drop-unk-text, #C62828);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

.drop-unk:hover {
    background: var(--drop-unk-bg, #FFCDD2);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

/* ========== REGULATORY CATEGORY DROPS (ANVISA) ========== */

/* Genérico */
.drop-generico {
    background: var(--drop-generico-bg, #E1F5FE);
    color: var(--drop-generico-text, #0277BD);
    border: 1px solid rgba(2, 119, 189, 0.2);
}

.drop-generico:hover {
    background: var(--drop-generico-bg, #B3E5FC);
    box-shadow: 0 4px 12px rgba(2, 119, 189, 0.2);
}

/* Similar */
.drop-similar {
    background: var(--drop-similar-bg, #E3F2FD);
    color: var(--drop-similar-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

.drop-similar:hover {
    background: var(--drop-similar-bg, #BBDEFB);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

/* Novo */
.drop-novo {
    background: var(--drop-novo-bg, #E8F5E9);
    color: var(--drop-novo-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.drop-novo:hover {
    background: var(--drop-novo-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* Biológico */
.drop-biologico {
    background: var(--drop-biologico-bg, #F3E5F5);
    color: var(--drop-biologico-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-biologico:hover {
    background: var(--drop-biologico-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* Fitoterápico */
.drop-fitoterapico {
    background: var(--drop-fitoterapico-bg, #E8F5E9);
    color: var(--drop-fitoterapico-text, #558B2F);
    border: 1px solid rgba(85, 139, 47, 0.2);
}

.drop-fitoterapico:hover {
    background: var(--drop-fitoterapico-bg, #C8E6C9);
    box-shadow: 0 4px 12px rgba(85, 139, 47, 0.2);
}

/* Específico */
.drop-especifico {
    background: var(--drop-especifico-bg, #FFF3E0);
    color: var(--drop-especifico-text, #E65100);
    border: 1px solid rgba(230, 81, 0, 0.2);
}

.drop-especifico:hover {
    background: var(--drop-especifico-bg, #FFE0B2);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.2);
}

/* Radiofármaco */
.drop-radiofarmaco {
    background: var(--drop-radiofarmaco-bg, #FFFDE7);
    color: var(--drop-radiofarmaco-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.2);
}

.drop-radiofarmaco:hover {
    background: var(--drop-radiofarmaco-bg, #FFF9C4);
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.2);
}

/* Produto de Terapia Avançada */
.drop-terapia-avancada {
    background: var(--drop-terapia-avancada-bg, #FCE4EC);
    color: var(--drop-terapia-avancada-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-terapia-avancada:hover {
    background: var(--drop-terapia-avancada-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* Não classificado */
.drop-nao-classificado {
    background: var(--drop-nao-classificado-bg, #F5F5F5);
    color: var(--drop-nao-classificado-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.2);
}

.drop-nao-classificado:hover {
    background: var(--drop-nao-classificado-bg, #E0E0E0);
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.2);
}

/* ========== OPERATIONAL DROPS ========== */

/* Registro/Regulatório */
.drop-registro {
    background: var(--drop-registro-bg, #E1F5FE);
    color: var(--drop-registro-text, #0277BD);
    border: 1px solid rgba(2, 119, 189, 0.2);
}

/* Prescrever */
.drop-prescrever {
    background: var(--drop-prescrever-bg, #F3E5F5);
    color: var(--drop-prescrever-text, #6A1B9A);
    border: 1px solid rgba(106, 27, 154, 0.2);
}

/* Dispensar */
.drop-dispensar {
    background: var(--drop-dispensar-bg, #FFF3E0);
    color: var(--drop-dispensar-text, #EF6C00);
    border: 1px solid rgba(239, 108, 0, 0.2);
}

/* Administrar */
.drop-administrar {
    background: var(--drop-administrar-bg, #E8F5E9);
    color: var(--drop-administrar-text, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

/* ========== WORKFLOW STATUS DROPS ========== */

/* Draft */
.drop-draft {
    background: var(--drop-draft-bg, #F5F5F5);
    color: var(--drop-draft-text, #616161);
    border: 1px solid rgba(97, 97, 97, 0.3);
}

/* In Review */
.drop-review {
    background: var(--drop-review-bg, #FFF8E1);
    color: var(--drop-review-text, #F57C00);
    border: 1px solid rgba(245, 124, 0, 0.3);
}

/* Approved */
.drop-approved {
    background: var(--drop-approved-bg, #E8F5E9);
    color: var(--drop-approved-text, #4CAF50);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Rejected */
.drop-rejected {
    background: var(--drop-rejected-bg, #FFEBEE);
    color: var(--drop-rejected-text, #EF5350);
    border: 1px solid rgba(239, 83, 80, 0.2);
}

/* Deprecated */
.drop-deprecated {
    background: var(--drop-deprecated-bg, #EFEBE9);
    color: var(--drop-deprecated-text, #6D4C41);
    border: 1px solid rgba(109, 76, 65, 0.2);
}

/* ========== DATA SOURCE DROPS ========== */

/* SPOR/EMA */
.drop-spor {
    background: var(--drop-spor-bg, #E3F2FD);
    color: var(--drop-spor-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

/* SNOMED */
.drop-snomed {
    background: var(--drop-snomed-bg, #FFF3E0);
    color: var(--drop-snomed-text, #E65100);
    border: 1px solid rgba(230, 81, 0, 0.2);
}

/* ANVISA */
.drop-anvisa {
    background: var(--drop-anvisa-bg, #E8F5E9);
    color: var(--drop-anvisa-text, #1B5E20);
    border: 1px solid rgba(27, 94, 32, 0.2);
}

/* FDA */
.drop-fda {
    background: var(--drop-fda-bg, #E8EAF6);
    color: var(--drop-fda-text, #283593);
    border: 1px solid rgba(40, 53, 147, 0.2);
}

/* WHO */
.drop-who {
    background: var(--drop-who-bg, #E1F5FE);
    color: var(--drop-who-text, #01579B);
    border: 1px solid rgba(1, 87, 155, 0.2);
}

/* OBM - Ontologia Brasileira de Medicamentos */
.drop-obm {
    background: var(--drop-obm-bg, #F3E5F5);
    color: var(--drop-obm-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-obm:hover {
    background: var(--drop-obm-bg, #E1BEE7);
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* TUSS - Terminologia Unificada da Saúde Suplementar */
.drop-tuss {
    background: var(--drop-tuss-bg, #E0F2F1);
    color: var(--drop-tuss-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

.drop-tuss:hover {
    background: var(--drop-tuss-bg, #B2DFDB);
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* Brasíndice */
.drop-brasindice {
    background: var(--drop-brasindice-bg, #FCE4EC);
    color: var(--drop-brasindice-text, #AD1457);
    border: 1px solid rgba(173, 20, 87, 0.2);
}

.drop-brasindice:hover {
    background: var(--drop-brasindice-bg, #F8BBD0);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* ========== DATA QUALITY DROPS ========== */

/* Complete */
.drop-complete {
    background: var(--drop-complete-bg, #E8F5E9);
    color: var(--drop-complete-text, #4CAF50);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

/* Partial */
.drop-partial {
    background: var(--drop-partial-bg, #FFF8E1);
    color: var(--drop-partial-text, #F57F17);
    border: 1px solid rgba(245, 127, 23, 0.3);
}

/* Missing */
.drop-missing {
    background: var(--drop-missing-bg, #FFEBEE);
    color: var(--drop-missing-text, #EF5350);
    border: 1px solid rgba(239, 83, 80, 0.2);
}

/* Enriched */
.drop-enriched {
    background: var(--drop-enriched-bg, #E3F2FD);
    color: var(--drop-enriched-text, #1565C0);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

/* ========== DROP LABEL STRUCTURE (ABBREVIATION + NAME) ========== */

.drop-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.drop-abbr {
    font-size: 0.7em;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.drop-name {
    font-size: 0.9em;
    font-weight: 500;
    white-space: normal;
    opacity: 0.95;
}

/* ========== DROP DISPLAY VARIANTS ========== */

/* Default: show both abbreviation and name */
.drop[data-display="both"] .drop-abbr,
.drop[data-display="both"] .drop-name {
    display: inline;
}

/* Show abbreviation only */
.drop[data-display="abbr"] .drop-abbr {
    display: inline;
}

.drop[data-display="abbr"] .drop-name {
    display: none;
}

/* Show name only */
.drop[data-display="name"] .drop-name {
    display: inline;
}

.drop[data-display="name"] .drop-abbr {
    display: none;
}

/* Responsive: show abbr on mobile, both on larger screens */
@media (max-width: 640px) {
    .drop[data-display="responsive"] .drop-abbr {
        display: inline;
    }

    .drop[data-display="responsive"] .drop-name {
        display: none;
    }
}

@media (min-width: 641px) {
    .drop[data-display="responsive"] .drop-abbr,
    .drop[data-display="responsive"] .drop-name {
        display: inline;
    }
}

/* ========== ICON SUPPORT ========== */

.drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.25rem 0;
    flex-shrink: 0;
}

.drop-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.drop-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* ========== DROP ICONS (Font Awesome) ========== */
/* Ícones semânticos para cada categoria farmacêutica */
/* Melhora acessibilidade e reconhecimento visual */
/* Requer: Font Awesome 6 (fa-solid) */

/* Base icon styles */
.drop::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 900;
    font-size: 0.8em;
    margin-right: 0.35rem;
    display: inline-block;
}

/* Pharmaceutical Categories */
.drop-vtm::before { content: '\f5d2'; }  /* fa-flask-vial - Molécula Terapêutica Virtual */
.drop-dec::before { content: '\f484'; }  /* fa-pills - Denominações Comerciais */
.drop-sub::before { content: '\f471'; }  /* fa-dna - Substâncias Ativas */
.drop-lab::before { content: '\f275'; }  /* fa-industry - Laboratórios */
.drop-cnc::before { content: '\f0c3'; }  /* fa-flask - Concentrações */
.drop-gts::before { content: '\f043'; }  /* fa-droplet - Gotas */
.drop-fofa::before { content: '\f48e'; }  /* fa-syringe - Formas Farmacêuticas */
.drop-fap::before { content: '\f466'; }  /* fa-box-open - Formas de Apresentação */
.drop-via::before { content: '\f7f2'; }  /* fa-stethoscope - Vias de Administração */
.drop-emb::before { content: '\f49e'; }  /* fa-boxes-stacked - Embalagens */
.drop-cap::before { content: '\f545'; }  /* fa-ruler - Capacidades */
.drop-chg::before { content: '\f005'; }  /* fa-star - Enriquecimentos */
.drop-unk::before { content: '\f059'; }  /* fa-circle-question - Não Reconhecidos */

/* Regulatory Categories (ANVISA) */
.drop-generico::before { content: '\f550'; }        /* fa-stamp - Genérico */
.drop-similar::before { content: '\f24d'; }         /* fa-clone - Similar */
.drop-novo::before { content: '\f005'; }            /* fa-star - Novo */
.drop-biologico::before { content: '\f471'; }       /* fa-dna - Biológico */
.drop-fitoterapico::before { content: '\f06c'; }    /* fa-leaf - Fitoterápico */
.drop-especifico::before { content: '\f058'; }      /* fa-circle-check - Específico */
.drop-radiofarmaco::before { content: '\f7c0'; }    /* fa-radiation - Radiofármaco */
.drop-terapia-avancada::before { content: '\f0d0'; } /* fa-magic - Terapia Avançada */
.drop-nao-classificado::before { content: '\f059'; } /* fa-circle-question - Não classificado */

/* Operational */
.drop-registro::before { content: '\f46d'; }   /* fa-clipboard-list */
.drop-prescrever::before { content: '\f0f6'; } /* fa-file-medical */
.drop-dispensar::before { content: '\f54e'; }  /* fa-store */
.drop-administrar::before { content: '\f48e'; } /* fa-syringe */

/* Workflow Status */
.drop-draft::before { content: '\f15c'; }      /* fa-file-lines */
.drop-review::before { content: '\f06e'; }     /* fa-eye */
.drop-approved::before { content: '\f058'; }   /* fa-circle-check */
.drop-rejected::before { content: '\f057'; }   /* fa-circle-xmark */
.drop-deprecated::before { content: '\f1f8'; } /* fa-trash */

/* Data Sources */
.drop-spor::before { content: '\f0ac'; }       /* fa-globe */
.drop-snomed::before { content: '\f0f8'; }     /* fa-hospital */
.drop-anvisa::before { content: '\f0ac'; }     /* fa-globe */
.drop-fda::before { content: '\f0ac'; }        /* fa-globe */
.drop-who::before { content: '\f57d'; }        /* fa-earth-americas */
.drop-obm::before { content: '\f0c3'; }        /* fa-flask */
.drop-tuss::before { content: '\f0f8'; }       /* fa-hospital */
.drop-brasindice::before { content: '\f080'; } /* fa-chart-bar */

/* Data Quality */
.drop-complete::before { content: '\f00c'; }   /* fa-check */
.drop-partial::before { content: '\f042'; }    /* fa-circle-half-stroke */
.drop-missing::before { content: '\f111'; }    /* fa-circle (outline) */
.drop-enriched::before { content: '\f005'; }   /* fa-star */

/* Icon-only mode (hide icon) */
.drop[data-icon="none"]::before,
.drop-no-icon::before {
    display: none;
}

/* Optional: Show icon only (no text) */
.drop-icon-only::before {
    margin-right: 0;
}
.drop-icon-only .drop-label,
.drop-icon-only .drop-abbr,
.drop-icon-only .drop-name {
    display: none;
}

/* ========== ANIMATION ========== */

@keyframes drop-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.drop-enter {
    animation: drop-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {
    .drops-horizontal {
        gap: 0.25rem;
    }

    .drop-md,
    .drop-lg {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .drop-xl {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ========== DARK MODE ========== */

/* Base drop adjustments for dark mode */
:root.dark-mode .drop,
[data-theme="dark"] .drop {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

:root.dark-mode .drop:hover,
[data-theme="dark"] .drop:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

:root.dark-mode .drop-close:hover,
[data-theme="dark"] .drop-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

:root.dark-mode .drops-container,
[data-theme="dark"] .drops-container {
    background: rgba(183, 228, 213, 0.02);
    border-color: rgba(183, 228, 213, 0.1);
}

/* Pharmaceutical drops - dark mode
   Colors are already handled by CSS variables in colors.css dark mode section.
   The following ensure border colors work well in dark mode */

:root.dark-mode .drop-vtm,
:root.dark-mode .drop-dec,
:root.dark-mode .drop-sub,
:root.dark-mode .drop-lab,
:root.dark-mode .drop-cnc,
:root.dark-mode .drop-gts,
:root.dark-mode .drop-fofa,
:root.dark-mode .drop-fap,
:root.dark-mode .drop-via,
:root.dark-mode .drop-emb,
:root.dark-mode .drop-cap,
:root.dark-mode .drop-chg,
:root.dark-mode .drop-unk,
[data-theme="dark"] .drop-vtm,
[data-theme="dark"] .drop-dec,
[data-theme="dark"] .drop-sub,
[data-theme="dark"] .drop-lab,
[data-theme="dark"] .drop-cnc,
[data-theme="dark"] .drop-gts,
[data-theme="dark"] .drop-fofa,
[data-theme="dark"] .drop-fap,
[data-theme="dark"] .drop-via,
[data-theme="dark"] .drop-emb,
[data-theme="dark"] .drop-cap,
[data-theme="dark"] .drop-chg,
[data-theme="dark"] .drop-unk {
    border-color: transparent;
}

/* Regulatory category drops - dark */
:root.dark-mode .drop-generico,
:root.dark-mode .drop-similar,
:root.dark-mode .drop-novo,
:root.dark-mode .drop-biologico,
:root.dark-mode .drop-fitoterapico,
:root.dark-mode .drop-especifico,
:root.dark-mode .drop-radiofarmaco,
:root.dark-mode .drop-terapia-avancada,
:root.dark-mode .drop-nao-classificado,
[data-theme="dark"] .drop-generico,
[data-theme="dark"] .drop-similar,
[data-theme="dark"] .drop-novo,
[data-theme="dark"] .drop-biologico,
[data-theme="dark"] .drop-fitoterapico,
[data-theme="dark"] .drop-especifico,
[data-theme="dark"] .drop-radiofarmaco,
[data-theme="dark"] .drop-terapia-avancada,
[data-theme="dark"] .drop-nao-classificado {
    border-color: transparent;
}

/* Operational drops - dark */
:root.dark-mode .drop-registro,
:root.dark-mode .drop-prescrever,
:root.dark-mode .drop-dispensar,
:root.dark-mode .drop-administrar,
[data-theme="dark"] .drop-registro,
[data-theme="dark"] .drop-prescrever,
[data-theme="dark"] .drop-dispensar,
[data-theme="dark"] .drop-administrar {
    border-color: transparent;
}

/* Workflow status drops - dark */
:root.dark-mode .drop-draft,
:root.dark-mode .drop-review,
:root.dark-mode .drop-approved,
:root.dark-mode .drop-rejected,
:root.dark-mode .drop-deprecated,
[data-theme="dark"] .drop-draft,
[data-theme="dark"] .drop-review,
[data-theme="dark"] .drop-approved,
[data-theme="dark"] .drop-rejected,
[data-theme="dark"] .drop-deprecated {
    border-color: transparent;
}

/* Data source drops - dark */
:root.dark-mode .drop-spor,
:root.dark-mode .drop-snomed,
:root.dark-mode .drop-anvisa,
:root.dark-mode .drop-fda,
:root.dark-mode .drop-who,
:root.dark-mode .drop-obm,
:root.dark-mode .drop-tuss,
:root.dark-mode .drop-brasindice,
[data-theme="dark"] .drop-spor,
[data-theme="dark"] .drop-snomed,
[data-theme="dark"] .drop-anvisa,
[data-theme="dark"] .drop-fda,
[data-theme="dark"] .drop-who,
[data-theme="dark"] .drop-obm,
[data-theme="dark"] .drop-tuss,
[data-theme="dark"] .drop-brasindice {
    border-color: transparent;
}

/* Data quality drops - dark */
:root.dark-mode .drop-complete,
:root.dark-mode .drop-partial,
:root.dark-mode .drop-missing,
:root.dark-mode .drop-enriched,
[data-theme="dark"] .drop-complete,
[data-theme="dark"] .drop-partial,
[data-theme="dark"] .drop-missing,
[data-theme="dark"] .drop-enriched {
    border-color: transparent;
}

/* ========================================================================
   SEVERITY DROPS — drops semânticos para escala de severidade/impacto
   Consomem os tokens --sev-*-bg/text/border definidos em severity.css.
   Uso típico: feeds de eventos, badges de alerta, linhas de tabela com
   status de urgência operacional. Cada variante tem encoding secundário
   obrigatório (texto descritivo + tooltip), nunca confie só na cor.
   Adicionado em 2026-04-14 para suportar o Vigília (observatório de FVG).
   ======================================================================== */

.drop-sev-critical {
    background: var(--sev-critical-bg);
    color: var(--sev-critical-text);
    border: 1px solid var(--sev-critical-border);
}

.drop-sev-critical:hover {
    background: var(--sev-critical-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-critical-border) 35%, transparent);
}

.drop-sev-attention {
    background: var(--sev-attention-bg);
    color: var(--sev-attention-text);
    border: 1px solid var(--sev-attention-border);
}

.drop-sev-attention:hover {
    background: var(--sev-attention-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-attention-border) 35%, transparent);
}

.drop-sev-watch {
    background: var(--sev-watch-bg);
    color: var(--sev-watch-text);
    border: 1px solid var(--sev-watch-border);
}

.drop-sev-watch:hover {
    background: var(--sev-watch-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-watch-border) 35%, transparent);
}

.drop-sev-info {
    background: var(--sev-info-bg);
    color: var(--sev-info-text);
    border: 1px solid var(--sev-info-border);
}

.drop-sev-info:hover {
    background: var(--sev-info-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-info-border) 35%, transparent);
}

.drop-sev-normal {
    background: var(--sev-normal-bg);
    color: var(--sev-normal-text);
    border: 1px solid var(--sev-normal-border);
}

.drop-sev-normal:hover {
    background: var(--sev-normal-bg);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sev-normal-border) 35%, transparent);
}

/* Dark mode: a severity.css já reescreve os tokens, então as classes
   herdam automaticamente os valores dark — só removemos a borda dura. */
:root.dark-mode .drop-sev-critical,
:root.dark-mode .drop-sev-attention,
:root.dark-mode .drop-sev-watch,
:root.dark-mode .drop-sev-info,
:root.dark-mode .drop-sev-normal,
[data-theme="dark"] .drop-sev-critical,
[data-theme="dark"] .drop-sev-attention,
[data-theme="dark"] .drop-sev-watch,
[data-theme="dark"] .drop-sev-info,
[data-theme="dark"] .drop-sev-normal {
    border-color: transparent;
}