/* ============================================================================
   Executive dashboards — UI upgrade (design_handoff staff-dashboard.html /
   student-dashboard.html)
   ----------------------------------------------------------------------------
   CONTENT IS UNCHANGED. No markup was edited and no figure recomputed.

   Applied to .ems-bi, which is the shared shell for ALL SIX executive
   dashboards — Student, Staff, Exam, Attendance, Financial, Front Office —
   plus the college landing page. That is deliberate: the staff and student
   handoffs specify the same visual language, and six near-identical panes
   restyled six times is six chances to drift. One layer, one look.

   What the handoff changes, and why:

     · MICRO-LABELS BECOME MONO UPPERCASE. In the design every KPI label is
       9.5px IBM Plex Mono with .8px tracking. That reads as a field name rather
       than as prose, which is what lets the eye skip past it to the number.
     · THE HEADLINE NUMBER GETS BIGGER AND TIGHTER — 36px in the design against
       21px here, with -1.3px tracking. A KPI wall is scanned, not read; the
       figure has to win against its own label.
     · FIGURES ARE MONO AND TABULAR throughout, so a column of them lines up.
     · Panels lose a little roundness (12px, not 13/14) and take the design's
       lighter hairline, so cards sit quietly under the data.

   Inside @media screen. These panes are printed from the dashboard's own print
   controls and _bi_styles.php carries its own print rules.
   ============================================================================ */

@media screen {

  /* ── KPI tiles ────────────────────────────────────────────────────────── */

  .ems-bi.ems-bi.ems-bi .bi-kpi {
    border-radius: 12px;
    border-color: #e8eaf0;
    box-shadow: 0 1px 2px rgba(20, 26, 45, .04);
    padding: 14px 16px 15px;
  }

  .ems-bi.ems-bi.ems-bi .bi-kpi-lbl {
    font-family: var(--pt-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8d94a8;
  }

  .ems-bi.ems-bi.ems-bi .bi-kpi-val {
    font-family: var(--pt-font, inherit);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -1.1px;
    color: #151a2d;
    font-variant-numeric: tabular-nums;
  }
  /* The qualifier after a headline figure ("of 178 on roll", "%") is supporting
     detail and must not compete with it. */
  .ems-bi.ems-bi.ems-bi .bi-kpi-val small {
    font-family: var(--pt-font, inherit);
    font-size: 12.5px;
    font-weight: 400;
    color: #8d94a8;
    letter-spacing: 0;
  }

  .ems-bi.ems-bi.ems-bi .bi-kpi-sub {
    font-size: 11px;
    color: #8d94a8;
    margin-top: 6px;
  }

  /* The tinted icon chip is dropped. With a mono uppercase label already naming
     the field, the icon is a second label for the same thing — and twelve
     coloured chips across a KPI wall is the loudest layer on the screen. */
  .ems-bi.ems-bi.ems-bi .bi-kpi-ic { display: none; }

  /* ── Section headings ─────────────────────────────────────────────────── */

  .ems-bi.ems-bi.ems-bi .bi-sec {
    font-family: var(--pt-mono, ui-monospace, Menlo, monospace);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .8px;
    color: #a3aabb;
  }
  .ems-bi.ems-bi.ems-bi .bi-sec small { font-family: var(--pt-font, inherit); color: #a3aabb; }

  /* ── Panels ───────────────────────────────────────────────────────────── */

  .ems-bi.ems-bi.ems-bi .bi-card {
    border-radius: 12px;
    border-color: #e8eaf0;
    box-shadow: 0 1px 2px rgba(20, 26, 45, .04);
  }
  .ems-bi.ems-bi.ems-bi .bi-card:hover { border-color: #dfe3ed; box-shadow: 0 4px 14px rgba(20, 26, 45, .06); }
  .ems-bi.ems-bi.ems-bi .bi-card > h6 {
    font-family: var(--pt-font, inherit);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.1px;
    color: #151a2d;
  }

  /* ── Tables inside the panes ──────────────────────────────────────────── */

  .ems-bi.ems-bi.ems-bi table { font-variant-numeric: tabular-nums; }
  .ems-bi.ems-bi.ems-bi table thead th {
    font-family: var(--pt-mono, ui-monospace, Menlo, monospace) !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #6b7288 !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eaf0 !important;
    padding: 8px 12px !important;
  }
  .ems-bi.ems-bi.ems-bi table tbody td {
    font-family: var(--pt-mono, ui-monospace, Menlo, monospace);
    font-size: 12px;
    color: #151a2d;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle;
  }
  /* Names, subjects and departments are prose. */
  .ems-bi.ems-bi.ems-bi table tbody td:first-child,
  .ems-bi.ems-bi.ems-bi table tbody td.nm,
  .ems-bi.ems-bi.ems-bi table tbody td.text-left {
    font-family: var(--pt-font, inherit);
    font-weight: 500;
    text-align: left;
  }
  .ems-bi.ems-bi.ems-bi table tbody tr:hover td { background: #fafbfd; }

  /* ── Empty states ─────────────────────────────────────────────────────── */
  /* An empty panel should say so quietly; it is a data state, not a failure. */
  /* ── Empty chart panels ───────────────────────────────────────────────────
     The brief's rule is "never render an empty chart" — a panel with no data
     states the reason instead. That is what .bi-empty already does; this gives
     it the shape of a held-open slot rather than a stray line of grey text, so
     an empty panel reads as "nothing to show yet" and not as a broken chart. */

  .ems-bi.ems-bi.ems-bi .bi-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 14px 16px;
    text-align: center;
    font: 400 11.5px var(--pt-font, inherit);
    color: #a3aabb;
    background: #fbfcfe;
    border: 1px dashed #e8eaf0;
    border-radius: 10px;
  }

  /* ── Chart plot areas ─────────────────────────────────────────────────────
     ECharts draws its own type, so the frame is all CSS can carry here: the
     canvas sits flush in the card with the panel's rhythm around it. */

  .ems-bi.ems-bi.ems-bi .bi-chart { border-radius: 10px; overflow: hidden; }

  /* A chart's caption is a micro-label, matching the tables and KPI tiles. */
  .ems-bi.ems-bi.ems-bi .bi-card > h6 small {
    font: 500 9px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #a3aabb;
  }

  /* ── Filter bar ───────────────────────────────────────────────────────── */

  .ems-bi.ems-bi.ems-bi .bi-hero .form-control {
    border-radius: 8px;
    border-color: #e8eaf0;
    font-size: 12px;
  }
  .ems-bi.ems-bi.ems-bi .bi-hero .form-control:focus {
    border-color: var(--pt-primary, #2f5fd0);
    box-shadow: 0 0 0 3px rgba(47, 95, 208, .14);
  }
  .ems-bi.ems-bi.ems-bi .bi-hero h2 { font-size: 17px; font-weight: 600; letter-spacing: -.35px; color: #151a2d; }
  .ems-bi.ems-bi.ems-bi .bi-hero small { font-size: 11.5px; color: #8d94a8; }

  @media (max-width: 720px) {
    .ems-bi.ems-bi.ems-bi .bi-kpi-val { font-size: 24px; letter-spacing: -.8px; }
  }

}
/* end @media screen */

/* ============================================================================
   Grouped column bands on the registers (staff-dashboard.html /
   student-dashboard.html)
   ----------------------------------------------------------------------------
   The staff register carries ten columns and the student register twelve, each
   answering several different questions. The band names the question a run of
   columns belongs to, so the header reads as groups rather than as one long
   list. Column COUNT is unchanged — this is a header row, not a data change.
   ============================================================================ */

@media screen {

  .ems-bi.ems-bi.ems-bi table thead tr.grp th {
    font-family: var(--pt-font, inherit) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #151a2d !important;
    /* The band sits on the SURFACE, not the tinted band the column names use —
       two stacked header rows on the same tint read as one block and the
       grouping is lost. */
    background: #fff !important;
    text-align: center !important;
    padding: 9px 12px 4px !important;
    border-bottom: 1px solid #dfe5f1 !important;
  }
  .ems-bi.ems-bi.ems-bi table thead tr.grp th:first-child {
    background: #fff !important;
    border-bottom-color: transparent !important;
  }

  /* A hairline at each group's first column, carried down the body, so the
     groups stay legible once the eye is deep in the rows. */
  .ems-bi.ems-bi.ems-bi table thead th.edge,
  .ems-bi.ems-bi.ems-bi table tbody td.edge { border-left: 1px solid #e3e9f3 !important; }
  .ems-bi.ems-bi.ems-bi table thead tr.grp th.edge { border-left-color: #c9d3e6 !important; }

}