/* ============================================
   PHARMDATA DESIGN SYSTEM - APEX COMPONENTS
   Custom Components for Oracle APEX

   Version: 2.0.0
   Last Updated: December 2024

   DROPS: Sistema completo com formas, tamanhos,
   ícones Font Awesome e animações
   ============================================ */


/* ================================================
   1. DROPS - PHARMACEUTICAL CATEGORY BADGES
   Sistema completo de drops para Oracle APEX
   Suporta: .drop e .phd-drop (compatibilidade)
   ================================================ */

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

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

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

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

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

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

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

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

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

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

/* Default size (when no size class specified) */
.drop:not(.drop-xs):not(.drop-sm):not(.drop-md):not(.drop-lg):not(.drop-xl),
.phd-drop:not(.phd-drop--xs):not(.phd-drop--sm):not(.phd-drop--md):not(.phd-drop--lg):not(.phd-drop--xl) {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

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

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

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

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

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

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

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

/* Square (legacy compatibility) */
.phd-drop--square {
    border-radius: 4px;
}

/* ========== DROP BUTTON VARIANT ========== */

.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;
    cursor: pointer;
}

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

/* ========== FONT AWESOME ICONS ========== */
/* Ícones semânticos automáticos para cada categoria */
/* Requer: Font Awesome 6 */

.drop::before,
.phd-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 - Icons */
.drop-dec::before, .phd-drop--dec::before { content: '\f484'; }  /* fa-pills */
.drop-sub::before, .phd-drop--sub::before { content: '\f471'; }  /* fa-dna */
.drop-lab::before, .phd-drop--lab::before { content: '\f275'; }  /* fa-industry */
.drop-cnc::before, .phd-drop--cnc::before { content: '\f0c3'; }  /* fa-flask */
.drop-gts::before, .phd-drop--gts::before { content: '\f043'; }  /* fa-droplet */
.drop-fofa::before, .phd-drop--fofa::before { content: '\f48e'; }  /* fa-syringe */
.drop-fap::before, .phd-drop--fap::before { content: '\f466'; }  /* fa-box-open */
.drop-via::before, .phd-drop--via::before { content: '\f7f2'; }  /* fa-stethoscope */
.drop-emb::before, .phd-drop--emb::before { content: '\f49e'; }  /* fa-boxes-stacked */
.drop-cap::before, .phd-drop--cap::before { content: '\f545'; }  /* fa-ruler */
.drop-chg::before, .phd-drop--chg::before { content: '\f005'; }  /* fa-star */
.drop-unk::before, .phd-drop--unk::before { content: '\f059'; }  /* fa-circle-question */

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

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

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

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

/* Hide icon mode */
.drop[data-icon="none"]::before,
.drop-no-icon::before,
.phd-drop[data-icon="none"]::before,
.phd-drop--no-icon::before {
    display: none;
}

/* Icon only mode */
.drop-icon-only::before,
.phd-drop--icon-only::before {
    margin-right: 0;
}
.drop-icon-only .drop-label,
.drop-icon-only .drop-abbr,
.drop-icon-only .drop-name,
.phd-drop--icon-only .drop-label {
    display: none;
}

/* ========== PHARMACEUTICAL CATEGORIES - COLORS ========== */

/* DEC - Denominações Comerciais */
.drop-dec, .phd-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, .phd-drop--dec:hover {
    background: #F8BBD0;
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.2);
}

/* SUB - Substâncias Ativas */
.drop-sub, .phd-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, .phd-drop--sub:hover {
    background: #BBDEFB;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.2);
}

/* LAB - Laboratórios */
.drop-lab, .phd-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, .phd-drop--lab:hover {
    background: #FFE0B2;
    box-shadow: 0 4px 12px rgba(239, 108, 0, 0.2);
}

/* CNC - Concentrações */
.drop-cnc, .phd-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, .phd-drop--cnc:hover {
    background: #C8E6C9;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

/* GTS - Gotas */
.drop-gts, .phd-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, .phd-drop--gts:hover {
    background: #B2DFDB;
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* FOFA - Formas Farmacêuticas */
.drop-fofa, .phd-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, .phd-drop--fofa:hover {
    background: #E1BEE7;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.2);
}

/* FAP - Formas de Apresentação */
.drop-fap, .phd-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, .phd-drop--fap:hover {
    background: #B2DFDB;
    box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
}

/* VIA - Vias de Administração */
.drop-via, .phd-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, .phd-drop--via:hover {
    background: #D7CCC8;
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.2);
}

/* EMB - Embalagens */
.drop-emb, .phd-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, .phd-drop--emb:hover {
    background: #C5CAE9;
    box-shadow: 0 4px 12px rgba(48, 63, 159, 0.2);
}

/* CAP - Capacidades */
.drop-cap, .phd-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, .phd-drop--cap:hover {
    background: #FFF9C4;
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.2);
}

/* CHG - Enriquecimentos */
.drop-chg, .phd-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, .phd-drop--chg:hover {
    background: #E0E0E0;
    box-shadow: 0 4px 12px rgba(97, 97, 97, 0.2);
}

/* UNK - Não Reconhecidos */
.drop-unk, .phd-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, .phd-drop--unk:hover {
    background: #FFCDD2;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

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

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

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

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

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

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

.drop-pending, .phd-drop--pending {
    background: var(--drop-pending-bg, #FFF8E1);
    color: var(--drop-pending-text, #F57C00);
    border: 1px solid rgba(245, 124, 0, 0.3);
}

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

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

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

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

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

/* ========== DATA SOURCES ========== */

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

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

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

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

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

.drop-obm, .phd-drop--obm {
    background: var(--drop-obm-bg, #F3E5F5);
    color: var(--drop-obm-text, #7B1FA2);
    border: 1px solid rgba(123, 31, 162, 0.2);
}

.drop-tuss, .phd-drop--tuss {
    background: var(--drop-tuss-bg, #E0F2F1);
    color: var(--drop-tuss-text, #00695C);
    border: 1px solid rgba(0, 105, 92, 0.2);
}

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

/* ========== OPERATIONAL CATEGORIES ========== */

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

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

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

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

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

.drops-horizontal, .phd-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; }

.drops-vertical, .phd-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; }

.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-center { justify-content: center; }
.drops-left { justify-content: flex-start; }
.drops-right { justify-content: flex-end; }
.drops-between { justify-content: space-between; }
.drops-around { justify-content: space-around; }

/* ========== DROP LABEL STRUCTURE ========== */

.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;
}

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

/* 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: abbr on mobile, both on desktop */
@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; }
}

/* ========== DROP CLOSE BUTTON ========== */

.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 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);
}

/* ========== INTERACTIVE STATES ========== */

/* Clickable drop (for filters) */
.drop--clickable, .phd-drop--clickable {
    cursor: pointer;
}

.drop--clickable:hover, .phd-drop--clickable:hover {
    filter: brightness(0.95);
}

/* Selected state for filter drops */
.drop--selected, .phd-drop--selected {
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
}

/* ========== 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;
    }
}


/* ================================================
   2. STATUS INDICATORS
   ================================================ */

.phd-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.phd-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.phd-status-dot--success { background: #10B981; }
.phd-status-dot--warning { background: #F59E0B; }
.phd-status-dot--error { background: #EF4444; }
.phd-status-dot--info { background: #3B82F6; }
.phd-status-dot--neutral { background: #9CA3AF; }

/* Animated status dot */
.phd-status-dot--pulse {
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* ================================================
   3. PHARMA CARDS
   ================================================ */

.phd-card {
    background: #ffffff;
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.phd-card:hover {
    box-shadow: 0 4px 12px -2px rgba(11, 45, 42, 0.18);
    transform: translateY(-2px);
}

.phd-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.phd-card__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--emerald-abyss, #0B2D2A);
    margin: 0;
}

.phd-card__subtitle {
    font-size: 0.875rem;
    color: var(--soft-steel, #374151);
    margin: 0.25rem 0 0 0;
}

.phd-card__body {
    color: var(--graphite-depth, #1F2937);
}

.phd-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--soft-arctic, #E5E8EB);
}

.phd-card__drops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ================================================
   4. DATA ROWS (for lists/tables)
   ================================================ */

.phd-data-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--soft-arctic, #E5E8EB);
    transition: background 0.15s ease;
}

.phd-data-row:hover {
    background: rgba(183, 228, 213, 0.08);
}

.phd-data-row:last-child {
    border-bottom: none;
}

.phd-data-row__primary {
    flex: 1;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
}

.phd-data-row__secondary {
    color: var(--soft-steel, #374151);
    font-size: 0.875rem;
}

.phd-data-row__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: 1rem;
}


/* ================================================
   5. ENRICHMENT INDICATORS
   ================================================ */

.phd-enrichment {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--arctic-mist, #E9ECEF);
    border-radius: 8px;
    font-size: 0.875rem;
}

.phd-enrichment__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phd-enrichment__label {
    font-weight: 500;
    color: var(--soft-steel, #374151);
}

.phd-enrichment__value {
    color: var(--graphite-depth, #1F2937);
    font-weight: 600;
}


/* ================================================
   6. PROGRESS INDICATORS
   ================================================ */

.phd-progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phd-progress__bar {
    height: 6px;
    background: var(--soft-arctic, #E5E8EB);
    border-radius: 3px;
    overflow: hidden;
}

.phd-progress__fill {
    height: 100%;
    background: var(--teal-intense, #1a8b7d);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.phd-progress__fill--success { background: #10B981; }
.phd-progress__fill--warning { background: #F59E0B; }
.phd-progress__fill--error { background: #EF4444; }

.phd-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}


/* ================================================
   7. EMPTY STATES
   ================================================ */

.phd-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--soft-steel, #374151);
}

.phd-empty-state__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.phd-empty-state__title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.5rem;
}

.phd-empty-state__description {
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto;
}


/* ================================================
   8. TOOLTIP / HELP TEXT
   ================================================ */

.phd-tooltip {
    position: relative;
    cursor: help;
}

.phd-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: var(--emerald-abyss, #0B2D2A);
    color: #ffffff;
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
}

.phd-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}


/* ================================================
   9. APEX-SPECIFIC COMPONENT TEMPLATES
   ================================================ */

/* For use in HTML Expression columns */
.phd-apex-badge {
    display: inline-block;
}

/* Clickable drop (for filters) */
.phd-drop--clickable {
    cursor: pointer;
}

.phd-drop--clickable:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

/* Selected state for filter drops */
.phd-drop--selected {
    box-shadow: 0 0 0 2px var(--teal-intense, #1a8b7d);
}


/* ================================================
   10. STATISTICAL MAPPING SELECTOR (SMS)
   ================================================ */

.phd-sms {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.phd-sms__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--emerald-abyss, #0B2D2A);
    margin-bottom: 0.25rem;
}

.phd-sms__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.phd-sms__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
    background: #ffffff;
    border: 1.5px solid var(--soft-arctic, #E5E8EB);
    cursor: pointer;
    transition: all 0.2s ease;
}

.phd-sms__btn:hover {
    border-color: var(--mint-signal, #B7E4D5);
    background: rgba(183, 228, 213, 0.08);
}

.phd-sms__btn--selected {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.08);
    color: var(--teal-intense, #1a8b7d);
}

.phd-sms__btn--selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.625rem;
    margin-left: 0.25rem;
}

/* Frequency indicator */
.phd-sms__freq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    background: var(--arctic-mist, #E9ECEF);
    color: var(--soft-steel, #374151);
    margin-left: 0.25rem;
}

.phd-sms__btn--selected .phd-sms__freq {
    background: var(--teal-intense, #1a8b7d);
    color: #ffffff;
}

/* More options trigger */
.phd-sms__more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--soft-steel, #374151);
    background: var(--arctic-mist, #E9ECEF);
    border: 1px dashed var(--soft-arctic, #E5E8EB);
    cursor: pointer;
    transition: all 0.2s ease;
}

.phd-sms__more:hover {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.05);
    color: var(--teal-intense, #1a8b7d);
}

/* SMS Popup/Dropdown */
.phd-sms__popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 12px;
    box-shadow: 0 10px 24px -4px rgba(11, 45, 42, 0.22);
    padding: 0.75rem;
    z-index: 100;
    display: none;
}

.phd-sms__popup--open {
    display: block;
}

.phd-sms__popup-search {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--soft-arctic, #E5E8EB);
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.phd-sms__popup-search:focus {
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.12);
    outline: none;
}

.phd-sms__popup-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.phd-sms__popup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.phd-sms__popup-item:hover {
    background: rgba(183, 228, 213, 0.08);
}

.phd-sms__popup-item--selected {
    background: rgba(26, 139, 125, 0.1);
    color: var(--teal-intense, #1a8b7d);
}

/* Auto-badge variant */
.phd-sms--auto-badge .phd-sms__btn {
    padding-right: 0.625rem;
}

/* Size variants */
.phd-sms--sm .phd-sms__btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.phd-sms--lg .phd-sms__btn {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
}


/* ================================================
   11. PROGRESS STEPS (Wizard)
   ================================================ */

.phd-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1rem 0;
}

.phd-step {
    display: flex;
    align-items: center;
    flex: 1;
}

.phd-step__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--arctic-mist, #E9ECEF);
    color: var(--soft-steel, #374151);
    border: 2px solid var(--soft-arctic, #E5E8EB);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.phd-step__content {
    margin-left: 0.75rem;
}

.phd-step__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
}

.phd-step__desc {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}

.phd-step__line {
    flex: 1;
    height: 2px;
    background: var(--soft-arctic, #E5E8EB);
    margin: 0 1rem;
}

/* Active step */
.phd-step--active .phd-step__marker {
    background: var(--teal-intense, #1a8b7d);
    color: #ffffff;
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 4px rgba(26, 139, 125, 0.15);
}

.phd-step--active .phd-step__title {
    color: var(--teal-intense, #1a8b7d);
}

/* Completed step */
.phd-step--completed .phd-step__marker {
    background: var(--success, #10B981);
    color: #ffffff;
    border-color: var(--success, #10B981);
}

.phd-step--completed .phd-step__marker::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.phd-step--completed .phd-step__line {
    background: var(--success, #10B981);
}

/* Compact variant */
.phd-steps--compact .phd-step__marker {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.phd-steps--compact .phd-step__content {
    display: none;
}


/* ================================================
   12. TOGGLE SWITCHES
   ================================================ */

.phd-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.phd-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--soft-arctic, #E5E8EB);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.phd-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.phd-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.phd-switch__input:checked + .phd-switch__track {
    background: var(--teal-intense, #1a8b7d);
}

.phd-switch__input:checked + .phd-switch__track .phd-switch__thumb {
    left: 22px;
}

.phd-switch__input:focus + .phd-switch__track {
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.2);
}

.phd-switch__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
}

.phd-switch__desc {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
    margin-top: 0.125rem;
}

/* Size variants */
.phd-switch--sm .phd-switch__track {
    width: 36px;
    height: 20px;
}

.phd-switch--sm .phd-switch__thumb {
    width: 16px;
    height: 16px;
}

.phd-switch--sm .phd-switch__input:checked + .phd-switch__track .phd-switch__thumb {
    left: 18px;
}


/* ================================================
   13. TAGS INPUT
   ================================================ */

.phd-tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1.5px solid var(--soft-arctic, #E5E8EB);
    border-radius: 8px;
    background: #ffffff;
    min-height: 44px;
    transition: all 0.2s ease;
}

.phd-tags-input:focus-within {
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.12);
}

.phd-tags-input__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--arctic-mist, #E9ECEF);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--graphite-depth, #1F2937);
}

.phd-tags-input__tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.625rem;
}

.phd-tags-input__tag-remove:hover {
    background: var(--error-light, #FEE2E2);
    color: var(--error, #EF4444);
}

.phd-tags-input__field {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    font-size: 0.875rem;
    padding: 0.25rem;
    background: transparent;
}

.phd-tags-input__field::placeholder {
    color: var(--soft-steel, #374151);
    opacity: 0.6;
}


/* ================================================
   14. FILE UPLOAD
   ================================================ */

.phd-file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--soft-arctic, #E5E8EB);
    border-radius: 12px;
    background: var(--cloud, #F5F8FA);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.phd-file-upload:hover {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.03);
}

.phd-file-upload--dragging {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.08);
    border-style: solid;
}

.phd-file-upload__icon {
    font-size: 2.5rem;
    color: var(--soft-steel, #374151);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.phd-file-upload__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
    margin-bottom: 0.375rem;
}

.phd-file-upload__desc {
    font-size: 0.8125rem;
    color: var(--soft-steel, #374151);
}

.phd-file-upload__link {
    color: var(--teal-intense, #1a8b7d);
    font-weight: 500;
    text-decoration: underline;
}

.phd-file-upload__input {
    display: none;
}

/* File list */
.phd-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.phd-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #ffffff;
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 8px;
}

.phd-file-item__icon {
    color: var(--teal-intense, #1a8b7d);
}

.phd-file-item__name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
}

.phd-file-item__size {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}

.phd-file-item__remove {
    padding: 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--soft-steel, #374151);
    transition: all 0.15s ease;
}

.phd-file-item__remove:hover {
    background: var(--error-light, #FEE2E2);
    color: var(--error, #EF4444);
}


/* ================================================
   15. RICH TEXT EDITOR TOOLBAR
   ================================================ */

.phd-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--arctic-mist, #E9ECEF);
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.phd-rte-toolbar__group {
    display: flex;
    gap: 0.125rem;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    border-right: 1px solid var(--soft-arctic, #E5E8EB);
}

.phd-rte-toolbar__group:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.phd-rte-toolbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--soft-steel, #374151);
    cursor: pointer;
    transition: all 0.15s ease;
}

.phd-rte-toolbar__btn:hover {
    background: #ffffff;
    color: var(--graphite-depth, #1F2937);
}

.phd-rte-toolbar__btn--active {
    background: var(--teal-intense, #1a8b7d);
    color: #ffffff;
}

.phd-rte-toolbar__btn--active:hover {
    background: var(--emerald-abyss, #0B2D2A);
    color: #ffffff;
}

.phd-rte-content {
    min-height: 200px;
    padding: 1rem;
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    outline: none;
}

.phd-rte-content:focus {
    border-color: var(--teal-intense, #1a8b7d);
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.12);
}


/* ================================================
   16. RADIO GROUP (Card Style)
   ================================================ */

.phd-radio-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.phd-radio-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #ffffff;
    border: 1.5px solid var(--soft-arctic, #E5E8EB);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 200px;
}

.phd-radio-card:hover {
    border-color: var(--mint-signal, #B7E4D5);
}

.phd-radio-card__input {
    position: absolute;
    opacity: 0;
}

.phd-radio-card__input:checked + .phd-radio-card__marker {
    border-color: var(--teal-intense, #1a8b7d);
    background: var(--teal-intense, #1a8b7d);
}

.phd-radio-card__input:checked + .phd-radio-card__marker::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

.phd-radio-card__input:checked ~ .phd-radio-card__content .phd-radio-card__title {
    color: var(--teal-intense, #1a8b7d);
}

.phd-radio-card__input:focus + .phd-radio-card__marker {
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.2);
}

.phd-radio-card__marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--soft-arctic, #E5E8EB);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.phd-radio-card__content {
    flex: 1;
}

.phd-radio-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--graphite-depth, #1F2937);
}

.phd-radio-card__desc {
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
    margin-top: 0.125rem;
}

.phd-radio-card__icon {
    font-size: 1.5rem;
    color: var(--soft-steel, #374151);
    opacity: 0.7;
}

/* Selected state for card */
.phd-radio-card:has(.phd-radio-card__input:checked) {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.03);
}


/* ================================================
   17. CHECKBOX GROUP (Grid Style)
   ================================================ */

.phd-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.phd-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: #ffffff;
    border: 1px solid var(--soft-arctic, #E5E8EB);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.phd-checkbox-item:hover {
    border-color: var(--mint-signal, #B7E4D5);
}

.phd-checkbox-item__input {
    position: absolute;
    opacity: 0;
}

.phd-checkbox-item__box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--soft-arctic, #E5E8EB);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.phd-checkbox-item__input:checked + .phd-checkbox-item__box {
    border-color: var(--teal-intense, #1a8b7d);
    background: var(--teal-intense, #1a8b7d);
}

.phd-checkbox-item__input:checked + .phd-checkbox-item__box::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.625rem;
    color: #ffffff;
}

.phd-checkbox-item__input:focus + .phd-checkbox-item__box {
    box-shadow: 0 0 0 3px rgba(26, 139, 125, 0.2);
}

.phd-checkbox-item__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--graphite-depth, #1F2937);
}

/* Selected state for item */
.phd-checkbox-item:has(.phd-checkbox-item__input:checked) {
    border-color: var(--teal-intense, #1a8b7d);
    background: rgba(26, 139, 125, 0.03);
}


/* ================================================
   18. RANGE SLIDER
   ================================================ */

.phd-range {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phd-range__header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--soft-steel, #374151);
}

.phd-range__value {
    font-weight: 600;
    color: var(--teal-intense, #1a8b7d);
}

.phd-range__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--soft-arctic, #E5E8EB);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.phd-range__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--teal-intense, #1a8b7d);
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
}

.phd-range__slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.phd-range__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--teal-intense, #1a8b7d);
    cursor: pointer;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.phd-range__labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--soft-steel, #374151);
}