/* ============================================================
   NYUMBAFIND — SCREEN STYLES
   Landing, auth, header, search, agent dashboard, modals
============================================================ */

/* ---- App header ---- */
.app-header    { background:var(--surface);border-bottom:1px solid var(--border);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:var(--sh); }
.app-logo      { font-family:var(--serif);font-size:22px;font-weight:700;color:var(--text); }
.app-logo span { color:var(--sky); }
.hdr-right     { display:flex;align-items:center;gap:8px; }
.theme-toggle  { width:34px;height:34px;border-radius:10px;background:var(--sky-pale);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;cursor:pointer; }
.theme-toggle:hover { border-color:var(--sky); }
.user-pill     { display:flex;align-items:center;gap:6px;background:var(--sky-pale);border:1px solid var(--border);padding:5px 12px 5px 6px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s; }
.user-pill:hover { border-color:var(--sky); }
.avatar        { width:26px;height:26px;background:linear-gradient(135deg,var(--sky),var(--sky-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:700;flex-shrink:0; }
.avatar.green  { background:linear-gradient(135deg,#10B981,#059669); }

/* ---- Landing screen ---- */
#landing {
  background: linear-gradient(145deg,var(--night) 0%,var(--navy) 40%,#0D3460 100%);
  color: #E0F2FE; align-items: center; justify-content: center;
  padding: 48px 24px; position: relative; overflow: hidden; min-height: 100vh;
}
#landing::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 85% 5%,rgba(14,165,233,.4) 0%,transparent 65%),
              radial-gradient(ellipse 50% 40% at 5% 95%,rgba(56,189,248,.2) 0%,transparent 55%);
}
#landing::after {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle,rgba(14,165,233,.08) 1px,transparent 1px);
  background-size: 32px 32px;
}
.land-inner       { position:relative;z-index:1;text-align:center;max-width:440px;width:100%; }
.land-logo        { width:88px;height:88px;background:linear-gradient(135deg,var(--sky),var(--sky-dark));border-radius:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:40px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(14,165,233,.5);animation:float 3.5s ease-in-out infinite; }
.land-title       { font-family:var(--serif);font-size:clamp(44px,11vw,66px);font-weight:700;line-height:.92;letter-spacing:-2px;margin-bottom:12px; }
.land-title span  { background:linear-gradient(135deg,var(--sky-light),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.land-sub         { font-size:13px;color:#7DD3FC;margin-bottom:16px;font-weight:300;letter-spacing:.5px; }
.land-free-badge  { display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,233,.2);border:1px solid rgba(14,165,233,.35);color:var(--sky-light);padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;margin-bottom:40px;letter-spacing:.5px;backdrop-filter:blur(8px); }
.role-grid        { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px; }
.role-card        { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px 18px 22px;cursor:pointer;transition:all .25s;backdrop-filter:blur(14px);text-align:left; }
.role-card:hover  { background:rgba(14,165,233,.2);border-color:rgba(14,165,233,.5);transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.4); }
.rc-icon          { font-size:32px;margin-bottom:14px; }
.role-card h3     { font-size:17px;font-weight:700;margin-bottom:4px;color:#E0F2FE; }
.role-card p      { font-size:11px;color:#7DD3FC;line-height:1.5; }
.free-tag         { margin-top:14px;display:inline-block;background:var(--sky);color:white;font-size:10px;font-weight:700;padding:4px 11px;border-radius:12px;letter-spacing:.3px; }
.monthly-tag      { margin-top:14px;display:inline-block;background:linear-gradient(135deg,#0EA5E9,#0284C7);color:white;font-size:10px;font-weight:700;padding:4px 11px;border-radius:12px;letter-spacing:.3px; }
.land-areas       { font-size:11px;color:#2563A8; }

/* ---- Auth screens ---- */
#tenant-auth, #agent-auth { background:var(--bg);align-items:center;justify-content:center;padding:32px 20px; }

/* ---- Tenant search screen ---- */
#tenant-search   { background:var(--bg); }
.search-hero     { background:linear-gradient(145deg,var(--night),var(--navy),#0D3460);color:#E0F2FE;padding:24px 18px 20px; }
.hero-top        { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px; }
.hero-top h2     { font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.1; }
.hero-top p      { font-size:11px;color:#7DD3FC;margin-top:3px; }
.hero-select     { width:100%;padding:11px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.12);font-size:13px;background:rgba(255,255,255,.08);color:#E0F2FE;outline:none;backdrop-filter:blur(8px);margin-bottom:8px;-webkit-appearance:none;cursor:pointer;transition:border-color .2s; }
.hero-select:focus { border-color:rgba(14,165,233,.6); }
.hero-select option { background:var(--navy);color:#E0F2FE; }
.filter-row      { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.search-actions  { display:flex;gap:8px;margin-top:4px; }
.search-go       { flex:1;padding:12px;background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:white;border-radius:11px;font-size:13px;font-weight:700;transition:all .2s;box-shadow:0 4px 16px rgba(14,165,233,.3); }
.search-go:hover { box-shadow:0 6px 24px rgba(14,165,233,.45); }
.map-btn         { padding:12px 14px;background:rgba(255,255,255,.09);color:#E0F2FE;border-radius:11px;font-size:13px;border:1px solid rgba(255,255,255,.15);transition:all .2s; }
.map-btn:hover   { background:rgba(255,255,255,.15); }
.prem-map-btn    { background:rgba(14,165,233,.2);border-color:rgba(14,165,233,.4); }
.pills-bar       { padding:10px 18px;display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--border);background:var(--surface);min-height:0; }
.pill            { display:inline-flex;align-items:center;gap:5px;background:var(--sky-pale);border:1px solid var(--border2);border-radius:20px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--sky-deep);animation:pillIn .2s ease; }
.pill-x          { width:16px;height:16px;background:var(--sky);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;cursor:pointer;transition:transform .15s; }
.pill-x:hover    { transform:scale(1.2); }
.clear-pills     { font-size:11px;font-weight:700;color:var(--danger);cursor:pointer;text-decoration:underline;background:none;border:none; }
.listings-section { padding:16px 18px;flex:1; }
.section-hdr     { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.section-hdr h3  { font-family:var(--serif);font-size:20px;font-weight:700; }
.count-badge     { font-size:11px;font-weight:700;background:var(--sky-pale);color:var(--sky-dark);padding:3px 10px;border-radius:12px;border:1px solid var(--border); }
.expiry-strip    { margin:0 -14px 10px;padding:6px 14px;background:var(--sky-pale);font-size:10px;color:var(--subtext);display:flex;align-items:center;gap:6px; }
.expiry-strip.warn { background:#FEF3C7;color:#92400E; }
.expiry-strip.crit { background:#FEE2E2;color:var(--danger); }

/* ---- Agent dashboard screen ---- */
#agent-dashboard  { background:var(--bg); }
.agent-hero       { background:linear-gradient(145deg,var(--night),var(--navy),#0D3460);color:#E0F2FE;padding:20px 18px 18px; }
.agent-hero h2    { font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:2px; }
.agent-hero p     { font-size:12px;color:#7DD3FC;margin-bottom:18px; }
.stats-row        { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px; }
.stat-card        { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 10px;text-align:center;backdrop-filter:blur(10px); }
.stat-card .num   { font-family:var(--serif);font-size:26px;font-weight:700;color:var(--sky-light); }
.stat-card .lbl   { font-size:9px;color:#7DD3FC;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px; }
.add-listing-btn  { width:100%;padding:13px;background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:white;border-radius:12px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 20px rgba(14,165,233,.3); }
.add-listing-btn:hover { box-shadow:0 8px 32px rgba(14,165,233,.45); }
.sub-banner       { margin:16px 18px 0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between; }
.sub-info h4      { font-size:13px;font-weight:700;margin-bottom:2px; }
.sub-info p       { font-size:11px;color:var(--subtext); }
.upgrade-btn      { background:linear-gradient(135deg,var(--sky),var(--sky-dark));color:white;border-radius:10px;padding:8px 14px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px rgba(14,165,233,.3); }
.sub-required     { margin:16px 18px;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);border:1px solid #FED7AA;border-radius:16px;padding:16px; }
.sub-required h4  { font-size:14px;font-weight:700;color:#92400E;margin-bottom:6px; }
.sub-required p   { font-size:12px;color:#B45309;margin-bottom:14px;line-height:1.6; }
.dash-body        { padding:16px 18px;flex:1; }
.health-panel     { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-top:14px; }
.health-panel h4  { font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px; }
.h-item           { display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px; }
.h-item:last-child { border:none; }
.h-left           { display:flex;align-items:center;gap:8px; }
.h-dot            { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.h-dot.ok   { background:var(--moss); }
.h-dot.warn { background:var(--gold); }
.h-dot.bad  { background:var(--danger); }

/* ---- Pending/status screen ---- */
.status-screen     { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px 24px;text-align:center; }
.status-screen .si { font-size:56px;margin-bottom:16px; }
.status-screen h3  { font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:8px; }
.status-screen p   { font-size:13px;color:var(--subtext);line-height:1.6;max-width:320px; }