/* AI Cloud component plugin: Dashboards */
/* ===== FullCalendar ===== */


/* ===== Dashboard ===== */
.page-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

/* .page-header-actions moved to navigation-shell (1.0.81). It is page CHROME, not a
   dashboard surface — it only ever lived here by accident, and every module's overview
   page depended on the dashboards component for its header layout. The shell owns the
   header now (PageHeader + .mp-appbar); the legacy class survives there for views that
   have not been migrated. */

.page-subtitle{
    margin:10px 0 0 0;
    color:var(--muted);
    font-size:var(--mp-fs-md,14px);
    font-weight:var(--mp-fw-semibold,600);
}

.dashboard-kpis{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}

.kpi-card{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:118px;
    padding:22px;
    border-radius:5px;
    border:1px solid var(--border);
    background:
        radial-gradient(circle at top right,var(--mp-hl-10),transparent 34%),
        linear-gradient(180deg,var(--mp-fill-055),var(--mp-fill-025));
    box-shadow:0 18px 42px var(--mp-sh-18);
}

.kpi-icon{
    width:46px;
    height:46px;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--mp-hl-10);
    border:1px solid var(--mp-hl-18);
    color:var(--mp-ink-brand);
    flex-shrink:0;
}

.kpi-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.kpi-card strong{
    display:block;
    color:var(--text);
    font-size:38px;
    line-height:var(--mp-lh-none,1);
    letter-spacing:var(--mp-ls-tighter,-0.03em);
    font-weight:var(--mp-fw-black,900);
}

/* THE TEXT SPANS, NOT THE GLYPH WELL. This was `.kpi-card span`, which is every span in the
   card — and mp_nav_icon() renders its glyph inside <span class="nav-icon">, so two of the four
   tiles had their icon painted --muted by the rule that styles the LABEL under the figure. The
   tiles calling mp_icon() emit a bare <svg> and were unaffected, which is why one row carried two
   tones that nothing in the tree had chosen.

   .kpi-aside is unaffected either way: it is an <em> INSIDE the span, and its own rule below
   states its colour, so nothing here is inherited by it. */
.kpi-card > :not(.kpi-icon) > span{
    display:block;
    color:var(--muted);
    font-size:var(--mp-fs-md,14px);
    font-weight:var(--mp-fw-heavy,800);
    letter-spacing:var(--mp-ls-wide,0.04em);
    text-transform:uppercase;
}

/* The excluded population, named on the same line as the figure that excludes it. Quiet and
   non-italic: it is a second fact, not an aside about the first. */
.kpi-card .kpi-aside{
    font-style:normal;
    color:var(--mp-ink-soft-62);
    font-weight:var(--mp-fw-bold,700);
    letter-spacing:var(--mp-ls-normal,0);
    text-transform:none;
}

.kpi-danger{
    background:
        radial-gradient(circle at top right,var(--mp-rose-14),transparent 34%),
        linear-gradient(180deg,var(--mp-fill-055),var(--mp-fill-025));
}

.kpi-danger .kpi-icon{
    background:var(--mp-danger-10);
    border-color:var(--mp-rose-20);
    color:var(--mp-danger-ink);
}

.dashboard-queue-card{padding:24px!important}

.section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:20px;
}

.dashboard-table td:first-child strong{display:block;color:var(--text);font-weight:var(--mp-fw-heavy,800)}
.dashboard-table td:first-child small{
    display:block;
    margin-top:5px;
    color:var(--mp-ink-dim);
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-heavy,800);
    text-transform:uppercase;
    letter-spacing:var(--mp-ls-wider,0.08em);
}

.dashboard-table tbody tr{transition:.14s ease}
.dashboard-table tbody tr:hover{background:var(--mp-fill-035)}

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:120px;
    color:var(--muted);
    text-align:center;
}

.empty-state strong{color:var(--text);font-size:var(--mp-fs-xl,18px)}
.empty-state span{font-size:var(--mp-fs-md,14px)}

/* Calendar module */
#planner-calendar,
.mp-calendar-wrap{
    min-height:620px;
}