/* =====================================================================
   Choice Properties — cp-design.css
   Unified design system. Tokens + components, both themes.
   Loaded by every portal (admin, landlord, tenant) and every public page
   (paired with cp-marketing.css). Inline SVG icon sprite is in markup.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Accessibility — honor user motion preferences (Phase 1)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .skeleton,
  .toast,
  .ptr { animation: none !important; }
  .action-card,
  .btn,
  .fab,
  .tab,
  .nav-item,
  .sheet,
  .sheet-backdrop,
  .segment button { transition: none !important; }
}

:root {
  /* Surfaces */
  --bg:        #0a0f1e;
  --surface:   #111827;
  --surface-2: #1a2235;
  --surface-3: #1e2d45;
  --surface-overlay: rgba(10,15,30,.72);

  /* Borders */
  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);

  /* Text */
  --text:    #f1f5f9;
  --muted:   #94a3b8;
  --muted-2: #64748b;

  /* Brand & accent */
  --brand:      #006aff;
  --brand-600:  #0058d6;
  --brand-glow: rgba(0,106,255,.18);
  /* Gold — single brand value across light/dark surfaces. Mirrored as
     --m-gold in cp-marketing.css; keep the two in sync. */
  --gold:       #d4a017;
  --gold-glow:  rgba(212,160,23,.20);

  /* Semantic */
  --success: #22c55e; --success-bg: rgba(34,197,94,.15);  --success-strong: #16a34a;
  --warning: #f59e0b; --warning-bg: rgba(245,158,11,.15); --warning-strong: #d97706;
  --danger:  #ef4444; --danger-bg:  rgba(239,68,68,.15);  --danger-strong:  #dc2626;
  --info:    #3b82f6; --info-bg:    rgba(59,130,246,.15);
  --purple:  #a855f7; --purple-bg:  rgba(168,85,247,.15);

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Touch */
  --tap: 44px;

  /* Layout */
  --shell-max: 1280px;
  --sidebar-w: 240px;
  --tabbar-h:  64px;
  --appbar-h:  56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

  /* Shadows (subtle on dark) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px var(--border);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px var(--border);
  --shadow-glow: 0 0 0 3px var(--brand-glow);

  /* Z */
  --z-appbar: 40; --z-tabs: 50; --z-fab: 55; --z-sheet: 60; --z-toast: 70;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ===================================================================== */
/* Reset & base                                                           */
/* ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; min-height:100vh;
  /* Prevent iOS overscroll bounce showing white */
  overscroll-behavior-y:none;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Inline SVG icon sizing */
.i{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:16px;height:16px}
.i-lg{width:24px;height:24px}

/* ===================================================================== */
/* App shell — mobile-first                                               */
/* ===================================================================== */
.app{
  min-height:100vh;
  padding-top:calc(var(--appbar-h) + var(--safe-top));
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
}

.appbar{
  position:fixed; top:0; left:0; right:0;
  height:calc(var(--appbar-h) + var(--safe-top));
  padding:var(--safe-top) var(--sp-3) 0;
  background:var(--surface-overlay);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:var(--sp-2);
  z-index:var(--z-appbar);
}
.appbar-title{
  flex:1; min-width:0;
  font-weight:700; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar-sub{font-size:.7rem;color:var(--muted);font-weight:500;margin-top:1px}
.appbar .btn-icon{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.appbar .btn-icon:hover{background:var(--surface-2)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

.app-content{
  padding:var(--sp-4);
  max-width:var(--shell-max);
  margin:0 auto;
  display:flex; flex-direction:column; gap:var(--sp-4);
}

/* ===================================================================== */
/* Bottom tab bar (mobile)                                                */
/* ===================================================================== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--surface-overlay);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(5,1fr);
  z-index:var(--z-tabs);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px; padding:6px 4px;
  color:var(--muted-2); font-size:.65rem; font-weight:600;
  text-decoration:none;
  transition:color .15s var(--ease);
}
.tab .i{width:22px;height:22px}
.tab.active{color:var(--brand)}
.tab.active .i{stroke:var(--brand)}
.tab:hover{color:var(--text)}

/* ===================================================================== */
/* Sidebar (tablet+ replaces tab bar at >=768px)                          */
/* ===================================================================== */
.sidebar{display:none}

@media (min-width:768px){
  .tabbar{display:none}
  .sidebar{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
    background:linear-gradient(180deg,#0d1426,#0a0f1e);
    border-right:1px solid var(--border);
    padding:var(--sp-5) var(--sp-3);
    z-index:var(--z-tabs);
    overflow-y:auto;
  }
  .sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 var(--sp-2) var(--sp-5)}
  .sidebar-brand .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.95rem}
  .sidebar-brand .name{font-weight:700;font-size:.92rem}
  .sidebar-brand .sub{font-size:.66rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
  .nav-section{font-size:.62rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:var(--sp-4) var(--sp-3) var(--sp-2)}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px var(--sp-3);border-radius:var(--r-sm);color:var(--muted);font-size:.85rem;font-weight:500;transition:all .15s var(--ease)}
  .nav-item:hover{background:var(--surface-2);color:var(--text)}
  .nav-item.active{background:var(--brand-glow);color:var(--text)}
  .nav-item.active .i{stroke:var(--brand)}
  .sidebar-footer{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border)}

  .app{padding-left:var(--sidebar-w);padding-bottom:var(--sp-6)}
  .appbar{left:var(--sidebar-w)}
}

/* ===================================================================== */
/* Cards                                                                  */
/* ===================================================================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.card-header{
  padding:var(--sp-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.card-title{font-weight:700;font-size:.92rem}
.card-body{padding:var(--sp-4)}
.card-link{font-size:.78rem;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* ===================================================================== */
/* Action queue (the star of the home screen)                             */
/* ===================================================================== */
.action-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.action-card{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--brand);
  border-radius:var(--r-md);
  text-decoration:none; color:inherit;
  transition:transform .12s var(--ease), border-color .15s var(--ease);
}
.action-card:active{transform:scale(.98)}
.action-card.urgent{border-left-color:var(--danger)}
.action-card.warn{border-left-color:var(--warning)}
.action-card.info{border-left-color:var(--info)}
.action-card.success{border-left-color:var(--success)}
.action-card .ac-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-glow);color:var(--brand);
  flex-shrink:0;
}
.action-card.urgent .ac-icon{background:var(--danger-bg);color:var(--danger)}
.action-card.warn .ac-icon{background:var(--warning-bg);color:var(--warning)}
.action-card.info .ac-icon{background:var(--info-bg);color:var(--info)}
.action-card.success .ac-icon{background:var(--success-bg);color:var(--success)}
.action-card .ac-body{flex:1;min-width:0}
.action-card .ac-count{font-size:1.25rem;font-weight:800;line-height:1.1}
.action-card .ac-label{font-size:.78rem;color:var(--muted);margin-top:2px}
.action-card .ac-cta{font-size:.7rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;display:flex;align-items:center;gap:4px}

/* ===================================================================== */
/* KPI strip (horizontal scroll on mobile, grid on tablet+)               */
/* ===================================================================== */
.kpi-strip{
  display:flex; gap:var(--sp-3);
  overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 calc(var(--sp-4) * -1); padding:0 var(--sp-4) var(--sp-2);
  -ms-overflow-style:none; scrollbar-width:none;
}
.kpi-strip::-webkit-scrollbar{display:none}
.kpi-chip{
  flex:0 0 auto; min-width:130px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  scroll-snap-align:start;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:2px;
}
.kpi-chip .k-label{font-size:.65rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.kpi-chip .k-value{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.kpi-chip .k-value.is-zero{color:var(--muted-2);font-weight:600;opacity:.6}
.kpi-chip.brand .k-value.is-zero,
.kpi-chip.gold .k-value.is-zero,
.kpi-chip.warn .k-value.is-zero,
.kpi-chip.success .k-value.is-zero,
.kpi-chip.danger .k-value.is-zero{color:var(--muted-2)}
.chip[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi-chip .k-sub{font-size:.7rem;color:var(--muted)}
.kpi-chip.brand .k-value{color:var(--brand)}
.kpi-chip.gold .k-value{color:var(--gold)}
.kpi-chip.warn .k-value{color:var(--warning)}
.kpi-chip.success .k-value{color:var(--success)}
.kpi-chip.danger .k-value{color:var(--danger)}

@media (min-width:560px){
  .kpi-strip{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    overflow:visible; margin:0; padding:0;
  }
  .kpi-chip{min-width:0}
}

/* ===================================================================== */
/* List rows (swipe-aware)                                                */
/* ===================================================================== */
.list{display:flex;flex-direction:column;gap:var(--sp-2)}
.list-row{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md);
}
.list-row-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface);
  transition:transform .2s var(--ease);
  touch-action:pan-y;
  text-decoration:none; color:inherit;
}
.list-row .swipe-actions{
  position:absolute; top:0; bottom:0; display:flex; align-items:stretch; z-index:1;
}
.list-row .swipe-actions.left{left:0}
.list-row .swipe-actions.right{right:0}
.list-row .swipe-btn{
  display:flex;align-items:center;justify-content:center;
  min-width:80px; padding:0 var(--sp-3);
  font-weight:700; font-size:.78rem; color:#fff;
  border:0; cursor:pointer;
}
.swipe-btn.approve{background:var(--success-strong)}
.swipe-btn.deny{background:var(--danger-strong)}
.swipe-btn.review{background:var(--info)}

.row-avatar{
  width:40px;height:40px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--purple));
}
.row-body{flex:1;min-width:0}
.row-title{font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:.74rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta{font-size:.7rem;color:var(--muted-2);text-align:right;flex-shrink:0}

/* ===================================================================== */
/* Pills / badges                                                         */
/* ===================================================================== */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.4}
.pill-success{background:var(--success-bg);color:var(--success)}
.pill-warning{background:var(--warning-bg);color:var(--warning)}
.pill-danger {background:var(--danger-bg); color:var(--danger)}
.pill-info   {background:var(--info-bg);   color:var(--info)}
.pill-purple {background:var(--purple-bg); color:var(--purple)}
.pill-muted  {background:var(--surface-2); color:var(--muted)}

/* ===================================================================== */
/* Buttons                                                                */
/* ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--tap); padding:0 var(--sp-4);
  border-radius:var(--r-sm); font-weight:600; font-size:.85rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform .1s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600)}
.btn-gold{background:var(--gold);color:#0a0f1e}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:rgba(239,68,68,.3)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{min-height:32px;padding:0 12px;font-size:.78rem;border-radius:6px}
.btn-block{width:100%}

/* ===================================================================== */
/* Floating action button                                                 */
/* ===================================================================== */
.fab{
  position:fixed;
  right:var(--sp-4);
  bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));
  width:56px;height:56px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,106,255,.45);
  z-index:var(--z-fab);
  transition:transform .15s var(--ease);
}
.fab:active{transform:scale(.92)}
.fab:hover{background:var(--brand-600)}
@media (min-width:768px){.fab{bottom:var(--sp-6)}}

/* ===================================================================== */
/* Segmented control                                                      */
/* ===================================================================== */
.segment{
  display:flex; gap:4px; padding:4px;
  background:var(--surface-2); border-radius:var(--r-sm);
  overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
}
.segment::-webkit-scrollbar{display:none}
.segment button{
  flex:1; min-width:max-content;
  padding:8px 14px; border-radius:6px;
  font-size:.8rem; font-weight:600; color:var(--muted);
  white-space:nowrap;
  transition:all .15s var(--ease);
}
.segment button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.segment button:hover:not(.active){color:var(--text)}

/* ===================================================================== */
/* Search input                                                           */
/* ===================================================================== */
.search{
  position:relative;
}
.search input{
  width:100%; min-height:var(--tap);
  padding:0 var(--sp-3) 0 38px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text);
  outline:none; font-size:.88rem;
}
.search input:focus{border-color:var(--brand);box-shadow:var(--shadow-glow)}
.search .i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2);width:18px;height:18px}

/* ===================================================================== */
/* Bottom sheet                                                           */
/* ===================================================================== */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:var(--z-sheet);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease);
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--surface);
  border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
  z-index:calc(var(--z-sheet) + 1);
  max-height:90vh; overflow:hidden;
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
  padding-bottom:var(--safe-bottom);
}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:8px auto 4px}
.sheet-header{padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.sheet-title{font-weight:700;font-size:1rem}
.sheet-body{padding:var(--sp-4);overflow-y:auto;flex:1}
@media (min-width:768px){
  .sheet{left:auto;right:24px;bottom:24px;width:480px;max-height:80vh;border-radius:var(--r-lg);transform:translateY(120%)}
  .sheet.open{transform:translateY(0)}
}

/* ===================================================================== */
/* Skeleton loaders                                                       */
/* ===================================================================== */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--r-sm);
}
.sk-line{height:12px;margin:6px 0;border-radius:6px}
.sk-line.lg{height:18px}
.sk-line.sm{height:9px}
.sk-circle{width:40px;height:40px;border-radius:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===================================================================== */
/* Empty / error states                                                   */
/* ===================================================================== */
.empty{
  text-align:center;
  padding:clamp(40px, 6vw, 72px) var(--sp-4);
  color:var(--muted);
  position:relative;
  isolation:isolate;
}
/* Soft brand-glow halo behind the icon, using the existing brand-glow
   and gold-glow tokens — no new colors introduced. */
.empty::before{
  content:"";
  position:absolute;
  top:clamp(28px, 5vw, 56px);
  left:50%;
  width:160px;height:160px;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at center,
      var(--brand-glow) 0%,
      var(--gold-glow) 45%,
      transparent 70%);
  filter:blur(8px);
  opacity:.9;
  z-index:-1;
  pointer-events:none;
}
.empty .i{
  width:64px;height:64px;
  margin:0 auto var(--sp-4);
  color:var(--brand);
  opacity:.85;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
}
.empty h3{margin:0 0 6px;font-size:1.02rem;color:var(--text);font-weight:700;letter-spacing:-.005em}
.empty p{margin:0;font-size:.86rem;line-height:1.5;max-width:36ch;margin-left:auto;margin-right:auto}

/* ===================================================================== */
/* Toast                                                                  */
/* ===================================================================== */
.toast-stack{position:fixed;left:50%;top:calc(var(--appbar-h) + var(--safe-top) + 8px);transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-md);padding:10px 14px;font-size:.82rem;font-weight:500;
  box-shadow:var(--shadow-2);
  pointer-events:auto;
  animation:toastIn .25s var(--ease);
  display:flex;align-items:center;gap:8px;
  max-width:90vw;
}
.toast.success{border-color:var(--success)}
.toast.error  {border-color:var(--danger)}
.toast.warning{border-color:var(--warning)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ===================================================================== */
/* Activity feed                                                          */
/* ===================================================================== */
.activity-feed{display:flex;flex-direction:column}
.activity-row{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-top:1px solid var(--border);
}
.activity-row:first-child{border-top:0;padding-top:0}
.activity-row .dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--info-bg);color:var(--info);
}
.activity-row.success .dot{background:var(--success-bg);color:var(--success)}
.activity-row.warning .dot{background:var(--warning-bg);color:var(--warning)}
.activity-row.danger  .dot{background:var(--danger-bg);color:var(--danger)}
.activity-row .a-body{flex:1;min-width:0}
.activity-row .a-text{font-size:.85rem;color:var(--text)}
.activity-row .a-text strong{color:var(--text);font-weight:700}
.activity-row .a-meta{font-size:.7rem;color:var(--muted-2);margin-top:2px}

/* ===================================================================== */
/* Greeting strip                                                         */
/* ===================================================================== */
.greeting{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) 0 var(--sp-1);
}
.greeting .g-text h1{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.greeting .g-text p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.greeting .g-status{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ===================================================================== */
/* Pull-to-refresh indicator                                              */
/* ===================================================================== */
.ptr{position:fixed;top:calc(var(--appbar-h) + var(--safe-top));left:0;right:0;height:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.78rem;overflow:hidden;transition:height .15s var(--ease);z-index:30;pointer-events:none}
.ptr.active{height:48px}
.ptr .spinner{width:18px;height:18px;border:2px solid var(--border-strong);border-top-color:var(--brand);border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================================================================== */
/* Forms                                                                  */
/* ===================================================================== */
.form-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.form-help{font-size:.7rem;color:var(--muted-2)}
.form-input{
  width:100%; min-height:var(--tap);
  padding:10px 12px; font-size:.88rem; line-height:1.4;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text);
  outline:none; font-family:inherit;
}
.form-input:focus{border-color:var(--brand);box-shadow:var(--shadow-glow)}
textarea.form-input{min-height:80px;resize:vertical}
.form-check{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}
.form-check input{width:18px;height:18px;cursor:pointer;accent-color:var(--brand)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
@media (max-width:480px){.form-grid-2{grid-template-columns:1fr}}

/* ===================================================================== */
/* Filter chip row (small horizontal scroll of filter pills)              */
/* ===================================================================== */
.chip-row{display:flex;gap:8px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:2px;margin:0 calc(var(--sp-4) * -1);padding-left:var(--sp-4);padding-right:var(--sp-4)}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted); font-size:.78rem; font-weight:600;
  white-space:nowrap; cursor:pointer;
  transition:all .15s var(--ease);
}
.chip:hover{color:var(--text)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ===================================================================== */
/* Pagination                                                             */
/* ===================================================================== */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-3) 0;color:var(--muted);font-size:.82rem}
.pager .btn-sm{min-width:80px}

/* ===================================================================== */
/* Misc helpers                                                           */
/* ===================================================================== */
.row-flex{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.row-flex.between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.muted{color:var(--muted)}
.text-sm{font-size:.78rem}
.text-xs{font-size:.68rem}
.text-strong{font-weight:700}
.hide-mobile{display:none}
.show-mobile{display:initial}
@media (min-width:768px){.hide-mobile{display:initial}.show-mobile{display:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reduce motion respect */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =====================================================================
   Phase 2 additions — light theme tokens + auth shell + form components
   ===================================================================== */

/* ---------------------------------------------------------------------
   Light theme — overrides every color token used by the components above.
   Activated by <html data-theme="light"> on landlord, tenant, and auth
   pages. Admin pages omit the attribute and stay dark.
   --------------------------------------------------------------------- */
[data-theme="light"] {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --surface-overlay: rgba(255,255,255,.85);

  --border:        rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.16);

  --text:    #0a0f1e;
  --muted:   #475569;
  --muted-2: #64748b;

  --shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 0 0 1px var(--border);
  --shadow-2: 0 12px 32px rgba(15,23,42,.10), 0 0 0 1px var(--border);
}

/* Surface-specific overrides for the light theme.
   These are the few rules in the file that hard-code dark colors. */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #fafbfc, #ffffff);
}
[data-theme="light"] .btn-gold { color: #ffffff; }
[data-theme="light"] .toast { background: #ffffff; }
[data-theme="light"] .field-input,
[data-theme="light"] .field-select,
[data-theme="light"] .field-textarea,
[data-theme="light"] .form-input,
[data-theme="light"] .search input { background: #ffffff; }
[data-theme="light"] .dropzone { background: #fafbfc; }

/* ---------------------------------------------------------------------
   .auth-shell — centered card layout for login / register / lease-sign.
   Used with <body data-theme="light"> (or "dark") and NO chrome scripts.
   --------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
  background: var(--bg);
}
.auth-shell-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 44px 36px 36px;
  box-shadow: var(--shadow-2);
}
@media (max-width: 480px) {
  .auth-shell-card { padding: 36px 24px 28px; border-radius: var(--r-md); }
}
.auth-shell-brand { text-align: center; margin-bottom: 28px; }
.auth-shell-brand .name {
  font-size: 1.15rem; color: var(--gold);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
}
.auth-shell-brand .sub {
  font-size: .68rem; color: var(--muted-2);
  letter-spacing: .2em; text-transform: uppercase; margin-top: 4px;
}
.auth-shell-brand .divider {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(201,165,92,.4));
  margin: 14px auto 0;
}
.auth-shell-subtitle {
  font-size: .9rem; color: var(--muted);
  text-align: center; margin-bottom: 24px;
}
.auth-shell-foot {
  text-align: center; font-size: .68rem;
  color: var(--muted-2); margin-top: 24px;
}
.auth-shell-links {
  display: flex; justify-content: center; margin-top: 14px; gap: 14px;
}
.auth-shell-links a,
.auth-shell-links button {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .78rem; font-family: inherit;
  text-decoration: underline; padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
}
.auth-shell-links a:hover,
.auth-shell-links button:hover { color: var(--text); }

/* Auth alert (dismissable banners inside the auth-shell-card) */
.auth-alert {
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: .82rem; line-height: 1.5;
  margin-bottom: 16px; display: none;
}
.auth-alert.visible { display: block; }
.auth-alert.error   { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(239,68,68,.30); }
.auth-alert.success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(34,197,94,.30); }
.auth-alert.info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(59,130,246,.30); }

/* Initialising overlay (shown until JS deps are ready) */
.auth-init {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 20px 0;
  color: var(--muted-2); font-size: .8rem;
}
.auth-init .spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ---------------------------------------------------------------------
   Modern form-field components (.field / .field-label / .input).
   The .form-row / .form-input / .form-label classes above remain in
   place for older admin pages that still bind to them.
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }
.field-label {
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.field-input,
.field-select,
.field-textarea {
  width: 100%; min-height: var(--tap);
  padding: 12px 14px;
  font-size: 1rem; line-height: 1.4; /* 16px = no iOS zoom on focus */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-glow);
}
.field-textarea { min-height: 96px; resize: vertical; }
.field-input.has-suffix { padding-right: 48px; }
.field-input-wrap { position: relative; }
.field-suffix-btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2); background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease);
}
.field-suffix-btn:hover { color: var(--text); }
.field-help  { font-size: .72rem; color: var(--muted-2); margin-top: 2px; }
.field-error { font-size: .76rem; color: var(--danger);  margin-top: 4px; }

.fieldset {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.fieldset-title {
  font-size: .82rem; font-weight: 700;
  margin-bottom: var(--sp-2);
}

.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Submit button on auth pages — slightly taller, gold accent */
.btn-auth {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), #a8863c);
  color: #0a0f1e;
  border: none; border-radius: var(--r-sm);
  padding: 15px;
  font-weight: 700; font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; font-family: inherit;
  transition: opacity .2s var(--ease), transform .1s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-auth:hover:not(:disabled) { opacity: .88; }
.btn-auth:active:not(:disabled) { transform: scale(.98); }
.btn-auth:disabled { opacity: .45; cursor: not-allowed; }
.btn-auth .btn-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(10,15,30,.3);
  border-top-color: #0a0f1e;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn-auth.loading .btn-text    { display: none; }
.btn-auth.loading .btn-spinner { display: block; }

/* ---------------------------------------------------------------------
   .stepper — multi-step wizard indicator
   --------------------------------------------------------------------- */
.stepper {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }
.stepper-step {
  flex: 1 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
}
.stepper-step .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.stepper-step.active            { background: var(--brand-glow); color: var(--text); }
.stepper-step.active .num       { background: var(--brand); color: #fff; }
.stepper-step.done              { color: var(--success); }
.stepper-step.done .num         { background: var(--success); color: #fff; }

/* ---------------------------------------------------------------------
   .dropzone — file upload target
   --------------------------------------------------------------------- */
.dropzone {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: var(--sp-6);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.dropzone:hover,
.dropzone.dragover {
  border-color: var(--brand);
  background: var(--brand-glow);
  color: var(--text);
}
.dropzone .i { width: 32px; height: 32px; }
.dropzone-hint { font-size: .76rem; color: var(--muted-2); }

/* ─────────────────────────────────────────────────────────────────
   Bottom tab bar (Wave B) — landlord mobile primary nav
   Injected by cp-shell.js initBottomTabs(). Hidden on >=900px.
   ───────────────────────────────────────────────────────────────── */
.cp-bottom-tabs{
  position:fixed; left:0; right:0; bottom:0;
  z-index: var(--z-tabs, 50);
  display:none;
  height: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(17,24,39,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border, rgba(255,255,255,.07));
  box-shadow: 0 -6px 18px rgba(0,0,0,.30);
}
html[data-theme="light"] .cp-bottom-tabs,
body:not([data-theme="dark"]) .cp-bottom-tabs{
  background: rgba(255,255,255,0.96);
  border-top: 1px solid #e4e8ef;
  box-shadow: 0 -6px 18px rgba(15,23,42,.06);
}
.cp-bottom-tabs .cp-bt-item{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  text-decoration:none;
  color: var(--muted-2, #64748b);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 4px 6px;
  min-height: var(--tap, 44px);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.cp-bottom-tabs .cp-bt-item:hover{ color: var(--text, #1f2937); }
.cp-bottom-tabs .cp-bt-item.active{ color: var(--brand, #006aff); }
html[data-theme="light"] .cp-bottom-tabs .cp-bt-item,
body:not([data-theme="dark"]) .cp-bottom-tabs .cp-bt-item{ color:#6b7280; }
html[data-theme="light"] .cp-bottom-tabs .cp-bt-item.active,
body:not([data-theme="dark"]) .cp-bottom-tabs .cp-bt-item.active{ color:#006aff; }
.cp-bottom-tabs .cp-bt-icon{
  width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
}
.cp-bottom-tabs .cp-bt-icon svg{ width:22px; height:22px; }
.cp-bottom-tabs .cp-bt-label{ line-height:1; }

/* Reserve space so content isn't hidden behind the bar */
@media (max-width: 899px){
  .cp-bottom-tabs{ display:flex; }
  body.has-cp-bottom-tabs .app-content{ padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px) !important; }
  body.has-cp-bottom-tabs{ padding-bottom: 0; }
}

/* ──────────────────────────────────────────────────────────
   Date-range chip group (admin/dashboard.html, Batch B #10)
   ────────────────────────────────────────────────────────── */
.date-range-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.date-range-chips .chip{ font-size:.78rem; padding:6px 12px; }
.date-range-chips .chip.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ──────────────────────────────────────────────────────────
   Bulk-action UI (admin/applications.html, Batch B #4)
   ────────────────────────────────────────────────────────── */
.bulk-toolbar-row{
  display:flex; align-items:center; gap:10px;
  margin:10px 0 6px; flex-wrap:wrap;
}
.bulk-toolbar-row label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; color:var(--muted); cursor:pointer;
  user-select:none;
}
.bulk-cb, .bulk-cb-all{
  width:18px; height:18px; cursor:pointer;
  accent-color: var(--brand);
}
.app-card-header .bulk-cb{
  align-self:center; margin-right:2px;
  /* Don't trigger toggle when clicking the checkbox */
}
.bulk-bar{
  position: sticky; bottom: 12px;
  z-index: 50;
  margin: 16px auto 0;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  animation: bulk-bar-in .18s ease-out;
}
.bulk-bar-count{ font-weight:700; color:var(--text); margin-right:auto; }
.bulk-bar-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.bulk-bar-actions .btn-act{ font-size:.78rem; padding:6px 10px; }
@keyframes bulk-bar-in{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
@media (max-width: 640px){
  .bulk-bar{ flex-direction:column; align-items:stretch; }
  .bulk-bar-count{ margin-right:0; }
}

/* ============================================================
   M-7: Skip-link for keyboard / screen-reader users.
   Hidden until focused, then becomes a high-contrast pill in the
   top-left corner that links to <main id="main">.
   ============================================================ */
.cp-skip-link{
  position:absolute;
  top:-100px;
  left:8px;
  z-index:10000;
  background:var(--brand, #0a4d8c);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:top .15s ease;
}
.cp-skip-link:focus,
.cp-skip-link:focus-visible{
  top:8px;
  outline:3px solid #fff;
  outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE — floating segmented control (light / auto / dark)
   Mirrors the tenant portal toggle so admin/landlord shells can opt in.
   Injected by cp-shell.js initTheme().
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-toggle{
  position:fixed;
  top:max(12px, env(safe-area-inset-top, 0px));
  right:14px;
  z-index:1200;
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border-strong, var(--border));
  border-radius:999px;
  padding:3px;
  gap:2px;
  box-shadow:var(--shadow-2, 0 8px 24px rgba(0,0,0,.45));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.theme-toggle button{
  width:30px;height:30px;border:none;background:transparent;
  border-radius:999px;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease, color .18s ease;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.theme-toggle button:hover{color:var(--text)}
.theme-toggle button[data-active="1"]{
  background:var(--surface-2);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-strong, var(--border));
}
.theme-toggle button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){
  .theme-toggle{top:max(10px, env(safe-area-inset-top, 0px));right:10px}
}
/* Lift above mobile bottom-tab bar conflicts only — desktop sidebar is unaffected. */
@media (min-width:1024px){
  body[data-shell="admin"] .theme-toggle,
  body[data-portal="admin"] .theme-toggle{top:14px;right:18px}
}