/* ============================================================================
   dashboard.css — FID Dashboard page only.
   KRI tabs, KPI stat tiles, drill-down affordances, and the work-order
   history modal (hero header, stage stepper, timeline).
   Generic modal chrome lives in fid-modal.css.
   ============================================================================ */

    .kri-tab {
        border: 1px solid var(--phoenix-border-color);
        background: var(--phoenix-card-bg);
        border-radius: .4rem;
        padding: .45rem .85rem;
        font-size: .82rem;
        font-weight: 600;
        color: var(--phoenix-body-color);
        cursor: pointer;
    }

        .kri-tab:hover {
            border-color: var(--fid-accent, #1B6FE3);
            color: var(--fid-accent-ink, #0B4FB0);
        }

        .kri-tab.active {
            background: linear-gradient(135deg, #1B6FE3, #0B4FB0);
            border-color: var(--fid-accent-ink, #0B4FB0);
            color: #fff;
            box-shadow: 0 4px 12px -4px rgba(27,111,227,.55);
        }

    .kri-lb-row {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .25rem;
        border-bottom: 1px solid var(--phoenix-border-color);
    }

        .kri-lb-row:hover {
            background: var(--phoenix-secondary-bg, #f5f7fa);
            /* transform: translateX(2px); */
        }

        .kri-lb-row:last-child {
            border-bottom: 0;
        }

    .kri-lb-rank {
        width: 1.6rem;
        text-align: center;
        font-weight: 700;
        font-size: .85rem;
    }

    .kri-lb-av {
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: .72rem;
        flex-shrink: 0;
    }

    .kri-lb-pill {
        margin-left: auto;
        font-weight: 700;
        font-size: .78rem;
        padding: .28rem .6rem;
        border-radius: 1rem;
    }


    #rejHeatmapBody tr {
        transition: background-color .12s ease;
    }

        #rejHeatmapBody tr:hover {
            background: var(--phoenix-secondary-bg, #f5f7fa);
        }

    /* ===== Premium KPI stat tiles ===== */
    .stat-card {
        position: relative;
        overflow: hidden;
        border-radius: 14px !important;
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .stat-card::before {
            content: "";
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 4px;
            background: var(--sc);
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px -16px rgba(16, 26, 43, .40) !important;
        }

    .stat-ico {
        width: 3rem;
        height: 3rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        color: #fff;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--sc1), var(--sc2));
        box-shadow: 0 6px 14px -6px var(--sc2);
    }

    .stat-val {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .stat-lbl {
        font-size: .8rem;
        font-weight: 700;
        color: var(--phoenix-body-color);
    }

    .stat-sub {
        font-size: .7rem;
        color: var(--phoenix-secondary-color);
    }

    /* tint tokens */
    .stat-primary   { --sc:#1B6FE3; --sc1:#4a9bd4; --sc2:#1B6FE3; }
    .stat-info      { --sc:#3D8BEF; --sc1:#5aa0f2; --sc2:#2f6fd8; }
    .stat-success   { --sc:#3b9d7a; --sc1:#4fc09a; --sc2:#2c7a5e; }
    .stat-warning   { --sc:#e0a94a; --sc1:#f0c878; --sc2:#d08a2a; }
    .stat-danger    { --sc:#d16a63; --sc1:#e08a83; --sc2:#b1362e; }
    .stat-secondary { --sc:#8792ad; --sc1:#9aa6c0; --sc2:#6b7590; }

    /* ===== Chart card headers: small overline for the subtitle ===== */
    .card-header h4 + p.fs-9,
    .card-header .fs-9.text-body-tertiary {
        text-transform: none;
    }

    /* consistent chart card min-height rhythm */
    .echart-funnel-chart, .echart-trend-chart { min-height: 300px; }

    /* date + time cells */
    .dt-cell { display: flex; flex-direction: column; line-height: 1.15; }

    .dt-time {
        font-size: .68rem;
        font-weight: 600;
        color: var(--phoenix-secondary-color);
        font-variant-numeric: tabular-nums;
    }

    /* ===== Drill-down affordances ===== */
    .stat-card.is-drillable { cursor: pointer; }

        .stat-card.is-drillable .stat-go {
            margin-left: auto;
            font-size: 1.1rem;
            color: var(--phoenix-secondary-color);
            opacity: .35;
            transition: opacity .15s ease, transform .15s ease;
        }

        .stat-card.is-drillable:hover .stat-go {
            opacity: 1;
            transform: translateX(3px);
            color: var(--sc);
        }

    .drill-row, .dept-row { cursor: pointer; }

        .drill-row:hover > td, .dept-row:hover > td {
            background: var(--fid-accent-soft, #E7F0FE) !important;
        }

    /* charts are clickable */
    .echart-funnel-chart, .echart-workload-chart, .echart-trend-chart,
    .echart-kri-chart, .echart-rejection-chart { cursor: pointer; }

    /* ===== Stacked modals: history sits cleanly above the drill list ===== */
    #historyModal { z-index: 1075; }

    .modal-backdrop.hist-backdrop { z-index: 1070; opacity: .6; }

    #historyModal .modal-content {
        border: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 30px 70px -20px rgba(8, 20, 40, .55);
    }

    /* ===== Hero header ===== */
    .hist-hero {
        --hero: #1B6FE3;
        --hero-2: #0B4FB0;
        position: relative;
        display: flex;
        align-items: center;
        gap: .9rem;
        padding: 1.15rem 3rem 1.15rem 1.25rem;
        background: linear-gradient(135deg, var(--hero), var(--hero-2));
    }

        .hist-hero.tone-info { --hero: #4a9bd4; --hero-2: #1F6FA8; }
        .hist-hero.tone-warning { --hero: #e0a94a; --hero-2: #b9791d; }
        .hist-hero.tone-success { --hero: #3fae86; --hero-2: #256e54; }
        .hist-hero.tone-danger { --hero: #dd6b62; --hero-2: #a72f27; }
        .hist-hero.tone-secondary { --hero: #8792ad; --hero-2: #5b6577; }

    .hist-hero-icon {
        width: 2.9rem; height: 2.9rem; flex: 0 0 2.9rem;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,.18);
        color: #fff; font-size: 1.2rem;
    }

    .hist-hero-sub {
        font-size: .78rem; font-weight: 600;
        color: rgba(255,255,255,.85);
    }

    .hist-close { position: absolute; top: 1rem; right: 1rem; opacity: .9; }

    .hist-status {
        margin-left: auto;
        flex-shrink: 0;
        background: rgba(255,255,255,.2);
        color: #fff;
        font-size: .7rem; font-weight: 800;
        letter-spacing: .05em; text-transform: uppercase;
        padding: .3rem .7rem; border-radius: 20px;
        border: 1px solid rgba(255,255,255,.35);
        white-space: nowrap;
    }

    /* ===== Stage stepper ===== */
    .hist-steps { display: flex; margin-bottom: 1.4rem; }

    .hist-step {
        flex: 1; text-align: center; position: relative;
        font-size: .7rem; font-weight: 700;
        color: var(--phoenix-secondary-color);
    }

        /* connector line */
        .hist-step:not(:last-child):after {
            content: ""; position: absolute; top: 1rem; left: 50%; width: 100%;
            height: 3px; background: var(--phoenix-border-color); z-index: 0;
        }

        .hist-step.done:not(:last-child):after { background: #3fae86; }

        .hist-step .dot {
            position: relative; z-index: 1;
            width: 2.1rem; height: 2.1rem; margin: 0 auto .4rem;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--phoenix-body-bg);
            border: 3px solid var(--phoenix-border-color);
            color: var(--phoenix-secondary-color);
            font-size: .78rem;
        }

        .hist-step.done .dot { background: #3fae86; border-color: #3fae86; color: #fff; }
        .hist-step.done { color: #2c7a5e; }

        .hist-step.current .dot {
            background: #1B6FE3; border-color: #1B6FE3; color: #fff;
            box-shadow: 0 0 0 5px rgba(27,111,227,.18);
        }

        .hist-step.current { color: #0B4FB0; }

        .hist-step.bad .dot { background: #d1372e; border-color: #d1372e; color: #fff; }
        .hist-step.bad { color: #a72f27; }

    /* ===== Stat + person tiles ===== */
    .hist-stat {
        border: 1px solid var(--phoenix-border-color);
        border-radius: 12px; padding: .6rem .7rem; height: 100%;
        background: var(--phoenix-card-bg, #fff);
    }

        .hist-stat.tone-info { background: #EAF3FC; border-color: #cfe4f7; }
        .hist-stat.tone-success { background: #E7F6EF; border-color: #c7e9d9; }
        .hist-stat.tone-danger { background: #FCEBEA; border-color: #f5cfcc; }

    .hist-stat-lbl {
        font-size: .62rem; font-weight: 800; text-transform: uppercase;
        letter-spacing: .06em; color: var(--phoenix-secondary-color);
    }

    .hist-stat-val {
        font-size: 1.25rem; font-weight: 800; line-height: 1.2;
        color: var(--phoenix-body-emphasis-color); font-variant-numeric: tabular-nums;
    }

    .hist-stat.tone-success .hist-stat-val { color: #256e54; }
    .hist-stat.tone-danger .hist-stat-val { color: #a72f27; }
    .hist-stat.tone-info .hist-stat-val { color: #1F6FA8; }

    .hist-person {
        display: flex; align-items: center; gap: .6rem;
        border: 1px solid var(--phoenix-border-color);
        border-radius: 12px; padding: .55rem .7rem; height: 100%;
    }

    .hist-avatar {
        width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: var(--fid-accent-soft, #E7F0FE); color: var(--fid-accent-ink, #0B4FB0);
        font-size: .7rem; font-weight: 800;
    }

        .hist-avatar.alt { background: #EFEAFB; color: #5B3FA8; }

    /* ===== Section titles / findings ===== */
    .hist-sec-title {
        display: flex; align-items: center; gap: .45rem;
        font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
        color: var(--phoenix-secondary-color); margin-bottom: .55rem;
    }

        .hist-sec-title .fas { color: var(--fid-accent, #1B6FE3); }

    .hist-findings {
        border: 1px solid var(--phoenix-border-color);
        border-left: 3px solid var(--fid-accent, #1B6FE3);
        border-radius: 10px; padding: .7rem .85rem;
        background: var(--phoenix-secondary-bg, #f5f8fc);
    }

    /* ===== Timeline ===== */
    .hist-timeline { position: relative; padding-left: 30px; list-style: none; margin: 0; }

        .hist-timeline:before {
            content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
            width: 2px; background: var(--phoenix-border-color);
        }

        .hist-timeline .ti { position: relative; padding-bottom: 1rem; }

            .hist-timeline .ti:last-child { padding-bottom: 0; }

            .hist-timeline .ti .tdot {
                position: absolute; left: -30px; top: 1px;
                width: 24px; height: 24px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                font-size: .6rem; color: #fff;
                background: #8792ad;
                box-shadow: 0 0 0 3px var(--phoenix-body-bg);
            }

            .hist-timeline .ti.s-pending .tdot { background: #8792ad; }
            .hist-timeline .ti.s-progress .tdot { background: #1B6FE3; }
            .hist-timeline .ti.s-review .tdot { background: #7B5BD6; }
            .hist-timeline .ti.s-approved .tdot { background: #3fae86; }
            .hist-timeline .ti.s-rejected .tdot { background: #d1372e; }

            .hist-timeline .ti .tbody {
                background: var(--phoenix-secondary-bg, #f7f9fc);
                border: 1px solid var(--phoenix-border-color);
                border-radius: 10px; padding: .5rem .7rem;
            }

            .hist-timeline .ti.latest .tbody {
                background: var(--fid-accent-soft, #E7F0FE);
                border-color: color-mix(in srgb, var(--fid-accent, #1B6FE3) 30%, transparent);
            }

    [data-bs-theme="dark"] .hist-stat.tone-info { background: rgba(74,155,212,.14); border-color: rgba(74,155,212,.3); }
    [data-bs-theme="dark"] .hist-stat.tone-success { background: rgba(63,174,134,.14); border-color: rgba(63,174,134,.3); }
    [data-bs-theme="dark"] .hist-stat.tone-danger { background: rgba(221,107,98,.14); border-color: rgba(221,107,98,.3); }

/* ============================================================
   Dashboard motion polish — additive only (no markup/logic change).
   Scoped to the dashboard stylesheet; modals excluded.
   ============================================================ */

/* smoother, livelier hover on every card + KPI tile (hover-only = safe) */
.card { transition: box-shadow .18s ease, transform .18s ease; }
.stat-card .stat-ico { transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover .stat-ico { transform: translateY(-2px) scale(1.06) rotate(-3deg); box-shadow: 0 10px 20px -6px var(--sc2); }
.stat-card::before { transition: width .18s ease, box-shadow .18s ease; }
.stat-card:hover::before { width: 6px; box-shadow: 0 0 14px 0 var(--sc); }

@media (prefers-reduced-motion: no-preference) {

    /* section/chart cards fade up once on load — never modals */
    .card { animation: dashFade .55s ease both; }
    .modal .card { animation: none !important; }

    /* KPI tiles rise in with a stagger (replays on each refresh render) */
    .stat-card { animation: dashRise .5s cubic-bezier(.2,.7,.3,1) both; }
    #backlogRow > [class*="col"]:nth-child(1) .stat-card { animation-delay: .04s; }
    #backlogRow > [class*="col"]:nth-child(2) .stat-card { animation-delay: .10s; }
    #backlogRow > [class*="col"]:nth-child(3) .stat-card { animation-delay: .16s; }
    #backlogRow > [class*="col"]:nth-child(4) .stat-card { animation-delay: .22s; }
    #backlogRow > [class*="col"]:nth-child(5) .stat-card { animation-delay: .28s; }

    /* one-time light sheen sweeping across each KPI tile as it appears */
    .stat-card::after {
        content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
        background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.35) 48%, transparent 64%);
        transform: translateX(-120%);
        animation: dashSheen 1.15s ease .45s 1;
    }

    /* keep the "oldest open task" warning tile gently pulsing to draw the eye */
    .stat-warning .stat-ico { animation: dashPulse 2.6s ease-in-out infinite; }
}

@keyframes dashRise  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dashFade  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dashSheen { to { transform: translateX(120%); } }
@keyframes dashPulse {
    0%,100% { box-shadow: 0 6px 14px -6px var(--sc2); }
    50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sc) 22%, transparent), 0 6px 14px -6px var(--sc2); }
}