/* ================================================================
   TISAKENYUMBA — ELITE RESPONSIVE SYSTEM v45
   Mobile-first · Fluid · Accessible · Zero layout shift
   ================================================================
   Breakpoints
     xs:   320px  tiny phones
     sm:   480px  standard mobile
     md:   768px  tablet / large-phone landscape
     lg:  1024px  laptop
     xl:  1280px  desktop
    2xl:  1440px  large desktop
   ================================================================ */

/* ================================================================
   0. OVERFLOW GUARD + BASE
   ================================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-size: var(--text-base);
  line-height: 1.6;
}
img, video, svg {
  max-width: 100%;
  height: auto;
}
* { box-sizing: border-box; }

/* ================================================================
   1. FLUID TYPOGRAPHY — every heading uses clamp, no fixed jumps
   ================================================================ */
.land-title {
  font-size: var(--text-hero);
  line-height: 0.92;
  letter-spacing: clamp(-1.5px, -0.4vw, -2.5px);
}
.hero-top h2,
.agent-hero h2 {
  font-size: clamp(22px, 5.5vw, 36px);
  line-height: 1.1;
}
.section-hdr h3 { font-size: clamp(17px, 3.5vw, 22px); }
.card-body h4   { font-size: clamp(13px, 2.8vw, 15px); }
.auth-title     { font-size: clamp(22px, 5vw, 30px); }
.stat-card .num { font-size: clamp(22px, 5.5vw, 32px); }
.stat-card .lbl { font-size: clamp(9px,  1.8vw, 11px); }

/* ================================================================
   2. CONTAINER SYSTEM
   ================================================================ */
.container,
.content-wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ================================================================
   3. GLOBAL SCREEN OVERFLOW GUARD
   ================================================================ */
.screen,
#landing,
#tenant-search,
#agent-dashboard,
#tenant-auth,
#agent-auth {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ================================================================
   4. LANDING SCREEN
   ================================================================ */
#landing {
  padding: 0;
  overflow-x: hidden;
  min-height: 100dvh;
}

.land-topbar {
  padding: clamp(12px, 2.5vw, 20px) clamp(16px, 4vw, 32px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.land-topbar-logo img {
  height: clamp(52px, 11vw, 90px);
  width: auto;
}

.land-inner {
  width: 100%;
  padding-inline: clamp(16px, 5vw, 32px);
  padding-bottom: clamp(24px, 6vw, 48px);
  max-width: min(100%, 480px);
  margin-inline: auto;
}
@media (min-width: 480px) { .land-inner { max-width: 560px; } }
@media (min-width: 768px) { .land-inner { max-width: 700px; } }
@media (min-width: 1024px) { .land-inner { max-width: min(920px, 88vw); } }
@media (min-width: 1280px) { .land-inner { max-width: 980px; } }

.land-hero-block {
  padding: clamp(20px, 5vw, 72px) 0 clamp(14px, 3.5vw, 48px);
}

.land-sub {
  font-size: clamp(12px, 2.2vw, 15px);
  margin-bottom: clamp(14px, 3vw, 24px);
}

/* ================================================================
   5. ROLE GRID (Landing)
   ================================================================ */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.5vw, 18px);
  margin-bottom: clamp(20px, 4vw, 32px);
}
@media (max-width: 359px) {
  .role-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
  .role-card { padding: 30px 22px 24px; }
  .role-card h3 { font-size: 18px; }
}

/* ================================================================
   6. PRICING SECTION
   ================================================================ */
.pricing-cols {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px) {
  .pricing-cols { flex-direction: row; flex-wrap: wrap; }
  .pricing-col  { flex: 1; min-width: 140px; }
}
@media (min-width: 768px) {
  .pricing-cols          { flex-wrap: nowrap; gap: 14px; }
  .pricing-col           { padding: 22px 16px; }
  .pricing-tier-price    { font-size: clamp(22px, 4vw, 30px); }
}

/* ================================================================
   7. AUTH SCREENS
   ================================================================ */
#tenant-auth,
#agent-auth {
  padding: clamp(20px, 5vw, 48px) clamp(16px, 4vw, 24px);
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}
.auth-box {
  width: 100%;
  max-width: min(440px, 96vw);
}
.auth-logo-wrap img { width: clamp(90px, 26vw, 130px); }

@media (min-width: 768px) {
  .auth-box { max-width: 480px; }
}
@media (min-width: 1024px) {
  .auth-box { max-width: 520px; }
}

/* ================================================================
   8. APP HEADER (tenant / agent)
   ================================================================ */
.app-header {
  padding: clamp(8px, 2vw, 12px) clamp(14px, 3.5vw, 28px);
  min-height: 56px;
  width: 100%;
}
.nav-logo-img {
  height: clamp(36px, 8vw, 60px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* ================================================================
   9. SEARCH / TENANT HERO
   ================================================================ */
.search-hero {
  padding: clamp(16px, 3.5vw, 28px) clamp(14px, 4vw, 24px) clamp(14px, 3vw, 22px);
}
.hero-top { margin-bottom: clamp(12px, 3vw, 20px); }
.hero-top p { font-size: clamp(11px, 2vw, 13px); }

.hero-select {
  font-size: 16px; /* prevents iOS zoom */
  padding: clamp(10px, 2.5vw, 13px) 14px;
  border-radius: var(--r-sm);
  width: 100%;
}

/* Filter grid: 1-col mobile → 2-col sm → 4-col tablet */
.filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 400px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .filter-row { grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
}
@media (min-width: 1024px) {
  .filter-row { grid-template-columns: 2.5fr 1fr 1fr; }
}

.search-actions {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  margin-top: clamp(12px, 3vw, 18px);
}

.search-go {
  min-height: 48px;
  padding: 12px clamp(14px, 3vw, 22px);
  font-size: clamp(13px, 2.4vw, 15px);
}

/* ================================================================
   10. LISTINGS SECTION — RESPONSIVE AUTO-GRID
   ================================================================ */
.listings-section {
  padding: clamp(14px, 3vw, 24px) clamp(14px, 4vw, 24px);
  flex: 1;
}

#listings-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5vw, 18px);
}

/* 2-col: 480px+ */
@media (min-width: 480px) {
  #listings-wrap { grid-template-columns: repeat(2, 1fr); }
}
/* 3-col: laptop */
@media (min-width: 1024px) {
  #listings-wrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin-inline: auto;
  }
  .listings-section {
    max-width: 1320px;
    margin-inline: auto;
    width: 100%;
  }
}
/* 4-col: wide desktop */
@media (min-width: 1280px) {
  #listings-wrap { grid-template-columns: repeat(4, 1fr); }
}

/* Override: cards inside listings-wrap must not use margin-bottom for spacing */
#listings-wrap .listing-card { margin-bottom: 0; }

/* ================================================================
   11. LISTING CARDS — fluid aspect ratio + actions
   ================================================================ */
.listing-card { border-radius: clamp(12px, 2.5vw, 18px); }

.card-img-v2 {
  aspect-ratio: 16 / 10;
  min-height: unset;
}
@media (max-width: 360px) {
  .card-img-v2 { aspect-ratio: 4 / 3; }
}

.card-body {
  padding: clamp(10px, 2.5vw, 14px);
}

.card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.card-actions .wa-btn,
.card-actions .view-btn {
  flex: 1;
  min-width: 0;
  justify-content: center;
  font-size: var(--text-xs);
  padding: 10px 8px;
  min-height: 44px;
}
@media (min-width: 768px) {
  .card-actions .wa-btn,
  .card-actions .view-btn { font-size: 12px; padding: 11px 12px; }
}

.tag-row  { flex-wrap: wrap; gap: 4px; }
.tag      { font-size: var(--text-xs); padding: 3px 7px; }

/* ================================================================
   12. PILLS BAR
   ================================================================ */
.pills-bar {
  padding: clamp(8px, 2vw, 12px) clamp(14px, 3.5vw, 20px);
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.pills-bar::-webkit-scrollbar { display: none; }
.pills-bar > * { scroll-snap-align: start; }

@media (min-width: 768px) {
  .pills-bar { flex-wrap: wrap; overflow-x: visible; }
}

/* ================================================================
   13. AGENT DASHBOARD
   ================================================================ */
.agent-hero {
  padding: clamp(18px, 3.5vw, 32px) clamp(14px, 4vw, 24px) clamp(14px, 3vw, 28px);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 2vw, 12px);
}
.stat-card {
  padding: clamp(10px, 2.5vw, 16px) clamp(8px, 2vw, 14px);
}

.sub-banner {
  margin: clamp(10px, 2.5vw, 16px) clamp(14px, 4vw, 20px) 0;
  border-radius: clamp(10px, 2.5vw, 14px);
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (min-width: 480px) { .sub-banner { flex-wrap: nowrap; } }

.dash-body {
  padding: clamp(12px, 3vw, 24px) clamp(14px, 4vw, 24px);
}
@media (min-width: 1024px) {
  .dash-body {
    padding: clamp(16px, 3vw, 32px) clamp(20px, 4vw, 32px);
    max-width: 1280px;
    margin-inline: auto;
    width: 100%;
  }
}

/* Agent own listings — responsive grid */
#agent-listings-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
#agent-listings-wrap .listing-card { margin-bottom: 0; }

@media (min-width: 640px) {
  #agent-listings-wrap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1280px) {
  #agent-listings-wrap { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ================================================================
   14. MODALS — bottom-sheet on mobile, centred on tablet+
   ================================================================ */
.modal-overlay {
  padding: var(--sp-3);
  align-items: flex-end; /* bottom-sheet */
}
.modal-sheet,
.modal-box {
  border-radius: 20px 20px 14px 14px;
  max-height: 92dvh;
  width: 100%;
  max-width: min(480px, 100vw);
}

@media (min-width: 480px) {
  .modal-overlay { align-items: center; padding: clamp(16px, 4vw, 32px); }
  .modal-sheet,
  .modal-box { border-radius: clamp(16px, 3vw, 22px); }
}
@media (min-width: 768px) {
  .modal-sheet { max-width: min(560px, 94vw); }
  .modal-box   { max-width: min(520px, 94vw); }
}

/* ================================================================
   15. FORMS — single column mobile, two-column tablet+
   ================================================================ */
.fg input,
.fg select,
.mfg input,
.mfg select,
.mfg textarea,
.hero-select {
  font-size: 16px; /* prevent iOS auto-zoom */
  padding: clamp(10px, 2.5vw, 13px) 14px;
  border-radius: clamp(10px, 2vw, 13px);
  width: 100%;
}

.fg label,
.mfg label { font-size: var(--text-xs); }

.mfg-row,
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 480px) {
  .mfg-row,
  .form-row-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.mfg textarea { min-height: 80px; resize: vertical; }
@media (min-width: 768px) { .mfg textarea { min-height: 110px; } }

/* ================================================================
   16. BUTTONS — touch-friendly, adaptive sizing
   ================================================================ */
.pri-btn {
  padding: clamp(12px, 3vw, 14px);
  font-size: var(--text-base);
  min-height: 48px;
  border-radius: clamp(11px, 2.5vw, 13px);
  width: 100%;
}

/* All interactive controls meet WCAG 2.5.5 44px minimum */
.tb, .ab,
.hamburger-btn,
.theme-toggle,
.tab-btn,
.back-btn,
.nav-back-btn,
.pri-btn,
.search-go,
.upgrade-btn,
.add-listing-btn,
.map-btn {
  min-height: 44px;
  touch-action: manipulation;
}
.ab { min-height: 32px; } /* dense data table exception */

/* ================================================================
   17. HOW IT WORKS
   ================================================================ */
.how-section {
  padding: clamp(24px, 5.5vw, 52px) 0 clamp(18px, 4vw, 40px);
}
.how-title { font-size: clamp(18px, 4.5vw, 26px); }
.how-step  { padding: clamp(10px, 2.5vw, 16px); }
.how-text strong { font-size: clamp(13px, 2.8vw, 15px); }
.how-text p      { font-size: var(--text-sm); }

@media (min-width: 1024px) {
  .how-steps { flex-direction: row; gap: 0; align-items: stretch; }
  .how-step {
    flex: 1;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    border-radius: 16px;
  }
  .how-connector {
    width: 24px;
    height: 2px;
    background: rgba(14,165,233,.3);
    align-self: center;
    flex-shrink: 0;
    margin: 0 -2px;
    position: relative;
    top: -10px;
  }
  .how-text { text-align: center; }
}

/* ================================================================
   18. PLAN CARDS (tenant portal)
   ================================================================ */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px) {
  .plan-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .plan-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

/* ================================================================
   19. TOAST
   ================================================================ */
.toast,
#toast.toast {
  max-width: min(320px, calc(100vw - 32px));
  bottom: clamp(16px, 4vw, 24px);
  right: clamp(14px, 4vw, 24px);
  font-size: var(--text-sm);
  padding: 10px 18px;
}

/* ================================================================
   20. STATUS / EMPTY STATES
   ================================================================ */
.status-screen {
  padding: clamp(24px, 7vw, 48px) clamp(16px, 4vw, 32px);
  min-height: 50vh;
}
.status-screen .si { font-size: clamp(40px, 11vw, 56px); }
.status-screen h3  { font-size: clamp(17px, 4.5vw, 24px); }
.status-screen p   {
  font-size: var(--text-sm);
  max-width: min(300px, 90vw);
}

/* ================================================================
   21. SAFE AREA — notch / home-indicator / landscape
   ================================================================ */
@supports (padding: max(0px)) {
  .land-topbar,
  .app-header,
  .search-hero,
  .agent-hero {
    padding-left:  max(clamp(14px, 4vw, 24px), env(safe-area-inset-left));
    padding-right: max(clamp(14px, 4vw, 24px), env(safe-area-inset-right));
  }

  .listings-section,
  .dash-body,
  .modal-overlay {
    padding-bottom: max(clamp(16px, 4vw, 24px), env(safe-area-inset-bottom));
  }

  #toast.toast {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }

  #landing {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* ================================================================
   22. FOCUS VISIBILITY — WCAG AA keyboard accessibility
   ================================================================ */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ================================================================
   23. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

/* ================================================================
   24. LARGE DESKTOP CENTERING — 1440px+
   ================================================================ */
@media (min-width: 1440px) {
  .search-hero > * {
    max-width: 1280px;
    margin-inline: auto;
  }
  .agent-hero > * {
    max-width: 1280px;
    margin-inline: auto;
  }
  .listings-section,
  .dash-body {
    max-width: 1400px;
    margin-inline: auto;
  }
}

/* ================================================================
   25. SECTION HDR + RESULT COUNT
   ================================================================ */
.section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(12px, 3vw, 20px);
  flex-wrap: wrap;
}

/* ================================================================
   26. PLAN COMPARISON TABLE
   ================================================================ */
.plan-compare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pct-head, .pct-row { min-width: 320px; }
.pct-head > div,
.pct-row > div {
  font-size: var(--text-xs);
  padding: 7px 5px;
}
@media (min-width: 480px) {
  .pct-head > div,
  .pct-row > div { font-size: 10px; padding: 7px 6px; }
}

/* ================================================================
   27. SCREEN NAV
   ================================================================ */
.screen-nav {
  padding: clamp(10px, 2.5vw, 16px) clamp(14px, 4vw, 24px);
}
.screen-nav-title { font-size: clamp(13px, 3vw, 16px); }

/* ================================================================
   28. HEALTH / RISK PANELS
   ================================================================ */
.health-panel {
  border-radius: clamp(10px, 2.5vw, 16px);
  padding: clamp(12px, 3vw, 16px);
}
.h-item  { padding: clamp(8px, 2vw, 10px) 0; font-size: var(--text-sm); }
.risk-item { font-size: var(--text-sm); flex-wrap: wrap; gap: 6px; }

/* ================================================================
   29. ALERT ITEMS
   ================================================================ */
.alert-item    { flex-wrap: wrap; gap: 10px; }
.alert-icon    { font-size: clamp(16px, 4vw, 20px); flex-shrink: 0; }
.alert-body h4 { font-size: var(--text-sm); }
.alert-body p  { font-size: var(--text-xs); }
.alert-actions { flex-shrink: 0; flex-wrap: wrap; gap: 4px; }

@media (min-width: 480px) {
  .alert-item { flex-wrap: nowrap; }
}

/* ================================================================
   30. PANEL CHROME
   ================================================================ */
.panel { border-radius: clamp(10px, 2.5vw, 14px); }
.ph {
  padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px);
}
.ph h3 { font-size: clamp(14px, 3.2vw, 18px); }
.ph p  { font-size: var(--text-xs); }
.pb    { padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px); }

/* ================================================================
   31. PRINT
   ================================================================ */
@media print {
  .nav-drawer,
  .nav-overlay,
  .hamburger-btn,
  .toast,
  .modal-overlay { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
}