/* =====================================================================
   DAILY BRIEF — the br- pieces.

   Everything reads --m-* from money.css, so a retheme is a token edit and
   dark mode needs nothing here. Designed in Figma, page "Daily Brief".
   ===================================================================== */

/* This tab has no sidebar: one column, not the 236px rail the other apps use. */
.br-app { grid-template-columns: minmax(0, 1fr); }
.br-main-pane { max-width: 1320px; width: 100%; margin: 0 auto; }

.br-lede { margin: -4px 0 16px; color: var(--m-muted); font-size: 13px; }

/* Two columns on a desktop, one on anything narrow. */
.br-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: 18px; }
.br-main, .br-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1080px) { .br-cols { grid-template-columns: 1fr; } .br-side { order: -1; } }

/* ---- rows ------------------------------------------------------------ */
.br-list { display: flex; flex-direction: column; margin: 0 -20px -18px; }
.m-card.flush .br-list { margin: 0; }
.br-row { display: flex; align-items: center; gap: 11px; padding: 11px 20px; border-top: 1px solid var(--m-line-soft); min-width: 0; }
.br-list > .br-row:first-child { border-top: 0; }
.br-row.br-stack { flex-wrap: wrap; }
a.br-link { color: inherit; text-decoration: none; }
a.br-link:hover { background: var(--m-surface-2); }
.br-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.br-txt b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-txt span { font-size: 11.5px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; }
.br-txt span.neg { color: var(--m-neg); }
.br-txt b.br-time { font-size: 10.5px; font-weight: 600; color: var(--m-faint); letter-spacing: .02em; }
.br-txt span.br-strong { font-size: 12.5px; font-weight: 500; color: var(--m-ink); }
.br-grow { flex: 1 1 auto; }
.br-sub { display: block; font-size: 11px; color: var(--m-faint); font-weight: 400; }
.br-dim { color: var(--m-muted); }
.br-figure { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.br-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.br-row .br-acts { margin: 0 0 0 auto; }

.br-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--m-faint); }
.br-dot.pos { background: var(--m-pos); } .br-dot.warn { background: var(--m-warn); } .br-dot.neg { background: var(--m-neg); }
.br-bar { width: 3px; border-radius: 2px; align-self: stretch; min-height: 30px; flex: none; background: var(--m-faint); }
.br-bar.accent { background: var(--m-accent); } .br-bar.warn { background: var(--m-warn); }

.br-check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--m-line); background: transparent; cursor: pointer; flex: none; padding: 0; }
.br-check:hover { border-color: var(--m-accent); background: var(--m-accent-soft); }

/* ---- the "no back end yet" state ------------------------------------- */
.br-unwired { display: flex; gap: 11px; align-items: flex-start; padding: 14px 16px; border-radius: 11px; background: var(--m-surface-2); color: var(--m-muted); }
.br-unwired svg { flex: none; width: 17px; height: 17px; margin-top: 1px; opacity: .7; }
.br-unwired b { display: block; color: var(--m-ink); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.br-unwired span { font-size: 11.5px; line-height: 1.5; }

/* ---- tables ---------------------------------------------------------- */
.br-tablewrap { margin: 0 -20px -18px; overflow-x: auto; }
.br-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.br-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--m-faint); padding: 9px 12px; background: var(--m-surface-2); white-space: nowrap; }
.br-table th:first-child, .br-table td:first-child { padding-left: 20px; }
.br-table th:last-child, .br-table td:last-child { padding-right: 20px; }
.br-table td { padding: 10px 12px; border-top: 1px solid var(--m-line-soft); vertical-align: middle; white-space: nowrap; }
.br-table td b { font-weight: 600; }
.br-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.br-table .num.neg { color: var(--m-neg); }
.br-table tbody tr[data-action] { cursor: pointer; }
.br-table tbody tr[data-action]:hover { background: var(--m-surface-2); }

/* ---- pause breakdown -------------------------------------------------- */
.br-pause { display: flex; flex-direction: column; gap: 4px; }
.br-pause .br-row { padding-left: 0; padding-right: 0; }
.br-bar-stack { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 10px; background: var(--m-surface-2); }
.br-bar-stack i { display: block; min-width: 4px; }

/* ---- the drafted note ------------------------------------------------- */
.br-note { border: 1px solid var(--m-line); border-radius: 11px; padding: 4px 16px; background: var(--m-surface-2); max-height: 340px; overflow-y: auto; }
.br-note table { width: 100%; }
.br-note div { color: var(--m-ink) !important; }
.br-note td { color: var(--m-muted) !important; }

/* ---- breadcrumb ------------------------------------------------------- */
.br-crumb { font-size: 11.5px; color: var(--m-faint); margin-bottom: 10px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.br-crumb a { color: var(--m-accent); text-decoration: none; font-weight: 500; }
.br-crumb a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  /* Four stat tiles one per row is a screenful of scrolling before any
     content. Two up keeps the whole summary above the fold on a phone. */
  .br-main-pane .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .br-main-pane .m-tile { padding: 12px 13px; }
  .br-main-pane .m-tile .val { font-size: 20px; }
  .br-main-pane .m-tile .sub { font-size: 10.5px; }
  .br-list, .br-tablewrap { margin-left: -16px; margin-right: -16px; }
  .br-row, .br-table th:first-child, .br-table td:first-child { padding-left: 16px; }
  .br-table th:last-child, .br-table td:last-child { padding-right: 16px; }
  .br-cols { gap: 14px; }
}

/* ---- the dropped report ----------------------------------------------- */
.br-drop { display: flex; align-items: center; gap: 13px; padding: 20px 18px; border: 1.5px dashed var(--m-line);
  border-radius: 12px; color: var(--m-muted); cursor: pointer; background: var(--m-surface-2); transition: border-color .12s, background .12s; }
.br-drop:hover, .br-drop:focus-visible { border-color: var(--m-accent); background: var(--m-accent-soft); outline: none; }
.br-drop.over { border-color: var(--m-accent); background: var(--m-accent-soft); border-style: solid; }
.br-drop svg { width: 22px; height: 22px; flex: none; opacity: .7; }
.br-drop b { display: block; font-size: 13px; color: var(--m-ink); }
.br-drop span { font-size: 11.5px; }
.br-importnote { margin-top: 12px; font-size: 12.5px; padding: 10px 12px; border-radius: 9px; background: var(--m-surface-2); color: var(--m-muted); }
.br-importnote.pos { background: var(--m-pos-soft); color: var(--m-pos); }
.br-importnote.neg { background: var(--m-neg-soft); color: var(--m-neg); }

/* ---- the day picker ---------------------------------------------------- */
.br-daynav { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.br-daylabel { font-size: 12.5px; font-weight: 600; color: var(--m-ink); min-width: 124px; text-align: center; }
@media (max-width: 700px) { .br-daylabel { min-width: 0; } }

/* ---- the trend table --------------------------------------------------- */
.br-trend td { white-space: nowrap; }
.br-delta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
.br-delta.good { color: var(--m-pos); }
.br-delta.bad { color: var(--m-neg); }
.br-delta.flat { color: var(--m-faint); font-weight: 500; }
.br-trendfoot { padding: 11px 20px 0; font-size: 11.5px; color: var(--m-muted); }

/* callers page */
.br-callerform { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.br-pad { padding: 14px 20px; }
.br-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 12px; }