/* CM001 kit — dashboard.css. The CM022 dashboard.
 *
 * Deliberately small. The dashboard is built almost entirely from pieces that already exist —
 * .kpis / .kpi / .panel / .table / .ppm-bar / .chip — so this file only adds the greeting header and
 * the few things a KPI needs in order to become a link. Everything is a theme token, so the Design
 * Studio restyles the dashboard along with the rest of the platform.
 */
@layer cm.components {

  /* ------------------------------ greeting ------------------------------ */
  .dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-block-end: 18px; }
  .dash-spacer { flex: 1 1 auto; }
  .dash-hi { margin: 0; font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; letter-spacing: -.01em; }
  .dash-sub { margin: 3px 0 0; color: var(--text-2); font-size: 13.5px; }

  /* --------------------------- KPI as a link ---------------------------- */
  /* .kpi already carries the card treatment and the hover lift from animate.css; these rules only
     stop an <a> from looking like a link and keep the tile keyboard-reachable. */
  a.dash-kpi { display: block; text-decoration: none; color: inherit; }
  a.dash-kpi:hover { border-color: var(--brand); }
  a.dash-kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Tone is never carried by colour alone — the number changes colour, and the sub-line under it
     always says what the number means ("3 breached", "2 on hold"). */
  .k-val.dash-warn { color: var(--warn); }
  .k-val.dash-danger { color: var(--danger); }

  .k-val.dash-brand { color: var(--brand); }
  .k-val.dash-ok { color: var(--ok, #16a34a); }

  /* ---- main dashboard: live indicator, job-order charts, recent tables ---- */
  .cm-dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
  .cm-dash-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #16a34a); }
  .cm-dash-live.is-on .dot { animation: cm-dash-pulse 2.4s ease-out infinite; }
  @keyframes cm-dash-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok, #16a34a) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  .cm-dash-body.is-refreshing { opacity: .55; transition: opacity .12s; }

  .cm-dash-jo { display: grid; gap: 18px; }
  .cm-dash-jo-charts { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
  .cm-dash-chart { display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .cm-dash-chart.cm-dash-gauge { flex-direction: row; gap: 20px; align-items: center; }
  .cm-dash-gauge-in { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .cm-dash-mttr .k-val { font-size: 22px; font-weight: 700; }
  .cm-dash-aging { display: grid; gap: 8px; }
  .cm-dash-agerow { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; }
  .cm-dash-agelbl { font-size: 12px; color: var(--text-2); }
  .cm-dash-agen { text-align: right; font-weight: 700; font-size: 13px; }

  .cm-dash-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
  .cm-dash-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .cm-dash-recent-head a { text-decoration: none; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }

  @media (max-width: 640px) {
    .dash-head { align-items: flex-start; }
    .dash-head > .faint { order: -1; }
    .cm-dash-jo-charts { gap: 16px; justify-content: center; }
    .cm-dash-agerow { grid-template-columns: 72px 1fr 28px; }
  }
}