/* Styles for the Candidate Cards page that aren't covered by Filament's own
   compiled components (Filament's shipped CSS only includes classes its own
   Blade components use, so custom markup needs its own stylesheet). */

.cv-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.cv-score-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.cv-score-label {
    width: 6.5rem;
    flex-shrink: 0;
    color: rgb(107 114 128);
}

:root[data-theme='dark'] .cv-score-label,
.dark .cv-score-label {
    color: rgb(156 163 175);
}

.cv-score-track {
    flex: 1;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(229 231 235);
    overflow: hidden;
}

:root[data-theme='dark'] .cv-score-track,
.dark .cv-score-track {
    background-color: rgb(55 65 81);
}

.cv-score-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background-color: rgb(99 102 241);
}

.cv-score-value {
    width: 2rem;
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgb(107 114 128);
}

:root[data-theme='dark'] .cv-score-value,
.dark .cv-score-value {
    color: rgb(156 163 175);
}

.cv-muted-text {
    color: rgb(107 114 128);
}

:root[data-theme='dark'] .cv-muted-text,
.dark .cv-muted-text {
    color: rgb(156 163 175);
}

.cv-card-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: rgb(243 244 246);
    color: rgb(75 85 99);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

:root[data-theme='dark'] .cv-card-position,
.dark .cv-card-position {
    background-color: rgb(55 65 81);
    color: rgb(209 213 219);
}