/* ════════════════════════════════════════════════════════════════
   feedback-shared.css
   Global classes shared between CandidateFeedbackDrawer and the
   CandidateFeedbackPage. Uses ONLY --g-* design tokens.
   Prefix: fb-*
   ════════════════════════════════════════════════════════════════ */

/* ===== CARD BASE ===== */
.fb-card {
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: var(--g-space-16) var(--g-space-20);
    box-shadow: var(--g-shadow-xs);
}
.fb-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--g-space-12); }
.fb-card-title {
    margin: 0 0 var(--g-space-12);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-text-heading);
    letter-spacing: -0.01em;
}
.fb-card-meta { font-size: var(--g-fs-xs); color: var(--g-text-muted); }

/* ===== CONTEXT CARD ===== */
.fb-context {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--g-space-12);
    align-items: stretch;
}
.fb-context-side { display: flex; flex-direction: column; gap: var(--g-space-10); min-width: 0; }
.fb-context-head { display: flex; align-items: center; gap: var(--g-space-10); min-width: 0; }
.fb-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-link-strong {
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-semibold);
    color: var(--g-brand);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-link-strong:hover { text-decoration: underline; }
.fb-link-strong.fb-link-plain { color: var(--g-text-primary); }
.fb-link-strong.fb-link-plain:hover { color: var(--g-text-primary); text-decoration: underline; }
.fb-sub { font-size: var(--g-fs-xs); color: var(--g-text-secondary); }

.fb-job-thumb-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.fb-job-thumb-lg { width: 44px; height: 44px; }
.fb-job-thumb {
    width: 100%; height: 100%;
    border-radius: var(--g-radius-md);
    object-fit: cover;
    border: 1px solid var(--g-border);
    background: var(--g-gray-100);
}
.fb-job-client-dot {
    position: absolute; bottom: -3px; right: -3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--g-brand);
    border: 2px solid var(--g-bg-card);
}
.fb-job-client-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--g-bg-card);
    background: #fff;
}
.fb-cand-thumb {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--g-border);
    flex-shrink: 0;
    background: var(--g-gray-100);
}
.fb-cand-thumb-lg { width: 44px; height: 44px; }

.fb-avatar-initials {
     width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 8px;
    font-weight: var(--g-fw-semibold); 
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-transform: uppercase;
}
.fb-avatar-initials-lg { width: 36px; height: 36px; font-size: var(--g-fs-body); }

.fb-chip-row { display: flex; flex-wrap: wrap; gap: var(--g-space-6); }
.fb-chip {
    font-size: var(--g-fs-xs);
    color: var(--g-text-label);
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-full);
    padding: 3px 12px;
    font-weight: var(--g-fw-medium);
}
.fb-meta-line { font-size: var(--g-fs-xs); color: var(--g-text-muted); }
.fb-meta-line b { color: var(--g-text-label); font-weight: var(--g-fw-semibold); }
 
.fb-icon-row { display: flex; gap: var(--g-space-6); }
.fb-icon-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--g-bg-card);
    border: 1px solid var(--g-border);
    color: var(--g-text-secondary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--g-transition), color var(--g-transition), border-color var(--g-transition);
}
.fb-icon-btn:hover { background: var(--g-brand-bg); color: var(--g-brand); border-color: var(--g-brand-border); }

.fb-match-divider { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 var(--g-space-6); }
.fb-match-line { width: 1px; flex: 1; background: var(--g-border); min-height: 14px; }
.fb-match-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    color: #a9a9a9;
    border: 1px solid #d0d0d0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===== STATUS GRID ===== */
.fb-status-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.fb-status-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: var(--g-space-12) var(--g-space-6);
    border-right: 1px solid var(--g-border-light);
    background: transparent; text-align: center;
}
.fb-status-cell:last-child { border-right: none; }
.fb-status-num { font-size: 1.5rem; font-weight: var(--g-fw-bold); line-height: 1.1; }
.fb-status-label { font-size: var(--g-fs-xs); color: var(--g-text-secondary); font-weight: var(--g-fw-medium); }
.fb-num-blue { color: var(--g-brand); }
.fb-num-muted { color: var(--g-text-muted); }
.fb-num-amber { color: var(--g-warning-text); }
.fb-num-red { color: var(--g-error-text); }
.fb-num-green { color: var(--g-success-text); }

/* ===== RATE ===== */
.fb-rate-row { display: flex; align-items: center; gap: var(--g-space-16); }
.fb-rate-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-rate-col-end { align-items: flex-end; text-align: right; }
.fb-rate-label { font-size: var(--g-fs-xs); color: var(--g-text-muted); font-weight: var(--g-fw-medium); }
.fb-rate-value {
    font-size: 1.4375rem;
    font-weight: var(--g-fw-bold);
    color: var(--g-text-heading);
    line-height: 1.15;
}
 .fb-rate-unit { font-size: var(--g-fs-xs); color: var(--g-text-muted); font-weight: var(--g-fw-normal); margin-left: 2px; }

.fb-rate-bar { flex: 1; display: flex; align-items: center; gap: var(--g-space-8); min-width: 80px; }
.fb-rate-line { flex: 1; height: 1px; background: var(--g-border); }
.fb-rate-pill {
    font-size: var(--g-fs-xxs);
    font-weight: var(--g-fw-semibold);
    padding: 2px 10px;
    border-radius: var(--g-radius-full);
    white-space: nowrap;
}
.fb-rate-pill-above { color: var(--g-error-text); background: transparent; }
.fb-rate-pill-below { color: var(--g-success-text); background: transparent; }

.fb-rate-foot {
    margin-top: var(--g-space-12);
    padding-top: var(--g-space-12);
    border-top: 1px solid var(--g-border-light);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--g-space-12);
}
.fb-link-doc {
    background: none; border: none; cursor: pointer;
    color: var(--g-brand); font-size: var(--g-fs-sm); font-weight: var(--g-fw-medium);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0;
}
.fb-link-doc:hover { text-decoration: underline; }

.fb-toggle-wrap { display: flex; align-items: center; gap: var(--g-space-10); }
.fb-toggle-label { font-size: var(--g-fs-xs); color: var(--g-text-label); }
.fb-yn { display: inline-flex; border: 1px solid var(--g-border); border-radius: var(--g-radius-md); overflow: hidden; }
.fb-yn-btn {
    border: none; background: var(--g-bg-card);
    padding: 5px 14px;
    font-size: var(--g-fs-xs); font-weight: var(--g-fw-semibold);
    color: var(--g-text-label); cursor: pointer;
    transition: background var(--g-transition), color var(--g-transition);
}
 .fb-yn-on { background: var(--g-success); color: var(--g-bg-card); }
.fb-yn-on-no { background: var(--g-error); color: var(--g-bg-card); }

/* ===== SKILLS ===== */
.fb-skills-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-16); }
.fb-skill-pills { display: flex; flex-wrap: wrap; gap: var(--g-space-6); flex: 1; }
.fb-skill-more {
    background: none; border: 1px dashed var(--g-border); cursor: pointer;
    border-radius: var(--g-radius-full);
    padding: 4px 10px;
    font-size: var(--g-fs-xs);
    color: var(--g-text-label);
}
.fb-skill-more:hover { background: var(--g-gray-50); border-color: var(--g-brand); color: var(--g-brand); }
.fb-skill-score { display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; }
.fb-skill-pct { font-size: var(--g-fs-display); font-weight: var(--g-fw-bold); color: var(--g-brand); line-height: 1; }
.fb-skill-pct-label { font-size: var(--g-fs-xxs); color: var(--g-text-muted); }
.fb-skill-verdict { font-size: var(--g-fs-xxs); color: var(--g-warning-text); font-weight: var(--g-fw-semibold); margin-top: 2px; }

/* ===== FIT ANALYSIS ===== */
.fb-fit-row { display: flex; align-items: center; gap: var(--g-space-20); flex-wrap: wrap; }
.fb-donut-wrap { flex-shrink: 0; }
.fb-donut { display: block; }
.fb-donut-label { font-size: 7px; fill: var(--g-text-muted); font-weight: var(--g-fw-medium); }
.fb-donut-pct { font-size: 16px; font-weight: var(--g-fw-bold); fill: var(--g-text-heading); }
.fb-donut-seg { transition: opacity 220ms var(--g-ease); cursor: pointer; }
.fb-donut-seg:hover { opacity: 0.85; }
.fb-donut-dim { opacity: 0.25; }
.fb-donut-dim:hover { opacity: 0.55; }

.fb-fit-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.fb-legend-row {
    display: flex; align-items: center; gap: var(--g-space-10);
    background: none; border: 1px solid transparent;
    padding: 8px 12px; border-radius: var(--g-radius-md);
    cursor: pointer; text-align: left;
    transition: background var(--g-transition), border-color var(--g-transition);
}
.fb-legend-row:hover { background: var(--g-gray-50); }
.fb-legend-active { background: var(--g-gray-50); border-color: var(--g-border-light); }
.fb-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--g-text-muted); }
.fb-legend-row[data-metric="AI_RESUME"] .fb-legend-dot { background: #3b82f6; }
.fb-legend-row[data-metric="LINKEDIN"]  .fb-legend-dot { background: var(--g-success); }
.fb-legend-row[data-metric="MATCHING_SKILLS"] .fb-legend-dot { background: #f59e0b; }
.fb-legend-row[data-metric="RECRUITER"] .fb-legend-dot { background: var(--g-error); }
.fb-legend-name { flex: 1; font-size: var(--g-fs-sm); color: var(--g-text-body); font-weight: var(--g-fw-medium); }
.fb-legend-val { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); }

.fb-link-summary {
    margin-top: var(--g-space-6); margin-left: var(--g-space-12);
    font-size: var(--g-fs-xs); color: var(--g-text-muted);
    text-decoration: none; align-self: flex-start;
    font-weight: var(--g-fw-medium);
}
.fb-link-summary:hover { color: var(--g-brand); text-decoration: underline; }

.fb-overall-card {
    margin-top: var(--g-space-16);
    border: 1px solid var(--g-border);
    background: var(--g-bg-card);
    border-left: 3px solid var(--g-brand);
    border-radius: var(--g-radius-md);
    padding: var(--g-space-12) var(--g-space-16);
    transition: border-color var(--g-transition);
}
.fb-overall-card[data-metric="AI_RESUME"] { border-left-color: #3b82f6; }
.fb-overall-card[data-metric="LINKEDIN"]  { border-left-color: var(--g-success); }
.fb-overall-card[data-metric="MATCHING_SKILLS"] { border-left-color: #f59e0b; }
.fb-overall-card[data-metric="RECRUITER"] { border-left-color: var(--g-error); }
.fb-overall-card[data-metric="OVERALL"]   { border-left-color: var(--g-brand); }
.fb-overall-card[data-metric="AI_RESUME"] .fb-overall-dot { background: #3b82f6; }
.fb-overall-card[data-metric="LINKEDIN"]  .fb-overall-dot { background: var(--g-success); }
.fb-overall-card[data-metric="MATCHING_SKILLS"] .fb-overall-dot { background: #f59e0b; }
.fb-overall-card[data-metric="RECRUITER"] .fb-overall-dot { background: var(--g-error); }
.fb-overall-card[data-metric="AI_RESUME"] .fb-overall-pill { color: #3b82f6; border-color: #93c5fd; }
.fb-overall-card[data-metric="LINKEDIN"]  .fb-overall-pill { color: var(--g-success-text); border-color: var(--g-success-border); }
.fb-overall-card[data-metric="MATCHING_SKILLS"] .fb-overall-pill { color: #b45309; border-color: #fcd34d; }
.fb-overall-card[data-metric="RECRUITER"] .fb-overall-pill { color: var(--g-error-text); border-color: var(--g-error-border); }

.fb-overall-head { display: flex; align-items: center; gap: var(--g-space-8); margin-bottom: var(--g-space-6); }
.fb-overall-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-brand); }
.fb-overall-title { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); color: var(--g-text-heading); flex: 1; }
.fb-overall-pill {
    font-size: var(--g-fs-xxs); font-weight: var(--g-fw-semibold);
    background: var(--g-bg-card); color: var(--g-brand);
    border: 1px solid var(--g-brand-border);
    border-radius: var(--g-radius-full);
    padding: 2px 10px;
}
.fb-overall-text { margin: 0; font-size: var(--g-fs-xs); color: var(--g-text-body); line-height: var(--g-lh-relaxed); }

/* ===== PROFILE ANALYSIS ===== */
.fb-profile-list { display: flex; flex-direction: column; gap: var(--g-space-8); }
.fb-profile-item {
    display: flex; align-items: flex-start; gap: var(--g-space-10);
    padding: var(--g-space-10) var(--g-space-12);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-md);
    background: var(--g-bg-card);
}
.fb-profile-item > div { display: flex; flex-direction: column; gap: 2px; }
.fb-profile-icon {
    width: 22px; height: 22px;
    border-radius: var(--g-radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fb-profile-ok .fb-profile-icon { background: var(--g-success-bg); color: var(--g-success-text); }
.fb-profile-warn .fb-profile-icon { background: var(--g-warning-bg); color: var(--g-warning-text); }
.fb-profile-warn { background: color-mix(in srgb, var(--g-warning-bg) 50%, transparent); border-color: var(--g-warning-border); }
.fb-profile-ok .fb-profile-title { color: var(--g-success-text); }
.fb-profile-warn .fb-profile-title { color: var(--g-warning-text); }
.fb-profile-title { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semibold); }
.fb-profile-text { font-size: var(--g-fs-xs); color: var(--g-text-body); }