/* =====================================================================
   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; }

/* ---- Rental property recommendations ---------------------------------- */
.br-dealsum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; text-decoration: none; color: inherit; }
.br-dealsum > div { padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-bg, transparent); }
.br-dealsum b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.br-dealsum span { font-size: 12px; color: var(--m-muted); }
.br-sechead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 22px 0 12px; }
.br-sechead h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--m-ink); }
.br-sechead span { font-size: 12.5px; color: var(--m-muted); }
.br-deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.br-deal { display: flex; flex-direction: column; min-width: 0; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 14px; box-shadow: var(--m-shadow); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.br-deal:hover, .br-deal:focus-visible { border-color: var(--m-accent); transform: translateY(-1px); outline: none; }
.br-deal-photo { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: var(--m-line); color: var(--m-faint); }
.br-deal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-deal-photo svg { width: 28px; height: 28px; }
.br-deal-flag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--m-surface); box-shadow: var(--m-shadow); }
.br-deal-flag.pos, .br-deal-nums dd.pos { color: var(--m-pos); }
.br-deal-flag.neg, .br-deal-nums dd.neg { color: var(--m-neg); }
.br-deal-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; min-width: 0; }
.br-deal-body > b { font-size: 13.5px; font-weight: 600; color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-deal-price { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.br-deal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.br-deal-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--m-line); }
.br-deal-nums div { min-width: 0; }
.br-deal-nums dt { font-size: 11px; color: var(--m-faint); }
.br-deal-nums dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.br-deal-lines { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--m-muted); }
.br-dealfoot { margin: 22px 0 0; max-width: 92ch; font-size: 12px; line-height: 1.6; color: var(--m-muted); }
@media (max-width: 700px) { .br-deals { grid-template-columns: 1fr; } }
.br-tabs { display: flex; gap: 6px; margin: 0 0 4px; }
.br-dateinput { width: auto; height: 30px; padding: 0 8px; font-size: 12.5px; }
.br-deal-save { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: var(--m-surface); color: var(--m-muted); box-shadow: var(--m-shadow); cursor: pointer; }
.br-deal-save svg { width: 16px; height: 16px; }
.br-deal-save:hover { color: var(--m-neg); }
.br-deal-save.on { color: var(--m-neg); }
.br-deal-save.on svg { fill: currentColor; }

/* The clean look takes the card's padding away, so the lists and tables that
   reach out to the card edge would hang 20px past the section line and swallow
   the gap to the next section. Under it they sit flush instead. */
body.clean-on .br-app .br-list, body.clean-on .br-app .br-tablewrap { margin: 0; }
body.clean-on .br-app .br-list > .br-row { padding-left: 0; padding-right: 0; }