/* Facturacion tab -- every selector is namespaced .bl-* so nothing here can
   reach the Cost Tracker or Services Log markup in dashboard.html.

   Colors: only the Trion design-system tokens dashboard.html already defines
   (--paper --paper-alt --ink --ink-soft --line --line-strong --red --red-text
   --radius --shadow) plus the three semaphore colors below, in the design
   system's own status hues (docs/design-system/README.md: green, amber, and
   red = --status-red #C00000, i.e. --red here).

   The README's light-mode green (#2E9E4F) and amber (#B4790A) are only
   3.43:1 and 3.70:1 against white -- fine for a 10px dot, but these same
   vars also color small text (.bl-warn, .bl-badge), so light mode uses
   darker shades of the same hues at 5.37:1 and 5.00:1 (WCAG AA for body
   text). Dark mode's lifted variants already clear AA on the navy paper
   (7.97:1 / 7.73:1 / 6.14:1) -- same html[data-theme="dark"] selector the
   page uses. */

:root{
  --bl-green:#1F7A3D;
  --bl-amber:#9A6400;
  --bl-red:var(--red);
  /* Banner-only tokens: white text sits directly on these as a background,
     so both themes use the light-mode hues (>=4.5:1 for white text). The
     lighter dark-mode --bl-red/--bl-amber above are fine for text/dots but
     only ~2.1-2.6:1 for white text on a filled bar, so the banner does not
     use them. */
  --bl-alertbar-red:#C00000;
  --bl-alertbar-amber:#9A6400;
}
html[data-theme="dark"]{
  --bl-green:#4CC77A;
  --bl-amber:#E0A33A;
  --bl-red:var(--red-text);
}

/* ---------- alarm banner (dashboard.html, outside #billingRoot) ---------- */

.bl-alertbar{
  font-family:'Inter',-apple-system,sans-serif;
  font-size:12.5px; font-weight:600; color:#fff;
  padding:8px 24px; cursor:pointer; text-align:center;
}
.bl-alertbar[hidden]{ display:none; }
.bl-alertbar-red{ background:var(--bl-alertbar-red); }
.bl-alertbar-amber{ background:var(--bl-alertbar-amber); }

/* ---------- layout ---------- */

.bl-root{ font-family:'Inter',-apple-system,sans-serif; color:var(--ink); }
.bl-msg{ padding:16px 0; font-size:13px; color:var(--ink-soft); }
.bl-msg.bl-error{ color:var(--red-text); }
.bl-msg .bl-btn{ margin-left:10px; }

/* ---------- KPIs ---------- */

.bl-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
  margin-bottom:18px;
}
.bl-kpi{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  min-width:0;
}
.bl-kpi-label{
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; display:block; margin-bottom:6px;
}
.bl-kpi-value{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:20px;
  color:var(--ink); line-height:1.15; overflow-wrap:anywhere;
}
.bl-kpi.bl-tone-red .bl-kpi-value{ color:var(--bl-red); }
.bl-kpi.bl-tone-amber .bl-kpi-value{ color:var(--bl-amber); }
.bl-kpi-sub{ font-size:11px; color:var(--ink-soft); margin-top:4px; }
.bl-kpi-line{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; }

/* ---------- KPI history ---------- */
.bl-kpibar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.bl-kpihist-closed{ font-size:11px; color:var(--ink-soft); }
.bl-kpihist-close{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ---------- PO Funds ---------- */
/* Collapsible summary of PO budgets (imported from SAP's own PO-list
   export) vs. what Cost Tracker itself has calculated since the import's
   as-of date -- see docs/superpowers/specs/2026-09-30-cost-tracker-po-funds-design.md.
   Sits above the KPIs/toolbar/table, its own visually distinct box so it
   reads as a summary, not as part of the day-to-day invoice tracking. */
.bl-pf-box{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:18px; overflow:hidden;
}
.bl-pf-boxhead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:var(--paper-alt); border-bottom:1px solid var(--line);
  border-left:4px solid var(--red);
}
.bl-pf-title{
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.07em; color:var(--red-text);
}
.bl-pf-arrow{ display:inline-block; transition:transform 0.15s; font-size:11px; color:var(--ink-soft); }
.bl-pf-title .bl-pf-arrow{ color:var(--red-text); }
.bl-pf-arrow.collapsed{ transform:rotate(-90deg); }
.bl-pf-toggle{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.bl-pf-body{ padding:14px 16px; display:flex; flex-direction:column; gap:18px; }
.bl-pf-phase-group{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.bl-pf-phase{
  display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--line-strong);
}
.bl-pf-group{ min-width:0; }
.bl-pf-category{
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
  color:var(--ink-soft); margin-bottom:6px;
}
.bl-pf-card{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px;
}
.bl-pf-row{
  border:1px solid var(--line); border-radius:3px; padding:10px 12px; background:var(--paper);
  min-width:0;
}
.bl-pf-row.bl-pf-closed{ opacity:0.55; }
/* Active well = the well of the latest Daily Capture day (see
   billing-service.mjs activeWellOf). Same red accent in PO Funds, the
   table's PO cell and the header chip so it reads as one signal. */
.bl-pf-row.bl-pf-active{ border-color:var(--red); box-shadow:inset 3px 0 0 var(--red); }
.bl-po-cell.bl-po-active{ box-shadow:inset 4px 0 0 var(--red); }
.bl-active-badge{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:3px;
  background:var(--red); color:#fff; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  vertical-align:middle; white-space:nowrap;
}
.bl-po-cell .bl-active-badge{ display:block; margin:4px 0 0; width:max-content; }
.bl-active-chip{
  font-size:11px; font-weight:600; color:var(--red-text); border:1px solid var(--red); border-radius:3px;
  padding:2px 8px; white-space:nowrap;
}
.bl-pf-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.bl-pf-label{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; color:var(--ink); }
.bl-pf-tail{ font-family:'Inter',-apple-system,sans-serif; font-weight:400; color:var(--ink-soft); }
.bl-pf-status{
  margin-left:auto; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); border-radius:3px; padding:1px 6px;
}
.bl-pf-value{ font-size:10.5px; color:var(--ink-soft); margin-bottom:5px; font-variant-numeric:tabular-nums; }
/* Two segments stacked left-to-right inside one track, scaled to the PO's
   own poValue: muted = already consumed before the import's as-of date,
   colored = tracked by Cost Tracker since. Leftover track width is what's
   still available. */
.bl-pf-bar{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-bottom:6px; display:flex; }
.bl-pf-fill{ height:100%; }
.bl-pf-fill-pre{ background:var(--ink-soft); opacity:0.45; }
.bl-pf-fill.bl-green{ background:var(--bl-green); }
.bl-pf-fill.bl-amber{ background:var(--bl-amber); }
.bl-pf-fill.bl-red{ background:var(--bl-red); }
.bl-pf-amounts{
  display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.bl-pf-remaining{ font-weight:700; }
.bl-pf-remaining.bl-green{ color:var(--bl-green); }
.bl-pf-remaining.bl-amber{ color:var(--bl-amber); }
.bl-pf-remaining.bl-red{ color:var(--bl-red); }

/* ---------- toolbar ---------- */
.bl-hidepaid{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink); cursor:pointer; white-space:nowrap; align-self:center; }

.bl-toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.bl-field{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--ink-soft); min-width:0; }
.bl-field > span{ letter-spacing:0.05em; text-transform:uppercase; font-weight:600; }
.bl-field select,
.bl-field input,
.bl-form input,
.bl-form select,
.bl-form textarea{
  font-family:'Inter',-apple-system,sans-serif; font-size:13px;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:9px 10px; min-height:40px; min-width:0; max-width:100%;
}
.bl-form textarea{ min-height:70px; resize:vertical; }
/* a checkbox must not stretch to the grid cell's width */
.bl-field input[type="checkbox"]{
  width:22px; height:22px; min-height:22px; min-width:22px;
  align-self:flex-start; margin:9px 0; accent-color:var(--red);
}
.bl-field select:focus-visible,
.bl-field input:focus-visible,
.bl-form input:focus-visible,
.bl-form select:focus-visible,
.bl-form textarea:focus-visible{ outline:2px solid var(--red-text); outline-offset:1px; }
.bl-toolbar-spacer{ flex:1 1 auto; }

.bl-viewtoggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
.bl-viewtoggle button{
  font-family:'Archivo',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  background:var(--paper); color:var(--ink-soft);
  border:0; padding:0 14px; min-height:40px; cursor:pointer;
}
.bl-viewtoggle button + button{ border-left:1px solid var(--line-strong); }
.bl-viewtoggle button.active{ background:var(--red); color:#fff; }
.bl-viewtoggle button:focus-visible{ outline:2px solid var(--red-text); outline-offset:-2px; }

/* ---------- buttons ---------- */

.bl-btn{
  font-family:'Archivo',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:0 14px; min-height:40px; cursor:pointer;
}
.bl-btn:hover{ border-color:var(--red-text); color:var(--red-text); }
.bl-btn:focus-visible{ outline:2px solid var(--red-text); outline-offset:2px; }
.bl-btn:disabled{ opacity:0.5; cursor:default; }
.bl-btn:disabled:hover{ border-color:var(--line-strong); color:var(--ink); }
.bl-btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.bl-btn-primary:hover{ opacity:0.88; color:#fff; border-color:var(--red); }
.bl-btn-icon{ padding:0 12px; font-size:14px; }
.bl-btn-link{
  background:none; border:0; padding:0; min-height:40px;
  font-family:'Inter',-apple-system,sans-serif; font-size:12.5px; font-weight:600;
  text-transform:none; letter-spacing:0; color:var(--red-text); cursor:pointer; text-align:left;
}
.bl-btn-link:hover{ text-decoration:underline; }

/* ---------- semaphore ---------- */

.bl-dot{
  width:10px; height:10px; border-radius:50%; display:inline-block;
  flex-shrink:0; background:var(--stone); vertical-align:middle;
}
.bl-dot.bl-green{ background:var(--bl-green); }
.bl-dot.bl-amber{ background:var(--bl-amber); }
.bl-dot.bl-red{ background:var(--bl-red); }
.bl-dot.bl-none{ background:var(--line-strong); }

.bl-warn{ color:var(--bl-amber); font-size:11.5px; display:block; }
.bl-warn + .bl-warn{ margin-top:3px; }
.bl-danger{ color:var(--bl-red); font-size:12.5px; font-weight:600; }

/* ---------- table ---------- */

.bl-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); background:var(--paper); }
.bl-table{ width:100%; border-collapse:collapse; font-size:12px; }
.bl-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--paper-alt); color:var(--ink-soft);
  font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700;
  text-align:left; padding:8px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
  cursor:pointer; user-select:none;
}
.bl-table thead th:hover{ color:var(--ink); }
.bl-table thead th:focus-visible{ outline:2px solid var(--red-text); outline-offset:-2px; }
.bl-table thead th.bl-th-sorted{ color:var(--ink); }
.bl-th-arrow{ margin-left:4px; font-size:8px; }
.bl-table tbody td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink); }
.bl-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bl-mono{ font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
/* dashboard.html has a global `tbody td { font-family: IBM Plex Mono }` for
   the cost tables, which this table inherited -- the board cards use Inter,
   so match them. Dates/folios/days keep tabular figures for column
   alignment without needing a monospace face. */
.bl-table tbody td, .bl-table tbody td.bl-mono{ font-family:'Inter',-apple-system,sans-serif; font-variant-numeric:tabular-nums; }
/* PO is its own left-side column (rowspan across the group's rows), not a
   full-width row above the data -- keeps it clear of the Month/Service/...
   headers, and sticky so it stays visible while the rest of the table
   scrolls horizontally on a narrow screen. */
.bl-po-col, .bl-po-cell{
  position:sticky; left:0; z-index:1;
  background:var(--paper-alt); border-right:2px solid var(--line-strong);
  white-space:nowrap; vertical-align:middle !important;
}
.bl-po-col{ z-index:3; }
.bl-po-label{ display:block; font-weight:700; color:var(--ink); font-size:12px; }
.bl-group-total{ display:block; color:var(--red-text); font-variant-numeric:tabular-nums; margin-top:2px; }
.bl-row{ cursor:pointer; }
.bl-row:hover td{ background:var(--paper-alt); }
.bl-row:focus-visible{ outline:2px solid var(--red-text); outline-offset:-2px; }
.bl-row.bl-inactive td{ opacity:0.55; }
/* A paid invoice is easy to miss otherwise -- the stage dot/label are small
   and the same size as every other stage. A tinted row reads at a glance,
   without needing to scan the Stage column first. */
.bl-row.bl-paid td{ background:color-mix(in srgb, var(--bl-green) 14%, var(--paper)); }
.bl-row.bl-paid:hover td{ background:color-mix(in srgb, var(--bl-green) 24%, var(--paper)); }
.bl-stage-cell{ display:flex; align-items:center; gap:7px; }
/* Table view: everything centered, headers and cells alike. */
.bl-table thead th, .bl-table tbody td, .bl-table .bl-num{ text-align:center; }
.bl-table tbody td{ vertical-align:middle; }
.bl-table .bl-stage-cell{ justify-content:center; text-align:center; }
.bl-waiting{ display:block; font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
.bl-empty{ padding:22px 12px; text-align:center; color:var(--ink-soft); font-size:13px; }

/* ---------- board ---------- */

.bl-board{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 1fr); grid-template-rows:auto 1fr;
  gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; align-items:stretch;
}
.bl-col{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius); min-width:0;
  display:grid; grid-row:span 2; grid-template-rows:subgrid;
}
.bl-col-body{ min-height:0; }
.bl-col-head{ padding:10px 12px; border-bottom:1px solid var(--line); }
.bl-col-title{ font-family:'Archivo',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); }
.bl-col-meta{ font-size:11px; color:var(--ink-soft); margin-top:3px; font-variant-numeric:tabular-nums; }
.bl-col-body{ padding:8px; display:flex; flex-direction:column; gap:8px; }
.bl-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; text-align:left; width:100%; cursor:pointer; min-height:40px;
  font-family:'Inter',-apple-system,sans-serif; color:var(--ink); display:block;
}
.bl-card:hover{ border-color:var(--red); }
.bl-card:focus-visible{ outline:2px solid var(--red-text); outline-offset:1px; }
.bl-card-top{ display:flex; align-items:center; gap:7px; }
.bl-card-po{ font-weight:700; font-size:12px; overflow-wrap:anywhere; }
.bl-card-sub{ font-size:11px; color:var(--ink-soft); margin-top:3px; }
.bl-card-amount{ font-size:12.5px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums; }

/* ---------- panel (right drawer) ---------- */

.bl-overlay{
  position:fixed; inset:0; background:rgba(28,25,23,0.35);
  z-index:900; border:0; padding:0; margin:0; width:100%; cursor:pointer;
}
html[data-theme="dark"] .bl-overlay{ background:rgba(0,0,0,0.55); }
.bl-panel{
  position:fixed; top:0; right:0; bottom:0; width:420px; max-width:100%;
  background:var(--paper); border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow); z-index:901;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .2s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.bl-panel.bl-open{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .bl-panel{ transition:none; } }
.bl-panel-head{
  position:sticky; top:0; background:var(--paper); z-index:1;
  display:flex; align-items:flex-start; gap:10px;
  padding:16px 16px 12px; border-bottom:1px solid var(--line);
}
.bl-panel-title{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; margin:0; flex:1; overflow-wrap:anywhere; }
.bl-panel-close{ background:none; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); min-width:40px; min-height:40px; cursor:pointer; font-size:16px; line-height:1; }
.bl-panel-close:hover{ border-color:var(--red-text); color:var(--red-text); }
.bl-panel-body{ padding:14px 16px 28px; }
.bl-sec{ padding:14px 0; border-top:1px solid var(--line); }
.bl-sec:first-child{ border-top:0; padding-top:0; }
.bl-sec-title{
  font-family:'Archivo',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px;
}
.bl-kv{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; }
.bl-kv span:first-child{ color:var(--ink-soft); }
.bl-kv span:last-child{ text-align:right; overflow-wrap:anywhere; }

.bl-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; align-items:end; }
.bl-form .bl-field{ min-width:0; }
.bl-form .bl-full{ grid-column:1 / -1; }
.bl-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.bl-timeline{ list-style:none; margin:0; padding:0; }
.bl-timeline li{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12.5px; flex-wrap:wrap; }
.bl-timeline li.bl-current{ font-weight:700; }
.bl-tl-label{ flex:1; min-width:110px; }
.bl-timeline input[type="date"]{ min-height:40px; }
.bl-tl-note{ flex-basis:100%; color:var(--ink-soft); font-size:11px; }

.bl-history{ list-style:none; margin:0; padding:0; font-size:12px; color:var(--ink-soft); }
.bl-history li{ padding:6px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.bl-history li:first-child{ border-top:0; }

.bl-badge{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; padding:2px 6px; border-radius:var(--radius);
  border:1px solid var(--line-strong); color:var(--ink-soft);
}
.bl-badge.bl-found{ color:var(--bl-green); border-color:var(--bl-green); }
.bl-badge.bl-missing{ color:var(--bl-amber); border-color:var(--bl-amber); }

/* ---------- toast ---------- */

.bl-toasts{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:950; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:92vw; }
.bl-toast{
  background:var(--ink); color:var(--paper); font-size:12.5px;
  padding:10px 14px; border-radius:var(--radius); box-shadow:var(--shadow); overflow-wrap:anywhere;
}
.bl-toast.bl-toast-error{ background:var(--red); color:#fff; }

/* ---------- responsive ---------- */

@media (max-width: 1000px){
  .bl-board{ grid-auto-columns:minmax(200px, 200px); }
}
@media (max-width: 600px){
  .bl-panel{ width:100%; border-left:0; }
  .bl-kpis{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; }
  .bl-kpi{ padding:12px; }
  .bl-kpi-value{ font-size:17px; }
  .bl-toolbar{ gap:8px; }
  .bl-field{ flex:1 1 140px; }
  .bl-form{ grid-template-columns:1fr; }
}