/* RentLedger console: legacy skin.
   Restyles the older console sections (admin.js, inspect.js, texts.js, repairs.js)
   while they are shown inside the new console shell, so every screen uses the
   same cards, type, controls, chips and tables as the new views.

   Rules of this file:
   - Every selector is scoped under `html.rl-shell .rl-legacy`. Classic
     (/admin?classic=1) never sets html.rl-shell, so nothing here applies there.
   - Visual only. No element is hidden, moved or re-ordered for content reasons.
     `display: … !important` is never used on anything that can carry
     `.hidden`, `.rl-part-off` or an inline display toggle, so legacy show/hide
     logic keeps working.
   - Colours come only from rl-tokens.css. Legacy content always renders light
     (redesign spec §2.2): the semantic tokens are re-declared inside
     .rl-legacy with the light-theme values from rl-tokens.css, so the dark
     console frame never bleeds into hard-coded light legacy markup.
   - `!important` appears only where the legacy markup sets the same property
     inline (inline styles beat any stylesheet rule otherwise). */

/* ===== 0. Scope: light tokens + legacy variables mapped onto tokens ========= */
html.rl-shell .rl-legacy {
  color-scheme: light;
  /* light-theme values (identical to rl-tokens.css :root) */
  --rl-bg: var(--rl-n-50); --rl-surface: var(--rl-n-0); --rl-surface-2: var(--rl-n-25); --rl-sunken: var(--rl-n-100);
  --rl-border: var(--rl-n-200); --rl-border-strong: var(--rl-n-300);
  --rl-ink: var(--rl-n-900); --rl-ink-2: var(--rl-n-700); --rl-ink-3: var(--rl-n-600);
  --rl-brand: var(--rl-green-700); --rl-brand-hover: var(--rl-green-800); --rl-brand-ink: var(--rl-n-0);
  --rl-brand-text: var(--rl-green-700); --rl-brand-soft: var(--rl-green-100); --rl-brand-soft-ink: var(--rl-green-800);
  --rl-badge-bg: #f2d58a; --rl-badge-ink: var(--rl-green-900);
  --rl-ok: #2e6b30; --rl-ok-bg: #e3f0e2;
  --rl-warn: #7f5200; --rl-warn-bg: #fbefd5;
  --rl-bad: #9e2f1c; --rl-bad-bg: #f8e3dd;
  --rl-info: #2b5878; --rl-info-bg: #e2ecf4;
  --rl-neutral: #5a5348; --rl-neutral-bg: #eeeae1;
  --rl-focus: #1f6fa8;
  --rl-link: var(--rl-green-700);
  --rl-hover: rgba(36,33,28,.04); --rl-selected: var(--rl-green-50); --rl-disabled-ink: var(--rl-n-500);
  --rl-e1: 0 1px 2px rgba(36,33,28,.06), 0 1px 1px rgba(36,33,28,.04);
  --rl-e2: 0 8px 24px rgba(36,33,28,.14);
  /* the old stylesheet's variables, used in hundreds of inline styles */
  --primary-color: var(--rl-ink); --secondary-color: var(--rl-brand); --accent-color: var(--rl-brand-hover);
  --text-color: var(--rl-ink); --light-bg: var(--rl-bg); --white: var(--rl-surface); --border-color: var(--rl-border);
  --shadow: var(--rl-e1);

  color: var(--rl-ink); font-size: var(--rl-fs-md); line-height: var(--rl-lh);
  -webkit-font-smoothing: antialiased;
}

/* Light theme: no frame around legacy content, so its cards sit on the page
   background exactly like the new views. Dark theme: legacy stays on a light
   paper panel (it hard-codes light colours inline). */
html.rl-shell .rl-legacy { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  html.rl-shell:not([data-theme="light"]) .rl-legacy {
    background: var(--rl-paper); border: 0; border-radius: var(--rl-r-lg); padding: var(--rl-s-4);
  }
}
html.rl-shell[data-theme="dark"] .rl-legacy { background: var(--rl-paper); border: 0; border-radius: var(--rl-r-lg); padding: var(--rl-s-4); }
@media (min-width: 1100px) {
  html.rl-shell[data-theme="dark"] .rl-legacy { padding: var(--rl-s-5); }
}
@media (min-width: 1100px) and (prefers-color-scheme: dark) {
  html.rl-shell:not([data-theme="light"]) .rl-legacy { padding: var(--rl-s-5); }
}
@media (max-width: 767px) {
  html.rl-shell[data-theme="dark"] .rl-legacy { padding: var(--rl-s-3); border-radius: var(--rl-r-md); }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  html.rl-shell:not([data-theme="light"]) .rl-legacy { padding: var(--rl-s-3); border-radius: var(--rl-r-md); }
}

html.rl-shell .rl-legacy img,
html.rl-shell .rl-legacy video,
html.rl-shell .rl-legacy audio { max-width: 100%; }

/* ===== 1. Text ============================================================== */
html.rl-shell .rl-legacy p { line-height: var(--rl-lh); }
html.rl-shell .rl-legacy .hint { font-size: var(--rl-fs-sm); line-height: var(--rl-lh); color: var(--rl-ink-3); }
html.rl-shell .rl-legacy .muted { color: var(--rl-ink-3); }
html.rl-shell .rl-legacy p.muted { margin: var(--rl-s-2) 0; }
html.rl-shell .rl-legacy :is(strong, b) { font-weight: 600; }
html.rl-shell .rl-legacy li { margin: 2px 0; }
html.rl-shell .rl-legacy code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--rl-sunken); color: var(--rl-ink-2); padding: 1px 5px; border-radius: 4px;
}
html.rl-shell .rl-legacy a:not(.btn-sm):not([class*="rl-"]) { color: var(--rl-link); text-underline-offset: 2px; }
html.rl-shell .rl-legacy a:not(.btn-sm):not([class*="rl-"]):hover { text-decoration: underline; }

/* Headings */
html.rl-shell .rl-legacy h2 {
  font: 600 var(--rl-fs-xl)/var(--rl-lh-tight) var(--rl-font-ui); color: var(--rl-ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rl-s-2);
}
/* Card titles: lg / 600 / ink, like .rl-card__title */
html.rl-shell .rl-legacy .card h3 {
  font: 600 var(--rl-fs-lg)/var(--rl-lh-tight) var(--rl-font-ui); color: var(--rl-ink) !important;
  margin: 0 0 var(--rl-s-3); letter-spacing: 0; text-transform: none;
}
/* Section headings between lists (outside a card): the band header style the
   new views use for list groups. */
html.rl-shell .rl-legacy h3:not(.card h3) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rl-s-2);
  min-height: 32px; margin: var(--rl-s-6) 0 var(--rl-s-3);
  font: 700 var(--rl-fs-sm)/1.2 var(--rl-font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--rl-ink-2) !important;
}
/* Sub-text, counts and controls inside any heading keep normal type */
html.rl-shell .rl-legacy :is(h2, h3, h4) :is(.muted, span:not(.badge), label) {
  font-family: var(--rl-font-ui); font-weight: 400; font-size: var(--rl-fs-sm) !important;
  letter-spacing: 0; text-transform: none; color: var(--rl-ink-3) !important; line-height: 1.35;
}
html.rl-shell .rl-legacy :is(h2, h3, h4) :is(button, select, input) { text-transform: none; letter-spacing: 0; }
/* Floated header controls (Refresh, filters) become a right-aligned toolbar */
html.rl-shell .rl-legacy :is(h3, h4):has(> [style*="float"]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rl-s-2);
}
html.rl-shell .rl-legacy :is(h3, h4) > [style*="float"] { float: none !important; margin: 0 !important; }
html.rl-shell .rl-legacy :is(h3, h4) > [style*="float"]:not([style*="float"] ~ [style*="float"]) { margin-left: auto !important; }
html.rl-shell .rl-legacy h4 { font: 600 var(--rl-fs-md)/var(--rl-lh-tight) var(--rl-font-ui); color: var(--rl-ink) !important; }
/* Section labels inside the lease/document form */
html.rl-shell .rl-legacy #docFields > h4 {
  margin: var(--rl-s-4) 0 0 !important; padding-top: var(--rl-s-2);
  font: 700 var(--rl-fs-sm)/1.2 var(--rl-font-display) !important; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rl-ink-2) !important; border-top: 1px solid var(--rl-border);
}
/* Inline coloured labels that were "brand green" become plain ink */
html.rl-shell .rl-legacy :is(strong, b, summary, span, div)[style*="color:var(--secondary-color)"] { color: var(--rl-ink) !important; }
html.rl-shell .rl-legacy #spPropFormTitle { font-size: var(--rl-fs-md) !important; font-weight: 600; }

/* ===== 2. Cards, panels, notes ============================================= */
html.rl-shell .rl-legacy .card {
  background: var(--rl-surface); color: var(--rl-ink);
  border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); box-shadow: var(--rl-e1);
  padding: var(--rl-s-4); margin: 0 0 var(--rl-s-4);
}
@media (min-width: 1100px) { html.rl-shell .rl-legacy .card { padding: var(--rl-s-5); } }
html.rl-shell .rl-legacy .card .card { box-shadow: none; }
/* A card's first bold line is its title (deposit statement, repair report parts) */
html.rl-shell .rl-legacy .card > b:first-child { font-size: var(--rl-fs-lg); font-weight: 600; color: var(--rl-ink); }
/* Row lists made of cards (documents, payments, inspections, repair jobs): tighter */
html.rl-shell .rl-legacy :is(#docsList, #adminPayList, #inspList, #depList, #rrList, #ticketsList) > .card {
  padding: var(--rl-s-3) var(--rl-s-4); margin-bottom: var(--rl-s-2);
}
/* Sticky action bars inside the inspection / deposit / repair editors */
html.rl-shell .rl-legacy .card[style*="sticky"] {
  box-shadow: var(--rl-e2); border-color: var(--rl-border-strong);
  background: var(--rl-surface) !important;
}

/* Tinted panels and notes: hard-coded tints mapped onto the status tokens */
html.rl-shell .rl-legacy :is([style*="background:#fff6e5"], [style*="background:#fff1d6"]):not(.badge):not(.btn-sm) {
  background: var(--rl-warn-bg) !important; color: var(--rl-warn);
}
html.rl-shell .rl-legacy :is([style*="background:#e3f3e3"], [style*="background:#f3faf3"]):not(.badge):not(.btn-sm) {
  background: var(--rl-ok-bg) !important;
}
html.rl-shell .rl-legacy :is([style*="background:#eef3fb"], [style*="background:#e8f0fb"], [style*="background:#f4f8fb"]):not(.badge):not(.btn-sm) {
  background: var(--rl-info-bg) !important;
}
html.rl-shell .rl-legacy :is([style*="background:#fde2e2"], [style*="background:#fdf5f5"]):not(.badge):not(.btn-sm) {
  background: var(--rl-bad-bg) !important;
}
html.rl-shell .rl-legacy :is([style*="background:#eee"], [style*="background:#f0f0f0"]):not(.badge):not(.btn-sm) {
  background: var(--rl-neutral-bg) !important;
}
html.rl-shell .rl-legacy :is([style*="background:#f6f9f6"], [style*="background:#fafbfa"], [style*="background:#fafafa"],
  [style*="background:#f7faf7"], [style*="background:#f3f7f3"], [style*="background:#fffaf0"], [style*="background:#f2f2f2"]):not(.badge):not(.btn-sm):not(summary) {
  background: var(--rl-surface-2) !important;
}
/* Tinted cards drop their neutral outline (an inline accent border is kept) */
html.rl-shell .rl-legacy .card:is([style*="background:#fff6e5"], [style*="background:#fff1d6"], [style*="background:#e3f3e3"],
  [style*="background:#eef3fb"], [style*="background:#f4f8fb"], [style*="background:#fde2e2"], [style*="background:#fdf5f5"]):not([style*="border"]) { border-color: transparent; box-shadow: none; }
html.rl-shell .rl-legacy #setupIntro { margin-bottom: var(--rl-s-3) !important; }
html.rl-shell .rl-legacy #spRequiredNote { border-radius: var(--rl-r-md) !important; padding: var(--rl-s-3) var(--rl-s-4) !important; }

/* Hard-coded text colours mapped onto tokens */
html.rl-shell .rl-legacy :is([style*="color:#b00000"], [style*="color:#b00;"], [style*="color:#a11"], [style*="color:#c0392b"], [style*="color: rgb(176, 0, 0)"]):not(.badge):not(.btn-sm) { color: var(--rl-bad) !important; }
html.rl-shell .rl-legacy :is([style*="color:#7a5b12"], [style*="color:#8a5a00"], [style*="color:#c76e00"], [style*="color:#b5651d"], [style*="color:#8a5a1a"]):not(.badge):not(.btn-sm) { color: var(--rl-warn) !important; }
html.rl-shell .rl-legacy [style*="color:#2c5f2d"]:not(.badge):not(.btn-sm) { color: var(--rl-ok) !important; }
html.rl-shell .rl-legacy :is([style*="color:#1d5e9e"], [style*="color:#3a6ea5"], [style*="color:#1d3a5f"]):not(.badge):not(.btn-sm) { color: var(--rl-info) !important; }
html.rl-shell .rl-legacy :is([style*="color:#666"], [style*="color:#777"], [style*="color:#888"], [style*="color:#999"], [style*="color:#aaa"], [style*="color:#9ab29a"]):not(.badge):not(.btn-sm) { color: var(--rl-ink-3) !important; }
html.rl-shell .rl-legacy :is([style*="color:#555"], [style*="color:#444"]):not(.badge):not(.btn-sm) { color: var(--rl-ink-2) !important; }
html.rl-shell .rl-legacy :is([style*="color:#333"], [style*="color:#222"]):not(.badge):not(.btn-sm) { color: var(--rl-ink) !important; }

/* ===== 3. Form controls ===================================================== */
html.rl-shell .rl-legacy :is(.ti, .select-input, select, textarea,
  input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="date"], [type="month"],
           [type="url"], [type="search"], [type="password"], [type="time"], :not([type]))) {
  min-height: 40px; max-width: 100%; padding: 8px 10px;
  border: 1px solid var(--rl-border-strong); border-radius: var(--rl-r-sm);
  background-color: var(--rl-surface); color: var(--rl-ink);
  font: 400 var(--rl-fs-md)/1.3 var(--rl-font-ui);
  transition: border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}
html.rl-shell .rl-legacy textarea { line-height: var(--rl-lh); resize: vertical; }
html.rl-shell .rl-legacy select[multiple] { padding: 4px; }
html.rl-shell .rl-legacy select[multiple] option { padding: 4px 6px; border-radius: 4px; }
html.rl-shell .rl-legacy :is(input, textarea)::placeholder { color: var(--rl-ink-3); opacity: 1; }
html.rl-shell .rl-legacy :is(.ti, .select-input, select, textarea, input):hover:not(:disabled):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border-color: var(--rl-n-400); }
html.rl-shell .rl-legacy :is(.ti, .select-input, select, textarea, input):focus {
  outline: 2px solid var(--rl-focus); outline-offset: 2px; border-color: var(--rl-focus);
}
html.rl-shell .rl-legacy :is(.ti, .select-input, select, textarea, input):disabled {
  background-color: var(--rl-sunken); color: var(--rl-disabled-ink); cursor: not-allowed; opacity: 1;
}
html.rl-shell .rl-legacy :is(input, textarea)[readonly] { background-color: var(--rl-surface-2); }
/* The required-title field on "Open a ticket" keeps its red emphasis, in tokens */
html.rl-shell .rl-legacy #ntTitle { border-color: var(--rl-bad) !important; }
html.rl-shell .rl-legacy #ntTitle::placeholder { color: var(--rl-bad); }

/* Checkboxes and radios */
html.rl-shell .rl-legacy input:is([type="checkbox"], [type="radio"]) {
  width: 18px; height: 18px; margin: 0 6px 0 0; flex: none; vertical-align: -4px;
  accent-color: var(--rl-brand); cursor: pointer;
}
html.rl-shell .rl-legacy label[style*="flex"] > input:is([type="checkbox"], [type="radio"]) { margin: 0; }
html.rl-shell .rl-legacy input:is([type="checkbox"], [type="radio"]):focus-visible { outline: 2px solid var(--rl-focus); outline-offset: 2px; }

/* File inputs: the picker button looks like a secondary button */
html.rl-shell .rl-legacy input[type="file"] { font: 400 var(--rl-fs-sm)/1.3 var(--rl-font-ui); color: var(--rl-ink-2); max-width: 100%; }
html.rl-shell .rl-legacy input[type="file"]::file-selector-button {
  margin-right: var(--rl-s-3); min-height: 32px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--rl-border-strong); border-radius: var(--rl-r-sm);
  background: var(--rl-surface); color: var(--rl-ink); font: 600 var(--rl-fs-sm)/1.2 var(--rl-font-ui);
}
html.rl-shell .rl-legacy input[type="file"]::file-selector-button:hover { background: var(--rl-sunken); }

/* Labels */
html.rl-shell .rl-legacy label { color: var(--rl-ink-2); font-size: var(--rl-fs-sm); }
html.rl-shell .rl-legacy label:has(> input:is([type="checkbox"], [type="radio"])) { color: var(--rl-ink); cursor: pointer; }
/* Label above its field: field-label weight, and the inline "*" or "(optional)"
   stays on the label line instead of wrapping onto its own row. */
html.rl-shell .rl-legacy label[style*="flex-direction:column"] {
  display: grid !important; grid-template-columns: auto 1fr; align-content: start; align-items: baseline;
  column-gap: 4px; row-gap: 4px !important;
  font-weight: 600; color: var(--rl-ink-2);
}
html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(input, select, textarea),
html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(input, select, textarea) ~ * { grid-column: 1 / -1; }
html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(input, select, textarea) { width: 100%; }
html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(span, .muted) { font-weight: 400; justify-self: start; }
html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(input, select, textarea) ~ :is(span, .muted) { font-size: var(--rl-fs-xs) !important; color: var(--rl-ink-3) !important; }
html.rl-shell .rl-legacy .doc-field > label[for] { display: block; margin-bottom: 4px; font-weight: 600; color: var(--rl-ink-2); }

/* Rows: consistent gaps; stacked-label rows line up on the top edge */
html.rl-shell .rl-legacy .row { gap: var(--rl-s-3); }
html.rl-shell .rl-legacy .row:has(> label[style*="flex-direction:column"]) { align-items: flex-start; }
html.rl-shell .rl-legacy .row:has(> label[style*="flex-direction:column"]) > :is(.btn-sm, button) { align-self: flex-end; }

/* The lease/document form: a clean two- or three-column grid on desktop */
html.rl-shell .rl-legacy #docFields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--rl-s-3) var(--rl-s-4); align-items: start;
}
html.rl-shell .rl-legacy #docFields > h4,
html.rl-shell .rl-legacy #docFields > .doc-field:has(textarea),
html.rl-shell .rl-legacy #docFields > .doc-field:has(.row) { grid-column: 1 / -1; }
html.rl-shell .rl-legacy #docFields > .doc-field { margin: 0 !important; min-width: 0; }
html.rl-shell .rl-legacy #docParties .party-row { gap: var(--rl-s-2) !important; }

/* ===== 4. Buttons =========================================================== */
/* Base = primary (the old default button was solid brand green) */
html.rl-shell .rl-legacy :is(.btn-sm, .btn-primary, button:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: var(--rl-r-sm);
  border: 1px solid var(--rl-brand); background: var(--rl-brand); color: var(--rl-brand-ink);
  font: 600 var(--rl-fs-sm)/1.2 var(--rl-font-ui); letter-spacing: 0; text-transform: none;
  text-decoration: none; text-align: center; white-space: nowrap; vertical-align: middle;
  cursor: pointer; box-shadow: none;
  transition: background-color var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease);
}
html.rl-shell .rl-legacy :is(.btn-sm, .btn-primary, button:not([class])):hover { background-color: var(--rl-brand-hover); border-color: var(--rl-brand-hover); }
html.rl-shell .rl-legacy :is(.btn-sm, .btn-primary, button:not([class])):focus-visible { outline: 2px solid var(--rl-focus); outline-offset: 2px; }
html.rl-shell .rl-legacy :is(.btn-sm, .btn-primary, button:not([class])):disabled { opacity: .55; cursor: not-allowed; }

/* Secondary: every old button that carried its own colour (greys, blues,
   browns, purples). Outline on white, ink text. */
html.rl-shell .rl-legacy .btn-sm[style*="background"],
html.rl-shell .rl-legacy :is(#rebuildLedger, #bkRefresh, #spPropRefresh, #mvRefresh, #txRefresh, #apRefresh, #reReload).btn-sm,
html.rl-shell .rl-legacy .btn-sm[id^="refresh"] {
  background: var(--rl-surface) !important; border-color: var(--rl-border-strong); color: var(--rl-ink) !important;
}
html.rl-shell .rl-legacy .btn-sm[style*="background"]:hover:not(:disabled),
html.rl-shell .rl-legacy :is(#rebuildLedger, #bkRefresh, #spPropRefresh, #mvRefresh, #txRefresh, #apRefresh, #reReload).btn-sm:hover:not(:disabled),
html.rl-shell .rl-legacy .btn-sm[id^="refresh"]:hover:not(:disabled) {
  border-color: var(--rl-border-strong); box-shadow: inset 0 0 0 999px var(--rl-hover);
}
/* Old buttons explicitly painted brand green stay primary */
html.rl-shell .rl-legacy .btn-sm:is([style*="#2c5f2d"], [style*="rgb(44, 95, 45)"], [style*="--secondary-color"]) {
  background: var(--rl-brand) !important; border-color: var(--rl-brand); color: var(--rl-brand-ink) !important;
}
html.rl-shell .rl-legacy .btn-sm:is([style*="#2c5f2d"], [style*="rgb(44, 95, 45)"], [style*="--secondary-color"]):hover:not(:disabled) {
  background: var(--rl-brand-hover) !important; border-color: var(--rl-brand-hover); box-shadow: none;
}

/* Row actions (tables, list rows, header toolbars): small and
   secondary, so a list doesn't turn into a wall of solid buttons. */
html.rl-shell .rl-legacy :where(td, h3, h4, #inspList, #depList, #rrList, #docsList, #ticketsList, #bkRecurring, #leaseList) .btn-sm.btn-sm {
  min-height: 30px; padding: 0 10px; font-size: var(--rl-fs-xs);
  background: var(--rl-surface) !important; border-color: var(--rl-border-strong); color: var(--rl-ink) !important;
}
html.rl-shell .rl-legacy :where(td, h3, h4, #inspList, #depList, #rrList, #docsList, #ticketsList, #bkRecurring, #leaseList) .btn-sm.btn-sm:hover:not(:disabled) {
  border-color: var(--rl-border-strong); box-shadow: inset 0 0 0 999px var(--rl-hover);
}
/* …except the one action a row exists for */
html.rl-shell .rl-legacy .btn-sm.btn-sm:is(.t-save, .k-save, .k-send, .doc-cs, .doc-paid, .doc-edit),
html.rl-shell .rl-legacy #loadAudit.btn-sm {
  background: var(--rl-brand) !important; border-color: var(--rl-brand); color: var(--rl-brand-ink) !important;
}
html.rl-shell .rl-legacy .btn-sm.btn-sm:is(.t-save, .k-save, .k-send, .doc-cs, .doc-paid, .doc-edit):hover:not(:disabled),
html.rl-shell .rl-legacy #loadAudit.btn-sm:hover:not(:disabled) { background: var(--rl-brand-hover) !important; box-shadow: none; }

/* Back buttons in the editors: ghost */
html.rl-shell .rl-legacy :is(#inBack, #dpBack, #reBack).btn-sm {
  background: transparent !important; border-color: transparent; color: var(--rl-brand-text) !important; padding-left: var(--rl-s-2);
}
html.rl-shell .rl-legacy :is(#inBack, #dpBack, #reBack).btn-sm:hover { box-shadow: inset 0 0 0 999px var(--rl-hover); }

/* Danger: deletes, voids, withdrawals, and the red "needs a statement" call */
html.rl-shell .rl-legacy .btn-sm.btn-sm:is([style*="#b00"], [style*="#a11"], [style*="#8a3b3b"], [style*="#fbe9e9"], [style*="rgb(176, 0, 0)"]) {
  background: var(--rl-bad-bg) !important; border-color: transparent; color: var(--rl-bad) !important;
}
html.rl-shell .rl-legacy .btn-sm.btn-sm:is([style*="#b00"], [style*="#a11"], [style*="#8a3b3b"], [style*="#fbe9e9"], [style*="rgb(176, 0, 0)"]):hover:not(:disabled) {
  border-color: var(--rl-bad); box-shadow: none;
}
/* The rent roll's new-console "Money" button keeps console.css styling */
html.rl-shell .rl-legacy .rl-roll-money { white-space: nowrap; }

/* ===== 5. Chips (old .badge) ================================================ */
html.rl-shell .rl-legacy .badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 8px !important; border-radius: var(--rl-r-pill) !important;
  font: 600 12px/1.4 var(--rl-font-ui) !important; letter-spacing: 0; text-transform: none; text-decoration: none;
  white-space: nowrap; background: var(--rl-neutral-bg); color: var(--rl-neutral);
}
html.rl-shell .rl-legacy .badge:is(.active, .tk-resolved) { background: var(--rl-ok-bg); color: var(--rl-ok); }
html.rl-shell .rl-legacy .badge:is(.pending, .tk-in_progress) { background: var(--rl-warn-bg); color: var(--rl-warn); }
html.rl-shell .rl-legacy .badge:is(.archived, .tk-closed) { background: var(--rl-neutral-bg); color: var(--rl-neutral); }
html.rl-shell .rl-legacy .badge.tk-open { background: var(--rl-info-bg); color: var(--rl-info); }
/* inline-coloured chips, by their old background */
html.rl-shell .rl-legacy .badge:is([style*="background:#eee"], [style*="background:#f0f0f0"]) { background: var(--rl-neutral-bg) !important; color: var(--rl-neutral) !important; }
html.rl-shell .rl-legacy .badge[style*="background:#e3f3e3"] { background: var(--rl-ok-bg) !important; color: var(--rl-ok) !important; }
html.rl-shell .rl-legacy .badge:is([style*="background:#fff6e5"], [style*="background:#fff1d6"], [style*="background:#ffe4c4"]) { background: var(--rl-warn-bg) !important; color: var(--rl-warn) !important; }
html.rl-shell .rl-legacy .badge[style*="background:#fde2e2"] { background: var(--rl-bad-bg) !important; color: var(--rl-bad) !important; }
html.rl-shell .rl-legacy .badge:is([style*="background:#eef3fb"], [style*="background:#eef;"]) { background: var(--rl-info-bg) !important; color: var(--rl-info) !important; }
html.rl-shell .rl-legacy .badge[style*="background:#2c5f2d"] { background: var(--rl-brand-soft) !important; color: var(--rl-brand-soft-ink) !important; }
html.rl-shell .rl-legacy .badge[style*="background:#b00000"] { background: var(--rl-bad) !important; color: var(--rl-brand-ink) !important; }
/* neutral-background chips whose meaning was carried by the text colour */
html.rl-shell .rl-legacy .badge.badge:is([style*="background:#f0f0f0"], [style*="background:#eee"])[style*="color:#2c5f2d"] { background: var(--rl-ok-bg) !important; color: var(--rl-ok) !important; }
html.rl-shell .rl-legacy .badge.badge:is([style*="background:#f0f0f0"], [style*="background:#eee"])[style*="color:#b00000"] { background: var(--rl-bad-bg) !important; color: var(--rl-bad) !important; }
html.rl-shell .rl-legacy .badge.badge:is([style*="background:#f0f0f0"], [style*="background:#eee"])[style*="color:#3a6ea5"] { background: var(--rl-info-bg) !important; color: var(--rl-info) !important; }
/* a long status sentence rendered as a block chip */
html.rl-shell .rl-legacy div.badge { display: inline-flex; white-space: normal; border-radius: var(--rl-r-md) !important; }

/* ===== 6. Tables ============================================================ */
html.rl-shell .rl-legacy table {
  width: 100%; border-collapse: collapse; font-size: var(--rl-fs-sm) !important;
  color: var(--rl-ink); font-variant-numeric: tabular-nums;
}
html.rl-shell .rl-legacy tr:has(> th) { background: transparent !important; }
html.rl-shell .rl-legacy th {
  padding: 8px 10px !important; vertical-align: bottom; white-space: nowrap;
  font: 600 var(--rl-fs-xs)/1.3 var(--rl-font-ui) !important; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rl-ink-3) !important; background: var(--rl-surface-2);
  border-top: 0 !important; border-bottom: 1px solid var(--rl-border) !important;
}
html.rl-shell .rl-legacy td { border-bottom: 1px solid var(--rl-border); vertical-align: middle; }
html.rl-shell .rl-legacy td:not([style*="padding-left"]) { padding: 10px !important; }
html.rl-shell .rl-legacy tbody tr:hover > td { background-color: var(--rl-hover); }
/* Rent roll: money columns right-aligned */
html.rl-shell .rl-legacy #rentRoll tr > :is(th, td):is(:nth-child(2), :nth-child(3)) { text-align: right; }
html.rl-shell .rl-legacy #rentRoll td.rl-roll-money-cell { padding: 10px !important; border-bottom: 1px solid var(--rl-border); }
html.rl-shell .rl-legacy td > :is(.btn-sm, button) + :is(.btn-sm, button) { margin-left: var(--rl-s-1); }
/* Right-aligned cells are money: keep each amount on one line */
html.rl-shell .rl-legacy td[style*="text-align:right"] { white-space: nowrap; }
/* Year-end report keeps its own emphasis lines; just tidy spacing */
html.rl-shell .rl-legacy #bkReport table { max-width: 560px !important; }
html.rl-shell .rl-legacy #bkReport td:not([style*="padding-left"]) { padding: 6px 10px !important; }
html.rl-shell .rl-legacy #bkReport td[style*="padding-left"] { padding-top: 4px !important; padding-bottom: 4px !important; }

/* Any table scrolls inside its own box (never the page) */
html.rl-shell .rl-legacy :has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative; }   /* relative: visually-hidden labels inside stay clipped by the scroller */
/* Tables that sit straight on the page get a card around them */
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview):has(> table) {
  background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md); box-shadow: var(--rl-e1);
}
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview) tr > :is(th, td):first-child { padding-left: var(--rl-s-4) !important; }
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview) tr > :is(th, td):last-child { padding-right: var(--rl-s-4) !important; }
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview) tr:last-child > td { border-bottom: 0 !important; }
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview) tr:has(> th) > th:first-child { border-top-left-radius: var(--rl-r-md); }
html.rl-shell .rl-legacy :is(#rentRoll, #auditLog, #bkEntries, #dhList, #bkPreview) tr:has(> th) > th:last-child { border-top-right-radius: var(--rl-r-md); }
html.rl-shell .rl-legacy #dhList > p { margin: var(--rl-s-2) var(--rl-s-4) var(--rl-s-3); }
html.rl-shell .rl-legacy #auditLog { margin-top: var(--rl-s-3); }

/* ===== 7. Disclosures (details / summary) =================================== */
html.rl-shell .rl-legacy summary { cursor: pointer; list-style: none; border-radius: var(--rl-r-sm); }
html.rl-shell .rl-legacy summary::-webkit-details-marker { display: none; }
html.rl-shell .rl-legacy summary:focus-visible { outline: 2px solid var(--rl-focus); outline-offset: 2px; }

/* Lease expirations: a collapsible card */
html.rl-shell .rl-legacy details[data-rl-part="leases"] {
  background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: var(--rl-r-md);
  box-shadow: var(--rl-e1); margin: 0 0 var(--rl-s-4) !important;
}
html.rl-shell .rl-legacy details[data-rl-part="leases"] > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--rl-s-2); min-height: 52px;
  padding: var(--rl-s-3) var(--rl-s-4) !important; background: transparent !important; border-radius: var(--rl-r-md) !important;
  font: 600 var(--rl-fs-lg)/1.3 var(--rl-font-ui) !important; color: var(--rl-ink) !important;
}
html.rl-shell .rl-legacy details[data-rl-part="leases"] > summary:hover { background: var(--rl-hover) !important; }
html.rl-shell .rl-legacy details[data-rl-part="leases"][open] > summary { border-bottom: 1px solid var(--rl-border); border-radius: var(--rl-r-md) var(--rl-r-md) 0 0 !important; }
html.rl-shell .rl-legacy details[data-rl-part="leases"] > summary > span { font-size: var(--rl-fs-sm) !important; font-weight: 400 !important; color: var(--rl-ink-3) !important; }
html.rl-shell .rl-legacy details[data-rl-part="leases"] > div { margin: 0 !important; padding: var(--rl-s-3) var(--rl-s-4) var(--rl-s-4); }

/* Group headers in the tenant and work-order lists (property groups,
   "inactive", "resolved"): band headers, not grey bars */
html.rl-shell .rl-legacy :is(#tenantsList, #ticketsList, #appsView) > details > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--rl-s-2); min-height: 40px;
  padding: var(--rl-s-2) 2px !important; background: transparent !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--rl-border);
  font: 700 var(--rl-fs-sm)/1.25 var(--rl-font-display) !important; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rl-ink-2) !important;
}
html.rl-shell .rl-legacy :is(#tenantsList, #ticketsList, #appsView) > details > summary:hover { color: var(--rl-ink) !important; }
html.rl-shell .rl-legacy :is(#tenantsList, #ticketsList, #appsView) > details > summary > span {
  font: 400 var(--rl-fs-sm)/1.3 var(--rl-font-ui) !important; letter-spacing: 0; text-transform: none; color: var(--rl-ink-3) !important;
}
html.rl-shell .rl-legacy :is(#tenantsList, #ticketsList, #appsView) > details > summary > span[style*="float"] { float: none !important; margin-left: auto; }
html.rl-shell .rl-legacy :is(#tenantsList, #ticketsList, #appsView) > details { margin-bottom: var(--rl-s-5) !important; }
html.rl-shell .rl-legacy #tenantsList > details > div { margin: var(--rl-s-3) 0 0 !important; }
/* Household members under a lead tenant */
html.rl-shell .rl-legacy #tenantsList > details > div > details:not(.card) > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 6px !important;
  font-size: var(--rl-fs-sm) !important; color: var(--rl-ink-3) !important;
}
html.rl-shell .rl-legacy #tenantsList > details > div > details:not(.card) > summary:hover { color: var(--rl-ink) !important; background: var(--rl-hover); }

/* Tenant rows ("manage" cards) */
html.rl-shell .rl-legacy details.t-card { padding: 0 !important; margin-bottom: var(--rl-s-2); overflow: hidden; }
html.rl-shell .rl-legacy details.t-card > summary {
  min-height: 52px; padding: var(--rl-s-2) var(--rl-s-4) !important; gap: 6px var(--rl-s-3) !important;
  border-radius: 0; transition: background-color var(--rl-dur) var(--rl-ease);
}
html.rl-shell .rl-legacy details.t-card > summary:hover { background: var(--rl-hover); }
html.rl-shell .rl-legacy details.t-card[open] > summary { background: var(--rl-surface-2) !important; border-radius: 0 !important; }
html.rl-shell .rl-legacy details.t-card > summary > strong { font-size: var(--rl-fs-md); font-weight: 600; color: var(--rl-ink); }
html.rl-shell .rl-legacy details.t-card > summary > span.muted { font-size: var(--rl-fs-sm) !important; }
/* the trailing "manage" cue becomes a small outline control */
html.rl-shell .rl-legacy details.t-card > summary > span:last-child {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--rl-border-strong); border-radius: var(--rl-r-sm); background: var(--rl-surface);
  font: 600 var(--rl-fs-xs)/1 var(--rl-font-ui) !important; color: var(--rl-ink-2) !important; white-space: nowrap;
}
html.rl-shell .rl-legacy details.t-card > summary:hover > span:last-child { border-color: var(--rl-n-400); }
html.rl-shell .rl-legacy details.t-card[open] > summary > span:last-child {
  background: var(--rl-selected); border-color: var(--rl-green-300); color: var(--rl-brand-text) !important;
}
html.rl-shell .rl-legacy details.t-card > div { padding: var(--rl-s-3) var(--rl-s-4) var(--rl-s-4) !important; }
html.rl-shell .rl-legacy details.t-card > div > .row + .row { margin-top: var(--rl-s-3) !important; }
html.rl-shell .rl-legacy details.t-card[style*="border-left"] { border-left-color: var(--rl-border-strong) !important; }

/* Inspection rooms */
html.rl-shell .rl-legacy #inRooms > details.card > summary { color: var(--rl-ink) !important; font-size: var(--rl-fs-md); padding: 4px 0; }
html.rl-shell .rl-legacy #inRooms > details.card > div { border-top-color: var(--rl-border) !important; }

/* ===== 8. Section specifics ================================================ */
/* Rent roll stats: the money-strip tile look */
html.rl-shell .rl-legacy #rollStats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--rl-s-3) !important; margin: 0 0 var(--rl-s-4) !important;
}
html.rl-shell .rl-legacy #rollStats > .stat {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0;
  background: var(--rl-surface) !important; border: 1px solid var(--rl-border); border-radius: var(--rl-r-md) !important;
  box-shadow: var(--rl-e1); padding: var(--rl-s-3) var(--rl-s-4) !important; text-align: left !important;
}
html.rl-shell .rl-legacy #rollStats > .stat > div:first-child {
  font: 700 var(--rl-fs-2xl)/var(--rl-lh-tight) var(--rl-font-ui) !important; color: var(--rl-ink) !important;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
html.rl-shell .rl-legacy #rollStats > .stat > div:last-child {
  font: 600 var(--rl-fs-xs)/1.3 var(--rl-font-ui) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--rl-ink-3) !important;
}
html.rl-shell .rl-legacy #rollStats > .stat[style*="#ffe4c4"] { background: var(--rl-warn-bg) !important; border-color: transparent; }
html.rl-shell .rl-legacy #rollStats > .stat[style*="#ffe4c4"] > div { color: var(--rl-warn) !important; }

/* Ledger statement under the rent roll */
html.rl-shell .rl-legacy #ledgerDetail > .card { margin-top: var(--rl-s-4); }

/* Inbox (texts.js) */
html.rl-shell .rl-legacy #txWrap { gap: var(--rl-s-4) !important; }
html.rl-shell .rl-legacy #txList { padding: 0 !important; }
html.rl-shell .rl-legacy #txList > .hint {
  padding: var(--rl-s-2) var(--rl-s-4) !important; border-bottom: 1px solid var(--rl-border) !important;
  background: var(--rl-surface-2) !important; color: var(--rl-ink-3) !important;
  font: 700 var(--rl-fs-xs)/1.3 var(--rl-font-ui) !important; letter-spacing: .04em; text-transform: uppercase;
}
html.rl-shell .rl-legacy #txList > .hint[style*="#fff6e5"] { background: var(--rl-warn-bg) !important; color: var(--rl-warn) !important; }
html.rl-shell .rl-legacy .tx-row { padding: var(--rl-s-3) var(--rl-s-4); border-bottom: 1px solid var(--rl-border); transition: background-color var(--rl-dur) var(--rl-ease); }
html.rl-shell .rl-legacy .tx-row:hover { background: var(--rl-hover); }
html.rl-shell .rl-legacy .tx-row.sel { background: var(--rl-selected); box-shadow: inset 3px 0 0 var(--rl-brand); }
html.rl-shell .rl-legacy .tx-row strong { font-weight: 600; color: var(--rl-ink); }
html.rl-shell .rl-legacy :is(#txMsgs, #txThread > div[style*="max-height"]) {
  background: var(--rl-bg) !important; border: 1px solid var(--rl-border); border-radius: var(--rl-r-md) !important; padding: var(--rl-s-3) !important;
}
html.rl-shell .rl-legacy .tx-b { border-radius: var(--rl-r-lg); font-size: var(--rl-fs-md); line-height: var(--rl-lh); }
html.rl-shell .rl-legacy .tx-in { background: var(--rl-surface); color: var(--rl-ink); border: 1px solid var(--rl-border); border-bottom-left-radius: 4px; }
html.rl-shell .rl-legacy .tx-out { background: var(--rl-brand-soft); color: var(--rl-brand-soft-ink); border-bottom-right-radius: 4px; }
html.rl-shell .rl-legacy .tx-out[style*="background:#e8f0fb"] { background: var(--rl-info-bg) !important; color: var(--rl-info) !important; border-color: transparent !important; }
html.rl-shell .rl-legacy .tx-meta { color: var(--rl-ink-3); font-size: var(--rl-fs-xs); }

/* Repair job items and photo strips */
html.rl-shell .rl-legacy #reItems > div { border-top-color: var(--rl-border) !important; }
html.rl-shell .rl-legacy :is(#inRooms, #reItems) img { border-radius: var(--rl-r-sm) !important; }

/* Setup: properties table sits inside its card */
html.rl-shell .rl-legacy #spPropList { margin: 0 calc(-1 * var(--rl-s-1)); }

/* ===== 9. Phones (<768px): stacked forms, 48px targets, no page scroll ====== */
@media (max-width: 767px) {
  html.rl-shell .rl-legacy .card { padding: var(--rl-s-3) var(--rl-s-4); }
  html.rl-shell .rl-legacy h3:not(.card h3) { margin-top: var(--rl-s-5); }

  html.rl-shell .rl-legacy :is(.ti, .select-input, select, textarea,
    input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="date"], [type="month"],
             [type="url"], [type="search"], [type="password"], [type="time"], :not([type]))) {
    min-height: 48px; font-size: 16px;
  }
  html.rl-shell .rl-legacy :is(.btn-sm, .btn-primary, button:not([class])) { min-height: 48px; white-space: normal; }
  html.rl-shell .rl-legacy :where(td, h3, h4, #inspList, #depList, #rrList, #docsList, #ticketsList, #bkRecurring, #leaseList) .btn-sm.btn-sm { min-height: 40px; }
  html.rl-shell .rl-legacy input:is([type="checkbox"], [type="radio"]) { width: 22px; height: 22px; }
  html.rl-shell .rl-legacy label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 40px; display: inline-flex; align-items: center; gap: var(--rl-s-2); }

  /* every field in a form row takes the full width; labels may shrink and wrap */
  html.rl-shell .rl-legacy .row > label { flex-shrink: 1; min-width: 0; max-width: 100%; }
  html.rl-shell .rl-legacy .row > :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .grow) {
    flex: 1 1 100% !important; width: auto !important; min-width: 0 !important;
  }
  html.rl-shell .rl-legacy .row > label:has(> :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) {
    flex: 1 1 100%; min-width: 0 !important; flex-wrap: wrap;
  }
  html.rl-shell .rl-legacy label[style*="flex-direction:column"] > :is(input, select, textarea) { width: 100% !important; min-width: 0 !important; }
  html.rl-shell .rl-legacy label:not([style*="flex-direction:column"]) > :is(input:not([type="checkbox"]):not([type="radio"]), select) { max-width: 100%; }
  html.rl-shell .rl-legacy .row > :is(.btn-sm, button) { flex: 1 1 auto; }
  html.rl-shell .rl-legacy #docFields { grid-template-columns: minmax(0, 1fr); }

  /* rent roll stats: two per row */
  html.rl-shell .rl-legacy #rollStats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rl-s-2) !important; }
  html.rl-shell .rl-legacy #rollStats > .stat > div:first-child { font-size: var(--rl-fs-xl) !important; }

  /* chips may wrap rather than push the row wide */
  html.rl-shell .rl-legacy .badge { white-space: normal; }

  /* tenant rows: a little tighter */
  html.rl-shell .rl-legacy details.t-card > summary { padding: var(--rl-s-3) !important; }

  /* editor action bars sit above the bottom navigation bar */
  html.rl-shell .rl-legacy .card[style*="sticky"] {
    bottom: calc(var(--rl-bottombar-h) + env(safe-area-inset-bottom)) !important;
    padding: var(--rl-s-2) var(--rl-s-3);
  }

  /* inbox list/thread */
  html.rl-shell .rl-legacy #txSearch { max-width: none !important; }
}