/* 어떤 요소가 삐져나와도 문서가 좌우로 스크롤되지 않게 — clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아 sticky nav 가 유지된다 */
html { overflow-x: clip; }

/* Projects Base Styles - shadcn/ui inspired design system */
/* Shared styles for all project pages. Import before page-specific CSS. */

/* ============================================
   1. CSS Variables
   ============================================ */
/* 코드프레소 스튜디오 팔레트 — blog-contents-studio tokens.css 이식 (2026-07-30 사용자 결정:
   실사용자(마케터)가 스튜디오 UI 에 익숙하므로 본사 사이트 실측 팔레트 대신 스튜디오 값을 쓴다)
   brand #1a56db / brand-dark #1344c0 / bg #f8f9fb / surface #fff / border #e2e6ef
   text #1c2333 / muted #6b7280 / error #dc2626 — hex→HSL 트리플릿 변환값 */
:root {
    --background: 220 27% 98%;
    --foreground: 222 29% 15%;
    --card: 0 0% 100%;
    --card-foreground: 222 29% 15%;
    --primary: 221 79% 48%;
    --primary-dark: 223 82% 41%;
    --primary-foreground: 0 0% 100%;
    --secondary: 221 70% 96%;
    --secondary-foreground: 223 82% 41%;
    --muted: 220 20% 96%;
    --muted-foreground: 220 9% 46%;
    --accent: 221 70% 96%;
    --accent-foreground: 223 82% 41%;
    --border: 222 29% 91%;
    --input: 222 29% 91%;
    --ring: 221 79% 48%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 210 40% 98%;

    /* ── 스튜디오 토큰 이식 (blog-contents-studio tokens.css, 2026-07-29 이식계획 v1 P-B)
       색은 위 실측 팔레트 유지(스튜디오도 '컬러 불변' 원칙) — radius/shadow/모션의
       Notion+Toss "느낌" 토큰만 가져온다. */

    /* Radius (Toss: 부드럽게 둥근) — 기본을 8px→12px 로 상향 */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* Shadow (Notion: 검정 대신 navy 틴트, 부드럽고 낮은 대비) */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow:    0 1px 2px rgba(16, 24, 40, .04),
                 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

    /* Motion (Toss: 빠르고 경쾌한 ease-out) */
    --dur-fast: .12s;
    --dur:      .18s;
    --dur-slow: .28s;
    --ease:     cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* 파생 틴트 — primary 에서 알파만 뽑은 보조 토큰 (새 색 아님) */
    --brand-soft: hsl(var(--primary) / .08);
    --brand-ring: hsl(var(--primary) / .28);
    --border-strong: hsl(223 26% 87%);

    /* Z-index */
    --z-sticky:  10;
    --z-overlay: 1000;
    --z-modal:   1010;
    --z-toast:   2000;
    --z-tooltip: 3000;
}

/* hidden 속성 보장 — .btn 등의 display 지정이 UA 의 [hidden]{display:none} 을 이겨
   숨김 버튼(수정 저장 등)이 항상 노출되던 버그 차단 (실측 2026-07-30) */
[hidden] {
    display: none !important;
}

/* 틴트 배경 위 흰 서피스 — 카드형 요소 공통 */
.card-section,
.candidate,
.publisher-row,
.draft-card,
.direction-card,
.summary-card,
.image-card,
.item-list,
.stat,
.panel {
    background: hsl(var(--card));
}

/* ============================================
   2. Back Button
   ============================================ */
/* 빵가루 — 상세 화면의 상위가 둘(작업 시작점=홈, 구조상 부모=목록)이라 둘 다 보여준다.
   단일 [목록으로] 버튼은 어디 목록인지 말하지 않고 진입 경로도 무시했다. */
.page-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    margin: 10px 0 2px;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    margin-bottom: 4px;
}
.crumbs a {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius);
}
.crumbs a:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.crumbs a:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.crumb-sep { color: hsl(var(--border)); }

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 12px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    margin-bottom: 32px;
    white-space: nowrap;
    flex-shrink: 0;
}

.back-btn:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--foreground));
}

.back-btn svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   3. Page Header
   ============================================ */
.page-header {
    text-align: left;
    margin-bottom: 32px;
}

.page-header h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: hsl(var(--primary));
}

.page-header p {
    margin: 8px 0 0 0;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   4. Buttons
   ============================================ */
.btn {
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: transform var(--dur-fast) var(--ease-out);
}

.btn:not(:disabled):active {
    transform: translateY(1px) scale(0.99);  /* 스튜디오 '눌리는 손맛' */
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn .spinner {
    animation: spin 1s linear infinite;
}

/* Primary button */
.btn-primary {
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary));
    border: none;
    box-shadow: 0 1px 2px hsl(var(--primary) / 0.24);
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);
}

.btn-primary:hover:not(:disabled) {
    background: hsl(var(--primary-dark));
}

.btn-primary.processing {
    background: hsl(var(--muted-foreground));
}

/* Outline button */
.btn-outline {
    color: hsl(var(--foreground));
    background: transparent;
    border: 1px solid hsl(var(--input));
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-outline:hover:not(:disabled) {
    background: hsl(var(--muted));
    border-color: var(--border-strong);
}

/* Destructive button */
.btn-destructive {
    color: hsl(var(--destructive-foreground));
    background: hsl(var(--destructive));
    border: none;
    transition: opacity var(--dur) var(--ease);
}

.btn-destructive:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-destructive:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--destructive));
}

.btn-destructive.processing {
    background: hsl(var(--muted-foreground));
}

/* Full-width button modifier */
.btn-full {
    width: 100%;
    height: 44px;
}

.btn-full svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   5. Form Controls
   ============================================ */

/* Input Section (card container for inputs) */
.input-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

/* Form Section (card container for forms) */
.form-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}

/* Input Group */
/* 폼 컨트롤 공통 베이스라인 — 특정 셀렉터에만 스타일이 걸려 있어 네이키드 textarea/select 가
   브라우저 기본(모노스페이스 폰트·각진 모서리)으로 남던 갭 보완 (실측 2026-07-29~30).
   페이지별 규칙(.form-group input 등)이 더 구체적이므로 필요한 곳은 그대로 이긴다. */
textarea,
select,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="file"] {
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    background: hsl(var(--card));
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

textarea {
    line-height: 1.6;
    resize: vertical;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

.input-group input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-sizing: border-box;
    font-family: inherit;
}

.input-group input[type="text"]:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input-group input[type="text"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.input-hint {
    margin: 8px 0 0 0;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Form Group */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

.form-group input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-sizing: border-box;
}

.form-group input[type="text"]:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-group input[type="text"]::placeholder {
    color: hsl(var(--muted-foreground));
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Filter Section */
.filter-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    letter-spacing: normal;
    text-transform: none;
}

.filter-group select {
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    outline: none;
    background: hsl(var(--background)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
    min-width: 100px;
    font-family: inherit;
    color: hsl(var(--foreground));
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.filter-group select:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* ============================================
   6. Progress
   ============================================ */
.progress-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: hsl(var(--secondary));
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: hsl(var(--primary));
    border-radius: var(--radius-pill);
    transition: width var(--dur-slow) var(--ease);
}

.progress-text {
    margin-top: 8px;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

/* ============================================
   7. Result Summary
   ============================================ */
.result-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.summary-item {
    flex: 1;
    min-width: 100px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    margin-bottom: 4px;
}

.summary-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* ============================================
   8. Result List
   ============================================ */
.result-list-container {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}

.result-list-container h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.result-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-item {
    padding: 12px 16px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
}

.result-company {
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 8px;
}

/* ============================================
   9. Legend
   ============================================ */
.legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: hsl(var(--foreground));
}

.legend-item .symbol {
    font-size: 1rem;
    font-weight: 600;
    width: 20px;
    text-align: center;
}

.legend-item .symbol.circle {
    color: hsl(142 76% 36%);
    font-size: 1.15rem;
}

.legend-item .symbol.triangle {
    color: hsl(45 93% 37%);
}

.legend-item .symbol.x {
    color: hsl(0 84% 50%);
}

.legend-item .symbol.dash {
    color: hsl(var(--muted-foreground));
}

.legend-item .symbol.sharepoint {
    color: hsl(200 80% 50%);
}

.legend-item .symbol.na {
    color: hsl(var(--muted-foreground));
}

/* ============================================
   10. Status Badge
   ============================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

.status-badge.pending {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.status-badge.processing {
    background: hsl(48 96% 89%);
    color: hsl(25 95% 53%);
}

.status-badge.success {
    background: hsl(142 76% 90%);
    color: hsl(142 76% 36%);
}

.status-badge.failed {
    background: hsl(0 84% 92%);
    color: hsl(0 84% 60%);
}

.status-badge.skipped,
/* 폐기 — 무스타일로 떨어지지 않게 명시한다 (status 선택지 추가 시 빠뜨리기 쉬운 지점) */
.status-badge.discarded {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* ============================================
   11. Company List Table (base, no grid-template-columns)
   ============================================ */
.company-list-container {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
}

.company-list-header {
    display: grid;
    padding: 12px 16px;
    background: hsl(var(--muted));
    border-bottom: 1px solid hsl(var(--border));
    font-weight: 500;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.company-list-item {
    display: grid;
    padding: 12px 16px;
    border-bottom: 1px solid hsl(var(--border));
    transition: background var(--dur-fast) var(--ease);
    align-items: center;
    font-size: 0.875rem;
}

.company-list-item:last-child {
    border-bottom: none;
}

.company-list-item:hover {
    background: hsl(var(--muted) / 0.5);
}

.col-num {
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    font-size: 0.75rem;
}

.col-name {
    font-weight: 500;
    color: hsl(var(--foreground));
}

/* ============================================
   12. Empty State
   ============================================ */
.empty-state {
    text-align: center;
    padding: 64px 24px;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: hsl(var(--muted));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon svg {
    width: 24px;
    height: 24px;
    color: hsl(var(--muted-foreground));
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.empty-state p {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

/* ============================================
   13. Modal
   ============================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(var(--foreground) / 0.8);
    backdrop-filter: blur(4px);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: dialogIn var(--dur) var(--ease-out);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid hsl(var(--border));
}

.modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.close-btn:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(85vh - 65px);
}

/* ============================================
   14. Info Section
   ============================================ */
.info-section {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px;
}

.info-section h3 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.info-section h4 {
    margin: 20px 0 8px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.info-hint {
    margin: 0 0 16px 0;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    opacity: 0.8;
}

.doc-type-list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.doc-type-list li {
    margin: 6px 0;
}

.doc-type-list strong {
    color: hsl(var(--foreground));
}

.date-info {
    margin: 0 0 8px 0;
    font-size: 0.875rem;
    color: hsl(var(--primary));
    font-weight: 500;
}

.validation-rules {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.validation-rules li {
    margin: 4px 0;
}

.validation-rules strong {
    color: hsl(var(--foreground));
}

/* ============================================
   15. File Link
   ============================================ */
.file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: hsl(var(--foreground));
    text-decoration: none;
    font-size: 0.875rem;
    padding: 4px 8px;
    background: hsl(var(--secondary));
    border-radius: var(--radius);
    transition: background var(--dur-fast) var(--ease);
}

.file-link:hover {
    background: hsl(var(--accent));
}

.file-link svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   16. Animations
   ============================================ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dialogIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================
   17. Responsive Base
   ============================================ */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.5rem;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .result-summary {
        flex-direction: column;
    }

    .summary-item {
        min-width: auto;
    }

    .legend {
        flex-direction: column;
        gap: 8px;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
    }
}

/* 상태 배지 시맨틱 색 — 전 앱 상태값 매핑 (완료=그린, 진행=블루, 대기=앰버, 실패=레드) */
.status-badge.approved,
.status-badge.promoted {
    background: hsl(142 70% 93%);
    color: hsl(142 72% 26%);
}

.status-badge.review,
.status-badge.generating,
.status-badge.generated,
.status-badge.candidates_ready {
    background: hsl(220 83% 94%);
    color: hsl(220 83% 40%);
}

.status-badge.requested,
.status-badge.direction_pending {
    background: hsl(45 93% 90%);
    color: hsl(35 90% 30%);
}

.status-badge.rejected,
.status-badge.failed {
    background: hsl(0 84% 94%);
    color: hsl(0 72% 40%);
}