@import '_content/CSI.UI/CSI.UI.sl0zcenixp.bundle.scp.css';

/* /Components/CardPickerModal.razor.rz.scp.css */
/* ── Scrollable card list ──────────────────────────────────── */
.cpm-card-list[b-ac4cn79opm] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--csi-color-border);
    border-radius: var(--csi-radius-sm);
    max-height: 280px;
    overflow-y: auto;
    margin-top: var(--csi-space-xs, 0.25rem);
}

/* ── Individual card row ──────────────────────────────────── */
.cpm-card-row[b-ac4cn79opm] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-sm);
    padding: var(--csi-space-sm) var(--csi-space-md);
    border-bottom: 1px solid var(--csi-color-border-subtle, #eef0f3);
}

.cpm-card-row:last-child[b-ac4cn79opm] {
    border-bottom: none;
}

.cpm-card-row:hover[b-ac4cn79opm] {
    background: var(--csi-color-surface-hover, rgba(0, 0, 0, 0.03));
}

.cpm-card-row__info[b-ac4cn79opm] {
    flex: 1;
    min-width: 0;
}

.cpm-card-row__name[b-ac4cn79opm] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpm-card-row__meta[b-ac4cn79opm] {
    font-size: 0.75rem;
    color: var(--csi-color-text-muted);
    margin-top: 2px;
}
/* /Pages/FindCandidate.razor.rz.scp.css */
/* ── Results section ──────────────────────────────────────── */
.fc-results[b-1t22fbu2qt] {
    margin-top: var(--csi-space-md);
}

.fc-results__head[b-1t22fbu2qt] {
    font-size: 0.875rem;
    color: var(--csi-color-text-secondary);
    margin-bottom: var(--csi-space-sm);
}

.fc-results__age[b-1t22fbu2qt] {
    font-style: italic;
}

/* ── Candidate list ───────────────────────────────────────── */
.fc-cand-list[b-1t22fbu2qt] {
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-sm);
}

.fc-cand[b-1t22fbu2qt] {
    background: var(--csi-color-surface);
    border: 1px solid var(--csi-color-border);
    border-radius: var(--csi-radius-md);
    overflow: hidden;
}

/* ── Clickable header row ─────────────────────────────────── */
.fc-cand__top[b-1t22fbu2qt] {
    display: grid;
    grid-template-columns: 44px 1fr auto auto 32px;
    gap: var(--csi-space-sm);
    align-items: center;
    padding: var(--csi-space-sm) var(--csi-space-md);
    cursor: pointer;
}

.fc-cand__top:hover[b-1t22fbu2qt] {
    background: var(--csi-color-surface-hover, rgba(0, 0, 0, 0.03));
}

/* ── Rank badge ───────────────────────────────────────────── */
.fc-cand__rank[b-1t22fbu2qt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--csi-color-accent-subtle, rgba(10, 74, 138, 0.08));
    color: var(--csi-color-accent, #0a4a8a);
    border-radius: var(--csi-radius-sm);
    font-weight: 700;
    font-size: 0.9375rem;
}

/* ── Candidate identity ───────────────────────────────────── */
.fc-cand__name[b-1t22fbu2qt] {
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: var(--csi-space-xs, 0.25rem);
}

.fc-cand__meta[b-1t22fbu2qt] {
    color: var(--csi-color-text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* ── Stats (Hrs / Score) ──────────────────────────────────── */
.fc-cand__stat[b-1t22fbu2qt] {
    text-align: right;
}

.fc-cand__statval[b-1t22fbu2qt] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.fc-cand__statlbl[b-1t22fbu2qt] {
    display: block;
    font-size: 0.6875rem;
    color: var(--csi-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.fc-cand__score[b-1t22fbu2qt] {
    color: var(--csi-color-success, #16a34a);
}

.fc-cand__chev[b-1t22fbu2qt] {
    color: var(--csi-color-text-muted);
    user-select: none;
}

/* ── Expanded detail area ─────────────────────────────────── */
.fc-cand__detail[b-1t22fbu2qt] {
    border-top: 1px solid var(--csi-color-border-subtle, #eef0f3);
    padding: var(--csi-space-sm) var(--csi-space-md);
    background: var(--csi-color-surface-subtle, #f7f8fa);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--csi-space-md);
    font-size: 0.8125rem;
    color: var(--csi-color-text-secondary);
}

.fc-cand__breakdown[b-1t22fbu2qt] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-sm);
    flex-wrap: wrap;
}

/* ── Load bucket badge colors ─────────────────────────────── */
.fc-load[b-1t22fbu2qt] {
    font-weight: 600;
}

.fc-load--low[b-1t22fbu2qt] {
    color: var(--csi-color-success, #16a34a);
}

.fc-load--med[b-1t22fbu2qt] {
    color: var(--csi-color-warning, #d97706);
}

.fc-load--high[b-1t22fbu2qt] {
    color: var(--csi-color-danger, #dc2626);
}

.fc-load--unknown[b-1t22fbu2qt] {
    color: var(--csi-color-text-muted);
    font-style: italic;
    font-weight: normal;
}

/* ── State modifiers ──────────────────────────────────────── */
.fc-cand--top[b-1t22fbu2qt] {
    border-color: var(--csi-color-success, #16a34a);
    box-shadow: 0 0 0 1px var(--csi-color-success, #16a34a);
}

.fc-cand--top .fc-cand__rank[b-1t22fbu2qt] {
    background: var(--csi-color-success-subtle, #dcfce7);
    color: var(--csi-color-success, #16a34a);
}

.fc-cand--assigned[b-1t22fbu2qt] {
    opacity: 0.6;
}
/* /Pages/Home.razor.rz.scp.css */
/* ── Action Inbox plate ─────────────────────────────────────────────── */

.ftc-plate[b-yqd121fgwx] {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--csi-bg-surface);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-md, 6px);
    overflow: hidden;
}

.ftc-plate__item[b-yqd121fgwx] {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: var(--csi-space-4);
    align-items: center;
    padding: var(--csi-space-4) var(--csi-space-6);
    border-top: 1px solid var(--csi-border-default);
    border-left: 3px solid transparent;
}

.ftc-plate__item:first-child[b-yqd121fgwx] {
    border-top: 0;
}

.ftc-plate__tag[b-yqd121fgwx] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* color set per severity below */
}

.ftc-plate__body[b-yqd121fgwx] {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.ftc-plate__cta[b-yqd121fgwx] {
    color: var(--csi-color-brand-700);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.ftc-plate__cta:hover[b-yqd121fgwx] {
    text-decoration: underline;
}

/* ── Per-severity left border + tag color ───────────────────────────── */

/* Alert = red */
.ftc-plate__item--alert[b-yqd121fgwx] {
    border-left-color: var(--csi-color-danger-500);
    background: color-mix(in srgb, var(--csi-color-danger-500) 4%, transparent);
}

.ftc-plate__item--alert .ftc-plate__tag[b-yqd121fgwx] {
    color: var(--csi-color-danger-700);
}

/* Warn = amber */
.ftc-plate__item--warn[b-yqd121fgwx] {
    border-left-color: var(--csi-color-warning-500);
    background: color-mix(in srgb, var(--csi-color-warning-500) 5%, transparent);
}

.ftc-plate__item--warn .ftc-plate__tag[b-yqd121fgwx] {
    color: var(--csi-color-warning-700);
}

/* Info = blue */
.ftc-plate__item--info[b-yqd121fgwx] {
    border-left-color: var(--csi-color-info-500);
}

.ftc-plate__item--info .ftc-plate__tag[b-yqd121fgwx] {
    color: var(--csi-color-info-700);
}

/* Neutral = grey */
.ftc-plate__item--neutral .ftc-plate__tag[b-yqd121fgwx] {
    color: var(--csi-fg-muted);
}
/* /Pages/Schedule.razor.rz.scp.css */
/* Schedule page — scoped styles.
   Uses tokens from CSI.UI/wwwroot/tokens/tokens.css; no hard-coded hex.

   UI redesign 2026-05-16:
   - Week strip replaces the old header toolbar.
   - View tabs row with per-view contextual controls.
   - Actions overflow menu (inline toggle, no shared component needed).
   - Coverage legend in the Coverage tab's right edge.
   - Hourly day picker is a compact segmented control in the Hourly
     tab's right edge.
   - Density overlay removed (2026-05-16) — Coverage view is the home
     for staffing-health questions; Builder stays clean for editing.
*/

/* ── Week strip ─────────────────────────────────────────────────── */

.ftc-sched__week-strip[b-87ja107og6] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-3, 0.75rem);
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--csi-border-default);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.ftc-sched__week-strip-spacer[b-87ja107og6] {
    flex: 1;
}

/* ── Actions overflow menu ───────────────────────────────────────── */

.ftc-sched__actions-wrap[b-87ja107og6] {
    position: relative;
    display: inline-block;
}

.ftc-sched__actions-trigger[b-87ja107og6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--csi-border-strong);
    background: var(--csi-bg-surface);
    color: var(--csi-fg-primary);
    padding: 6px 12px;
    border-radius: var(--csi-radius-md, 6px);
    font: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

.ftc-sched__actions-trigger:hover[b-87ja107og6] {
    background: var(--csi-bg-page);
}

.ftc-sched__actions-trigger:focus-visible[b-87ja107og6] {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: 1px;
}

.ftc-sched__actions-wrap--open .ftc-sched__actions-trigger[b-87ja107og6] {
    background: var(--csi-bg-page);
    border-color: var(--csi-color-brand-500);
}

.ftc-sched__actions-trigger-dots[b-87ja107og6] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
}

.ftc-sched__actions-menu[b-87ja107og6] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 200px;
    background: var(--csi-bg-surface);
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md, 6px);
    box-shadow: var(--csi-elevation-overlay, 0 8px 32px rgba(15, 35, 71, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06));
    padding: 4px 0;
    z-index: var(--csi-z-dropdown, 100);
}

.ftc-sched__actions-item[b-87ja107og6] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--csi-fg-primary);
}

.ftc-sched__actions-item:hover:not(:disabled)[b-87ja107og6] {
    background: var(--csi-bg-page);
}

.ftc-sched__actions-item:focus-visible[b-87ja107og6] {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: -2px;
}

.ftc-sched__actions-item:disabled[b-87ja107og6] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Full-viewport scrim catches outside clicks without stealing focus */
.ftc-sched__actions-scrim[b-87ja107og6] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--csi-z-dropdown, 100) - 1);
    background: transparent;
}

/* ── View tabs ──────────────────────────────────────────────────── */

.ftc-sched__tabs[b-87ja107og6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--csi-space-3, 0.75rem);
    border-bottom: 1px solid var(--csi-border-default);
    margin-bottom: 0;
}

.ftc-sched__tabs-list[b-87ja107og6] {
    display: flex;
    gap: 0;
}

.ftc-sched__tab[b-87ja107og6] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--csi-fg-secondary);
    margin-bottom: -1px;
    transition: color 0.12s ease, border-bottom-color 0.12s ease;
}

.ftc-sched__tab:hover:not(.ftc-sched__tab--active)[b-87ja107og6] {
    color: var(--csi-fg-primary);
}

.ftc-sched__tab--active[b-87ja107og6] {
    color: var(--csi-color-brand-500);
    border-bottom-color: var(--csi-color-brand-500);
}

.ftc-sched__tab:focus-visible[b-87ja107og6] {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: -2px;
    border-radius: var(--csi-radius-sm, 4px);
}

.ftc-sched__tabs-right[b-87ja107og6] {
    display: flex;
    align-items: center;
    gap: var(--csi-space-3, 0.75rem);
    padding: 6px 0;
    color: var(--csi-fg-secondary);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* ── Coverage legend (inline — Coverage tab right-edge) ─────────── */

.ftc-sched__cov-legend--inline[b-87ja107og6] {
    display: inline-flex;
    align-items: center;
    gap: var(--csi-space-3, 0.75rem);
    font-size: 0.8125rem;
    color: var(--csi-fg-muted);
}

.ftc-sched__cov-legend-swatch[b-87ja107og6] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--csi-border-default);
    vertical-align: middle;
    margin-right: 3px;
}

/* ── Hourly compact day picker (Hourly tab right-edge) ──────────── */

.ftc-sched__hourly-day-picker--compact[b-87ja107og6] {
    display: inline-flex;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md, 6px);
    overflow: hidden;
}

.ftc-sched__hourly-day-btn[b-87ja107og6] {
    background: var(--csi-bg-surface);
    border: none;
    border-right: 1px solid var(--csi-border-strong);
    padding: 4px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--csi-fg-secondary);
    transition: background 0.12s ease, color 0.12s ease;
}

.ftc-sched__hourly-day-btn:last-child[b-87ja107og6] {
    border-right: none;
}

.ftc-sched__hourly-day-btn:hover:not(.ftc-sched__hourly-day-btn--active)[b-87ja107og6] {
    background: var(--csi-bg-page);
    color: var(--csi-fg-primary);
}

.ftc-sched__hourly-day-btn--active[b-87ja107og6] {
    background: var(--csi-color-brand-500);
    color: var(--csi-color-neutral-0);
}

.ftc-sched__hourly-day-btn:focus-visible[b-87ja107og6] {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: -2px;
}

/* ── Coverage heatmap ──────────────────────────────────────────────── */

.ftc-sched__cov-wrapper[b-87ja107og6] {
    margin-top: var(--csi-space-md);
    overflow-x: auto;
}

.ftc-sched__cov-table[b-87ja107og6] {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 0.9375rem;
}

.ftc-sched__cov-table th[b-87ja107og6],
.ftc-sched__cov-table td[b-87ja107og6] {
    border: 1px solid var(--csi-border-default);
    padding: 10px 12px;
    text-align: center;
}

.ftc-sched__cov-table thead th[b-87ja107og6] {
    background: var(--csi-bg-surface);
    font-weight: 600;
    color: var(--csi-fg-secondary);
    font-size: 0.8125rem;
}

.ftc-sched__cov-hour[b-87ja107og6] {
    width: 70px;
    text-align: right !important;
    white-space: nowrap;
    font-weight: 500;
    color: var(--csi-fg-secondary);
    background: var(--csi-bg-surface);
    padding-right: var(--csi-space-md) !important;
}

.ftc-sched__cov-cell[b-87ja107og6] {
    width: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    transition: background 150ms ease-out;
}

.ftc-sched__cov-count[b-87ja107og6] {
    display: block;
}

/* Heatmap color scale.
   0          → neutral grey — no coverage at all in this slot.
   1–3        → danger tint  — critically understaffed (fewer than ~¼ of a
                               typical 10–15 station lab).
   4–6        → warning tint — skeleton crew; functional but not full.
   7+         → success tint — healthy coverage. */
.ftc-sched__cov-cell--empty[b-87ja107og6] {
    background: var(--csi-bg-page);
    color: var(--csi-fg-muted);
}

.ftc-sched__cov-cell--low[b-87ja107og6] {
    background: color-mix(in srgb, var(--csi-color-danger-500, #A82828) 12%, var(--csi-bg-surface));
    color: var(--csi-color-danger-700, #7F1E1E);
}

.ftc-sched__cov-cell--med[b-87ja107og6] {
    background: color-mix(in srgb, var(--csi-color-warning-500, #B8860B) 14%, var(--csi-bg-surface));
    color: var(--csi-color-warning-700, #8B6508);
}

.ftc-sched__cov-cell--high[b-87ja107og6] {
    background: color-mix(in srgb, var(--csi-color-success-500, #1F7A1F) 12%, var(--csi-bg-surface));
    color: var(--csi-color-success-700, #155D15);
}

/* ── Hourly grid ────────────────────────────────────────────────────── */

.ftc-sched__hourly-scroll[b-87ja107og6] {
    overflow-x: auto;
}

.ftc-sched__hourly-table[b-87ja107og6] {
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 600px;
}

.ftc-sched__hourly-table th[b-87ja107og6],
.ftc-sched__hourly-table td[b-87ja107og6] {
    border: 1px solid var(--csi-border-default);
    padding: 4px 8px;
    vertical-align: top;
}

.ftc-sched__hourly-hour-col[b-87ja107og6],
.ftc-sched__hourly-hour-label[b-87ja107og6] {
    white-space: nowrap;
    font-weight: 500;
    color: var(--csi-fg-secondary);
    background: var(--csi-bg-surface);
    text-align: right;
    padding-right: var(--csi-space-md) !important;
    min-width: 72px;
}

.ftc-sched__hourly-sta-col[b-87ja107og6] {
    background: var(--csi-bg-surface);
    font-weight: 600;
    color: var(--csi-fg-secondary);
    font-size: 0.8125rem;
    text-align: center;
    min-width: 64px;
}

.ftc-sched__hourly-cell[b-87ja107og6] {
    min-width: 64px;
    vertical-align: top;
    padding: 4px 6px;
}

/* Employee name chip inside hourly cell */
.ftc-sched__hourly-name[b-87ja107og6] {
    display: inline-block;
    margin: 1px;
    padding: 1px 5px;
    background: color-mix(in srgb, var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a)) 10%, var(--csi-bg-surface));
    border: 1px solid color-mix(in srgb, var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a)) 25%, transparent);
    border-radius: var(--csi-radius-xs, 3px);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--csi-fg-primary);
    white-space: nowrap;
}
/* /Pages/Skills.razor.rz.scp.css */
/* Coverage column + drill modal styles for the Skills catalog page.
   Coverage cells are interactive buttons (open drill modal) when any
   ratings exist, and a static muted indicator otherwise. */

.ftc-skill-coverage[b-hieukloh44] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--csi-radius-sm);
    color: var(--csi-fg-primary);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.ftc-skill-coverage:hover:not(:disabled)[b-hieukloh44] {
    background: var(--csi-bg-surface-hover, var(--csi-bg-page));
    border-color: var(--csi-border-default);
}

.ftc-skill-coverage:disabled[b-hieukloh44] {
    cursor: default;
    opacity: 0.7;
}

.ftc-skill-coverage__text[b-hieukloh44] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.ftc-skill-coverage__count[b-hieukloh44] {
    font-weight: 600;
}

.ftc-skill-coverage__total[b-hieukloh44] {
    color: var(--csi-fg-muted);
}

.ftc-skill-coverage__avg[b-hieukloh44] {
    color: var(--csi-fg-muted);
    font-size: 0.75rem;
}

.ftc-skill-coverage__bar[b-hieukloh44] {
    height: 4px;
    width: 100%;
    background: var(--csi-bg-page);
    border-radius: 999px;
    overflow: hidden;
}

.ftc-skill-coverage__fill[b-hieukloh44] {
    display: block;
    height: 100%;
    background: var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a));
    border-radius: 999px;
    transition: width 200ms ease-out;
}

.ftc-skill-coverage__fill--empty[b-hieukloh44] {
    background: var(--csi-border-default);
}

/* Drill modal — "Rate an employee" form */

.ftc-skill-drill__rate[b-hieukloh44] {
    padding: var(--csi-space-sm) var(--csi-space-md);
    margin-bottom: var(--csi-space-md);
    background: var(--csi-bg-page);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-sm);
}

.ftc-skill-drill__rate-title[b-hieukloh44] {
    font-weight: 600;
    color: var(--csi-fg-primary);
    margin-bottom: var(--csi-space-sm);
}

.ftc-skill-drill__rate-form[b-hieukloh44] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--csi-space-sm);
}

.ftc-skill-drill__rate-form > *[b-hieukloh44] {
    min-width: 0;
}

.ftc-skill-drill__rate-help[b-hieukloh44] {
    margin-top: var(--csi-space-xs);
    color: var(--csi-fg-muted);
    font-size: 0.75rem;
}

.ftc-skill-drill__rate-help code[b-hieukloh44] {
    background: var(--csi-bg-surface);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--csi-fg-secondary);
}

/* Drill modal — per-employee rating list */

.ftc-skill-drill__meta[b-hieukloh44] {
    color: var(--csi-fg-muted);
    font-size: 0.875rem;
    margin-bottom: var(--csi-space-md);
}

.ftc-skill-drill__meta code[b-hieukloh44] {
    color: var(--csi-fg-primary);
    background: var(--csi-bg-page);
    padding: 1px 6px;
    border-radius: 4px;
}

.ftc-skill-drill__list[b-hieukloh44] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 50vh;
    overflow-y: auto;
}

.ftc-skill-drill__row[b-hieukloh44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--csi-space-md);
    padding: 8px 12px;
    background: var(--csi-bg-surface);
    border: 1px solid var(--csi-border-default);
    border-radius: var(--csi-radius-sm);
}

.ftc-skill-drill__name[b-hieukloh44] {
    font-weight: 500;
    color: var(--csi-fg-primary);
}

.ftc-skill-drill__value[b-hieukloh44] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    color: var(--csi-fg-secondary);
}

.ftc-skill-drill__pips[b-hieukloh44] {
    display: flex;
    gap: 2px;
}

.ftc-skill-drill__pip[b-hieukloh44] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--csi-border-default);
}

.ftc-skill-drill__pip--filled[b-hieukloh44] {
    background: var(--csi-app-ftc, var(--csi-color-primary, #0a4a8a));
}