/* ============================================================================
   Attendance dashboard — data-quality banner + KPI strip
   (design_handoff CLAUDE-DEPLOY.md / attendance-dashboard-populated.html)
   ----------------------------------------------------------------------------
   Scoped to #attendance_executive, the tab pane id the dashboard already uses.
   Inside @media screen — the pane is printed from the dashboard's own controls.

   The brief's rules that this file implements:
     · card radius 12px, border #e8eaf0, shadow 0 1px 2px rgba(20,26,45,.04)
     · micro-labels mono uppercase 9–9.5px, letter-spacing .6–.8px
     · numerals IBM Plex Mono with tabular-nums
     · colour carries meaning only — green present, red absent, amber warning,
       ink totals. No decorative hues.
   ============================================================================ */

@media screen {

  /* ── Data-quality banner ──────────────────────────────────────────────── */
  /* Rendered only when there is a problem (see the view). Amber, not red: this
     is "check this before you trust the numbers", not "something has failed". */

  #attendance_executive .aq-banner {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f0d9b5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 26, 45, .04);
    padding: 13px 16px 14px 19px;
    margin-bottom: 12px;
  }
  #attendance_executive .aq-banner__rule {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #d08b2c;
  }
  #attendance_executive .aq-banner__text {
    font: 400 11.5px/1.55 var(--pt-font, inherit);
    color: var(--pt-text-2, #3c4257);
    margin-top: 7px;
  }
  #attendance_executive .aq-banner__text b {
    font-family: var(--pt-mono, ui-monospace, monospace);
    font-weight: 600;
    color: var(--pt-text, #151a2d);
  }
  /* The caveat is part of the claim, so it sits inline rather than as a
     footnote — but quieter, because it qualifies rather than states. */
  #attendance_executive .aq-note { color: var(--pt-muted-2, #a3aabb); }
  #attendance_executive .aq-banner__acts { display: flex; gap: 8px; margin-top: 11px; }
  #attendance_executive .aq-btn {
    display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
    border-radius: 7px; border: 1px solid var(--pt-border, #e8eaf0);
    background: #fff;
    font: 500 11.5px var(--pt-font, inherit);
    color: var(--pt-text-2, #3c4257);
    text-decoration: none;
  }
  #attendance_executive .aq-btn:hover { background: var(--pt-page, #f6f8fb); color: var(--pt-text, #151a2d); }

  /* ── KPI strip ────────────────────────────────────────────────────────── */
  /* Six tiles sharing hairlines: 1px gap over a border-coloured ground, so the
     dividers never double up where the panels meet. */

  #attendance_executive .aq-kpi {
    display: grid;
    /* 7 tiles: rate, present, absent, late, leave, below-75%, marked.
       Was 6 before "Marked" was added from the design handoff. Kept as an exact column count
       rather than auto-fit because this container's own background IS the grid-line colour,
       so any cell the tiles do not fill renders as a grey block rather than as nothing. */
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--pt-border, #e8eaf0);
    border: 1px solid var(--pt-border, #e8eaf0);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  #attendance_executive .aq-kpi > div {
    background: #fff;
    padding: 12px 15px 13px;
    position: relative;
    overflow: hidden;
  }
  #attendance_executive .aq-kpi__rule {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--pt-danger, #d64545);
  }

  #attendance_executive .aq-lbl {
    font: 500 9px var(--pt-mono, ui-monospace, monospace);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--pt-muted-2, #a3aabb);
  }

  #attendance_executive .aq-kpi__val {
    font: 600 24px var(--pt-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    color: var(--pt-text, #151a2d);
    letter-spacing: -.8px;
    margin-top: 6px;
    line-height: 1;
  }
  #attendance_executive .aq-kpi__val small {
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-muted, #8d94a8);
    letter-spacing: 0;
  }
  /* Colour carries meaning only. */
  #attendance_executive .aq-kpi__val.ok   { color: var(--pt-ok, #1f9d64); }
  #attendance_executive .aq-kpi__val.bad  { color: var(--pt-danger, #d64545); }
  #attendance_executive .aq-kpi__val.warn { color: var(--pt-warn-text, #8a5a1b); }

  #attendance_executive .aq-kpi__note {
    font: 400 10.5px var(--pt-font, inherit);
    color: var(--pt-muted, #8d94a8);
    margin-top: 6px;
  }
  #attendance_executive .aq-kpi__note.up   { color: var(--pt-ok, #1f9d64); }
  #attendance_executive .aq-kpi__note.down { color: var(--pt-danger, #d64545); }

  /* ── The brief's typography rules, applied to the existing panels ─────── */

  #attendance_executive table { font-variant-numeric: tabular-nums; }
  #attendance_executive table tbody td { font-family: var(--pt-mono, ui-monospace, monospace); }
  #attendance_executive table tbody td:first-child,
  #attendance_executive table tbody td.nm { font-family: var(--pt-font, inherit); }

  /* Nil vs zero. A real zero is grey; a value that does not apply is a faint
     dot. Neither is ever coloured — colour is reserved for meaning. */
  #attendance_executive .aq-nil { color: #dde1ea; }
  #attendance_executive table tbody td.text-muted { color: #b9c0cd; }

  @media (max-width: 1180px) {
    #attendance_executive .aq-kpi { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 720px) {
    #attendance_executive .aq-kpi { grid-template-columns: repeat(2, 1fr); }
  }

}
/* end @media screen */