/* ==========================================================================
   Board Briefing tab
   Avante Security AI Call System

   Every selector is scoped under #tab-board. The portal already ships
   styles.css, command-center.css and dark-theme.css, and generic class names
   like .card or .stat here would collide with those and silently change
   padding on screens this file has nothing to do with.

   The dashboard runs permanently in dark mode (command-center-active), so this
   is designed dark-first rather than inheriting a light palette.
   ========================================================================== */

#tab-board {
  --bd-ground:   #0B1218;
  --bd-surface:  #131E26;
  --bd-surface2: #1B2932;
  --bd-ink:      #E8EFF2;
  --bd-soft:     #B7C7CE;
  --bd-muted:    #8CA1AA;
  --bd-rule:     #24343E;
  --bd-accent:   #45B9C4;
  --bd-accent-d: #7FD6DE;
  --bd-wash:     #0F2C31;
  --bd-signal:   #E29257;
  --bd-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  color: var(--bd-ink);
  padding-bottom: 40px;
}

/* ---------- live status strip ---------- */
#tab-board .bd-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 16px;
  margin-bottom: 22px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  font-family: var(--bd-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-muted);
}
#tab-board .bd-live { display: flex; align-items: center; gap: 8px; color: var(--bd-accent); }
#tab-board .bd-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bd-accent);
  box-shadow: 0 0 0 0 rgba(69,185,196,.6);
  animation: bd-pulse 2.4s ease-out infinite;
}
@keyframes bd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(69,185,196,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(69,185,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,185,196,0); }
}
#tab-board .bd-status b { color: var(--bd-soft); font-weight: 600; }
#tab-board .bd-status .bd-stale { color: var(--bd-signal); }

/* ---------- headline figures ---------- */
#tab-board .bd-heroes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--bd-rule);
  border: 1px solid var(--bd-rule);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
}
#tab-board .bd-hero { background: var(--bd-surface); padding: 24px 22px; }
#tab-board .bd-hero .v {
  display: block;
  font-family: var(--bd-mono);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
#tab-board .bd-hero .u {
  display: block;
  font-family: var(--bd-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--bd-accent-d);
  margin-top: 5px;
}
#tab-board .bd-hero .k { font-size: 13.5px; line-height: 1.4; color: var(--bd-soft); margin-top: 11px; }

/* a figure that just changed */
#tab-board .bd-tick { animation: bd-flash 1.1s ease-out; }
@keyframes bd-flash {
  0%   { color: var(--bd-accent-d); text-shadow: 0 0 18px rgba(127,214,222,.5); }
  100% { color: #FFFFFF; text-shadow: none; }
}

/* ---------- section furniture ---------- */
#tab-board .bd-sec { margin-bottom: 34px; }
#tab-board .bd-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--bd-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bd-accent);
  margin: 0 0 12px;
}
#tab-board .bd-eyebrow::after { content:""; flex:1; height:1px; background: var(--bd-rule); }
#tab-board h3.bd-h {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--bd-ink);
}
#tab-board p.bd-p { font-size: 14.5px; color: var(--bd-soft); margin: 0 0 18px; max-width: 76ch; }

/* ---------- funnel ---------- */
#tab-board .bd-funnel { display: flex; flex-direction: column; gap: 3px; }
#tab-board .bd-stage {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1.1fr) 2.2fr minmax(110px, auto);
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-rule);
  border-radius: 3px;
}
#tab-board .bd-stage .i { font-family: var(--bd-mono); font-size: 10.5px; color: var(--bd-muted); }
#tab-board .bd-stage .n { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
#tab-board .bd-stage .n small { display:block; font-weight:400; font-size:12.5px; color: var(--bd-muted); margin-top:2px; }
#tab-board .bd-track { background: var(--bd-surface2); height: 22px; border-radius: 2px; overflow: hidden; }
#tab-board .bd-bar { height: 100%; background: var(--bd-accent); transition: width .8s cubic-bezier(.2,.7,.3,1); }
#tab-board .bd-bar.deep { background: var(--bd-accent-d); }
#tab-board .bd-stage .val {
  font-family: var(--bd-mono);
  font-size: 16px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#tab-board .bd-note {
  font-family: var(--bd-mono); font-size: 11px; color: var(--bd-muted);
  letter-spacing: .04em; margin: 10px 0 0;
}
#tab-board .bd-payoff {
  margin-top: 20px; padding: 20px 22px;
  background: var(--bd-wash);
  border-left: 3px solid var(--bd-accent);
  border-radius: 0 3px 3px 0;
}
#tab-board .bd-payoff .big {
  display: block;
  font-family: var(--bd-mono);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  color: var(--bd-accent-d);
  font-variant-numeric: tabular-nums;
}
#tab-board .bd-payoff p { margin: 8px 0 0; font-size: 14px; color: var(--bd-soft); max-width: 66ch; }

/* ---------- grids, rails, tables ---------- */
#tab-board .bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
}
#tab-board .bd-cell {
  background: var(--bd-surface);
  border: 1px solid var(--bd-rule);
  border-radius: 3px;
  padding: 18px;
}
#tab-board .bd-cell .v {
  display: block;
  font-family: var(--bd-mono);
  font-size: 29px; font-weight: 600; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--bd-ink);
}
#tab-board .bd-cell .v small { font-size: 15px; color: var(--bd-muted); }
#tab-board .bd-cell .t { font-size: 13.5px; font-weight: 600; margin-top: 10px; color: var(--bd-ink); }
#tab-board .bd-cell .d { font-size: 12.5px; color: var(--bd-muted); margin-top: 4px; line-height: 1.45; }

#tab-board .bd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#tab-board .bd-rail {
  background: var(--bd-surface);
  border: 1px solid var(--bd-rule);
  border-radius: 3px;
  padding: 18px 20px;
}
#tab-board .bd-rail h4 {
  font-size: 15px; margin: 0 0 12px; color: var(--bd-ink); font-weight: 600;
}
#tab-board .bd-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--bd-rule);
}
#tab-board .bd-row:last-child { border-bottom: none; }
#tab-board .bd-row .k { font-size: 13.5px; color: var(--bd-soft); }
#tab-board .bd-row .v {
  font-family: var(--bd-mono); font-size: 15.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bd-ink);
}

#tab-board .bd-tablewrap { overflow-x: auto; border: 1px solid var(--bd-rule); border-radius: 3px; }
#tab-board table.bd-table { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--bd-surface); }
#tab-board table.bd-table th,
#tab-board table.bd-table td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--bd-rule); }
#tab-board table.bd-table th {
  font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bd-muted); font-weight: 500;
  background: var(--bd-surface2);
}
#tab-board table.bd-table td.num,
#tab-board table.bd-table th.num {
  text-align: right; font-family: var(--bd-mono); font-variant-numeric: tabular-nums;
}
#tab-board table.bd-table tbody tr:last-child td { border-bottom: none; }

/* ---------- coverage clock ---------- */
#tab-board .bd-clock { display: flex; flex-direction: column; gap: 9px; }
#tab-board .bd-cbar { display: grid; grid-template-columns: 84px 1fr 64px; align-items: center; gap: 12px; }
#tab-board .bd-cbar .cl {
  font-family: var(--bd-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bd-muted);
}
#tab-board .bd-ctrack { background: var(--bd-surface2); height: 26px; border-radius: 2px; overflow: hidden; }
#tab-board .bd-cfill { height: 100%; transition: width .8s cubic-bezier(.2,.7,.3,1); }
#tab-board .bd-cfill.staff { background: var(--bd-rule); }
#tab-board .bd-cfill.ava { background: var(--bd-accent); }
#tab-board .bd-cbar .cv {
  font-family: var(--bd-mono); font-size: 14px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--bd-ink);
}

/* ---------- provenance ---------- */
#tab-board .bd-prov {
  background: var(--bd-surface2);
  border-radius: 3px;
  padding: 18px 20px;
  font-size: 13px;
  color: var(--bd-soft);
  line-height: 1.6;
}
#tab-board .bd-prov h4 {
  font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bd-muted); margin: 0 0 9px; font-weight: 500;
}
#tab-board .bd-prov p { margin: 0 0 8px; max-width: 88ch; }
#tab-board .bd-prov p:last-child { margin-bottom: 0; }

/* ---------- states ---------- */
#tab-board .bd-loading, #tab-board .bd-error {
  padding: 40px; text-align: center; color: var(--bd-muted);
  font-family: var(--bd-mono); font-size: 13px; letter-spacing: .06em;
}
#tab-board .bd-error { color: var(--bd-signal); }

@media (max-width: 900px) {
  #tab-board .bd-two { grid-template-columns: 1fr; }
  #tab-board .bd-stage { grid-template-columns: 20px 1fr; gap: 5px 10px; }
  #tab-board .bd-stage .bd-track, #tab-board .bd-stage .val { grid-column: 2; }
  #tab-board .bd-stage .val { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  #tab-board .bd-dot { animation: none; }
  #tab-board .bd-tick { animation: none; }
  #tab-board .bd-bar, #tab-board .bd-cfill { transition: none; }
}