/* The new design's shared parts (html.ad-on), for every signed-in role: type, page header, search,
   buttons, tables, tabs, status chips, cards, form fields, dialogs and states. Pages inherit these;
   a page that needs more has its own block further down. The approved dashboard, Conversations
   (agent-home.css) and company home (company-home.css) are the reference.

   The classic portal.css is full of !important and ID rules, so the look here often needs
   !important too. Only looks change: no rule here hides, moves or resizes what the classic logic
   depends on, apart from where a block says so. */

/* ---------- Tokens shared by every role ---------- */

html.ad-on body{
  /* Paper grain from the Conversations chat area, shared by the table header rows so they read as one family. */
  --ad-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.18 0 0 0 0.9 -0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
  --ad-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ad-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --ad-i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");
  --ad-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ad-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  /* The search glass and the select chevron are drawn as backgrounds (inputs have no ::before). */
  --ad-bg-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --ad-bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ad-focus: 0 0 0 3px color-mix(in srgb, var(--ad-blue) 22%, transparent);
  --ad-ring: color-mix(in srgb, var(--ad-navy-2) 50%, white);
  --ad-field-h: 40px;
  --ad-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Contrast (WCAG AA, 4.5:1 for text): the approved muted grey measured 4.3:1 on the warm canvas,
   the menu group titles 2.6:1 and the gold date 2.8:1. Same hues, a step darker. Gold stays as it
   was for icons and rules. */
html.ad-on{
  --ad-mute: #646f7f;
  --ad-gold-ink: #8f6418;
}

html.ad-on .ad-hello__date{
  color: var(--ad-gold-ink);
}

@media (min-width: 1024px){
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ad-nav-label{
    color: var(--ad-mute);
  }
}

/* The menu icons and the new group titles exist in every role's menu; Classic never shows them. */
html:not(.ad-on) .ra-owner__nav :is(.ad-ico, .ad-nav-label, .ad-nav-sep, .ad-nav-foot){
  display: none !important;
}

/* ---------- The menu on phones and tablets: one row of pills that scrolls sideways ----------
   The classic two-row grid let long names run into each other. The Money items stay in the classic
   pop-up (agent.js places it, fixed, under its button), restyled as a card. */

@media (max-width: 1023px){
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav):not([hidden]){
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px;
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 10px 16px !important;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-bottom: 1px solid var(--ad-line);
    background: var(--ad-bg) !important;
    background-image: none !important;
    box-shadow: none;
    font-family: var(--ad-sans);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 16px;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav)::-webkit-scrollbar{
    display: none;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) :is(.ra-owner__nav-row, .ra-owner__nav-group){
    display: contents !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) :is(.ra-nav-desk, .ra-nav-label, .ra-nav-gap, .ad-nav-label, .ad-nav-sep, .ad-ico, .ad-badge, .ad-nav-ask){
    display: none !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) > *,
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-btn{
    order: var(--ad-order, 50);
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-nav-phone{
    order: 31;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) > .ra-owner__nav-row > .ra-owner__nav-btn,
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-group > .ra-owner__nav-btn{
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    width: auto !important;
    height: 36px !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ad-line) !important;
    border-radius: 999px !important;
    background: var(--ad-paper) !important;
    color: var(--ad-ink-2) !important;
    font: 600 0.84rem/1 var(--ad-sans) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-btn:is(.is-active, [aria-expanded="true"]){
    border-color: var(--ad-navy) !important;
    background: var(--ad-navy) !important;
    color: #fff !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-btn[hidden],
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) [data-rw-level-off]{
    display: none !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-nav-phone::after{
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--ad-bg-chevron) center / contain no-repeat;
    mask: var(--ad-bg-chevron) center / contain no-repeat;
  }

  /* The Money pop-up: a card under its pill. */
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-sub:not([hidden]){
    position: fixed !important;
    right: 16px !important;
    left: auto !important;
    z-index: 60;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: min(240px, calc(100vw - 32px)) !important;
    margin: 0;
    padding: 6px !important;
    border: 1px solid var(--ad-line) !important;
    border-radius: 14px !important;
    background: var(--ad-paper) !important;
    box-shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 24px 48px -20px rgba(15, 27, 45, 0.35) !important;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-sub .ra-owner__nav-btn{
    display: flex;
    justify-content: flex-start;
    width: 100% !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--ad-ink) !important;
    font: 500 0.92rem/1 var(--ad-sans) !important;
    text-align: left;
  }

  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ra-owner__nav-sub .ra-owner__nav-btn.is-active{
    background: var(--ad-bg) !important;
    color: var(--ad-navy) !important;
    font-weight: 650 !important;
  }

  /* The menu foot holds only Ask AI, which phones hide. */
  html.ad-on :is(#rwAgentNav, #rwOwnerNav, #rwTenantNav, #rwVendorNav) .ad-nav-foot{
    display: none !important;
  }
}

/* ---------- Type and canvas ---------- */

html.ad-on body.ra-portal--signed-in{
  color: var(--ad-ink);
  font-family: var(--ad-sans);
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html.ad-on body.ra-portal--signed-in :is(button, input, select, textarea){
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in ::selection{
  background: color-mix(in srgb, var(--ad-gold) 30%, white);
  color: var(--ad-ink);
}

html.ad-on body.ra-portal--signed-in :is(.ra-portal__main, .ra-owner__pages, .ra-people, #rwAccountPage, #rwAdminPanel, #rwVendorPage, #rwRentals){
  background-color: var(--ad-bg);
}

/* Pages breathe a little more than the classic 32px. */
@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in .ra-owner__pages > .ra-owner__page{
    padding-left: 40px;
    padding-right: 40px;
  }

  /* The classic narrows a page to 32px while a detail is open over its list, so the list behind
     jumped 8px and widened as the sheet opened. The list keeps its place. */
  html.ad-on body.ra-portal--signed-in .ra-owner__pages > .ra-owner__page:has(:is(#rwOwnerEstimateDetail, #rwAgentPropertyDetail, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwAgentEstimateForm, #rwAgentEstimateDetail, #rwAgentEstimateLinePage, #rwAgentInvoiceDetail, #rwAgentInvoiceEstimatePick, #rwAgentInvoicePayPage, #rwAgentOwnerInvoiceForm, #rwAgentOwnerInvoiceDetail, #rwAgentOwnerInvoiceLinePage, #rwAgentOwnerInvoiceEstimatePick, #rwVendorEstimateForm, #rwVendorEstimateDetail, #rwVendorEstimateLinePage, #rwVendorInvoiceForm, #rwVendorInvoiceDetail, #rwVendorInvoiceLinePage, #rwVendorInvoiceEstimatePick):not([hidden])){
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Page title: the serif of the dashboard greeting and the Conversations list. */
html.ad-on body.ra-portal--signed-in h2.ra-owner__title{
  margin: 0;
  color: var(--ad-ink) !important;
  font: 400 2.125rem/1.1 var(--ad-serif) !important;
  letter-spacing: -0.015em;
}

/* A section title inside a page (under tabs, above a second table). */
html.ad-on body.ra-portal--signed-in :is(h3.ra-owner__title, .ra-owner__card > h3, .ra-vendor__card > h3, .ra-portal__card-title){
  margin: 0;
  color: var(--ad-ink) !important;
  font: 650 1.0625rem/1.3 var(--ad-sans) !important;
  letter-spacing: -0.01em;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner__muted, .ra-owner__card p.ra-owner__muted, .ra-portal__card-lead){
  color: var(--ad-mute) !important;
  font-family: var(--ad-sans);
  line-height: 1.5;
}

/* ---------- Page header: title left, tools right ---------- */

html.ad-on body.ra-portal--signed-in .ra-invoice-toolbar{
  background: var(--ad-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-head{
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

html.ad-on body.ra-portal--signed-in :is(.ra-invoice-head__actions, .ra-tx-titlebar .ra-invoice-head__actions){
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

html.ad-on body.ra-portal--signed-in .ra-tx-titlebar{
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* On a desktop the tools stay on the title's line; they wrap only when the window is narrow. */
@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in .ra-tx-titlebar{
    flex-wrap: nowrap !important;
  }

  html.ad-on body.ra-portal--signed-in .ra-tx-titlebar > .ra-owner__title{
    flex: 1 1 auto;
    min-width: 0;
  }

  html.ad-on body.ra-portal--signed-in .ra-tx-titlebar .ra-invoice-head__actions{
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }
}

html.ad-on body.ra-portal--signed-in :is(.ra-invoice-head__actions, .ra-tx-titlebar) :is(input.ra-owner-tx-search, input.ra-list-search){
  width: 240px;
  max-width: 100%;
}

/* ---------- Search boxes and the selects beside them ---------- */

html.ad-on body.ra-portal--signed-in :is(input.ra-owner-tx-search, input.ra-list-search, input[type="search"]):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwDirectChatModal, #rwHomes) *){
  height: var(--ad-field-h) !important;
  min-height: 0 !important;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 12px !important;
  background: var(--ad-paper) var(--ad-bg-search) 13px 50% / 16px 16px no-repeat !important;
  color: var(--ad-ink) !important;
  font: 400 0.875rem/1 var(--ad-sans) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html.ad-on body.ra-portal--signed-in :is(input.ra-owner-tx-search, input.ra-list-search, input[type="search"])::placeholder{
  color: var(--ad-mute);
  opacity: 1;
}

html.ad-on body.ra-portal--signed-in select:not(:is(#adDash, #rwQuick, #rwChatPanel, #rwHomes) *):not([multiple]):not([size]){
  -webkit-appearance: none;
  appearance: none;
  height: var(--ad-field-h) !important;
  min-height: 0 !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 12px !important;
  background: var(--ad-paper) var(--ad-bg-chevron) right 12px center / 16px 16px no-repeat !important;
  color: var(--ad-ink) !important;
  font: 500 0.875rem/1 var(--ad-sans) !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* ---------- Form fields ---------- */

html.ad-on body.ra-portal--signed-in :is(input:is([type="text"], [type="email"], [type="number"], [type="tel"], [type="date"], [type="password"], [type="url"], [type="month"], [type="time"], [type="datetime-local"], :not([type])), textarea):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwDirectChatModal, #rwHomes) *):not(.ra-owner-tx-search){
  box-sizing: border-box !important;
  min-height: var(--ad-field-h);
  padding: 8px 12px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 10px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  font: 400 0.9rem/1.35 var(--ad-sans) !important;
  box-shadow: inset 0 1px 1px rgba(15, 27, 45, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Amounts and small numbers inside a table row stay compact. */
html.ad-on body.ra-portal--signed-in table :is(input:is([type="text"], [type="number"], [type="date"], :not([type])), select):not([multiple]){
  min-height: 34px !important;
  height: 34px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-radius: 8px !important;
}

html.ad-on body.ra-portal--signed-in textarea:not(:is(#rwQuick, #rwChatPanel) *){
  min-height: 88px;
  line-height: 1.5 !important;
}

html.ad-on body.ra-portal--signed-in :is(input, textarea, select):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwDirectChatModal, #rwHomes) *):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]):hover{
  border-color: color-mix(in srgb, var(--ad-line) 50%, var(--ad-mute)) !important;
}

html.ad-on body.ra-portal--signed-in :is(input, textarea, select):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwDirectChatModal, #rwHomes) *):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]):focus{
  border-color: var(--ad-ring) !important;
  outline: 0 !important;
  box-shadow: var(--ad-focus) !important;
}

html.ad-on body.ra-portal--signed-in :is(input, textarea, select):is(:disabled, [readonly]):not([type="checkbox"], [type="radio"]){
  background-color: var(--ad-side) !important;
  color: var(--ad-ink-2) !important;
}

html.ad-on body.ra-portal--signed-in :is(input, textarea, select):disabled{
  cursor: not-allowed;
  opacity: 0.7;
}

html.ad-on body.ra-portal--signed-in :is(input, textarea)::placeholder{
  color: #6b7686;
  opacity: 1;
}

/* Phones zoom into any field under 16px when it gets focus, so fields keep 16px there. */
@media (max-width: 1023px){
  html.ad-on body.ra-portal--signed-in :is(input, select, textarea){
    font-size: 16px !important;
  }
}

html.ad-on body.ra-portal--signed-in input:is([type="checkbox"], [type="radio"]):not(:is(#rwChatPanel, #adDash, #rwQuick) *){
  accent-color: var(--ad-navy);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Field labels: one quiet size everywhere. */
html.ad-on body.ra-portal--signed-in :is(.ra-people__field, .ra-portal__field, .ra-owner__field){
  color: var(--ad-ink-2);
  font-family: var(--ad-sans);
  font-size: 0.8125rem !important;
  font-weight: 550;
  letter-spacing: 0;
}

html.ad-on body.ra-portal--signed-in :is(.ra-people__hint, .ra-portal__hint){
  font-family: var(--ad-sans);
  line-height: 1.45;
}

html.ad-on body.ra-portal--signed-in .ra-show-closed:not(#rwChatPanel *){
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ad-field-h);
  padding: 0 4px;
  color: var(--ad-ink-2);
  font: 500 0.85rem/1 var(--ad-sans);
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- Buttons ---------- */

/* Primary: the navy pill of the dashboard and Conversations. */
html.ad-on body.ra-portal--signed-in :is(.ra-portal__primary-btn, .ra-portal__send-btn):not(:is(#adDash, #rwQuick, #rwChatPanel) *){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ad-field-h);
  height: auto;
  padding: 0 20px !important;
  border: 1px solid var(--ad-navy) !important;
  border-radius: 999px !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  font: 600 0.875rem/1.2 var(--ad-sans) !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
  filter: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s var(--ad-ease), box-shadow 0.15s ease;
}

html.ad-on body.ra-portal--signed-in :is(.ra-portal__primary-btn, .ra-portal__send-btn):not(:disabled, [aria-disabled="true"]):hover{
  border-color: var(--ad-navy-2) !important;
  background: var(--ad-navy-2) !important;
  transform: translateY(-1px);
}

html.ad-on body.ra-portal--signed-in :is(.ra-portal__primary-btn, .ra-portal__send-btn):is(:disabled, [aria-disabled="true"]){
  opacity: 0.45;
  box-shadow: none !important;
  transform: none;
}

/* Secondary: white pill with a hairline. */
html.ad-on body.ra-portal--signed-in :is(.ra-portal__ghost-btn--on-dark, .ra-tool-btn, .ra-vendor__btn, .ra-owner__back, .ra-portal__modal-link-btn):not(:is(#adDash, #rwQuick, #rwChatPanel) *){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ad-field-h);
  height: auto;
  padding: 0 18px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  font: 600 0.875rem/1.2 var(--ad-sans) !important;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05) !important;
  filter: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

html.ad-on body.ra-portal--signed-in :is(.ra-portal__ghost-btn--on-dark, .ra-tool-btn, .ra-vendor__btn, .ra-owner__back, .ra-portal__modal-link-btn):not(:disabled):hover{
  border-color: color-mix(in srgb, var(--ad-line) 40%, var(--ad-mute)) !important;
  background: var(--ad-side) !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-tool-btn, .ra-vendor__btn):disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* Add (+): a round navy button, the same weight as New chat. */
html.ad-on body.ra-portal--signed-in .ra-people__plus:not(#rwChatPanel *){
  display: inline-grid;
  place-items: center;
  width: var(--ad-field-h) !important;
  min-width: var(--ad-field-h) !important;
  height: var(--ad-field-h) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  font: 400 1.35rem/1 var(--ad-sans) !important;
  box-shadow: 0 8px 20px -10px rgba(16, 45, 78, 0.7) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s var(--ad-ease);
}

html.ad-on body.ra-portal--signed-in .ra-people__plus:not(#rwChatPanel *):hover{
  background: var(--ad-navy-2) !important;
  transform: translateY(-1px);
}

/* Filter and Reset beside a search. */
html.ad-on body.ra-portal--signed-in .ra-invoice-filter:not(#rwChatPanel *){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ad-field-h) !important;
  padding: 0 14px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink-2) !important;
  font: 600 0.85rem/1 var(--ad-sans) !important;
  box-shadow: none !important;
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-filter:not(#rwChatPanel *) svg{
  width: 16px;
  height: 16px;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-filter.ra-page-settings{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-filter[aria-expanded="true"]:not(#rwChatPanel *){
  border-color: var(--ad-navy) !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-reset:not(#rwChatPanel *){
  height: var(--ad-field-h);
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ad-blue) !important;
  font: 600 0.85rem/1 var(--ad-sans) !important;
  box-shadow: none !important;
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-reset[hidden]{
  display: none !important;
}

/* Footer buttons of the estimate / invoice / detail pages: secondary by default, the first one is
   the main action in the classic order, so it gets the navy fill. */
html.ad-on body.ra-portal--signed-in .ra-estimate-footer button:not(.ra-estimate-bubble-x){
  min-height: var(--ad-field-h);
  padding: 0 18px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  font: 600 0.875rem/1.2 var(--ad-sans) !important;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05) !important;
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in .ra-estimate-footer :is(button.ra-portal__primary-btn, button[id$="Send"], button[id$="Save"], button[id$="Approve"], button[id$="Pay"], button[id$="Submit"]){
  border-color: var(--ad-navy) !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
}

/* Visible keyboard focus on every control. */
html.ad-on body.ra-portal--signed-in :is(button, a, [role="tab"], summary, label:has(> input)):not(:is(#rwChatPanel, #adDash) *):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--ad-blue) 45%, white) !important;
  outline-offset: 2px !important;
}

/* ---------- Tables and lists ---------- */

/* The list card: white, a hairline, soft corners. It still scrolls sideways when it must. */
html.ad-on body.ra-portal--signed-in :is(.ra-owner__list, .ra-portal__idle-list, #rwPeopleRows):not(#rwChatPanel *):has(> table){
  border: 1px solid var(--ad-line) !important;
  border-radius: 16px !important;
  background: var(--ad-paper) !important;
  box-shadow: var(--ad-shadow) !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner__list, .ra-portal__idle-list, #rwPeopleRows):not(#rwChatPanel *):has(> table){
  overflow: auto;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *){
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  color: var(--ad-ink-2);
  font: 400 0.875rem/1.4 var(--ad-sans) !important;
  font-variant-numeric: tabular-nums;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) thead th{
  height: 44px;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-line) !important;
  /* The chat area's paper grain. Its tiles are pinned to the window, so the grain runs on
     unbroken across the cells of the header row instead of restarting in every cell. */
  background: var(--ad-grain), var(--ad-side) !important;
  background-attachment: fixed, fixed, scroll !important;
  color: var(--ad-mute) !important;
  font: 600 0.78rem/1.2 var(--ad-sans) !important;
  letter-spacing: 0.01em;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody td{
  padding: 13px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-line-2) !important;
  background: transparent;
  color: var(--ad-ink-2);
  font-family: var(--ad-sans) !important;
  vertical-align: middle;
  line-height: 1.4;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody tr:last-child > td{
  border-bottom: 0 !important;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tfoot td{
  padding: 12px 14px !important;
  border: 0 !important;
  border-top: 1px solid var(--ad-line) !important;
  background: var(--ad-side) !important;
  color: var(--ad-ink) !important;
  font-weight: 650;
}

/* The invoice icon column (left-aligned): the cell padding above would leave 12px for the 30px icon and cut it in half. */
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) :is(th, td).ra-inv-file{
  width: 48px !important;
  max-width: 48px !important;
  padding: 4px 8px !important;
  text-align: left !important;
}

/* Invoice icons start at the left edge of their column, like every other column. */
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) td.ra-inv-file .ra-invoice-files{
  justify-content: flex-start;
}

/* Ledgers (owner, tenant, vendor): Amount and Total start at the left edge of their column, under
   their header, like every other column. Centered amounts of different lengths do not line up. */
html.ad-on body.ra-portal--signed-in :is([data-rw-owner-page="ledger"], [data-rw-tenant-page="ledger"], [data-rw-vendor-page="ledger"]) table.ra-invoice-grid :is(th, td):is(.ra-inv-paid, .ra-inv-total, .ra-ledger__money),
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) :is(th, td).ra-ledger__money{
  text-align: left !important;
}

/* Reports by property (owner Reports, Taxes): each address header sits in the middle of its column, over its amounts. */
html.ad-on body.ra-portal--signed-in table.ra-tax-report__grid:not(#rwChatPanel *) thead th:not(:first-child){
  text-align: center;
}

/* Income and Expenses are the report's own headings. */
html.ad-on body.ra-portal--signed-in table.ra-tax-report__grid:not(#rwChatPanel *) tbody tr.ra-tax-report__section th{
  padding-top: 16px;
  padding-bottom: 10px;
  font: 400 1.65rem/1.15 var(--ad-serif);
  color: var(--ad-navy);
}

html.ad-on body.ra-portal--signed-in table.ra-tax-report__grid:not(#rwChatPanel *) .ra-tax-report__toggle{
  font-weight: 400;
}

/* Settings: the company logo beside its buttons,, on white like the printed page. */
.ra-logo-setting{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
}

.ra-logo-setting__preview{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 112px;
  padding: 12px;
  border: 1px dashed var(--ad-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ad-mute);
  font-size: 0.875rem;
}

.ra-logo-setting__preview img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ra-logo-setting__actions{
  display: flex;
  gap: 10px;
}

#rwCompanyLogoHint.is-error{
  color: #b91c1c;
}

/* The name column reads as the row's title. */
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody td.ra-inv-name{
  color: var(--ad-ink);
  font-weight: 600;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody tr:not(:has(> td[colspan])){
  transition: background-color 0.12s ease;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody tr:not(:has(> td[colspan])):hover > td{
  background: #fcfbf8;
}

html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody tr:is(.is-active, .is-selected, [aria-selected="true"]) > td{
  background: color-mix(in srgb, var(--ad-gold-bg) 55%, white);
}

/* An empty list: one quiet line in the middle instead of a cramped row. */
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(#rwChatPanel *) tbody tr:only-child > td[colspan]:only-child{
  padding: 40px 16px !important;
  color: var(--ad-mute) !important;
  font: 500 0.9rem/1.5 var(--ad-sans) !important;
  text-align: center !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-invoice-money--short, .ra-invoice-money--full){
  font-weight: 400;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-money--short{
  color: #b91c1c !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-money--full{
  color: #15803d !important;
}

/* ---------- Tabs: the segmented pills of the company home ---------- */

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs, .ra-owner__subnav){
  display: inline-flex !important;
  flex: none !important;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  justify-self: start;
  gap: 2px;
  width: auto !important;
  max-width: 100%;
  margin: 4px 0 18px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ad-track) !important;
  box-shadow: none !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs button, .ra-owner__subnav-btn){
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ad-mute) !important;
  font: 600 0.84rem/1 var(--ad-sans) !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs button, .ra-owner__subnav-btn):hover{
  color: var(--ad-ink) !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs button[aria-selected="true"], .ra-owner__subnav-btn.is-active){
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.12) !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs button, .ra-owner__subnav-btn)::after{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-tabs button, .ra-owner__subnav-btn)[hidden]{
  display: none !important;
}

/* ---------- Status chips: soft tints, dark text (AA) ---------- */

html.ad-on body.ra-portal--signed-in .ra-status-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ad-slate-bg) !important;
  color: #475569 !important;
  font: 600 0.75rem/1 var(--ad-sans) !important;
  letter-spacing: 0;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in table .ra-status-chip{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip::before{
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--occupied, .ra-status-chip--approved, .ra-status-chip--pay-full, .ra-status-chip--ok, .ra-status-chip--active, .ra-status-chip--paid, .ra-status-chip--rate-excellent, .ra-status-chip--rate-good, .ra-status-chip--signed, .ra-status-chip--completed){
  background: var(--ad-green-bg) !important;
  color: #166534 !important;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--paused, .ra-status-chip--sent, .ra-status-chip--pay-partial, .ra-status-chip--pending, .ra-status-chip--rate-not-good, .ra-status-chip--draft){
  background: var(--ad-amber-bg) !important;
  color: #92400e !important;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--vacant, .ra-status-chip--rejected, .ra-status-chip--waiting, .ra-status-chip--pay-unpaid, .ra-status-chip--error, .ra-status-chip--rate-bad, .ra-status-chip--overdue, .ra-status-chip--failed){
  background: var(--ad-rose-bg) !important;
  color: #9f1239 !important;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--received, .ra-status-chip--ai, .ra-status-chip--new, .ra-status-chip--open){
  background: var(--ad-blue-bg) !important;
  color: #1e40af !important;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--leased){
  background: var(--ad-gold-bg) !important;
  color: #854d0e !important;
}

html.ad-on body.ra-portal--signed-in .ra-status-chip:is(.ra-status-chip--closed, .ra-status-chip--done, .ra-status-chip--inactive){
  background: var(--ad-slate-bg) !important;
  color: #475569 !important;
}

/* ---------- Cards and sections ---------- */

html.ad-on body.ra-portal--signed-in :is(.ra-owner__card, .ra-vendor__card):not(:is(#adDash, #rwChatPanel) *){
  padding: 22px 24px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: var(--ad-radius) !important;
  background: var(--ad-paper) !important;
  box-shadow: var(--ad-shadow) !important;
  color: var(--ad-ink);
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner__card, .ra-vendor__card) hr{
  border: 0;
  border-top: 1px solid var(--ad-line-2);
}

/* ---------- Dialogs ----------
   One look for every dialog: a dimmed, blurred page; a white card with soft corners; a serif
   title; actions on the right. They open high and centred on the page area right of the menu
   (dialogs-open-high, dialogs-centered-on-parent). A dialog that needs its own size or place has
   an id rule in its page block. */

html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay:not([hidden]){
  inset: 0 !important;
  top: 0 !important;
  z-index: 100 !important;
  display: grid !important;
  justify-items: center;
  align-items: start;
  align-content: start !important;
  padding: max(40px, 8vh) 24px 24px calc(var(--rw-side-nav, 0px) + 24px) !important;
  overflow-y: auto !important;
  background: rgba(15, 27, 45, 0.32) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Connect bank also opens from inside a Pay dialog: it sits above it. */
html.ad-on body.ra-portal--signed-in #rwPullBankModal:not([hidden]){
  z-index: 110 !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal{
  position: relative;
  inset: auto !important;
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 26px 26px 22px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 22px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink);
  box-shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 40px 80px -30px rgba(15, 27, 45, 0.45) !important;
  font-family: var(--ad-sans);
  animation: ad-pop 0.16s ease-out;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal--compact{
  width: min(460px, 100%) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal:has(.ra-bank-modal__wide){
  width: min(880px, 100%) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal-title{
  margin: 0 44px 14px 0 !important;
  color: var(--ad-ink) !important;
  font: 400 1.65rem/1.15 var(--ad-serif) !important;
  letter-spacing: -0.01em;
  text-align: left;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal :is(.ra-portal__card-lead, .ra-portal__modal-text, p:not([class])){
  color: var(--ad-ink-2);
  font: 400 0.92rem/1.55 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal-actions{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

/* Close (×) in the corner. */
html.ad-on body.ra-portal--signed-in .ra-portal__modal :is(.ra-bank-modal__x, .ra-list-x, .ra-estimate-bubble-x, .ra-invoice-paper-x):not(:is(#rwChatPanel, #rwDirectChatModal, #rwHomes) *){
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid !important;
  place-items: center;
  width: 36px !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ad-mute) !important;
  font-size: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal :is(.ra-bank-modal__x, .ra-list-x, .ra-estimate-bubble-x, .ra-invoice-paper-x):not(:is(#rwChatPanel, #rwDirectChatModal, #rwHomes) *)::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ad-i-x) center / contain no-repeat;
  mask: var(--ad-i-x) center / contain no-repeat;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal :is(.ra-bank-modal__x, .ra-list-x, .ra-estimate-bubble-x, .ra-invoice-paper-x):not(:is(#rwChatPanel, #rwDirectChatModal, #rwHomes) *) > *{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal :is(.ra-bank-modal__x, .ra-list-x, .ra-estimate-bubble-x, .ra-invoice-paper-x):not(:is(#rwChatPanel, #rwDirectChatModal, #rwHomes) *):hover{
  background: var(--ad-line-2) !important;
  color: var(--ad-ink) !important;
}

/* Status lines inside a dialog: a soft tinted note. */
html.ad-on body.ra-portal--signed-in .ra-portal__modal [role="status"]:not([hidden]):not(:empty){
  margin: 12px 0 0;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ad-amber-bg) !important;
  color: #92400e !important;
  font: 500 0.85rem/1.4 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal [role="status"].is-ok:not([hidden]):not(:empty){
  background: var(--ad-green-bg) !important;
  color: #166534 !important;
}

@media (max-width: 1023px){
  html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay:not([hidden]){
    padding: 16px !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }

  html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal{
    padding: 22px 18px 18px !important;
    border-radius: 20px !important;
  }

  html.ad-on body.ra-portal--signed-in .ra-portal__modal-actions > button{
    flex: 1 1 auto;
  }
}

/* Pay now (Pay Vendors, and inside an open invoice): the compact dialog every other one uses. The
   classic id rules gave it a fixed 50vw x 50vh box and larger text, so these are id rules too. */
html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-portal__modal{
  width: min(440px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - max(40px, 8vh) - 24px) !important;
  font-size: 1rem !important;
}

html.ad-on body.ra-portal--signed-in :is(#rwAgentInvoiceBatchText, #rwAgentInvoiceBatchBalances){
  margin: 0 0 4px !important;
  color: var(--ad-ink-2) !important;
  font: 400 0.92rem/1.5 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in :is(#rwAgentInvoiceBatchText, #rwAgentInvoiceBatchBalances):empty{
  display: none;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-invoice-batch-amount__label{
  color: var(--ad-ink);
  font: 600 0.82rem/1.3 var(--ad-sans);
}

/* Two ids: the shared field rule carries an id inside its :not(). */
html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal #rwAgentInvoiceBatchAmount{
  height: 44px !important;
  padding-left: 26px !important;
  font-size: 1rem !important;
  font-variant-numeric: tabular-nums;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-invoice-batch-amount__money > span{
  color: var(--ad-mute);
  font: 500 1rem/1 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchOwed{
  color: var(--ad-mute);
  font: 400 0.85rem/1.3 var(--ad-sans);
}

/* Close its associated estimates: the question, then Yes and No on one row. */
html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-invoice-batch-close:not([hidden]){
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 18px 0 0;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-invoice-batch-close legend{
  float: left;
  width: 100%;
  margin: 0;
  color: var(--ad-ink);
  font: 600 0.82rem/1.3 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchModal .ra-invoice-batch-close label{
  color: var(--ad-ink-2);
  font: 500 0.9rem/1.3 var(--ad-sans);
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchHint:empty{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchConfirm{
  white-space: nowrap;
  font-size: 0.9rem !important;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceBatchConfirm:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Menus and drop lists ---------- */

html.ad-on body.ra-portal--signed-in :is(.ra-combo__list, .ra-people__menu, [role="menu"]):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwIdleStartMenu, #rwAgentEstimateMenu) *):not(#rwIdleStartMenu, #rwAgentEstimateMenu, select){
  border: 1px solid var(--ad-line) !important;
  border-radius: 14px !important;
  background: var(--ad-paper) !important;
  box-shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 24px 48px -20px rgba(15, 27, 45, 0.35) !important;
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in :is(.ra-combo__row, .ra-search-select__rows > *, .ra-people__menu button, [role="menuitem"], [role="option"]):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwIdleStartMenu, #rwAgentEstimateMenu) *){
  border-radius: 9px;
  color: var(--ad-ink);
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in :is(.ra-combo__row, .ra-search-select__rows > *, .ra-people__menu button, [role="menuitem"], [role="option"]):not(:is(#adDash, #rwQuick, #rwChatPanel, #rwIdleStartMenu, #rwAgentEstimateMenu) *):is(:hover, :focus-visible, [aria-selected="true"], .is-active){
  background: var(--ad-bg) !important;
}

/* ---------- Waiting, empty and error states ---------- */

html.ad-on body.ra-portal--signed-in :is(.ra-pick-empty, .ra-report-empty, .ra-combo__empty){
  padding: 28px 16px;
  color: var(--ad-mute) !important;
  font: 500 0.9rem/1.5 var(--ad-sans);
  text-align: center;
}

html.ad-on body.ra-portal--signed-in .ra-portal__hint--error{
  color: #be123c !important;
}

html.ad-on .ra-spinner__card{
  border: 1px solid var(--ad-line);
  border-radius: 18px;
  background: var(--ad-paper);
  box-shadow: var(--ad-shadow);
  color: var(--ad-ink-2);
  font-family: var(--ad-sans);
}

html.ad-on .ra-spinner__ring{
  border-color: var(--ad-track);
  border-top-color: var(--ad-navy);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce){
  html.ad-on body.ra-portal--signed-in *,
  html.ad-on body.ra-portal--signed-in *::before,
  html.ad-on body.ra-portal--signed-in *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.ad-on body.ra-portal--signed-in :is(.ra-portal__primary-btn, .ra-people__plus):hover{
    transform: none !important;
  }
}

/* ======================================================================================
   Pages. Each block below adds only what its page needs beyond the shared parts above.
   ====================================================================================== */

/* ---------- Detail sheets (desktop) ----------
   On desktop the classic turns these page sections into fixed panels over the list (portal.css,
   "#rwAgentPropertyDetail:not([hidden]), …"). Here they become the big dialog: white, soft corners,
   high on the window, wide, centred on the page area, the page dimmed behind. */

@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in :is(#rwAgentPropertyDetail, #rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwAgentEstimateForm, #rwVendorEstimateForm, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwAgentVendorPick, #rwPeopleForm, #rwOwnerDetail, #rwTenantLeases, #rwPropertyForm, #rwVendorInvoiceDetail, #rwAgentOwnerInvoiceDetail, #rwOwnerTxDetail):not([hidden]){
    --ad-sheet-w: min(1120px, calc(100vw - var(--rw-side-nav, 0px) - 64px));
    z-index: 100 !important;
    top: 12px !important;
    left: calc(var(--rw-side-nav, 0px) + (100vw - var(--rw-side-nav, 0px) - var(--ad-sheet-w)) / 2) !important;
    width: var(--ad-sheet-w) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 24px 28px 0 !important;
    border: 1px solid var(--ad-line) !important;
    border-radius: 22px !important;
    background: var(--ad-paper) !important;
    color: var(--ad-ink);
    box-shadow: 0 0 0 100vmax rgba(15, 27, 45, 0.32), 0 40px 80px -30px rgba(15, 27, 45, 0.45) !important;
    scrollbar-gutter: stable;
    animation: ad-pop 0.16s ease-out;
  }

  /* An estimate open as its paper (.is-page) or as the paper form (.is-sheet) is pinned to the
     window by itself, so the section around it is no dialog: without this it drew a wide white
     bubble behind the paper, a second dim, and a pop that re-anchored the paper for a moment. */
  html.ad-on body.ra-portal--signed-in :is(#rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwVendorEstimateForm):is(.is-page, .is-sheet):not([hidden]){
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: none !important;
  }

  html.ad-on body.ra-portal--signed-in :is(#rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwVendorEstimateForm):is(.is-page, .is-sheet):not([hidden])::after{
    content: none !important;
  }

  html.ad-on body.ra-portal--signed-in #rwAgentEstimateDetail.is-sheet:not([hidden]) > :is(.ra-list-x, .ra-owner__title){
    display: none !important;
  }

  /* The bottom breathing room scrolls with the content. */
  html.ad-on body.ra-portal--signed-in :is(#rwAgentPropertyDetail, #rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwAgentEstimateForm, #rwVendorEstimateForm, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwAgentVendorPick, #rwPeopleForm, #rwOwnerDetail, #rwTenantLeases, #rwPropertyForm, #rwVendorInvoiceDetail, #rwAgentOwnerInvoiceDetail, #rwOwnerTxDetail):not([hidden])::after{
    content: "";
    flex: none;
    order: 99;
    height: 24px;
  }

  /* × in the corner: round, quiet, always reachable while the sheet scrolls. */
  html.ad-on body.ra-portal--signed-in :is(#rwAgentPropertyDetail, #rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwAgentEstimateForm, #rwVendorEstimateForm, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwAgentVendorPick, #rwPeopleForm, #rwOwnerDetail, #rwTenantLeases, #rwPropertyForm, #rwVendorInvoiceDetail, #rwAgentOwnerInvoiceDetail, #rwOwnerTxDetail):not([hidden]) .ra-list-x{
    width: 36px !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--ad-paper) !important;
    color: var(--ad-mute) !important;
    font-size: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
  }
}

html.ad-on body.ra-portal--signed-in .ra-list-x:not(#rwChatPanel *)::before{
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ad-i-x) center / contain no-repeat;
  mask: var(--ad-i-x) center / contain no-repeat;
}

html.ad-on body.ra-portal--signed-in .ra-list-x:not(#rwChatPanel *){
  color: var(--ad-mute) !important;
  font-size: 0 !important;
}

html.ad-on body.ra-portal--signed-in .ra-list-x:not(#rwChatPanel *) > *{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-list-x:not(#rwChatPanel *):hover{
  background: var(--ad-line-2) !important;
  color: var(--ad-ink) !important;
}

/* Sheet titles: the dialog serif. */
html.ad-on body.ra-portal--signed-in :is(#rwPeopleFormTitle, #rwAgentPropertyDetail h2.ra-owner__title, #rwAgentPropertyDetail .ra-owner__title){
  color: var(--ad-ink) !important;
  font: 400 1.85rem/1.15 var(--ad-serif) !important;
  letter-spacing: -0.01em;
}

/* The button look above sets display, which would show a Back the page has hidden. */
html.ad-on body.ra-portal--signed-in .ra-owner__back[hidden]{
  display: none !important;
}

/* Back: a small pill with a chevron, not a full-width bar. */
html.ad-on body.ra-portal--signed-in .ra-owner__back:not(#rwChatPanel *){
  align-self: flex-start;
  justify-self: start;
  width: auto !important;
  min-height: 36px;
  padding: 0 14px 0 10px !important;
  font-size: 0.84rem !important;
}

html.ad-on body.ra-portal--signed-in .ra-owner__back:not(#rwChatPanel *)::before{
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--ad-i-back) center / contain no-repeat;
  mask: var(--ad-i-back) center / contain no-repeat;
}

/* Cards inside a sheet sit flat on the white. */
html.ad-on body.ra-portal--signed-in :is(#rwAgentPropertyDetail, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwOwnerDetail, #rwTenantLeases, #rwPeopleForm) .ra-owner__card{
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: var(--ad-paper) !important;
  box-shadow: none !important;
}

/* The people form: Save is the navy pill at the bottom right, and it stays in view. */
html.ad-on body.ra-portal--signed-in #rwPeopleForm.ra-people__form--sheet:not([hidden]) > #rwPeopleFormFooter{
  position: sticky !important;
  bottom: 0;
  z-index: 5;
  justify-content: flex-end !important;
  margin: 24px -28px 0 !important;
  padding: 14px 28px !important;
  border-top: 1px solid var(--ad-line-2);
  background: color-mix(in srgb, var(--ad-paper) 92%, transparent) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.ad-on body.ra-portal--signed-in #rwPeopleForm.ra-people__form--sheet:not([hidden])::after{
  display: none;
}

html.ad-on body.ra-portal--signed-in #rwPeopleForm.ra-people__form--sheet #rwPeopleSave{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 148px !important;
  height: 44px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  font: 600 0.9rem/1 var(--ad-sans) !important;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
}

html.ad-on body.ra-portal--signed-in #rwPeopleForm.ra-people__form--sheet #rwPeopleSave:hover{
  background: var(--ad-navy-2) !important;
}

/* The page area is its own layer in the classic (z-index 1), which kept the sheet under the top
   bar. While a sheet or dialog is open the layer lifts, so it covers the bar and dims everything. */
@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in:has(:is(#rwAgentPropertyDetail, #rwAgentEstimateDetail, #rwOwnerEstimateDetail, #rwVendorEstimateDetail, #rwAgentEstimateForm, #rwVendorEstimateForm, #rwAgentOwnerDetail, #rwAgentTenantDetail, #rwAgentVendorPick, #rwPeopleForm, #rwOwnerDetail, #rwTenantLeases, #rwPropertyForm, #rwVendorInvoiceDetail, #rwAgentOwnerInvoiceDetail, #rwOwnerTxDetail):not([hidden])) .ra-portal__main{
    z-index: auto !important;
  }
}

html.ad-on body.ra-portal--signed-in:has(.ra-portal__modal-overlay:not([hidden])) .ra-portal__main{
  z-index: auto !important;
}

/* ---------- People (agents, owners, tenants, vendors) ---------- */

/* An empty list reads as a calm empty state, not an orange warning line. */
html.ad-on body.ra-portal--signed-in #rwPeopleHint:not([hidden]):not(:empty){
  margin: 4px 0 0 !important;
  padding: 44px 16px !important;
  border: 1px dashed var(--ad-line) !important;
  border-radius: 16px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-mute) !important;
  font: 500 0.92rem/1.5 var(--ad-sans) !important;
  text-align: center;
}

/* Area / expertise pick lists in the vendor form. */
html.ad-on body.ra-portal--signed-in .ra-people__picks{
  padding: 4px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 12px !important;
  background: var(--ad-paper) !important;
}

html.ad-on body.ra-portal--signed-in .ra-people__pick{
  height: 38px;
  border-radius: 8px;
}

html.ad-on body.ra-portal--signed-in .ra-people__pick + .ra-people__pick{
  border-top: 1px solid var(--ad-line-2);
}

html.ad-on body.ra-portal--signed-in :is(.ra-people__pick-name, .ra-people__pick-delete){
  height: 32px;
  border-radius: 8px !important;
  font: 500 0.88rem/1 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-people__pick-name{
  color: var(--ad-ink) !important;
}

html.ad-on body.ra-portal--signed-in .ra-people__pick-delete{
  padding: 0 10px !important;
  color: var(--ad-mute) !important;
  font-size: 0.8rem !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-people__pick-name, .ra-people__pick-delete):hover{
  background: var(--ad-bg) !important;
}

html.ad-on body.ra-portal--signed-in .ra-people__pick-delete:hover{
  color: #be123c !important;
}

/* Small notes under a field. */
html.ad-on body.ra-portal--signed-in .ra-comp__hint{
  color: var(--ad-mute) !important;
  font: 400 0.8rem/1.45 var(--ad-sans) !important;
}

/* ---------- Search-first drop lists (search-select.js, .ra-combo) ---------- */

html.ad-on body.ra-portal--signed-in .ra-search-select__btn{
  height: var(--ad-field-h) !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 12px !important;
  background: var(--ad-paper) var(--ad-bg-chevron) right 12px center / 16px 16px no-repeat !important;
  color: var(--ad-ink);
  font: 500 0.875rem/var(--ad-field-h) var(--ad-sans) !important;
  box-shadow: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-search-select__btn:hover{
  border-color: color-mix(in srgb, var(--ad-line) 50%, var(--ad-mute)) !important;
}

html.ad-on body.ra-portal--signed-in .ra-search-select__btn:focus-visible{
  border-color: var(--ad-ring) !important;
  outline: 0 !important;
  box-shadow: var(--ad-focus) !important;
}

html.ad-on body.ra-portal--signed-in .ra-search-select__btn:disabled{
  background-color: var(--ad-side) !important;
}

html.ad-on body.ra-portal--signed-in .ra-search-select__btn:is(.is-invalid, [data-value=""], [data-value="__invoice_address"]){
  color: #be123c;
}

html.ad-on body.ra-portal--signed-in .ra-docs__filters .ra-search-select__btn[data-value=""]{
  color: var(--ad-mute);
}

html.ad-on body.ra-portal--signed-in .ra-combo__list:not([hidden]){
  top: calc(100% + 6px);
  padding: 6px;
  border: 1px solid var(--ad-line) !important;
  border-radius: 14px !important;
  background: var(--ad-paper) !important;
  box-shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 24px 48px -20px rgba(15, 27, 45, 0.35) !important;
  animation: ad-pop 0.12s ease-out;
}

html.ad-on body.ra-portal--signed-in .ra-combo__list .ra-search-select__search{
  width: 100% !important;
  height: 38px !important;
  min-height: 0;
  margin: 0 0 6px !important;
  border-radius: 10px !important;
  background-color: var(--ad-bg) !important;
}

html.ad-on body.ra-portal--signed-in .ra-combo__row{
  min-height: 38px;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--ad-ink) !important;
  font: 400 0.88rem/1.3 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-combo__row:is(:hover, .is-on, :focus-visible){
  background: var(--ad-bg) !important;
}

html.ad-on body.ra-portal--signed-in .ra-combo__row small{
  color: var(--ad-mute);
}

html.ad-on body.ra-portal--signed-in .ra-search-select__all{
  color: var(--ad-blue) !important;
  font-weight: 600 !important;
}

/* A toolbar that wraps keeps the title on its first line. */
html.ad-on body.ra-portal--signed-in .ra-invoice-head:has(> .ra-invoice-head__actions):not(#rwChatPanel *){
  align-items: flex-start !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-head:has(> .ra-invoice-head__actions):not(#rwChatPanel *) > h2.ra-owner__title{
  padding-top: 4px;
}

/* ---------- Money: pay and charge pages ---------- */

/* Small tool buttons beside a table (Apply draft …): secondary pills. */
html.ad-on body.ra-portal--signed-in .ra-invoice-tool{
  height: var(--ad-field-h) !important;
  padding: 0 16px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  font: 600 0.85rem/1 var(--ad-sans) !important;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05) !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-tool:not(:disabled):hover{
  background: var(--ad-side) !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-tool:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* The Treasury account picker: looks like the other selects. */
html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayAccountBtn, #rwVendorPayAccountBtn, #rwTenantPayAccountBtn){
  height: var(--ad-field-h) !important;
  min-height: 0 !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 12px !important;
  background: var(--ad-paper) var(--ad-bg-chevron) right 12px center / 16px 16px no-repeat !important;
  color: var(--ad-ink) !important;
  font: 500 0.875rem/1 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayAccountBtn, #rwVendorPayAccountBtn, #rwTenantPayAccountBtn):empty::before{
  content: "Treasury account";
  color: var(--ad-mute);
}

html.ad-on body.ra-portal--signed-in .ra-owner-pay-menu:not([hidden]){
  padding: 6px;
  border: 1px solid var(--ad-line) !important;
  border-radius: 14px !important;
  background: var(--ad-paper) !important;
  box-shadow: 0 2px 6px rgba(15, 27, 45, 0.06), 0 24px 48px -20px rgba(15, 27, 45, 0.35) !important;
}

html.ad-on body.ra-portal--signed-in .ra-owner-pay-option{
  min-height: 40px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-owner-pay-option:is(:hover, :focus-visible, [aria-selected="true"]){
  background: var(--ad-bg) !important;
}

/* Check-box columns stay narrow and centred. */
html.ad-on body.ra-portal--signed-in table :is(th, td):is(.ra-inv-check, .ra-pay-check, :has(> input[type="checkbox"]:only-child)){
  padding-left: 4px !important;
  padding-right: 4px !important;
  text-align: center !important;
  text-overflow: clip !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-owner-pay-selected, .ra-invoice-select-all){
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ad-ink-2);
  font: 500 0.85rem/1 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in :is(#rwVendorPaySummary, #rwOwnerPaySummary, #rwTenantPaySummary){
  color: var(--ad-ink-2);
  font: 500 0.88rem/1.4 var(--ad-sans);
}

/* ---------- Reports: a light page header like every other page ---------- */

html.ad-on body.ra-portal--signed-in .ra-report{
  --rr-hair: var(--ad-line);
  --rr-surface: var(--ad-paper);
}

html.ad-on body.ra-portal--signed-in .ra-report-head{
  align-items: flex-end;
  padding: 0 0 6px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ad-ink) !important;
  box-shadow: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-report-head .ra-owner__title{
  color: var(--ad-ink) !important;
}

html.ad-on body.ra-portal--signed-in .ra-report-eyebrow{
  margin: 0 0 6px;
  color: var(--ad-gold-ink) !important;
  font: 650 0.72rem/1 var(--ad-sans) !important;
  letter-spacing: 0.14em;
}

html.ad-on body.ra-portal--signed-in .ra-report-asof{
  margin: 8px 0 0;
  color: var(--ad-mute) !important;
  font: 400 0.9rem/1.4 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-report-seg{
  padding: 4px !important;
  border-radius: 999px !important;
  background: var(--ad-track) !important;
}

html.ad-on body.ra-portal--signed-in .ra-report-seg button{
  height: 32px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: var(--ad-mute) !important;
  font: 600 0.84rem/1 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-report-seg button:hover{
  color: var(--ad-ink) !important;
}

html.ad-on body.ra-portal--signed-in .ra-report-seg button.is-on{
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.12);
}

html.ad-on body.ra-portal--signed-in .ra-report-owner{
  color: var(--ad-ink-2) !important;
  font: 500 0.85rem/1 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in :is(.ra-report-kpi, .ra-report-card){
  border-color: var(--ad-line) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

/* ---------- Bank accounts ---------- */

html.ad-on body.ra-portal--signed-in .ra-bank-help{
  height: var(--ad-field-h) !important;
  padding: 0 16px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 999px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  font: 600 0.85rem/1 var(--ad-sans) !important;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05) !important;
}

html.ad-on body.ra-portal--signed-in .ra-bank-help:hover{
  background: var(--ad-side) !important;
}

/* The account groups are sections of the page, not pages of their own. */
html.ad-on body.ra-portal--signed-in #rwBankLists h2.ra-owner__title{
  font: 650 1.0625rem/1.3 var(--ad-sans) !important;
  letter-spacing: -0.01em;
}

html.ad-on body.ra-portal--signed-in #rwBankLists .ra-invoice-head{
  min-height: 44px;
  margin-top: 18px;
}

/* Every title and its cells are left aligned, so a title and its numbers move together when a column is dragged. */
html.ad-on body.ra-portal--signed-in :is(#rwBankSlots, #rwBankActivityTable, #rwBankLedgerTable) table :is(th, td){
  text-align: left !important;
}

html.ad-on body.ra-portal--signed-in .ra-bank-intro{
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ad-blue-bg);
  color: #1e3a8a !important;
  font: 500 0.9rem/1.5 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-bank-check{
  border-color: var(--ad-line);
  border-radius: 14px;
  background: var(--ad-paper);
  font-family: var(--ad-sans);
}

/* The same paper grain as the table header rows. */
html.ad-on body.ra-portal--signed-in .ra-bank-check__head{
  border-bottom-color: var(--ad-line);
  background: var(--ad-grain), var(--ad-side);
  background-attachment: fixed, fixed, scroll;
}

/* The flow diagram's column bubbles take the same paper grain. */
html.ad-on body.ra-portal--signed-in .ra-flow__zone{
  border-color: var(--ad-line);
  background: var(--ad-grain), var(--ad-side);
  background-attachment: fixed, fixed, scroll;
}

/* The fees drawing's trip bubbles too. The verb sits on the same grain (pinned to the window),
   so it still hides the arrow line behind it without a patch showing. */
html.ad-on body.ra-portal--signed-in :is(.rw-ff__trip, .rw-ff__verb){
  background: var(--ad-grain), var(--ad-side);
  background-attachment: fixed, fixed, scroll;
}

/* The left edge keeps its net colour (green, red or black). */
html.ad-on body.ra-portal--signed-in .rw-ff__trip{
  border-top-color: var(--ad-line);
  border-right-color: var(--ad-line);
  border-bottom-color: var(--ad-line);
}

html.ad-on body.ra-portal--signed-in .ra-bank-check__action:hover{
  background: var(--ad-navy-2);
}

html.ad-on body.ra-portal--signed-in .ra-bank-tile{
  border-color: var(--ad-line);
  border-radius: 14px;
  background: var(--ad-paper);
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-bank-tile--total{
  border-color: var(--ad-navy);
}

html.ad-on body.ra-portal--signed-in :is(.ra-bank-tile__label, .ra-bank-tile__note, .ra-bank-activity__sub){
  color: var(--ad-mute);
}

html.ad-on body.ra-portal--signed-in .ra-bank-view-head .ra-owner__back{
  align-self: center;
  margin-right: 0;
}

html.ad-on body.ra-portal--signed-in .ra-bank-alerts{
  border-radius: 14px;
  font-family: var(--ad-sans);
}

/* ---------- Dialog sizing, all dialogs ---------- */

html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal{
  max-height: calc(100dvh - max(40px, 8vh) - 24px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 1023px){
  html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal{
    max-height: calc(100dvh - 32px) !important;
  }
}

/* Form dialogs: the action buttons sit on the right on a desktop, full width on a phone. */
html.ad-on body.ra-portal--signed-in :is(.ra-bank-modal__actions, .ra-portal__modal-actions){
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  gap: 10px !important;
}

@media (min-width: 1024px){
  html.ad-on body.ra-portal--signed-in :is(.ra-bank-modal__actions, .ra-portal__modal-actions) > :is(button, .ra-portal__primary-btn){
    width: auto !important;
    min-width: 120px;
    flex: 0 0 auto !important;
  }
}

/* ---------- Hints and loose tables ---------- */

/* Most classic hints are "nothing here yet" lines: calm grey. Real errors keep their red. */
html.ad-on body.ra-portal--signed-in .ra-people__hint:not(#rwPeopleHint):not(.ra-portal__modal *){
  color: var(--ad-mute) !important;
  font: 500 0.875rem/1.5 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-people__hint.is-error{
  color: #be123c !important;
}

/* A table that sits straight in the page (no list wrapper) gets the same card. */
html.ad-on body.ra-portal--signed-in table:is(.ra-invoice-grid, .ra-list-grid):not(:is(.ra-owner__list, .ra-portal__idle-list, #rwPeopleRows, .ra-report-tablewrap, .ra-report-card, .ra-owner__card, .ra-vendor__card, .ra-portal__modal) > table):not(:is(#rwChatPanel, .ra-portal__modal, #rwPeopleForm, .ra-invoice-paper) *){
  overflow: hidden;
  border: 1px solid var(--ad-line) !important;
  border-radius: 16px !important;
  background: var(--ad-paper) !important;
  box-shadow: var(--ad-shadow) !important;
}

/* Status rows in the email / TenantTurner cards: label quiet, value strong. */
html.ad-on body.ra-portal--signed-in :is(#rwEmailProcessing, #rwTenantTurner, #rwInvoiceAnalysis, #rwEmailInvoices, #rwLeadManagement) .ra-owner__card :is(p, div) > b{
  color: var(--ad-ink);
  font-weight: 650;
}

/* The empty side of the inbox speaks to the role. */
html.ad-on body:not(.ra-portal--agent) .ad-chat-empty [data-ad-for="agent"],
html.ad-on body.ra-portal--agent .ad-chat-empty [data-ad-for="other"]{
  display: none;
}

/* ---------- Owner, tenant and vendor dashboards ---------- */

html.ad-on body.ra-portal--signed-in .ra-owner__page > h2.ra-owner__title{
  margin-bottom: 18px !important;
}

/* The greeting (as on the agent's dashboard) stands in for the plain "Dashboard" title,
   which stays for screen readers. */
html.ad-on body.ra-portal--signed-in .ra-owner__page:has(> .ad-hello--role) > h2.ra-owner__title{
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html:not(.ad-on) .ad-hello--role{
  display: none;
}

html.ad-on .ad-hello--role button{
  font-family: inherit;
}

html.ad-on body.ra-portal--signed-in :is(.ad-hello--role, .ra-dash__bubble) .ad-ico{
  display: block;
  flex: none;
}

html.ad-on body.ra-portal--signed-in .ra-dash__bubble > .ad-kpi__icon{
  margin-bottom: 4px;
}

html.ad-on body.ra-portal--signed-in .ra-dash{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
}

html.ad-on body.ra-portal--signed-in .ra-dash__bubble{
  height: auto !important;
  min-height: 124px;
  padding: 18px 20px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: var(--ad-radius) !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink) !important;
  box-shadow: var(--ad-shadow) !important;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s var(--ad-ease), box-shadow 0.15s ease, border-color 0.15s ease;
}

html.ad-on body.ra-portal--signed-in .ra-dash__bubble:hover{
  border-color: color-mix(in srgb, var(--ad-line) 50%, var(--ad-mute)) !important;
  transform: translateY(-2px);
}

html.ad-on body.ra-portal--signed-in .ra-dash__label{
  color: var(--ad-mute) !important;
  font: 550 0.85rem/1.3 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-dash__count{
  color: var(--ad-ink);
  font: 650 2rem/1 var(--ad-sans) !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

html.ad-on body.ra-portal--signed-in .ra-dash__version{
  margin: 0 0 6px;
  color: var(--ad-mute) !important;
  font: 400 0.75rem/1 var(--ad-sans) !important;
}

/* "Finish setting up your account": a warm gold card with the main step as the navy button. */
html.ad-on body.ra-portal--signed-in .ra-onboard:not([hidden]){
  margin: 0 0 18px !important;
  padding: 20px 22px !important;
  border: 1px solid color-mix(in srgb, var(--ad-gold) 35%, white) !important;
  border-radius: var(--ad-radius) !important;
  background: var(--ad-gold-bg) !important;
  color: var(--ad-ink);
}

html.ad-on body.ra-portal--signed-in .ra-onboard--page:not([hidden]){
  border-color: var(--ad-line) !important;
  background: var(--ad-paper) !important;
  box-shadow: var(--ad-shadow);
}

html.ad-on body.ra-portal--signed-in .ra-onboard__title{
  display: block;
  margin-bottom: 8px;
  font: 650 1.0625rem/1.3 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-onboard__actions{
  justify-content: flex-start;
  gap: 10px !important;
  margin-top: 14px !important;
}

html.ad-on body.ra-portal--signed-in .ra-onboard__actions > .ra-vendor__btn{
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

html.ad-on body.ra-portal--signed-in .ra-vendor__btn.ra-vendor__btn--primary:not(#rwChatPanel *){
  border-color: var(--ad-navy) !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
}

html.ad-on body.ra-portal--signed-in .ra-vendor__btn.ra-vendor__btn--primary:not(#rwChatPanel *):not(:disabled):hover{
  border-color: var(--ad-navy-2) !important;
  background: var(--ad-navy-2) !important;
}

/* Owners, tenants and vendors: their own conversations, so no avatar; the subject leads the row. */
html.ad-on body.ra-portal--signed-in:not(.ra-portal--agent) #rwIdleRecentList td.ad-conv{
  grid-template-columns: minmax(0, 1fr) !important;
  padding-left: 18px !important;
}

html.ad-on body.ra-portal--signed-in:not(.ra-portal--agent) #rwIdleRecentList td.ad-conv .ad-avatar{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in:not(.ra-portal--agent) #rwIdleRecentList .ad-conv__name{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

html.ad-on body.ra-portal--signed-in .ra-vendor-tax-note:not([hidden]):not(:empty){
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--ad-rose-bg) !important;
  color: #9f1239 !important;
  font: 500 0.88rem/1.45 var(--ad-sans) !important;
}

/* Owner / vendor: no money can be sent until a W-9 or W-8ECI is signed (dashboard card and Tax form page). */
html.ad-on body.ra-portal--signed-in .ra-onboard__alert{
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: var(--ad-rose-bg) !important;
  color: #9f1239 !important;
  font: 500 0.88rem/1.45 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-ptf__err:not(:empty){
  color: #9f1239 !important;
  font: 500 0.82rem/1.4 var(--ad-sans) !important;
}

/* ---------- Account (plan and billing) ---------- */

@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in #rwAccountPage:not([hidden]){
    padding: 24px 40px 48px !important;
  }
}

html.ad-on body.ra-portal--signed-in #rwAccountPage > h2.ra-owner__title{
  margin-bottom: 18px !important;
}

html.ad-on body.ra-portal--signed-in .ra-account:not([hidden]){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
  max-width: 880px;
  margin: 0 0 18px !important;
  padding: 6px 0 !important;
  overflow: hidden;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius);
  background: var(--ad-paper);
  box-shadow: var(--ad-shadow);
}

html.ad-on body.ra-portal--signed-in .ra-account > div{
  display: grid !important;
  gap: 4px;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ad-line-2);
}

html.ad-on body.ra-portal--signed-in .ra-account dt{
  color: var(--ad-mute) !important;
  font: 550 0.8rem/1.2 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-account dd{
  margin: 0;
  color: var(--ad-ink) !important;
  font: 600 1rem/1.3 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in :is(#rwAccountChoose button, #rwAccountUpdatePayment){
  height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid var(--ad-navy) !important;
  border-radius: 999px !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  font: 600 0.9rem/1 var(--ad-sans) !important;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in #rwAccountChoose button + button{
  margin-left: 10px;
}

/* Plan notice, actions, Monthly/Yearly switch and the three plan cards. */
html.ad-on body.ra-portal--signed-in .ra-account__notice:not([hidden]){
  max-width: 880px;
  margin: 0 0 16px !important;
  padding: 14px 18px !important;
  border: 1px solid color-mix(in srgb, var(--ad-gold, #b98a2e) 45%, transparent);
  border-radius: var(--ad-radius, 14px);
  background: var(--ad-gold-bg, #fbf4e4) !important;
  color: var(--ad-ink) !important;
  font: 500 0.95rem/1.45 var(--ad-sans) !important;
}

html.ad-on body.ra-portal--signed-in .ra-account__notice--bad:not([hidden]){
  border-color: color-mix(in srgb, #b42318 35%, transparent);
  background: var(--ad-rose-bg, #fdecec) !important;
}

html.ad-on body.ra-portal--signed-in .ra-account__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

html.ad-on body.ra-portal--signed-in .ra-account__actions button:not([hidden]){
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ad-navy);
  border-radius: 999px;
  background: var(--ad-navy);
  color: #fff;
  font: 600 0.9rem/1 var(--ad-sans);
  cursor: pointer;
  transition: background 0.15s var(--ad-ease);
}

html.ad-on body.ra-portal--signed-in .ra-account__actions .ra-account__quiet:not([hidden]){
  border-color: var(--ad-line);
  background: var(--ad-paper);
  color: var(--ad-ink);
  box-shadow: none;
}

html.ad-on body.ra-portal--signed-in .ra-account__actions button:focus-visible,
html.ad-on body.ra-portal--signed-in .ra-account__plan button:focus-visible,
html.ad-on body.ra-portal--signed-in .ra-account__interval input:focus-visible + span{
  outline: none;
  box-shadow: var(--ad-focus);
}

html.ad-on body.ra-portal--signed-in .ra-account__interval{
  display: inline-flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: var(--ad-paper);
}

html.ad-on body.ra-portal--signed-in .ra-account__interval label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--ad-ink-2);
  font: 600 0.88rem/1 var(--ad-sans);
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in .ra-account__interval label:has(input:checked){
  background: var(--ad-navy);
  color: #fff;
}

html.ad-on body.ra-portal--signed-in .ra-account__interval input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html.ad-on body.ra-portal--signed-in .ra-account__interval small{
  font-weight: 600;
  color: inherit;
  opacity: 0.8;
}

html.ad-on body.ra-portal--signed-in .ra-account__plans{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  max-width: 880px;
  margin: 0 0 12px;
}

html.ad-on body.ra-portal--signed-in .ra-account__plan{
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius, 14px);
  background: var(--ad-paper);
  box-shadow: var(--ad-shadow);
}

html.ad-on body.ra-portal--signed-in .ra-account__plan h3{
  margin: 0;
  color: var(--ad-ink);
  font: 650 1.05rem/1.2 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-account__plan-price{
  margin: 0;
  color: var(--ad-ink);
  font: 700 1.5rem/1.2 var(--ad-sans);
  font-variant-numeric: tabular-nums;
}

html.ad-on body.ra-portal--signed-in .ra-account__plan-doors{
  margin: 0 0 8px;
  color: var(--ad-mute);
  font: 500 0.85rem/1.4 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in #rwAccountChoose .ra-account__plan button{
  justify-self: start;
  margin: 0 !important;
}

html.ad-on body.ra-portal--signed-in #rwAccountChoose .ra-account__plan button:disabled{
  border-color: var(--ad-line) !important;
  background: var(--ad-paper) !important;
  color: var(--ad-mute) !important;
  box-shadow: none !important;
  cursor: default;
}

html.ad-on body.ra-portal--signed-in #rwAccountChooseNote{
  max-width: 880px;
  color: var(--ad-mute) !important;
  font: 500 0.85rem/1.45 var(--ad-sans) !important;
}

@media (prefers-reduced-motion: reduce){
  html.ad-on body.ra-portal--signed-in .ra-account__actions button{
    transition: none;
  }
}

html.ad-on body.ra-portal--signed-in :is(#rwAccountChoose button, #rwAccountUpdatePayment):hover{
  background: var(--ad-navy-2) !important;
}

/* ---------- Yes / No dialogs (the approved confirm, for every warn-row dialog) ---------- */

html.ad-on body.ra-portal--signed-in .ra-portal__modal .ra-portal__warn-row:not([hidden]){
  display: grid !important;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal .ra-portal__warn-row > p{
  margin: 0;
  color: var(--ad-ink-2) !important;
  font: 400 0.95rem/1.5 var(--ad-sans) !important;
  text-align: left;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal .ra-portal__warn-row .ra-portal__modal-actions{
  flex-direction: row !important;
  margin-top: 4px !important;
}

/* The answer that goes ahead is the navy one. */
html.ad-on body.ra-portal--signed-in .ra-portal__modal :is([id$="Yes"], [id$="Send"], [id$="Confirm"], [id$="Ok"], [id$="OK"]):is(button){
  border-color: var(--ad-navy) !important;
  background: var(--ad-navy) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(16, 45, 78, 0.75) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__modal :is([id$="Yes"], [id$="Send"], [id$="Confirm"], [id$="Ok"], [id$="OK"]):is(button):hover{
  background: var(--ad-navy-2) !important;
}

/* Dialogs whose header holds its own controls keep them clear of the ×. */
html.ad-on body.ra-portal--signed-in .ra-rent-concession-bar{
  padding-right: 44px;
}

html.ad-on body.ra-portal--signed-in .ra-rent-concession-bar h2{
  margin: 0;
  color: var(--ad-ink);
  font: 400 1.65rem/1.15 var(--ad-serif) !important;
}

html.ad-on body.ra-portal--signed-in .ra-rent-free{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ad-ink-2);
  font: 500 0.85rem/1 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-rent-free input{
  width: 72px !important;
}

/* ---------- File pickers ---------- */

html.ad-on body.ra-portal--signed-in input[type="file"]{
  max-width: 100%;
  color: var(--ad-mute);
  font: 400 0.85rem/1.4 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in input[type="file"]::file-selector-button{
  height: 36px;
  margin-right: 10px;
  padding: 0 14px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: var(--ad-paper);
  color: var(--ad-ink);
  font: 600 0.82rem/1 var(--ad-sans);
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in input[type="file"]::file-selector-button:hover{
  background: var(--ad-side);
}

/* A dialog is as tall as what it holds; the classic minimum heights left empty white space. */
html.ad-on body.ra-portal--signed-in .ra-portal__modal-overlay .ra-portal__modal{
  min-height: 0 !important;
}

/* ---------- Phones and tablets: a 16px gutter, tools that stack ---------- */

@media (max-width: 1024px){
  html.ad-on body.ra-portal--signed-in :is(.ra-owner__pages > .ra-owner__page, #rwBankAccounts, #rwAccountPage){
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html.ad-on body.ra-portal--signed-in h2.ra-owner__title{
    font-size: 1.85rem !important;
  }

  html.ad-on body.ra-portal--signed-in :is(.ra-owner-pay-tools, .ra-owner-pay-above){
    flex-wrap: wrap !important;
  }

  html.ad-on body.ra-portal--signed-in .ra-owner-pay-tools > *{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* ---------- Activity log and the Stripe sandbox ---------- */

html.ad-on body.ra-portal--signed-in #rwActivityPanel:not([hidden]){
  background: var(--ad-bg) !important;
}

html.ad-on body.ra-portal--signed-in #rwActivityPanel :is(.ra-portal__activity-page, .ra-portal__activity-scroll){
  background: transparent !important;
  color: var(--ad-ink);
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in #rwActivityPanel .ra-portal__card-title{
  font: 400 2.125rem/1.1 var(--ad-serif) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__activity-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  color: var(--ad-ink-2);
  font: 500 0.85rem/1 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-portal__activity-pre{
  padding: 16px 18px !important;
  border: 1px solid var(--ad-line) !important;
  border-radius: 14px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink-2) !important;
  font: 400 0.78rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__activity-footer{
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 1px solid var(--ad-line) !important;
  background: color-mix(in srgb, var(--ad-bg) 92%, transparent) !important;
}

html.ad-on body.ra-portal--signed-in .ra-portal__activity-footer > button{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 120px;
}

html.ad-on body.ra-portal--signed-in #rwStripeCommission{
  height: var(--ad-field-h);
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: var(--ad-paper);
  color: var(--ad-ink);
  font: 600 0.85rem/1 var(--ad-sans);
  cursor: pointer;
}

html.ad-on body.ra-portal--signed-in #rwStripeCommission:hover{
  background: var(--ad-side);
}

/* ---------- Toasts: a dark pill with a coloured dot, centred on the page area ---------- */

html.ad-on body.ra-portal--signed-in .ra-estimate-toast:not([hidden]){
  left: calc(var(--rw-side-nav, 0px) + (100vw - var(--rw-side-nav, 0px)) / 2) !important;
  bottom: 28px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ad-ink) !important;
  color: #fff !important;
  font: 500 0.9rem/1.35 var(--ad-sans) !important;
  text-align: left;
  box-shadow: 0 18px 40px -16px rgba(15, 27, 45, 0.55) !important;
  animation: ad-toast 0.22s var(--ad-ease);
}

html.ad-on body.ra-portal--signed-in .ra-estimate-toast:not([hidden])::before{
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
}

html.ad-on body.ra-portal--signed-in .ra-estimate-toast[data-tone="warn"]::before{
  background: #fbbf24;
}

html.ad-on body.ra-portal--signed-in .ra-estimate-toast[data-tone="error"]::before{
  background: #fb7185;
}

@keyframes ad-toast{
  from{ opacity: 0; transform: translate(-50%, 8px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Profile pages: label and value on one line ---------- */

html.ad-on body.ra-portal--signed-in :is([data-rw-owner-page="profile"], [data-rw-tenant-page="profile"], [data-rw-agent-page="profile"]) .ra-owner__card > p{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--ad-line-2);
  color: var(--ad-mute);
  font: 550 0.85rem/1.4 var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in :is([data-rw-owner-page="profile"], [data-rw-tenant-page="profile"], [data-rw-agent-page="profile"]) .ra-owner__card > p:last-child{
  border-bottom: 0;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-owner-page="profile"], [data-rw-tenant-page="profile"], [data-rw-agent-page="profile"]) .ra-owner__card > p > span{
  color: var(--ad-ink);
  font: 500 0.95rem/1.4 var(--ad-sans);
}

@media (max-width: 640px){
  html.ad-on body.ra-portal--signed-in :is([data-rw-owner-page="profile"], [data-rw-tenant-page="profile"], [data-rw-agent-page="profile"]) .ra-owner__card > p{
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---------- Line pages and pick panels (add a line, pick an estimate, pay): the dialog look ----------
   Their place and size stay the classic ones (portal.css); only the surface changes. */

html.ad-on body.ra-portal--signed-in :is(#rwAgentOwnerInvoiceLinePage, #rwVendorInvoiceLinePage, #rwAgentEstimateLinePage, #rwVendorEstimateLinePage, #rwEmailInvoiceLinePage, #rwAgentInvoicePayPage, #rwAgentOwnerInvoiceEstimatePick, #rwVendorInvoiceEstimatePick, #rwAgentInvoiceEstimatePick, #rwEstimatePhotoPage, .ra-pay-dialog > .ra-estimate-line-page):not([hidden]){
  border: 1px solid var(--ad-line) !important;
  border-radius: 22px !important;
  background: var(--ad-paper) !important;
  color: var(--ad-ink);
  box-shadow: 0 0 0 100vmax rgba(15, 27, 45, 0.32), 0 40px 80px -30px rgba(15, 27, 45, 0.45) !important;
  font-family: var(--ad-sans);
}

html.ad-on body.ra-portal--signed-in .ra-estimate-line-page__fields{
  gap: 16px !important;
  font-size: 0.95rem !important;
}

html.ad-on body.ra-portal--signed-in .ra-pick-head{
  border-bottom: 1px solid var(--ad-line-2);
  background: transparent !important;
}

html.ad-on body.ra-portal--signed-in .ra-pick-head :is(h2, h3){
  color: var(--ad-ink);
  font: 400 1.5rem/1.2 var(--ad-serif) !important;
}

/* ---------- Taxes ----------
   Hovering the header row shows a hairline between its cells (also the column's drag handle); the
   one under the pointer turns navy. Money is right
   aligned in the header as in the rows, so a title and its numbers move together when a column
   is dragged; the money column is kept narrow so no empty band opens before it. Row buttons are the compact size and wrap inside their cell instead of clipping. */

html.ad-on body.ra-portal--signed-in #rwTaxes thead tr:hover th:not(.ra-inv-check):not(:last-child) .ra-col-resize::after{
  top: 14px;
  bottom: 14px;
  right: 0;
  width: 1px;
  background: color-mix(in srgb, var(--ad-mute) 45%, var(--ad-line));
}

html.ad-on body.ra-portal--signed-in #rwTaxes thead th:hover .ra-col-resize::after,
html.ad-on body.ra-portal--signed-in #rwTaxes thead .ra-col-resize:hover::after{
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--ad-navy-2);
}

html.ad-on body.ra-portal--signed-in #rwTaxes table.ra-tax-grid thead th.ra-tax-money,
html.ad-on body.ra-portal--signed-in #rwTaxes table.ra-tax-grid td.ra-tax-money{
  text-align: left !important;
}

html.ad-on body.ra-portal--signed-in #rwTaxes .ra-tax-act__btns .ra-vendor__btn{
  min-height: 32px;
  padding: 0 12px !important;
  font-size: 0.8rem !important;
}

html.ad-on body.ra-portal--signed-in #rwTaxes td.ra-tax-status{
  white-space: normal;
}

/* Clear filters beside a list search: a funnel-with-x icon in the filter pill's look. */
html.ad-on body.ra-portal--signed-in .ra-list-reset{
  width: var(--ad-field-h);
  height: var(--ad-field-h);
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: var(--ad-paper);
  color: var(--ad-ink-2);
}

html.ad-on body.ra-portal--signed-in .ra-list-reset:hover{
  border-color: color-mix(in srgb, var(--ad-line) 50%, var(--ad-mute));
  color: var(--ad-ink);
}

/* Owners, Tenants, Vendors tabs (List, Transactions, Charge, Single payment): the type, the search and
   the reset sit right after the title, the same sizes in the same place on every tab and every page;
   the tab's other tools go right. */
html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar{
  justify-content: flex-start;
}

html.ad-on body.ra-portal--signed-in .ra-owner-filters{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

html.ad-on body.ra-portal--signed-in .ra-owner-filters > .ra-people__field{
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  align-self: center;
}

html.ad-on body.ra-portal--signed-in .ra-owner-filters :is(select, .ra-search-select, .ra-search-select__btn){
  flex: 0 0 auto;
  width: 180px !important;
  max-width: 100%;
  margin: 0;
}

html.ad-on body.ra-portal--signed-in .ra-owner-filters input[type="search"]{
  flex: 0 0 auto;
  width: 240px !important;
  max-width: 100%;
  margin: 0;
}

/* Owners, Tenants and Vendors, every tab: the search is the drop lists' width. */
@media (min-width: 1025px){
  html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-owner-filters input[type="search"]{
    width: 180px !important;
  }
}

/* One title-row height on every tab: the navy and draft buttons are the fields' height, so nothing on
   the row shifts between tabs. The table starts right under it; a status line shows between only when
   it has text. */
html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar{
  min-height: var(--ad-field-h);
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Vendors → Drafts: its title row is the same height and place as every other tab's title row. */
html.ad-on body.ra-portal--signed-in #rwAgentInvoiceListView > .ra-invoice-toolbar > .ra-invoice-head{
  justify-content: flex-start;
  align-items: center;
  align-items: center !important;
  min-height: var(--ad-field-h);
  margin-top: 8px;
  margin-bottom: 12px;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceListView > .ra-invoice-toolbar > .ra-invoice-head > .ra-owner__title{
  flex: 0 0 8rem;
  width: 8rem;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in #rwAgentInvoiceListView > .ra-invoice-toolbar > .ra-invoice-head > .ra-invoice-head__actions{
  margin-left: auto;
}

/* Payment → Pay from: one short line, "From Trust: Rent", in the page header left of the tabs; the
   menu under it keeps its full width. */
/* Same height and offsets as the tabs' pill beside it, so the two sit on one line. */
html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayFrom, #rwTenantPayFrom, #rwVendorPayFrom){
  flex: 0 0 auto;
  align-self: flex-start;
  width: 190px;
  margin: 0 0 0 auto;
}

html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayFrom, #rwTenantPayFrom, #rwVendorPayFrom) :is(#rwOwnerPayAccountBtn, #rwTenantPayAccountBtn, #rwVendorPayAccountBtn){
  height: 42px !important;
}

/* Pay now and Charge now (and both Apply drafts) are one width, so nothing beside them moves between tabs. */
html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-fee-actions > button{
  width: 104px;
  padding: 0 10px !important;
  justify-content: center;
  text-align: center;
}

html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayFrom, #rwTenantPayFrom, #rwVendorPayFrom)[hidden]{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in .ra-invoice-head:has(> :is(#rwOwnerPayFrom, #rwTenantPayFrom, #rwVendorPayFrom):not([hidden])) > .ra-owner-tabs{
  margin-left: 0 !important;
}

html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayAccountBtn, #rwTenantPayAccountBtn, #rwVendorPayAccountBtn){
  width: 190px;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayAccountBtn, #rwTenantPayAccountBtn, #rwVendorPayAccountBtn) > .ra-owner-pay-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-fee-actions > button{
  height: var(--ad-field-h) !important;
  min-height: 0 !important;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) :is(#rwOwnerPayPane, #rwOwnerFeeModal, #rwTenantPayPane, #rwTenantChargePane, #rwVendorPayPane){
  gap: 0;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) :is(#rwOwnerPayHint, #rwTenantPayHint, #rwVendorPayHint, :is(#rwOwnerFeeModal, #rwTenantChargePane) > .ra-owner-fee-status){
  min-height: 0;
  margin: 0 0 8px;
}

/* Single payment: the funds line sits on the title row between Selected only and Pay now, so the
   table starts right under the title row (as on List) and never moves when rows are ticked. */
html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-pay-bar{
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-pay-bar > p{
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The funds line ("From Trust: Rent ••6789 · Needed $… · Arrives in …") floats in the gap above the
   title, left-aligned, in small type: out of the flow, so it never pushes the title or boxes and the
   page doesn't move when it appears. */
html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar:has(.ra-owner-pay-bar){
  position: relative;
}

/* The pane clips what is outside it (its table scrolls inside), so it reaches 16px up into the empty
   gap under the tabs and pads its content back down: the same layout, with room for the line. */
html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayPane, #rwVendorPayPane, #rwTenantPayPane):not([hidden]){
  margin-top: -16px;
  padding-top: 16px;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-pay-bar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 3px);
  justify-content: flex-start;
  pointer-events: none;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar .ra-owner-pay-bar > p{
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  pointer-events: auto;
}

html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) :is(#rwOwnerPayHint:empty, #rwTenantPayHint:empty, #rwVendorPayHint:empty, :is(#rwOwnerFeeModal, #rwTenantChargePane) > .ra-owner-fee-status:not(:has(> p:not(:empty)))){
  display: none;
}

@media (min-width: 1025px){
  /* Everything else stays on the title's row (Selected only, Apply draft, Pay now / Charge now). */
  html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar > .ra-owner-pay-tools{
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar > .ra-owner-pay-tools > *{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  html.ad-on body.ra-portal--signed-in :is([data-rw-agent-page="owner-transactions"], [data-rw-agent-page="tenant-transactions"], [data-rw-agent-page="invoices"]) .ra-tx-titlebar > .ra-owner__title{
    flex: 0 0 8rem;
    width: 8rem;
    white-space: nowrap;
  }
}

/* Owners → Charge (Management fee): "Only owners who received rent this month" in the page header
   left of the tabs, like Pay from, so the Charge title row keeps its room. Only on the Charge tab. */
html.ad-on body.ra-portal--signed-in .ra-owner-fee-rent-only{
  flex: 0 0 auto;
  align-self: flex-start;
  height: 42px;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

html.ad-on body.ra-portal--signed-in [data-rw-agent-page="owner-transactions"]:has(> #rwOwnerFeeModal[hidden]) .ra-owner-fee-rent-only{
  display: none !important;
}

html.ad-on body.ra-portal--signed-in [data-rw-agent-page="owner-transactions"]:has(> #rwOwnerFeeModal:not([hidden])) .ra-invoice-head:has(> .ra-owner-fee-rent-only:not([hidden])) > .ra-owner-tabs{
  margin-left: 0 !important;
}

@media (max-width: 1024px){
  html.ad-on body.ra-portal--signed-in .ra-owner-filters{
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  html.ad-on body.ra-portal--signed-in .ra-owner-filters > :not(.ra-list-reset){
    flex: 1 1 140px;
    width: auto !important;
  }

  html.ad-on body.ra-portal--signed-in .ra-owner-filters > .ra-people__field > :is(select, input, .ra-search-select, .ra-search-select__btn),
  html.ad-on body.ra-portal--signed-in .ra-owner-filters .ra-search-select > .ra-search-select__btn{
    width: 100% !important;
  }
}

/* A saved record opens as a view: every field reads like a readonly one (no chevron) until Edit. */
html.ad-on body.ra-portal--signed-in .ra-form--view:not(#rwViewA):not(#rwViewB) :is(input, textarea, select):not([type="checkbox"], [type="radio"]){
  background-color: var(--ad-side) !important;
  color: var(--ad-ink-2) !important;
  cursor: default;
}

html.ad-on body.ra-portal--signed-in .ra-form--view:not(#rwViewA):not(#rwViewB) select{
  background-image: none !important;
}

/* Owners → Payment: the Pay from box is short, its menu keeps room for the bank digits and balances. */
html.ad-on body.ra-portal--signed-in :is(#rwOwnerPayAccountMenu, #rwTenantPayAccountMenu, #rwVendorPayAccountMenu){
  min-width: 320px;
}

/* Please confirm with three answers (chooseInApp): the buttons stay on one row; the dialog is a bit
   wider on a desktop, and on a phone the buttons share the row. */
html.ad-on body.ra-portal--signed-in #rwAppConfirm.is-three .ra-portal__modal-actions{
  flex-wrap: nowrap !important;
}
html.ad-on body.ra-portal--signed-in #rwAppConfirm.is-three .ra-portal__modal-actions > button{
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap;
}
@media (min-width: 801px){
  html.ad-on body.ra-portal--signed-in #rwAppConfirm.is-three .ra-portal__modal{
    width: max(32vw, 540px) !important;
  }
}
@media (max-width: 600px){
  html.ad-on body.ra-portal--signed-in #rwAppConfirm.is-three .ra-portal__modal-actions > button{
    flex: 1 1 0 !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
  }
}

/* A short form inside Please confirm (confirmWithFields): two fields a row on a desktop, one on a phone. */
.ra-app-confirm__fields:not([hidden]){
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 14px;
}
.ra-app-confirm__fields .ra-people__field{
  display: grid;
  gap: 4px;
  margin: 0;
}
.ra-app-confirm__fields-error{
  grid-column: 1 / -1;
  min-height: 1lh;
  color: #c24a4a;
}
.ra-app-confirm__fields-error:empty{
  min-height: 0;
}
@media (max-width: 600px){
  .ra-app-confirm__fields:not([hidden]){
    grid-template-columns: 1fr;
  }
}