/* ATI Modern — 2026 refresh, layered over legacy style.css.
   Design tokens follow a system-inspired palette; dark mode via prefers-color-scheme.
   Kept vanilla CSS (no Tailwind build) so it drops in without any pipeline.
*/

:root {
  --bg:         #f7f8fa;
  --bg-elev:   #ffffff;
  --bg-sunk:   #eef1f5;
  --border:    #d6dbe2;
  --border-strong: #b8bec7;
  --text:      #14171f;
  --text-dim:  #4b5364;
  --text-mute: #7b8394;
  --brand:     #1c4ed8;
  --brand-2:   #3b82f6;
  --brand-tint: #eff5ff;
  --danger:    #b91c1c;
  --success:   #158a3c;
  --warn:      #a45c00;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow-1:  0 1px 2px rgba(20,23,31,.05), 0 1px 3px rgba(20,23,31,.06);
  --shadow-2:  0 2px 6px rgba(20,23,31,.06), 0 8px 24px rgba(20,23,31,.08);
  --sidebar-w: 220px;
  --topbar-h:  56px;
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #1b1f27;
    --bg-elev:    #262b35;
    --bg-sunk:    #141821;
    --border:     #3a414f;
    --border-strong: #565f70;
    --text:       #f1f3f7;
    --text-dim:   #c9cfda;
    --text-mute:  #8b93a3;
    --brand:      #7fa9ff;
    --brand-2:    #5c88e6;
    --brand-tint: #1e2b47;
    --shadow-1:   0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
    --shadow-2:   0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:         #1b1f27;
  --bg-elev:    #262b35;
  --bg-sunk:    #141821;
  --border:     #3a414f;
  --border-strong: #565f70;
  --text:       #f1f3f7;
  --text-dim:   #c9cfda;
  --text-mute:  #8b93a3;
  --brand:      #7fa9ff;
  --brand-2:    #5c88e6;
  --brand-tint: #1e2b47;
}
:root[data-theme="light"] {
  --bg:         #f7f8fa;
  --bg-elev:    #ffffff;
  --bg-sunk:    #eef1f5;
  --border:     #d6dbe2;
  --border-strong: #b8bec7;
  --text:       #14171f;
  --text-dim:   #4b5364;
  --text-mute:  #7b8394;
  --brand:      #1c4ed8;
  --brand-2:    #3b82f6;
  --brand-tint: #eff5ff;
}

/* ---- Dark Green (forest) ---- */
:root[data-theme="dark-green"] {
  --bg:         #10201a;
  --bg-elev:    #17342a;
  --bg-sunk:    #0a1712;
  --border:     #2e5544;
  --border-strong: #3d6e58;
  --text:       #eaf5ef;
  --text-dim:   #c2d6cd;
  --text-mute:  #7d9a90;
  --brand:      #4ade80;
  --brand-2:    #22c55e;
  --brand-tint: #0f3626;
  --shadow-1:   0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-2:   0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5);
}

/* ---- Dark Pink (rose / plum) ---- */
:root[data-theme="dark-pink"] {
  --bg:         #23111c;
  --bg-elev:    #35182a;
  --bg-sunk:    #180a12;
  --border:     #5b2a45;
  --border-strong: #7a3859;
  --text:       #f8ecf3;
  --text-dim:   #d9bfcd;
  --text-mute:  #a17e91;
  --brand:      #f472b6;
  --brand-2:    #ec4899;
  --brand-tint: #3f1a2d;
  --shadow-1:   0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-2:   0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5);
}

/* ---- Dark Navy (midnight) ---- */
:root[data-theme="dark-navy"] {
  --bg:         #0b1226;
  --bg-elev:    #131c39;
  --bg-sunk:    #06091a;
  --border:     #263257;
  --border-strong: #3a4a7a;
  --text:       #eef2ff;
  --text-dim:   #c6cfea;
  --text-mute:  #8390b6;
  --brand:      #93c5fd;
  --brand-2:    #60a5fa;
  --brand-tint: #1a2451;
  --shadow-1:   0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-2:   0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5);
}

/* ---- theme picker chip ---- */
.theme-picker { position: relative; display: inline-block; }
.theme-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elev); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.theme-picker-btn:hover { color: var(--text); border-color: var(--border-strong); }
.theme-picker-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--brand);
}
.theme-picker-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-2);
  padding: 6px; min-width: 180px; z-index: 20;
  display: none;
}
.theme-picker.open .theme-picker-menu { display: block; }
.theme-picker-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; padding: 6px 8px;
  border-radius: 6px; color: var(--text); font-size: 13px;
  cursor: pointer; text-align: left; font-family: inherit;
}
.theme-picker-menu button:hover { background: var(--bg-sunk); }
.theme-picker-menu button.active { background: var(--brand-tint); color: var(--brand); }
.theme-picker-menu .swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ---- reset legacy first ---- */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Kill legacy full-page tables so our shell owns layout */
body > table { display: none !important; }

/* ---- app shell ---- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows:    var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}
.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  z-index: 3;
  gap: 16px;
}
.app-topbar .brand {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-topbar .brand .brand-mark {
  width: 30px; height: 30px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .5px;
}
.app-topbar .brand small {
  font-weight: 500;
  color: var(--text-mute);
  font-size: 12px;
  margin-left: 8px;
}
.app-topbar .property-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.app-topbar .property-crumb a {
  color: var(--brand);
  text-decoration: none;
}
.app-topbar .property-crumb strong { color: var(--text); font-weight: 600; }
.app-topbar .topbar-tools { display: flex; align-items: center; gap: 8px; }

.topbar-logout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none !important;
  transition: color .12s, border-color .12s, background .12s;
  font-family: inherit;
}
.topbar-logout:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(185, 28, 28, .08);
}
.topbar-logout-icon { font-size: 14px; line-height: 1; transform: translateY(1px); }
@media (max-width: 720px) {
  .topbar-logout-label { display: none; }
  .topbar-logout { padding: 4px 8px; }
}
.app-topbar .theme-toggle {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
.app-topbar .theme-toggle:hover { border-color: var(--border-strong); color: var(--text); }

.app-sidebar {
  grid-area: sidebar;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
}
.app-sidebar .sidebar-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  padding: 8px 10px 10px;
  font-weight: 600;
}
.app-sidebar nav a,
.app-sidebar .left_tab_menu_tab a,
.left_tab_menu a {
  display: block;
  padding: 8px 12px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  transition: background .12s, color .12s;
}
.app-sidebar nav a:hover,
.left_tab_menu a:hover {
  background: var(--brand-tint);
  color: var(--brand);
}
.left_tab_menu_tab { list-style: none; padding: 0; margin: 0; }

.app-main {
  grid-area: main;
  padding: 24px 32px;
  overflow-x: auto;
}
.app-main > h1, .app-main > h2 {
  margin-top: 0;
}

/* Card container for main content */
.app-content {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-1);
}
.app-content h1,
.app-content h2,
.app-content h3 {
  margin-top: 0;
  color: var(--text);
}

/* ---- typography ---- */
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; }
h3 { font-size: 15px; font-weight: 600; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 12px; }
.message,
p.message {
  background: var(--brand-tint);
  color: var(--brand);
  border: 1px solid var(--brand-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 10px 0 16px;
  font-size: 13.5px;
}

/* ---- tables (data tables) ---- */
.app-main table:not(.form_table):not(.no-modern) {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 12px 0;
  font-size: 13px;
}
.app-main table:not(.form_table):not(.no-modern) th,
.app-main table:not(.form_table):not(.no-modern) td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.app-main table:not(.form_table):not(.no-modern) th {
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-strong);
}
.app-main table:not(.form_table):not(.no-modern) tr:last-child td { border-bottom: 0; }
.app-main table:not(.form_table):not(.no-modern) tr:hover td { background: var(--bg-sunk); }
.app-main table:not(.form_table):not(.no-modern) a { color: var(--brand); }
.report_action_link {
  color: var(--brand);
  font-weight: 500;
}

/* ---- form styling (Zend Form uses table-based decorators) ---- */
.form_table, .form_data, .form_label {
  font-family: var(--font);
}
.form_table {
  border-collapse: separate;
  border-spacing: 0 6px;
  width: 100%;
  margin: 12px 0;
}
.form_label {
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 14px 8px 0;
  font-size: 13px;
  vertical-align: top;
  white-space: nowrap;
}
.form_label strong { font-weight: 500; }
.required_asterisk { color: var(--danger); font-weight: 700; margin-left: 2px; }
.form_data {
  padding: 4px 0;
}
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=tel], input[type=url], input[type=date], textarea, select {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-height: 34px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  max-width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%237b8394' d='M6 8L2 4h8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
input[type=checkbox], input[type=radio] {
  width: 16px; height: 16px; vertical-align: middle;
  accent-color: var(--brand);
}
input[type=submit], button, .btn {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  cursor: pointer;
  transition: background .12s, transform .06s;
  min-height: 36px;
}
input[type=submit]:hover, button:hover, .btn:hover {
  background: var(--brand-2);
}
input[type=submit]:active, button:active, .btn:active { transform: translateY(1px); }
input[type=submit]:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-sunk); }

/* nested Zend form tables (sub-forms) — keep them tighter */
.form_table .form_table { margin: 0; }

/* ---- property edit page — wrap each section as a card ---- */
.property_edit_form_table {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 16px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.property_edit_form_table .standardmedblue {
  background: var(--bg-sunk);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand);
  height: auto !important;
}
.property_edit_form_table .form_label,
.property_edit_form_table .form_data {
  padding: 6px 12px 6px 0;
}
.property_edit_form_table td:not(.standardmedblue) {
  vertical-align: top;
}

/* ---- user cards on property edit page (Manager + Normal users) ----
   Rendered by users_form_section.phtml as div-based cards, one per user.
   Row 1: username / access code / email. Row 2: privilege checkboxes +
   Remove. Theme-aware so contrast is readable in both light and dark. */
.user-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 14px;
}
.user-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
}
.user-card-row.user-card-creds {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 10px 14px;
}
@media (max-width: 720px) {
  .user-card-row.user-card-creds { grid-template-columns: 1fr; }
}
.user-card-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-card-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.user-card-field input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.user-card-row.user-card-privs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.user-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-sunk);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.user-card-chip:hover { background: var(--bg-elev); }
.user-card-chip input[type=checkbox] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--brand);
}
/* Chip when its checkbox is checked — highlight it so admins can see
   granted privileges at a glance */
.user-card-chip:has(input[type=checkbox]:checked) {
  background: rgba(59, 130, 246, .12);
  color: var(--brand);
  border-color: rgba(59, 130, 246, .3);
}
.user-card-chip-delete:has(input[type=checkbox]:checked) {
  background: rgba(220, 38, 38, .12);
  color: var(--danger);
  border-color: rgba(220, 38, 38, .3);
}

/* Fees grid inside the property edit — align 2-column pairs neatly */
.report_fees_table {
  border-spacing: 6px 4px;
  margin: 4px 0;
}
.report_fees_table td {
  padding: 4px 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.report_fees_table td:nth-child(even) input {
  width: 80px;
  text-align: right;
}

/* submit button spacing */
.property_edit_form input[type=submit] {
  margin-top: 8px;
}

/* ---- system messages / errors ---- */
.error, .errors, .errors li, .error_message {
  color: var(--danger);
  background: rgba(185, 28, 28, .08);
  border: 1px solid rgba(185, 28, 28, .3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 13px;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main";
  }
  .app-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px;
    overflow-x: auto;
  }
  .app-sidebar .sidebar-header { display: none; }
  .left_tab_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .left_tab_menu_tab a, .left_tab_menu a {
    padding: 6px 10px;
    font-size: 12.5px;
  }
  .app-main { padding: 16px; }
  .app-content { padding: 14px; }
}

/* ---- hide legacy image spacers ---- */
img[src*="siteborder"], img[src*="cleardot"], img[src*="virtline"],
img[src*="bluebar"], img[src*="footer.jpg"], img[src*="ati.jpg"],
img[src*="nav_tab_base"], img[src*="tab.png"], img[src*="tab-active"],
img[src*="tab-over"] {
  display: none;
}

/* ---- override legacy sidebar tab-image styling ---- */
.left_tab_menu_tab {
  background-image: none !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.left_tab_menu_tab a {
  background: transparent !important;
  color: var(--text-dim) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
  border-radius: 8px !important;
  display: block !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  transition: background .12s, color .12s;
}
.left_tab_menu_tab a:hover,
.left_tab_menu_tab:hover a {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  text-decoration: none !important;
}

/* ---- main menu (generic/index.phtml) card grid ---- */
.app-main > .main_menu_section_header,
.app-content .main_menu_section_header {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.main_menu_section_title {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.main_menu_link {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.main_menu_link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin: 4px 0;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.main_menu_link a::after {
  content: "→";
  color: var(--text-mute);
  font-weight: 600;
  margin-left: 12px;
}
.main_menu_link a:hover {
  background: var(--brand-tint);
  border-color: var(--brand-2);
  color: var(--brand) !important;
  text-decoration: none;
}
.main_menu_link a:hover::after { color: var(--brand); }

/* Nicer topbar theme button icon */
.app-topbar .theme-toggle {
  min-width: 34px;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ---- breadcrumb strip ---- */
.app-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 12px;
  font-size: 13px;
  color: var(--text-mute);
  flex-wrap: wrap;
}
.app-crumbs .crumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  transition: border-color .12s, color .12s, background .12s;
}
.app-crumbs .crumb-back:hover {
  color: var(--brand);
  border-color: var(--brand-2);
  background: var(--brand-tint);
  text-decoration: none;
}
.app-crumbs .crumb-home {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.app-crumbs .crumb-home:hover { text-decoration: underline; }
.app-crumbs .crumb-sep { color: var(--border-strong); }
.app-crumbs .crumb-section { color: var(--text-dim); font-weight: 500; }
.app-crumbs .crumb-current { color: var(--text); font-weight: 600; }

/* Sidebar "Main Menu" persistent home link */
.app-sidebar .sidebar-home {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  margin: 0 0 6px;
  transition: background .12s, border-color .12s;
}
.app-sidebar .sidebar-home:hover {
  background: var(--brand);
  color: #fff;
  text-decoration: none;
}
.app-sidebar .sidebar-home span {
  font-size: 15px;
  line-height: 1;
}

/* ---- picker (property picker, other single-column selection lists) ---- */
.picker-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.picker-search {
  flex: 1;
  min-height: 38px;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev)
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%237b8394' stroke-width='2' stroke-linecap='round' d='M7 2a5 5 0 100 10 5 5 0 000-10zM14 14l-3.5-3.5'/></svg>")
              no-repeat 12px center;
  font-size: 14px;
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.picker-search:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
  outline: none;
}
.picker-count {
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
}
.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev);
}
.picker-item {
  border-bottom: 1px solid var(--border);
}
.picker-item:last-child { border-bottom: 0; }
.picker-item a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  transition: background .1s;
}
.picker-item a:hover {
  background: var(--brand-tint);
  color: var(--brand);
  text-decoration: none;
}
.empty-state {
  padding: 32px;
  text-align: center;
  color: var(--text-mute);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}

/* Kill any legacy pick_current_property_table white highlight */
.pick_current_property_table,
.pick_current_property_table td,
.pick_current_property_table th {
  background: transparent !important;
  border: 0 !important;
  color: var(--text);
}

/* ================================================================
   ELEGANT FORMS — override for both native inputs and Zend
   table-decorated forms. Force consistent look regardless of state
   and legacy CSS.
================================================================ */

/* Reset all input backgrounds/colors so legacy style.css can't repaint them
   on focus / active / disabled. */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]),
textarea,
select {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color .12s, box-shadow .12s, background .12s !important;
  box-shadow: none !important;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):hover,
textarea:hover,
select:hover {
  border-color: var(--border-strong) !important;
  background: var(--bg-elev) !important;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):focus,
textarea:focus,
select:focus {
  border-color: var(--brand-2) !important;
  background: var(--bg-elev) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18) !important;
}
input:disabled, textarea:disabled, select:disabled,
input[readonly], textarea[readonly] {
  background: var(--bg-sunk) !important;
  color: var(--text-dim) !important;
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--text-mute) !important; opacity: 1; }

/* Zend form table decorators — turn the invisible table into a clean grid */
.form_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  margin: 0;
  background: transparent !important;
}
.form_table tr { background: transparent !important; }
.form_table td, .form_table th {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
  vertical-align: middle !important;
}
.form_table > tbody > tr > td.form_label,
.form_table > tr > td.form_label,
td.form_label, th.form_label {
  padding-right: 16px !important;
  padding-top: 10px !important;
  width: 180px;
  min-width: 140px;
  max-width: 240px;
  white-space: normal !important;
  vertical-align: top !important;
  color: var(--text-dim) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
.form_table td.form_label strong { font-weight: 500 !important; }
.form_table td.form_data {
  padding: 5px 0 5px 0 !important;
}
.form_table td.form_data > * { max-width: 100%; }

/* Nested subform tables tighten up */
.form_table .form_table { margin: 6px 0; }
.form_table .form_table td { padding: 3px 0 !important; }

/* Legacy .form_data / .form_label had hard-coded light backgrounds (F8F8F8,
   EAEAEA) from style.css that leaked through on dark themes as white-on-white.
   Force them to inherit theme tokens regardless of which table they sit in. */
form .form_label, form td.form_label,
form .form_data, form td.form_data {
  background: transparent !important;
  color: var(--text) !important;
}
form .form_label strong { color: var(--text-dim) !important; }
/* Any unclassed subform <table> (Zend's default nested subform decorator emits
   a bare <table> with no class) should also stay transparent. */
form table:not(.applicants_table):not(.report_fees_table) {
  background: transparent !important;
}
form table:not(.applicants_table):not(.report_fees_table) > tbody > tr,
form table:not(.applicants_table):not(.report_fees_table) > tr {
  background: transparent !important;
}
form table:not(.applicants_table):not(.report_fees_table) > tbody > tr > td,
form table:not(.applicants_table):not(.report_fees_table) > tr > td {
  background: transparent !important;
  border: 0 !important;
}

/* Section headings within a form (bold rows) */
.form_table th[colspan] {
  padding: 18px 0 8px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Buttons: consistent, elegant */
input[type=submit], button, .btn, input[type=button] {
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  min-height: 38px !important;
  transition: background .12s, transform .06s !important;
  box-shadow: 0 1px 2px rgba(28, 78, 216, .18);
}
input[type=submit]:hover, button:hover, .btn:hover, input[type=button]:hover {
  background: var(--brand-2) !important;
  color: #fff !important;
}
input[type=submit]:active, button:active { transform: translateY(1px); }
input[type=submit]:disabled, button:disabled { opacity: .45; cursor: not-allowed !important; }

.btn-secondary, input[type=submit].btn-secondary {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}
.btn-secondary:hover { background: var(--bg-sunk) !important; color: var(--text) !important; }

/* Checkboxes / radios: modern accent, no browser default gray box */
input[type=checkbox], input[type=radio] {
  width: 16px !important; height: 16px !important;
  accent-color: var(--brand) !important;
  vertical-align: middle;
  margin: 0 6px 0 0;
}

/* Legacy alignment classes we don't want */
.form_data.small, .form_label.small { font-size: 12.5px !important; }

/* Data tables everywhere (list.phtml pages use raw tables) */
table {
  background: transparent;
}
.report_table, table.report_table, .paging_table, table.paging_table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
}
.report_table th, .report_table td,
.paging_table th, .paging_table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 13px !important;
}
.report_table th, .paging_table th {
  background: var(--bg-sunk) !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}
.report_table tr:last-child td { border-bottom: 0 !important; }
.report_table tr:hover td { background: var(--bg-sunk) !important; }

/* Legacy "small" and "standard" class variations — normalize */
.small, td.small, span.small { font-size: 12.5px !important; }
.standard, td.standard, span.standard { font-family: var(--font) !important; color: var(--text) !important; }

/* Kill any lingering white/dark inline backgrounds that leaked from legacy */
td[bgcolor], tr[bgcolor], table[bgcolor] { background: transparent !important; }

/* ================================================================
   FORM LABEL COLOR FIX — legacy style.css uses hardcoded dark colors
   on `<strong>` and small `<span>` inside labels. Force inheritance
   so labels are actually legible in dark mode.
================================================================ */
.form_label, .form_label *,
td.form_label, td.form_label *,
th.form_label, th.form_label * {
  color: var(--text-dim) !important;
  background: transparent !important;
}
.form_label strong,
td.form_label strong,
.form_label b { font-weight: 600 !important; color: var(--text) !important; }

/* Inline labels ("Landlord Name:", "Landlord Phone:", "Street #:", etc.) */
td.small strong, td.small b, td.form_data strong, td.form_data b,
.small strong, .small b {
  color: var(--text) !important;
  background: transparent !important;
}
td.small, td.form_data span, td.form_data label {
  color: var(--text-dim) !important;
  background: transparent !important;
}
.required_asterisk { color: var(--danger) !important; background: transparent !important; }

/* Any legacy inline color/background attributes on cells */
td[color], span[color], font[color] { color: inherit !important; }
[bgcolor] { background-color: transparent !important; }

/* Bump input border weight so they're clearly visible in dark mode */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]),
textarea,
select {
  border-width: 1px !important;
  border-color: var(--border-strong) !important;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):hover,
textarea:hover, select:hover {
  border-color: var(--brand-2) !important;
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):focus,
textarea:focus, select:focus {
  border-color: var(--brand) !important;
}

/* Nested subform panels — visually group Current Address, Employment, etc. */
.form_table .form_table {
  background: var(--bg-sunk) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 6px 0 !important;
}
.form_table .form_table td.form_label {
  color: var(--text-dim) !important;
}

/* ================================================================
   FORM LAYOUT — stack labels ABOVE inputs (modern pattern).
   The legacy Zend table decorator renders label + input as TR/TD pairs;
   we flatten to block flow with CSS so nothing changes at the PHP level.
================================================================ */
.form_table, .form_table > tbody, .form_table > thead {
  display: block !important;
  width: 100%;
  max-width: 640px;
}
.form_table > tbody > tr,
.form_table > tr {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.form_table > tbody > tr > td,
.form_table > tr > td {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.form_table td.form_label {
  padding: 0 0 4px !important;
  color: var(--text-dim) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  width: auto !important;
  max-width: 100% !important;
}
.form_table td.form_label strong { font-weight: 600 !important; color: var(--text-dim) !important; }
.form_table td.form_data {
  padding: 0 !important;
}
.form_table td.form_data input:not([type=checkbox]):not([type=radio]),
.form_table td.form_data select,
.form_table td.form_data textarea {
  width: 100% !important;
  max-width: 420px !important;
}

/* Grouped nested subforms (Address, Employment) — arrange fields
   inside as a wrap grid instead of vertical stack. */
.form_table .form_table {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 14px !important;
  background: var(--bg-sunk) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 4px 0 !important;
  max-width: none !important;
}
.form_table .form_table > tbody,
.form_table .form_table > tr,
.form_table .form_table > tbody > tr { display: contents !important; }
.form_table .form_table td.form_label {
  grid-column: auto !important;
}
.form_table .form_table td.form_data input,
.form_table .form_table td.form_data select,
.form_table .form_table td.form_data textarea { max-width: 100% !important; }

/* Section titles (colspan=2 <th> rows in Zend form) */
.form_table th[colspan] {
  display: block !important;
  padding: 20px 0 10px !important;
  margin: 4px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* Submit row — line up nicely at bottom */
.form_table tr:has(input[type=submit]) {
  padding-top: 8px !important;
}

/* Search / filter forms (the ones on list pages) — inline row layout
   is fine there. If the form has class .search_form or similar, override. */
.search_form .form_table {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  align-items: end;
  max-width: none !important;
}
.search_form .form_table > tbody { display: contents !important; }
.search_form .form_table tr { display: flex !important; flex-direction: column; margin: 0 !important; }
.search_form .form_table td { display: block !important; }

/* ---- external-tool landing cards ---- */
.ext-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s, background .12s, transform .06s;
}
.ext-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ext-card span {
  color: var(--text-mute);
  font-size: 12.5px;
}
.ext-card:hover {
  border-color: var(--brand-2);
  background: var(--brand-tint);
  text-decoration: none;
  transform: translateY(-1px);
}
.ext-card:hover strong { color: var(--brand); }
.ext-card::after {
  content: "↗";
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--text-mute);
  opacity: 0;
  transition: opacity .12s;
}
.ext-card { position: relative; }
.ext-card:hover::after { opacity: 1; color: var(--brand); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.2); }
}

/* ================================================================
   VIEW REPORT — modernized applicant summary + tabs
================================================================ */
.vr-shell { display: block; }
.vr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vr-header-main { min-width: 0; }
.vr-name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.vr-address {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 13.5px;
}
.vr-address .vr-label {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
}
.vr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vr-actions .btn {
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  min-height: 34px !important;
}
.btn-danger, input[type=submit].btn-danger {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  box-shadow: none !important;
}
.btn-danger:hover { background: var(--danger) !important; color: #fff !important; }

.vr-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.vr-fact-group {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}
.vr-fact-role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.vr-fact-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.vr-fact-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.vr-pill-key {
  background: var(--brand-tint);
  color: var(--brand);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vr-pill-missing {
  color: var(--text-mute);
  background: transparent;
}
.vr-pill-missing .vr-pill-key {
  background: transparent;
  color: var(--text-mute);
  border: 1px dashed var(--border-strong);
}

.vr-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 4px 10px;         /* extra bottom pad so the thicker scrollbar doesn't kiss the tabs */
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  /* Chunkier scrollbar so it's easy to grab with a mouse. */
  scrollbar-width: auto;
  scrollbar-color: var(--brand-2) var(--bg-sunk);
}
/* WebKit / Chromium / Edge — force a taller, higher-contrast scrollbar. */
.vr-tabs::-webkit-scrollbar {
  height: 14px;
}
.vr-tabs::-webkit-scrollbar-track {
  background: var(--bg-sunk);
  border-radius: 8px;
  margin: 0 8px;
}
.vr-tabs::-webkit-scrollbar-thumb {
  background: var(--brand-2);
  border: 3px solid var(--bg-sunk);   /* inset so the thumb reads as a chunky pill */
  border-radius: 8px;
  min-width: 60px;                    /* always big enough to grab */
}
.vr-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}
.vr-tabs::-webkit-scrollbar-button {
  display: none;                      /* hide default arrows to give the thumb more room */
}
.vr-tab {
  padding: 8px 14px;
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.vr-tab:hover { background: var(--bg-elev); color: var(--text); }
.vr-tab-active {
  background: var(--bg-elev);
  color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

.vr-tab-panel {
  padding-top: 4px;
}

/* Kill legacy view-report styles from style.css */
.view_report_applicant_summary_header,
.view_report_applicant_summary_info,
.view_report_header_links,
.tab_set, .tab_row, .tab { display: initial; }
.view_report_applicant_summary_header { display: none !important; }

/* ================================================================
   VIEW REPORT — Rental Verification (and pattern for other tabs)
================================================================ */
.rv-hint {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-sunk);
  border: 1px dashed var(--border-strong);
  color: var(--text-mute);
  font-size: 13px;
  margin: 10px 0 16px;
}
.rv-section { margin: 12px 0 24px; }
.rv-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rv-section-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 700;
}
.rv-add-btn { padding: 6px 12px !important; font-size: 12.5px !important; min-height: 30px !important; }

.rv-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.rv-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rv-card-address {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.rv-card-address-2 { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.rv-card-status { display: flex; align-items: center; gap: 10px; }
.rv-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rv-verified-yes { background: rgba(21,138,60,.12); color: var(--success); }
.rv-verified-no  { background: rgba(164,92,0,.12); color: var(--warn); }
.rv-edit-btn { padding: 6px 12px !important; font-size: 12.5px !important; min-height: 30px !important; }

.rv-landlord {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg-sunk);
  border-radius: 8px;
  flex-wrap: wrap;
}
.rv-landlord-name { font-size: 13.5px; color: var(--text); font-weight: 600; }
.rv-landlord-label {
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 10.5px;
  font-weight: 700;
  margin-right: 8px;
}
.rv-landlord-contact { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; }
.rv-mini-key {
  color: var(--text-mute);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-right: 6px;
}

.rv-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px 16px;
  margin: 0 0 12px;
}
.rv-fact-wide { grid-column: 1 / -1; }
.rv-fact { min-width: 0; }
.rv-fact dt {
  color: var(--text-mute);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: 2px;
}
.rv-fact dd { margin: 0; color: var(--text); font-size: 13.5px; word-break: break-word; }

.rv-card-foot {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  flex-wrap: wrap;
}
.rv-not-verified-hint {
  color: var(--warn);
  font-size: 12.5px;
  padding: 10px 12px;
  background: rgba(164,92,0,.08);
  border: 1px dashed rgba(164,92,0,.35);
  border-radius: 8px;
}

/* ---- Credit-report download buttons on the credit tab ---- */
.cr-downloads {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 18px;
}
.cr-dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text) !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  transition: transform .1s, border-color .1s, background .1s;
}
.cr-dl-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  background: var(--brand-tint);
}
.cr-dl-primary {
  background: var(--brand);
  color: #fff !important;
  border-color: var(--brand);
}
.cr-dl-primary:hover { background: var(--brand-2); color: #fff !important; border-color: var(--brand-2); }
.cr-dl-ghost { color: var(--text-dim) !important; font-weight: 500; }
.cr-dl-icon { font-size: 15px; line-height: 1; }

/* ---- "Ready to run credit report" card on credit tab ---- */
.cr-ready {
  margin: 14px 0;
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 4px solid var(--success);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.cr-ready-heading {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cr-ready-copy {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0 0 14px;
  line-height: 1.55;
}
.cr-ready-form { margin: 0; }
.cr-ready-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg-sunk);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cr-ready-row:hover { border-color: var(--brand); }
.cr-ready-row input[type=checkbox] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--brand); }
.cr-ready-row span { font-size: 13.5px; color: var(--text); }
.cr-ready-row strong { color: var(--text); font-weight: 600; }
.cr-ready-warn { color: var(--warn) !important; }
.cr-ready-actions {
  display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}

/* ---- "SSN required to run credit report" card on credit tab ---- */
.cr-need-ssn {
  margin: 14px 0;
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.cr-need-ssn-heading {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cr-need-ssn-copy {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0 0 16px;
  line-height: 1.55;
}
.cr-need-ssn-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin: 0 0 12px;
}
.cr-need-ssn-form label {
  display: flex; flex-direction: column;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
  gap: 4px;
}
.cr-need-ssn-form input {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 14.5px !important;
  min-width: 220px;
}
.cr-need-ssn-form .btn {
  min-height: 38px !important;
  padding: 8px 20px !important;
}
.cr-need-ssn-hint {
  color: var(--text-mute);
  font-size: 12px;
  margin: 0;
}

/* ---- Inline "Edit applicant info" card on view-report ---- */
.vr-edit-toggle {
  margin-left: 8px;
  padding: 2px 8px !important;
  min-height: 22px !important;
  font-size: 11px !important;
  background: transparent !important;
  color: var(--brand) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
}
.vr-edit-toggle:hover {
  background: var(--brand-tint) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.vr-edit-form {
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-sunk);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.vr-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 12px;
}
.vr-edit-grid label {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mute);
  gap: 4px;
}
.vr-edit-grid input, .vr-edit-grid select {
  min-height: 32px !important;
  padding: 6px 10px !important;
}
.vr-edit-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vr-edit-actions .btn { min-height: 34px !important; padding: 6px 16px !important; }
.vr-edit-fulllink {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-mute);
  text-decoration: none;
}
.vr-edit-fulllink:hover { color: var(--brand); text-decoration: underline; }

/* small danger button used in list rows */
.btn-danger-sm {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  color: var(--danger) !important;
  border: 1px solid var(--danger);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
}
.btn-danger-sm:hover { background: var(--danger); color: #fff !important; }

/* ---- Invoice-list period-summary + email-log cards ---- */
.rvi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0 14px;
}
.rvi-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.rvi-card-primary {
  background: linear-gradient(135deg, var(--brand-tint), var(--bg-elev));
  border-color: var(--brand-2);
}
.rvi-card-label {
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rvi-card-value {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.rvi-card-primary .rvi-card-value { color: var(--brand); font-size: 26px; }
.rvi-card-sub {
  color: var(--text-dim);
  font-size: 11.5px;
  margin-top: 6px;
}
.rvi-mono { font-variant-numeric: tabular-nums; }
.rvi-card-searches .rvi-search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* minmax(0,1fr) prevents overflow */
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
}
.rvi-search-grid > div {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 2px;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.rvi-search-n {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.rvi-search-k {
  font-size: 10px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .03em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.rvi-period-line {
  color: var(--text-dim);
  font-size: 12.5px;
  margin: 10px 0 -4px;
}
.rvi-period-line strong { color: var(--text); }

/* Emails-sent expandable card */
.rvi-emails {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 0 20px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.rvi-emails-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: left;
  min-height: auto !important;
  box-shadow: none !important;
}
.rvi-emails-toggle:hover { background: var(--bg-sunk) !important; }
.rvi-caret {
  display: inline-block;
  font-size: 14px;
  color: var(--text-mute);
  transition: transform .15s;
  min-width: 12px;
}
.rvi-emails-heading { flex: 1; }
.rvi-emails-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rvi-emails-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease-out;
}
.rvi-emails.open .rvi-emails-body { max-height: 2400px; }
.rvi-emails-table-wrap { overflow-x: auto; padding: 0 0 8px; }
.rvi-emails-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  border-top: 1px solid var(--border);
}
.rvi-emails-table th, .rvi-emails-table td {
  padding: 10px 12px;
  font-size: 12.5px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.rvi-emails-table th {
  background: var(--bg-sunk);
  color: var(--text-dim);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.rvi-emails-table .num { text-align: right; }
.rvi-mini { color: var(--text-mute); font-size: 10.5px; }

/* Status/count chips reused inside cards */
.rvi-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.rvi-chip-sent    { background: rgba(21,138,60,.14);  color: var(--success); border-color: rgba(21,138,60,.3); }
.rvi-chip-opened  { background: rgba(28,78,216,.14);  color: var(--brand);   border-color: rgba(28,78,216,.3); }
.rvi-chip-test    { background: rgba(164,92,0,.14);   color: var(--warn);    border-color: rgba(164,92,0,.3); }
.rvi-chip-fail    { background: rgba(185,28,28,.14);  color: var(--danger);  border-color: rgba(185,28,28,.3); }
.rvi-chip-bounce  { background: rgba(185,28,28,.14);  color: var(--danger);  border-color: rgba(185,28,28,.3); }
.rvi-chip-none    { background: var(--bg-sunk);        color: var(--text-mute); border-color: var(--border); }

/* ---- Pull button + status chips (applicant list) ---- */
.pull-btn {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid var(--brand);
  line-height: 1.4;
  cursor: pointer;
}
.pull-btn:hover { background: var(--brand-2); border-color: var(--brand-2); }
.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}
.status-chip.status-ok      { background: rgba(21,138,60,.14);  color: var(--success); border: 1px solid rgba(21,138,60,.3); }
.status-chip.status-pending { background: rgba(164,92,0,.14);   color: var(--warn);    border: 1px solid rgba(164,92,0,.3); }
.status-chip.status-muted   { background: var(--bg-sunk);        color: var(--text-mute); border: 1px solid var(--border); }