<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Skystone Properties — Premium Real Estate</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<link rel="icon" type="image/png" href="images/favicon.png"/>
<style>
/* ══════════════════════════════════════════════════
   THEME SYSTEM — CSS VARIABLES
═════════════════════════════════════════════════ */
:root{
  /* Sapphire Blue palette — shared */
  --gold:#082567;
  --gold-light:#9DB9F2;
  --gold-dark:#04163D;
  --gold-glow:rgba(8,37,103,0.14);

  /* DARK THEME (default) */
  --bg-base:#0B1220;
  --bg-surface:#0F1829;
  --bg-elevated:#141E33;
  --bg-card:#182238;
  --bg-input:#1E2A42;
  --bg-input-focus:#243250;
  --border-subtle:rgba(8,37,103,0.10);
  --border-medium:rgba(8,37,103,0.22);
  --border-strong:rgba(8,37,103,0.50);
  --text-primary:#E8F0FF;
  --text-secondary:#8BAED4;
  --text-muted:#445570;
  --text-inverse:#0B1220;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.55);
  --shadow-md:0 8px 28px rgba(0,0,0,0.65);
  --shadow-lg:0 20px 56px rgba(0,0,0,0.75);
  --shadow-gold:0 0 32px rgba(8,37,103,0.18);
  --glass-bg:rgba(11,18,32,0.92);
  --glass-border:rgba(8,37,103,0.14);
  --scrollbar-track:#0F1829;
  --status-active-bg:rgba(74,226,144,0.12);
  --status-active-text:#4de69a;
  --status-sold-bg:rgba(8,37,103,0.12);
  --status-sold-text:#082567;
  --status-pending-bg:rgba(248,180,6,0.12);
  --status-pending-text:#f8b406;
  --sidebar-bg:#0B1220;
  --navbar-bg:rgba(255,255,255,0.97);
  --sapphire-primary:#082567;
  --sapphire-secondary:#1B365D;
  --sapphire-accent:#082567;
  --sapphire-light:#9DB9F2;
  --sapphire-dark:#04163D;
}

/* LIGHT THEME */
[data-theme="light"]{
  --bg-base:#FFFFFF;
  --bg-surface:#FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-input:#F4F7FD;
  --bg-input-focus:#E8F0FF;
  --border-subtle:rgba(8,37,103,0.10);
  --border-medium:rgba(8,37,103,0.20);
  --border-strong:rgba(8,37,103,0.42);
  --text-primary:#071B3A;
  --text-secondary:#243F67;
  --text-muted:#6E83A3;
  --text-inverse:#FFFFFF;
  --shadow-sm:0 2px 8px rgba(8,37,103,0.06);
  --shadow-md:0 8px 28px rgba(8,37,103,0.10);
  --shadow-lg:0 20px 56px rgba(8,37,103,0.12);
  --shadow-gold:0 0 32px rgba(8,37,103,0.14);
  --glass-bg:rgba(255,255,255,0.96);
  --glass-border:rgba(8,37,103,0.12);
  --scrollbar-track:#F1F5FF;
  --status-active-bg:rgba(34,139,86,0.10);
  --status-active-text:#1a7a4a;
  --status-sold-bg:rgba(8,37,103,0.08);
  --status-sold-text:#082567;
  --status-pending-bg:rgba(200,120,0,0.10);
  --status-pending-text:#b46400;
  --sidebar-bg:#FFFFFF;
  --navbar-bg:rgba(255,255,255,0.97);
  --sapphire-primary:#082567;
  --sapphire-secondary:#04163D;
  --sapphire-accent:#082567;
  --sapphire-light:#9DB9F2;
}

/* Legacy aliases for backward compat */
:root{
  --charcoal:var(--bg-base);
  --dark:var(--bg-surface);
  --dark2:var(--bg-elevated);
  --dark3:var(--bg-card);
  --dark4:var(--bg-input);
  --muted:var(--text-muted);
  --muted2:var(--text-secondary);
  --white:var(--text-primary);
  --cream:#9DB9F2;
  --text:var(--text-primary);
}

*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg-base);
  color:var(--text-primary);
  overflow-x:hidden;
  min-height: 100vh;
  overflow-y: auto;
  transition:background 0.4s ease, color 0.4s ease;
}
.page{display:none;min-height:100vh;}
.page.active{display:block;}
#page-home{overflow:hidden;}
#page-home .hero{min-height:100vh;overflow:hidden;}

body.dark-theme .hero-headline,
body.dark-theme .hero-headline strong,
body.dark-theme .hero-headline em {
    color: #ffffff !important;
}

body.dark-theme .hero-sub {
    color: rgba(255,255,255,0.85) !important;
}

body.dark-theme .hero-eyebrow {
    color: #6ea8ff !important;
}

body.dark-theme .hero-stat-num {
    color: #ffffff !important;
}

body.dark-theme .hero-stat-label {
    color: rgba(255,255,255,0.7) !important;
}

/* ── THEME TRANSITION ────────────────────────────── */
*,*::before,*::after{
  transition-property:background-color,border-color,color,box-shadow,opacity;
  transition-duration:0.35s;
  transition-timing-function:ease;
}
/* Exempt transforms/dimensions from transition so animations still work */
.location-card,
.project-card,
.hero-card-float,
.quick-action,
.btn-primary-gold::before{
  transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),
             border-color 0.35s ease,
             box-shadow 0.35s ease,
             background-color 0.35s ease,
             opacity 0.35s ease !important;
}

/* ── SCROLLBAR ─────────────────────────────────── */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px;}

/* ── THEME TOGGLE BUTTON ────────────────────────── */
.theme-toggle{
  width:40px;height:40px;border-radius:50%;
  background:var(--bg-card);
  border:1px solid var(--border-medium);
  color:var(--gold);font-size:0.95rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.theme-toggle:hover{
  background:var(--gold-glow);
  border-color:var(--border-strong);
  transform:rotate(15deg) scale(1.08);
}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{
  position:absolute;transition:opacity 0.3s,transform 0.3s;
}
.theme-toggle .icon-sun{opacity:0;transform:translateY(-12px);}
.theme-toggle .icon-moon{opacity:1;transform:translateY(0);}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1;transform:translateY(0);}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0;transform:translateY(12px);}

/* Dashboard theme toggle */
.dash-theme-toggle{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-card);
  border:1px solid var(--border-medium);
  color:var(--gold);font-size:0.88rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;overflow:hidden;
}
.dash-theme-toggle:hover{background:var(--gold-glow);border-color:var(--border-strong);}

/* ── NAVBAR ─────────────────────────────────────── */
.navbar-main{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;
  background:linear-gradient(to bottom,var(--navbar-bg) 0%,transparent 100%);
  backdrop-filter:blur(0px);
  transition:background 0.4s,padding 0.3s,backdrop-filter 0.4s,border-color 0.35s;
  border-bottom:1px solid transparent;
}
.navbar-main.scrolled{
  background:var(--navbar-bg);
  padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
}
.nav-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;font-weight:600;
  color:var(--gold);letter-spacing:0.05em;
  text-decoration:none;cursor:pointer;
}

#page-dashboard {
  display: none;
}

#page-login {
    min-height: calc(100vh - 90px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 100%;
    max-width: 460px;
}

.nav-brand span{color:var(--text-primary);font-weight:300;}
.nav-link-custom{
  font-size:0.82rem;font-weight:500;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-secondary);
  text-decoration:none;padding:6px 0;margin:0 16px;
  position:relative;transition:color 0.3s;cursor:pointer;
}
.nav-link-custom::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--gold);transition:width 0.3s;
}
.nav-link-custom:hover{color:var(--gold);}
.nav-link-custom:hover::after{width:100%;}
.nav-link-custom.active-nav{color:var(--gold);}
.nav-link-custom.active-nav::after{width:100%;}
.btn-enquire{
  font-size:0.78rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-inverse);
  background:var(--gold);border:none;
  padding:10px 22px;cursor:pointer;
  transition:all 0.3s;
}
.btn-enquire:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 6px 20px rgba(74,144,226,0.35);}
.btn-agent-login{
  font-size:0.78rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);
  background:transparent;
  border:1px solid var(--border-medium);
  padding:9px 20px;cursor:pointer;
  transition:all 0.3s;margin-left:10px;
}
.btn-agent-login:hover{border-color:var(--gold);background:var(--gold-glow);}

/* ── HERO ───────────────────────────────────────── */
.hero{
  min-height:100vh;position:relative;
  display:flex;align-items:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(74,144,226,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(74,144,226,0.04) 0%, transparent 50%),
    var(--bg-base);
  transition:background 0.4s;
}
[data-theme="light"] .hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(74,144,226,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(74,144,226,0.06) 0%, transparent 50%),
    linear-gradient(135deg,#EDE9E0 0%,#F4F1EC 40%,#EDE9E0 100%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 60% 50%, black 20%, transparent 80%);
  opacity:0.6;
}
.hero-content{position:relative;z-index:2;padding-top:80px;}
.hero-eyebrow{
  font-size:0.72rem;font-weight:600;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:16px;
  opacity:0;animation:fadeUp 0.8s 0.3s forwards;
}
.hero-eyebrow::before{content:'';width:40px;height:1px;background:var(--gold);}
.hero-headline{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.8rem,6vw,5.8rem);
  font-weight:300;line-height:1.05;
  color:var(--text-primary);margin-bottom:18px;
  opacity:0;animation:fadeUp 0.9s 0.5s forwards;
}
.hero-headline em{font-style:italic;color:var(--gold);}
.hero-headline strong{font-weight:600;}
.hero-sub{
  font-size:0.98rem;font-weight:300;color:var(--text-secondary);
  max-width:480px;line-height:1.65;margin-bottom:28px;
  opacity:0;animation:fadeUp 0.9s 0.7s forwards;
}
.hero-ctas{
  display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.9s 0.9s forwards;
}
.btn-primary-gold{
  font-size:0.82rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-inverse);
  background:var(--gold);border:none;
  padding:16px 36px;cursor:pointer;
  transition:all 0.3s;position:relative;overflow:hidden;
}
.btn-primary-gold::before{
  content:'';position:absolute;inset:0;
  background:var(--gold-light);transform:translateX(-100%);
  transition:transform 0.4s !important;
}
.btn-primary-gold:hover{box-shadow:0 8px 28px rgba(74,144,226,0.40);transform:translateY(-2px);}
.btn-primary-gold:hover::before{transform:translateX(0);}
.btn-primary-gold span{position:relative;z-index:1;}
.btn-outline-gold{
  font-size:0.82rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);
  background:transparent;
  border:1px solid var(--border-medium);
  padding:16px 36px;cursor:pointer;
  transition:all 0.3s;
}
.btn-outline-gold:hover{border-color:var(--gold);background:var(--gold-glow);}
.hero-stats{
  display:flex;gap:40px;margin-top:32px;
  opacity:0;animation:fadeUp 0.9s 1.1s forwards;
}
.hero-stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;font-weight:600;color:var(--gold);line-height:1;
}
.hero-stat-label{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;}
.hero-visual{
  position:relative;z-index:2;
  opacity:0;animation:fadeIn 1.2s 0.8s forwards;
}
.hero-card-float{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  padding:20px;position:relative;overflow:hidden;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow-lg),var(--shadow-gold);
}
.hero-card-float::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.hero-card-float:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),0 0 48px rgba(74,144,226,0.18);}
.property-img-placeholder{
  width:100%;height:160px;
  background:linear-gradient(135deg,var(--bg-card),var(--bg-input));
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:var(--text-muted);margin-bottom:16px;
  position:relative;overflow:hidden;
}
.property-img-placeholder::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(74,144,226,0.05),transparent);
}
.prop-tag{
  font-size:0.68rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-inverse);
  background:var(--gold);padding:4px 10px;display:inline-block;margin-bottom:14px;
}
.prop-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;
}
.prop-loc{font-size:0.82rem;color:var(--text-secondary);margin-bottom:14px;}
.prop-loc i{color:var(--gold);margin-right:4px;}
.prop-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:300;color:var(--gold);
}
.prop-price span{font-size:0.8rem;font-weight:400;color:var(--text-muted);font-family:'DM Sans',sans-serif;}

/* ── SEARCH BAR ─────────────────────────────────── */
.search-section{
  padding:60px 0;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.search-box{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  padding:8px;display:flex;flex-wrap:wrap;gap:4px;
  position:relative;box-shadow:var(--shadow-md);
}
.search-box::before{
  content:'';position:absolute;inset:-1px;
  background:linear-gradient(135deg,rgba(74,144,226,0.25),transparent,rgba(74,144,226,0.08));
  z-index:-1;pointer-events:none;
}
.search-field{
  flex:1;min-width:160px;
  background:var(--bg-input);border:none;outline:none;
  color:var(--text-primary);padding:14px 18px;
  font-family:'DM Sans',sans-serif;font-size:0.88rem;
  transition:background 0.2s;
}
.search-field::placeholder{color:var(--text-muted);font-size:0.82rem;letter-spacing:0.05em;}
.search-field:focus{background:var(--bg-input-focus);}
.search-field option{background:var(--bg-card);color:var(--text-primary);}
.search-btn{
  background:var(--gold);color:var(--text-inverse);
  border:none;padding:14px 32px;
  font-size:0.82rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;cursor:pointer;transition:all 0.3s;
  white-space:nowrap;
}
.search-btn:hover{background:var(--gold-light);transform:translateY(-1px);}

/* ── SECTION HEADERS ────────────────────────────── */
.section-eyebrow{
  font-size:0.72rem;font-weight:600;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:16px;
}
.section-eyebrow::before{content:'';width:32px;height:1px;background:var(--gold);}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:300;color:var(--text-primary);line-height:1.15;margin-bottom:18px;
}
.section-title em{font-style:italic;color:var(--gold);}
.section-sub{color:var(--text-secondary);font-size:0.95rem;font-weight:300;max-width:520px;line-height:1.7;}

/* ── LOCATIONS ──────────────────────────────────── */
.locations-section{padding:100px 0;background:var(--bg-base);}
.location-card{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  padding:0;overflow:hidden;
  transition:all 0.4s cubic-bezier(0.23,1,0.32,1);
  cursor:pointer;position:relative;
  text-decoration:none;display:block;
  box-shadow:var(--shadow-sm);
}
.location-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(74,144,226,0.06),transparent);
  opacity:0;transition:opacity 0.4s;z-index:1;
}
.location-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-medium);
  box-shadow:var(--shadow-lg),0 0 0 1px var(--border-subtle),var(--shadow-gold);
}
.location-card:hover::before{opacity:1;}
.loc-color-bar{height:4px;background:linear-gradient(90deg,var(--gold-dark),var(--gold));}
.loc-body{padding:26px 24px;position:relative;z-index:2;}
.loc-icon{
  width:48px;height:48px;
  background:var(--gold-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1.2rem;margin-bottom:16px;
}
.loc-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:600;color:var(--text-primary);margin-bottom:8px;
}
.loc-desc{font-size:0.82rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;}
.loc-projects{
  font-size:0.75rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);
  padding:6px 12px;background:var(--gold-glow);
  display:inline-block;margin-bottom:18px;
}
.loc-btn{
  font-size:0.75rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-inverse);
  background:var(--gold);border:none;
  padding:10px 20px;cursor:pointer;
  transition:all 0.3s;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
}
.loc-btn:hover{background:var(--gold-light);}
.loc-btn i{font-size:0.7rem;transition:transform 0.2s;}
.location-card:hover .loc-btn i{transform:translateX(4px);}

/* ── FEATURED PROJECTS ──────────────────────────── */
.projects-section{
  padding:100px 0;
  background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-base) 100%);
}
.project-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  overflow:hidden;transition:all 0.4s;
  position:relative;box-shadow:var(--shadow-sm);
}
.project-card:hover{
  border-color:var(--border-medium);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg),var(--shadow-gold);
}
.project-img{
  width:100%;height:260px;
  background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-input) 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;color:var(--text-muted);position:relative;overflow:hidden;
}
.project-img::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,0.5),transparent);
}
[data-theme="light"] .project-img::after{
  background:linear-gradient(to top,rgba(0,0,0,0.2),transparent);
}
.project-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  font-size:0.68rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--text-inverse);
  background:var(--gold);padding:5px 12px;
}
.project-body{padding:24px;}
.project-type{
  font-size:0.72rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.project-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;
}
.project-loc{font-size:0.82rem;color:var(--text-secondary);margin-bottom:16px;}
.project-meta{
  display:flex;gap:20px;padding:16px 0;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:16px;
}
.project-meta-item{
  font-size:0.78rem;color:var(--text-secondary);
  display:flex;align-items:center;gap:6px;
}
.project-meta-item i{color:var(--gold);font-size:0.7rem;}
.project-price-row{display:flex;align-items:center;justify-content:space-between;}
.project-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:300;color:var(--gold);
}
.project-price small{font-size:0.72rem;color:var(--text-muted);font-family:'DM Sans',sans-serif;}

/* ── ABOUT ──────────────────────────────────────── */
.about-section{padding:100px 0;background:var(--bg-base);}
.about-number{
  font-family:'Cormorant Garamond',serif;
  font-size:5rem;font-weight:700;color:transparent;
  -webkit-text-stroke:1px rgba(74,144,226,0.2);
  line-height:1;display:block;margin-bottom:-20px;
}
.about-point{
  padding:20px 0;
  border-bottom:1px solid var(--border-subtle);
  display:flex;gap:16px;align-items:flex-start;
}
.about-point-icon{
  color:var(--gold);font-size:1rem;margin-top:3px;flex-shrink:0;
}
.about-point-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:4px;
}
.about-point-text{font-size:0.84rem;color:var(--text-secondary);line-height:1.6;}
.about-img-block{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  height:100%;min-height:480px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:48px;box-shadow:var(--shadow-md);
}
.about-img-block::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%,rgba(74,144,226,0.06),transparent);
}
.about-big-num{
  font-family:'Cormorant Garamond',serif;
  font-size:8rem;font-weight:700;color:transparent;
  -webkit-text-stroke:1px rgba(74,144,226,0.12);
  position:absolute;right:-20px;top:20px;line-height:1;
}

/* ── CONTACT ────────────────────────────────────── */
.contact-section{
  padding:100px 0;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-subtle);
}
.contact-info-item{
  display:flex;gap:16px;align-items:flex-start;margin-bottom:28px;
}
.contact-icon{
  width:44px;height:44px;flex-shrink:0;
  background:var(--gold-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1rem;
}
.contact-label{font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.contact-value{color:var(--text-primary);font-size:0.95rem;}

/* ── FORMS ──────────────────────────────────────── */
.form-control-dark{
  background:var(--bg-input);
  border:1px solid var(--border-subtle);
  color:var(--text-primary);
  padding:14px 16px;font-family:'DM Sans',sans-serif;font-size:0.9rem;
  border-radius:0;outline:none;width:100%;
  transition:border-color 0.3s,background 0.3s,box-shadow 0.3s;
}
.form-control-dark:focus{
  border-color:var(--border-strong);
  background:var(--bg-input-focus);outline:none;
  box-shadow:0 0 0 3px rgba(74,144,226,0.08);
}
.form-control-dark::placeholder{color:var(--text-muted);}
.form-control-dark option{background:var(--bg-card);color:var(--text-primary);}
.form-label-gold{
  font-size:0.72rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px;display:block;
}

/* ── FOOTER ─────────────────────────────────────── */
footer{
  background:var(--bg-base);
  border-top:1px solid var(--border-subtle);
  padding:60px 0 30px;
}
.footer-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:600;color:var(--gold);
}
.footer-brand span{color:var(--text-primary);font-weight:300;}
.footer-tagline{font-size:0.82rem;color:var(--text-muted);margin-top:8px;font-style:italic;}
.footer-heading{
  font-size:0.72rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.footer-link{
  display:block;font-size:0.86rem;color:var(--text-secondary);
  text-decoration:none;padding:4px 0;
  transition:color 0.2s;cursor:pointer;
}
.footer-link:hover{color:var(--gold);}
.footer-divider{
  border-color:var(--border-subtle);margin:40px 0 24px;
}
.footer-bottom{
  font-size:0.78rem;color:var(--text-muted);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ── ENQUIRE PAGE ───────────────────────────────── */
.enquire-page{
  min-height:100vh;
  background:var(--bg-base);
  padding:120px 0 80px;
}
.enquire-form-wrap{
  max-width:600px;margin:0 auto;
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  padding:48px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.enquire-form-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.form-success{
  background:var(--gold-glow);
  border:1px solid var(--border-medium);
  padding:20px;text-align:center;
  display:none;margin-top:20px;
}
.form-success i{color:var(--gold);font-size:1.5rem;margin-bottom:10px;display:block;}
.form-success p{color:var(--text-primary);font-size:0.95rem;}

/* ── LOGIN ──────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--bg-base);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 40px;
}
.login-card{
  width:100%;max-width:440px;
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  padding:52px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg),var(--shadow-gold);
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.login-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:600;color:var(--gold);
  text-align:center;margin-bottom:6px;
}
.login-logo span{color:var(--text-primary);font-weight:300;}
.login-sub{
  text-align:center;font-size:0.82rem;color:var(--text-muted);
  margin-bottom:36px;letter-spacing:0.08em;
}
.login-error{
  background:rgba(220,53,69,0.12);
  border:1px solid rgba(220,53,69,0.3);
  color:#e05;padding:12px 16px;
  font-size:0.84rem;display:none;margin-bottom:16px;
}

/* ── DASHBOARD ──────────────────────────────────── */
.dashboard-page{display:none;min-height:100vh;background:var(--bg-base);}
.dashboard-page.active{display:flex;}
.sidebar{
  width:260px;flex-shrink:0;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  box-shadow:4px 0 24px rgba(0,0,0,0.12);
}
.sidebar-logo{
  padding:28px 24px;
  border-bottom:1px solid var(--border-subtle);
}
.sidebar-logo .brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:600;color:var(--gold);
}
.sidebar-logo .brand span{color:var(--text-primary);font-weight:300;}
.sidebar-logo .role{
  font-size:0.68rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--text-muted);margin-top:4px;
}
.sidebar-nav{padding:16px 0;flex:1;}
.sidebar-section-label{
  font-size:0.62rem;font-weight:700;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--text-muted);
  padding:8px 24px 6px;
}
.sidebar-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;color:var(--text-secondary);
  font-size:0.86rem;font-weight:500;cursor:pointer;
  transition:all 0.2s;border-left:2px solid transparent;
  text-decoration:none;
}
.sidebar-item:hover{color:var(--gold);background:var(--gold-glow);}
.sidebar-item.active{
    background: rgba(255,255,255,.10);
    color: #ffffff !important;
    border-left: 3px solid #ffffff;
}

.sidebar-item.active i{
    color: #ffffff !important;
    width:16px;
    text-align:center;
    font-size:0.88rem;
}

.sidebar-footer{
  padding:20px 24px;
  border-top:1px solid var(--border-subtle);
}
.logout-btn{
  width:100%;background:transparent;
  border:1px solid rgba(220,53,69,0.25);
  color:#e05;padding:10px;
  font-size:0.78rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;cursor:pointer;
  transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;
}
.logout-btn:hover{background:rgba(220,53,69,0.08);border-color:rgba(220,53,69,0.5);}

/* ── DASHBOARD MAIN ─────────────────────────────── */
.dash-main{flex:1;overflow-y:auto;padding:36px;background:var(--bg-base);}
.dash-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:36px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border-subtle);
}
.dash-title{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:300;color:var(--text-primary);
}
.dash-title span{color:var(--gold);}
.dash-user{
  display:flex;align-items:center;gap:12px;
  font-size:0.86rem;color:var(--text-secondary);
}
.dash-avatar{
  width:36px;height:36px;
  background:var(--gold-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:0.9rem;
  border:1px solid var(--border-medium);
}

/* ── STAT CARDS ─────────────────────────────────── */
.stat-card{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-top:2px solid var(--border-subtle);
  padding:26px 28px 22px;position:relative;overflow:hidden;
  transition:all 0.3s;box-shadow:var(--shadow-sm);
}
.stat-card:hover{border-color:var(--border-medium);border-top-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow-md),var(--shadow-gold);}
.stat-card::before{
  content:'';position:absolute;bottom:0;right:0;
  width:80px;height:80px;
  background:var(--gold-glow);
  border-radius:50%;transform:translate(20px,20px);
}
.stat-icon{
  width:42px;height:42px;
  background:var(--gold-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1.05rem;margin-bottom:14px;
}
.stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.6rem;font-weight:600;color:var(--gold);line-height:1;
}
.stat-label{font-size:0.72rem;color:var(--text-secondary);margin-top:6px;text-transform:uppercase;letter-spacing:0.12em;font-weight:600;}
.stat-trend{
  font-size:0.70rem;margin-top:12px;color:var(--status-active-text);
  display:flex;align-items:center;gap:4px;
  padding-top:10px;border-top:1px solid var(--border-subtle);
}
.stat-trend.down{color:#e05;}

/* ── DASH PANEL SECTIONS ────────────────────────── */
.dash-panel{display:none;}
.dash-panel.active{display:block;}
.panel-card{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  padding:32px;margin-bottom:28px;
  position:relative;box-shadow:var(--shadow-sm);
}
.panel-card-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:600;color:var(--text-primary);
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;gap:12px;
}
.panel-card-title i{color:var(--gold);font-size:1.1rem;}

/* ── TABLE ──────────────────────────────────────── */
.dash-table{width:100%;border-collapse:collapse;font-size:0.86rem;}
.dash-table th{
  font-size:0.68rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-muted);
  padding:12px 16px;background:var(--bg-card);
  border-bottom:1px solid var(--border-subtle);text-align:left;
  position:sticky;top:0;z-index:1;
}
.dash-table td{
  padding:14px 16px;color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
  vertical-align:middle;
}
.dash-table tr:hover td{background:var(--gold-glow);}
.badge-status{
  font-size:0.68rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;padding:4px 10px;display:inline-block;
}
.badge-active{background:var(--status-active-bg);color:var(--status-active-text);}
.badge-sold{background:var(--status-sold-bg);color:var(--status-sold-text);}
.badge-pending{background:var(--status-pending-bg);color:var(--status-pending-text);}

/* ── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
@keyframes themeSwitch{
  0%{opacity:0.6;transform:scale(0.97);}
  100%{opacity:1;transform:scale(1);}
}
body.theme-switching{animation:themeSwitch 0.35s ease forwards;}
.scroll-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.scroll-reveal.revealed{opacity:1;transform:translateY(0);}

/* ── MOBILE NAV ─────────────────────────────────── */
.mobile-menu{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;
  background:var(--glass-bg);
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  padding:100px 40px 40px;
  transform:translateX(-100%);
  transition:transform 0.4s cubic-bezier(0.23,1,0.32,1);
  border-right:1px solid var(--border-subtle);
  pointer-events:none;
}
.mobile-menu.open{transform:translateX(0);pointer-events:auto;}
.mobile-link{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:2.2rem;font-weight:300;color:var(--text-primary);
  padding:14px 0;border-bottom:1px solid var(--border-subtle);
  text-decoration:none;cursor:pointer;transition:color 0.2s;
}
.mobile-link:hover{color:var(--gold);}
.hamburger{
  background:none;border:none;cursor:pointer;padding:4px;
  display:flex;flex-direction:column;gap:6px;
}
.hamburger span{
  width:24px;height:1.5px;background:var(--text-primary);
  transition:all 0.3s;display:block;
}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ── MISC ───────────────────────────────────────── */
.gold-line{width:60px;height:1px;background:var(--gold);margin:20px 0;}
.gold-divider{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-medium),transparent);
  margin:60px 0;
}

/* ── DRAG DROP UPLOAD ───────────────────────────── */
.drop-zone{
  border:2px dashed var(--border-medium);
  background:var(--gold-glow);
  padding:36px 24px;text-align:center;
  cursor:pointer;transition:all 0.3s;position:relative;
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--border-strong);
  background:rgba(74,144,226,0.1);
}
.drop-zone-icon{font-size:2rem;color:var(--gold);margin-bottom:12px;opacity:0.7;}
.drop-zone-text{font-size:0.84rem;color:var(--text-secondary);}
.drop-zone-sub{font-size:0.72rem;color:var(--text-muted);margin-top:6px;}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-preview{
  margin-top:12px;display:none;
  background:var(--gold-glow);border:1px solid var(--border-medium);
  padding:12px 16px;font-size:0.82rem;color:var(--gold);
  display:none;align-items:center;gap:10px;
}
.upload-preview i{font-size:1rem;}
.progress-bar-wrap{
  height:3px;background:var(--border-subtle);margin-top:10px;display:none;
}
.progress-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  width:0%;transition:width 0.4s;
}

/* ── SEARCH INPUT ───────────────────────────────── */
.search-input-dark{
  background:var(--bg-card);border:1px solid var(--border-subtle);
  color:var(--text-primary);padding:10px 14px 10px 36px;
  font-family:'DM Sans',sans-serif;font-size:0.84rem;
  outline:none;transition:border-color 0.3s,box-shadow 0.3s;width:100%;max-width:280px;
}
.search-input-dark:focus{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(74,144,226,0.08);}
.search-input-dark::placeholder{color:var(--text-muted);}
.search-wrap{position:relative;display:inline-block;}
.search-wrap i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.78rem;}

/* ── EXPORT BUTTON ──────────────────────────────── */
.btn-export{
  font-size:0.75rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold);
  background:var(--gold-glow);
  border:1px solid var(--border-medium);
  padding:10px 18px;cursor:pointer;transition:all 0.3s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-export:hover{background:rgba(74,144,226,0.16);border-color:var(--border-strong);}

/* ── TOAST ──────────────────────────────────────── */
.toast-container{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.toast{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--gold);
  padding:14px 20px;
  font-size:0.84rem;color:var(--text-primary);
  min-width:260px;pointer-events:auto;
  opacity:0;transform:translateX(20px);
  transition:all 0.35s cubic-bezier(0.23,1,0.32,1);
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-md);
}
.toast.show{opacity:1;transform:translateX(0);}
.toast i{color:var(--gold);}
.toast.error{border-left-color:#e05;}
.toast.error i{color:#e05;}

/* ── MINI CHART ─────────────────────────────────── */
.mini-chart-wrap{margin-top:20px;}
.chart-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.chart-bar-label{font-size:0.72rem;color:var(--text-secondary);width:70px;text-align:right;flex-shrink:0;}
.chart-bar-track{flex:1;height:6px;background:var(--border-subtle);}
.chart-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold));transition:width 1s cubic-bezier(0.23,1,0.32,1);}
.chart-bar-val{font-size:0.72rem;color:var(--gold);width:30px;flex-shrink:0;font-family:'DM Mono',monospace;}

/* ── CARPET AREA / POSSESSION ───────────────────── */
.form-hint{font-size:0.72rem;color:var(--text-muted);margin-top:5px;}

/* ══════════════════════════════════════════════════
   ENHANCED PARALLAX & MOTION SYSTEM
══════════════════════════════════════════════════ */
html{scroll-behavior:smooth;}

/* Parallax orbs */
.parallax-orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:0;
  animation:orbFadeIn 2s ease forwards;
  will-change:transform;pointer-events:none;
}
.parallax-orb-1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(74,144,226,0.13) 0%,transparent 70%);
  top:-100px;right:-100px;animation-delay:0.2s;
}
.parallax-orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(74,144,226,0.08) 0%,transparent 70%);
  bottom:50px;left:-80px;animation-delay:0.6s;
}
.parallax-orb-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(74,144,226,0.06) 0%,transparent 70%);
  top:40%;left:40%;animation-delay:1s;
}
@keyframes orbFadeIn{
  from{opacity:0;transform:scale(0.8);}
  to{opacity:1;transform:scale(1);}
}

/* Floating particles */
.particles-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.particle{
  position:absolute;width:2px;height:2px;
  background:var(--gold);border-radius:50%;
  opacity:0;animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(100vh) scale(0);}
  10%{opacity:0.6;}
  90%{opacity:0.3;}
  100%{opacity:0;transform:translateY(-20vh) scale(1.5);}
}

/* Hero grid perspective */
.hero-grid{
  transform:perspective(800px) rotateX(8deg);
  transform-origin:bottom center;
}

/* Scroll reveal upgrades */
.scroll-reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),
             transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.scroll-reveal.revealed{opacity:1;transform:translateY(0);}

/* Page transitions */
.page.active,.dashboard-page.active{
  animation:pageEnter 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* Hero headline gradient */
.hero-headline em{
  background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:textGradient 4s ease infinite;
}
@keyframes textGradient{
  0%{background-position:0% center;}
  50%{background-position:100% center;}
  100%{background-position:0% center;}
}

/* Ticker/marquee */
.ticker-wrap{
  overflow:hidden;
  background:var(--gold);
  padding:10px 0;
}
.ticker-inner{
  display:flex;
  white-space:nowrap;
  animation:ticker 35s linear infinite;
  will-change:transform;
}
.ticker-item{
  display:inline-flex;align-items:center;gap:24px;
  padding:0 32px;
  font-size:0.72rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--text-inverse);
}
.ticker-dot{width:4px;height:4px;background:rgba(0,0,0,0.3);border-radius:50%;flex-shrink:0;}
@keyframes ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Hero floating badge */
.hero-float-badge{
  position:absolute;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:12px 18px;
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
  box-shadow:var(--shadow-md);
  will-change:transform;
}
.hero-float-badge-1{top:18%;right:8%;animation:floatBadge 6s ease-in-out infinite;}
.hero-float-badge-2{bottom:15%;right:5%;animation:floatBadge 6s ease-in-out -2s infinite;}
@keyframes floatBadge{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* Enhanced card hover */
.location-card{
  transition:transform 0.45s cubic-bezier(0.23,1,0.32,1),
             border-color 0.35s ease,box-shadow 0.45s ease,
             background-color 0.35s ease !important;
}
.location-card:hover{
  transform:translateY(-10px) scale(1.015) !important;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--border-subtle),
             0 0 40px rgba(74,144,226,0.14) !important;
}
.project-card{position:relative;overflow:hidden;}
.project-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(74,144,226,0.06),transparent);
  opacity:0;transition:opacity 0.4s ease;
  pointer-events:none;z-index:0;
}
.project-card:hover{transform:translateY(-8px) !important;}
.project-card:hover::after{opacity:1;}

/* Hero card hover */
.hero-card-float{
  transition:transform 0.6s cubic-bezier(0.23,1,0.32,1),box-shadow 0.5s ease !important;
}
.hero-card-float:hover{transform:translateY(-8px) rotate(-0.5deg) !important;}

/* Stat card hover */
.stat-card:hover .stat-num{
  transform:scale(1.06);
  color:var(--gold-light) !important;
}

/* Button ripple */
.btn-primary-gold{
  position:relative;overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.23,1,0.32,1),box-shadow 0.35s ease !important;
}

/* Sidebar item */
.sidebar-item{
  transition:color 0.25s ease,background 0.25s ease,
             border-left-color 0.25s ease,transform 0.25s ease !important;
}
.sidebar-item:hover{transform:translateX(3px);}

/* Mobile link */
.mobile-link{transition:color 0.3s ease,transform 0.3s ease !important;}
.mobile-link:hover{transform:translateX(8px);}

/* Mobile menu */
.mobile-menu{transition:transform 0.5s cubic-bezier(0.16,1,0.3,1),pointer-events 0s !important;}

/* Smooth input */
.form-control-dark:focus{
  box-shadow:0 0 0 3px rgba(74,144,226,0.12),0 0 20px rgba(74,144,226,0.06) !important;
}

/* Nav link underline */
.nav-link-custom::after{transition:width 0.4s cubic-bezier(0.23,1,0.32,1) !important;}

/* Footer top border */
footer{position:relative;overflow:hidden;}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* WhatsApp pulse */
.whatsapp-float{position:relative;}
.whatsapp-float::before{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:rgba(37,211,102,0.3);
  animation:waPulse 2.5s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:0.6;}
  100%{transform:scale(1.7);opacity:0;}
}

/* About block corner */
.about-img-block::after{
  content:'';position:absolute;
  bottom:-20px;right:-20px;
  width:120px;height:120px;
  border:1px solid var(--border-medium);
  pointer-events:none;
  transition:transform 0.4s ease;
}
.about-img-block:hover::after{transform:translate(8px,8px);}

/* Background orbs for sections */
.locations-bg-orb{
  position:absolute;border-radius:50%;
  filter:blur(120px);pointer-events:none;opacity:0.4;
}
.locations-bg-orb-1{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(74,144,226,0.08) 0%,transparent 70%);
  top:-100px;right:-100px;
}
.locations-bg-orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(74,144,226,0.06) 0%,transparent 70%);
  bottom:-80px;left:20%;
}

/* About parallax large number */
.about-parallax-num{
  position:absolute;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(160px,20vw,260px);
  font-weight:700;color:transparent;
  -webkit-text-stroke:1px rgba(74,144,226,0.07);
  line-height:1;pointer-events:none;user-select:none;
  top:50%;left:-20px;transform:translateY(-50%);
  will-change:transform;z-index:0;
}

/* Search box glow */
.search-box:focus-within{
  box-shadow:var(--shadow-lg),0 0 40px rgba(74,144,226,0.1) !important;
}

/* Cursor glow */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9998;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,144,226,0.05) 0%,transparent 60%);
  transform:translate(-50%,-50%);
  transition:left 0.12s ease,top 0.12s ease;
  will-change:left,top;
}

/* Dash table row animation */
.dash-table tbody tr{
  animation:tableRowIn 0.4s ease forwards;
  opacity:0;
}
@keyframes tableRowIn{
  from{opacity:0;transform:translateX(-8px);}
  to{opacity:1;transform:translateX(0);}
}

/* Toast enhanced */
.toast{transition:all 0.45s cubic-bezier(0.16,1,0.3,1) !important;}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .parallax-orb,.particle,.ticker-inner,.hero-float-badge,.cursor-glow{animation:none !important;}
}

/* ── CTA SECTION ────────────────────────────────── */
.cta-section{
  padding:80px 0;
  background:linear-gradient(135deg,rgba(74,144,226,0.07) 0%,rgba(74,144,226,0.02) 100%);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  text-align:center;
}

/* ── WHATSAPP FLOAT ─────────────────────────────── */
.whatsapp-float{
  position:fixed;bottom:28px;left:28px;z-index:900;
  width:52px;height:52px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:1.4rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  cursor:pointer;transition:all 0.3s;
  text-decoration:none;
}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,0.6);color:white;}
.whatsapp-float::after{
  content:'Chat with us!';
  position:absolute;left:64px;
  background:var(--bg-elevated);color:var(--text-primary);
  border:1px solid var(--border-subtle);
  padding:6px 12px;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;
  white-space:nowrap;opacity:0;transition:opacity 0.2s;pointer-events:none;
  box-shadow:var(--shadow-sm);
}
.whatsapp-float:hover::after{opacity:1;}

/* ── AMENITY TAGS ───────────────────────────────── */
.amenity-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-glow);border:1px solid var(--border-subtle);
  color:var(--gold);padding:5px 12px;font-size:0.72rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;
  margin:4px;
}
.amenity-tag.selected{background:rgba(74,144,226,0.18);border-color:var(--border-medium);box-shadow:0 0 0 1px var(--gold);}
.amenity-tag:hover{background:rgba(74,144,226,0.12);}

/* ── DASH QUICK ACTIONS ─────────────────────────── */
.quick-action{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--border-medium);
  padding:18px 20px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all 0.25s;
  box-shadow:var(--shadow-sm);
}
.quick-action:hover{border-color:var(--border-medium);border-left-color:var(--gold);background:var(--gold-glow);transform:translateX(3px);box-shadow:var(--shadow-md);}
.quick-action i{font-size:1.2rem;color:var(--gold);flex-shrink:0;width:20px;text-align:center;}
.quick-action div{font-size:0.78rem;color:var(--text-secondary);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;}
.lead-count-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-glow);
  border:1px solid var(--border-medium);
  padding:6px 14px;font-size:0.78rem;color:var(--gold);
  font-weight:600;letter-spacing:0.1em;
}
select.form-control-dark{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A96E' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:36px;}

@media(max-width:991px){
  .sidebar{display:none;}
  .dash-main{padding:20px;}
  .hero-visual{display:none;}
}
@media(max-width:767px){
  .hero-stats{gap:24px;}
  .hero-ctas{flex-direction:column;}
  .enquire-form-wrap{padding:28px 20px;}
  .login-card{padding:36px 24px;}
}
.login-logo img,
.sidebar-logo img,
.brand img{
  object-fit:contain;
  display:block;
}
.site-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.sidebar-logo .site-logo {
  width: 58px;
  height: 58px;
  margin-bottom: 8px;
}
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.login-page {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 40px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  padding: 44px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.login-logo-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* ── HERO CAROUSEL ───────────────────────────────── */
.hero-carousel{border-radius:0;position:relative;overflow:hidden;}
.hero-carousel-track{will-change:transform;}
.hero-slide{min-width:100%;}
@media(max-width:991px){
  .hero-carousel{display:none;}
}
/* ── LIGHT THEME IMPROVEMENTS ───────────────────── */
[data-theme="light"] .hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(74,144,226,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 80%, rgba(74,144,226,0.07) 0%, transparent 50%),
    #F8FAFF !important;
}
[data-theme="light"] .navbar-main{background:rgba(248,250,255,0.97);}
[data-theme="light"] .login-card{box-shadow:0 20px 60px rgba(15,82,186,0.15);}
/* ── NAVBAR LOGO RESPONSIVE ─────────────────────── */
@media(max-width:480px){
  .nav-brand img{width:30px;height:30px;}
  .nav-brand > span{font-size:1.4rem;}
}


/* ── DASHBOARD MODE: hide public navbar ───────── */
body.dashboard-active #mainNav,
body.dashboard-active #mobileMenu {
  display: none !important;
}

.hero-slide{
    position:relative;
    height:100%;
    overflow:hidden;
    border-radius:24px;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.hero-slide:hover img{
    transform:scale(1.05);
}

.hero-slide-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:32px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15),
        transparent
    );
    color:white;
}

.hero-carousel {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 390px;
  overflow: hidden;
  border-radius: 26px;
  background: #0b2345;
  box-shadow: 0 30px 70px rgba(15, 82, 186, 0.22);
}

.hero-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
}

.hero-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-logo{
    width:55px;
    height:55px;
    object-fit:contain;
    filter:drop-shadow(0 6px 15px rgba(74,144,226,.25));
}

.brand-logo,
.login-logo img,
.sidebar-logo img{
    filter:
        brightness(1.2)
        contrast(1.2);
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 20%, rgba(74,144,226,.15), transparent 40%),
      radial-gradient(circle at 80% 30%, rgba(74,144,226,.12), transparent 40%);
    animation:floatGlow 8s infinite alternate;
}

@keyframes floatGlow{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-20px);
    }
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(5, 20, 45, 0.75);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  z-index: 5;
}

.hero-prev {
  left: 16px;
}

.hero-next {
  right: 16px;
}

/* ═══════════════════════════════════════════════
   FINAL OVERRIDES — LOGIN CENTER + LOGO + HERO
   Keep this LAST inside <style>
═══════════════════════════════════════════════ */

/* Login page must be hidden by default and centered only when active */
#page-login{
  min-height:100vh !important;
  width:100% !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:120px 20px 50px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(74,144,226,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(74,144,226,.08), transparent 40%),
    var(--bg-base) !important;
}

#page-login.active{
  display:flex !important;
}

/* Stop Bootstrap container/row/column from pushing login card left */
#page-login .container,
#page-login .row,
#page-login [class*="col-"]{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

/* Login card */
#page-login .login-card{
  width:100% !important;
  max-width:460px !important;
  margin:0 auto !important;
  padding:48px 44px !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border-medium) !important;
  box-shadow:var(--shadow-lg), var(--shadow-gold) !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

#page-login .login-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

#page-login .login-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin-bottom:10px !important;
  font-family:"Cormorant Garamond", serif !important;
  font-size:1.8rem !important;
  font-weight:600 !important;
  color:var(--gold) !important;
  text-align:center !important;
}

#page-login .login-logo span{
  color:var(--text-primary) !important;
  font-weight:300 !important;
}

#page-login .login-logo img,
#page-login .login-logo-img{
  width:58px !important;
  height:58px !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
  background:transparent !important;
}

#page-login .login-sub{
  text-align:center !important;
  font-size:.82rem !important;
  color:var(--text-muted) !important;
  margin-bottom:34px !important;
  letter-spacing:.08em !important;
}

#page-login .login-error{
  background:rgba(220,53,69,.12) !important;
  border:1px solid rgba(220,53,69,.3) !important;
  color:#e05 !important;
  padding:12px 16px !important;
  font-size:.84rem !important;
  display:none;
  margin-bottom:16px !important;
}

#page-login .form-control-dark{
  width:100% !important;
}

#page-login .btn-primary-gold{
  width:100% !important;
}

/* Logo polishing */
.site-logo,
.brand-logo,
.login-logo img,
.sidebar-logo img,
.nav-brand img{
  object-fit:contain !important;
  background:transparent !important;
  filter:drop-shadow(0 6px 14px rgba(74,144,226,.22)) !important;
}

/* Hero carousel must show only one slide at a time */
.hero-carousel{
  position:relative !important;
  width:100% !important;
  max-width:720px !important;
  height:430px !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#0b2345 !important;
  box-shadow:0 35px 80px rgba(15,82,186,.22) !important;
  margin:0 auto !important;
}

.hero-carousel-track{
  display:flex !important;
  width:100% !important;
  height:100% !important;
  transition:transform .7s ease !important;
}

.hero-slide{
  min-width:100% !important;
  width:100% !important;
  height:100% !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:0 !important;
}

.hero-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.hero-nav{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:5 !important;
  width:42px !important;
  height:42px !important;
  border:none !important;
  border-radius:50% !important;
  background:rgba(5,20,45,.75) !important;
  color:#fff !important;
  font-size:2rem !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.hero-prev{left:18px !important;}
.hero-next{right:18px !important;}

@media(max-width:576px){
  #page-login{
    padding:100px 16px 36px !important;
  }

  #page-login .login-card{
    padding:36px 24px !important;
    max-width:100% !important;
  }

  #page-login .login-logo{
    font-size:1.45rem !important;
  }

  #page-login .login-logo img,
  #page-login .login-logo-img{
    width:48px !important;
    height:48px !important;
  }
}



/* ═══════════════════════════════════════════════
   FINAL THEME OVERRIDES — DARKER BLUE + BRIGHT WHITE
   Keep this LAST inside <style>
═══════════════════════════════════════════════ */

:root{
  --gold:#082567;
  --gold-dark:#04163D;
  --gold-light:#9DB9F2;
  --gold-glow:rgba(8,37,103,0.14);
}

[data-theme="light"]{
  --bg-base:#FFFFFF;
  --bg-surface:#FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-input:#F4F7FD;
  --bg-input-focus:#E8F0FF;
  --text-primary:#071B3A;
  --text-secondary:#243F67;
  --text-muted:#6E83A3;
  --text-inverse:#FFFFFF;
  --navbar-bg:rgba(255,255,255,0.97);
  --sidebar-bg:#FFFFFF;
  --border-subtle:rgba(8,37,103,0.10);
  --border-medium:rgba(8,37,103,0.20);
  --border-strong:rgba(8,37,103,0.42);
  --shadow-sm:0 2px 8px rgba(8,37,103,0.06);
  --shadow-md:0 8px 28px rgba(8,37,103,0.10);
  --shadow-lg:0 20px 56px rgba(8,37,103,0.12);
  --shadow-gold:0 0 32px rgba(8,37,103,0.14);
}

[data-theme="light"] body,
[data-theme="light"] .locations-section,
[data-theme="light"] .about-section,
[data-theme="light"] .contact-section,
[data-theme="light"] .projects-section,
[data-theme="light"] .search-section,
[data-theme="light"] footer,
[data-theme="light"] .dashboard-page,
[data-theme="light"] .dash-main{
  background:#FFFFFF !important;
}

[data-theme="light"] .hero-bg{
  background:
    radial-gradient(circle at 80% 18%, rgba(8,37,103,.08), transparent 40%),
    radial-gradient(circle at 20% 82%, rgba(8,37,103,.05), transparent 45%),
    #FFFFFF !important;
}

[data-theme="light"] .navbar-main,
[data-theme="light"] .navbar-main.scrolled{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid rgba(8,37,103,.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

.btn-primary-gold,
.btn-enquire,
.loc-btn,
.search-btn{
  background:linear-gradient(135deg,#082567,#04163D) !important;
  color:#FFFFFF !important;
}

.btn-primary-gold:hover,
.btn-enquire:hover,
.loc-btn:hover,
.search-btn:hover{
  box-shadow:0 12px 30px rgba(8,37,103,.25) !important;
}

.nav-brand,
.nav-link-custom:hover,
.nav-link-custom.active-nav,
.section-title em,
.hero-headline em,
.section-eyebrow,
.project-price,
.login-logo,
.loc-name,
.stat-num,
.panel-card-title i{
  color:#082567 !important;
}

[data-theme="light"] .login-card,
[data-theme="light"] .project-card,
[data-theme="light"] .location-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .panel-card,
[data-theme="light"] .search-box,
[data-theme="light"] .enquire-form-wrap{
  background:#FFFFFF !important;
  border:1px solid rgba(8,37,103,.10) !important;
  box-shadow:0 10px 40px rgba(8,37,103,.08) !important;
}

[data-theme="light"] .form-control-dark,
[data-theme="light"] .search-field{
  background:#F4F7FD !important;
  border-color:rgba(8,37,103,.12) !important;
  color:#071B3A !important;
}

[data-theme="light"] .form-control-dark:focus,
[data-theme="light"] .search-field:focus{
  background:#E8F0FF !important;
  border-color:#082567 !important;
  box-shadow:0 0 0 3px rgba(8,37,103,.12) !important;
}

/* Login stays centered */
#page-login{
  min-height:100vh !important;
  width:100% !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:120px 20px 50px !important;
}

#page-login.active{
  display:flex !important;
}

#page-login .login-card{
  width:100% !important;
  max-width:460px !important;
  margin:0 auto !important;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.brand-logo{
    width:40px;
    height:40px;
    object-fit:contain;
    flex-shrink:0;
}

.brand-text h2{
    font-size:1.4rem !important;
    line-height:1;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-text span{
    font-size:.90rem !important;
    line-height:1;
    display:block;
    margin-top:4px;
    white-space:nowrap;
}


/* ═══════════════════════════════════════════════
   FINAL FIX — DARK THEME WHITE TEXT + NO WHITE NAVBAR
   Keep this ABSOLUTELY LAST inside <style>
═══════════════════════════════════════════════ */

/* Default theme is DARK because toggleTheme removes data-theme for dark */
:root{
  --gold:#0B3A8D;
  --gold-dark:#04163D;
  --gold-light:#7FA6E8;
  --gold-glow:rgba(127,166,232,0.14);

  --bg-base:#061124;
  --bg-surface:#091832;
  --bg-elevated:#10213F;
  --bg-card:#142847;
  --bg-input:#172D4F;
  --bg-input-focus:#1C3762;

  --navbar-bg:rgba(6,17,36,0.98);
  --sidebar-bg:#061124;

  --text-primary:#FFFFFF;
  --text-secondary:#C9D8F2;
  --text-muted:#8EA6CC;
  --text-inverse:#FFFFFF;

  --border-subtle:rgba(255,255,255,0.08);
  --border-medium:rgba(127,166,232,0.22);
  --border-strong:rgba(127,166,232,0.45);

  --shadow-sm:0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:0 8px 28px rgba(0,0,0,0.45);
  --shadow-lg:0 20px 56px rgba(0,0,0,0.55);
  --shadow-gold:0 0 32px rgba(127,166,232,0.12);

  --glass-bg:rgba(6,17,36,0.92);
  --glass-border:rgba(127,166,232,0.18);
  --scrollbar-track:#091832;
}

/* Light theme remains bright white */
[data-theme="light"]{
  --gold:#082567;
  --gold-dark:#04163D;
  --gold-light:#9DB9F2;
  --gold-glow:rgba(8,37,103,0.12);

  --bg-base:#FFFFFF;
  --bg-surface:#FFFFFF;
  --bg-elevated:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-input:#F4F7FD;
  --bg-input-focus:#E8F0FF;

  --navbar-bg:rgba(255,255,255,0.97);
  --sidebar-bg:#FFFFFF;

  --text-primary:#071B3A;
  --text-secondary:#243F67;
  --text-muted:#6E83A3;
  --text-inverse:#FFFFFF;

  --border-subtle:rgba(8,37,103,0.10);
  --border-medium:rgba(8,37,103,0.20);
  --border-strong:rgba(8,37,103,0.42);

  --shadow-sm:0 2px 8px rgba(8,37,103,0.06);
  --shadow-md:0 8px 28px rgba(8,37,103,0.10);
  --shadow-lg:0 20px 56px rgba(8,37,103,0.12);
  --shadow-gold:0 0 32px rgba(8,37,103,0.14);

  --glass-bg:rgba(255,255,255,0.96);
  --glass-border:rgba(8,37,103,0.12);
  --scrollbar-track:#F1F5FF;
}

/* DARK MODE: remove white strip from navbar */
html:not([data-theme="light"]) .navbar-main,
html:not([data-theme="light"]) .navbar-main.scrolled{
  background:#061124 !important;
  background-image:none !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:none !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

/* DARK MODE: public website text should be white */
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .page,
html:not([data-theme="light"]) .hero,
html:not([data-theme="light"]) .hero-bg,
html:not([data-theme="light"]) .locations-section,
html:not([data-theme="light"]) .projects-section,
html:not([data-theme="light"]) .about-section,
html:not([data-theme="light"]) .contact-section,
html:not([data-theme="light"]) footer{
  background:#061124 !important;
  color:#FFFFFF !important;
}

html:not([data-theme="light"]) .hero-bg{
  background:
    radial-gradient(circle at 18% 20%, rgba(127,166,232,.12), transparent 38%),
    radial-gradient(circle at 80% 30%, rgba(11,58,141,.20), transparent 42%),
    #061124 !important;
}

html:not([data-theme="light"]) .hero-headline,
html:not([data-theme="light"]) .hero-headline strong,
html:not([data-theme="light"]) .section-title,
html:not([data-theme="light"]) .section-title span,
html:not([data-theme="light"]) .project-name,
html:not([data-theme="light"]) .loc-name,
html:not([data-theme="light"]) .contact-value,
html:not([data-theme="light"]) .footer-brand span{
  color:#FFFFFF !important;
}

html:not([data-theme="light"]) .hero-headline em,
html:not([data-theme="light"]) .section-title em{
  color:#9DB9F2 !important;
  -webkit-text-fill-color:#9DB9F2 !important;
  background:none !important;
}

html:not([data-theme="light"]) .hero-sub,
html:not([data-theme="light"]) .section-sub,
html:not([data-theme="light"]) .loc-desc,
html:not([data-theme="light"]) .project-loc,
html:not([data-theme="light"]) .project-meta-item,
html:not([data-theme="light"]) .footer-link,
html:not([data-theme="light"]) .footer-bottom,
html:not([data-theme="light"]) .hero-stat-label{
  color:rgba(255,255,255,0.72) !important;
}

html:not([data-theme="light"]) .hero-eyebrow,
html:not([data-theme="light"]) .section-eyebrow,
html:not([data-theme="light"]) .hero-stat-num,
html:not([data-theme="light"]) .project-price,
html:not([data-theme="light"]) .prop-price,
html:not([data-theme="light"]) .loc-projects{
  color:#9DB9F2 !important;
}

/* DARK MODE: navbar brand and nav items */
html:not([data-theme="light"]) .nav-brand,
html:not([data-theme="light"]) .nav-brand span,
html:not([data-theme="light"]) .brand-text h2,
html:not([data-theme="light"]) .brand-text span{
  color:#FFFFFF !important;
}

html:not([data-theme="light"]) .nav-link-custom{
  color:rgba(255,255,255,0.76) !important;
}

html:not([data-theme="light"]) .nav-link-custom:hover,
html:not([data-theme="light"]) .nav-link-custom.active-nav{
  color:#FFFFFF !important;
}

html:not([data-theme="light"]) .btn-agent-login{
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,0.22) !important;
  background:rgba(255,255,255,0.04) !important;
}

html:not([data-theme="light"]) .btn-agent-login:hover{
  background:rgba(127,166,232,0.12) !important;
  border-color:#9DB9F2 !important;
}

/* DARK MODE: cards readable */
html:not([data-theme="light"]) .location-card,
html:not([data-theme="light"]) .project-card,
html:not([data-theme="light"]) .panel-card,
html:not([data-theme="light"]) .stat-card,
html:not([data-theme="light"]) .search-box,
html:not([data-theme="light"]) .enquire-form-wrap,
html:not([data-theme="light"]) .login-card{
  background:#10213F !important;
  border-color:rgba(127,166,232,0.16) !important;
  color:#FFFFFF !important;
}

/* LIGHT MODE: keep everything bright white */
[data-theme="light"] body,
[data-theme="light"] .page,
[data-theme="light"] .hero-bg,
[data-theme="light"] .locations-section,
[data-theme="light"] .projects-section,
[data-theme="light"] .about-section,
[data-theme="light"] .contact-section,
[data-theme="light"] .search-section,
[data-theme="light"] footer,
[data-theme="light"] .dashboard-page,
[data-theme="light"] .dash-main{
  background:#FFFFFF !important;
  color:#071B3A !important;
}

[data-theme="light"] .navbar-main,
[data-theme="light"] .navbar-main.scrolled{
  background:rgba(255,255,255,0.97) !important;
  background-image:none !important;
  border-bottom:1px solid rgba(8,37,103,0.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

[data-theme="light"] .nav-brand,
[data-theme="light"] .nav-brand span,
[data-theme="light"] .nav-link-custom,
[data-theme="light"] .brand-text h2,
[data-theme="light"] .brand-text span{
  color:#071B3A !important;
}

/* Buttons */
.btn-primary-gold,
.btn-enquire,
.loc-btn,
.search-btn{
  background:linear-gradient(135deg,#082567,#04163D) !important;
  color:#FFFFFF !important;
}

.btn-outline-gold{
  color:var(--gold-light) !important;
  border-color:rgba(127,166,232,0.24) !important;
}

[data-theme="light"] .btn-outline-gold{
  color:#082567 !important;
  border-color:rgba(8,37,103,0.20) !important;
}

/* Dashboard text in dark */
html:not([data-theme="light"]) .dashboard-page,
html:not([data-theme="light"]) .dash-main,
html:not([data-theme="light"]) .dash-title,
html:not([data-theme="light"]) .panel-card-title,
html:not([data-theme="light"]) .dash-table td{
  color:#FFFFFF !important;
}

html:not([data-theme="light"]) .dash-title span{
  color:#9DB9F2 !important;
}

/* Sidebar logo fit */
.sidebar-logo .brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  overflow:visible !important;
}

.sidebar-logo .brand-logo{
  width:40px !important;
  height:40px !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
}

.sidebar-logo .brand-text{
  min-width:0 !important;
  overflow:hidden !important;
}

.sidebar-logo .brand-text h2{
  font-size:1.05rem !important;
  line-height:1.05 !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.sidebar-logo .brand-text span{
  font-size:.62rem !important;
  line-height:1 !important;
  display:block !important;
  margin-top:4px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Login stays centered */
#page-login{
  min-height:100vh !important;
  width:100% !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  padding:120px 20px 50px !important;
}

#page-login.active{
  display:flex !important;
}

#page-login .login-card{
  width:100% !important;
  max-width:460px !important;
  margin:0 auto !important;
}

/* Hero carousel */
.hero-carousel{
  position:relative !important;
  width:100% !important;
  max-width:720px !important;
  height:430px !important;
  overflow:hidden !important;
  border-radius:28px !important;
  background:#0b2345 !important;
  box-shadow:0 35px 80px rgba(0,0,0,.28) !important;
  margin:0 auto !important;
}

.hero-carousel-track{
  display:flex !important;
  width:100% !important;
  height:100% !important;
}

.hero-slide{
  min-width:100% !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

.hero-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* ===== DASHBOARD NUMBERS WHITE ===== */

.stat-num,
#statProjects,
#statLeads,
#statLocations,
#statDeals {
    color: #ffffff !important;
}

/* Dashboard card labels */
.stat-label {
    color: rgba(255,255,255,0.85) !important;
}

/* Leads by Location title */
.panel-card-title,
.panel-card-title i {
    color: #ffffff !important;
}

/* Location names */
.chart-bar-label {
    color: #ffffff !important;
}

/* Graph values (1,2,3...) */
.chart-bar-val {
    color: #ffffff !important;
}

/* Leads by Location graph bars */
.chart-bar-fill {
    background: #ffffff !important;
}

/* Graph track */
.chart-bar-track {
    background: rgba(255,255,255,0.20) !important;
}

/* Recent Leads table text */
.dash-table td {
    color: #ffffff !important;
}

/* Table headers */
.dash-table th {
    color: rgba(255,255,255,0.75) !important;
}

/* Dashboard section headings */
.sidebar-section-label,
.dash-user,
#dashDate {
    color: rgba(255,255,255,0.75) !important;
}

/* Performance Overview heading */
.section-label,
.performance-title {
    color: #ffffff !important;
}

</style>
</head>
<body>

<!-- ══════════════════════════════════════════════════════
     NAVBAR
══════════════════════════════════════════════════════ -->
<nav class="navbar-main" id="mainNav">
  <div class="container">
    <div class="d-flex align-items-center justify-content-between">
      <div class="d-flex align-items-center gap-3">
        <a class="nav-brand" onclick="showPage('home')" style="display:flex;align-items:center;gap:10px;text-decoration:none;">
          <img src="/images/logo.png" class="site-logo" alt="SkyStone Logo">
          <span style="font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--gold);letter-spacing:0.05em;">SkyStone<i style="color:var(--text-primary);font-weight:100;"> Properties</i></span>
        </a>
        <span style="font-size:0.62rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-muted);border-left:1px solid var(--border-medium);padding-left:14px;line-height:1.3" class="d-none d-xl-block">Pune's Premier<br>Real Estate</span>
      </div>

      <!-- Desktop nav -->
      <div class="d-none d-lg-flex align-items-center">
        <span class="nav-link-custom" id="navHome" onclick="showPage('home')">Home</span>
        <span class="nav-link-custom" id="navLocations" onclick="showPage('locations')">Locations</span>
        <span class="nav-link-custom" id="navProjects" onclick="showPage('projects')">Projects</span>
        <span class="nav-link-custom" id="navAbout" onclick="showPage('about')">About</span>
        <span class="nav-link-custom" id="navContact" onclick="showPage('contact')">Contact</span>
        <button class="btn-enquire ms-3" onclick="showPage('enquire')">Enquire Now</button>
        <button class="btn-agent-login" onclick="showPage('login')"><i class="fas fa-lock me-1" style="font-size:0.7rem"></i> Agent Login</button>
        <button class="theme-toggle ms-2" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
          <i class="fas fa-sun icon-sun"></i>
          <i class="fas fa-moon icon-moon"></i>
        </button>
      </div>

      <!-- Mobile hamburger -->
      <button class="hamburger d-lg-none" id="hamburger" onclick="toggleMobile()">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>

<!-- Mobile Menu -->
<div class="mobile-menu" id="mobileMenu">
  <span class="mobile-link" onclick="showPage('home');toggleMobile()">Home</span>
  <span class="mobile-link" onclick="showPage('locations');toggleMobile()">Locations</span>
  <span class="mobile-link" onclick="showPage('projects');toggleMobile()">Projects</span>
  <span class="mobile-link" onclick="showPage('about');toggleMobile()">About</span>
  <span class="mobile-link" onclick="showPage('contact');toggleMobile()">Contact</span>
  <span class="mobile-link" onclick="showPage('enquire');toggleMobile()">Enquire Now</span>
  <span class="mobile-link" onclick="showPage('login');toggleMobile()">Agent Login</span>
  <div style="padding:20px 0;border-top:1px solid var(--border-subtle);margin-top:20px;display:flex;align-items:center;gap:12px">
    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
      <i class="fas fa-sun icon-sun"></i>
      <i class="fas fa-moon icon-moon"></i>
    </button>
    <span style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)" id="mobileThemeLabel">Dark Mode</span>
  </div>
</div>


<!-- ══════════════════════════════════════════════════════
     HOME PAGE
══════════════════════════════════════════════════════ -->
<div class="page active" id="page-home">
  <!-- HERO -->
  <section class="hero" id="heroSection">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>
    <div class="parallax-orb parallax-orb-1"></div>
    <div class="parallax-orb parallax-orb-2"></div>
    <div class="parallax-orb parallax-orb-3"></div>
    <div class="particles-container" id="particlesContainer"></div>
    <div class="hero-float-badge hero-float-badge-1"><i class="fas fa-shield-alt me-2"></i>RERA Verified</div>
    <div class="hero-float-badge hero-float-badge-2"><i class="fas fa-star me-2" style="font-size:0.65rem"></i>5★ Agent Rated</div>
    <div class="container">
      <div class="row align-items-center" style="padding-top:100px;padding-bottom:60px;">
        <div class="col-lg-6 col-xl-5">
          <div class="hero-content" style="padding-top:0;">
            <div class="hero-eyebrow">Pune's Premier Real Estate</div>
            <h1 class="hero-headline">
              Find Your <em>Dream</em><br>
              <strong>Home</strong> in Pune
            </h1>
            <p class="hero-sub">Curated luxury residences across Pune's most sought-after neighbourhoods. From Baner to Kharadi, discover properties that define modern living.</p>
            <div class="hero-ctas">
              <button class="btn-primary-gold" onclick="showPage('locations')"><span>Explore Locations</span></button>
              <button class="btn-outline-gold" onclick="showPage('enquire')">Get Free Consultation</button>
            </div>
            <div class="hero-stats">
              <div>
                <div class="hero-stat-num" id="heroStatLocations">10+</div>
                <div class="hero-stat-label">Prime Locations</div>
              </div>
              <div>
                <div class="hero-stat-num" id="heroStatFamilies">500+</div>
                <div class="hero-stat-label">Happy Families</div>
              </div>
              <div>
                <div class="hero-stat-num" id="heroStatProjects">₹40Cr</div>
                <div class="hero-stat-label">Properties Listed</div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-xl-7 d-none d-lg-block">
          <div class="hero-visual ps-4">
            <!-- Property Carousel -->
            <div class="hero-carousel">
  <div class="hero-carousel-track" id="heroCarouselTrack">

    <div class="hero-slide">
      <img src="/images/project1.jpg" alt="Luxury apartment tower">
    </div>

    <div class="hero-slide">
      <img src="/images/project2.jpg" alt="Modern residential building">
    </div>

    <div class="hero-slide">
      <img src="/images/project3.jpg" alt="Premium real estate project">
    </div>

    <div class="hero-slide">
      <img src="/images/project4.jpg" alt="Premium real estate project">
    </div>

    <div class="hero-slide">
      <img src="/images/project5.jpg" alt="Premium real estate project">
    </div>

    <div class="hero-slide">
      <img src="/images/project6.jpg" alt="Premium real estate project">
    </div>

    <div class="hero-slide">
      <img src="/images/project7.jpg" alt="Premium real estate project">
    </div>

    <div class="hero-slide">
      <img src="/images/project8.jpg" alt="Premium real estate project">
    </div>

  </div>

  <button class="hero-nav hero-prev" onclick="heroCarouselPrev()">‹</button>
  <button class="hero-nav hero-next" onclick="heroCarouselNext()">›</button>

                  <div style="background:var(--glass-bg);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--glass-border);">
                    <span style="font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);">3 & 4 BHK · Ready to Move</span>
                    <button class="btn-enquire" onclick="showPage('enquire')" style="padding:8px 18px;font-size:0.72rem;">Enquire</button>
                  </div>
                </div>
                <!-- Slide 2 -->
                <!-- <div class="hero-slide" style="min-width:100%;position:relative;">
                  <div style="width:100%;height:320px;background:linear-gradient(135deg,#0a1a30 0%,#163357 50%,#1B365D 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                    <div style="position:absolute;inset:0;background:radial-gradient(ellipse at 30% 60%,rgba(74,144,226,0.2),transparent 60%);"></div>
                    <i class="fas fa-building" style="font-size:5rem;color:rgba(74,144,226,0.3);position:absolute;left:40px;top:50%;transform:translateY(-50%);"></i>
                    <div style="position:relative;z-index:2;padding:32px;text-align:right;margin-left:auto;">
                      <div style="display:inline-block;font-size:0.68rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-inverse);background:var(--gold);padding:4px 10px;margin-bottom:12px;" id="heroCard2Tag">New Launch</div>
                      <div class="prop-name" id="heroCard2Name" style="font-size:1.8rem;margin-bottom:8px;">Skyline Vistas</div>
                      <div class="prop-loc" id="heroCard2Loc" style="margin-bottom:16px;"><i class="fas fa-map-marker-alt"></i> Wakad, Pune</div>
                      <div class="prop-price" id="heroCard2Price" style="font-size:2rem;">₹85 L <span>onwards</span></div>
                    </div>
                  </div>
                  <div style="background:var(--glass-bg);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--glass-border);">
                    <span style="font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);">2 & 3 BHK · Under Construction</span>
                    <button class="btn-enquire" onclick="showPage('enquire')" style="padding:8px 18px;font-size:0.72rem;">Enquire</button>
                  </div>
                </div> -->
                <!-- Slide 3 -->
                <!-- <div class="hero-slide" style="min-width:100%;position:relative;">
                  <div style="width:100%;height:320px;background:linear-gradient(135deg,#0c1f3a 0%,#1e4080 50%,#2563b8 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
                    <div style="position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(74,144,226,0.22),transparent 60%);"></div>
                    <i class="fas fa-home" style="font-size:5rem;color:rgba(74,144,226,0.28);position:absolute;right:30px;bottom:30px;"></i>
                    <div style="position:relative;z-index:2;padding:32px;text-align:center;width:100%;">
                      <div style="display:inline-block;font-size:0.68rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-inverse);background:var(--gold);padding:4px 10px;margin-bottom:12px;">Luxury</div>
                      <div class="prop-name" style="font-size:1.8rem;margin-bottom:8px;">Emerald Residences</div>
                      <div class="prop-loc" style="margin-bottom:16px;"><i class="fas fa-map-marker-alt"></i> Kharadi, Pune</div>
                      <div class="prop-price" style="font-size:2rem;">₹1.8 Cr <span>onwards</span></div>
                    </div>
                  </div>
                  <div style="background:var(--glass-bg);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--glass-border);">
                    <span style="font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted);">4 BHK Penthouses · RERA Verified</span>
                    <button class="btn-enquire" onclick="showPage('enquire')" style="padding:8px 18px;font-size:0.72rem;">Enquire</button>
                  </div>
                </div>
              </div> -->
              <!-- Carousel Controls -->
              <!-- <button onclick="heroCarouselPrev()" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(11,18,32,0.7);border:1px solid var(--glass-border);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;z-index:10;transition:all 0.2s;border-radius:2px;" onmouseover="this.style.background='var(--gold)';this.style.color='#fff'" onmouseout="this.style.background='rgba(11,18,32,0.7)';this.style.color='var(--gold)'"><i class="fas fa-chevron-left"></i></button>
              <button onclick="heroCarouselNext()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(11,18,32,0.7);border:1px solid var(--glass-border);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;z-index:10;transition:all 0.2s;border-radius:2px;" onmouseover="this.style.background='var(--gold)';this.style.color='#fff'" onmouseout="this.style.background='rgba(11,18,32,0.7)';this.style.color='var(--gold)'"><i class="fas fa-chevron-right"></i></button>
              Dots -->
              <div style="position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;" id="heroDots">
                <div onclick="heroCarouselGoTo(0)" style="width:8px;height:8px;border-radius:50%;background:var(--gold);cursor:pointer;transition:all 0.3s;opacity:1;" class="hero-dot"></div>
                <div onclick="heroCarouselGoTo(1)" style="width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s;" class="hero-dot"></div>
                <div onclick="heroCarouselGoTo(2)" style="width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s;" class="hero-dot"></div>
              </div>
              <!-- Active count badge -->
              <div style="position:absolute;top:14px;right:14px;background:rgba(74,144,226,0.15);border:1px solid var(--glass-border);padding:8px 14px;backdrop-filter:blur(8px);z-index:10;">
                <div id="heroActiveCount" style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--gold);font-weight:600;line-height:1;">24+</div>
                <div style="font-size:0.62rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;">Active Projects</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</div><!-- /home page -->


<!-- ══════════════════════════════════════════════════════
     LOCATIONS PAGE
══════════════════════════════════════════════════════ -->
<div class="page" id="page-locations">
  <section class="locations-section" style="padding-top:120px;position:relative;overflow:hidden;">
    <div class="locations-bg-orb locations-bg-orb-1"></div>
    <div class="locations-bg-orb locations-bg-orb-2"></div>
    <div class="container" style="position:relative;z-index:1;">
      <div class="row align-items-end mb-5">
        <div class="col-lg-6">
          <div class="section-eyebrow scroll-reveal">Explore Areas</div>
          <h2 class="section-title scroll-reveal">Prime Pune <em>Locations</em></h2>
          <p class="section-sub scroll-reveal">Navigate through Pune's top real estate corridors — each offering a unique lifestyle, connectivity, and investment potential.</p>
        </div>
        <div class="col-lg-6 text-lg-end scroll-reveal">
          <div class="lead-count-badge"><i class="fas fa-map-marker-alt me-2"></i>10 Prime Locations</div>
        </div>
      </div>
      <div class="row g-3" id="locationGridPage">
        <!-- Injected by JS -->
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-top:24px;border-top:1px solid var(--border-subtle);">
        <img src="/images/logo.png" alt="SkyStone Properties" style="height:50px; width:50px;object-fit:contain;">
        <span style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--gold);">SkyStone<span style="color:var(--text-primary);font-weight:300;"> Properties</span></span>
      </div>
      <div class="footer-bottom" style="padding-bottom:16px;">
        <span>© 2024 Skystone Properties. All rights reserved.</span>
        <span>Crafted with <span style="color:var(--gold)">♦</span> for Pune</span>
      </div>
    </div>
  </footer>
</div><!-- /locations page -->


<!-- ══════════════════════════════════════════════════════
     PROJECTS PAGE
══════════════════════════════════════════════════════ -->
<div class="page" id="page-projects">
  <section class="projects-section" style="padding-top:120px;">
    <div class="container">
      <div class="section-eyebrow scroll-reveal">Hand-Picked</div>
      <h2 class="section-title scroll-reveal">Featured <em>Projects</em></h2>
      <p class="section-sub scroll-reveal mb-5">Discover Pune's most sought-after residential developments, curated for discerning buyers.</p>
      <div class="row g-4" id="projectsGridPage">
        <!-- Injected by JS -->
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-top:24px;border-top:1px solid var(--border-subtle);">
        <img src="/images/logo.png" alt="SkyStone Properties" style="height:50px; width:50px;object-fit:contain;">
        <span style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--gold);">SkyStone<span style="color:var(--text-primary);font-weight:300;"> Properties</span></span>
      </div>
      <div class="footer-bottom" style="padding-bottom:16px;">
        <span>© 2024 Skystone Properties. All rights reserved.</span>
        <span>Crafted with <span style="color:var(--gold)">♦</span> for Pune</span>
      </div>
    </div>
  </footer>
</div><!-- /projects page -->


<!-- ══════════════════════════════════════════════════════
     ABOUT PAGE
═════════════════════════════════════════════════════ -->
<div class="page" id="page-about">
  <section class="about-section" style="padding-top:120px;position:relative;overflow:hidden;">
    <div class="about-parallax-num" aria-hidden="true">12</div>
    <div class="container" style="position:relative;z-index:1;">
      <div class="row gy-5">
        <div class="col-lg-5">
          <div class="about-img-block scroll-reveal">
            <div class="about-big-num">12</div>
            <div style="position:relative;z-index:2;text-align:center">
              <div style="font-family:'Cormorant Garamond',serif;font-size:5rem;font-weight:600;color:var(--gold);line-height:1">12</div>
              <div style="font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted2)">Years of Excellence</div>
              <div class="gold-line mx-auto mt-3"></div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--white);font-style:italic;margin-top:16px">"Redefining Pune's<br>residential landscape"</div>
              <div style="margin-top:40px;display:flex;justify-content:center;gap:40px">
                <div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold);font-weight:600">₹2000Cr</div>
                  <div style="font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em">Worth Transacted</div>
                </div>
                <div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold);font-weight:600">98%</div>
                  <div style="font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em">Client Satisfaction</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-7 ps-lg-5">
          <div class="section-eyebrow scroll-reveal">Our Story</div>
          <h2 class="section-title scroll-reveal">Pune's Most <em>Trusted</em><br>Real Estate Partner</h2>
          <p style="color:var(--muted2);font-size:0.95rem;line-height:1.8;margin-bottom:32px" class="scroll-reveal">Skystone Properties has been at the forefront of Pune's real estate evolution for over a decade. From helping first-time buyers find their dream 2BHK to guiding investors toward high-yield commercial spaces, we bring expertise, integrity, and unmatched local knowledge.</p>
          <div class="scroll-reveal">
            <div class="about-point">
              <div class="about-point-icon"><i class="fas fa-check"></i></div>
              <div>
                <div class="about-point-title">End-to-End Support</div>
                <div class="about-point-text">From site visits to registration, our agents handle every step of your property journey.</div>
              </div>
            </div>
            <div class="about-point">
              <div class="about-point-icon"><i class="fas fa-check"></i></div>
              <div>
                <div class="about-point-title">Verified Listings Only</div>
                <div class="about-point-text">Every project is RERA-verified and legally vetted before listing on our platform.</div>
              </div>
            </div>
            <div class="about-point">
              <div class="about-point-icon"><i class="fas fa-check"></i></div>
              <div>
                <div class="about-point-title">Local Market Expertise</div>
                <div class="about-point-text">Deep knowledge of Pune's micro-markets helps you invest in the right neighbourhood at the right time.</div>
              </div>
            </div>
            <div class="about-point" style="border-bottom:none">
              <div class="about-point-icon"><i class="fas fa-check"></i></div>
              <div>
                <div class="about-point-title">Zero Brokerage on Select Projects</div>
                <div class="about-point-text">Exclusive developer partnerships mean you save more on your biggest purchase.</div>
              </div>
            </div>
          </div>
          <button class="btn-primary-gold mt-4 scroll-reveal" onclick="showPage('enquire')"><span>Book a Consultation</span></button>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-top:24px;border-top:1px solid var(--border-subtle);">
        <img src="/images/logo.png" alt="Skystone Properties" style="height:40px;">
        <span style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--gold);">SkyStone<span style="color:var(--text-primary);font-weight:300;"> Properties</span></span>
      </div>
      <div class="footer-bottom" style="padding-bottom:16px;">
        <span>© 2024 Skystone Properties. All rights reserved.</span>
        <span>Crafted with <span style="color:var(--gold)">♦</span> for Pune</span>
      </div>
    </div>
  </footer>
</div><!-- /about page -->


<!-- ══════════════════════════════════════════════════════
     CONTACT PAGE
══════════════════════════════════════════════════════ -->
<div class="page" id="page-contact">
  <section class="contact-section" style="padding-top:120px;">
    <div class="container">
      <div class="row gy-5">
        <div class="col-lg-5">
          <div class="section-eyebrow scroll-reveal">Reach Us</div>
          <h2 class="section-title scroll-reveal">Let's <em>Talk</em></h2>
          <p style="color:var(--muted2);font-size:0.9rem;line-height:1.7;margin-bottom:40px" class="scroll-reveal">Whether you're buying, selling, or investing — our team of Pune property experts is just a message away.</p>
          <div class="scroll-reveal">
            <div class="contact-info-item">
              <div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
              <div><div class="contact-label">Office</div><div class="contact-value">Baner Road, Pune – 411045, Maharashtra</div></div>
            </div>
            <div class="contact-info-item">
              <div class="contact-icon"><i class="fab fa-whatsapp"></i></div>
              <div><div class="contact-label">WhatsApp</div><div class="contact-value">+91 8390959529</div></div>
            </div>
            <div class="contact-info-item">
              <div class="contact-icon"><i class="fas fa-envelope"></i></div>
              <div><div class="contact-label">Email</div><div class="contact-value">hello@skystoneproperties.com</div></div>
            </div>
            <div class="contact-info-item">
              <div class="contact-icon"><i class="fas fa-clock"></i></div>
              <div><div class="contact-label">Hours</div><div class="contact-value">Mon – Sat: 9:00 AM – 7:00 PM</div></div>
            </div>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="panel-card scroll-reveal" style="margin-bottom:0">
            <div style="font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--white);margin-bottom:24px">Send us a message</div>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label-gold">Name</label>
                <input type="text" class="form-control-dark" placeholder="Your full name">
              </div>
              <div class="col-md-6">
                <label class="form-label-gold">Phone</label>
                <input type="tel" class="form-control-dark" placeholder="+91 XXXXX XXXXX">
              </div>
              <div class="col-12">
                <label class="form-label-gold">Email</label>
                <input type="email" class="form-control-dark" placeholder="your@email.com">
              </div>
              <div class="col-12">
                <label class="form-label-gold">Message</label>
                <textarea class="form-control-dark" rows="4" placeholder="Tell us about your requirement..."></textarea>
              </div>
              <div class="col-12">
                <button class="btn-primary-gold w-100"><span>Send Message</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-top:24px;border-top:1px solid var(--border-subtle);">
        <img src="/images/logo.png" alt="Skystone Properties" style="height:40px;">
        <span style="font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--gold);">SkyStone<span style="color:var(--text-primary);font-weight:300;"> Properties</span></span>
      </div>
      <div class="footer-bottom" style="padding-bottom:16px;">
        <span>© 2024 Skystone Properties. All rights reserved.</span>
        <span>Crafted with <span style="color:var(--gold)">♦</span> for Pune</span>
      </div>
    </div>
  </footer>
</div><!-- /contact page -->


<!-- ══════════════════════════════════════════════════════
     ENQUIRE PAGE
══════════════════════════════════════════════════════ -->
<div class="page" id="page-enquire">
  <section class="enquire-page">
    <div class="container">
      <div class="text-center mb-5">
        <div class="section-eyebrow justify-content-center">Free Consultation</div>
        <h2 class="section-title">Find Your Perfect <em>Property</em></h2>
        <p style="color:var(--muted2);font-size:0.9rem;max-width:480px;margin:0 auto">Quick 60-second form. Our expert will WhatsApp you within the hour.</p>
      </div>

      <div class="enquire-form-wrap">
        <form id="enquireForm" onsubmit="submitEnquiry(event)">
          <div class="mb-4">
            <label class="form-label-gold">Your Name *</label>
            <input type="text" class="form-control-dark" id="enqName" placeholder="Full Name" required>
          </div>
          <div class="mb-4">
            <label class="form-label-gold">WhatsApp Number *</label>
            <input type="tel" class="form-control-dark" id="enqPhone" placeholder="+91 98765 XXXXX" required>
          </div>
          <div class="mb-4">
            <label class="form-label-gold">Preferred Location *</label>
            <select class="form-control-dark" id="enqLocation" required>
              <option value="">Select Location</option>
              <option>Baner</option><option>Balewadi</option><option>PCMC</option>
              <option>Wakad</option><option>Hinjewadi</option><option>Kharadi</option>
              <option>Viman Nagar</option><option>Hadapsar</option><option>Kothrud</option><option>Bavdhan</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="form-label-gold">Requirement *</label>
            <select class="form-control-dark" id="enqType" required>
              <option value="">Select Type</option>
              <option>1 BHK</option><option>2 BHK</option>
              <option>3 BHK</option><option>4 BHK</option><option>Commercial</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="form-label-gold">Budget Range *</label>
            <select class="form-control-dark" id="enqBudget" required>
              <option value="">Select Budget</option>
              <option>Under ₹50L</option><option>₹50L – ₹1Cr</option>
              <option>₹1Cr – ₹2Cr</option><option>₹2Cr – ₹5Cr</option><option>Above ₹5Cr</option>
            </select>
          </div>
          <button type="submit" class="btn-primary-gold w-100"><span><i class="fab fa-whatsapp me-2"></i>Submit Enquiry</span></button>
        </form>
        <div class="form-success" id="enqSuccess">
          <i class="fas fa-check-circle"></i>
          <p><strong style="color:var(--gold)">Thank you!</strong> Your enquiry has been received.<br>Our agent will WhatsApp you shortly.</p>
        </div>
      </div>
    </div>
  </section>
</div>


<!-- ══════════════════════════════════════════════════════
     LOGIN PAGE
══════════════════════════════════════════════════════ -->
<div class="page login-page" id="page-login">
  <div class="login-card">

    <div class="login-logo" style="display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;">
      <img src="images/logo.png" style="width:60px;height:60px;object-fit:contain;">
      <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:var(--gold);line-height:1.2;">SkyStone<span style="color:var(--text-primary);font-weight:300;"> Properties</span></div>
    </div>

    <div class="login-sub">Agent Portal — Secure Access</div>

    <div class="login-error" id="loginError">
      <i class="fas fa-exclamation-triangle me-2"></i>
      Invalid credentials. Please try again.
    </div>

    <form id="loginForm" onsubmit="doLogin(event)">
      <div class="mb-3">
        <label class="form-label-gold">Username</label>
        <input type="text" class="form-control-dark" id="loginUser" placeholder="agent" required>
      </div>

      <div class="mb-4">
        <label class="form-label-gold">Password</label>
        <input type="password" class="form-control-dark" id="loginPass" placeholder="••••••••" required>
      </div>

      <button type="submit" class="btn-primary-gold w-100">
        <span><i class="fas fa-sign-in-alt me-2"></i>Login to Dashboard</span>
      </button>
    </form>

    <div class="text-center mt-4">
      <span style="font-size:0.78rem;color:var(--muted);cursor:pointer" onclick="showPage('home')">
        <i class="fas fa-arrow-left me-1"></i>Back to website
      </span>
    </div>

    <div class="text-center mt-3">
      <div style="font-size:0.72rem;color:var(--muted);letter-spacing:0.08em">
        Demo: agent / agent123
      </div>
    </div>

  </div>
</div>


<!-- ══════════════════════════════════════════════════════
     DASHBOARD PAGE
══════════════════════════════════════════════════════ -->
<div class="dashboard-page" id="page-dashboard">

  <!-- SIDEBAR -->
  <aside class="sidebar">
    <div class="sidebar-logo">
      <div class="brand">
    <img src="images/logo.png" class="brand-logo">
    <div class="brand-text">
        <h2>SkyStone Properties</h2>
        <span>Pune's Premier Real Estate</span>
    </div>
</div>
<br>
      <div class="role" style="font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;">Agent Portal</div>
    </div>

    <nav class="sidebar-nav">

      <div class="sidebar-section-label">Overview</div>

<a class="sidebar-item active" onclick="switchPanel('overview',this)">
  <i class="fas fa-th-large"></i>
  Dashboard
</a>

<div class="sidebar-section-label">Manage</div>

<a class="sidebar-item" onclick="switchPanel('addProject',this)">
  <i class="fas fa-plus-circle"></i>
  Add Project
</a>

<a class="sidebar-item" onclick="switchPanel('projects',this)">
  <i class="fas fa-building"></i>
  All Projects
</a>

<a class="sidebar-item" onclick="switchPanel('leads',this)">
  <i class="fas fa-users"></i>
  Customer Leads
</a>

<a class="sidebar-item agent-only" onclick="switchPanel('brokers',this)">
  <i class="fas fa-user-tie"></i>
  Broker Management
</a>

      <div class="sidebar-section-label">Account</div>

      <a class="sidebar-item" onclick="showPage('home')">
        <i class="fas fa-globe"></i>
        View Website
      </a>

    </nav>

    <div class="sidebar-footer">
      <button class="logout-btn" onclick="doLogout()">
        <i class="fas fa-sign-out-alt"></i>
        Logout
      </button>
    </div>
  </aside>

  <!-- MAIN -->
  <main class="dash-main">
    <div class="dash-topbar">
      <div>
        <div class="dash-title">
          <span id="dashboardGreeting">Good Morning</span>,
          <span id="dashUserRoleText">Agent</span> 👋
        </div>
        <div style="font-size:0.78rem;color:var(--muted);margin-top:4px" id="dashDate"></div>
      </div>

      <div class="dash-user">
        <span class="d-none d-sm-inline" id="dashUserEmail">agent@skystoneproperties.com</span>
        <button class="dash-theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
          <i class="fas fa-sun icon-sun"></i>
          <i class="fas fa-moon icon-moon"></i>
        </button>
        <div class="dash-avatar"><i class="fas fa-user"></i></div>
      </div>
    </div>

    <!-- OVERVIEW PANEL -->
    <div class="dash-panel active" id="panel-overview">

      <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);margin-bottom:14px">
        Performance Overview
      </div>

      <div class="row g-3 mb-2">

        <div class="col-6 col-xl-3">
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-building"></i></div>
            <div class="stat-num" id="statProjects">0</div>
            <div class="stat-label">Active Projects</div>
            <div class="stat-trend"><i class="fas fa-database me-1"></i>Live from MySQL</div>
          </div>
        </div>

        <div class="col-6 col-xl-3">
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <div class="stat-num" id="statLeads">0</div>
            <div class="stat-label">Total Leads</div>
            <div class="stat-trend"><i class="fas fa-database me-1"></i>Customer Enquiries</div>
          </div>
        </div>

        <div class="col-6 col-xl-3">
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-handshake"></i></div>
            <div class="stat-num">8</div>
            <div class="stat-label">Deals Closed</div>
            <div class="stat-trend"><i class="fas fa-arrow-up me-1"></i>+2 this month</div>
          </div>
        </div>

        <div class="col-6 col-xl-3">
          <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-map-marker-alt"></i></div>
            <div class="stat-num" id="statLocations">10</div>
            <div class="stat-label">Locations Covered</div>
            <div class="stat-trend"><i class="fas fa-map me-1"></i>Prime Pune Areas</div>
          </div>
        </div>

      </div>

      <div style="height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,0.12),transparent);margin:20px 0 22px"></div>

      <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);margin-bottom:14px">
        Quick Actions
      </div>

      <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('addProject',document.querySelector('[onclick*=addProject]'))">
            <i class="fas fa-plus-circle"></i>
            <div>Add Project</div>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('leads',document.querySelector('[onclick*=leads]'))">
            <i class="fas fa-users"></i>
            <div>View Leads</div>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('projects',document.querySelector('[onclick*=projects]'))">
            <i class="fas fa-building"></i>
            <div>All Projects</div>
          </div>
        </div>

        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="showPage('home')">
            <i class="fas fa-globe"></i>
            <div>View Website</div>
          </div>
        </div>
      </div>

      <div class="row g-4">

        <div class="col-lg-6">
          <div class="panel-card" style="margin-bottom:0;height:100%">
            <div class="panel-card-title"><i class="fas fa-chart-bar"></i> Leads by Location</div>
            <div class="mini-chart-wrap" id="leadsChart">
              <div style="color:var(--muted);font-size:0.82rem;text-align:center;padding:20px">
                Submit an enquiry to see data
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="panel-card" style="margin-bottom:0;height:100%">
            <div class="panel-card-title"><i class="fas fa-users"></i> Recent Leads</div>
            <div style="overflow-x:auto">
              <table class="dash-table" id="recentLeadsTable">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>WhatsApp</th>
                    <th>Location</th>
                    <th>Type</th>
                    <th>Budget</th>
                  </tr>
                </thead>
                <tbody id="recentLeadsTbody">
                  <tr>
                    <td colspan="5" style="text-align:center;color:var(--muted);padding:30px;font-size:0.82rem">
                      No leads yet.
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    </div>

          <!-- Divider
      <div style="height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,110,0.12),transparent);margin:20px 0 22px"></div>

      Quick Actions label
      <div style="font-size:0.65rem;font-weight:700;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);margin-bottom:14px">Quick Actions</div>

      Quick Actions Row
      <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('addProject',document.querySelector('[onclick*=addProject]'))">
            <i class="fas fa-plus-circle"></i>
            <div>Add Project</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('leads',document.querySelector('[onclick*=leads]'))">
            <i class="fas fa-users"></i>
            <div>View Leads</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="switchPanel('projects',document.querySelector('[onclick*=projects]'))">
            <i class="fas fa-building"></i>
            <div>All Projects</div>
          </div>
        </div>
        <div class="col-6 col-md-3">
          <div class="quick-action" onclick="showPage('home')">
            <i class="fas fa-globe"></i>
            <div>View Website</div>
          </div>
        </div>
      </div> -->

      <!-- <div class="d-flex gap-2 flex-wrap mb-3">
  <button type="button" class="btn-export agent-only" onclick="openImportModal('brokers')">
  <i class="fas fa-file-import"></i> Import Brokers CSV
</button>

<button type="button" class="btn-export agent-only" onclick="exportBrokersCSV()">
  <i class="fas fa-download"></i> Export Brokers CSV
</button>
</div> -->

      <div class="dash-panel" id="panel-brokers">
  <div class="panel-card">
    <div class="panel-card-title">
      <i class="fas fa-user-tie"></i> Broker Management
    </div>

    <form id="brokerForm" onsubmit="createBroker(event)">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label-gold">Broker Name *</label>
          <input type="text" class="form-control-dark" id="brokerName" required>
        </div>

        <div class="col-md-6">
          <label class="form-label-gold">Email *</label>
          <input type="email" class="form-control-dark" id="brokerEmail" required>
        </div>

        <div class="col-md-6">
          <label class="form-label-gold">Phone</label>
          <input type="text" class="form-control-dark" id="brokerPhone">
        </div>

        <div class="col-md-6">
          <label class="form-label-gold">Username *</label>
          <input type="text" class="form-control-dark" id="brokerUsername" required>
        </div>

        <div class="col-md-6">
          <label class="form-label-gold">Password *</label>
          <input type="text" class="form-control-dark" id="brokerPassword" required>
        </div>

        <div class="col-md-6">
          <label class="form-label-gold">Status</label>
          <select class="form-control-dark" id="brokerStatus">
            <option>Active</option>
            <option>Inactive</option>
          </select>
        </div>

        <div class="col-12">
          <button type="submit" class="btn-primary-gold">
            <span><i class="fas fa-plus me-2"></i>Create Broker</span>
          </button>
        </div>
      </div>
    </form>

    <hr class="gold-divider">

    <div class="table-responsive">
      <table class="dash-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Broker</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Username</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody id="brokersTableBody">
          <tr>
            <td colspan="6" style="text-align:center;color:var(--muted)">No brokers loaded</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

    <!-- ADD PROJECT PANEL -->
    <div class="dash-panel" id="panel-addProject">
      <div class="panel-card">
        <div class="panel-card-title"><i class="fas fa-plus-circle"></i> Add New Project</div>
        <form id="addProjectForm" onsubmit="addProject(event)">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label-gold">Project Name *</label>
              <input type="text" class="form-control-dark" id="pName" placeholder="e.g. Celestia Heights" required>
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">Developer/Builder *</label>
              <input type="text" class="form-control-dark" id="pDeveloper" placeholder="Builder name" required>
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">Location *</label>
              <select class="form-control-dark" id="pLocation" required onchange="onLocationSelect(this.value)">
                <option value="">Select Location</option>
                <option>Baner</option><option>Balewadi</option><option>PCMC</option>
                <option>Wakad</option><option>Hinjewadi</option><option>Kharadi</option>
                <option>Viman Nagar</option><option>Hadapsar</option><option>Kothrud</option><option>Bavdhan</option>
              </select>
            </div>
            <!-- Drive folder auto-fill -->
            <div class="col-md-6" id="locationDriveInfo" style="display:none">
              <label class="form-label-gold">Documents Folder</label>
              <div style="background:var(--bg-card);border:1px solid var(--border-medium);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px">
                <i class="fas fa-folder-open" style="color:var(--gold);font-size:1.2rem"></i>
                <div style="flex:1;min-width:0">
                  <div style="font-size:0.78rem;color:var(--muted2);margin-bottom:4px">Google Drive Folder</div>
                  <div id="locationDriveName" style="font-size:0.85rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">-</div>
                </div>
                <a id="locationDriveBtn" href="#" target="_blank" class="btn-export" style="white-space:nowrap;font-size:0.75rem;padding:8px 14px">
                  <i class="fas fa-external-link-alt me-1"></i>Open Drive
                </a>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">Configuration *</label>
              <select class="form-control-dark" id="pConfig" required>
                <option value="">Select</option>
                <option>1 BHK</option><option>2 BHK</option>
                <option>3 BHK</option><option>4 BHK</option>
                <option>2 & 3 BHK</option><option>3 & 4 BHK</option><option>Commercial</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label-gold">Price Starting (₹) *</label>
              <input type="text" class="form-control-dark" id="pPrice" placeholder="e.g. 85 L" required>
            </div>
            <div class="col-md-4">
              <label class="form-label-gold">Carpet Area (sq.ft)</label>
              <input type="text" class="form-control-dark" id="pCarpet" placeholder="e.g. 650–950">
              <div class="form-hint">Saleable / carpet area range</div>
            </div>
            <div class="col-md-4">
              <label class="form-label-gold">Possession Date</label>
              <input type="month" class="form-control-dark" id="pPossession">
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">Status *</label>
              <select class="form-control-dark" id="pStatus" required>
                <option>Under Construction</option>
                <option>Ready to Move</option>
                <option>New Launch</option>
                <option>Sold Out</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">RERA Number</label>
              <input type="text" class="form-control-dark" id="pRera" placeholder="P52100XXXXXX">
            </div>
            <div class="col-12">
              <label class="form-label-gold">Description</label>
              <textarea class="form-control-dark" id="pDesc" rows="3" placeholder="Project highlights, nearby landmarks, key selling points..."></textarea>
            </div>

            <!-- Amenities -->
            <div class="col-12">
              <label class="form-label-gold">Amenities</label>
              <div id="amenityTags">
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-swimming-pool"></i> Swimming Pool</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-dumbbell"></i> Gymnasium</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-shield-alt"></i> 24/7 Security</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-car"></i> Car Parking</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-leaf"></i> Garden</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-child"></i> Kids Play Area</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-bolt"></i> Power Backup</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-wifi"></i> Club House</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-elevator"></i> Lift</span>
                <span class="amenity-tag" onclick="toggleAmenity(this)"><i class="fas fa-tint"></i> Water Supply</span>
              </div>
            </div>

            <!-- Brochure Upload -->
            <div class="col-md-6">
              <label class="form-label-gold">Brochure / Floorplan</label>
              <div class="drop-zone" id="brochureDropZone">
                <input type="file" id="pBrochure" accept=".pdf,.jpg,.jpeg,.png" onchange="handleBrochureUpload(this)">
                <div class="drop-zone-icon"><i class="fas fa-file-pdf"></i></div>
                <div class="drop-zone-text">Drop PDF or image here</div>
                <div class="drop-zone-sub">or click to browse · Max 10MB</div>
              </div>
              <div class="upload-preview" id="brochurePreview">
                <i class="fas fa-file-alt"></i>
                <span id="brochureFileName">file.pdf</span>
                <span style="margin-left:auto;cursor:pointer;color:var(--muted)" onclick="clearBrochure()"><i class="fas fa-times"></i></span>
              </div>
              <div class="progress-bar-wrap" id="brochureProgress">
                <div class="progress-bar-fill" id="brochureFill"></div>
              </div>
            </div>

            <div class="col-md-6">
              <label class="form-label-gold">Google Drive Folder Link</label>
              <input type="text" class="form-control-dark" id="pDrive" placeholder="https://drive.google.com/...">
              <div class="form-hint">Paste the shared Google Drive folder link for project documents</div>
            </div>

            <div class="col-12" style="padding-top:8px">
              <button type="submit" class="btn-primary-gold"><span><i class="fas fa-save me-2"></i>Save Project</span></button>
              <button type="button" onclick="document.getElementById('addProjectForm').reset();clearBrochure();" style="background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--muted2);padding:16px 24px;font-size:0.8rem;cursor:pointer;margin-left:12px;transition:all 0.2s;" onmouseover="this.style.borderColor='rgba(255,255,255,0.3)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.1)'">
                <i class="fas fa-undo me-1"></i> Reset Form
              </button>
            </div>
          </div>
        </form>
        <div class="form-success" id="projectSuccess" style="margin-top:16px">
          <i class="fas fa-check-circle"></i>
          <p><strong style="color:var(--gold)">Project added successfully!</strong><br>View it in the All Projects section.</p>
        </div>
      </div>
    </div>

    <!-- PROJECTS LIST PANEL -->
    <div class="dash-panel" id="panel-projects">
      <div class="panel-card">
        <div class="panel-card-title d-flex justify-content-between align-items-center" style="flex-wrap:wrap;gap:12px">
          <span><i class="fas fa-building"></i> All Projects</span>
          <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
            <div class="search-wrap">
              <i class="fas fa-search"></i>
              <input type="text" class="search-input-dark" placeholder="Search projects..." oninput="filterProjects(this.value)">
            </div>
            <button class="btn-export" onclick="openImportModal('projects')"><i class="fas fa-upload"></i> Import CSV</button>
            <button type="button" class="btn-export" onclick="exportProjectsCSV()"><i class="fas fa-download"></i> Export Projects</button>
            <button class="btn-primary-gold" style="font-size:0.75rem;padding:10px 18px" onclick="switchPanel('addProject',null)"><span><i class="fas fa-plus me-1"></i>Add New</span></button>
          </div>
        </div>
        <div style="overflow-x:auto">
          <table class="dash-table">
            <thead>
              <tr><th>#</th><th>Project Name</th><th>Location</th><th>Config</th><th>Carpet Area</th><th>Price</th><th>Possession</th><th>Status</th><th>Actions</th></tr>
            </thead>
            <tbody id="projectsTbody">
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- LEADS PANEL -->
    <div class="dash-panel" id="panel-leads">
      <div class="panel-card">
        <div class="panel-card-title d-flex justify-content-between align-items-center" style="flex-wrap:wrap;gap:12px">
          <span><i class="fas fa-users"></i> Customer Leads <span id="leadsCount" class="lead-count-badge ms-3" style="font-size:0.72rem">0 Total</span></span>
          <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
            <div class="search-wrap">
              <i class="fas fa-search"></i>
              <input type="text" class="search-input-dark" placeholder="Search leads..." oninput="filterLeads(this.value)">
            </div>
            <select 
              class="form-control-dark"
              style="padding:10px 32px 10px 12px;font-size:0.82rem;max-width:160px"
              onchange="filterLeadsByType(this.value)"
            >
              <option value="">All Types</option>
              <option value="1 BHK">1 BHK</option>
              <option value="2 BHK">2 BHK</option>
              <option value="3 BHK">3 BHK</option>
              <option value="4 BHK">4 BHK</option>
              <option value="Commercial">Commercial</option>
            </select>
            <button class="btn-export" onclick="openImportModal('leads')"><i class="fas fa-upload"></i> Import CSV</button>
            <button type="button" class="btn-export" onclick="exportLeadsCSV()"><i class="fas fa-download"></i> Export Leads</button>
          </div>
        </div>
        <div style="overflow-x:auto">
          <table class="dash-table">
            <thead>
              <tr><th>#</th><th>Name</th><th>WhatsApp</th><th>Location</th><th>Type</th><th>Budget</th><th>Status</th><th>Notes</th><th>Assign to<th>Date</th><th>Actions</th></tr>
            </thead>
            <tbody id="leadsTbody">
              <tr><td colspan="10" style="text-align:center;color:var(--muted);padding:30px">No leads submitted yet.</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- LOCATIONS PANEL -->
    <div class="dash-panel" id="panel-locations">
      <div class="panel-card">
        <div class="panel-card-title d-flex justify-content-between align-items-center" style="flex-wrap:wrap;gap:12px">
          <span><i class="fas fa-map-marker-alt"></i> Locations</span>
          <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
            <button class="btn-export" onclick="openImportModal('locations')"><i class="fas fa-upload"></i> Import CSV</button>
            <button class="btn-primary-gold" style="font-size:0.75rem;padding:10px 18px" onclick="switchPanel('addLocation',null)"><span><i class="fas fa-plus me-1"></i>Add Location</span></button>
          </div>
        </div>
        <div style="overflow-x:auto">
          <table class="dash-table">
            <thead>
              <tr><th>#</th><th>Name</th><th>Description</th><th>Drive Folder</th><th>Actions</th></tr>
            </thead>
            <tbody id="locationsTbody">
              <tr><td colspan="5" style="text-align:center;color:var(--muted);padding:30px">Loading locations...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ADD LOCATION PANEL -->
    <div class="dash-panel" id="panel-addLocation">
      <div class="panel-card">
        <div class="panel-card-title"><i class="fas fa-plus-circle"></i> Add New Location</div>
        <form id="addLocationForm" onsubmit="addLocation(event)">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label-gold">Location Name *</label>
              <input type="text" class="form-control-dark" id="locName" placeholder="e.g. Baner" required>
            </div>
            <div class="col-md-6">
              <label class="form-label-gold">Google Drive Folder Link</label>
              <input type="url" class="form-control-dark" id="locDrive" placeholder="https://drive.google.com/drive/folders/...">
              <div class="form-hint">Paste the shared Google Drive folder link for this location's documents</div>
            </div>
            <div class="col-12">
              <label class="form-label-gold">Description</label>
              <textarea class="form-control-dark" id="locDesc" rows="3" placeholder="Brief description of this location..."></textarea>
            </div>
            <div class="col-12" style="padding-top:8px">
              <button type="submit" class="btn-primary-gold"><span><i class="fas fa-save me-2"></i>Save Location</span></button>
            </div>
          </div>
        </form>
        <div class="form-success" id="locationSuccess" style="margin-top:16px;display:none">
          <i class="fas fa-check-circle"></i>
          <p><strong style="color:var(--gold)">Location added successfully!</strong></p>
        </div>
      </div>
    </div>

  </main>
</div>

<!-- CSV IMPORT MODAL -->
<div id="importModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);align-items:center;justify-content:center">
  <div style="background:var(--bg-elevated);border:1px solid var(--border-medium);border-radius:16px;padding:32px;max-width:620px;width:92%;max-height:82vh;overflow-y:auto;box-shadow:var(--shadow-lg)">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
      <h5 style="color:var(--gold);font-weight:600;margin:0"><i class="fas fa-file-csv me-2"></i>Import <span id="importTypeLabel">CSV</span></h5>
      <button onclick="closeImportModal()" style="background:none;border:none;color:var(--muted2);font-size:1.5rem;cursor:pointer;line-height:1">&times;</button>
    </div>
    <div id="importStep1">
      <div id="importDropZone" style="border:2px dashed var(--border-medium);border-radius:12px;padding:40px;text-align:center;cursor:pointer;margin-bottom:16px;transition:border-color 0.2s" onclick="document.getElementById('importFile').click()" onmouseenter="this.style.borderColor='var(--border-strong)'" onmouseleave="this.style.borderColor='var(--border-medium)'">
        <input type="file" id="importFile" accept=".csv" style="display:none" onchange="handleImportFile(this)">
        <div style="font-size:2.5rem;color:var(--gold);margin-bottom:12px"><i class="fas fa-file-csv"></i></div>
        <div style="font-size:0.95rem;color:var(--text-primary);margin-bottom:6px">Drop CSV file here or click to browse</div>
        <div style="font-size:0.78rem;color:var(--muted2)">.csv files only</div>
      </div>
      <div id="importTemplateHint" style="font-size:0.78rem;color:var(--muted2);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;padding:12px;line-height:1.7"></div>
    </div>
    <div id="importStep2" style="display:none">
      <div id="importSummaryBox" style="background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:16px;margin-bottom:16px;font-size:0.83rem;line-height:1.9"></div>
      <div style="overflow-x:auto;max-height:260px;overflow-y:auto;margin-bottom:16px">
        <table class="dash-table" id="importPreviewTable">
          <thead id="importPreviewHead"></thead>
          <tbody id="importPreviewBody"></tbody>
        </table>
      </div>
      <div style="display:flex;gap:12px">
        <button class="btn-export" onclick="resetImport()"><i class="fas fa-arrow-left me-1"></i>Back</button>
        <button class="btn-primary-gold" onclick="executeImport()"><span><i class="fas fa-upload me-2"></i>Confirm Import</span></button>
      </div>
    </div>
    <div id="importStep3" style="display:none;text-align:center;padding:32px 0">
      <div style="font-size:3rem;color:var(--gold);margin-bottom:16px"><i class="fas fa-check-circle"></i></div>
      <div id="importResultMsg" style="font-size:1rem;color:var(--text-primary);margin-bottom:8px"></div>
      <button class="btn-export" onclick="closeImportModal()" style="margin-top:16px">Close</button>
    </div>
  </div>
</div>

<!-- LEAD NOTES MODAL -->
<div id="notesModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);align-items:center;justify-content:center">
  <div style="background:var(--bg-elevated);border:1px solid var(--border-medium);border-radius:16px;padding:32px;max-width:480px;width:92%;box-shadow:var(--shadow-lg)">
    
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
      <h5 style="color:var(--gold);font-weight:600;margin:0">
        <i class="fas fa-sticky-note me-2"></i>Lead Notes
      </h5>
      <button onclick="closeNotesModal()" style="background:none;border:none;color:var(--muted2);font-size:1.5rem;cursor:pointer;line-height:1">&times;</button>
    </div>

    <div style="margin-bottom:12px;font-size:0.83rem;color:var(--muted2)">
      Lead: <strong id="notesLeadName" style="color:var(--text-primary)"></strong>
    </div>

    <label class="form-label-gold">Status</label>
    <select class="form-control-dark" id="notesStatus" style="margin-bottom:16px" onchange="toggleNotesField()">
      <option value="New">New</option>
      <option value="Contacted">Contacted</option>
      <option value="Follow Up">Follow Up</option>
      <option value="Interested">Interested</option>
      <option value="Site Visit">Site Visit</option>
      <option value="Negotiation">Negotiation</option>
      <option value="Closed">Closed</option>
      <option value="Lost">Lost</option>
    </select>

    <div id="notesFieldWrap" style="display:none">
      <label class="form-label-gold">Notes / Remarks</label>
      <textarea class="form-control-dark" id="notesText" rows="4" placeholder="Enter remarks, follow-up details, next steps..."></textarea>
    </div>

    <div class="agent-only" style="margin-top:16px">
      <label class="form-label-gold">Assign To Broker</label>
      <select class="form-control-dark" id="notesAssignTo">
        <option value="">Not Assigned</option>
      </select>
    </div>

    <div style="display:flex;gap:12px;margin-top:20px">
      <button class="btn-export" onclick="closeNotesModal()">Cancel</button>
      <button class="btn-primary-gold" onclick="saveLeadNotes()">
        <span><i class="fas fa-save me-1"></i>Save</span>
      </button>
    </div>

  </div>
</div>


<!-- ══════════════════════════════════════════════════════
     JAVASCRIPT
══════════════════════════════════════════════════════ -->
<script>

/* ─── THEME SYSTEM ──────────────────────────────── */
(function(){
  const saved = localStorage.getItem('skystone-theme');
  if(saved === 'light'){
    document.documentElement.setAttribute('data-theme','light');
  }
})();

function toggleTheme(){
  const html = document.documentElement;
  const isLight = html.getAttribute('data-theme') === 'light';
  const newTheme = isLight ? 'dark' : 'light';
  document.body.classList.add('theme-switching');
  setTimeout(() => document.body.classList.remove('theme-switching'), 350);
  if(newTheme === 'dark'){
    html.removeAttribute('data-theme');
  } else {
    html.setAttribute('data-theme','light');
  }
  localStorage.setItem('skystone-theme', newTheme);
  // Update mobile label
  const label = document.getElementById('mobileThemeLabel');
  if(label) label.textContent = newTheme === 'dark' ? 'Dark Mode' : 'Light Mode';
}

/* ─── DATA ─────────────────────────────────────── */
// const LOCATIONS = [
//   {name:"Baner",icon:"fa-city",desc:"Cosmopolitan hub with IT offices, cafes, and luxury high-rises. Close to Aundh & Balewadi.",projects:6,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_BANER"},
//   {name:"Balewadi",icon:"fa-trophy",desc:"Sports-centric locality near Balewadi Stadium. Growing fast with premium gated communities.",projects:4,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_BALEWADI"},
//   {name:"PCMC",icon:"fa-industry",desc:"Pimpri-Chinchwad's industrial-to-residential boom. Excellent infrastructure & Metro connectivity.",projects:8,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_PCMC"},
//   {name:"Wakad",icon:"fa-road",desc:"Strategic location on Mumbai-Pune Expressway with booming residential and commercial projects.",projects:5,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_WAKAD"},
//   {name:"Hinjewadi",icon:"fa-laptop-code",desc:"Pune's IT capital. Perfect for working professionals with tech parks and modern apartments.",projects:7,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_HINJEWADI"},
//   {name:"Kharadi",icon:"fa-wifi",desc:"Eastern IT corridor with premium high-rises, close to EON IT Park and Nagar Road.",projects:5,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_KHARADI"},
//   {name:"Viman Nagar",icon:"fa-plane",desc:"Airport proximity with upscale malls, hotels, and premium residential developments.",projects:4,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_VIMANNAGAR"},
//   {name:"Hadapsar",icon:"fa-chart-line",desc:"Fastest growing corridor with affordable to luxury options near Magarpatta City.",projects:6,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_HADAPSAR"},
//   {name:"Kothrud",icon:"fa-leaf",desc:"Green and culturally rich western suburb. Mature neighbourhood with premium realty.",projects:3,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_KOTHRUD"},
//   {name:"Bavdhan",icon:"fa-mountain",desc:"Scenic hillside locale with luxury villas and spacious apartments. Emerging hotspot.",projects:3,drive:"https://drive.google.com/drive/folders/PLACEHOLDER_BAVDHAN"},
// ];


let leads = [];
let isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
let currentUser = JSON.parse(localStorage.getItem("agentUser") || "null");

async function searchProperties() {

  const location =
    document.getElementById("searchLocation").value.toLowerCase();

  const type =
    document.getElementById("searchType").value.toLowerCase();

  const response = await fetch(
    "http://127.0.0.1:8000/api/get-projects"
  );

  const result = await response.json();

  if (!result.success) return;

  const filtered = result.data.filter(p => {

    const matchLocation =
      location === "" ||
      (p.location || "").toLowerCase() === location;

    const matchType =
      type === "" ||
      (p.flat_type || "").toLowerCase().includes(type);

    return matchLocation && matchType;
  });

  renderProjectsGrid(filtered);

  document
    .getElementById("projects")
    .scrollIntoView({ behavior: "smooth" });
}

function renderProjectsGrid(projects) {
  const grid = document.getElementById("projectsGrid");

  if (!grid) return;


  grid.innerHTML = projects.map((p, i) => `
    <div class="col-md-6 col-lg-4 scroll-reveal" style="transition-delay:${i * 0.08}s">
      <div class="project-card">
        <div class="project-img"><i class="fas fa-building"></i></div>
        <div class="project-badge">${p.status || "Featured"}</div>

        <div class="project-body">
          <div class="project-type">${p.flat_type || "Residential"}</div>
          <div class="project-name">${p.project_name || "-"}</div>
          <div class="project-loc">
            <i class="fas fa-map-marker-alt"></i> ${p.location || "Pune"}
          </div>

          <div class="project-meta">
            <div class="project-meta-item">
              <i class="fas fa-ruler-combined"></i>${p.carpet_area || "—"}
            </div>
            <div class="project-meta-item">
              <i class="fas fa-calendar"></i>${p.possession_date || "—"}
            </div>
          </div>

          <div class="project-price-row">
            <div class="project-price">₹${p.price_range || "Price on Request"}</div>
            ${p.brochure_url ? `<a href="${p.brochure_url}" target="_blank" class="loc-btn">Brochure</a>` : ""}
          </div>
        </div>
      </div>
    </div>
  `).join("");

  initScrollReveal();
}

/* ─── PAGE ROUTING ──────────────────────────────── */
function showPage(pageId) {
  // Hide dashboard
  const dashboard = document.getElementById("page-dashboard");
  if (dashboard) {
    dashboard.classList.remove("active");
    dashboard.style.display = "none";
  }

  // Show public navbar
  document.body.classList.remove("dashboard-active");
  const mainNav = document.getElementById("mainNav");
  if (mainNav) mainNav.style.display = "";

  // Hide all public pages
  document.querySelectorAll(".page").forEach(page => {
    page.classList.remove("active");
    page.style.display = "none";
  });

  // Show selected page
  const target = document.getElementById("page-" + pageId);
  if (target) {
    target.classList.add("active");
    target.style.display = "block";
  }

  // Navbar active state
  document.querySelectorAll(".nav-link-custom").forEach(link => {
    link.classList.remove("active-nav");
  });

  const activeLink = document.querySelector(`[onclick="showPage('${pageId}')"]`);
  if (activeLink && activeLink.classList.contains("nav-link-custom")) {
    activeLink.classList.add("active-nav");
  }

  // Load page-specific data
  if (pageId === "locations" && typeof renderLocations === "function") {
    renderLocations();
  }

  if (pageId === "projects" && typeof renderFeaturedProjects === "function") {
    renderFeaturedProjects();
  }

  if (pageId === "home" && typeof renderFeaturedProjects === "function") {
    renderFeaturedProjects();
  }

  window.scrollTo(0, 0);
}

/* ─── NAVBAR SCROLL ─────────────────────────────── */
window.addEventListener('scroll',()=>{
  document.getElementById('mainNav').classList.toggle('scrolled',window.scrollY>60);
});

/* ─── MOBILE NAV ─────────────────────────────────── */
function toggleMobile(){
  const m=document.getElementById('mobileMenu');
  const h=document.getElementById('hamburger');
  m.classList.toggle('open');
  h.classList.toggle('open');
}

/* ─── SCROLL TO ─────────────────────────────────── */
function scrollToSection(id){
  if(document.getElementById('page-home').classList.contains('active')){
    document.getElementById(id)?.scrollIntoView({behavior:'smooth'});
  } else {
    showPage('home');
    setTimeout(()=>document.getElementById(id)?.scrollIntoView({behavior:'smooth'}),300);
  }
}

/* ─── RENDER LOCATIONS ──────────────────────────── */
async function renderLocations() {
    const grid = document.getElementById("locationGridPage");

    if (!grid) {
        console.error("locationGridPage not found");
        return;
    }

    try {
        const response = await fetch("http://127.0.0.1:8000/api/get-locations");
        const result = await response.json();

        if (!result.success || result.data.length === 0) {
            grid.innerHTML = `<div class="col-12 text-center" style="color:var(--muted)">No locations found.</div>`;
            return;
        }

        grid.innerHTML = result.data.map((loc, i) => `
            <div class="col-sm-6 col-lg-4 col-xl-3 scroll-reveal" style="transition-delay:${i * 0.05}s">
                <a 
                    class="location-card" 
                    href="${loc.drive_link || '#'}" 
                    target="_blank"
                >
                    <div class="loc-color-bar"></div>
                    <div class="loc-body">
                        <div class="loc-icon"><i class="fas fa-map-marker-alt"></i></div>
                        <div class="loc-name">${loc.name}</div>
                        <div class="loc-desc">${loc.description || 'Explore properties in this location.'}</div>
                        <div class="loc-projects">View Folder</div>
                        <span class="loc-btn">
                            Open Drive <i class="fas fa-arrow-right"></i>
                        </span>
                    </div>
                </a>
            </div>
        `).join("");

        initScrollReveal();

    } catch (error) {
        console.error(error);
        grid.innerHTML = `<div class="col-12 text-center" style="color:#f88">Could not load locations.</div>`;
    }
}

/* ─── RENDER FEATURED PROJECTS ──────────────────── */
async function renderFeaturedProjects() {
  const grid = document.getElementById("projectsGridPage");

  if (!grid) {
    console.error("Project grid not found. Add id='projectsGrid' to your projects container.");
    return;
  }

  try {
    const response = await fetch("http://127.0.0.1:8000/api/get-projects");
    const result = await response.json();

    console.log("[Skystone Properties] get-projects.php →", result);

    if (!result.success || !result.data || result.data.length === 0) {
      grid.innerHTML = `<div class="col-12 text-center" style="color:var(--muted)">No projects added yet.</div>`;
      return;
    }

    grid.innerHTML = result.data.slice(0, 6).map((p, i) => `
      <div class="col-md-6 col-lg-4 scroll-reveal" style="transition-delay:${i * 0.08}s">
        <div class="project-card">
          <div class="project-img"><i class="fas fa-building"></i></div>
          <div class="project-badge">Featured</div>

          <div class="project-body">
            <div class="project-type">${p.flat_type || "Residential"}</div>
            <div class="project-name">${p.project_name || "-"}</div>
            <div class="project-loc">
              <i class="fas fa-map-marker-alt"></i> ${p.location || "Pune"}
            </div>

            <div class="project-meta">
              <div class="project-meta-item">
                <i class="fas fa-ruler-combined"></i>${p.carpet_area || "—"}
              </div>
              <div class="project-meta-item">
                <i class="fas fa-calendar"></i>${p.possession_date || "—"}
              </div>
            </div>

            <div class="project-price-row">
              <div class="project-price">${p.price_range || "Price on Request"}</div>
              ${p.brochure_url ? `<a href="${p.brochure_url}" target="_blank" class="loc-btn">Brochure</a>` : ""}
            </div>
          </div>
        </div>
      </div>
    `).join("");

    if (typeof initScrollReveal === "function") {
      initScrollReveal();
    }

  } catch (error) {
    console.error("renderFeaturedProjects error:", error);
    grid.innerHTML = `<div class="col-12 text-center" style="color:#f88">Could not load projects.</div>`;
  }
}

/* ─── HOME PAGE LIVE DATA ────────────────────────── */
async function loadHomeData() {

  // ── Stats ─────────────────────────────────────────
  try {
    const dashRes = await fetch("http://127.0.0.1:8000/api/dashboard?ts=" + Date.now());
    const dash = await dashRes.json();
    console.log("[Skystone Properties] dashboard.php →", dash);

    const s = dash.stats || dash || {};
    const loc  = document.getElementById('heroStatLocations');
    const fam  = document.getElementById('heroStatFamilies');
    const proj = document.getElementById('heroStatProjects');
    const ac   = document.getElementById('heroActiveCount');

    const locCount  = s.locations || s.location_count || s.total_locations || null;
    const leadCount = s.leads     || s.lead_count     || s.total_leads     || null;
    const projCount = s.projects  || s.project_count  || s.total_projects  || null;

    if (loc  && locCount  != null) loc.textContent  = locCount + '+';
    if (fam  && leadCount != null) fam.textContent  = leadCount + '+';
    if (proj && projCount != null) proj.textContent = projCount + '+';
    if (ac   && projCount != null) ac.textContent   = projCount + '+';

  } catch(e) { console.warn("[Skystone Properties] dashboard.php failed:", e); }

  // ── Featured project cards ────────────────────────
  try {
    const projRes  = await fetch("http://127.0.0.1:8000/api/get-projects");
    const projData = await projRes.json();
    console.log("[Skystone Properties] get-projects.php →", projData);

    // Normalise — API may wrap in .data or return array directly
    const list = Array.isArray(projData) ? projData
                : Array.isArray(projData.data) ? projData.data
                : [];

    if (list.length === 0) { console.warn("[Skystone Properties] No projects returned"); return; }

    // Helper: pick first truthy value from multiple possible field names
    const pick = (obj, ...keys) => { for (const k of keys) if (obj[k]) return obj[k]; return ''; };

    const p1 = list[0];
    const p2 = list[1] || null;

    // ─ Card 1 (large) ─
    const c1Name  = document.getElementById('heroCard1Name');
    const c1Loc   = document.getElementById('heroCard1Loc');
    const c1Price = document.getElementById('heroCard1Price');
    const c1Tag   = document.getElementById('heroCard1Tag');

    const name1  = pick(p1, 'project_name','name','title');
    const loc1   = pick(p1, 'location','area','city') || 'Pune';
    const price1 = pick(p1, 'price_range','price','price_min','starting_price') || 'Price on Request';
    const tag1   = pick(p1, 'status','badge','tag') || 'Premium';

    if (c1Name)  c1Name.textContent = name1;
    if (c1Loc)   c1Loc.innerHTML    = `<i class="fas fa-map-marker-alt"></i>${loc1}`;
    if (c1Price) c1Price.innerHTML  = `${price1} <span>onwards</span>`;
    if (c1Tag)   c1Tag.textContent  = tag1;

    // ─ Card 2 (small) ─
    if (p2) {
      const c2Name  = document.getElementById('heroCard2Name');
      const c2Loc   = document.getElementById('heroCard2Loc');
      const c2Price = document.getElementById('heroCard2Price');
      const c2Tag   = document.getElementById('heroCard2Tag');

      const name2  = pick(p2, 'project_name','name','title');
      const loc2   = pick(p2, 'location','area','city') || 'Pune';
      const price2 = pick(p2, 'price_range','price','price_min','starting_price') || '';
      const tag2   = pick(p2, 'status','badge','tag') || 'New';

      if (c2Name)  c2Name.textContent = name2;
      if (c2Loc)   c2Loc.innerHTML    = `<i class="fas fa-map-marker-alt"></i>${loc2}`;
      if (c2Price) c2Price.innerHTML  = `${price2} <span>+</span>`;
      if (c2Tag)   c2Tag.textContent  = tag2;
    }

  } catch(e) { console.warn("[Skystone Properties] get-projects.php failed:", e); }
}


async function renderLocationsPage(){
  const grid = document.getElementById('locationGridPage');
  if(!grid) return;
  try {
    const response = await fetch("http://127.0.0.1:8000/api/get-locations");
    const result = await response.json();
    if(!result.success || !result.data.length){ grid.innerHTML = staticLocationCards(); initScrollReveal(); return; }
    grid.innerHTML = result.data.map((loc, i) => `
      <div class="col-sm-6 col-lg-4 col-xl-3 scroll-reveal" style="transition-delay:${i * 0.05}s">
        <a class="location-card" href="${loc.drive_link || '#'}" target="_blank">
          <div class="loc-color-bar"></div>
          <div class="loc-body">
            <div class="loc-icon"><i class="fas fa-map-marker-alt"></i></div>
            <div class="loc-name">${loc.name}</div>
            <div class="loc-desc">${loc.description || 'Explore properties in this location.'}</div>
            <span class="loc-btn">View Folder <i class="fas fa-arrow-right"></i></span>
          </div>
        </a>
      </div>`).join('');
    initScrollReveal();
  } catch(e){ grid.innerHTML = staticLocationCards(); initScrollReveal(); }
}
function staticLocationCards(){
  const locs=[
    {n:'Baner',d:'IT corridor with premium apartments and vibrant nightlife.'},
    {n:'Balewadi',d:'Fast-growing suburb near the sports complex and IT parks.'},
    {n:'PCMC',d:'Industrial and residential hub with excellent connectivity.'},
    {n:'Wakad',d:'Upcoming hotspot with affordable luxury and great infrastructure.'},
    {n:'Hinjewadi',d:"Pune's IT capital with world-class residential projects."},
    {n:'Kharadi',d:'Rising east Pune location near EON IT Park.'},
    {n:'Viman Nagar',d:'Cosmopolitan neighbourhood close to the airport.'},
    {n:'Hadapsar',d:'Expanding area with mixed residential and commercial growth.'},
    {n:'Kothrud',d:'Established locality popular with families and professionals.'},
    {n:'Bavdhan',d:'Serene hill-view area with premium gated communities.'}
  ];
  return locs.map((loc,i)=>`
    <div class="col-sm-6 col-lg-4 col-xl-3 scroll-reveal" style="transition-delay:${i*0.05}s">
      <div class="location-card" style="cursor:default">
        <div class="loc-color-bar"></div>
        <div class="loc-body">
          <div class="loc-icon"><i class="fas fa-map-marker-alt"></i></div>
          <div class="loc-name">${loc.n}</div>
          <div class="loc-desc">${loc.d}</div>
          <button class="loc-btn" onclick="showPage('enquire')">Enquire <i class="fas fa-arrow-right"></i></button>
        </div>
      </div>
    </div>`).join('');
}

/* ─── PROJECTS PAGE RENDER ──────────────────────── */
async function renderProjectsPage(){
  const grid = document.getElementById('projectsGridPage');
  if(!grid) return;
  try {
    const response = await fetch("http://127.0.0.1:8000/api/get-projects");
    const result = await response.json();
    if(!result.success || !result.data.length){
      grid.innerHTML=`<div class="col-12 text-center" style="color:var(--muted);padding:40px 0">No projects added yet.</div>`;
      return;
    }
    grid.innerHTML = result.data.map((p,i)=>`
      <div class="col-md-6 col-lg-4 scroll-reveal" style="transition-delay:${i*0.08}s">
        <div class="project-card">
          <div class="project-img"><i class="fas fa-building"></i></div>
          <div class="project-badge">Featured</div>
          <div class="project-body">
            <div class="project-type">${p.flat_type||'Residential'}</div>
            <div class="project-name">${p.project_name}</div>
            <div class="project-loc"><i class="fas fa-map-marker-alt"></i> ${p.location||'Pune'}</div>
            <div class="project-meta">
              <div class="project-meta-item"><i class="fas fa-ruler-combined"></i>${p.carpet_area||'—'}</div>
              <div class="project-meta-item"><i class="fas fa-calendar"></i>${p.possession_date||'—'}</div>
            </div>
            <div class="project-price-row">
              <div class="project-price">${p.price_range||'Price on Request'}</div>
              ${p.brochure_url?`<a href="${p.brochure_url}" target="_blank" class="loc-btn">Brochure</a>`:''}
            </div>
          </div>
        </div>
      </div>`).join('');
    initScrollReveal();
  } catch(e){
    grid.innerHTML=`<div class="col-12 text-center" style="color:#f88;padding:40px 0">Could not load projects.</div>`;
  }
}

/* ─── SCROLL REVEAL ─────────────────────────────── */
function initScrollReveal(){
  const obs = new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if(e.isIntersecting){
        const delay = parseFloat(e.target.style.transitionDelay || 0);
        setTimeout(()=>e.target.classList.add('revealed'), delay * 1000);
        obs.unobserve(e.target);
      }
    });
  },{threshold:0.12, rootMargin:'0px 0px -40px 0px'});
  document.querySelectorAll('.scroll-reveal:not(.revealed)').forEach(el=>obs.observe(el));
}

/* ─── ENQUIRY FORM ──────────────────────────────── */
async function submitEnquiry(event) {
    event.preventDefault();
    event.stopPropagation();

    const form = document.getElementById("enquireForm");
    const btn  = form ? form.querySelector('button[type="submit"]') : null;

    // Guard against double-submit
    if (form && form.dataset.submitting === 'true') return;
    if (form) form.dataset.submitting = 'true';
    if (btn)  { btn.disabled = true; btn.querySelector('span').innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Submitting…'; }

    const data = {
        customer_name:      document.getElementById("enqName").value.trim(),
        whatsapp_number:    document.getElementById("enqPhone").value.trim(),
        preferred_location: document.getElementById("enqLocation").value,
        requirement:        document.getElementById("enqType").value,
        budget_range:       document.getElementById("enqBudget").value
    };

    // Reject if all fields are blank (safety net)
    if (!data.customer_name && !data.whatsapp_number) {
        if (form) form.dataset.submitting = 'false';
        if (btn)  { btn.disabled = false; btn.querySelector('span').innerHTML = '<i class="fab fa-whatsapp me-2"></i>Submit Enquiry'; }
        return;
    }

    try {
        const response = await fetch(
            "http://127.0.0.1:8000/api/add-lead",
            {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data)
            }
        );

        // Read raw text first so we can log it if JSON parse fails
        const rawText = await response.text();
        console.log("[Skystone Properties] add-lead raw response:", rawText);

        let result;
        try {
            result = JSON.parse(rawText);
        } catch(parseErr) {
            console.error("[Skystone Properties] add-lead.php returned non-JSON:", rawText);
            alert("Server error (invalid response). Check Console for details.\n\n" + rawText.substring(0, 300));
            if (form) form.dataset.submitting = 'false';
            if (btn) { btn.disabled = false; btn.querySelector('span').innerHTML = '<i class="fab fa-whatsapp me-2"></i>Submit Enquiry'; }
            return;
        }

        if (result.success) {
            form.style.display = "none";
            document.getElementById("enqSuccess").style.display = "block";
        } else {
            console.error("[Skystone Properties] add-lead error:", result.error || result);
            alert("Lead not saved: " + (result.error || "Unknown error"));
            if (btn) { btn.disabled = false; btn.querySelector('span').innerHTML = '<i class="fab fa-whatsapp me-2"></i>Submit Enquiry'; }
        }
    } catch (error) {
        console.error("[Skystone Properties] fetch failed:", error);
        alert("Could not reach server. Is XAMPP running?\n\n" + error.message);
        if (btn) { btn.disabled = false; btn.querySelector('span').innerHTML = '<i class="fab fa-whatsapp me-2"></i>Submit Enquiry'; }
    } finally {
        if (form) form.dataset.submitting = 'false';
    }
}

/* ─── LOGIN ─────────────────────────────────────── */
/* Demo credentials (offline fallback) */
const DEMO_USERS = [
  { username: "agent",  password: "agent123",  role: "agent",  name: "Agent" },
  { username: "admin",  password: "admin123",  role: "agent",  name: "Admin" },
  { username: "broker", password: "broker123", role: "broker", name: "Broker" }
];

async function doLogin(e) {
  if (e) e.preventDefault();

  const username = document.getElementById("loginUser").value.trim();
  const password = document.getElementById("loginPass").value.trim();
  const errorBox = document.getElementById("loginError");

  if (errorBox) errorBox.style.display = "none";

  const isServed =
    location.protocol === "http:" || location.protocol === "https:";

  if (isServed) {
    try {
      let res = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: JSON.stringify({ username, password })
      });

      let data = await res.json();

      if (data.success) {
        localStorage.setItem("isLoggedIn", "true");
        localStorage.setItem("userRole", "agent");
        localStorage.setItem(
          "loggedUser",
          JSON.stringify(data.agent || { name: "Agent", username })
        );

        showDashboardForRole("agent");
        return;
      }

      res = await fetch("/api/broker-login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: JSON.stringify({ username, password })
      });

      data = await res.json();

      if (data.success) {
        localStorage.setItem("isLoggedIn", "true");
        localStorage.setItem("userRole", "broker");
        localStorage.setItem("loggedUser", JSON.stringify(data.user));

        showDashboardForRole("broker");
        return;
      }

    } catch (err) {
      console.warn("[Login] Backend unreachable, trying demo credentials:", err.message);
    }
  }

  const match = DEMO_USERS.find(
    u => u.username === username && u.password === password
  );

  if (match) {
    localStorage.setItem("isLoggedIn", "true");
    localStorage.setItem("userRole", match.role);
    localStorage.setItem(
      "loggedUser",
      JSON.stringify({
        name: match.name,
        username: match.username
      })
    );

    showDashboardForRole(match.role);
    return;
  }

  if (errorBox) {
    errorBox.style.display = "block";
    errorBox.innerHTML =
      `<i class="fas fa-exclamation-triangle me-2"></i>Invalid credentials. Demo: agent / agent123`;
  }
}

function doLogout() {
  localStorage.removeItem("isLoggedIn");
  localStorage.removeItem("userRole");
  localStorage.removeItem("loggedUser");

  document.querySelectorAll(".page, .dashboard-page").forEach(p => {
    p.classList.remove("active");
    p.style.display = "none";
  });

  document.body.classList.remove("dashboard-active");

  const mainNav = document.getElementById("mainNav");
  if (mainNav) mainNav.style.display = "";

  showPage("home");
}

function showDashboardForRole(role) {
  document.querySelectorAll(".page, .dashboard-page").forEach(p => {
    p.classList.remove("active");
    p.style.display = "none";
  });

  // Hide public navbar and mobile menu on dashboard
  document.body.classList.add("dashboard-active");
  const mainNav = document.getElementById("mainNav");
  const mobileMenu = document.getElementById("mobileMenu");
  if (mainNav) mainNav.style.display = "none";
  if (mobileMenu) mobileMenu.style.display = "none";

  const dashboardPage = document.getElementById("page-dashboard");
  dashboardPage.style.display = "flex";
  dashboardPage.classList.add("active");

  document.querySelectorAll(".agent-only").forEach(el => {
    el.style.display = role === "broker" ? "none" : "";
  });

  const roleLabel = document.querySelector(".sidebar-logo .role, .sidebar-logo [class='role']");
  if (roleLabel) roleLabel.textContent = role === "broker" ? "Broker Portal" : "Agent Portal";

  const roleText = document.getElementById("dashUserRoleText");
  if (roleText) roleText.textContent = role === "broker" ? "Broker" : "Agent";
  const user = JSON.parse(localStorage.getItem("loggedUser") || "{}");
  const dashEmail = document.getElementById("dashUserEmail");
  if (dashEmail) dashEmail.textContent = user.email || (user.username ? user.username + "@skystoneproperties.com" : "agent@skystoneproperties.com");
  const dashDate = document.getElementById("dashDate");
  if (dashDate) dashDate.textContent = new Date().toLocaleDateString("en-IN",{weekday:"long",year:"numeric",month:"long",day:"numeric"});

  switchPanel("overview", document.querySelector('[onclick*="overview"]'));
  updateDashboard();
  updateGreeting();
}

/* ─── DASHBOARD ─────────────────────────────────── */
function switchPanel(name, el) {
  document.querySelectorAll(".dash-panel").forEach(p => {
    p.classList.remove("active");
    p.style.display = "none";
  });

  const panel = document.getElementById("panel-" + name);

  if (panel) {
    panel.classList.add("active");
    panel.style.display = "block";
  }

  document.querySelectorAll(".sidebar-item").forEach(i => {
    i.classList.remove("active");
  });

  if (el) el.classList.add("active");

  if (name === "overview") updateDashboard();
  if (name === "projects") loadAllProjects();
  if (name === "leads") loadAllLeads();
  if (name === "brokers") loadBrokers();
}

async function loadBrokers() {
  try {
    const res = await fetch("/api/brokers");
    const data = await res.json();

    const tbody = document.getElementById("brokersTableBody");
    if (!tbody) return;

    if (!data.success || !data.data.length) {
      tbody.innerHTML = `
        <tr>
          <td colspan="6" style="text-align:center;color:var(--muted)">No brokers found</td>
        </tr>
      `;
      return;
    }

    tbody.innerHTML = data.data.map((broker, index) => `
      <tr>
        <td>${index + 1}</td>
        <td>${broker.name}</td>
        <td>${broker.email}</td>
        <td>${broker.phone || "-"}</td>
        <td>${broker.username}</td>
        <td>
          <span class="badge-status ${broker.status === "Active" ? "badge-active" : "badge-pending"}">
            ${broker.status}
          </span>
        </td>
      </tr>
    `).join("");

  } catch (error) {
    console.error("Broker load error:", error);
    showToast("Could not load brokers", "fa-exclamation-circle", true);
  }
}

async function createBroker(e) {
  e.preventDefault();

  const payload = {
    name: document.getElementById("brokerName").value.trim(),
    email: document.getElementById("brokerEmail").value.trim(),
    phone: document.getElementById("brokerPhone").value.trim(),
    username: document.getElementById("brokerUsername").value.trim(),
    password: document.getElementById("brokerPassword").value.trim(),
    status: document.getElementById("brokerStatus").value
  };

  try {
    const res = await fetch("/api/brokers", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify(payload)
    });

    const data = await res.json();

    if (data.success) {
      showToast("Broker created successfully!", "fa-check-circle");
      document.getElementById("brokerForm").reset();
      loadBrokers();
    } else {
      showToast(data.message || "Broker not created", "fa-exclamation-circle", true);
    }

  } catch (error) {
    console.error("Broker create error:", error);
    showToast("Broker creation failed", "fa-exclamation-circle", true);
  }
}

async function updateDashboard(){
  try {
    const role = localStorage.getItem("userRole") || "agent";
    const user = JSON.parse(localStorage.getItem("loggedUser") || "{}");

    // Show logged-in user's name in greeting
    const roleTextEl = document.getElementById("dashUserRoleText");

    if (roleTextEl) {
      roleTextEl.textContent = (user.name || user.username || "User").split(" ")[0];
    }

    const response = await fetch("http://127.0.0.1:8000/api/dashboard", {
      headers: {
        "Accept": "application/json",
        "X-User-Role": role,
        "X-User-Username": user.username || ""
      }
    });

    const result = await response.json();

    console.log("Dashboard API:", result);

    if (!result.success) return;

    const s = result.stats || {};

    const statProjects = document.getElementById("statProjects");
    const statLeads = document.getElementById("statLeads");
    const statLocations = document.getElementById("statLocations");

    if (statProjects) statProjects.textContent = s.projects ?? 0;
    if (statLeads) statLeads.textContent = s.leads ?? 0;
    if (statLocations) statLocations.textContent = s.locations ?? 0;

    const tbody = document.getElementById("recentLeadsTbody");

    if (tbody) {
      if (!result.recent_leads || result.recent_leads.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="5" style="text-align:center;color:var(--muted);padding:30px;font-size:0.82rem">
              No leads yet.
            </td>
          </tr>
        `;
      } else {
        tbody.innerHTML = result.recent_leads.map(lead => `
          <tr>
            <td>${lead.customer_name || "-"}</td>
            <td>${lead.whatsapp_number || "-"}</td>
            <td>${lead.preferred_location || "-"}</td>
            <td>${lead.requirement || "-"}</td>
            <td>${lead.budget_range || "-"}</td>
          </tr>
        `).join("");
      }
    }

    if (typeof renderLeadsChart === "function") {
      renderLeadsChart(result.leads_by_location || []);
    }

  } catch(error) {
    console.error("Dashboard error:", error);
  }
}

/* Build chart data from raw leads array if dashboard.php doesn't return it */
function buildChartFromLeads(data) {
    if (!data || !data.length) return [];
    const counts = {};
    data.forEach(lead => {
        const loc = lead.preferred_location || "Unknown";
        counts[loc] = (counts[loc] || 0) + 1;
    });
    return Object.entries(counts)
        .map(([preferred_location, total]) => ({ preferred_location, total }))
        .sort((a, b) => b.total - a.total);
}

function updateProjectsTable(filter=''){
  const statusClass={
    'New Launch':'badge-pending',
    'Under Construction':'badge-active',
    'Ready to Move':'badge-sold',
    'Sold Out':'badge-sold'
  };
  const tbody=document.getElementById('projectsTbody');
  const filtered = filter
    ? allProjectsData.filter(p=>
        (p.project_name||p.name||'').toLowerCase().includes(filter)||
        (p.location||'').toLowerCase().includes(filter)||
        (p.builder_name||p.developer||'').toLowerCase().includes(filter)||
        (p.flat_type||p.config||'').toLowerCase().includes(filter))
    : allProjectsData;
  if(!filtered.length){
    tbody.innerHTML=`<tr><td colspan="9" style="text-align:center;color:var(--muted);padding:30px;font-size:0.82rem">${filter?'No matching projects.':'No projects added yet.'}</td></tr>`;
    return;
  }
  tbody.innerHTML=filtered.map((p,i)=>`
    <tr>
      <td style="color:var(--muted);font-family:'DM Mono',monospace;font-size:0.75rem">${String(i+1).padStart(2,'0')}</td>
      <td><strong style="color:var(--white)">${p.name}</strong><br><span style="font-size:0.72rem;color:var(--muted)">${p.developer||'—'}</span></td>
      <td>${p.location}</td>
      <td>${p.config}</td>
      <td style="font-size:0.8rem;color:var(--muted2)">${p.carpet||'—'}</td>
      <td style="color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1rem">${p.price}</td>
      <td style="font-size:0.78rem;color:var(--muted2)">${p.possession||'—'}</td>
      <td><span class="badge-status ${statusClass[p.status]||'badge-active'}">${p.status}</span></td>
      <td style="display:flex;gap:6px;flex-wrap:wrap">
        ${p.drive?`<a href="${p.drive}" target="_blank" style="background:rgba(74,144,226,0.1);border:1px solid rgba(74,144,226,0.2);color:var(--gold);padding:5px 10px;font-size:0.7rem;text-decoration:none;display:inline-block" title="View Brochure"><i class="fas fa-folder-open"></i></a>`:''}
        <button onclick="deleteProject(${p.id})" style="background:rgba(248,100,100,0.1);border:1px solid rgba(248,100,100,0.2);color:#f86464;padding:5px 10px;font-size:0.72rem;cursor:pointer;letter-spacing:0.05em" title="Delete">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    </tr>
  `).join('');
}

let allLeadsData = [];
let allProjectsData = [];

async function loadAllLeads() {
  if (!document.getElementById("leadsTbody")) return;

  try {

    const role = localStorage.getItem("userRole") || "agent";
    const user = JSON.parse(localStorage.getItem("loggedUser") || "{}");

    const response = await fetch("http://127.0.0.1:8000/api/get-leads", {
      headers: {
        "Accept": "application/json",
        "X-User-Role": role,
        "X-User-Username": user.username || ""
      }
    });

    const result = await response.json();

    if (!result.success) return;

    allLeadsData = result.data || [];

    renderLeadsTable(allLeadsData);

    // Recent Leads Table
    const recentTbody = document.getElementById("recentLeadsTbody");

    if (recentTbody) {

      const recent = allLeadsData.slice(0, 5);

      if (!recent.length) {
        recentTbody.innerHTML =
          `<tr><td colspan="6" style="text-align:center">No leads found</td></tr>`;
      } else {

        const statusColors = {
          New: "#4A90E2",
          Contacted: "#4dc8e2",
          "Follow Up": "#f8b406",
          Interested: "#4de69a",
          "Site Visit": "#e24a90",
          Negotiation: "#a24ae2",
          Closed: "#4de69a",
          Lost: "#e24a4a"
        };

        recentTbody.innerHTML = recent.map(l => {

          const clr = statusColors[l.status] || "var(--muted2)";

          return `
            <tr>
              <td>${l.customer_name || "-"}</td>
              <td>${l.whatsapp_number || "-"}</td>
              <td>${l.preferred_location || "-"}</td>
              <td>${l.requirement || "-"}</td>
              <td>${l.budget_range || "-"}</td>
              <td>
                <span style="
                  font-size:0.72rem;
                  padding:2px 8px;
                  border-radius:12px;
                  background:${clr}22;
                  color:${clr}">
                  ${l.status || "New"}
                </span>
              </td>
            </tr>
          `;
        }).join("");
      }
    }

    // Dashboard stats
    if (window._allProjectsData) {
      updateDashboardExtendedStats(
        window._allProjectsData,
        allLeadsData
      );
    }

    // Status chart
    renderLeadsStatusChart(allLeadsData);

    // Location chart
    const byLocation = {};

    allLeadsData.forEach(l => {
      const loc = l.preferred_location || "Other";
      byLocation[loc] = (byLocation[loc] || 0) + 1;
    });

    renderLeadsChart(
      Object.entries(byLocation).map(([preferred_location, total]) => ({
        preferred_location,
        total
      }))
    );

    // Update count
    const statLeads = document.getElementById("statLeads");

    if (statLeads) {
      statLeads.textContent = allLeadsData.length;
    }

  } catch (e) {
    console.error("loadAllLeads error:", e);
  }
}

function filterLeads(searchText = "") {
  const typeSelect = document.querySelector("#panel-leads select");
  const selectedType = typeSelect ? typeSelect.value.toLowerCase() : "";

  const query = searchText.toLowerCase();

  const filtered = allLeadsData.filter(lead => {
    const matchesSearch =
      (lead.customer_name || "").toLowerCase().includes(query) ||
      (lead.whatsapp_number || "").toLowerCase().includes(query) ||
      (lead.preferred_location || "").toLowerCase().includes(query) ||
      (lead.requirement || "").toLowerCase().includes(query) ||
      (lead.budget_range || "").toLowerCase().includes(query);

    const matchesType =
      selectedType === "" ||
      (lead.requirement || "").toLowerCase() === selectedType;

    return matchesSearch && matchesType;
  });

  renderLeadsTable(filtered);
}

function filterLeadsByType(type = "") {
  const searchInput = document.querySelector("#panel-leads .search-input-dark");
  const searchText = searchInput ? searchInput.value : "";

  filterLeads(searchText);
}

async function loadAllProjects() {
  const tbody = document.getElementById("projectsTbody");
  if (!tbody) return;
  try {
    const response = await fetch("http://127.0.0.1:8000/api/get-projects");
    const result = await response.json();
    if (!result.success) return;
    allProjectsData = result.data || [];
    window._allProjectsData = allProjectsData;
    renderProjectsTable(allProjectsData);
    renderProjectsStatusChart(allProjectsData);
    const el = document.getElementById("statProjects");
    if (el) el.textContent = allProjectsData.length;
    if (allLeadsData && allLeadsData.length) updateDashboardExtendedStats(allProjectsData, allLeadsData);
    else updateDashboardExtendedStats(allProjectsData, []);
    // Load locations into add-project dropdown
    loadAllLocations();
  } catch(e) { console.warn("loadAllProjects error:", e); }
}

async function deleteProject(id) {
  const role = localStorage.getItem("userRole") || "agent";

  if (role === "broker") {
    showToast("Brokers cannot delete projects.", "fa-ban", true);
    return;
  }

  if (!confirm("Delete this project?")) return;

  try {
    const response = await fetch("/api/delete-project", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-User-Role": role
      },
      body: JSON.stringify({ id })
    });

    const result = await response.json();

    if (result.success) {
      showToast("Project deleted successfully!", "fa-trash");

      await loadAllProjects();
      await renderFeaturedProjects();
      await updateDashboard();
    } else {
      showToast(result.message || "Project delete failed.", "fa-exclamation-circle", true);
    }

  } catch (error) {
    console.error("deleteProject error:", error);
    showToast("Project delete failed.", "fa-exclamation-circle", true);
  }
}

function renderProjectsTable(data) {
  const tbody = document.getElementById("projectsTbody");
  if (!tbody) return;

  if (!data || data.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="9" style="text-align:center;color:var(--muted);padding:30px">
          No matching projects found.
        </td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = data.map((p, i) => `
    <tr>
      <td>${i + 1}</td>
      <td>${p.project_name || "-"}</td>
      <td>${p.location || "-"}</td>
      <td>${p.flat_type || "-"}</td>
      <td>${p.carpet_area || "-"}</td>
      <td>${p.price_range || "-"}</td>
      <td>${p.possession_date || "-"}</td>
      <td>
  <select class="form-control-dark" style="padding:8px 28px 8px 10px;font-size:0.75rem;max-width:150px"
    onchange="updateProjectStatus(${p.id}, this.value)">
    <option value="Active" ${p.status === "Active" ? "selected" : ""}>Active</option>
    <option value="Under Construction" ${p.status === "Under Construction" ? "selected" : ""}>Under Construction</option>
    <option value="Ready to Move" ${p.status === "Ready to Move" ? "selected" : ""}>Ready to Move</option>
    <option value="Sold Out" ${p.status === "Sold Out" ? "selected" : ""}>Sold Out</option>
  </select>
</td>
      <td>
        <button class="btn-export" onclick="deleteProject(${p.id})" style="color:#ff8b8b;border-color:rgba(220,53,69,0.35);background:rgba(220,53,69,0.08)">
          <i class="fas fa-trash"></i>
        </button>
      </td>
    </tr>
  `).join("");
}

function updateLeadsTable() {
  loadAllLeads();
}

async function updateLeadStatus(id, status) {
  const response = await fetch("http://127.0.0.1:8000/api/update-lead-status", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ id, status })
  });

  const result = await response.json();

  if (result.success) {
    showToast("Lead status updated!", "fa-check-circle");
    loadAllLeads();
    updateDashboard();
  } else {
    showToast("Could not update lead status.", "fa-exclamation-circle", true);
  }
}

async function updateProjectStatus(id, status) {
  const response = await fetch("http://127.0.0.1:8000/api/update-project-status", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ id, status })
  });

  const result = await response.json();

  if (result.success) {
    showToast("Project status updated!", "fa-check-circle");
    loadAllProjects();
    renderFeaturedProjects();
  } else {
    showToast("Could not update status.", "fa-exclamation-circle", true);
  }
}

async function addProject(e) {
    e.preventDefault();

    const amenities = [...document.querySelectorAll('.amenity-tag.selected')]
        .map(t => t.textContent.trim())
        .join(', ');

    const formData = new FormData();

    formData.append("project_name", document.getElementById("pName").value);
    formData.append("builder_name", document.getElementById("pDeveloper").value);
    formData.append("location", document.getElementById("pLocation").value);
    formData.append("flat_type", document.getElementById("pConfig").value);
    formData.append("price_range",document.getElementById("pPrice").value.replace(/₹/g, "").trim());

    formData.append("carpet_area", document.getElementById("pCarpet").value || "—");
    formData.append("possession_date", document.getElementById("pPossession").value || "—");
    formData.append("amenities", amenities);
    formData.append("description", document.getElementById("pDesc").value);
    formData.append("drive_folder_link", document.getElementById("pDrive").value || "");

    const brochureInput = document.getElementById("pBrochure");
    if (brochureInput && brochureInput.files.length > 0) {
        formData.append("brochure", brochureInput.files[0]);
    }

    const response = await fetch("http://127.0.0.1:8000/api/add-project", {
        method: "POST",
        body: formData
    });

    const result = await response.json();

    if (result.success) {
        document.getElementById("addProjectForm").reset();
        clearBrochure();
        document.querySelectorAll(".amenity-tag.selected").forEach(t => t.classList.remove("selected"));

        document.getElementById("projectSuccess").style.display = "block";
        setTimeout(() => {
            document.getElementById("projectSuccess").style.display = "none";
        }, 4000);

        showToast("Project added successfully!", "fa-check-circle");

        renderFeaturedProjects();
        updateDashboard();
    } else {
        showToast("Project not saved.", "fa-exclamation-circle", true);
    }
}

/* ─── FILTER FUNCTIONS ─────────────────────────── */
function filterProjects(searchText = "") {
  const query = searchText.toLowerCase().trim();

  const filtered = allProjectsData.filter(p =>
    (p.project_name || "").toLowerCase().includes(query) ||
    (p.location || "").toLowerCase().includes(query) ||
    (p.flat_type || "").toLowerCase().includes(query) ||
    (p.carpet_area || "").toLowerCase().includes(query) ||
    (p.price_range || "").toLowerCase().includes(query) ||
    (p.possession_date || "").toLowerCase().includes(query)
  );

  renderProjectsTable(filtered);
}

function filterLeads(val) {
  applyLeadFilters();
}

function filterLeadsByType(val) {
  applyLeadFilters();
}

function applyLeadFilters() {
  const searchInput = document.querySelector("#panel-leads .search-input-dark");
  const typeSelect = document.querySelector("#panel-leads select");

  const search = searchInput ? searchInput.value.toLowerCase().trim() : "";
  const type = typeSelect ? typeSelect.value.toLowerCase().trim() : "";

  const filtered = allLeadsData.filter(lead => {
    const textMatch =
      (lead.customer_name || "").toLowerCase().includes(search) ||
      (lead.whatsapp_number || "").toLowerCase().includes(search) ||
      (lead.preferred_location || "").toLowerCase().includes(search) ||
      (lead.requirement || "").toLowerCase().includes(search) ||
      (lead.budget_range || "").toLowerCase().includes(search);

    const typeMatch =
      type === "" || (lead.requirement || "").toLowerCase() === type;

    return textMatch && typeMatch;
  });

  renderLeadsTable(filtered);
}



/* ─── EXPORT CSV ─────────────────────────────── */
function exportProjects() {
    window.location.href = "http://127.0.0.1:8000/api/export-projects";
}

function exportLeadsCSV() {
  window.location.href = "http://127.0.0.1:8000/api/export-leads";
}

function exportProjectsCSV() {
  window.location.href = "http://127.0.0.1:8000/api/export-projects";
}

function exportBrokersCSV() {
  window.open("/api/export-brokers", "_blank");
}

/* ─── TOAST SYSTEM ───────────────────────────── */
function showToast(msg, icon='fa-info-circle', isError=false){
  const c=document.getElementById('toastContainer');
  const t=document.createElement('div');
  t.className='toast'+(isError?' error':'');
  t.innerHTML=`<i class="fas ${icon}"></i><span>${msg}</span>`;
  c.appendChild(t);
  setTimeout(()=>t.classList.add('show'),10);
  setTimeout(()=>{t.classList.remove('show');setTimeout(()=>t.remove(),400);},3500);
}

/* ─── AMENITY TAGS ───────────────────────────── */
function toggleAmenity(el){el.classList.toggle('selected');}

/* ─── BROCHURE UPLOAD ────────────────────────── */
function handleBrochureUpload(input){
  if(!input.files||!input.files[0])return;
  const file=input.files[0];
  if(file.size>10*1024*1024){showToast('File too large. Max 10MB.','fa-exclamation-circle',true);return;}
  const prev=document.getElementById('brochurePreview');
  const prog=document.getElementById('brochureProgress');
  const fill=document.getElementById('brochureFill');
  document.getElementById('brochureFileName').textContent=file.name;
  prev.style.display='flex';
  prog.style.display='block';
  fill.style.width='0%';
  // Simulate upload progress
  let w=0;
  const iv=setInterval(()=>{
    w+=Math.random()*25;
    if(w>=100){w=100;clearInterval(iv);setTimeout(()=>prog.style.display='none',600);}
    fill.style.width=w+'%';
  },150);
  showToast(`"${file.name}" ready to upload`,'fa-check-circle');
}
function clearBrochure(){
  document.getElementById('pBrochure').value='';
  document.getElementById('brochurePreview').style.display='none';
  document.getElementById('brochureProgress').style.display='none';
  document.getElementById('brochureFill').style.width='0%';
}

// Drag-drop
document.addEventListener("DOMContentLoaded", () => {
  initScrollReveal();
  loadHomeData();
});

/* ─── LEADS CHART ────────────────────────────── */
function renderLeadsChart(data = []) {
  const chart = document.getElementById("leadsChart");
  if (!chart) return;

  if (!data.length) {
    chart.innerHTML = `<div style="color:var(--muted);font-size:0.82rem;text-align:center;padding:20px">Submit an enquiry to see lead analytics</div>`;
    return;
  }

  const max = Math.max(...data.map(item => Number(item.total)));

  chart.innerHTML = data.map(item => `
    <div class="chart-bar-row">
      <div class="chart-bar-label">${item.preferred_location || "-"}</div>
      <div class="chart-bar-track">
        <div class="chart-bar-fill" style="width:${(Number(item.total) / max) * 100}%"></div>
      </div>
      <div class="chart-bar-val">${item.total}</div>
    </div>
  `).join("");
}

/* ─── LEADS BY STATUS CHART ──────────────── */
function renderLeadsStatusChart(leads = []) {
  const chart = document.getElementById("leadsStatusChart");
  if (!chart) return;
  if (!leads.length) { chart.innerHTML = `<div style="color:var(--muted);font-size:0.82rem;text-align:center;padding:20px">No lead data yet</div>`; return; }
  const counts = {};
  leads.forEach(l => { const s = l.status || "New"; counts[s] = (counts[s] || 0) + 1; });
  const max = Math.max(...Object.values(counts));
  const statusColors = { New:"#4A90E2", Contacted:"#4dc8e2", "Follow Up":"#f8b406", Interested:"#4de69a", "Site Visit":"#e24a90", Negotiation:"#a24ae2", Closed:"#4de69a", Lost:"#e24a4a" };
  chart.innerHTML = Object.entries(counts).map(([s, c]) => `
    <div class="chart-bar-row">
      <div class="chart-bar-label">${s}</div>
      <div class="chart-bar-track">
        <div class="chart-bar-fill" style="width:${(c/max)*100}%;background:${statusColors[s]||'var(--gold)'}"></div>
      </div>
      <div class="chart-bar-val">${c}</div>
    </div>`).join("");
}

/* ─── PROJECTS BY STATUS CHART ───────────── */
function renderProjectsStatusChart(projects = []) {
  const chart = document.getElementById("projectsStatusChart");
  if (!chart) return;
  if (!projects.length) { chart.innerHTML = `<div style="color:var(--muted);font-size:0.82rem;text-align:center;padding:20px">No project data yet</div>`; return; }
  const counts = {};
  projects.forEach(p => { const s = p.status || "Unknown"; counts[s] = (counts[s] || 0) + 1; });
  const max = Math.max(...Object.values(counts));
  const statusColors = { "Under Construction":"#4A90E2", "Ready to Move":"#4de69a", "New Launch":"#f8b406", "Sold Out":"#e24a4a" };
  chart.innerHTML = Object.entries(counts).map(([s, c]) => `
    <div class="chart-bar-row">
      <div class="chart-bar-label">${s}</div>
      <div class="chart-bar-track">
        <div class="chart-bar-fill" style="width:${(c/max)*100}%;background:${statusColors[s]||'var(--gold)'}"></div>
      </div>
      <div class="chart-bar-val">${c}</div>
    </div>`).join("");
}

/* ─── LOCATION → DRIVE FOLDER AUTO-FILL ─── */
let _locationsCache = [];
async function onLocationSelect(name) {
  const infoBox = document.getElementById("locationDriveInfo");
  const driveBtn = document.getElementById("locationDriveBtn");
  const driveName = document.getElementById("locationDriveName");
  if (!name || !infoBox) return;
  try {
    if (!_locationsCache.length) {
      const r = await fetch("http://127.0.0.1:8000/api/get-locations");
      const d = await r.json();
      if (d.success) _locationsCache = d.data;
    }
    const loc = _locationsCache.find(l => l.name === name);
    if (loc && loc.drive_link) {
      infoBox.style.display = "";
      driveName.textContent = loc.name + " — Drive Folder";
      driveBtn.href = loc.drive_link;
      // Also fill the manual Drive field if present
      const pDrive = document.getElementById("pDrive");
      if (pDrive && !pDrive.value) pDrive.value = loc.drive_link;
    } else {
      infoBox.style.display = "none";
    }
  } catch(e) { infoBox.style.display = "none"; }
}

/* ─── LOAD ALL LOCATIONS (DASHBOARD) ─────── */
async function loadAllLocations() {
  const tbody = document.getElementById("locationsTbody");
  if (!tbody) return;
  try {
    const r = await fetch("http://127.0.0.1:8000/api/get-locations");
    const d = await r.json();
    if (!d.success || !d.data.length) {
      tbody.innerHTML = `<tr><td colspan="5" style="text-align:center;color:var(--muted);padding:30px">No locations found.</td></tr>`;
      return;
    }
    _locationsCache = d.data;
    // Also refresh location dropdown in Add Project
    const sel = document.getElementById("pLocation");
    if (sel) {
      const current = sel.value;
      sel.innerHTML = '<option value="">Select Location</option>' + d.data.map(l => `<option value="${l.name}">${l.name}</option>`).join("");
      if (current) sel.value = current;
    }
    tbody.innerHTML = d.data.map((l, i) => `
      <tr>
        <td>${i+1}</td>
        <td><strong>${l.name}</strong></td>
        <td style="color:var(--muted2);font-size:0.82rem">${l.description || "-"}</td>
        <td>${l.drive_link ? `<a href="${l.drive_link}" target="_blank" class="btn-export" style="font-size:0.72rem;padding:6px 12px"><i class="fas fa-folder-open me-1"></i>Open Drive</a>` : '<span style="color:var(--muted);font-size:0.78rem">No link</span>'}</td>
        <td><button class="btn-export" style="font-size:0.72rem;padding:6px 10px;color:#e24a4a;border-color:rgba(226,74,74,0.3)" onclick="deleteLocation(${l.id})"><i class="fas fa-trash"></i></button></td>
      </tr>`).join("");
  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="5" style="text-align:center;color:#f88;padding:20px">Could not load locations.</td></tr>`;
  }
}

async function addLocation(e) {
  e.preventDefault();
  const name = document.getElementById("locName").value.trim();
  const desc = document.getElementById("locDesc").value.trim();
  const drive = document.getElementById("locDrive").value.trim();
  if (!name) return;
  try {
    const fd = new FormData();
    fd.append("name", name);
    fd.append("description", desc);
    fd.append("drive_link", drive);
    const r = await fetch("http://127.0.0.1:8000/api/add-location", { method:"POST", body:fd });
    const d = await r.json();
    if (d.success) {
      document.getElementById("locationSuccess").style.display = "flex";
      document.getElementById("addLocationForm").reset();
      _locationsCache = [];
      setTimeout(() => { document.getElementById("locationSuccess").style.display = "none"; }, 3000);
      showToast("Location added!", "fa-check-circle");
    } else { showToast(d.error || "Failed to add location", "fa-exclamation-circle", true); }
  } catch(e) { showToast("Server error", "fa-exclamation-circle", true); }
}

async function deleteLocation(id) {
  if (!confirm("Delete this location?")) return;
  try {
    const r = await fetch("http://127.0.0.1:8000/api/delete-location", { method:"POST", body: JSON.stringify({id}), headers:{"Content-Type":"application/json"} });
    const d = await r.json();
    if (d.success) { _locationsCache = []; loadAllLocations(); showToast("Location deleted", "fa-check-circle"); }
  } catch(e) { showToast("Error deleting", "fa-exclamation-circle", true); }
}

/* ─── ENHANCED LOAD ALL LEADS (with notes) ─ */
function renderLeadsTable(leads = []) {
  const tbody = document.getElementById("leadsTbody");
  const count = document.getElementById("leadsCount");

  if (!tbody) return;

  if (count) count.textContent = leads.length + " Total";

  if (!leads.length) {
    tbody.innerHTML = `
      <tr>
        <td colspan="11" style="text-align:center;color:var(--muted);padding:30px">
          No leads submitted yet.
        </td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = leads.map((l, i) => {
    const statusMap = {
      New: "#4A90E2",
      Contacted: "#4dc8e2",
      "Follow Up": "#f8b406",
      Interested: "#4de69a",
      "Site Visit": "#e24a90",
      Negotiation: "#a24ae2",
      Closed: "#4de69a",
      Lost: "#e24a4a"
    };

    const clr = statusMap[l.status] || "var(--muted2)";

    const notesHtml =
      (l.status !== "New" && l.notes)
        ? `<span style="font-size:0.75rem;color:var(--muted2);max-width:120px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${l.notes}">
            ${l.notes}
          </span>`
        : (l.status !== "New"
            ? `<span style="color:var(--muted);font-size:0.75rem">—</span>`
            : `<span style="color:var(--border-medium);font-size:0.72rem">N/A</span>`
          );

    const assignedBroker = l.assign_to
      ? `<span style="font-size:0.75rem;color:var(--primary);font-weight:600">${l.assign_to}</span>`
      : `<span style="color:var(--muted);font-size:0.75rem">—</span>`;

    return `
      <tr>
        <td>${i + 1}</td>
        <td><strong>${l.customer_name || "-"}</strong></td>
        <td>${l.whatsapp_number || "-"}</td>
        <td>${l.preferred_location || "-"}</td>
        <td>${l.requirement || "-"}</td>
        <td>${l.budget_range || "-"}</td>

        <td>
          <span style="
            font-size:0.72rem;
            padding:3px 10px;
            border-radius:20px;
            background:${clr}22;
            color:${clr};
            border:1px solid ${clr}44">
            ${l.status || "New"}
          </span>
        </td>

        <td>${notesHtml}</td>

        <td>${assignedBroker}</td>

        <td style="font-size:0.75rem;color:var(--muted2)">
          ${l.created_at ? l.created_at.split("T")[0] : "-"}
        </td>

        <td>
          <button class="btn-export" style="font-size:0.72rem;padding:6px 10px"
            onclick="openNotesModal(${i}, ${JSON.stringify(l).replace(/"/g, '&quot;')})">
            <i class="fas fa-edit"></i>
          </button>
        </td>
      </tr>
    `;
  }).join("");
}

/* ─── LEAD NOTES MODAL ────────────────────── */
let _currentNoteLeadIdx = -1;
let _currentNoteLeadData = null;
function openNotesModal(idx, leadData) {
  _currentNoteLeadIdx = idx;
  _currentNoteLeadData = leadData;
  document.getElementById("notesLeadName").textContent = leadData.customer_name || "Lead";
  document.getElementById("notesStatus").value = leadData.status || "New";
  document.getElementById("notesText").value = leadData.notes || "";
  toggleNotesField();
  const m = document.getElementById("notesModal");
  m.style.display = "flex";
  loadBrokerDropdown(_currentNoteLeadData.assign_to || "");
}
function closeNotesModal() { document.getElementById("notesModal").style.display = "none"; }
function toggleNotesField() {
  const status = document.getElementById("notesStatus").value;
  const wrap = document.getElementById("notesFieldWrap");
  wrap.style.display = status === "New" ? "none" : "block";
}
async function saveLeadNotes() {
  if (!_currentNoteLeadData) return;

  const status = document.getElementById("notesStatus").value;
  const notes = document.getElementById("notesText").value.trim();
  const assignTo = document.getElementById("notesAssignTo")?.value || "";

  try {
    const fd = new FormData();

    fd.append("id", _currentNoteLeadData.id);
    fd.append("status", status);
    fd.append("notes", notes);
    fd.append("assign_to", assignTo);

    const r = await fetch("http://127.0.0.1:8000/api/update-lead", {
      method: "POST",
      body: fd
    });

    const d = await r.json();

    if (d.success) {
      closeNotesModal();
      showToast("Lead updated!", "fa-check-circle");
      await loadAllLeads();
    } else {
      showToast(d.error || d.message || "Update failed", "fa-exclamation-circle", true);
    }

  } catch (e) {
    console.error("saveLeadNotes error:", e);
    showToast("Server error", "fa-exclamation-circle", true);
  }
}

/* ─── ENHANCED DASHBOARD STATS ───────────── */
function updateDashboardExtendedStats(projects, leads) {
  const active = projects.filter(p => ["Under Construction","Ready to Move"].includes(p.status)).length;
  const sold = projects.filter(p => p.status === "Sold Out").length;
  const pending = projects.filter(p => p.status === "New Launch").length;
  const newL = leads.filter(l => (l.status||"New") === "New").length;
  const followUp = leads.filter(l => ["Contacted","Follow Up"].includes(l.status)).length;
  const closed = leads.filter(l => l.status === "Closed").length;
  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  set("statProjects", projects.length);
  set("statActiveProjects", active);
  set("statSoldProjects", sold);
  set("statPendingProjects", pending);
  set("statNewLeads", newL);
  set("statFollowUps", followUp);
  set("statClosedLeads", closed);
  renderProjectsStatusChart(projects);
  renderLeadsStatusChart(leads);
}

/* ─── CSV IMPORT SYSTEM ───────────────────── */
let _importType = "";
let _importRows = [];
let _importHeaders = [];

const IMPORT_TEMPLATES = {
  projects: { headers: ["project_name","location","builder_name","flat_type","carpet_area","price_range","possession_date","amenities","description","status"], hint: "Required: project_name, location, status. Optional: builder_name, flat_type, carpet_area, price_range, possession_date, amenities, description" },
  leads: { headers: ["customer_name","whatsapp_number","preferred_location","requirement","budget_range","status","notes"], hint: "Required: customer_name, whatsapp_number. Optional: preferred_location, requirement, budget_range, status (New/Contacted/...), notes" },
  locations: { headers: ["name","description","drive_link"], hint: "Required: name. Optional: description, drive_link (Google Drive URL)" },
  brokers: { headers: ["name","email","phone","username","password","status"], hint: "Required: name, email, username, password. Optional: phone, status" }
};

function openImportModal(type) {
  _importType = type;
  _importRows = [];

  const hint = IMPORT_TEMPLATES[type];

  if (!hint) {
    console.error("Invalid import type:", type);
    showToast("Invalid import type: " + type, "fa-exclamation-circle", true);
    return;
  }

  document.getElementById("importTypeLabel").textContent =
    type.charAt(0).toUpperCase() + type.slice(1);

  document.getElementById("importTemplateHint").innerHTML =
    `<strong style="color:var(--gold)">Expected columns:</strong> ${hint.headers.join(", ")}<br>
     <span style="color:var(--muted2)">${hint.hint}</span>`;

  document.getElementById("importStep1").style.display = "";
  document.getElementById("importStep2").style.display = "none";
  document.getElementById("importStep3").style.display = "none";

  const fileInput = document.getElementById("importFile");
  fileInput.value = "";
  fileInput.type = "";
  fileInput.type = "file";

  const preview = document.getElementById("importPreviewBody");
  if (preview) preview.innerHTML = "";

  const result = document.getElementById("importResultMsg");
  if (result) result.innerHTML = "";

  document.getElementById("importModal").style.display = "flex";
  loadBrokerDropdown(_currentNoteLeadData.assign_to || "");
}

function closeImportModal() { document.getElementById("importModal").style.display = "none"; }
function resetImport() {
  document.getElementById("importStep1").style.display = "";
  document.getElementById("importStep2").style.display = "none";
  document.getElementById("importFile").value = "";
}

function handleImportFile(input) {
  _importRows = [];

  const file = input.files[0];
  if (!file) return;

  console.log("Selected import file:", file.name);

  const reader = new FileReader();

  reader.onload = (e) => {
    const text = e.target.result;
    console.log("CSV text preview:", text.substring(0, 200));
    parseImportCSV(text);
  };

  reader.readAsText(file);
}

function parseImportCSV(text) {
  const lines = text.trim().split(/\r?\n/);
  if (lines.length < 2) { showToast("CSV must have a header row and at least one data row.", "fa-exclamation-circle", true); return; }
  const headers = lines[0].split(",").map(h =>
  h.replace(/^\uFEFF/, "").trim().toLowerCase()
);
  const template = IMPORT_TEMPLATES[_importType];
  const requiredCols = { projects: ["project_name"], leads: ["customer_name"], locations: ["name"] };
  const req = requiredCols[_importType] || [];
  const missing = req.filter(r => !headers.includes(r));
  if (missing.length) { showToast("Missing required columns: " + missing.join(", "), "fa-exclamation-circle", true); return; }

  const validRows = [], invalidRows = [];
  for (let i = 1; i < lines.length; i++) {
    if (!lines[i].trim()) continue;
    const vals = lines[i].split(",").map(v => v.trim().replace(/^"|"$/g, ""));
    const row = {};
    headers.forEach((h, idx) => { row[h] = vals[idx] || ""; });
    const isValid = req.every(r => row[r]);
    if (isValid) validRows.push(row); else invalidRows.push({ row, line: i + 1 });
  }

  _importHeaders = headers;
  _importRows = validRows;

  // Show preview
  document.getElementById("importSummaryBox").innerHTML = `
    <div><i class="fas fa-check-circle" style="color:var(--status-active-text)"></i> <strong>${validRows.length}</strong> valid rows ready to import</div>
    <div><i class="fas fa-exclamation-triangle" style="color:var(--status-pending-text)"></i> <strong>${invalidRows.length}</strong> invalid rows will be skipped</div>
    ${invalidRows.length ? `<div style="font-size:0.75rem;color:var(--muted2);margin-top:6px">Skipped lines: ${invalidRows.map(r=>r.line).join(", ")}</div>` : ""}
  `;
  const previewHeaders = headers.slice(0, 5);
  document.getElementById("importPreviewHead").innerHTML = `<tr>${previewHeaders.map(h => `<th>${h}</th>`).join("")}</tr>`;
  document.getElementById("importPreviewBody").innerHTML = validRows.slice(0, 8).map(row =>
    `<tr>${previewHeaders.map(h => `<td style="font-size:0.78rem">${(row[h]||"").slice(0,30)}</td>`).join("")}</tr>`
  ).join("");

  document.getElementById("importStep1").style.display = "none";
  document.getElementById("importStep2").style.display = "";
  console.log("Parsed import rows:", _importRows);
}

async function executeImport() {
  if (!_importRows.length) return;

  const endpointMap = {
    projects: "add-project-bulk",
    leads: "add-lead-bulk",
    locations: "add-location-bulk",
    brokers: "brokers"
  };

  const endpoint = `/api/${endpointMap[_importType]}`;

  let successCount = 0;
  let failCount = 0;

  for (const row of _importRows) {
    try {
      let response;

      const cleanRow = {};
      Object.entries(row).forEach(([key, value]) => {
        const cleanKey = key
          .replace(/^\uFEFF/, "")
          .trim()
          .toLowerCase();

        cleanRow[cleanKey] = String(value || "").trim();
      });

      if (_importType === "brokers") {
        console.log("Broker row sending:", cleanRow);

        response = await fetch(endpoint, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          body: JSON.stringify({
            name: cleanRow.name || "",
            email: cleanRow.email || "",
            phone: cleanRow.phone || "",
            username: cleanRow.username || "",
            password: cleanRow.password || "",
            status: cleanRow.status || "Active"
          })
        });

      } else {
        const payloadKey =
          _importType === "projects" ? "projects" :
          _importType === "leads" ? "leads" :
          "locations";

        response = await fetch(endpoint, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          body: JSON.stringify({
            [payloadKey]: [cleanRow]
          })
        });
      }

      const data = await response.json();

      if (data.success) {
        successCount++;
      } else {
        failCount++;
        console.error("Import row failed:", data, cleanRow);
      }

    } catch (err) {
      failCount++;
      console.error("Import error:", err, row);
    }
  }

  document.getElementById("importStep2").style.display = "none";
  document.getElementById("importStep3").style.display = "";

  document.getElementById("importResultMsg").innerHTML = `
    <div style="font-size:1.1rem;font-weight:600;color:var(--gold);margin-bottom:8px">Import Complete</div>
    <div><i class="fas fa-check-circle" style="color:var(--status-active-text)"></i> ${successCount} records imported successfully</div>
    ${failCount ? `<div style="margin-top:4px"><i class="fas fa-times-circle" style="color:#e24a4a"></i> ${failCount} records failed</div>` : ""}
  `;

  if (_importType === "projects") loadAllProjects();
  if (_importType === "leads") loadAllLeads();
  if (_importType === "locations") loadAllLocations();
  if (_importType === "brokers") loadBrokers();
}

/* Extended stats are called from loadAllProjects/loadAllLeads hooks */
document.addEventListener("DOMContentLoaded", () => {
  const _isLoggedIn = localStorage.getItem("isLoggedIn");
  const _role = localStorage.getItem("userRole");
  if (_isLoggedIn === "true" && _role) {
    showDashboardForRole(_role);
  } else {
    showPage("home");
  }
});

async function loadBrokerDropdown(selected = "") {
  try {
    const response = await fetch("http://127.0.0.1:8000/api/brokers");
    const result = await response.json();

    const ddl = document.getElementById("notesAssignTo");
    if (!ddl) return;

    ddl.innerHTML = `<option value="">Not Assigned</option>`;

    if (result.success) {
      result.data.forEach(broker => {
        if (broker.status === "Active") {
          ddl.innerHTML += `
            <option value="${broker.username}" ${selected === broker.username ? "selected" : ""}>
              ${broker.name} (${broker.username})
            </option>
          `;
        }
      });
    }
  } catch (e) {
    console.error("Broker dropdown error:", e);
  }
}

function updateGreeting() {
    const now = new Date();

    const hour = now.getHours();
    const minute = now.getMinutes();

    let greeting = "Good Morning";

    if (hour >= 21) {
        greeting = "Good Night";
    }
    else if (hour > 17 || (hour === 17 && minute >= 30)) {
        greeting = "Good Evening";
    }
    else if (hour >= 12) {
        greeting = "Good Afternoon";
    }

    const greetingEl = document.getElementById("dashboardGreeting");

    if (greetingEl) {
        greetingEl.textContent = greeting;
    }
}
</script>

<!-- Cursor Glow -->
<div class="cursor-glow" id="cursorGlow"></div>

<!-- WhatsApp Float -->
<a 
  class="whatsapp-float"
  href="https://wa.me/918390959529?text=Hello%20SkyStone%20Properties%2C%20I%20am%20interested%20in%20a%20property."
  target="_blank"
  id="waFloat"
  style="display:none"
>
  <i class="fab fa-whatsapp"></i>
</a>


<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<!-- ══════════════════════════════════════════════════
     ENHANCED PARALLAX & MOTION SCRIPTS
══════════════════════════════════════════════════ -->
<script>
/* ─── CURSOR GLOW ────────────────────────────── */
(function(){
  const glow = document.getElementById('cursorGlow');
  if(!glow || window.innerWidth < 768) return;
  let mx = -999, my = -999;
  document.addEventListener('mousemove', e => {
    mx = e.clientX; my = e.clientY;
    glow.style.left = mx + 'px';
    glow.style.top  = my + 'px';
  });
})();

/* ─── PARTICLES ──────────────────────────────── */
(function(){
  const container = document.getElementById('particlesContainer');
  if(!container) return;
  const count = window.innerWidth < 768 ? 10 : 22;
  for(let i = 0; i < count; i++){
    const p = document.createElement('div');
    p.className = 'particle';
    p.style.left  = Math.random() * 100 + '%';
    p.style.width = p.style.height = (1 + Math.random() * 2) + 'px';
    p.style.animationDuration  = (12 + Math.random() * 20) + 's';
    p.style.animationDelay     = (-Math.random() * 20) + 's';
    p.style.opacity = 0;
    container.appendChild(p);
  }
})();

/* ─── HERO PARALLAX ON SCROLL ────────────────── */
(function(){
  const hero = document.getElementById('heroSection');
  const orbs = document.querySelectorAll('.parallax-orb');
  const grid = hero ? hero.querySelector('.hero-grid') : null;
  const aboutNum = document.getElementById('aboutParallaxNum');

  function onScroll(){
    const sy = window.scrollY;

    // Hero orbs drift
    if(orbs.length){
      orbs[0] && (orbs[0].style.transform = `translate(${sy*0.04}px, ${-sy*0.06}px)`);
      orbs[1] && (orbs[1].style.transform = `translate(${-sy*0.03}px, ${-sy*0.04}px)`);
      orbs[2] && (orbs[2].style.transform = `translate(${sy*0.02}px, ${-sy*0.03}px)`);
    }

    // Grid subtle parallax
    if(grid){
      grid.style.transform = `perspective(800px) rotateX(8deg) translateY(${sy * 0.08}px)`;
    }

    // About parallax number
    if(aboutNum){
      const rect = aboutNum.closest('section')?.getBoundingClientRect();
      if(rect && rect.top < window.innerHeight && rect.bottom > 0){
        const progress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
        aboutNum.style.transform = `translateY(calc(-50% + ${(progress - 0.5) * 60}px))`;
      }
    }
  }

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();

/* ─── HERO CARD MOUSE TILT ───────────────────── */
(function(){
  document.querySelectorAll('.hero-card-float').forEach(card => {
    card.addEventListener('mousemove', e => {
      const r = card.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width  - 0.5;
      const y = (e.clientY - r.top)  / r.height - 0.5;
      card.style.transform = `translateY(-8px) rotateY(${x * 8}deg) rotateX(${-y * 6}deg)`;
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = '';
    });
  });
})();

/* ─── STAGGER CHILDREN ON REVEAL ────────────── */
(function(){
  const staggerParents = document.querySelectorAll('.row[id]');
  staggerParents.forEach(parent => {
    const cards = parent.querySelectorAll('.scroll-reveal');
    cards.forEach((card, i) => {
      if(!card.style.transitionDelay){
        card.style.transitionDelay = (i * 0.06) + 's';
      }
    });
  });
})();

/* ─── NAV LINK MAGNETIC ──────────────────────── */
(function(){
  document.querySelectorAll('.nav-link-custom').forEach(link => {
    link.addEventListener('mousemove', e => {
      const r = link.getBoundingClientRect();
      const x = (e.clientX - r.left - r.width/2) * 0.15;
      const y = (e.clientY - r.top  - r.height/2) * 0.15;
      link.style.transform = `translate(${x}px, ${y}px)`;
    });
    link.addEventListener('mouseleave', () => { link.style.transform = ''; });
  });
})();

/* ─── COUNTER ANIMATION ──────────────────────── */
(function(){
  function animateCount(el){
    const raw = el.textContent.trim();
    const match = raw.match(/^([\D]*)(\d+(?:\.\d+)?)(.*)/);
    if(!match) return;
    const prefix = match[1], num = parseFloat(match[2]), suffix = match[3];
    const duration = 1800, steps = 60;
    let step = 0;
    const interval = setInterval(() => {
      step++;
      const progress = step / steps;
      const ease = 1 - Math.pow(1 - progress, 3);
      el.textContent = prefix + (num < 20 ? Math.round(ease * num) : Math.floor(ease * num)) + suffix;
      if(step >= steps){ clearInterval(interval); el.textContent = raw; }
    }, duration / steps);
  }

  const obs = new IntersectionObserver(entries => {
    entries.forEach(en => {
      if(en.isIntersecting){
        animateCount(en.target);
        obs.unobserve(en.target);
      }
    });
  }, { threshold: 0.5 });

  document.querySelectorAll('.hero-stat-num, .stat-num').forEach(el => obs.observe(el));
})();

/* ─── SECTION FADE BG ON SCROLL ─────────────── */
(function(){
  const sections = document.querySelectorAll('section');
  const obs = new IntersectionObserver(entries => {
    entries.forEach(en => {
      if(en.isIntersecting) en.target.classList.add('in-view');
    });
  }, { threshold: 0.05 });
  sections.forEach(s => obs.observe(s));
})();

/* ─── TICKER PAUSE ON HOVER ──────────────────── */
(function(){
  const ticker = document.querySelector('.ticker-inner');
  if(!ticker) return;
  const wrap = ticker.closest('.ticker-wrap');
  if(wrap){
    wrap.addEventListener('mouseenter', () => ticker.style.animationPlayState = 'paused');
    wrap.addEventListener('mouseleave', () => ticker.style.animationPlayState = 'running');
  }
})();

/* ─── SMOOTH BTN CLICK RIPPLE ────────────────── */
document.addEventListener('click', e => {
  const btn = e.target.closest('.btn-primary-gold, .btn-outline-gold, .loc-btn');
  if(!btn) return;
  const ripple = document.createElement('span');
  const r = btn.getBoundingClientRect();
  const size = Math.max(r.width, r.height) * 2;
  Object.assign(ripple.style, {
    position: 'absolute',
    borderRadius: '50%',
    width: size + 'px', height: size + 'px',
    left: (e.clientX - r.left - size/2) + 'px',
    top:  (e.clientY - r.top  - size/2) + 'px',
    background: 'rgba(255,255,255,0.18)',
    transform: 'scale(0)',
    animation: 'rippleOut 0.55s ease forwards',
    pointerEvents: 'none',
    zIndex: 10
  });
  if(getComputedStyle(btn).position === 'static') btn.style.position = 'relative';
  btn.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});

/* ─── RIPPLE KEYFRAME ────────────────────────── */
(function(){
  const style = document.createElement('style');
  style.textContent = `@keyframes rippleOut{to{transform:scale(1);opacity:0;}}`;
  document.head.appendChild(style);
})();

/* ─── LOCATION CARD HOVER GLOW ───────────────── */
document.addEventListener('mousemove', e => {
  document.querySelectorAll('.location-card, .project-card').forEach(card => {
    const r = card.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;
    card.style.setProperty('--mouse-x', x + 'px');
    card.style.setProperty('--mouse-y', y + 'px');
  });
});

/* ─── HERO CAROUSEL ──────────────────────────────── */
(function(){
  var track = document.getElementById('heroCarouselTrack');
  var dots = document.querySelectorAll('.hero-dot');
  var current = 0;
  var total = 8;
  var timer;

  function goTo(idx){
    current = (idx + total) % total;
    if(track) track.style.transform = 'translateX(-' + (current * 100) + '%)';
    dots.forEach(function(d,i){
      d.style.background = i === current ? 'var(--gold)' : 'rgba(255,255,255,0.3)';
      d.style.opacity = i === current ? '1' : '0.5';
    });
  }

  window.heroCarouselNext = function(){ goTo(current + 1); resetTimer(); };
  window.heroCarouselPrev = function(){ goTo(current - 1); resetTimer(); };
  window.heroCarouselGoTo = function(idx){ goTo(idx); resetTimer(); };

  function resetTimer(){
    clearInterval(timer);
    timer = setInterval(function(){ goTo(current + 1); }, 4800);
  }

  resetTimer();
})();
</script>

</body>
</html><?php /**PATH D:\Xampp\htdocs\nestpune-laravel\resources\views/welcome.blade.php ENDPATH**/ ?>