/* ============================================================================
   Financial Executive Dashboard — UI/UX pass
   (design_handoff financial-dashboard.html)
   ----------------------------------------------------------------------------
   Scoped to #bi_financial, the pane id the dashboard already uses. Every rule
   is presentation only: no markup, no data, no query, no voucher, ledger or
   report behaviour is touched by this file.

   Everything sits inside @media screen. The pane is printed through the
   dashboard's own print path, so print output is bit-for-bit unchanged.

   The brief's rules implemented here:
     · card radius 12px, border #e8eaf0, shadow 0 1px 2px rgba(20,26,45,.04)
     · card gaps 12px
     · micro-labels mono uppercase 9–9.5px, letter-spacing .6–.8px
     · numerals IBM Plex Mono with tabular-nums, right-aligned in tables
     · colour carries meaning only — green collected, red owed, amber warning,
       ink totals. No decorative hues.

   Selectors lead with #bi_financial so they outrank the class-level rules in
   the view's own inline <style>, which the dashboard injects over AJAX.
   ============================================================================ */

@media screen {

  /* ── Shared shell ─────────────────────────────────────────────────────── */

  #bi_financial {
    --fx-ink:    var(--pt-text,    #151a2d);
    --fx-ink-2:  var(--pt-text-2,  #3c4257);
    --fx-muted:  var(--pt-muted,   #8d94a8);
    --fx-faint:  var(--pt-muted-2, #a3aabb);
    --fx-line:   var(--pt-border,  #e8eaf0);
    --fx-ground: var(--pt-page,    #f6f8fb);
    --fx-ok:     var(--pt-ok,      #1f9d64);
    --fx-bad:    var(--pt-danger,  #d64545);
    --fx-warn:   #d98800;
    --fx-warn-t: var(--pt-warn-text, #8a5a00);
    --fx-mono:   var(--pt-mono, ui-monospace, 'IBM Plex Mono', monospace);
    --fx-sans:   var(--pt-font, inherit);
  }

  /* Cards. One radius, one border, one shadow — applied once, inherited by
     every panel rather than restated per panel. */
  #bi_financial .bi-card {
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 26, 45, .04);
  }

  /* The brief's 12px rhythm. The grid owns the spacing so panels never carry
     margins that collapse against each other. */
  #bi_financial .bi-charts { gap: 12px; }
  #bi_financial .bi-charts > * { margin-bottom: 0; }

  /* Section headers: the label is the quiet part, the panel is the loud part. */
  #bi_financial .bi-sec {
    font: 600 12.5px var(--fx-sans);
    color: var(--fx-ink);
    letter-spacing: -.1px;
  }
  #bi_financial .bi-sec small,
  #bi_financial .bi-sec .t {
    font: 500 9.5px var(--fx-mono);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fx-faint);
  }

  /* ── Executive cockpit band ───────────────────────────────────────────── */

  #bi_financial .fxh {
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 26, 45, .04);
  }
  #bi_financial .fxh .lbl {
    font: 500 9.5px var(--fx-mono);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fx-faint);
  }
  /* The headline number. Tabular figures so it doesn't reflow as it updates. */
  #bi_financial .fxh .big {
    font: 600 30px var(--fx-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1.1px;
    color: var(--fx-ink);
    line-height: 1.06;
  }
  #bi_financial .fxh .big small {
    font: 500 12.5px var(--fx-sans);
    letter-spacing: 0;
    color: var(--fx-muted);
    margin-left: 7px;
  }

  /* Progress rail: collected against billed. Green because it is money in. */
  #bi_financial .fxh-bar {
    background: var(--fx-ground);
    border-radius: 999px;
    overflow: hidden;
  }
  #bi_financial .fxh-bar > i { background: var(--fx-ok); border-radius: 999px; }

  #bi_financial .fxh-sub {
    font: 400 11.5px var(--fx-sans);
    color: var(--fx-muted);
  }
  #bi_financial .fxh-sub b {
    font-family: var(--fx-mono);
    font-weight: 600;
    color: var(--fx-ink);
  }
  /* Outstanding is owed money, so it is red — the one place red appears in
     this band, which is what makes it read. */
  #bi_financial .fxh-sub .neg { color: var(--fx-bad); font-weight: 500; }

  /* Chips share hairlines: a 1px gap over a border-coloured ground, so the
     dividers never double up where two chips meet. */
  #bi_financial .fxh-chips {
    gap: 1px;
    background: var(--fx-line);
    border: 1px solid var(--fx-line);
    border-radius: 10px;
    overflow: hidden;
  }
  #bi_financial .fxh-chip { background: #fff; padding: 10px 13px 11px; }
  #bi_financial .fxh-chip .v {
    font: 600 17px var(--fx-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    color: var(--fx-ink);
    line-height: 1.1;
  }
  #bi_financial .fxh-chip .k {
    font: 500 9px var(--fx-mono);
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--fx-faint);
    margin-top: 5px;
  }

  /* Paid / pending / overdue segment bar. */
  #bi_financial .fx-seg {
    border-radius: 999px;
    overflow: hidden;
    background: var(--fx-ground);
  }
  #bi_financial .fx-leg {
    font: 400 10.5px var(--fx-sans);
    color: var(--fx-muted);
  }
  #bi_financial .fx-leg b {
    font-family: var(--fx-mono);
    font-weight: 600;
    color: var(--fx-ink-2);
  }
  #bi_financial .fx-leg .dot { border-radius: 50%; }

  /* ── Smart alerts / needs action ──────────────────────────────────────── */
  /* Amber, not red: these say "look at this", not "something has failed".
     The left rule carries the severity so the card itself stays calm. */

  #bi_financial .fx-alerts .bi-card,
  #bi_financial .fx-alerts > div {
    position: relative;
    overflow: hidden;
  }
  #bi_financial .fx-alerts .t {
    font: 500 9.5px var(--fx-mono);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fx-warn-t);
  }
  #bi_financial .fx-alerts .v {
    font: 600 20px var(--fx-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.6px;
    color: var(--fx-ink);
  }
  #bi_financial .fx-alerts .k,
  #bi_financial .fx-alerts .c {
    font: 400 11px var(--fx-sans);
    color: var(--fx-muted);
  }

  /* ── Receivable aging ─────────────────────────────────────────────────── */
  /* Debt gets redder as it gets older. That is the whole point of the panel,
     so the ramp is explicit rather than a single flat accent. */

  #bi_financial .fx-age .bar { border-radius: 5px; overflow: hidden; }
  #bi_financial .fx-age .lbl,
  #bi_financial .fx-age .k {
    font: 500 9px var(--fx-mono);
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--fx-faint);
  }
  #bi_financial .fx-age .v {
    font: 600 13px var(--fx-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fx-ink);
  }

  /* ── Tables ───────────────────────────────────────────────────────────── */
  /* Names in the sans face, every figure in mono with tabular figures and
     right-aligned, so columns of money line up on the decimal. */

  #bi_financial .fx-tbl,
  #bi_financial table { font-variant-numeric: tabular-nums; }

  #bi_financial .fx-tbl thead th,
  #bi_financial table thead th {
    font: 500 9px var(--fx-mono);
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--fx-faint);
    border-bottom: 1px solid var(--fx-line);
    white-space: nowrap;
  }
  #bi_financial .fx-tbl tbody td,
  #bi_financial table tbody td {
    font-family: var(--fx-mono);
    font-size: 11.5px;
    color: var(--fx-ink-2);
    border-top: 1px solid var(--fx-line);
  }
  /* The first column is a name, not a number. */
  #bi_financial .fx-tbl tbody td:first-child,
  #bi_financial table tbody td.nm,
  #bi_financial table tbody td:first-child {
    font-family: var(--fx-sans);
    color: var(--fx-ink);
    font-weight: 500;
  }
  #bi_financial .fx-tbl tbody tr:hover td,
  #bi_financial table tbody tr:hover td { background: var(--fx-ground); }

  /* Totals are ink — the summary of the column, never a colour of their own. */
  #bi_financial .fx-tot td,
  #bi_financial tr.fx-tot td {
    font-weight: 600;
    color: var(--fx-ink);
    background: var(--fx-ground);
    border-top: 1px solid var(--fx-line);
  }

  /* Money direction. Collected is green, owed is red — and nothing else in a
     table is coloured, which is what keeps these two legible. */
  #bi_financial .fx-tbl .go,
  #bi_financial .go  { color: var(--fx-ok); }
  #bi_financial .fx-tbl .neg,
  #bi_financial .neg { color: var(--fx-bad); }

  /* Nil vs zero. A real zero is grey; a value that does not apply is a faint
     dot. Neither is ever coloured. */
  #bi_financial .fx-nil,
  #bi_financial td .mini { color: #dde1ea; }
  #bi_financial table tbody td.text-muted { color: #b9c0cd; }

  /* Inline collection-rate rail inside table rows. */
  #bi_financial .fx-prog {
    background: var(--fx-ground);
    border-radius: 999px;
    overflow: hidden;
  }
  #bi_financial .fx-prog > i { border-radius: 999px; }

  /* ── Class watch / defaulter watchlist ────────────────────────────────── */

  #bi_financial .fx-watch .r { border-top: 1px solid var(--fx-line); }
  #bi_financial .fx-watch .r:first-child { border-top: 0; }
  #bi_financial .fx-watch .nm {
    font: 500 12px var(--fx-sans);
    color: var(--fx-ink);
  }
  #bi_financial .fx-watch .c,
  #bi_financial .fx-watch .k {
    font: 400 10.5px var(--fx-sans);
    color: var(--fx-muted);
  }
  #bi_financial .fx-watch .v {
    font: 600 12.5px var(--fx-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fx-ink);
  }
  #bi_financial .fx-watch .v.neg { color: var(--fx-bad); }

  /* ── Chart panels ─────────────────────────────────────────────────────── */
  /* ECharts stays as it is — this only settles the frame around it. */

  #bi_financial .bi-chart { border-radius: 12px; }
  #bi_financial .bi-empty {
    font: 400 11.5px var(--fx-sans);
    color: var(--fx-faint);
    background: var(--fx-ground);
    border: 1px dashed var(--fx-line);
    border-radius: 10px;
  }

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

  #bi_financial .bi-filter-form .form-control,
  #bi_financial .bi-filter-form .form-control-sm {
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--fx-line);
    font: 500 11.5px var(--fx-sans);
    color: var(--fx-ink-2);
    box-shadow: none;
  }
  #bi_financial .bi-filter-form .form-control:focus {
    border-color: #c8cdd8;
    box-shadow: 0 0 0 3px rgba(20, 26, 45, .05);
  }
  #bi_financial .bi-crumb .c {
    font: 500 10.5px var(--fx-sans);
    color: var(--fx-ink-2);
    background: var(--fx-ground);
    border: 1px solid var(--fx-line);
    border-radius: 999px;
    padding: 3px 9px;
  }
  #bi_financial .bi-crumb .c a { color: var(--fx-faint); text-decoration: none; }
  #bi_financial .bi-crumb .c a:hover { color: var(--fx-bad); }

  #bi_financial .bi-tools .btn,
  #bi_financial .bi-tools .btn-light {
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--fx-line);
    background: #fff;
    font: 500 11.5px var(--fx-sans);
    color: var(--fx-ink-2);
    box-shadow: none;
  }
  #bi_financial .bi-tools .btn:hover { background: var(--fx-ground); color: var(--fx-ink); }

  /* ── Narrow screens ───────────────────────────────────────────────────── */

  @media (max-width: 1180px) {
    #bi_financial .fxh-chips { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    #bi_financial .fxh .big { font-size: 25px; }
    #bi_financial .fxh-chips { grid-template-columns: 1fr; }
  }

}
/* end @media screen */