/* ============================================================================
   Clyptus ATS — the infographic report style          assets/infographic.css
   ----------------------------------------------------------------------------
   Module 113.

   The recruiter dashboard was rebuilt with coloured KPI cards, stage icons and
   a proportional funnel, and it was asked to become the default for every
   report in the product. Rather than copy that CSS into a dozen pages — where
   it would drift the first time one was edited — the reusable pieces live here,
   loaded once site-wide, and the report pages reference them.

   THREE COMPONENTS, ONE SOURCE
     .hd-ico   — a tinted icon badge for a section header
     .ig-kpis  — a row of KPI stat cards, each with an icon chip
     .fnl      — a proportional funnel / bar report

   Every colour comes in through a CSS variable the page sets inline
   (--stg on a stat card, --hc on a header badge), so the components carry no
   palette of their own and inherit dark mode from the theme. The C# helper
   ReportUi renders all three, so a page adopts the look with one call and
   cannot get the markup subtly wrong.

   Loaded AFTER density.css and theme.css, so it wins on equal specificity
   without !important, and never before prefs.css where dark mode would undo
   its tints.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Header badge
   A small tinted square that makes a card announce itself. --hc is the tint. */
.hd-ico {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    margin-right: 5px; vertical-align: -6px;
    color: var(--hc, #6366f1);
    background: color-mix(in srgb, var(--hc, #6366f1) 14%, transparent);
}
.hd-ico i { font-size: .92rem; }

/* On a browser without color-mix the background just resolves to transparent
   and the icon still shows in full colour — a clean degrade, not a break. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .hd-ico { background: rgba(99, 102, 241, .12); }
}

/* ---------------------------------------------------------------- 2. KPI stat cards
   The dashboard's stage cards, generalised. A row of numbers, each with an
   icon chip in the stat's colour, the value in that colour, and a label. */
.ig-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem;
    margin-bottom: 1rem;
}
.ig-kpi {
    position: relative;
    border: 1px solid var(--line, #e4e7ec);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: .7rem .8rem;
    display: flex; flex-direction: column; gap: .1rem;
    min-height: 92px;
    text-decoration: none; color: inherit;
    transition: transform .12s, box-shadow .14s, border-color .12s;
}
/* A card that is a link lifts on hover; a plain one does not pretend to. */
a.ig-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 29, 58, .1); border-color: var(--stg, #6366f1); }
.ig-kpi::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--stg, #6366f1); opacity: .9;
}
.ig-kpi .ig-ic {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.02rem;
    color: var(--stg, #6366f1);
    background: color-mix(in srgb, var(--stg, #6366f1) 13%, transparent);
    margin-bottom: .35rem;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .ig-kpi .ig-ic { background: rgba(99, 102, 241, .12); }
}
.ig-kpi .ig-v { font-size: 1.5rem; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--stg, #10151f); }
.ig-kpi .ig-l { font-size: .74rem; font-weight: 600; color: var(--ink, #10151f); }
.ig-kpi .ig-s { font-size: .68rem; color: var(--muted, #667085); }

/* ---------------------------------------------------------------- 3. Funnel report
   One bar per stage, width proportional to its value. The dashboard's
   conversion funnel, available to any page with an ordered set of counts. */
.fnl { background: var(--surface, #fff); border: 1px solid var(--line, #e4e7ec); border-radius: 12px; padding: 12px 14px; }
.fnl-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.fnl-lab { flex: 0 0 118px; font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; }
.fnl-lab i { font-size: .95rem; flex: 0 0 auto; }
.fnl-lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnl-track { flex: 1 1 auto; background: var(--line-soft, #eef0f4); border-radius: 7px; height: 22px; overflow: hidden; }
.fnl-fill {
    height: 100%; border-radius: 7px;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 8px; color: #fff; font-size: .74rem; font-weight: 700;
    transition: width .5s cubic-bezier(.2, .7, .2, 1);
}
.fnl-pct { flex: 0 0 44px; text-align: right; font-size: .78rem; font-weight: 700; color: var(--muted, #667085); font-variant-numeric: tabular-nums; }
.fnl-note { font-size: .7rem; color: var(--muted, #667085); margin-top: 8px; line-height: 1.5; }

@media (max-width: 576px) {
    .fnl-lab { flex-basis: 92px; font-size: .74rem; }
    .fnl-pct { flex-basis: 36px; }
    .ig-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}