/* ================================================================
   TISAKENYUMBA — RESPONSIVE SYSTEM  v38
   State-of-the-Art · Mobile-First · Token-Driven · WCAG AA
   ─────────────────────────────────────────────────────────────────
   Breakpoint map
     xs:   320px   tiny phones (iPhone SE, Galaxy A series)
     sm:   480px   standard mobile
     md:   768px   tablet / large-phone landscape
     lg:  1024px   laptop
     xl:  1280px   desktop
    2xl:  1440px   large / ultrawide desktop
   ─────────────────────────────────────────────────────────────────
   Token usage: ALL values reference Layer 3 component tokens.
   Zero hardcoded numbers in this file.
   ================================================================ */


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


/* ================================================================
   §1  FLUID TYPOGRAPHY HIERARCHY
   All headings use clamp()-based tokens — no breakpoint jumps.
   ================================================================ */
body       { font-size: var(--text-base); line-height: 1.6; }

h1,
.land-title    { font-size: var(--text-3xl); line-height: 0.94;  letter-spacing: clamp(-1px, -0.5vw, -2px); }
h2,
.auth-title    { font-size: var(--text-xl);  line-height: 1.1; }
h3,
.ph h3         { font-size: var(--text-lg);  line-height: 1.25; }
h4,
.card-body h4  { font-size: var(--text-md);  line-height: 1.3; }

.td-mono,
.sc .sc-lbl,
thead th       { font-size: var(--text-xs); }


/* ================================================================
   §2  12-COLUMN GRID SYSTEM
   Macro layout utility. Use with .col-N classes.
   ================================================================ */
.grid-12 {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   clamp(12px, 2vw, 20px);
  width:                 100%;
}

/* Full-width default — span all 12 cols on mobile */
[class*="col-"] { grid-column: span 12; }

/* sm: 6-col halves */
@media (min-width: 480px) {
  .col-sm-6  { grid-column: span 6; }
}

/* md: standard column spans */
@media (min-width: 768px) {
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-6  { grid-column: span 6; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-12 { grid-column: span 12; }
}

/* lg: desktop spans */
@media (min-width: 1024px) {
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-12 { grid-column: span 12; }
}


/* ================================================================
   §3  CONTAINER SYSTEM
   Fluid padding via clamp() — no discrete jumps.
   ================================================================ */
.container,
.content-wrap {
  width:         100%;
  max-width:     var(--container-max);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}

/* Auto-fit fluid grid utility */
.auto-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:                   clamp(12px, 2.5vw, 20px);
}

/* Inset (slightly narrower — for text-heavy sections) */
.container-inset {
  width:         100%;
  max-width:     min(860px, 96vw);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}


/* ================================================================
   §4  LANDING SCREEN
   ================================================================ */
#landing {
  flex-direction: column;
  overflow-x:     hidden;
  min-height:     100dvh;
}

/* — Topbar — */
.land-topbar {
  padding:   clamp(8px, 2vw, 12px) var(--container-px);
  position:  sticky;
  top:       0;
  z-index:   var(--z-topbar);
}

.land-topbar-logo img {
  height: clamp(56px, 12vw, 100px);
  width:  auto;
}

/* — Content width — fluid max via clamp */
.land-inner {
  position:      relative;
  z-index:       1;
  text-align:    center;
  width:         100%;
  /* Fluid: from full-width on tiny phones to 960px on widescreen */
  max-width:     clamp(320px, 90vw, 480px);
  margin:        0 auto;
  padding:       0 var(--container-px) var(--sp-8);
}

@media (min-width: 480px)  { .land-inner { max-width: min(540px,  92vw); } }
@media (min-width: 768px)  { .land-inner { max-width: min(680px,  90vw); } }
@media (min-width: 1024px) { .land-inner { max-width: min(900px,  88vw); padding-bottom: var(--sp-12); } }
@media (min-width: 1280px) { .land-inner { max-width: min(960px,  80vw); } }
@media (min-width: 1440px) { .land-inner { max-width: min(1000px, 72vw); } }

/* — Hero block — */
.land-hero-block {
  padding: clamp(24px, 6vw, 80px) 0 clamp(16px, 4vw, 56px);
}

.land-sub {
  font-size:     var(--text-sm);
  margin-bottom: var(--sp-4);
}

.land-free-badge {
  font-size:     var(--text-xs);
  padding:       var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-8);
}

/* — Role cards grid — */
.role-grid {
  display:               grid;
  grid-template-columns: 1fr;           /* xs: 1-col on <360 */
  gap:                   var(--sp-2);
  margin-bottom:         var(--sp-6);
}

/* 2-col from 360px (fits Galaxy A / iPhone SE in portrait) */
@media (min-width: 360px) {
  .role-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(10px, 3vw, 20px);
  }
}

@media (min-width: 768px) {
  .role-grid         { gap: clamp(14px, 2.5vw, 22px); }
  .role-card         { padding: clamp(24px, 4vw, 36px) clamp(16px, 3vw, 24px) clamp(18px, 3.5vw, 28px); border-radius: var(--r-xl); }
  .role-card h3      { font-size: clamp(15px, 3vw, 19px); }
  .role-card p       { font-size: var(--text-xs); }
}

@media (min-width: 1024px) {
  .role-grid { gap: clamp(16px, 2vw, 22px); }
}


/* ================================================================
   §5  PRICING SECTION
   ================================================================ */
.pricing-cols {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}

@media (min-width: 480px) {
  .pricing-cols  { flex-direction: row; }
}

@media (min-width: 768px) {
  .pricing-cols       { gap: var(--sp-4); }
  .pricing-col        { padding: clamp(20px, 3vw, 28px) clamp(16px, 2.5vw, 22px); border-radius: var(--r-lg); }
  .pricing-tier-price { font-size: clamp(24px, 4vw, 28px); }
}

@media (min-width: 1024px) {
  .pricing-cols       { gap: clamp(16px, 2.5vw, 22px); }
  .pricing-tier-name  { font-size: clamp(16px, 2.5vw, 20px); }
  .pricing-tier-price { font-size: clamp(28px, 4vw, 34px); }
}


/* ================================================================
   §6  AUTH SCREENS
   ================================================================ */
#tenant-auth,
#agent-auth {
  padding:         clamp(20px, 5vw, 40px) var(--container-px);
  align-items:     center;
  justify-content: center;
  min-height:      100dvh;
}

.auth-box {
  width:     100%;
  max-width: clamp(320px, 92vw, 440px);
}

.auth-logo-wrap img {
  width: clamp(100px, 28vw, 140px);
}

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

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


/* ================================================================
   §7  APP HEADER
   ================================================================ */
.app-header {
  padding:     clamp(8px, 2vw, 12px) var(--container-px);
  min-height:  var(--topbar-h);
  width:       100%;
  /* Prevent content shift on scroll */
  will-change: transform;
}

.nav-logo-img {
  height:     clamp(38px, 8vw, 70px);
  width:      auto;
  max-width:  260px;
  object-fit: contain;
}

.hdr-right { gap: clamp(var(--sp-2), 1.5vw, var(--sp-3)); }

.user-pill {
  font-size: var(--text-xs);
  padding:   5px 10px 5px 5px;
}

@media (min-width: 480px) { .user-pill { font-size: var(--text-sm); } }


/* ================================================================
   §8  SEARCH / TENANT SCREEN
   ================================================================ */
.search-hero {
  padding: clamp(14px, 3vw, 24px) var(--container-px) clamp(12px, 2.5vw, 18px);
}

.hero-top h2 {
  font-size: clamp(18px, 4.5vw, 30px);
}

.hero-select {
  font-size: var(--text-base);
  padding:   clamp(10px, 2.5vw, 12px) 14px;
}

/* Filter: 2-col mobile → 4-col tablet */
.filter-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(6px, 1.5vw, 10px);
}

@media (min-width: 768px) {
  .filter-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:                   clamp(8px, 1.5vw, 12px);
  }
}

@media (min-width: 1024px) {
  .filter-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .hero-top,
  .search-actions {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
    padding:      0;
  }
}


/* ================================================================
   §9  LISTINGS SECTION — FLUID RESPONSIVE GRID
   The core content grid. Goes from 1→2→3→4 columns fluidly.
   ================================================================ */
.listings-section {
  padding: clamp(12px, 3vw, 24px) var(--container-px);
  flex:    1;
}

/* Auto-fit grid: naturally reflows without explicit breakpoints */
#listings-grid {
  display:               grid;
  /* 1 col on xs, 2 cols when 2×240px fits, etc. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 44vw, 320px), 1fr));
  gap:                   clamp(12px, 2.5vw, 20px);
}

/* Override: force exact columns at known breakpoints */
@media (max-width: 479px) {
  #listings-grid { grid-template-columns: 1fr; }
}

@media (min-width: 480px) {
  #listings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  #listings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(16px, 2vw, 22px);
  }
  .listings-section {
    max-width: var(--container-max);
    margin:    0 auto;
    width:     100%;
  }
  .section-hdr { max-width: var(--container-max); }
}

@media (min-width: 1280px) {
  #listings-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(16px, 1.5vw, 22px);
  }
}

@media (min-width: 1440px) {
  #listings-grid { gap: clamp(18px, 1.5vw, 24px); }
}


/* ================================================================
   §10  LISTING CARDS
   ================================================================ */
.listing-card {
  border-radius: clamp(14px, 3vw, 20px);
  /* Prevent layout shift during hover animation */
  will-change:   transform;
  /* Promote to GPU layer for smooth 60fps hover */
  transform:     translateZ(0);
}

/* Aspect ratio — proportional across all screen widths */
.card-img-v2 {
  aspect-ratio: 16 / 10;
  min-height:   unset;
}

/* Tiny screens — taller aspect to show image content */
@media (max-width: 359px) {
  .card-img-v2 { aspect-ratio: 4 / 3; }
}

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

.card-body h4 {
  font-size: clamp(13px, 3vw, 16px);
}

/* Action buttons: flex-fill on mobile, natural width on larger */
.card-actions {
  display:   flex;
  gap:       clamp(4px, 1vw, 8px);
  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:         clamp(9px, 2.5vw, 11px) clamp(6px, 2vw, 12px);
}

@media (min-width: 768px) {
  .card-actions .wa-btn,
  .card-actions .view-btn { font-size: var(--text-sm); }
}

.tag-row { flex-wrap: wrap; gap: clamp(3px, 1vw, 5px); }
.tag     { font-size: var(--text-xs); padding: 3px 7px; }


/* ================================================================
   §11  PILLS / CATEGORY FILTER BAR
   ================================================================ */
.pills-bar {
  padding:                    var(--sp-3) var(--container-px);
  gap:                        clamp(4px, 1vw, 8px);
  flex-wrap:                  nowrap;
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
  /* Smooth momentum scroll */
  scroll-snap-type:           x mandatory;
  /* Prevent snap area from collapsing */
  scroll-padding-left:        var(--container-px);
}
.pills-bar::-webkit-scrollbar { display: none; }
.pills-bar > *                { scroll-snap-align: start; }

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


/* ================================================================
   §12  AGENT DASHBOARD
   ================================================================ */
.agent-hero {
  padding: clamp(16px, 3.5vw, 32px) var(--container-px) clamp(12px, 2.5vw, 24px);
}

.agent-hero h2 { font-size: clamp(18px, 5vw, 26px); }

/* Stats — always 3 cols, scale text inside */
.stats-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(6px, 2vw, 12px);
}

.stat-card {
  padding: clamp(10px, 2.5vw, 16px) clamp(6px, 1.5vw, 12px);
}

.stat-card .num { font-size: clamp(20px, 5vw, 28px); }
.stat-card .lbl { font-size: clamp(8px, 1.5vw, 10px); }

@media (min-width: 1024px) {
  .stats-row { max-width: 600px; }
}

/* Sub banner */
.sub-banner {
  margin:        clamp(10px, 2.5vw, 16px) var(--container-px) 0;
  border-radius: clamp(12px, 3vw, 16px);
  flex-wrap:     wrap;
  gap:           var(--sp-3);
}

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

/* Dash body */
.dash-body {
  padding: clamp(12px, 3vw, 24px) var(--container-px);
}

@media (min-width: 1024px) {
  .dash-body {
    padding:   clamp(16px, 3vw, 32px) var(--container-px);
    max-width: var(--container-max);
    margin:    0 auto;
    width:     100%;
  }
}

/* Agent own listings */
#agent-listings-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(10px, 2vw, 14px);
}

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


/* ================================================================
   §13  SPARKLINES & CHARTS
   ================================================================ */
.sparkline-wrap { margin-top: var(--sp-3); }

.sparkline-bars,
.rev-bars { height: clamp(24px, 5vw, 40px); }

.rev-lbls span { font-size: var(--text-xs); }


/* ================================================================
   §14  PANELS & HEALTH ITEMS
   ================================================================ */
.health-panel {
  border-radius: clamp(12px, 3vw, 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: var(--sp-2); }

.panel         { border-radius: clamp(12px, 3vw, 14px); }
.ph            { padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px); }
.ph h3         { font-size: clamp(15px, 3.5vw, 18px); }
.ph p          { font-size: var(--text-xs); }
.pb            { padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px); }


/* ================================================================
   §15  MODALS — bottom-sheet on mobile, centered card on tablet+
   ================================================================ */
.modal-overlay {
  padding:      var(--sp-4);
  align-items:  flex-end;   /* bottom sheet on small screens */
}

.modal-box {
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  max-height:    92dvh;      /* dvh respects mobile browser chrome */
  width:         100%;
  max-width:     min(480px, 96vw);
  /* Smooth modal entrance */
  animation:     modalIn var(--dur-mid) var(--ease-spring) both;
}

/* Centered card from 480px+ */
@media (min-width: 480px) {
  .modal-overlay {
    align-items: center;
    padding:     var(--sp-5);
  }
  .modal-box {
    border-radius: clamp(16px, 3vw, 20px);
  }
}

@media (min-width: 768px) {
  .modal-box { max-width: min(520px, 96vw); }
}

.plan-modal .modal-box { max-width: min(600px, 96vw); }

/* Admin modals */
.mh h3 { font-size: clamp(16px, 4vw, 20px); }
.mb    { padding: clamp(14px, 4vw, 20px); }
.mfg   { margin-bottom: clamp(10px, 3vw, 14px); }


/* ================================================================
   §16  FORMS — stacked mobile, grouped desktop
   ================================================================ */

/* Inputs prevent iOS zoom with font-size: 16px (set in base.css) */
.fg input,
.fg select,
.mfg input,
.mfg select,
.mfg textarea,
.hero-select {
  font-size:     16px;
  padding:       clamp(10px, 2.5vw, 13px) 14px;
  border-radius: clamp(10px, 2vw, 13px);
  /* Height token ensures touch target compliance */
  min-height:    var(--btn-min-h);
}

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

/* Two-column form row: single on mobile, double on 480px+ */
.form-row-2,
.mfg-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0;
}

@media (min-width: 480px) {
  .form-row-2,
  .mfg-row {
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(8px, 2vw, 14px);
  }
}

/* Textarea */
.mfg textarea,
#wa-msg { min-height: 80px; resize: vertical; }

@media (min-width: 768px) {
  #wa-msg { min-height: 120px; }
}

/* Select */
.f-sel { width: 100%; }
@media (min-width: 480px) { .f-sel { width: auto; } }


/* ================================================================
   §17  BUTTONS — WCAG 2.5.5 touch target compliance
   ================================================================ */
.pri-btn {
  padding:       clamp(12px, 3vw, 14px);
  font-size:     var(--text-base);
  min-height:    var(--btn-min-h);
  border-radius: clamp(11px, 2.5vw, 13px);
  /* GPU layer for smooth hover */
  will-change:   transform, box-shadow;
}

.back-btn,
.nav-back-btn {
  font-size:     var(--text-xs);
  padding:       clamp(6px, 1.5vw, 9px) clamp(11px, 2.5vw, 15px);
  min-height:    var(--btn-min-h);
  margin-bottom: clamp(16px, 4vw, 28px);
  touch-action:  manipulation;
}

/* Minimum touch targets — non-negotiable */
.tb,
.ab,
.hamburger-btn,
.nd-close,
.theme-toggle,
.tab-btn,
.how-tab,
.back-btn,
.nav-back-btn,
.pri-btn,
.search-go,
.upgrade-btn,
.add-listing-btn {
  min-height:   var(--btn-min-h);
  touch-action: manipulation;
}

/* Dense data tables: relaxed */
.ab { min-height: 32px; }


/* ================================================================
   §18  HOW IT WORKS SECTION
   ================================================================ */
.how-section {
  padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 40px);
}

.how-title {
  font-size: clamp(20px, 5vw, 28px);
}

.how-step {
  padding: clamp(12px, 3vw, 20px);
}

.how-text strong { font-size: clamp(13px, 3vw, 15px); }
.how-text p      { font-size: var(--text-sm); }

/* Desktop: horizontal row layout */
@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:            var(--sp-3);
    padding:        clamp(20px, 3vw, 28px) clamp(14px, 2vw, 20px);
    border-radius:  var(--r-lg);
  }

  .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; }
  .how-num  { margin-bottom: var(--sp-1); }
}


/* ================================================================
   §19  PLAN CARDS
   ================================================================ */
.plan-cards {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}

@media (min-width: 480px) {
  .plan-cards {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(10px, 2vw, 14px);
  }
}

@media (min-width: 1024px) {
  .plan-cards {
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(12px, 2vw, 18px);
  }
}


/* ================================================================
   §20  ADMIN — TOPBAR
   ================================================================ */
.topbar {
  padding:    var(--sp-3) var(--container-px);
  flex-wrap:  wrap;
  gap:        var(--sp-2);
  min-height: var(--topbar-h);
}

.topbar-l h2 { font-size: clamp(16px, 4vw, 24px); }
.topbar-l p  { font-size: var(--text-xs); }

.topbar-r {
  display:                    flex;
  align-items:                center;
  gap:                        clamp(4px, 1.5vw, 8px);
  flex-wrap:                  nowrap;
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
  padding-bottom:             2px;
}
.topbar-r::-webkit-scrollbar { display: none; }

/* Hide secondary actions on tiny screens */
@media (max-width: 479px) {
  .topbar-r .tb.ghost  { display: none; }
  .topbar-r .sb-status { display: none; }
}

@media (min-width: 480px) { .topbar-r .tb.ghost { display: flex; } }

@media (min-width: 768px) {
  .topbar-r .sb-status { display: flex; }
  .topbar    { flex-wrap: nowrap; padding: var(--sp-3) var(--sp-6); }
  .topbar-r  { overflow-x: visible; }
}

/* Wide-screen: constrain topbar content */
@media (min-width: 1440px) {
  .topbar {
    max-width:    var(--content-max);
    margin-left:  auto;
    margin-right: auto;
  }
}


/* ================================================================
   §21  ADMIN — STAT GRID
   ================================================================ */
.stat-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;   /* mobile: 2 */
  gap:                   clamp(8px, 2vw, 12px);
  margin-bottom:         clamp(12px, 2.5vw, 18px);
}

@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

.sc .sc-val { font-size: clamp(22px, 5vw, 30px); }
.sc .sc-lbl { font-size: var(--text-xs); }


/* ================================================================
   §22  ADMIN — DASHBOARD GRID
   ================================================================ */
.dash-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(10px, 2vw, 14px);
  margin-bottom:         clamp(10px, 2vw, 14px);
}

@media (min-width: 768px) {
  .dash-grid      { grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 16px); }
  .dash-grid.wide { grid-template-columns: 2fr 1fr; }
}


/* ================================================================
   §23  ADMIN — TABLES (horizontal scroll on mobile)
   ================================================================ */
.tbl-wrap {
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  border-radius:              var(--r);
  /* Contain paint for performance */
  contain:                    layout paint;
}

table         { min-width: 600px; border-collapse: collapse; width: 100%; }
thead th      { font-size: var(--text-xs);  padding: 10px; white-space: nowrap; }
tbody td      { font-size: var(--text-sm);  padding: 9px 10px; }

@media (min-width: 768px) {
  table         { min-width: unset; }
  thead th      { padding: 10px 12px; }
  tbody td      { padding: 10px 12px; }
}


/* ================================================================
   §24  ADMIN — SEARCH BAR
   ================================================================ */
.search-bar {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  margin-bottom:  clamp(12px, 2.5vw, 16px);
}

@media (min-width: 480px) {
  .search-bar {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    center;
  }
  .si-wrap {
    flex:      1;
    min-width: 180px;
    max-width: 280px;
  }
}

@media (min-width: 768px) {
  .search-bar { flex-wrap: nowrap; }
  .si-wrap    { max-width: 300px; }
}


/* ================================================================
   §25  ADMIN — NAV DRAWER
   ================================================================ */
.nav-drawer { width: var(--nav-w); }

.ni {
  padding:    clamp(9px, 2.5vw, 11px) 12px;
  min-height: var(--btn-min-h);
}


/* ================================================================
   §26  ADMIN — CONTENT AREA
   ================================================================ */
.content {
  padding: clamp(14px, 3vw, 22px) clamp(14px, 4vw, 22px);
}

@media (min-width: 1280px) {
  .content {
    max-width: var(--content-max);
    margin:    0 auto;
  }
}


/* ================================================================
   §27  WA CENTRE SCREEN
   ================================================================ */
#tab-wa-centre .dash-grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  #tab-wa-centre .dash-grid { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   §28  ALERT ITEMS
   ================================================================ */
.alert-item {
  flex-wrap: wrap;
  gap:       clamp(8px, 2vw, 12px);
}

.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: var(--sp-1); }

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


/* ================================================================
   §29  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:   clamp(5px, 1.5vw, 8px);
}


/* ================================================================
   §30  EXPIRY BARS
   ================================================================ */
.exp-name {
  width:     clamp(90px, 22vw, 140px);
  font-size: var(--text-sm);
}

.exp-days { font-size: var(--text-xs); width: 40px; }


/* ================================================================
   §31  SCREEN NAV
   ================================================================ */
.screen-nav {
  padding: clamp(10px, 2.5vw, 14px) var(--container-px);
}

.screen-nav-title { font-size: clamp(13px, 3.5vw, 16px); }


/* ================================================================
   §32  TOAST
   ================================================================ */
.toast {
  max-width: min(320px, calc(100vw - var(--sp-8)));
  bottom:    clamp(14px, 3vw, 24px);
  font-size: var(--text-sm);
  padding:   clamp(9px, 2.5vw, 12px) clamp(16px, 4vw, 22px);
}

#toast.toast {
  right:  var(--container-px);
  bottom: var(--sp-6);
}


/* ================================================================
   §33  STATUS / EMPTY SCREENS
   ================================================================ */
.status-screen {
  padding:    clamp(28px, 8vw, 48px) var(--container-px);
  min-height: 50vh;
}

.status-screen .si { font-size: clamp(44px, 12vw, 56px); }
.status-screen h3  { font-size: clamp(18px, 5vw, 24px); }
.status-screen p   { font-size: var(--text-sm); max-width: min(320px, 90vw); }

.empty-state       { padding: clamp(28px, 8vw, 48px) var(--container-px); }
.empty-state-icon  { width: clamp(48px, 14vw, 64px); height: clamp(48px, 14vw, 64px); }
.empty-state h4    { font-size: clamp(16px, 4vw, 18px); }
.empty-state p     { font-size: var(--text-sm); }


/* ================================================================
   §34  ADMIN LOGIN BOX
   ================================================================ */
.login-box {
  padding:       clamp(24px, 6vw, 36px);
  max-width:     min(360px, calc(100vw - var(--sp-8)));
  border-radius: clamp(16px, 4vw, 20px);
}

.login-logo     { font-size: clamp(22px, 6vw, 28px); }
.login-logo img { height: clamp(60px, 15vw, 100px) !important; }


/* ================================================================
   §35  BADGES & TAGS
   ================================================================ */
.badge   { padding: var(--sp-1) clamp(8px, 2vw, 12px); font-size: var(--text-xs); }
.meta-badge { font-size: var(--text-xs); }

.card-meta-row {
  display:       flex;
  flex-wrap:     wrap;
  gap:           clamp(4px, 1vw, 6px);
  margin-bottom: var(--sp-2);
}


/* ================================================================
   §36  AGENT LISTINGS LIST (tab view)
   ================================================================ */
.listings-list {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   clamp(10px, 2vw, 14px);
}

@media (min-width: 768px)  { .listings-list { grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 16px); } }
@media (min-width: 1024px) { .listings-list { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 18px); } }


/* ================================================================
   §37  WA PREVIEW
   ================================================================ */
.wa-preview { padding: clamp(10px, 3vw, 14px); }

.wa-bubble {
  font-size:     var(--text-sm);
  padding:       clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 14px);
  border-radius: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) 0;
}


/* ================================================================
   §38  OFFLINE BAR
   ================================================================ */
#offline-bar { font-size: var(--text-xs); padding: var(--sp-2) var(--container-px); }


/* ================================================================
   §39  HAMBURGER — always rendered
   ================================================================ */
.hamburger-btn { display: flex !important; flex-shrink: 0; }


/* ================================================================
   §40  LARGE DESKTOP CENTERING — 1440px+
   ================================================================ */
@media (min-width: 1440px) {
  .search-hero > * {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
  }

  .agent-hero > * {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
  }
}


/* ================================================================
   §41  SAFE AREA — notch / Dynamic Island / landscape insets
   ================================================================ */
@supports (padding: max(0px)) {
  .topbar,
  .land-topbar,
  .app-header,
  .screen-nav {
    padding-left:  max(var(--container-px), env(safe-area-inset-left));
    padding-right: max(var(--container-px), env(safe-area-inset-right));
  }

  .content,
  .listings-section,
  .dash-body {
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }

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

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


/* ================================================================
   §42  ACCESSIBILITY — FOCUS, MOTION, CONTRAST
   ================================================================ */

/* Keyboard focus ring — visible & consistent */
:focus-visible {
  outline:        2px solid var(--sky);
  outline-offset: var(--space-1);
  box-shadow:     var(--focus-ring);
  border-radius:  var(--r-sm);
}

/* Remove outline for pointer users who don't need it */
:focus:not(:focus-visible) { outline: none; }

/* Reduced motion — kill all animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}


/* ================================================================
   §43  PERFORMANCE — CONTAIN & WILL-CHANGE HINTS
   ================================================================ */

/* Isolate repaints in frequently-updated regions */
.app-header,
.topbar,
.nav-drawer {
  contain: layout style;
}

/* Promote stacking contexts for overlay elements */
.modal-overlay,
.nav-overlay {
  will-change: opacity;
}


/* ================================================================
   §44  PRINT STYLES
   ================================================================ */
@media print {
  .nav-drawer,
  .nav-overlay,
  .topbar-r,
  .hamburger-btn,
  .toast,
  .modal-overlay,
  .pills-bar,
  .search-actions { display: none !important; }

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

  .listing-card,
  .panel { break-inside: avoid; }
}