/* Dashboard insights: the hiring funnel, health tiles and job performance rows
   shared by the admin, company and job seeker overviews. Uses container queries
   so a panel lays itself out by its own width, not the viewport's. */
.dx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 16px 0; }
.dx-panel { container-type: inline-size; }

/* ── Funnel ── */
.dx-funnel { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.dx-funnel-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 40px 112px;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}
.dx-funnel-label { font-weight: 600; color: var(--ink, #1c2547); }
.dx-funnel-track { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #4274d9) 10%, transparent); overflow: hidden; }
.dx-funnel-fill {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #4274d9) 70%, white), var(--accent, #4274d9));
    transition: width .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
    @starting-style { width: 0%; }
}
.dx-funnel-row:last-child .dx-funnel-fill { background: linear-gradient(90deg, #5bbf86, #2E8B57); }
.dx-funnel-count { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dx-funnel-conv { font-size: 12px; color: var(--ink-muted, #6b7280); white-space: nowrap; }
@container (max-width: 400px) {
    .dx-funnel-row { grid-template-columns: 78px minmax(0, 1fr) 34px; }
    .dx-funnel-conv { display: none; }
}

/* ── Health tiles ── */
.dx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.dx-tile { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #4274d9) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #4274d9) 14%, transparent); }
.dx-tile b { display: block; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink, #1c2547); }
.dx-tile span { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-muted, #6b7280); }
.dx-tile.is-warn { background: color-mix(in srgb, #e8742c 9%, transparent); border-color: color-mix(in srgb, #e8742c 28%, transparent); }
.dx-tile.is-warn b { color: #b4531a; }
.dx-tile.is-good { background: color-mix(in srgb, #2E8B57 8%, transparent); border-color: color-mix(in srgb, #2E8B57 26%, transparent); }
.dx-tile.is-good b { color: #1f7a47; }

/* ── Attention lists ── */
.dx-list-title { margin: 16px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted, #6b7280); }
.dx-list { list-style: none; margin: 0; padding: 0; }
.dx-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line, #e8e9f0); font-size: 13.5px; }
.dx-list li:first-child { border-top: 0; }
.dx-list a { color: inherit; font-weight: 700; text-decoration: none; }
.dx-list a:hover { text-decoration: underline; }
.dx-list small { color: var(--ink-muted, #6b7280); font-size: 12px; white-space: nowrap; }
.dx-ok { margin: 10px 0 0; font-size: 13px; color: #1f7a47; }

/* ── Per-job performance (company) ── */
.dx-job-rows { display: grid; gap: 4px; margin-top: 12px; }
.dx-job-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 52px 60px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line, #e8e9f0);
    font-size: 13.5px;
}
.dx-job-row > :nth-child(n+2) { text-align: right; }
.dx-job-row:first-child { border-top: 0; }
.dx-job-row.is-head { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted, #6b7280); padding-top: 0; }
.dx-job-row .dx-job-name { min-width: 0; }
.dx-job-row .dx-job-name a { color: var(--ink, #1c2547); font-weight: 700; text-decoration: none; }
.dx-job-row .dx-job-name small { display: block; margin-top: 2px; color: var(--ink-muted, #6b7280); font-size: 12px; }
.dx-job-row .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.dx-job-row.is-off { opacity: .6; }
.dx-flag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dx-flag.warn { background: color-mix(in srgb, #e8742c 14%, transparent); color: #b4531a; }
.dx-flag.info { background: color-mix(in srgb, var(--accent, #4274d9) 13%, transparent); color: var(--accent-dark, #2d51a8); }
@container (max-width: 460px) {
    .dx-job-row { grid-template-columns: minmax(0, 1fr) 76px 44px; }
    .dx-job-row > :nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-funnel-fill { transition: none; }
}