/* ============================================================
   CHOICE PROPERTIES — Design System v16
   Phase 2: Unified component system
   Font: Inter (all contexts)
   Architecture: Semantic tokens → components → legacy aliases
   ============================================================ */

/* ── Unified font: Inter replaces Sora + Manrope ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root {

  /* ════════════════════════════════════════════════════════
     SECTION A — BRAND COLORS
     Primary blue is the single action color across all pages.
     ════════════════════════════════════════════════════════ */

  --color-brand:          #006AFF;
  --color-brand-hover:    #0050CC;
  --color-brand-light:    #4D9FFF;
  --color-brand-pale:     #EBF4FF;
  --color-brand-glow:     rgba(0, 106, 255, 0.15);
  --color-brand-mid:      rgba(0, 106, 255, 0.08);


  /* ════════════════════════════════════════════════════════
     SECTION B — TEXT COLORS
     ════════════════════════════════════════════════════════ */

  --color-ink:              #1A1A1A;   /* Deepest dark — text, borders */
  --color-dark-surface:     #07121F;   /* Unified dark background — footer, dark sections */
  --color-text-primary:     #1A1A1A;   /* Primary body and heading text */
  --color-text-secondary:   #565656;   /* Secondary text, descriptions, metadata */
  --color-text-muted:       #767676;   /* Placeholder, disabled, fine print */
  --color-text-inverse:     #ffffff;   /* Text on dark surfaces */

  /* Ink alpha variants (used by dark sections, overlays) */
  --color-ink-80:   rgba(26, 26, 26, 0.80);
  --color-ink-50:   rgba(26, 26, 26, 0.50);
  --color-ink-20:   rgba(26, 26, 26, 0.20);
  --color-ink-08:   rgba(26, 26, 26, 0.08);
  --color-ink-04:   rgba(26, 26, 26, 0.04);


  /* ════════════════════════════════════════════════════════
     SECTION C — SURFACE COLORS
     ════════════════════════════════════════════════════════ */

  --color-surface-page:     #f5f5f5;   /* Default page background */
  --color-surface-raised:   #ffffff;   /* Cards, modals, dropdowns */
  --color-surface-subtle:   #F0F0F0;   /* Hover states, table alternating rows */
  --color-surface-overlay:  rgba(26, 26, 26, 0.50);   /* Modal / drawer backdrops */


  /* ════════════════════════════════════════════════════════
     SECTION D — BORDER COLORS
     ════════════════════════════════════════════════════════ */

  --color-border:           #E0E0E0;   /* Default borders */
  --color-border-strong:    #B8B8B8;   /* Emphasized borders, focus-adjacent */
  --color-border-muted:     #EBEBEB;   /* Very subtle dividers */


  /* ════════════════════════════════════════════════════════
     SECTION E — NEUTRAL GRAY SCALE
     ════════════════════════════════════════════════════════ */

  --color-gray-900:   #1A1A1A;
  --color-gray-700:   #565656;
  --color-gray-500:   #6b7280;
  --color-gray-400:   #9ca3af;
  --color-gray-300:   #d1d5db;
  --color-gray-100:   #f3f4f6;


  /* ════════════════════════════════════════════════════════
     SECTION F — SEMANTIC STATUS COLORS
     ════════════════════════════════════════════════════════ */

  /* Success */
  --color-success:          #059669;
  --color-success-bg:       #ecfdf5;
  --color-success-border:   #a7f3d0;

  /* Warning */
  --color-warning:          #d97706;
  --color-warning-bg:       #fffbeb;
  --color-warning-border:   #fde68a;

  /* Error / Danger */
  --color-error:            #dc2626;
  --color-error-bg:         #fef2f2;
  --color-error-border:     #fecaca;

  /* Info (same hue as brand) */
  --color-info:             #006AFF;
  --color-info-bg:          #EBF4FF;
  --color-info-border:      rgba(0, 106, 255, 0.25);


  /* ════════════════════════════════════════════════════════
     SECTION G — ADMIN SURFACE TOKENS
     Admin pages use a light page background with a dark sidebar.
     These tokens allow admin.css to extend the system rather
     than define a wholly separate one.
     ════════════════════════════════════════════════════════ */

  --color-admin-bg:         #f4f5f9;   /* Admin page background (light blue-gray) */
  --color-admin-surface:    #ffffff;   /* Admin card backgrounds */
  --color-admin-nav-bg:     #07121F;   /* Admin sidebar background — unified dark navy */
  --color-admin-nav-text:   rgba(255, 255, 255, 0.65);
  --color-admin-nav-active: #ffffff;
  --color-admin-nav-accent: #006AFF;   /* Active state — matches brand blue */


  /* ════════════════════════════════════════════════════════
     SECTION H — ACCENT / BADGE COLORS
     Gold is retained only as a badge-level accent token.
     It is no longer a structural brand color.
     ════════════════════════════════════════════════════════ */

  --color-gold:             #c9a84c;
  --color-gold-pale:        #fef9ec;
  --color-gold-border:      rgba(201, 168, 76, 0.25);


  /* ════════════════════════════════════════════════════════
     SECTION I — TYPOGRAPHY TOKENS
     Single font family: Inter across all contexts.
     ════════════════════════════════════════════════════════ */

  --font-base:    'Inter', system-ui, -apple-system, sans-serif;

  /* Phase 1: --font-display and --font-body now both point to Inter.
     Existing CSS that references these variables continues to compile.
     Later phases will update call-sites to use --font-base directly. */
  --font-display: var(--font-base);
  --font-body:    var(--font-base);

  /* Heading scale */
  --text-display:   clamp(40px, 5vw, 64px);
  --text-h1:        clamp(28px, 4vw, 48px);
  --text-h2:        clamp(22px, 3vw, 32px);
  --text-h3:        20px;
  --text-h4:        17px;
  --text-h5:        15px;

  /* Body scale */
  --text-lg:    17px;
  --text-base:  15px;
  --text-sm:    13px;
  --text-xs:    12px;

  /* Label scale */
  --text-label-lg:  13px;
  --text-label-sm:  11px;
  --text-label-xs:  10px;

  /* Numeric / price display */
  --text-price-lg:  38px;
  --text-price-md:  28px;
  --text-price-sm:  22px;
  --text-stat:      32px;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.75;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.07em;
  --tracking-widest:   0.1em;


  /* ════════════════════════════════════════════════════════
     SECTION J — SPACING TOKENS
     4px base unit. All spacing must use these tokens.
     ════════════════════════════════════════════════════════ */

  --space-px:    1px;
  --space-0-5:   2px;
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-7:     28px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-16:    64px;
  --space-20:    80px;
  --space-24:    96px;
  --space-32:    128px;


  /* ════════════════════════════════════════════════════════
     SECTION K — BORDER RADIUS TOKENS
     ════════════════════════════════════════════════════════ */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;


  /* ════════════════════════════════════════════════════════
     SECTION L — SHADOW TOKENS
     ════════════════════════════════════════════════════════ */

  --shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.09), 0 3px 8px rgba(0, 0, 0, 0.05);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.11), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-2xl:     0 32px 80px rgba(0, 0, 0, 0.13), 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-brand:   0 4px 20px rgba(0, 106, 255, 0.25);
  --shadow-brand-lg:0 8px 32px rgba(0, 106, 255, 0.30);


  /* ════════════════════════════════════════════════════════
     SECTION M — ANIMATION TOKENS
     ════════════════════════════════════════════════════════ */

  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:          160ms;
  --dur-slow:     300ms;


  /* ════════════════════════════════════════════════════════
     SECTION N — LAYOUT TOKENS
     ════════════════════════════════════════════════════════ */

  --max-w:    1280px;
  --nav-h:    64px;

  --z-filter: 80;
  --z-nav:    100;
  --z-modal:  1000;
  --z-toast:  9999;


  /* ════════════════════════════════════════════════════════
     SECTION O — BACKWARD-COMPATIBLE ALIASES
     ────────────────────────────────────────────────────────
     Every token below maps an OLD variable name to its
     NEW semantic equivalent. This ensures all existing CSS
     in main.css, listings.css, property.css, landlord.css,
     and any inline style blocks continue to resolve without
     any changes to those files during Phase 1.

     These aliases will be removed progressively in later
     phases as each file's call-sites are updated to the
     new token names directly.
     ════════════════════════════════════════════════════════ */

  /* ── Brand color aliases ── */
  --blue:       var(--color-brand);
  --blue-dark:  var(--color-brand-hover);
  --blue-light: var(--color-brand-light);
  --blue-pale:  var(--color-brand-pale);
  --blue-glow:  var(--color-brand-glow);
  --blue-mid:   var(--color-brand-mid);

  /* ── Dark / ink aliases ── */
  --ink:        var(--color-ink);
  --ink-80:     var(--color-ink-80);
  --ink-50:     var(--color-ink-50);
  --ink-20:     var(--color-ink-20);
  --ink-08:     var(--color-ink-08);
  --ink-04:     var(--color-ink-04);

  /* ── Surface aliases ── */
  --surface:      var(--color-surface-page);
  --surface-alt:  var(--color-surface-subtle);
  --white:        var(--color-surface-raised);

  /* ── Border aliases ── */
  --border:     var(--color-border);
  --border-mid: var(--color-border-strong);

  /* ── Gray scale aliases ── */
  --gray-900:   var(--color-gray-900);
  --gray-700:   var(--color-gray-700);
  --gray-500:   var(--color-gray-500);
  --gray-400:   var(--color-gray-400);
  --gray-300:   var(--color-gray-300);
  --gray-100:   var(--color-gray-100);

  /* ── Status color aliases ── */
  --green:          var(--color-success);
  --green-bg:       var(--color-success-bg);
  --green-border:   var(--color-success-border);
  --red:            var(--color-error);
  --red-bg:         var(--color-error-bg);
  --amber:          var(--color-warning);
  --amber-bg:       var(--color-warning-bg);
  --amber-border:   var(--color-warning-border);

  /* ── Spacing aliases (old --s-N → new --space-N) ── */
  --s-1:    var(--space-1);
  --s-2:    var(--space-2);
  --s-3:    var(--space-3);
  --s-4:    var(--space-4);
  --s-5:    var(--space-5);
  --s-6:    var(--space-6);
  --s-7:    var(--space-7);
  --s-8:    var(--space-8);
  --s-10:   var(--space-10);
  --s-12:   var(--space-12);
  --s-16:   var(--space-16);
  --s-20:   var(--space-20);
  --s-24:   var(--space-24);
  --s-32:   var(--space-32);

  /* ── Radius aliases (old --r-N → new --radius-N) ── */
  --r-xs:   var(--radius-sm);     /* 4px */
  --r-sm:   var(--radius-md);     /* 8px — closest match to old 6px */
  --r:      var(--radius-md);     /* 8px */
  --r-lg:   var(--radius-lg);     /* 12px */
  --r-xl:   var(--radius-xl);     /* 16px */
  --r-2xl:  var(--radius-2xl);    /* 20px */
  --r-3xl:  var(--radius-3xl);    /* 24px */
  --r-full: var(--radius-full);   /* 9999px */

  /* ── Shadow aliases (old --sh-N → new --shadow-N) ── */
  --sh-xs:      var(--shadow-xs);
  --sh-sm:      var(--shadow-sm);
  --sh:         var(--shadow-md);
  --sh-md:      var(--shadow-lg);
  --sh-lg:      var(--shadow-xl);
  --sh-xl:      var(--shadow-2xl);
  --sh-blue:    var(--shadow-brand);
  --sh-blue-lg: var(--shadow-brand-lg);

  /* ── Legacy aliases (cross-system names, kept for apply/admin/info pages) ── */
  --gold:          var(--color-gold);
  --gold-pale:     var(--color-gold-pale);
  --gold-bright:   #f0c842;            /* no equivalent token, retained as-is */
  --slate:         var(--color-gray-700);
  --slate-light:   var(--color-gray-500);
  --slate-mid:     var(--color-gray-500);
  --slate-pale:    var(--color-border);
  --crimson:       var(--color-error);
  --crimson-bg:    var(--color-error-bg);
  --emerald:       var(--color-success);
  --emerald-bg:    var(--color-success-bg);
  --navy:          var(--color-ink);
  --navy-mid:      #0050CC;            /* Zillow dark blue for gradient contexts */
  --surface-dark:  var(--color-border);
  --surface-mid:   var(--color-surface-subtle);
  --bg:            #f5f5f5;            /* Zillow page bg */
  --muted:         #767676;            /* Zillow muted text */
  --muted2:        #565656;            /* Zillow secondary text */
  --text:          #1A1A1A;            /* Zillow primary text */
  --surface2:      #F0F0F0;            /* Zillow secondary surface */
  --info:          var(--color-brand-light);

}

/* FOCUS VISIBLE — keyboard nav only, no mouse outlines */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-glow) !important; }

/* BASE */
body { font-family: var(--font-body); background: var(--white); color: var(--color-text-primary); line-height: 1.6; font-size: 15px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); }

/* CONTAINER */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-6); }
@media (max-width: 640px) { .container { padding: 0 var(--s-4); } }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: var(--z-nav);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.scrolled { box-shadow: var(--sh); }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-6);
  height: 100%; display: flex; align-items: center; gap: var(--s-8);
}
.nav-logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.nav-logo-mark {
  width: 34px; height: 34px; background: var(--blue); border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--white);
}
.nav-logo-emblem {
  width: 34px; height: 34px; background: var(--blue); border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,106,255,0.25);
}
.nav-logo-emblem svg { width: 20px; height: 20px; }
.nav-logo-text-wrap { display: flex; flex-direction: column; }
.nav-logo-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
.nav-logo-tagline { font-size: 9.5px; font-weight: 500; color: var(--gray-400); letter-spacing: 0.02em; text-transform: uppercase; }
.nav-logo-text { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.nav-logo-sub { font-size: 10px; font-weight: 500; color: var(--gray-400); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link { padding: 7px 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--gray-500); transition: all var(--dur) var(--ease); }
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link.active { color: var(--ink); font-weight: 600; }
.nav-link--track { color: var(--gray-500); font-weight: 500; }
.nav-link--track:hover { background: var(--surface); color: var(--ink); }
.nav-link--cta { background: var(--blue); color: var(--white) !important; padding: 9px 20px; border-radius: var(--r-full); font-weight: 600; box-shadow: var(--sh-blue); letter-spacing: -0.01em; }
.nav-link--cta:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--sh-blue-lg); }
.nav-mobile-toggle { display: none; background: none; border: none; font-size: 20px; color: var(--gray-500); cursor: pointer; padding: var(--s-2); border-radius: var(--r); margin-left: auto; }

.nav-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: calc(var(--z-nav) - 1); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.35s ease; }
.nav-drawer-overlay.visible { display: block; }
.nav-drawer-overlay.open { opacity: 1; }
.nav-drawer { position: fixed; top: 0; right: -100%; bottom: 0; width: min(320px,88vw); background: var(--white); z-index: var(--z-nav); display: flex; flex-direction: column; transition: right var(--dur-slow) var(--ease-out); box-shadow: var(--sh-xl); }
.nav-drawer.open { right: 0; }
.nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); }
.nav-drawer-close { background: var(--surface); border: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gray-500); cursor: pointer; }
.nav-drawer-body { padding: var(--s-4) var(--s-3); flex: 1; overflow-y: auto; }
.nav-drawer-link { display: flex; align-items: center; gap: var(--s-3); padding: 11px var(--s-3); border-radius: var(--r-lg); font-size: 14.5px; font-weight: 500; color: var(--gray-700); transition: all var(--dur) var(--ease); }
.nav-drawer-link:hover { background: var(--surface-alt); color: var(--ink); }
.nav-drawer-link.active { background: var(--blue-pale); color: var(--blue); font-weight: 600; }
.nav-drawer-link i { width: 20px; text-align: center; font-size: 14px; color: var(--gray-400); }
.nav-drawer-link.active i { color: var(--blue); }
.nav-drawer-cta { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); }
.nav-drawer-footer { padding: var(--s-4) var(--s-6); font-size: 12px; color: var(--gray-400); }

body { padding-top: var(--nav-h); }

/* ── COMPONENT: BUTTONS ──────────────────────────────────────
   Base .btn class shared by all variants.
   Variants: primary, secondary, ghost, danger, success, outline
   Sizes:    xs, sm, (default), lg, xl
   States:   hover, focus-visible, disabled, loading
   ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-5);   /* default: 38px height */
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: var(--text-label-lg);  /* 13px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--dur) var(--ease),
    border-color     var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease),
    transform        var(--dur) var(--ease),
    opacity          var(--dur) var(--ease);
}

/* Primary — brand blue fill */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-lg);
}

/* Secondary — white fill with border */
.btn-secondary {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
}

/* Ghost — transparent, no fill */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* Outline — transparent with brand border */
.btn-outline {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn-outline:hover {
  background: var(--color-brand-pale);
}

/* Danger — destructive red fill */
.btn-danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Success — green tint (existing .btn-success kept below for legacy) */
.btn-success-solid {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.btn-success-solid:hover {
  background: #047857;
  border-color: #047857;
}

/* ── Size variants ── */
.btn-xs { padding: 5px var(--space-3);  font-size: var(--text-label-xs);  border-radius: var(--radius-sm); }   /* ~28px */
.btn-sm { padding: 7px var(--space-4);  font-size: var(--text-xs);        border-radius: var(--radius-md); }   /* ~32px */
/* default (no modifier): 38px */
.btn-lg { padding: 11px var(--space-6); font-size: var(--text-base);      border-radius: var(--radius-md); }   /* ~44px */
.btn-xl { padding: 14px var(--space-8); font-size: 16px;                  border-radius: var(--radius-lg); }   /* ~52px — apply/submit CTAs */

/* ── Full-width modifier ── */
.btn-block { width: 100%; }

/* ── Disabled state ── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Loading state ── */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* ── Focus ── */
.btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

/* ── COMPONENT: BADGES ───────────────────────────────────────
   Unified pill badge used across all pages and contexts.
   Shape: full pill (border-radius full)
   Variants: semantic status + categorical colors
   Sizes:    sm (default), lg
   ─────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-base);
  font-size: var(--text-label-sm);  /* 11px */
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Semantic status variants ── */
/* badge-success maps to green — status: available, approved, active */
.badge-success  { background: var(--color-success-bg);  color: var(--color-success);  border: 1px solid var(--color-success-border); }
/* badge-warning maps to amber — status: pending, review */
.badge-warning  { background: var(--color-warning-bg);  color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
/* badge-error maps to red — status: rejected, failed, overdue */
.badge-error    { background: var(--color-error-bg);    color: var(--color-error);    border: 1px solid var(--color-error-border); }
/* badge-info maps to blue — status: informational, in progress */
.badge-info     { background: var(--color-info-bg);     color: var(--color-info);     border: 1px solid var(--color-info-border); }

/* ── Categorical color variants (kept from v14) ── */
.badge-blue     { background: var(--color-brand-pale);  color: var(--color-brand); }
.badge-green    { background: var(--color-success-bg);  color: var(--color-success); }
.badge-amber    { background: var(--color-warning-bg);  color: var(--color-warning);  border: 1px solid var(--color-warning-border); }
.badge-gray     { background: var(--color-gray-100);    color: var(--color-gray-500); }
.badge-red      { background: var(--color-error-bg);    color: var(--color-error); }
.badge-new      { background: var(--color-brand);       color: var(--color-text-inverse); }
.badge-gold     { background: var(--color-gold-pale);   color: var(--color-gold);     border: 1px solid var(--color-gold-border); }
.badge-slate    { background: var(--color-gray-100);    color: var(--color-gray-500); border: 1px solid var(--color-border); }
.badge-dark     { background: #1f2937;                  color: #9ca3af; }
.badge-outline  { background: transparent;              color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* ── Size variant ── */
.badge-sm { padding: 2px 7px;  font-size: var(--text-label-xs); }  /* 10px */
.badge-lg { padding: 4px 12px; font-size: var(--text-xs); }         /* 12px */

.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-dot-green { background: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.status-dot-amber { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-bg); }
.status-dot-gray  { background: var(--gray-400); box-shadow: 0 0 0 2px var(--gray-100); }

/* ── COMPONENT: FORMS ────────────────────────────────────────
   Unified form elements used across public, apply, landlord,
   and admin contexts.
   Components: form-group, label, input, select, textarea,
               form-help, form-error, input-group (prefix/suffix)
   ─────────────────────────────────────────────────────────── */

/* ── Form group — vertical stack wrapping label + input + hint ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Label ── */
.form-label {
  display: block;
  font-family: var(--font-base);
  font-size: var(--text-label-sm);   /* 11px */
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wider);  /* 0.07em */
  text-transform: uppercase;
}
.form-label .required,
.form-label.required::after {
  content: ' *';
  color: var(--color-error);
  font-weight: 700;
}

/* ── Base input / select / textarea ── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);   /* 12px 16px → 40px height */
  font-family: var(--font-base);
  font-size: var(--text-sm);               /* 13px */
  font-weight: 400;
  color: var(--color-text-primary);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  appearance: none;
  line-height: 1.5;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow   var(--dur) var(--ease),
    background   var(--dur) var(--ease);
}

/* Focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-glow);
}

/* Placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Disabled */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Error state */
.form-input.error,
.form-select.error,
.form-textarea.error,
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ── Select — custom chevron ── */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

/* ── Textarea ── */
.form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: var(--leading-relaxed);
}
.form-textarea-lg { min-height: 140px; }

/* ── Helper and error text ── */
.form-help,
.form-hint {
  font-size: var(--text-xs);     /* 12px */
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.form-error {
  font-size: var(--text-xs);     /* 12px */
  font-weight: 500;
  color: var(--color-error);
  line-height: var(--leading-normal);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Input group — prefix / suffix wrapper ── */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group .form-input {
  flex: 1;
}
.input-group-prefix,
.input-group-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
  line-height: 1;
}
.input-group-prefix { left: var(--space-4); }
.input-group-suffix { right: var(--space-4); }
.input-group.has-prefix .form-input  { padding-left:  var(--space-10); }
.input-group.has-suffix .form-input  { padding-right: var(--space-10); }
/* Clickable suffix (e.g. show/hide password toggle) */
.input-group-suffix.clickable { pointer-events: all; cursor: pointer; color: var(--color-text-secondary); }
.input-group-suffix.clickable:hover { color: var(--color-text-primary); }

/* ── Size variants ── */
.form-input-sm,
.form-select-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }

.form-input-lg,
.form-select-lg { padding: var(--space-4) var(--space-5); font-size: var(--text-base); border-radius: var(--radius-lg); }

/* ── COMPONENT: CARDS ────────────────────────────────────────
   Base card used across property listings, dashboards, modals,
   content pages, and portals.
   Variants: interactive (hover lift), flat, elevated, dark
   Sections: card-header, card-body, card-footer
   ─────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Interactive card — adds hover lift (opt-in via class or context) */
.card-interactive,
.card[role="link"],
.card[role="button"] {
  cursor: pointer;
  transition:
    transform   var(--dur-slow) var(--ease),
    box-shadow  var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease);
}
.card-interactive:hover,
.card[role="link"]:hover,
.card[role="button"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

/* Flat card — border only, no shadow */
.card-flat {
  box-shadow: none;
}

/* Elevated card — deeper shadow at rest */
.card-elevated {
  box-shadow: var(--shadow-md);
}
.card-elevated:hover {
  box-shadow: var(--shadow-2xl);
}

/* Dark card — for apply sidebar, dark hero sub-cards */
.card-dark {
  background: var(--color-ink);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

/* ── Card sections ── */
.card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.card-header-title {
  font-size: var(--text-h5);       /* 15px */
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}
.card-header-action {
  font-size: var(--text-sm);        /* 13px */
  font-weight: 500;
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.card-header-action:hover { color: var(--color-brand-hover); }

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

/* ── dashboard-section inherits card base visually ── */
.dashboard-section {
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* SECTION HEADERS */
.section-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); background: var(--blue-pale); border-radius: var(--r-full); padding: 5px 12px; margin-bottom: var(--s-4); }
.section-title { font-family: var(--font-display); font-size: clamp(28px,3.5vw,44px); font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -0.03em; }
.section-subtitle { font-size: 16px; color: var(--gray-500); line-height: 1.7; max-width: 520px; margin-top: var(--s-3); }

/* FOOTER */
footer { background: var(--color-dark-surface); padding: var(--s-16) 0 var(--s-8); margin-top: var(--s-20); }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--s-12); margin-bottom: var(--s-12); }
.footer-logo { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.footer-logo-mark { width: 34px; height: 34px; border-radius: var(--r-lg); background: var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--white); }
.footer-logo-text { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--white); }
.footer-desc { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.7; max-width: 280px; }
.footer-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); margin-bottom: var(--s-4); }
.footer-link { display: block; font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: var(--s-3); transition: color var(--dur) var(--ease); }
.footer-link:hover { color: var(--white); }
.footer-bottom { padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); }
.footer-legal { font-size: 12.5px; color: rgba(255,255,255,0.3); line-height: 1.6; }
.footer-eq { font-size: 11.5px; color: rgba(255,255,255,0.28); display: inline-flex; align-items: center; gap: 5px; }
.footer-eq i { font-size: 10px; }

/* ── COMPONENT: STAT CARDS ───────────────────────────────────
   Dashboard metric display cards.
   Used on landlord dashboard, admin dashboard, and public
   informational stats row.
   ─────────────────────────────────────────────────────────── */

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition:
    box-shadow  var(--dur) var(--ease),
    transform   var(--dur) var(--ease);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Stat card text block */
.stat-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.stat-card-label {
  font-size: var(--text-label-sm);  /* 11px */
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 2px;
}
.stat-card-value {
  font-family: var(--font-base);
  font-size: var(--text-price-md);  /* 28px */
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
}
.stat-card-sub {
  font-size: var(--text-xs);        /* 12px */
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Stat card icon */
.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--color-brand-pale);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* ── Semantic icon color variants ── */
.stat-card-success .stat-card-icon { background: var(--color-success-bg);  color: var(--color-success); }
.stat-card-warning .stat-card-icon { background: var(--color-warning-bg);  color: var(--color-warning); }
.stat-card-error   .stat-card-icon { background: var(--color-error-bg);    color: var(--color-error); }

/* TOAST */
.toast-container { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-3); pointer-events: none; }
.toast { background: var(--ink); color: var(--white); border-radius: var(--r-xl); padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-3); min-width: 300px; max-width: 400px; box-shadow: var(--sh-xl); pointer-events: all; font-size: 14px; font-weight: 500; animation: toastIn 250ms var(--ease-out) forwards; border: 1px solid rgba(255,255,255,0.08); }
.toast.toast-success i { color: #34d399; }
.toast.toast-error i { color: #f87171; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* LOADING */
.page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: var(--s-4); }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* CONTENT PAGES */
.content-page-hero { margin-bottom: var(--s-10); }
.content-page-hero h1 { font-family: var(--font-display); font-size: clamp(26px,5vw,42px); font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: var(--s-4); }
.content-page-hero p { font-size: 17px; color: var(--gray-500); line-height: 1.7; max-width: 600px; }
.content-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-6) var(--s-8); margin-bottom: var(--s-4); transition: box-shadow var(--dur) var(--ease); }
.content-card:hover { box-shadow: var(--sh); }

/* SUCCESS */
.success-card { background: var(--white); border-radius: var(--r-3xl); box-shadow: var(--sh-xl); overflow: hidden; border: 1px solid var(--border); }
.success-icon { width: 68px; height: 68px; border-radius: 50%; background: var(--green-bg); border: 2px solid var(--green-border); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--green); margin: 0 auto var(--s-6); }
.app-id-card { background: var(--blue-pale); border: 1.5px solid rgba(0,106,255,0.2); border-radius: var(--r-xl); padding: var(--s-6); text-align: center; margin-bottom: var(--s-8); }

/* ── COMPONENT: TABLES ───────────────────────────────────────
   Unified table styles used across landlord and admin pages.
   Class-scoped to .table to avoid bleed onto other elements.
   Wrapper .table-wrap handles horizontal scroll on mobile.
   ─────────────────────────────────────────────────────────── */

/* Scroll wrapper */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

/* Table element */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-base);
}

/* Header row */
.table th,
.table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-label-sm);    /* 11px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  background: var(--color-surface-raised);
}

/* Data cells */
.table td,
.table tbody td {
  padding: var(--space-4);
  font-size: var(--text-sm);          /* 13px */
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-muted);
  vertical-align: middle;
  line-height: var(--leading-normal);
}

/* Last row — remove bottom border */
.table tr:last-child td { border-bottom: none; }

/* Row hover */
.table tbody tr:hover td {
  background: var(--color-surface-subtle);
  transition: background var(--dur) var(--ease);
}

/* ── Table variants ── */
.table-compact th { padding: var(--space-2) var(--space-3); }
.table-compact td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

.table-striped tbody tr:nth-child(even) td { background: var(--color-surface-subtle); }

/* ── Existing listing-table inherits unified table styles ── */
/* These rules keep backward compat for pages using .listing-table */
.dashboard-section .listing-table { width: 100%; border-collapse: collapse; }
.listing-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-label-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.listing-table td { padding: var(--space-4); border-bottom: 1px solid var(--color-surface-subtle); vertical-align: middle; font-size: 13.5px; }
.listing-table tr:last-child td { border-bottom: none; }
.listing-table tr:hover td { background: var(--color-surface-page); }

/* ── Table cell helpers ── */
.table-cell-muted { color: var(--color-text-muted); }
.table-cell-strong { font-weight: 600; color: var(--color-text-primary); }
.table-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ── Listing row sub-elements (kept for landlord dashboard) ── */
.listing-thumb { width: 56px; height: 42px; object-fit: cover; background: var(--color-surface-subtle); flex-shrink: 0; overflow: hidden; display: block; border-radius: var(--radius-md); }
.listing-row-title  { font-weight: 600; font-size: 13.5px; color: var(--color-text-primary); margin-bottom: 2px; }
.listing-row-meta   { font-size: 12px; color: var(--color-text-muted); }
.listing-row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.listing-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--color-success); background: var(--color-success-bg); border-radius: var(--radius-full); padding: 2px 8px; }

/* ── COMPONENT: ALERTS ───────────────────────────────────────
   Inline status messages within page content.
   Variants: info, success, warning, danger
   ─────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  font-size: var(--text-base);      /* 15px */
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: var(--leading-relaxed);
}
.alert i { margin-top: 2px; flex-shrink: 0; }

.alert-info    { background: var(--color-info-bg);    color: var(--color-brand-hover);  border: 1px solid var(--color-info-border); }
.alert-success { background: var(--color-success-bg); color: #065f46;                   border: 1px solid var(--color-success-border); }
.alert-warning { background: var(--color-warning-bg); color: #92400e;                   border: 1px solid var(--color-warning-border); }
.alert-danger  { background: var(--color-error-bg);   color: #991b1b;                   border: 1px solid var(--color-error-border); }

.divider { height: 1px; background: var(--color-border); margin: var(--space-6) 0; }


/* ── COMPONENT: MODALS ───────────────────────────────────────
   Unified modal overlay + dialog used across admin and portals.
   Sizes: sm (400px), md (520px default), lg (720px), xl (960px)
   Lightbox variant retains its own .lightbox class — see property.css
   ─────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-surface-overlay);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  backdrop-filter: blur(3px);
}
.modal-overlay.open {
  display: flex;
  animation: overlayIn 200ms var(--ease-out) forwards;
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--color-surface-raised);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 520px;     /* default = md */
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 200ms var(--ease-out) forwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Size variants */
.modal-sm { max-width: 400px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }

/* Sections */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.modal-title {
  font-size: var(--text-h5);        /* 15px */
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--color-border); color: var(--color-text-primary); }

.modal-body {
  padding: var(--space-6);
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}


/* ── COMPONENT: TOASTS ───────────────────────────────────────
   Unified non-blocking feedback messages (replaces both the
   public toastIn system and the admin cp-toast system).
   The existing .toast and .toast-container class names are
   kept and enhanced. Admin can adopt the same classes.
   ─────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 300px;
  max-width: 400px;
  box-shadow: var(--shadow-2xl);
  pointer-events: all;
  font-family: var(--font-base);
  font-size: var(--text-sm);        /* 13px */
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid transparent;  /* variant accent set below */
  animation: toastIn 250ms var(--ease-out) forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0)  scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(0.97); }
}
.toast.removing { animation: toastOut 180ms var(--ease) forwards; }

/* Status variants — left border accent + icon color */
.toast-success { border-left-color: var(--color-success); }
.toast-success i { color: #34d399; }

.toast-error   { border-left-color: var(--color-error); }
.toast-error   i { color: #f87171; }

.toast-warning { border-left-color: var(--color-warning); }
.toast-warning i { color: #fbbf24; }

.toast-info    { border-left-color: var(--color-brand); }
.toast-info    i { color: var(--color-brand-light); }

/* Mobile: stretch toast to near full width */
@media (max-width: 640px) {
  .toast-container { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); }
  .toast { min-width: 0; max-width: 100%; }
}


/* ── COMPONENT: STEP WIZARD ──────────────────────────────────
   Unified step indicator used across apply form (6 steps)
   and landlord new-listing wizard (6 steps).
   Replaces the two divergent step indicator implementations.
   Safe: JS reads .progress-step, .form-section.active — not
   these new class names. These are purely presentational.
   ─────────────────────────────────────────────────────────── */

.steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.steps::-webkit-scrollbar { display: none; }

.step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-raised);
  font-family: var(--font-base);
  font-size: var(--text-label-sm);  /* 11px */
  font-weight: 700;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.step-label {
  font-size: var(--text-xs);        /* 12px */
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
}

.step-sep {
  width: 20px;
  height: 1.5px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Active step */
.step.active .step-circle { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); }
.step.active .step-label  { color: var(--color-text-primary); font-weight: 600; }

/* Done step */
.step.done .step-circle { background: var(--color-success); border-color: var(--color-success); color: var(--color-text-inverse); }
.step.done .step-label  { color: var(--color-success); }

/* Separator colors */
.step.done + .step .step-sep,
.step.done + .step-sep { background: var(--color-success); }


/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 768px) {
  .nav-links        { display: none; }
  .nav-mobile-toggle { display: flex; }
  .footer-grid      { grid-template-columns: 1fr; }
  .stats-row        { grid-template-columns: 1fr 1fr; }
  .step-label       { display: none; }   /* Hide step labels on mobile — circles remain */
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
}


/* ── Shared: Footer Links (used on public + apply pages) ─────── */
.footer-links { display: flex; justify-content: center; gap: 32px; margin: 20px 0 25px; flex-wrap: wrap; }
.footer-links a { color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--color-brand); }
.footer-links i { font-size: 14px; color: var(--color-text-muted); }
@media (max-width: 480px) { .footer-links { gap: 16px; } }


/* ── Shared: Checkbox / Radio Group ──────────────────────────── */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.checkbox-item:hover { background: var(--color-brand-pale); border-color: var(--color-brand); }
.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"] { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--color-brand); }
.checkbox-item label { margin: 0; font-weight: 500; cursor: pointer; font-size: 14px; color: var(--color-text-primary); }


/* ── Shared: Utility classes used across portals ─────────────── */
/* .btn-success kept as legacy tint variant (landlord / admin use) */
.btn-success { background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.30); color: #15803d; border-radius: var(--radius-lg); cursor: pointer; transition: all var(--dur) var(--ease); }
.btn-success:hover { background: rgba(34,197,94,0.18); }
label.field-label { display: block; font-size: 11px; font-weight: 700; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }