/* invoices-screen.css — the account's invoices, on the Reports route.
 *
 * Absolute inside <main> so the sidebar stays reachable, and <main> is made a
 * positioning context by an ATTRIBUTE rather than an inline style: Vue owns
 * that element's `style` and wipes an inline one on its next render, which is
 * how the Missed screen once slid out from under the sidebar.
 *
 * FEW COLOURS (owner, 2026-09-29, after respond.io): ink and grey carry the
 * screen, the one lime marks the action and the selected thing, red is the
 * words of an overdue amount. Status pills are one grey with the state in
 * their words; no tile is washed green or red.
 */
[data-crm-inv-host] { position: relative; }

.crm-iv {
  --iv-ink: #1d1b1c;
  --iv-muted: #55606c;
  --iv-line: #e8ebe4;
  --iv-card: #ffffff;
  --iv-soft: #fafbf8;
  --iv-bad: #b42318;
  --iv-warn: var(--crm-alert-ink, #c8243b);

  position: absolute;
  inset: 0;
  /* 60, the same as the Missed screen, and for a reason found the hard way:
     the Reports page this rides on puts its own team filter in a `z-50`
     stacking context, so at any lower value that filter prints straight
     through the tiles. */
  z-index: 60;
  overflow: auto;
  padding: 22px 24px 40px;
  background: var(--iv-soft);
  color: var(--iv-ink);
}

:root.dark .crm-iv,
.dark .crm-iv,
[data-theme="dark"] .crm-iv {
  --iv-ink: #e8eaed;
  --iv-muted: #98a1ad;
  --iv-line: #2c3138;
  --iv-card: #1b1e23;
  --iv-soft: #15181c;
  --iv-bad: #fca5a5;
  --iv-warn: var(--crm-alert-ink, #c8243b);
}

.crm-iv * { box-sizing: border-box; }

.crm-iv__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crm-iv__title { margin: 0; font-size: 20px; font-weight: 700; flex: 1; }

.crm-iv__x {
  border: 0; background: transparent; color: var(--iv-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px;
}

.crm-iv__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.crm-iv__chip {
  border: 1px solid var(--iv-line);
  background: var(--iv-card);
  color: var(--iv-muted);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  cursor: pointer;
}

.crm-iv__chip.is-on {
  background: rgba(212, 251, 8, .12);
  border-color: rgba(212, 251, 8, .45);
  color: var(--iv-ink);
  font-weight: 600;
}

/* The four figures somebody opens this screen for. */
.crm-iv__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.crm-iv__tile {
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: var(--iv-card);
  padding: 14px 16px;
}

/* Only what is late is allowed to shout. */
.crm-iv__tile.is-bad { border-color: var(--iv-line); }
.crm-iv__tile.is-bad .crm-iv__tilev { color: var(--iv-bad); }

.crm-iv__tilev { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crm-iv__tilel { font-size: 12px; color: var(--iv-muted); margin-top: 2px; }

/* The table scrolls inside its own box; the page never scrolls sideways. */
.crm-iv__scroll {
  overflow-x: auto;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: var(--iv-card);
}

.crm-iv__table { width: 100%; border-collapse: collapse; min-width: 720px; }

.crm-iv__table th,
.crm-iv__table td { padding: 11px 14px; text-align: start; font-size: 13.5px; }

.crm-iv__table th {
  background: var(--iv-soft);
  color: var(--iv-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.crm-iv__table td { border-top: 1px solid var(--iv-line); }
.crm-iv__table tbody tr:hover td { background: var(--iv-soft); }

.crm-iv__no { font-weight: 700; white-space: nowrap; }

/* Tabular, or the amounts do not line up under one another and the eye cannot
   compare them down the column. */
.crm-iv__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-iv__num.is-owed { color: var(--iv-warn); font-weight: 600; }

.crm-iv__state {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.crm-iv__state.is-draft   { background: rgba(120, 130, 145, .12); color: #5b6673; }
.crm-iv__state.is-sent    { background: rgba(120, 130, 145, .12); color: #282e34; }
.crm-iv__state.is-partial { background: rgba(120, 130, 145, .12); color: #282e34; }
.crm-iv__state.is-paid    { background: rgba(120, 130, 145, .12); color: #149659; }
.crm-iv__state.is-overdue { background: rgba(120, 130, 145, .12); color: #b42318; }
.crm-iv__state.is-void    { background: rgba(120, 130, 145, .10); color: #8b94a3; }

:root.dark .crm-iv__state.is-draft,
.dark .crm-iv__state.is-draft { color: #98a1ad; }
:root.dark .crm-iv__state.is-overdue,
.dark .crm-iv__state.is-overdue { color: #fca5a5; }
:root.dark .crm-iv__state.is-paid,
.dark .crm-iv__state.is-paid { color: #4ade80; }
:root.dark .crm-iv__state.is-partial,
.dark .crm-iv__state.is-partial { color: #e8eaed; }
:root.dark .crm-iv__state.is-sent,
.dark .crm-iv__state.is-sent { color: #e8eaed; }

.crm-iv__open { color: var(--iv-ink); font-weight: 600; text-decoration: none; font-size: 13px; }
:root.dark .crm-iv__open,
.dark .crm-iv__open { color: var(--iv-ink); }

.crm-iv__note,
.crm-iv__none {
  padding: 28px 16px;
  text-align: center;
  color: var(--iv-muted);
  font-size: 13.5px;
  border: 1px dashed var(--iv-line);
  border-radius: 8px;
}

/* Sending it, and whether the customer has actually been told.
   "Told" is a different column from "Status" on purpose: an invoice can read
   Sent because somebody flipped the status by hand while nothing ever left the
   building. This column counts real deliveries. */
.crm-iv__told { font-size: 11.5px; font-weight: 700; color: var(--iv-ink); }
.crm-iv__untold { font-size: 11.5px; color: var(--iv-muted); }

:root.dark .crm-iv__told,
.dark .crm-iv__told,
[data-theme="dark"] .crm-iv__told { color: var(--iv-ink); }

.crm-iv__send {
  border: 1px solid var(--iv-line);
  background: var(--iv-card);
  color: var(--iv-ink);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-inline-end: 8px;
}

.crm-iv__send:hover { border-color: var(--iv-muted); }

.crm-iv__gear {
  border: 1px solid var(--iv-line);
  background: var(--iv-card);
  color: var(--iv-ink);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.crm-iv__gear:hover { border-color: var(--iv-muted); }

/* ---- the aging view -------------------------------------------------- */

.crm-iv__tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--iv-line); }

.crm-iv__tab {
  border: 0;
  background: transparent;
  color: var(--iv-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.crm-iv__tab.is-on { color: var(--iv-ink); border-bottom-color: var(--iv-ink); }
.crm-iv__tab:hover { color: var(--iv-ink); }

.crm-iv__agingblock {
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: var(--iv-card);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.crm-iv__aginghead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.crm-iv__agingcur { font-size: 15px; }
.crm-iv__agingtot { color: var(--iv-muted); font-weight: 600; }
.crm-iv__agingbad { color: var(--iv-bad); }

.crm-iv__bucket { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.crm-iv__bucketl { width: 120px; flex-shrink: 0; color: var(--iv-muted); }
.crm-iv__bucketn { width: 150px; flex-shrink: 0; text-align: end; font-variant-numeric: tabular-nums; }

.crm-iv__buckettrack {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--iv-soft);
  border: 1px solid var(--iv-line);
  overflow: hidden;
  min-width: 40px;
}

/* Later buckets are the problem, so they are the ones that carry colour. The
   not-yet-due row is deliberately quiet - it is money, not a problem. */
.crm-iv__bucketfill { display: block; height: 100%; background: #626f7f; }
.crm-iv__bucketfill.is-worst { background: #b42318; }
.crm-iv__bucket.is-current .crm-iv__bucketfill { background: #8a9384; }

:root.dark .crm-iv__bucketfill,
.dark .crm-iv__bucketfill,
[data-theme="dark"] .crm-iv__bucketfill { background: #9aa3af; }
:root.dark .crm-iv__bucketfill.is-worst,
.dark .crm-iv__bucketfill.is-worst,
[data-theme="dark"] .crm-iv__bucketfill.is-worst { background: #f87171; }
:root.dark .crm-iv__bucket.is-current .crm-iv__bucketfill,
.dark .crm-iv__bucket.is-current .crm-iv__bucketfill,
[data-theme="dark"] .crm-iv__bucket.is-current .crm-iv__bucketfill { background: #59616b; }

.crm-iv__worst {
  border: 1px solid var(--iv-bad);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--iv-bad);
}

.crm-iv__never { font-size: 11.5px; font-weight: 700; color: var(--iv-bad); }

/* ---- collection --------------------------------------------------------- */

.crm-iv__take {
  border: 0;
  background: #d4fb08;
  color: #000;
  border-radius: 8px;
  padding: 3px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  margin-inline-end: 8px;
}

.crm-iv__take:hover { filter: brightness(1.08); }

:root.dark .crm-iv__take,
.dark .crm-iv__take,
[data-theme="dark"] .crm-iv__take { background: #d4fb08; color: #000; }

.crm-iv__range {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--iv-muted);
  margin-bottom: 14px;
}

.crm-iv__subhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--iv-muted);
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--iv-line);
}

.crm-iv__agent {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 3px 0;
}

/* Money coming IN is the one bar in the estate that is allowed to be green. */
.crm-iv__bucketfill.is-cash { background: #d4fb08; }

:root.dark .crm-iv__bucketfill.is-cash,
.dark .crm-iv__bucketfill.is-cash,
[data-theme="dark"] .crm-iv__bucketfill.is-cash { background: #d4fb08; }

/* A part-paid invoice that is also weeks late wears the calmest label in the
   table; this is the mark that stops it disappearing into "Part paid". */
.crm-iv__late {
  margin-inline-start: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--iv-bad);
}

/* PDF and Open are marks rather than words - see iconLink() in the script for
   why, and for where their meaning went. Sized as a touch target rather than
   as text: a 15px glyph on its own is a hard thing to hit. */
.crm-iv__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  vertical-align: middle;
  transition: background 0.12s ease;
}

.crm-iv__ico span { font-size: 15px; line-height: 1; }

.crm-iv__ico + .crm-iv__ico { margin-inline-start: 2px; }

.crm-iv__ico:hover { background: rgba(120, 130, 145, .12); }

:root.dark .crm-iv__ico:hover,
.dark .crm-iv__ico:hover { background: rgba(255, 255, 255, .07); }

/* ---- standing invoices, and the month-by-month picture ------------------ */

.crm-iv__recform {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.crm-iv__recfield { display: block; }
.crm-iv__reclabel { display: block; font-size: 11.5px; color: var(--iv-muted); margin-bottom: 3px; }

.crm-iv__recform select,
.crm-iv__recform input[type="date"],
.crm-iv__recform input[type="number"] {
  padding: 5px 8px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--iv-line);
  border-radius: 8px;
  background: var(--iv-card);
  color: var(--iv-ink);
}

.crm-iv__recnum { width: 80px; }

.crm-iv__recsend { display: flex; align-items: center; gap: 8px; }
.crm-iv__recsend .crm-iv__reclabel { margin-bottom: 0; }

.crm-iv__recactions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--iv-line);
}

.crm-iv__recsaid { font-size: 11.5px; color: var(--iv-muted); }

.crm-iv__month { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.crm-iv__monthbars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 40px; }
.crm-iv__hint { font-size: 11px; color: var(--iv-muted); margin-top: 8px; }

.crm-iv__stmt { display: inline-flex; align-items: center; gap: 8px; }

/* ======================================================================
 * THE OWNER'S DESIGN (2026-09-19). Header card with an icon, underlined
 * tabs, pill filters, tiles with an icon mark each, the table in a card
 * with the page size and pager under it. Blue in light, lime in dark.
 * The aging, collection and recurring views keep their own layout and only
 * pick up the header, tabs and tiles.
 * ==================================================================== */

.crm-iv {
  --iv-ink: #101828;
  --iv-muted: #475467;
  --iv-line: #e7eaf0;
  --iv-soft: #f8fafc;
  --iv-blue: #282e34;       /* the name stays; the colour is ink (few colours) */
  --iv-owed: #101828;
  --iv-good: #15803d;
  --iv-bad: #d92d20;
  padding: 22px 24px 40px;
  font-size: 14px;
}
:root.dark .crm-iv, .dark .crm-iv, [data-theme="dark"] .crm-iv {
  --iv-ink: #e8eaed;
  --iv-muted: #b8c0cc;
  --iv-line: #2c3138;
  --iv-soft: #15181c;
  --iv-blue: #e8eaed;
  --iv-owed: #e8eaed;
  --iv-good: #4ade80;
  --iv-bad: #fca5a5;
}
.crm-iv [class^="fi-rr-"], .crm-iv [class*=" fi-rr-"] { line-height: 1; display: inline-flex; }

/* ---- header card */
.crm-iv__head.is-hero {
  gap: 22px; margin-bottom: 26px; padding: 20px 20px;
  border: 1px solid var(--iv-line); border-radius: 8px; background: var(--iv-card);
}
.crm-iv__heroic {
  flex: none; width: 78px; height: 78px; border-radius: 8px;
  display: grid; place-items: center; font-size: 32px;
  background: #f2f2f3; color: var(--iv-blue);
}
.dark .crm-iv__heroic { background: rgba(255, 255, 255, .06); }
.crm-iv__herotext { flex: 1; min-width: 0; }
.crm-iv__head.is-hero .crm-iv__title { flex: none; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.crm-iv__sub { margin: 4px 0 0; font-size: 15px; color: var(--iv-muted); }
.crm-iv__herobtn {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 50px; padding: 0 20px; border-radius: 8px;
  border: 1px solid var(--iv-line); background: var(--iv-card); color: var(--iv-ink);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.crm-iv__herobtn:hover { border-color: #98a2b3; }
.crm-iv__herobtn [class^="fi-rr-"] { font-size: 18px; }
.crm-iv__herobtn.is-lime { border-color: #d4fb08; background: #d4fb08; color: #111; }
.crm-iv__herobtn.is-lime:hover { background: #c4ea00; border-color: #c4ea00; }

/* ---- tabs: words with a line under the chosen one */
.crm-iv__tabs { gap: 6px; margin-bottom: 22px; }
.crm-iv .crm-iv__tab {
  padding: 12px 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: none; color: var(--iv-muted); font-size: 15px; font-weight: 500;
}
.crm-iv .crm-iv__tab:hover { color: var(--iv-ink); }
.crm-iv .crm-iv__tab.is-on { color: var(--iv-blue); border-bottom-color: var(--iv-blue); font-weight: 700; background: none; }

/* ---- filters */
.crm-iv__chips { gap: 10px; margin-bottom: 22px; }
.crm-iv .crm-iv__chip { padding: 0 18px; height: 42px; font-size: 14.5px; color: var(--iv-ink); }
.crm-iv .crm-iv__chip:hover { border-color: #98a2b3; }
.crm-iv .crm-iv__chip.is-on { background: #f1fdc2; border-color: #dcf27a; font-weight: 700; }
.dark .crm-iv .crm-iv__chip.is-on { background: rgba(212, 251, 8, .12); border-color: rgba(212, 251, 8, .45); }

/* ---- tiles */
.crm-iv__tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 26px; }
.crm-iv__tile.is-rich { display: flex; align-items: center; gap: 24px; padding: 18px 18px; border-radius: 8px; min-height: 104px; }
.crm-iv__tileic { flex: none; width: 66px; height: 66px; border-radius: 8px; display: grid; place-items: center; font-size: 28px; }
.crm-iv__tileic.is-blue { background: #f2f2f3; color: #282e34; }
.crm-iv__tileic.is-green { background: #f2f2f3; color: #282e34; }
.crm-iv__tileic.is-red { background: #f2f2f3; color: #d92d20; }
.crm-iv__tileic.is-grey { background: #f2f4f7; color: #667085; }
.dark .crm-iv__tileic.is-blue { background: #23272d; color: #e8eaed; }
.dark .crm-iv__tileic.is-green { background: #23272d; color: #e8eaed; }
.dark .crm-iv__tileic.is-red { background: #23272d; color: #fca5a5; }
.dark .crm-iv__tileic.is-grey { background: #23272d; color: #98a1ad; }
.crm-iv__tilewords { min-width: 0; }
.crm-iv__tile.is-rich .crm-iv__tilev { font-size: 28px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.crm-iv__tile.is-rich .crm-iv__tilel { font-size: 15px; margin-top: 4px; }
.crm-iv__tile.is-good { background: var(--iv-card); border-color: var(--iv-line); }
.crm-iv__tile.is-bad { background: var(--iv-card); border-color: var(--iv-line); }
.crm-iv__tile.is-bad .crm-iv__tilev { color: #b42318; }
.dark .crm-iv__tile.is-good, .dark .crm-iv__tile.is-bad { background: var(--iv-card); border-color: var(--iv-line); }
.dark .crm-iv__tile.is-bad .crm-iv__tilev { color: #fca5a5; }

/* ---- the table, in a card with its pager */
.crm-iv__card { border: 1px solid var(--iv-line); border-radius: 8px; background: var(--iv-card); overflow: hidden; }
.crm-iv__card .crm-iv__scroll { border: 0; border-radius: 0; }
.crm-iv__table.is-main { min-width: 1080px; }
.crm-iv__table.is-main th { padding: 16px 18px; background: var(--iv-card); color: var(--iv-ink); font-size: 15px; font-weight: 500; }
.crm-iv__table.is-main td { padding: 14px 18px; font-size: 15px; vertical-align: middle; border-top-color: var(--iv-line); }
.crm-iv__table.is-main tbody tr:hover td { background: var(--iv-soft); }
.crm-iv__table.is-main .crm-iv__no { font-weight: 800; }
.crm-iv__amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-iv__amt.is-owed { color: var(--iv-owed); font-weight: 600; }
.crm-iv__table.is-main .crm-iv__state { font-size: 14px; font-weight: 600; padding: 5px 12px; }
.crm-iv__table.is-main .crm-iv__state.is-draft { background: #eef0f4; color: #475467; }
.crm-iv__table.is-main .crm-iv__state.is-partial { background: #eef0f4; color: #282e34; }
.dark .crm-iv__table.is-main .crm-iv__state.is-draft { background: #23272d; color: #b8c0cc; }
.dark .crm-iv__table.is-main .crm-iv__state.is-partial { background: #23272d; color: #e8eaed; }
.crm-iv__table.is-main .crm-iv__late { margin-inline-start: 12px; font-size: 14px; font-weight: 600; color: var(--iv-bad); }
.crm-iv__table.is-main .crm-iv__told { font-size: 15px; font-weight: 600; color: var(--iv-good); }
.crm-iv__table.is-main .crm-iv__untold { font-size: 15px; color: var(--iv-muted); }

.crm-iv__acts { white-space: nowrap; }
.crm-iv__acts > * { vertical-align: middle; }
.crm-iv__acts .crm-iv__take,
.crm-iv__acts .crm-iv__send {
  height: 38px; padding: 0 18px; margin: 0 8px 0 0; border-radius: 8px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
[dir="rtl"] .crm-iv__acts .crm-iv__take, [dir="rtl"] .crm-iv__acts .crm-iv__send,
html.crm-rtl .crm-iv__acts .crm-iv__take, html.crm-rtl .crm-iv__acts .crm-iv__send { margin: 0 0 0 8px; }
.crm-iv__acts .crm-iv__take { border: 0; background: #d4fb08; color: #000; }
.crm-iv__acts .crm-iv__take:hover { background: #c6ec00; filter: none; }
.dark .crm-iv__acts .crm-iv__take { background: #d4fb08; color: #000; }
.crm-iv__acts .crm-iv__send { border: 1px solid var(--iv-line); background: var(--iv-card); color: var(--iv-ink); }
.crm-iv__acts .crm-iv__send:hover { border-color: #98a2b3; }
.crm-iv__acts .crm-iv__ico { width: 36px; height: 36px; color: var(--iv-blue); }
.crm-iv__acts .crm-iv__ico span { font-size: 20px; }
.dark .crm-iv__acts .crm-iv__ico:hover { background: rgba(212, 251, 8, .12); }

.crm-iv__pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 18px; border-top: 1px solid var(--iv-line);
}
.crm-iv__per { display: flex; align-items: center; gap: 16px; color: var(--iv-muted); font-size: 15px; }
.crm-iv__per span:first-child { color: var(--iv-ink); }
.crm-iv .crm-iv__per select {
  width: 90px; height: 44px; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid var(--iv-line) !important; border-radius: 8px; background-color: var(--iv-card) !important;
  color: var(--iv-ink); font: inherit; font-size: 15px;
}
.crm-iv__pages { display: flex; align-items: center; gap: 10px; }
.crm-iv .crm-iv__pbtn {
  min-width: 42px; height: 42px; padding: 0 8px; display: grid; place-items: center;
  border: 1px solid var(--iv-line); border-radius: 8px; background: var(--iv-card); color: var(--iv-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.crm-iv .crm-iv__pbtn span { font-size: 18px; }
.crm-iv .crm-iv__pbtn:disabled { color: #c5cad3; cursor: default; }
.dark .crm-iv .crm-iv__pbtn:disabled { color: #4a515b; }
.crm-iv .crm-iv__pbtn.is-on { background: #d4fb08; border-color: #d4fb08; color: #111; }
.dark .crm-iv .crm-iv__pbtn.is-on { background: #d4fb08; border-color: #d4fb08; color: #111; }
.crm-iv__pgap { color: var(--iv-muted); }

@media (max-width: 900px) {
  .crm-iv__head.is-hero { flex-wrap: wrap; }
  .crm-iv__heroic { width: 56px; height: 56px; font-size: 24px; }
  .crm-iv__head.is-hero .crm-iv__title { font-size: 24px; }
}
:root.dark .crm-iv__acts .crm-iv__ico, .dark .crm-iv__acts .crm-iv__ico { color: #e8eaed; }

/* The period picker sits at the end of the filter chips (owner, 2026-10-04). */
.crm-iv__chips .crm-iv__period { margin-inline-start: auto; }
.crm-iv .crm-iv__period .crm-period__face { height: 42px; padding: 0 18px; font-size: 14.5px; }
.crm-iv .crm-iv__period .crm-period__menu { inset-inline-start: auto; inset-inline-end: 0; }