/* =============================================================================
   EXR Commissions — application shell
   Light theme aligned with the EXR Brand Book (Class C logo / Pantone 8763 C
   Darker Blue, Pantone 325 U Lighter Blue, neutral grey/black).

   Color logic
   -----------
   Brand book sets a 60/20/10/10 distribution: 60% bright/desaturated, 20%
   darker brand blue, 10% lighter brand blue, 10% black/grey. We follow that
   here: the canvas + cards are near-white, the topbar carries the dark brand
   blue (so the brand reads from anywhere on the page), and lighter blue is
   reserved for active/primary affordances. We deliberately keep accent
   colors away from large surfaces because the brand book warns against
   applying the symbol on saturated brand backgrounds.

   We keep every utility class name from the previous dark theme (.btn,
   .card, .panel, .badge, .topbar, .ui-card, .stage-row, .callout, .pill-*,
   .flash-*, ...) so all existing templates continue to render — only the
   tokens behind them change.
============================================================================= */

:root {
  /* --- Brand tokens (from Brand Book §4.0) ----------------------------- */
  --exr-blue-dark:   #06576F;  /* Pantone 8763 C, RGB(6,87,111)            */
  --exr-blue-darker: #044254;  /* hover/pressed state for darker blue      */
  --exr-blue-light:  #33CCCC;  /* Pantone 325 U,  RGB(51,204,204)          */
  --exr-blue-soft:   #cfeeee;  /* tint for backgrounds / pills             */
  --exr-grey-900:    #1c2629;  /* body text                                */
  --exr-grey-700:    #3a4a4e;  /* strong secondary text                    */
  --exr-grey-500:    #647276;  /* muted text                               */
  --exr-grey-300:    #c9d2d4;  /* hairline borders                         */
  --exr-grey-200:    #dde4e6;  /* table dividers                           */
  --exr-grey-100:    #eef2f3;  /* subtle row striping / hover              */
  --exr-grey-50:     #f5f7f8;  /* page background                          */

  /* --- Semantic tokens consumed by every component --------------------- */
  --bg:        var(--exr-grey-50);
  --panel:     #ffffff;
  --panel-2:   var(--exr-grey-100);
  --border:    var(--exr-grey-300);
  --border-soft: var(--exr-grey-200);
  --text:      var(--exr-grey-900);
  --muted:     var(--exr-grey-500);
  --accent:    var(--exr-blue-dark);
  --accent-2:  var(--exr-blue-dark);
  --accent-on: #ffffff;          /* readable foreground on the accent     */
  --accent-soft-bg: rgba(6, 87, 111, 0.08);
  /* Warn deliberately darker than the brand amber chip color so that text
     rendered in --warn on a chip-tinted background still hits WCAG AA
     (~4.5:1). The lighter #b06d00 is reserved for icon strokes / borders. */
  --warn:      #7d4d00;
  --good:      #1f7a4d;
  --bad:       #b3322a;

  --shadow-sm: 0 1px 2px rgba(15, 36, 41, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 36, 41, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 36, 41, 0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Topbar --------------------------------------------------------------
   Darker brand blue per the Brand Book "Class C / corporate colors" rule:
   when the symbol sits on a darker blue background the white-and-light-blue
   logo is the correct mark, which is what we ship in /static/brand. */
.topbar {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 28px;
  background: var(--exr-blue-dark);
  color: #ffffff;
  border-bottom: 1px solid var(--exr-blue-darker);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand a {
  display: inline-flex; align-items: center; gap: 12px;
  color: #ffffff; font-weight: 600; font-size: 15px; letter-spacing: 0.2px;
}
.topbar .brand a:hover { text-decoration: none; opacity: 0.92; }
.topbar .brand-logo {
  height: 30px; width: auto; display: block;
  /* Subtle drop shadow keeps the logo from disappearing into the deep
     blue background without violating the "no effects on the symbol" rule
     visibly — opacity is low enough to read as anti-aliasing. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.topbar .brand-text { line-height: 1; font-weight: 600; font-size: 15px; }
.topbar .brand .tenant {
  margin-left: 4px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #d8f3f3; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.topbar nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  display: inline-flex; align-items: center; line-height: 1;
  color: rgba(255, 255, 255, 0.78); font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  transition: background 120ms ease, color 120ms ease;
}
.topbar nav a:hover {
  color: #ffffff; background: rgba(255, 255, 255, 0.10);
  text-decoration: none;
}
/* Active nav uses darker brand blue text on the lighter brand blue chip;
   #044254 on #33CCCC measures ~5.7:1 and clears WCAG AA at 14px. */
.topbar nav a.active,
.topbar nav a[aria-current="page"] {
  color: var(--exr-blue-darker); background: var(--exr-blue-light);
  font-weight: 600;
}
.topbar .user {
  color: rgba(255, 255, 255, 0.85);
  display: flex; gap: 14px; align-items: center; font-size: 13px;
}
/* The role tag sits on the dark-blue topbar; brand light blue at #33CCCC
   only hits ~4.1:1 against #06576F, so we use a brighter tint
   (~#9BE7E7) which clears AA for non-large text while still reading as
   the brand teal family. */
.topbar .user em {
  color: #9be7e7; font-style: normal; font-weight: 600;
}
.topbar .user a.muted { color: rgba(255, 255, 255, 0.72); }
.topbar .user a.muted:hover { color: #ffffff; text-decoration: none; }

/* ---------------------------------------------------------------------
   Grouped nav: Profiles / Finance / Admin dropdown menus.
   Each ".nav-group" is an Alpine x-data island; the toggle button uses
   the same pill styling as a top-level nav link so it visually reads as
   a nav item with a caret.
   --------------------------------------------------------------------- */
[x-cloak] { display: none !important; }

.topbar .nav-group { position: relative; display: inline-block; }
.topbar .nav-group-toggle {
  appearance: none; border: 0; background: transparent;
  color: rgba(255, 255, 255, 0.78); font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  font-family: inherit; font-size: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.topbar .nav-group-toggle:hover {
  color: #ffffff; background: rgba(255, 255, 255, 0.10);
}
.topbar .nav-group-toggle[aria-expanded="true"] {
  color: #ffffff; background: rgba(255, 255, 255, 0.14);
}
.topbar .nav-caret {
  font-size: 10px; line-height: 1; opacity: 0.85;
  transform: translateY(1px);
}

/* "Soon" pill on not-yet-built nav items (e.g. Receivables). */
.topbar .nav-soon {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; line-height: 1;
  padding: 2px 6px; margin-left: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #d8f3f3;
}

/* Placeholder "Coming soon" pages (e.g. Receivables). */
.coming-soon { text-align: center; padding: 64px 24px; }
.coming-soon .coming-soon-tag {
  display: inline-block; margin: 8px 0 16px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--exr-blue-light, #33CCCC);
  color: var(--exr-blue-darker, #044254);
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  font-size: 12px;
}

.topbar .nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 180px;
  background: #ffffff;
  color: var(--exr-blue-darker, #044254);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  z-index: 60;
  display: flex; flex-direction: column;
}
.topbar .nav-menu a {
  color: var(--exr-blue-darker, #044254);
  padding: 8px 12px; border-radius: 6px;
  font-weight: 500; font-size: 13.5px;
  white-space: nowrap;
}
.topbar .nav-menu a:hover {
  background: var(--exr-blue-light, #33CCCC);
  color: #ffffff; text-decoration: none;
}

/* ---------------------------------------------------------------------
   User chip: avatar circle + name + caret, opens a small menu with
   "My Profile" and "Sign Out". Placed inside .topbar .user so it
   inherits the right typography but overrides the legacy span/em
   layout.
   --------------------------------------------------------------------- */
.topbar .user-menu { position: relative; }
.topbar .user-chip {
  appearance: none; border: 0; background: transparent;
  color: #ffffff; font-family: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  transition: background 120ms ease;
}
.topbar .user-chip:hover { background: rgba(255, 255, 255, 0.10); }
.topbar .user-chip[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}
.topbar .user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--exr-blue-light, #33CCCC);
  color: var(--exr-blue-darker, #044254);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.topbar .user-name {
  font-weight: 500; color: #ffffff;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .user-menu-dropdown {
  /* Right-anchored — the chip lives at the right edge of the topbar, so
     a left-anchored menu would clip off-screen. */
  left: auto; right: 0; min-width: 200px;
}
.topbar .user-menu-meta {
  padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; gap: 2px;
}
.topbar .user-menu-meta strong {
  color: var(--exr-blue-darker, #044254);
  font-size: 13.5px; font-weight: 600;
}
.topbar .user-menu-meta em {
  color: rgba(0, 0, 0, 0.6); font-style: normal;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase;
}

.container { padding: 28px; max-width: 1240px; margin: 0 auto; }

/* --- Typography ---------------------------------------------------------- */
h1 { font-size: 24px; margin: 4px 0 18px; font-weight: 600; letter-spacing: -0.2px; color: var(--exr-grey-900); }
h2 { font-size: 16px; margin: 24px 0 10px; color: var(--exr-grey-900); font-weight: 600; }
h3 { font-size: 14px; margin: 16px 0 8px; color: var(--exr-grey-700); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.warn { color: var(--warn); }

.row { display: flex; gap: 12px; align-items: center; }
.row.spread { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Stat cards ---------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.card.stat .stat-num { font-size: 28px; font-weight: 600; color: var(--exr-grey-900); letter-spacing: -0.4px; }
.card.stat .stat-num.small { font-size: 16px; }
.card.stat .stat-label { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }

/* --- Data tables --------------------------------------------------------- */
table.data {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table.data th, table.data td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data th {
  background: var(--exr-grey-100); color: var(--exr-grey-700);
  font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
}
table.data tbody tr:hover { background: rgba(6, 87, 111, 0.035); }
table.data.editable input { width: 100%; }
table.data a { color: var(--accent); font-weight: 500; }

/* --- Status / W9 badges -------------------------------------------------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px;
  font-weight: 600; letter-spacing: 0.2px;
  background: var(--exr-grey-100); color: var(--exr-grey-700);
  border: 1px solid var(--border-soft);
}
.badge.status-draft        { background: var(--exr-grey-100);              color: var(--exr-grey-700); border-color: var(--border-soft); }
.badge.status-approved     { background: rgba(6, 87, 111, 0.10);           color: var(--exr-blue-dark); border-color: rgba(6, 87, 111, 0.25); }
.badge.status-queued_billcom { background: rgba(31, 122, 77, 0.10);        color: var(--good);          border-color: rgba(31, 122, 77, 0.30); }
.badge.status-exported     { background: rgba(31, 122, 77, 0.16);          color: #145e3a;              border-color: rgba(31, 122, 77, 0.36); }
.badge.status-failed       { background: rgba(179, 50, 42, 0.10);          color: var(--bad);           border-color: rgba(179, 50, 42, 0.32); }
.badge.w9-on_file          { background: rgba(31, 122, 77, 0.10);          color: var(--good);          border-color: rgba(31, 122, 77, 0.30); }
.badge.w9-requested        { background: rgba(176, 109, 0, 0.14);          color: var(--warn);          border-color: rgba(125, 77, 0, 0.42); }
.badge.w9-not_received     { background: rgba(179, 50, 42, 0.10);          color: var(--bad);           border-color: rgba(179, 50, 42, 0.32); }
.badge.agent-status-active       { background: rgba(31, 122, 77, 0.10);    color: var(--good);          border-color: rgba(31, 122, 77, 0.30); }
.badge.agent-status-suspended    { background: rgba(176, 109, 0, 0.14);    color: var(--warn);          border-color: rgba(125, 77, 0, 0.42); }
.badge.agent-status-deactivated  { background: var(--exr-grey-100);        color: var(--exr-grey-700); border-color: var(--border-soft); }
.badge.ready                     { background: rgba(31, 122, 77, 0.12);    color: var(--good);          border-color: rgba(31, 122, 77, 0.32); }
.badge.warn                      { background: rgba(176, 109, 0, 0.14);    color: var(--warn);          border-color: rgba(125, 77, 0, 0.42); }

/* --- Agent status tabs --------------------------------------------------- */
.agent-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border-soft);
  margin: 12px 0 16px;
}
.agent-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; margin-bottom: -1px;
  border: 1px solid transparent; border-bottom: none;
  border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);
  color: var(--exr-grey-700); text-decoration: none; font-weight: 500; font-size: 14px;
  background: transparent;
}
.agent-tab:hover { background: var(--exr-grey-100); color: var(--exr-blue-dark); }
.agent-tab.is-active {
  background: #fff; color: var(--exr-blue-dark);
  border-color: var(--border-soft);
  border-bottom-color: #fff;
}
.agent-tab__count {
  display: inline-block; min-width: 22px; padding: 1px 8px;
  border-radius: 999px; background: var(--exr-grey-100);
  color: var(--exr-grey-700); font-size: 12px; font-weight: 600; text-align: center;
}
.agent-tab.is-active .agent-tab__count { background: rgba(6, 87, 111, 0.10); color: var(--exr-blue-dark); }
/* Push the All tab to the far right — opt-in wider view, not the default. */
.agent-tab--all { margin-left: auto; }

/* --- Plain key/value list (used on integration detail pages) ------------ */
.kv-list { list-style: none; padding: 0; margin: 0; }
.kv-list li {
  display: grid; grid-template-columns: 220px 1fr; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--border-soft);
  font-size: 14px; align-items: baseline;
}
.kv-list li:last-child { border-bottom: none; }
.kv-list .kv-label { color: var(--exr-grey-700); font-weight: 500; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm);
  background: #ffffff; color: var(--exr-grey-900);
  border: 1px solid var(--border); cursor: pointer; font: inherit; font-weight: 500;
  text-decoration: none; line-height: 1.3;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { background: var(--exr-grey-100); border-color: var(--exr-grey-500); text-decoration: none; }
.btn:active { background: var(--exr-grey-200); }
.btn.primary {
  background: var(--exr-blue-dark); border-color: var(--exr-blue-dark); color: var(--accent-on);
  box-shadow: 0 1px 2px rgba(6, 87, 111, 0.20);
}
.btn.primary:hover { background: var(--exr-blue-darker); border-color: var(--exr-blue-darker); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Inline loading spinner (e.g. submit buttons mid-request). */
.spinner {
  display: inline-block; width: 0.9em; height: 0.9em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -0.15em; margin-right: 0.45em;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Thin indeterminate progress bar for in-flight modal actions. */
.modal-progress {
  height: 3px; width: 100%; margin: 4px 0 12px;
  background: var(--exr-grey-200); border-radius: 2px;
  overflow: hidden; position: relative;
}
.modal-progress::after {
  content: ""; position: absolute; top: 0; left: -40%;
  width: 40%; height: 100%; background: var(--exr-blue-dark);
  animation: indeterminate 1.1s ease-in-out infinite;
}
@keyframes indeterminate {
  0% { left: -40%; } 100% { left: 100%; }
}
.btn.btn-danger {
  background: #b3261e; color: #ffffff; border-color: #b3261e;
}
.btn.btn-danger:hover { background: #8c1d18; border-color: #8c1d18; }

/* ---------------------------------------------------------------------
   Bulk-action bar — used on /accounts/{id} for multi-property tagging.
   Lives on top of an Alpine x-data island; the .is-active state on the
   select-all chip and the .row-selected highlight on table rows are
   driven by Alpine class bindings.
   --------------------------------------------------------------------- */
.bulk-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: .5rem; padding: .5rem .75rem;
  background: rgba(6, 87, 111, 0.04);
  border: 1px solid rgba(6, 87, 111, 0.10);
  border-radius: 8px;
}
.bulk-bar__select-all {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .55rem; border-radius: 999px;
  font-size: 12.5px; color: rgba(0, 0, 0, 0.62);
  background: transparent; transition: background 120ms ease, color 120ms ease;
  cursor: pointer; user-select: none;
}
.bulk-bar__select-all.is-active {
  background: var(--exr-blue-light, #33CCCC); color: #ffffff;
  font-weight: 600;
}
.bulk-bar__select-all.is-active strong { color: #ffffff; }
.bulk-bar__action { min-width: 220px; }

.link-existing { margin: .5rem 0; }
.link-existing__panel {
  margin-top: .5rem; padding: .75rem;
  background: rgba(6, 87, 111, 0.04);
  border: 1px solid rgba(6, 87, 111, 0.10);
  border-radius: 8px;
}
.link-existing__filter {
  width: 100%; max-width: 360px; margin: .25rem 0 .5rem;
  padding: .4rem .6rem; border-radius: 6px;
  border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.16));
  font-size: 13px;
}
.link-existing__group { margin: .25rem 0 .5rem; }
.link-existing__group-title {
  margin: .5rem 0 .25rem; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  color: rgba(0, 0, 0, 0.55);
}
.link-existing__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 320px; overflow-y: auto;
}
.link-existing__list li { padding: .15rem 0; }
.link-existing__list label {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer;
}

table.data tbody tr.row-selected {
  background: rgba(51, 204, 204, 0.10);
}
table.data tbody tr.row-selected:hover {
  background: rgba(51, 204, 204, 0.18);
}
.btn.danger { color: var(--bad); border-color: rgba(179, 50, 42, 0.40); background: #ffffff; }
.btn.danger:hover { background: rgba(179, 50, 42, 0.06); border-color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 0.85em; }
table.data .actions-col { text-align: right; white-space: nowrap; width: 1%; }

/* --- Filter bar / tabs --------------------------------------------------- */
.filterbar { display: flex; gap: 8px; margin: 8px 0 16px; flex-wrap: wrap; }
.filterbar a {
  padding: 6px 12px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--border); color: var(--exr-grey-700); font-weight: 500;
}
.filterbar a:hover { background: var(--exr-grey-100); text-decoration: none; }
.filterbar a.active {
  background: var(--exr-blue-dark); border-color: var(--exr-blue-dark); color: #ffffff;
}

/* --- Forms --------------------------------------------------------------- */
.form fieldset {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 18px 20px; margin-bottom: 16px; background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.form legend { padding: 0 8px; color: var(--exr-grey-700); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.form label { display: grid; gap: 4px; margin: 10px 0; color: var(--exr-grey-700); font-size: 12.5px; font-weight: 500; }
.form label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form input, .form select, .form textarea, table.data input {
  background: #ffffff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form input:focus, .form select:focus, .form textarea:focus, table.data input:focus {
  outline: none; border-color: var(--exr-blue-dark);
  box-shadow: 0 0 0 3px rgba(6, 87, 111, 0.14);
}

/* --- Multi-column fieldsets ------------------------------------------- */
/* Opt-in horizontal layout for fieldsets whose direct-child <label>s     */
/* should sit side-by-side. <legend>, <p>, and any label.full span the    */
/* full row. Used by the property form's Identity (cols-2) and Default    */
/* OTT inputs (cols-2, with each label containing the dual $/% pair).    */
.form fieldset.cols-2,
.form fieldset.cols-3 { display: grid; column-gap: 18px; row-gap: 4px; }
.form fieldset.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form fieldset.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form fieldset.cols-2 > legend,
.form fieldset.cols-3 > legend,
.form fieldset.cols-2 > p,
.form fieldset.cols-3 > p,
.form fieldset.cols-2 > .full,
.form fieldset.cols-3 > .full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form fieldset.cols-2,
  .form fieldset.cols-3 { grid-template-columns: 1fr; }
}

/* --- $-or-% paired input --------------------------------------------- */
/* Two inputs that represent the same field expressed as either a flat $ */
/* amount OR a percent of GCI. Visually a single control: [$ ___] or [%] */
/* with a thin "or" between. Mutual exclusion is enforced server-side    */
/* and hinted in-page by app/templates/properties/form.html's Alpine.    */
.amount-or-pct {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 6px;
}
.amount-or-pct .ip-wrap {
  position: relative; display: flex; align-items: stretch;
}
.amount-or-pct .ip-wrap .ip-prefix,
.amount-or-pct .ip-wrap .ip-suffix {
  display: inline-flex; align-items: center; padding: 0 8px;
  background: var(--exr-grey-100);
  border: 1px solid var(--border);
  color: var(--exr-grey-700); font-size: 12.5px; font-weight: 600;
}
.amount-or-pct .ip-wrap .ip-prefix {
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.amount-or-pct .ip-wrap .ip-suffix {
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.amount-or-pct .ip-wrap input {
  flex: 1 1 auto; min-width: 0;
  border-radius: 0;
  border-right: none;
  text-align: right;
}
.amount-or-pct .ip-wrap input:last-child { border-right: 1px solid var(--border); }
.amount-or-pct .ip-wrap input:focus { z-index: 1; }
.amount-or-pct .or {
  font-size: 11px; color: var(--exr-grey-500); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
}

/* --- Form action bar -------------------------------------------------- */
.form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 12px;
}

/* --- Inline checkbox row --------------------------------------------- */
.checkbox-row {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin: 8px 0;
}
.checkbox-row label {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 6px; margin: 0; font-size: 13px;
}

.form .hint, .form .muted.small {
  display: block; font-size: 11.5px; color: var(--exr-grey-700);
  font-weight: 400; margin-top: 4px; line-height: 1.4;
}

/* --- Compact percentage rows (e.g. agent commission splits) ----------- */
/* Two-column grid of "Label …………… [ 100.00 ] %" rows. Collapses to a   */
/* single column on narrow screens. Used by the .splits fieldset.       */
.splits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 28px;
  row-gap: 2px;
}
@media (max-width: 720px) {
  .splits-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
.form fieldset.splits label.split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}
.split-input-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.form fieldset.splits .split-input-group input {
  width: 5.5em;          /* fits "100.00" + native stepper comfortably */
  text-align: right;
  padding: 6px 8px;
}
.split-suffix {
  color: var(--exr-grey-700);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}

/* --- Pre/code blocks ----------------------------------------------------- */
pre {
  background: var(--exr-grey-100); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 12px; overflow: auto; font-size: 12px; color: var(--exr-grey-900);
}

/* --- Auth shell (login / callback) -------------------------------------- */
.auth-shell {
  max-width: 440px; margin: 80px auto; padding: 36px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-md);
}
.auth-shell-logo {
  display: block; margin: 0 auto 18px;
  height: 88px; width: auto;
}
.auth-shell h1 { font-size: 22px; margin: 0 0 6px; }
.auth-shell .btn { margin-top: 16px; }

/* --- Page eyebrow / title ------------------------------------------------ */
.eyebrow {
  text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px;
  color: var(--muted); margin: 0 0 8px; font-weight: 600;
}
.eyebrow a { color: var(--muted); }
.page-title { font-size: 28px; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.3px; color: var(--exr-grey-900); }

/* --- Shared card component (templates/_components/card.html) ------------ */
.ui-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 0.05s ease;
}
.ui-card-link { display: block; color: inherit; }
.ui-card-link:hover {
  border-color: var(--exr-blue-dark);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.ui-card-link:hover .ui-card-chevron { color: var(--accent); transform: translateX(2px); }
.ui-card-link:active { transform: translateY(1px); }
.ui-card-overlay { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ui-card-link form, .ui-card-link button,
.ui-card-link a:not(.ui-card-overlay),
.ui-card-link input, .ui-card-link select, .ui-card-link textarea {
  position: relative; z-index: 2;
}

.ui-card-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ui-card-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.4px;
}
.ui-card-icon.large { flex-basis: 56px; width: 56px; height: 56px; font-size: 16px; border-radius: 12px; }
/* Tones leaning on the brand palette: blue is the brand teal, green / amber
   stay system colors but in the lighter light-theme tints. */
.tone-blue   { background: rgba(6, 87, 111, 0.10); color: var(--exr-blue-dark); }
.tone-green  { background: rgba(31, 122, 77, 0.12); color: var(--good); }
.tone-amber  { background: rgba(176, 109, 0, 0.12); color: var(--warn); }
.tone-slate  { background: var(--exr-grey-100); color: var(--exr-grey-700); }

.ui-card-titles { flex: 1 1 240px; min-width: 0; }
.ui-card-eyebrow {
  margin: 0 0 4px; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.ui-card-title-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ui-card-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--exr-grey-900); }
.ui-card-subtitle { margin: 6px 0 0; }
.ui-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ui-card-chevron {
  color: var(--muted); font-size: 22px; line-height: 1; padding-left: 4px;
  transition: color 120ms ease, transform 120ms ease;
}
/* Collapsible environment cards (Routable). Header toggles the body; the
   chevron points right when collapsed and rotates down when open. */
.cred-env-head { cursor: pointer; user-select: none; }
.cred-env-head:hover .cred-env-chevron { color: var(--accent); }
.cred-env-chevron { align-self: center; transform: rotate(0deg); }
.cred-env-chevron.is-open { transform: rotate(90deg); }
.ui-card-body { margin-top: 14px; }
.ui-card-body-flush { margin-top: 0; }
.ui-card-body > *:first-child { margin-top: 0; }
.ui-card-body > *:last-child  { margin-bottom: 0; }
.ui-card-body p { margin: 8px 0; }

.pill-neutral { background: var(--exr-grey-100); color: var(--exr-grey-700); }

/* Backwards-compat alias for legacy .panel markup. */
.panel {
  position: relative;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.panel-title { margin: 0 0 12px; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; color: var(--exr-grey-900); font-weight: 600; }

/* --- Integrations list grid --------------------------------------------- */
.integration-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px; margin-top: 24px;
}
.integration-card-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  color: var(--muted); font-size: 12px;
  border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 16px;
}
.integration-card-meta .mono { color: var(--exr-grey-900); }

.integration-header {
  display: flex; gap: 16px; align-items: flex-start; margin: 8px 0 24px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.integration-header .ui-card-icon { flex-basis: 56px; width: 56px; height: 56px; font-size: 16px; }

.kv-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 600; }
.kv-value { font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.connection-grid { margin: 8px 0 16px; }

.action-row {
  display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px;
  border-top: 1px solid var(--border-soft); margin-top: 12px;
}
.action-row form { display: inline; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--exr-grey-100); color: var(--exr-grey-700); letter-spacing: 0.3px;
  border: 1px solid var(--border-soft);
}
.pill-good { background: rgba(31, 122, 77, 0.12);  color: var(--good); border-color: rgba(31, 122, 77, 0.30); }
.pill-warn { background: rgba(176, 109, 0, 0.12);  color: var(--warn); border-color: rgba(176, 109, 0, 0.30); }
.pill-bad  { background: rgba(179, 50, 42, 0.12);  color: var(--bad);  border-color: rgba(179, 50, 42, 0.30); }

/* QuickBooks sandbox/production connection banner on the integration page. */
.env-status {
  padding: 12px 16px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--exr-grey-100);
  margin: 0 0 16px;
}
.env-status .row { align-items: center; }
.env-status p { margin: 0; }

.flash {
  padding: 11px 16px; border-radius: var(--radius-sm); margin: 0 0 16px;
  border: 1px solid var(--border-soft); background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.flash-ok    { border-color: rgba(31, 122, 77, 0.40);  background: rgba(31, 122, 77, 0.06);  color: #155c39; }
.flash-error { border-color: rgba(179, 50, 42, 0.40);  background: rgba(179, 50, 42, 0.06);  color: #8a261f; }
.flash-info  { border-color: rgba(6, 87, 111, 0.30);   background: rgba(6, 87, 111, 0.06);   color: var(--exr-blue-dark); }
.flash-warn  { border-color: rgba(176, 109, 0, 0.40);  background: rgba(176, 109, 0, 0.07);  color: #7d4d00; }

.integration-header-body { flex: 1; min-width: 0; }
.cred-row { background: var(--exr-grey-100); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0 16px; }
.cred-form { margin-top: 16px; }
.cred-input {
  flex: 1; min-width: 0;
  background: #ffffff; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px; width: 100%;
}
.cred-input:focus {
  outline: none; border-color: var(--exr-blue-dark);
  box-shadow: 0 0 0 3px rgba(6, 87, 111, 0.14);
}
.check-list { list-style: none; padding: 0; margin: 6px 0 0; }
.check-list li { padding: 4px 0 4px 22px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }

/* --- Spacing utilities --------------------------------------------------- */
.stack-xs { margin-top: 4px; }
.stack-sm { margin-top: 6px; }
.stack-md { margin-top: 12px; }
.stack-lg { margin-top: 18px; }
.row-tight { gap: 8px; align-items: stretch; }
.no-margin { margin: 0; }
.divider { border: none; border-top: 1px solid var(--border-soft); margin: 18px 0; }

/* --- HTMX progress indicator -------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* --- Commission waterfall split-sheet styling --------------------------- */
/* Legacy classes (.stage-row, .subtotal) — still used by other tables that
   render a flat waterfall (e.g. policy preview). The unified deal page
   uses the .waterfall__step block layout below instead. */
.stage-row > th {
  background: var(--accent-soft-bg);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding-top: 14px;
  color: var(--exr-blue-dark);
  font-weight: 700;
}
.subtotal > th {
  border-top: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--exr-grey-700);
  background: var(--exr-grey-100);
}

/* Unified waterfall (the deal page IS the split sheet). Each step is a
   self-contained card with a number badge + title + total on the right;
   "derived" steps (Commission Basis, House Net) are highlighted because
   they're the load-bearing checkpoints the back-office mentally tracks. */
.waterfall { margin: 24px 0 8px; }
.waterfall__step {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 14px 16px;
  margin: 10px 0;
}
.waterfall__step--derived {
  background: var(--accent-soft-bg);
  border-color: rgba(6, 87, 111, 0.35);
}
.waterfall__step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.waterfall__step-head h3 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}
.waterfall__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--exr-grey-100);
  color: var(--exr-grey-700);
  font-weight: 600;
  font-size: 0.85rem;
}
.waterfall__step--derived .waterfall__step-num {
  background: var(--exr-blue-dark);
  color: #ffffff;
}
.waterfall__step-amount {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--exr-grey-900);
  margin-left: auto;
}
.waterfall__step-amount--neg { color: var(--exr-grey-700); }
.waterfall__step .data { margin-top: 10px; margin-bottom: 0; }
.waterfall__reconcile {
  margin-top: 16px;
  padding: 12px 16px;
  border-top: 2px solid var(--border);
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.waterfall__reconcile p { margin: 4px 0; }

/* Collapsed editing sections beneath the waterfall (Pass 1 holds the
   existing edit forms here; Pass 2 inlines them into the steps). */
.edit-section {
  margin: 18px 0;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--exr-grey-100);
}
.edit-section[open] { background: #ffffff; }
.edit-section > summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.edit-section > summary::-webkit-details-marker { display: none; }
.edit-section > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--exr-grey-700);
  transition: transform 120ms ease;
}
.edit-section[open] > summary::before { transform: rotate(90deg); }
.edit-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--exr-grey-900);
  margin-right: 4px;
}
.callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 12px 0 24px;
  border: 1px solid rgba(6, 87, 111, 0.25);
  border-radius: var(--radius-sm);
  background: var(--accent-soft-bg);
  color: var(--exr-blue-dark);
}
.callout .btn { margin-left: auto; }

/* --- View toggle (table | cards) ---------------------------------------- */
.view-toggle {
  display: inline-flex; gap: 2px;
  background: var(--exr-grey-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.view-toggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--exr-grey-700);
  cursor: pointer; padding: 0;
  transition: background 120ms ease, color 120ms ease;
}
.view-toggle__btn:hover { color: var(--exr-grey-900); background: rgba(255,255,255,0.6); }
.view-toggle__btn.is-active {
  background: #ffffff;
  color: var(--exr-blue-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.view-toggle-row {
  display: flex; align-items: center; justify-content: flex-end;
  margin: 0 0 12px;
}

/* --- listview container: swap table ↔ cards ---------------------------- */
.listview .listview__cards { display: none; }
.listview.is-cards .listview__table { display: none; }
.listview.is-cards .listview__cards { display: grid; }

/* Clickable rows in table mode */
.listview__table tbody tr[data-href] { cursor: pointer; }
.listview__table tbody tr[data-href]:hover { background: rgba(6, 87, 111, 0.05); }
.listview__table tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--exr-blue-dark); outline-offset: -2px;
}

/* --- Card grid + listcard ---------------------------------------------- */
.listview__cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.listcard {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.listcard:hover,
.listcard:has(.listcard__overlay:hover),
.listcard:has(.listcard__overlay:focus-visible) {
  border-color: var(--exr-blue-dark);
  box-shadow: 0 4px 12px rgba(6, 87, 111, 0.08);
  text-decoration: none;
  transform: translateY(-1px);
}
/* Stretched-link overlay: makes the whole card clickable while leaving
   nested anchors/buttons (e.g. an Edit action) clickable above it. */
.listcard__overlay {
  position: absolute; inset: 0;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
  z-index: 1;
}
.listcard__overlay:focus-visible {
  outline: 2px solid var(--exr-blue-dark); outline-offset: 2px;
}
.listcard a:not(.listcard__overlay),
.listcard button { position: relative; z-index: 2; }
.listcard__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
}
.listcard__title {
  font-weight: 600; color: var(--exr-blue-dark); font-size: 1.05em;
  line-height: 1.25;
}
.listcard__subtitle { color: var(--exr-grey-700); font-size: 0.9em; }
.listcard__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 0.9em;
  margin: 0;
}
.listcard__meta dt { color: var(--exr-grey-700); }
.listcard__meta dd { margin: 0; color: var(--exr-grey-900); }
.listcard__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --- Deal page tabs (Deal Details / Split Sheet) ----------------------- */
/* Two-tab UI inside the Deal show page. The active tab is reflected in
   the URL hash so deep links and the Back button keep working. We rely
   on Alpine to flip x-show; this CSS just styles the buttons and hides
   any tab marked x-cloak before Alpine has booted to avoid FOUC. */
[x-cloak] { display: none !important; }
.tabs-host { margin-top: 18px; }
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; flex-wrap: wrap;
}
.tabs__btn {
  appearance: none; background: transparent; border: 1px solid transparent;
  border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px 16px; font: inherit; font-weight: 500;
  color: var(--exr-grey-700); cursor: pointer;
  transform: translateY(1px);
}
.tabs__btn:hover { background: var(--exr-grey-100); color: var(--text); }
.tabs__btn.is-active {
  background: var(--panel); color: var(--exr-blue-dark);
  border-color: var(--border); font-weight: 600;
}
.tabs__panel { padding-top: 4px; }

/* Per-section status row ("Deal: Complete | Split: Pending Approval"). */
.section-status { margin: 6px 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.section-status .small { font-size: 0.85em; }

/* ── Deal page header ────────────────────────────────────────────────────
   The block above the at-a-glance KPI tiles. Two rows: the address H1
   and a single horizontal "meta strip" combining provenance (External
   ID / Source / Created via) with the live status pills (Deal / Split).
   Each chunk is a small-caps label sitting next to its value or badge,
   with hairline separators so the eye can scan rather than parse a
   muted comma-delimited sentence. */
.deal-header { margin: 4px 0 18px; }
.deal-header h1 { margin: 4px 0 10px; }
.deal-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 18px;
  font-size: 13px;
}
.deal-meta .meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.deal-meta .meta-label {
  color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  font-weight: 600;
}
.deal-meta .meta-value { color: var(--exr-grey-900); font-weight: 500; }
.deal-meta .meta-value.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--exr-grey-700);
}
/* A faint dot between provenance items. */
.deal-meta .meta-sep {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border);
}
/* A taller vertical bar between the provenance group and the live
   status group, so the two semantic clusters don't blur together. */
.deal-meta .meta-divider {
  display: inline-block;
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 4px;
}
/* Mobile / narrow screens: the meta strip wraps, which can orphan a
   stray dot or vertical bar at the start/end of a line. Hide the
   separators below the wrap breakpoint and let the row gap carry the
   visual rhythm — the small-caps labels make each chunk readable on
   their own. */
@media (max-width: 640px) {
  .deal-meta .meta-sep,
  .deal-meta .meta-divider { display: none; }
  .deal-meta .meta-item { white-space: normal; }
}

/* Creation-source badges (manual vs API). Reuse the badge base styles. */
.badge.source-MANUAL  { background: var(--exr-grey-100);              color: var(--exr-grey-700); border-color: var(--border-soft); }
.badge.source-EXR_API { background: rgba(6, 87, 111, 0.10);           color: var(--exr-blue-dark); border-color: rgba(6, 87, 111, 0.25); }

/* Stage row separators inside the waterfall table. */
table.data tr.stage-row > th { background: var(--exr-grey-100); color: var(--exr-grey-900); font-weight: 600; }
table.data tr.subtotal > th  { border-top: 1px dashed var(--border); }

/* ── Pass 2: inline-editable waterfall steps ──────────────────────────── */
/* Steps that contain inline %/$ forms get a slightly cooler tinted        */
/* background and a tighter input style so the editable rows visually     */
/* contrast with the read-only marker rows above and below.                */
.waterfall__step--editable {
  background: var(--exr-grey-100);
  border-color: var(--border);
}
.waterfall__step--editable .data { background: var(--panel); }

/* The four-column OTT inline table. Inputs are flush-right and small so  */
/* the row reads as "label · % · $" without dominating the page.          */
.ott-inline th, .agents-inline th { font-weight: 600; color: var(--exr-grey-700); }
.ott-inline td, .agents-inline td { vertical-align: middle; }
.ott-pct, .ott-amt, .agent-pct, .agent-amt {
  width: 6.5rem; text-align: right;
  padding: 4px 6px; font-variant-numeric: tabular-nums;
}
.ott-amt, .agent-amt { width: 8rem; }
.ott-inline tr.muted, .agents-inline tr.muted { font-style: italic; }
.ott-inline-form .btn, .agents-inline-form .btn { white-space: nowrap; }

/* ── Empty-state CTA inside a waterfall step ─────────────────────────────
   Used by Step 2 (External Co-Broker) and Step 3 (Off-The-Top) to
   replace a $0 row table when the deal has nothing in that bucket
   yet. Visually differentiated from the small "Edit" pill: looks like
   a friendly call-to-action so the section reads as actionable
   ("Add Co-Broker Commission +") instead of a busy list of zeros. */
.btn.add-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 2px;
  padding: 8px 14px;
  font-weight: 600;
  color: var(--exr-blue-dark);
  background: var(--accent-soft-bg);
  border: 1px dashed rgba(6, 87, 111, 0.35);
}
.btn.add-cta:hover {
  background: rgba(6, 87, 111, 0.14);
  border-color: var(--exr-blue-dark);
  text-decoration: none;
}
.btn.add-cta span { font-size: 16px; line-height: 1; font-weight: 700; }

/* ── Print mode (Task #14) ───────────────────────────────────────────────
   Goal: produce a paper-friendly split sheet that includes the
   Company-Listing Rule provenance panel (added in Task #10) along
   with the waterfall, line items, and approval metadata. Hides
   nav chrome, action buttons, and inline edit toggles so the
   printed page is just the sheet itself.

   Convention: anything visible on screen but irrelevant on paper
   gets `.no-print`; anything that should ONLY appear on the
   printed page (e.g. a printed-on timestamp) gets `.print-only`. */
.print-only { display: none; }

@media print {
  /* Hide screen-only chrome */
  .no-print,
  .topbar,
  nav,
  header.topbar { display: none !important; }
  .print-only { display: initial !important; }

  /* Edit affordances inside the waterfall: pencil-toggle buttons,
     inline edit forms, and the Alpine-controlled edit sub-panels
     all collapse so the printed page shows only the saved values. */
  .ott-inline-form,
  .agents-inline-form,
  .btn { display: none !important; }
  /* "Edit / Add" CTA buttons inside the waterfall steps. */
  .waterfall__step .btn.add-cta { display: none !important; }
  /* Re-show the dollar/percent text columns the buttons were paired with. */
  [x-show],
  [x-cloak] { display: revert !important; }

  /* Strip page-level styling that wastes ink. */
  body { background: #fff; color: #000; }
  .container { max-width: 100%; padding: 0; margin: 0; }
  .card, .panel, .ui-card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
  }
  /* Avoid awkward page breaks inside the CLR panel and inside any single
     waterfall step / table row. */
  .waterfall__step,
  .data tr,
  .card { page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  /* Hide the standalone "← All deals" back link if any template marks it. */
  a.back-link { display: none !important; }
}

/* Read-only "From EXR listing" commission facts panel on the deal
   page, rendered above the GCI editor. Tight 2-column grid so it
   reads as a label/value reference rather than an interactive form. */
.listing-commission .kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0;
  font-size: 13px;
}
.listing-commission .kv-grid dt {
  color: var(--muted);
  font-weight: 500;
}
.listing-commission .kv-grid dd { margin: 0; }

/* ---------------------------------------------------------------------
   Combobox — substring-filtering address picker on /properties/new and
   /properties/{id}/edit. Replaces the native <datalist> whose filtering
   behavior was inconsistent across browsers (Chrome prefix, Firefox
   substring, broken when autocomplete="off"). Anchored to the wrapping
   <label> via position:relative on .combobox.
   --------------------------------------------------------------------- */
.combobox { position: relative; }
.combobox input { width: 100%; }
.combobox-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  margin: 0; padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--border, #d4d8de);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 40;
}
.combobox-menu li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--exr-blue-darker, #044254);
}
.combobox-menu li.is-active,
.combobox-menu li:hover {
  background: var(--exr-blue-light, #33CCCC);
  color: #ffffff;
}
.combobox-addr { flex: 1 1 auto; }
.combobox-count {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
}

/* ---- Admin impersonation banner -------------------------------------- *
 * Shown across the top of every page while an admin is viewing the app as
 * another user. Deliberately high-contrast (amber) so it's impossible to
 * miss that the session is impersonated. Hidden in print via .no-print. */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #fde68a;
  color: #663c00;
  border-bottom: 2px solid #d99e00;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 60;
}
.impersonation-banner strong { color: #4a2c00; }
.impersonation-banner__real { opacity: 0.85; }

/* ---------------------------------------------------------------------
   Modal dialog — used by the landlord-transfer "Execute a transfer"
   flow. A single primary button opens this overlay; the method tabs
   swap which transfer form is shown. Alpine drives open/close state
   (x-show + x-cloak), so the markup is inert until the user opens it.
   --------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 7vh 16px 16px;
  background: rgba(15, 36, 41, 0.45);
  overflow-y: auto;
}
.modal-dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px;
  padding: 20px 24px 24px;
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.modal-head h3 { margin: 0; }
.modal-close {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted);
  padding: 0 6px; border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--exr-grey-100); color: var(--text); }
.payee-block h4 { font-size: 0.95rem; }
.payee-grid {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 14px; margin: 0;
}
.payee-grid dt { color: var(--muted); font-size: 0.85rem; }
.payee-grid dd { margin: 0; word-break: break-word; }
fieldset.req-type { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
fieldset.req-type legend { float: left; width: 100%; margin-bottom: 4px; }
.method-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.method-tab {
  appearance: none; cursor: pointer; font: inherit;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.method-tab:hover { background: var(--exr-grey-100); }
.method-tab.active {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}

.xfer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 4px 0 8px;
}
.xfer-card {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.xfer-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.xfer-card-title { font-weight: 600; color: var(--text); }
.xfer-card-desc { font-size: 12.5px; color: var(--muted); }

/* ── Accounting Fields (Settings) ────────────────────────────────────
   Edit/add forms render stacked labels; the list-config sub-block groups
   the provider + list + live value picker for a LIST field. */
.af-edit-form { margin-top: .5rem; padding: .75rem; background: var(--exr-grey-100);
  border: 1px solid var(--border-soft); border-radius: 8px; }
.af-edit-form label { display: block; margin-bottom: .55rem; font-weight: 500; }
.af-edit-form input, .af-edit-form select { width: 100%; }
.af-add-form { margin-top: .75rem; max-width: 540px; }
.af-add-form h3 { margin: 0 0 .6rem; }
.af-list-config { margin: .25rem 0 .55rem; padding: .55rem .65rem;
  background: #ffffff; border: 1px dashed var(--border-soft); border-radius: 6px; }
.af-values { margin-top: .4rem; }
.af-actions { display: flex; gap: .5rem; margin-top: .4rem; }
.af-internal { margin: .55rem 0; padding: .6rem .7rem;
  background: #ffffff; border: 1px solid var(--border-soft); border-radius: 6px; }
.af-internal h4 { margin: .7rem 0 .35rem; font-size: .9rem; }
.af-internal h4:first-of-type { margin-top: .2rem; }
.af-value-list { list-style: none; margin: 0 0 .5rem; padding: 0; }
.af-value-row { display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap; padding: .25rem 0; border-bottom: 1px solid var(--border-soft); }
.af-inline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.af-mapping { margin-top: .5rem; }
.af-mapping__table { width: 100%; }
.af-mapping__table select { width: 100%; }

/* App footer — persistent "Contact support" line shown on every page so
   users always have an in-app way to reach support. Hidden in print. */
.appfooter { margin-top: 2.5rem; padding: 1rem 1.25rem; text-align: center;
  font-size: .85rem; color: var(--text-muted, #667085);
  border-top: 1px solid var(--border-soft, #e4e7ec); }
.appfooter a { color: inherit; text-decoration: underline; }