*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:    #2E7D32;
  --brand-dk: #1B5E20;
  --success:  #16a34a;
  --warn:     #d97706;
  --danger:   #dc2626;
  --bg:       #F5F5F5;
  --surface:  #ffffff;
  --border:   #e2e8f0;
  --text:     #1e293b;
  --muted:    #64748b;
  --radius:   10px;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

a { color: var(--brand); text-decoration: none; }

/* ── Layout ── */
.page-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card        { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 100%; max-width: 440px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-wide   { max-width: 820px; }
.card-full   { max-width: 100%; }

header.top-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.top-bar .logo {
  font-size: 15px; font-weight: 700; color: var(--brand);
  display: flex; align-items: center; gap: 8px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top-bar .phase-badge { font-size: 12px; background: #e8f5e9; color: var(--brand); padding: 3px 10px; border-radius: 20px; font-weight: 600; }

/* ── Notification bell ── */
.notif-wrap { position: relative; margin-left: auto; margin-right: 10px; }
/* Anchors position:absolute to the trigger button (#notif-bell-btn) directly, preventing layout shifts from unpositioned parent wrappers. */
#notif-bell-btn { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-height: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; z-index: 20; display: flex; flex-direction: column; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.btn-link { background: none; border: none; color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-list { overflow-y: auto; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f5f5f5; }
.notif-item.notif-unread { background: #e8f5e9; }
.notif-title { font-size: 13px; font-weight: 700; }
.notif-body { font-size: 12px; color: var(--muted); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 4px; }

.main-content { max-width: 900px; margin: 0 auto; padding: 32px 24px; }

/* ── Bottom nav (rep app) ── */
.bottom-nav { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); display: flex; z-index: 10; }
.bottom-nav a { flex: 1; text-align: center; padding: 10px 4px 8px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bottom-nav a.active { color: var(--brand); font-weight: 700; }

/* ── Typography ── */
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; display: block; }

/* ── Inputs ── */
.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46,125,50,.12); }
.form-group { margin-bottom: 16px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { font-size: 12px; color: var(--danger); margin-top: 4px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: opacity .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--brand);   color: #fff; }
.btn-primary:hover   { background: var(--brand-dk); }
.btn-success   { background: var(--success); color: #fff; }
.btn-danger    { background: var(--danger);  color: #fff; }
.btn-outline   { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm        { padding: 6px 14px; font-size: 13px; }
.btn-icon      { padding: 7px; border-radius: 6px; justify-content: center; }
.btn-block     { width: 100%; justify-content: center; }

/* ── Status badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-awaiting_applicant { background: #fef9c3; color: #a16207; }
.badge-submitted          { background: #dbeafe; color: #1d4ed8; }
.badge-approved           { background: #dcfce7; color: #15803d; }
.badge-executed           { background: #dcfce7; color: #15803d; }
.badge-rejected           { background: #fee2e2; color: #b91c1c; }
.badge-disputed           { background: #fee2e2; color: #b91c1c; }
.badge-cancelled          { background: #f1f5f9; color: #64748b; }

/* ── Stat cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-value { font-size: 32px; font-weight: 800; line-height: 1; }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat-card.vacant   { border-color: #fed7aa; }
.stat-card.occupied { border-color: #bfdbfe; }
.stat-card.paid     { border-color: #bbf7d0; }
.stat-card.unpaid   { border-color: #fecaca; }

/* ── Table / List ── */
.table-wrap  { overflow-x: auto; }
table        { width: 100%; border-collapse: collapse; font-size: 13px; }
th           { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 2px solid var(--border); background: #f5f5f5; }
td           { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td  { background: #f5f5f5; }

/* ── Household list item ── */
.hh-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.hh-item:last-child { border-bottom: none; }
.hh-number { font-weight: 700; font-size: 15px; }
.hh-meta   { flex: 1; }
.hh-meta .street { font-size: 13px; color: var(--muted); }
.hh-right  { text-align: right; font-size: 13px; color: var(--muted); }

/* ── Occupant repeater ── */
.occupant-row { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.btn-remove   { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 18px; padding: 0 4px; }

/* ── Alert ── */
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.alert-warn    { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.alert-danger  { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }

/* ── Spinner ── */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
#toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast { padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); animation: toast-in .2s ease; }
.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-info    { background: var(--brand); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Section Header ──
Wraps section headers in a block display container with a nested flex row to enforce full-width expansion across layout contexts. */
.section-hdr { width: 100%; margin-bottom: 16px; }
.section-hdr-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* ── Photo preview ── */
.photo-preview { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state p { font-size: 14px; margin-top: 8px; }

.hidden { display: none !important; }
.mt-4 { margin-top: 16px; }
.mt-2 { margin-top: 8px; }
.mb-4 { margin-bottom: 16px; }
.gap-2 { gap: 8px; }
.flex { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--muted); }
.w-full { width: 100%; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .main-content { padding: 16px; }
  .input, select.input, textarea.input { font-size: 16px; }
  .occupant-row { grid-template-columns: 1fr 1fr 28px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Native App Shell
   header.top-bar and .bottom-nav are position:fixed, pinned to the viewport
   edges unconditionally - not sticky (which only locks a last-child element
   like .bottom-nav into place once you've scrolled all the way to the end
   of the content, leaving it hidden while scrolling through anything
   longer than one screen) and not the old fixed-height flex-column +
   overflow:hidden shell (which relied on 100dvh/--app-height exactly
   matching the true visible viewport - across three separate fix attempts
   it never reliably did, on Android Chrome and iOS Safari alike, and any
   mismatch meant .bottom-nav rendered below the visible area with no way
   to scroll to it). position:fixed needs no viewport-height measurement at
   all; body/html scroll normally, and .main-content reserves padding at
   top/bottom so real content never renders underneath the fixed bars.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-height: 60px;
  --nav-height: 58px;
}

* { -webkit-tap-highlight-color: transparent; }

/* Suppresses double-tap-to-zoom (and the ~300ms tap delay) on interactive elements, without
   touching deliberate pinch-zoom - the narrower middle ground between blocking zoom outright
   (an accessibility regression, since this app has no other text-scaling mechanism) and
   leaving double-tap free to misfire during quick repeated taps on buttons/cards. */
button, a, input, select, textarea, .hh-item, .list-item-card {
  touch-action: manipulation;
}

/* Chrome (nav, buttons, cards, headings) shouldn't highlight/select like page text on a
   tap-and-hold; form inputs still need normal text selection for editing. */
header.top-bar, .bottom-nav, .btn, .stat-card, .hh-item, .list-item-card,
.action-tile, .sheet-handle, h1, h2, .section-hdr, .tab-item {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }

/* Centering header.top-bar itself via max-width+margin:auto (as a flex item of body) didn't
   reliably clamp its rendered width in practice - it kept spanning full viewport width on
   desktop despite the rule being present and deployed. Switched to the same technique
   .main-content already uses successfully: the outer element stays a plain full-width,
   fixed-position box, and a normal inner wrapper carries the max-width + margin:auto
   centering, exactly the way .main-content itself centers. */
header.top-bar {
  position: fixed;
  top: 0;
  z-index: 10;
  height: auto;
  width: 100%;
  padding: 0;
  display: block;
}
.top-bar-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  min-height: var(--header-height);
  padding: 0 24px;
  padding-top: max(0px, var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-content, .page-center {
  width: 100%;
  box-sizing: border-box;
}
/* Centers content and clears fixed navigation bars using computed arithmetic padding rather than unreliable auto-margins. */
.main-content {
  max-width: none;
  margin: 0;
  padding: 32px max(24px, calc((100% - 900px) / 2));
  padding-top: calc(var(--header-height) + var(--safe-top) + 24px);
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px);
}
@media (max-width: 600px) {
  /* Restores narrow-screen padding rules to ensure media query overrides take precedence over unconditional source order rules. */
  .main-content {
    padding: 16px;
    padding-top: calc(var(--header-height) + var(--safe-top) + 16px);
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
  }
}
/* ── Bottom tab bar - icon + label, capped at 4-5 primary destinations.
   Move-in/Move-out/New unit moved to the FAB's Quick Actions sheet. ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: block;
}
.bottom-nav-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  padding: 6px 0 max(6px, var(--safe-bottom));
  min-height: var(--nav-height);
}
.bottom-nav a {
  min-height: 48px;
  justify-content: center;
  font-size: 10.5px;
  gap: 3px;
  transition: transform .1s ease;
}
.bottom-nav a i { font-size: 19px; }
.bottom-nav a:active { transform: scale(0.94); }

/* Forms reached via the FAB sheet (and apply.html, the standalone applicant form) drop the
   tab bar - their submit button sits in a fixed footer instead, pinned the same way
   .bottom-nav is and for the same reason (see the Native App Shell note above). */
.app-footer-actions {
  position: fixed;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 16px max(12px, var(--safe-bottom));
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Touch targets (44-48px minimum) & tap feedback ── */
.btn      { min-height: 44px; }
.btn-sm   { min-height: 44px; }
.btn-icon { min-height: 44px; min-width: 44px; }
.hh-item, .list-item-card { min-height: 56px; }
.hh-item:active, .list-item-card:active, .action-tile:active { transform: scale(0.98); background: #f5f5f5; }
.input[readonly] { background: #f1f5f9; color: var(--muted); cursor: not-allowed; }

/* ── List item card - replaces <table> rows for mobile (dashboard defaulters/collections) ── */
.list-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  transition: transform .1s ease, background .1s ease;
}
.list-item-card:last-child { border-bottom: none; }
.list-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.list-icon.danger { background: #fee2e2; color: var(--danger); }
.list-icon.brand  { background: #e8f5e9; color: var(--brand); }
.list-main  { flex: 1; min-width: 0; }
.list-title { font-weight: 600; font-size: 14.5px; }
.list-sub   { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-meta  { text-align: right; flex-shrink: 0; }
.list-value { font-weight: 700; font-size: 14.5px; }
.list-tag   { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-top: 3px; background: #fef3c7; color: #b45309; }

/* ── Floating Action Button ── */
.fab-btn {
  position: fixed;
  /* On viewports wider than the app's centered 900px column, track the column's right edge
     instead of the browser's - otherwise the FAB floats disconnected from the content next
     to it. max() falls back to the plain 18px inset on any narrower/mobile viewport, where
     50vw - 450px is negative. */
  right: max(18px, calc(50vw - 450px + 18px));
  bottom: calc(var(--nav-height) + 12px + var(--safe-bottom));
  width: 56px; height: 56px;
  border-radius: 28px;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: none;
  box-shadow: 0 6px 16px rgba(46,125,50,.35);
  z-index: 30;
  cursor: pointer;
  transition: transform .1s ease;
}
.fab-btn:active { transform: scale(0.92); }

/* ── iOS-style bottom sheet (Quick Actions, shared across pages) ── */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sheet-backdrop.active { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  padding-bottom: max(20px, var(--safe-bottom));
  z-index: 1001;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  max-height: 80vh;
  display: flex; flex-direction: column;
}
.bottom-sheet.active    { transform: translateY(0); }
.bottom-sheet.dragging  { transition: none; }

.sheet-handle-bar { display: flex; justify-content: center; padding: 10px 0 2px; flex-shrink: 0; }
.sheet-handle { width: 36px; height: 5px; background: var(--border); border-radius: 3px; }

.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sheet-title { font-weight: 700; font-size: 16px; }
.sheet-close-btn {
  background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%;
  color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sheet-body { padding: 16px 20px; overflow-y: auto; }

.action-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; min-height: 60px;
  background: #f5f5f5; border-radius: 14px;
  text-decoration: none; color: inherit;
  margin-bottom: 10px;
  transition: background .15s ease, transform .1s ease;
}
.action-tile:last-child { margin-bottom: 0; }
.action-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.action-icon.icon-brand   { background: #e8f5e9; color: var(--brand); }
.action-icon.icon-warn    { background: #ffedd5; color: #ea580c; }
.action-icon.icon-success { background: #d1fae5; color: #059669; }
.action-title { font-weight: 600; font-size: 14.5px; }
.action-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.action-arrow { color: #94a3b8; font-size: 13px; margin-left: auto; flex-shrink: 0; }

/* ── Applicant wizard (apply.html) - section cards, stepper, identity card ── */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
}
.section-card h2 { font-size: 15px; margin-bottom: 4px; }
.section-card .desc { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

.stepper-bar {
  display: flex; gap: 8px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.step-pill { flex: 1; height: 4px; background: var(--border); border-radius: 2px; transition: background .25s ease; }
.step-pill.active    { background: var(--brand); }
.step-pill.completed { background: var(--success); }

.form-step { display: none; }
.form-step.active { display: block; animation: stepFadeIn .2s ease; }
@keyframes stepFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.identity-card {
  background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 14px;
  padding: 14px; display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
.identity-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #e8f5e9; border: 2px solid #fff; flex-shrink: 0; }
.identity-info { flex: 1; min-width: 0; }
.identity-name { font-weight: 700; font-size: 14.5px; color: var(--brand-dk); }
.identity-meta { font-size: 12px; color: var(--brand); margin-top: 2px; }

.dynamic-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dynamic-row { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.dynamic-row .input { height: 40px; font-size: 13.5px; background: #fff; }
.btn-add {
  width: 100%; min-height: 44px; background: #e8f5e9; color: var(--brand);
  border: 1px dashed #c8e6c9; border-radius: 12px; font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.btn-remove {
  min-width: 32px; min-height: 32px; border-radius: 8px; flex-shrink: 0;
  background: #fee2e2; color: var(--danger); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
}

.attest-card { background: #f5f5f5; border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.attest-card input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); margin-top: 2px; flex-shrink: 0; }
.attest-card span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ── Live input validation (NIN / phone / email) ── */
.input-wrapper { position: relative; }
.input-wrapper .input { padding-right: 34px; }
.input-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; }
.input.is-valid   { border-color: var(--success) !important; background: #f0fdf4 !important; }
.input.is-invalid { border-color: var(--danger)  !important; background: #fef2f2 !important; }
.input-icon.valid-icon   { color: var(--success); }
.input-icon.invalid-icon { color: var(--danger); }
.field-error-text { font-size: 11.5px; color: var(--danger); margin-top: 4px; display: none; }
.field-error-text.show { display: block; }

/* ── Client-arrived alert (viewing status - surfaced only inside this portal, never pushed) ── */
@keyframes client-arrived-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.dynamic-row.client-arrived {
  background: #fffbeb;
  border-color: var(--warn);
  animation: client-arrived-pulse 2s ease-out infinite;
}
.client-arrived-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn);
}