/* ====== EXECUTIVE DARK — PREMIUM DESIGN SYSTEM v4 ====== */
[data-theme="dark"]{
  --bg:#070b14;
  --bg-grad:radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.08), transparent 60%),
            radial-gradient(900px 500px at -10% 110%, rgba(99,102,241,.06), transparent 60%),
            #070b14;
  --surface:#0f1626;
  --surface2:#151f33;
  --surface3:#1c2740;
  --glass:rgba(20,28,46,.72);
  --border:rgba(148,163,184,.12);
  --border2:rgba(148,163,184,.22);
  --accent:#3b82f6;
  --accent2:#6366f1;
  --accent-soft:rgba(59,130,246,.14);
  --accent-glow:rgba(59,130,246,.35);
  --grad-accent:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(59,130,246,.18),rgba(99,102,241,.10));
  --green:#10b981; --green-bg:rgba(16,185,129,.12); --green-glow:rgba(16,185,129,.28);
  --yellow:#f59e0b; --yellow-bg:rgba(245,158,11,.12); --yellow-glow:rgba(245,158,11,.28);
  --mou:#a78bfa; --mou-bg:rgba(167,139,250,.12); --mou-glow:rgba(167,139,250,.28);
  --red:#ef4444; --red-bg:rgba(239,68,68,.12);
  --text:#f1f5f9;
  --text2:#94a3b8;
  --muted:#64748b;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 28px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --shadow-xl:0 32px 80px rgba(0,0,0,.65);
  --map-tile:dark_all;
  --tooltip-bg:rgba(15,22,38,.96);
  --stat-bg:rgba(15,22,38,.78);
  --topbar-border:rgba(59,130,246,.18);
}
[data-theme="light"]{
  /* Modern Light Enterprise — crisp, premium, professional */
  --bg:#fafbfc;
  --bg-grad:
    radial-gradient(1200px 640px at 88% -8%, rgba(59,130,246,.08), transparent 62%),
    radial-gradient(900px 520px at -6% 108%, rgba(15,27,61,.055), transparent 62%),
    linear-gradient(180deg,#fafbfc 0%,#f4f7fb 100%);
  --surface:#ffffff;
  --surface2:#f7f9fc;
  --surface3:#eef2f8;
  --glass:rgba(255,255,255,.78);
  --border:rgba(15,27,61,.08);
  --border2:rgba(15,27,61,.16);
  --accent:#3b82f6; --accent2:#0f1b3d;
  --accent-soft:rgba(59,130,246,.10);
  --accent-glow:rgba(59,130,246,.24);
  --grad-accent:linear-gradient(135deg,#3b82f6 0%,#0f1b3d 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(59,130,246,.14),rgba(15,27,61,.06));
  --green:#059669; --green-bg:rgba(5,150,105,.10); --green-glow:rgba(5,150,105,.22);
  --yellow:#d97706; --yellow-bg:rgba(217,119,6,.10); --yellow-glow:rgba(217,119,6,.22);
  --mou:#6366f1; --mou-bg:rgba(99,102,241,.10); --mou-glow:rgba(99,102,241,.22);
  --red:#dc2626; --red-bg:rgba(220,38,38,.10);
  --text:#0f1b3d; --text2:#475569; --muted:#8b95a7;
  --shadow-sm:0 1px 2px rgba(15,27,61,.04), 0 2px 6px rgba(15,27,61,.05);
  --shadow-md:0 6px 20px -6px rgba(15,27,61,.10), 0 2px 6px rgba(15,27,61,.05);
  --shadow-lg:0 18px 48px -12px rgba(15,27,61,.14), 0 4px 12px rgba(15,27,61,.06);
  --shadow-xl:0 32px 80px -20px rgba(15,27,61,.20), 0 8px 20px rgba(15,27,61,.08);
  --map-tile:light_all;
  --tooltip-bg:rgba(255,255,255,.98);
  --stat-bg:rgba(255,255,255,.92);
  --topbar-border:rgba(59,130,246,.14);
}

/* ====== RESET ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100vh;overflow:hidden;}
body{
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-grad); color:var(--text);
  display:flex; flex-direction:column;
  transition:background .35s, color .35s;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01","ss03";
}
body.auth-locked #topbar,
body.auth-locked #filterbar,
body.auth-locked #main{
  filter:blur(2px);
  pointer-events:none;
  user-select:none;
}
.auth-only-admin{display:none !important;}
body.role-admin .auth-only-admin{display:flex !important;}
.role-hidden{display:none !important;}

/* ====== AUTH ====== */
#auth-screen{
  position:fixed; inset:0; z-index:200000;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 16% 18%, rgba(59,130,246,.20), transparent 32%),
    radial-gradient(circle at 84% 74%, rgba(99,102,241,.18), transparent 34%),
    radial-gradient(circle at 52% 46%, rgba(14,165,233,.08), transparent 56%),
    linear-gradient(135deg, #040711 0%, #07101f 52%, #0b1224 100%);
  overflow:hidden;
}
body:not(.auth-locked) #auth-screen{display:none;}
#auth-screen::before,
#auth-screen::after{
  content:""; position:absolute; pointer-events:none;
  border-radius:999px; filter:blur(4px);
}
#auth-screen::before{
  width:520px; height:520px; left:-160px; top:-180px;
  background:radial-gradient(circle, rgba(96,165,250,.20), transparent 68%);
}
#auth-screen::after{
  width:620px; height:620px; right:-210px; bottom:-240px;
  background:radial-gradient(circle, rgba(129,140,248,.18), transparent 68%);
}
#auth-particles{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.28;
}

.auth-card-wrap{
  position:relative; z-index:1;
  perspective:1600px;
  width:min(430px, 100%);
  animation:authRise .7s cubic-bezier(.16,1,.3,1);
}
@keyframes authRise{
  from{opacity:0; transform:translateY(28px) scale(.97);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.auth-card{
  position:relative;
  width:100%;
  display:block;
  min-height:auto;
  padding:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(9,15,29,.78);
  backdrop-filter:blur(34px) saturate(170%);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
  border:1px solid rgba(226,232,240,.16);
  border-radius:24px;
  box-shadow:
    var(--shadow-xl),
    0 28px 80px rgba(2,6,23,.58),
    0 0 100px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .22s ease-out, box-shadow .22s ease-out;
  will-change:transform;
}
.auth-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--auth-angle,0deg),
    transparent 0deg, rgba(96,165,250,.82) 58deg,
    transparent 122deg, rgba(129,140,248,.78) 210deg,
    transparent 288deg, rgba(14,165,233,.70) 360deg);
  opacity:.46;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px; mask-composite:exclude; -webkit-mask-composite:xor;
}
.auth-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(96,165,250,.12), transparent 34%);
  opacity:.72;
}

.auth-brand{
  position:relative;
  display:flex; justify-content:center;
  padding:4px 0 24px;
  background:none;
  border-right:none;
  border-bottom:1px solid rgba(148,163,184,.14);
  transform:translateZ(20px);
  z-index:1;
}
.auth-brand .auth-brand-top{display:block;}
.auth-brand .auth-logo-row{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;}
.auth-brand img{
  height:64px; width:64px; object-fit:contain; padding:11px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  box-shadow:0 18px 34px rgba(2,6,23,.30), 0 0 0 7px rgba(255,255,255,.045);
}
.auth-brand h2{
  font-size:24px; line-height:1.08; letter-spacing:-.35px; font-weight:800;
  background:linear-gradient(135deg, #fff 0%, #dbeafe 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-subtitle{
  font-size:11px; color:rgba(226,232,240,.62); margin-top:6px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase;
}
.auth-form-side{
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 2px 0;
  transform:translateZ(30px);
  position:relative; z-index:1;
}
.auth-form-head{margin-bottom:24px; text-align:center;}
.auth-form-head h3{
  font-size:22px; font-weight:800; letter-spacing:-.35px; color:var(--text);
  margin:0;
}
.auth-field{display:flex; flex-direction:column; gap:9px; margin-bottom:18px; transform:translateZ(40px);}
.auth-field label{
  font-size:11.5px; font-weight:800; color:rgba(226,232,240,.78);
  text-transform:uppercase; letter-spacing:.9px;
  display:flex; align-items:center; gap:6px;
}
.auth-input-wrap{
  position:relative; display:flex; align-items:center;
}
.auth-icon{
  position:absolute; left:16px; width:17px; height:17px;
  color:var(--muted); pointer-events:none;
  transition:color .18s, transform .18s;
}
.auth-input-wrap:focus-within .auth-icon{color:var(--accent); transform:scale(1.1);}
.auth-field input,
.auth-field select{
  width:100%;
  background:rgba(15,23,42,.56);
  border:1px solid rgba(148,163,184,.22);
  color:var(--text); border-radius:14px; padding:16px 14px 16px 46px;
  font-size:14.5px; font-family:inherit; outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-field input:focus,
.auth-field select:focus{
  border-color:rgba(96,165,250,.72);
  background:rgba(15,23,42,.74);
  box-shadow:0 0 0 4px rgba(59,130,246,.16), 0 14px 32px rgba(2,6,23,.24);
}
.auth-field input::placeholder{color:var(--muted);}
.auth-toggle-pw{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:8px; cursor:pointer;
  color:var(--muted); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  transition:color .18s, background .18s;
}
.auth-toggle-pw:hover{color:var(--accent); background:var(--accent-soft);}
.auth-toggle-pw svg{width:18px; height:18px;}
.auth-divider{
  display:flex; align-items:center; gap:12px;
  margin:24px 0 6px; transform:translateZ(20px);
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.30), transparent);
}
.auth-submit{
  width:100%; border:none; border-radius:15px; padding:17px 14px;
  background:linear-gradient(135deg,#2563eb 0%,#3b82f6 46%,#6366f1 100%);
  color:#fff; font-family:inherit;
  font-size:15px; font-weight:800; cursor:pointer; letter-spacing:.4px;
  box-shadow:0 18px 40px rgba(59,130,246,.34), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .18s, box-shadow .18s, filter .18s;
  transform:translateZ(50px);
  position:relative; z-index:1;
  margin-top:6px;
  overflow:hidden;
}
.auth-submit::after{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:authShine 3.2s ease-in-out infinite;
}
@keyframes authShine{
  0%{left:-120%;} 60%,100%{left:140%;}
}
.auth-card:hover .auth-submit{
  transform:translateZ(50px) translateY(-2px);
  filter:saturate(1.12) brightness(1.05);
  box-shadow:0 24px 54px rgba(59,130,246,.40), inset 0 1px 0 rgba(255,255,255,.36);
}
.auth-message{
  display:none; margin:16px 0 0; padding:12px 14px;
  border-radius:11px; font-size:12.5px; line-height:1.5;
  background:var(--red-bg); color:var(--red); border:1px solid rgba(239,68,68,.24);
}
.auth-message.show{display:block;}

/* ===== Responsive ===== */
@media(max-width:860px){
  .auth-card-wrap{width:min(430px, 100%);}
  .auth-card{min-height:auto;}
  .auth-brand{
    border-right:none; border-bottom:1px solid rgba(148,163,184,.14);
    padding:4px 0 22px; min-height:auto;
  }
  .auth-form-side{padding:24px 0 0;}
}
@media(max-width:480px){
  #auth-screen{padding:14px;}
  .auth-card{border-radius:22px; padding:24px;}
  .auth-brand{padding:2px 0 20px;}
  .auth-form-side{padding:22px 0 0;}
  .auth-form-head h3{font-size:20px;}
}
.user-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); border-radius:999px; padding:7px 11px;
  font-size:12px; font-weight:700; white-space:nowrap;
}
.user-pill strong{color:var(--text); font-size:12px; max-width:170px; overflow:hidden; text-overflow:ellipsis;}
.user-pill span{color:var(--accent); text-transform:uppercase; font-size:10.5px; letter-spacing:.5px;}
#user-admin-modal{
  position:fixed; inset:0; z-index:120000; display:none;
  background:rgba(0,0,0,.58); backdrop-filter:blur(10px);
  align-items:center; justify-content:center; padding:18px;
}
#user-admin-modal.open{display:flex; animation:fadeIn .25s ease;}
.user-admin-container{
  width:min(980px, 96vw); max-height:92vh; overflow:hidden;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:14px; box-shadow:var(--shadow-xl);
  display:grid; grid-template-columns:minmax(280px, 360px) 1fr;
}
.user-admin-panel{padding:22px; border-right:1px solid var(--border); overflow:auto;}
.user-admin-list{padding:22px; overflow:auto;}
.user-admin-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px;}
.user-admin-head h3{font-size:18px; letter-spacing:-.2px;}
.user-admin-head p{font-size:12px; color:var(--text2); margin-top:4px;}
.user-admin-close{
  background:var(--surface2); border:1px solid var(--border); color:var(--text2);
  border-radius:9px; padding:8px 10px; cursor:pointer; font-family:inherit;
}
.user-admin-close:hover{background:var(--red-bg); color:var(--red); border-color:var(--red);}
.user-form-actions{display:flex; gap:10px; align-items:center; margin-top:8px;}
.user-admin-btn{
  border:1px solid var(--border2); border-radius:10px; padding:10px 13px;
  cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:800;
  background:var(--surface2); color:var(--text2);
}
.user-admin-btn.primary{border:none; background:var(--grad-accent); color:#fff;}
.user-admin-btn.danger{color:var(--red); border-color:rgba(239,68,68,.35); background:var(--red-bg);}
.user-table{width:100%; border-collapse:collapse;}
.user-table th,.user-table td{padding:11px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:12.5px;}
.user-table th{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px;}
.user-role-badge{display:inline-flex; border-radius:999px; padding:4px 9px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase;}
.user-row-actions{display:flex; gap:8px; justify-content:flex-end;}
@media (max-width: 860px){
  .user-admin-container{grid-template-columns:1fr;}
  .user-admin-panel{border-right:none; border-bottom:1px solid var(--border);}
  .user-pill strong{display:none;}
}

/* ====== TOPBAR ====== */
#topbar{
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent) 0%, color-mix(in oklab, var(--surface) 78%, transparent) 100%);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--topbar-border);
  padding:0 24px; height:64px;
  display:flex; align-items:center; gap:16px;
  flex-shrink:0; z-index:9000; overflow:visible;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 24px rgba(0,0,0,.25);
  position:relative;
}
#topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  opacity:.5;
}
.logo{display:flex; align-items:center; gap:12px; white-space:nowrap;}
.logo-icon{font-size:26px;}
.logo h1{font-size:15px; font-weight:600; letter-spacing:-.2px; color:var(--text);}
.logo h1 span{
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800; letter-spacing:-.3px;
}
.total-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; border-radius:999px; padding:0 12px;
  font-size:11.5px; font-weight:800; letter-spacing:.2px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.count-badge{
  min-width:52px;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:#fff;
  box-shadow:0 8px 18px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
.sync-badge{
  background:rgba(148,163,184,.10);
  border:1px solid rgba(148,163,184,.12);
  color:var(--text2);
  font-weight:700;
}
.svg-icon{
  width:1em; height:1em; display:inline-block; vertical-align:-.14em;
  flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.svg-icon-fill{fill:currentColor; stroke:none;}
.icon-label{display:inline-flex; align-items:center; gap:7px;}
.mobile-actions-toggle{display:none;}
.topbar-actions{
  display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto;
}
.topbar-group{
  display:flex; align-items:center; gap:8px;
}
.topbar-primary-actions,
.topbar-user-actions{
  padding-left:8px;
  border-left:1px solid var(--border);
}

/* SEARCH */
.search-wrap{position:relative; flex:1; max-width:420px; z-index:2000; margin-left:auto;}
#filterbar.with-search .filter-controls{flex:0 1 auto;}
#filterbar.with-search .search-wrap{
  flex:1 1 420px;
  min-width:260px;
  max-width:560px;
  margin-left:12px;
}
#search-input{
  width:100%;
  background:color-mix(in oklab, var(--surface2) 80%, transparent);
  border:1px solid var(--border);
  border-radius:10px; padding:10px 38px 10px 40px;
  color:var(--text); font-size:13.5px; outline:none;
  transition:border .18s, box-shadow .18s, background .18s;
  font-family:inherit;
}
#search-input:focus{
  border-color:var(--accent);
  background:var(--surface2);
  box-shadow:0 0 0 4px var(--accent-soft);
}
#search-input::placeholder{color:var(--muted); font-size:13px;}
.search-ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; display:flex; align-items:center;
}
#search-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--surface3); border:none; color:var(--text2); cursor:pointer;
  font-size:14px; display:none; line-height:1; padding:0;
  width:22px; height:22px; border-radius:50%;
  align-items:center; justify-content:center;
  transition:all .15s;
}
#search-clear .svg-icon{width:13px; height:13px;}
#search-clear:hover{background:var(--accent); color:#fff;}
#autocomplete{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:12px; max-height:320px; overflow-y:auto;
  z-index:99999; display:none;
  box-shadow:var(--shadow-lg);
  padding:4px;
}
.ac-item{
  padding:10px 12px; cursor:pointer; border-radius:8px;
  transition:background .12s;
  display:flex; align-items:center; gap:10px;
}
.ac-item:hover{background:var(--surface2);}
.ac-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 3px color-mix(in oklab, currentColor 20%, transparent);}
.ac-texts .ac-th{font-size:13px; font-weight:600; color:var(--text);}
.ac-texts .ac-en{font-size:11px; color:var(--text2); margin-top:2px;}

/* THEME / BUILDING BUTTONS */
#theme-btn, #building-toggle, #add-building-btn,
#user-manage-btn, #export-csv-btn, #sync-boq-db-btn, #logout-btn{
  min-height:36px;
  background:rgba(15,23,42,.34); border:1px solid var(--border);
  color:var(--text2); border-radius:11px; padding:0 13px;
  cursor:pointer; font-size:12.5px; white-space:nowrap;
  transition:border-color .18s, color .18s, background .18s, transform .18s, box-shadow .18s;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-weight:750; letter-spacing:.2px;
}
#theme-btn:hover, #building-toggle:hover, #user-manage-btn:hover, #export-csv-btn:hover, #sync-boq-db-btn:hover, #logout-btn:hover{
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#add-building-btn{
  border:none;
  background:var(--grad-accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(59,130,246,.26), inset 0 1px 0 rgba(255,255,255,.28);
}
#add-building-btn:hover{
  color:#fff;
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 14px 30px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.32);
}
#building-toggle.active{
  background:var(--grad-accent-soft);
  border-color:var(--accent); color:var(--accent);
}

/* ====== FILTER BAR ====== */
#filterbar{
  position:relative;
  background:color-mix(in oklab, var(--surface) 70%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:10px 24px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  flex-shrink:0; z-index:9100; overflow:visible;
  transition:padding .22s ease, min-height .22s ease;
}
#filterbar.filters-collapsed{padding-top:7px; padding-bottom:7px; min-height:40px;}
.filter-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex:1;}
.filters-collapsed .filter-controls{display:none;}
.filter-label{
  font-size:10.5px; color:var(--muted); font-weight:700; white-space:nowrap;
  text-transform:uppercase; letter-spacing:1px; margin-right:4px;
}
#filter-toggle{
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); border-radius:8px; padding:7px 11px;
  font-size:12px; cursor:pointer; transition:all .18s; white-space:nowrap;
  font-family:inherit; font-weight:700; display:flex; align-items:center; gap:6px;
}
#filter-toggle:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
#filter-toggle .chev{transition:transform .18s; width:13px; height:13px;}
#filterbar.filters-collapsed #filter-toggle .chev{transform:rotate(-90deg);}
select.flt{
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text); border-radius:8px; padding:7px 11px;
  font-size:12.5px; cursor:pointer; outline:none;
  transition:all .18s; font-family:inherit; font-weight:500;
}
select.flt:hover{border-color:var(--border2);}
select.flt:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
select.flt.active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}
#btn-reset{
  background:transparent; border:1px solid var(--border);
  color:var(--text2); border-radius:8px; padding:7px 13px;
  font-size:12.5px; cursor:pointer; transition:all .18s; white-space:nowrap;
  font-family:inherit; font-weight:600;
}
#btn-reset:hover{border-color:var(--red); color:var(--red); background:var(--red-bg);}
#result-count{
  font-size:12px; color:var(--text2); white-space:nowrap; margin-left:auto;
  font-variant-numeric:tabular-nums; letter-spacing:.2px; font-weight:500;
  padding:5px 10px; background:var(--surface2); border-radius:6px;
  border:1px solid var(--border);
}

/* ====== MAIN ====== */
#main{display:flex; flex:1; overflow:hidden; position:relative;}

/* ====== MAP ====== */
#map-wrap{flex:1; position:relative;}
#map{width:100%; height:100%;}
.map-error{
  position:absolute; inset:0; z-index:500;
  display:grid; place-items:center; text-align:center;
  padding:24px; color:var(--text);
  background:var(--bg-grad);
}
.map-error-box{
  max-width:420px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border2); border-radius:12px;
  box-shadow:var(--shadow-lg); line-height:1.7;
}

/* TOOLTIP */
#map-tooltip{
  position:absolute; pointer-events:none; z-index:600;
  background:var(--tooltip-bg);
  border:1px solid var(--border2);
  border-radius:12px; padding:12px 16px;
  box-shadow:var(--shadow-lg);
  display:none; max-width:260px;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:opacity .12s;
}
#map-tooltip .tt-name{font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:-.1px;}
#map-tooltip .tt-eng{font-size:11px; color:var(--text2); margin-top:3px;}
#map-tooltip .tt-row{display:flex; gap:5px; margin-top:10px; flex-wrap:wrap;}

/* STATS OVERLAY */
#statsbar{
  position:absolute; bottom:28px; left:28px; z-index:400;
  display:flex; gap:10px; flex-wrap:wrap;
  max-width:calc(100vw - 56px);
}
.stat-card{
  position:relative;
  background:var(--stat-bg);
  border:1px solid var(--border2);
  border-radius:14px; padding:14px 22px;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  min-width:112px; text-align:center;
  box-shadow:var(--shadow-md);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  overflow:hidden;
}
.stat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:14px 14px 0 0;
}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.stat-card:nth-child(1)::before{background:linear-gradient(90deg, var(--green), color-mix(in oklab, var(--green) 60%, transparent));}
.stat-card:nth-child(2)::before{background:linear-gradient(90deg, var(--mou), color-mix(in oklab, var(--mou) 60%, transparent));}
.stat-card:nth-child(3)::before{background:linear-gradient(90deg, var(--yellow), color-mix(in oklab, var(--yellow) 60%, transparent));}
.stat-card:nth-child(4)::before{background:linear-gradient(90deg, var(--red), color-mix(in oklab, var(--red) 60%, transparent));}
.stat-card .sv{
  font-size:30px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-1px;
}
.stat-card .sl{
  font-size:10.5px; color:var(--muted); margin-top:7px;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.sv-green{color:var(--green); text-shadow:0 0 24px var(--green-glow);}
.sv-purple{color:var(--mou); text-shadow:0 0 24px var(--mou-glow);}
.sv-yellow{color:var(--yellow); text-shadow:0 0 24px var(--yellow-glow);}
.sv-red{color:var(--red); text-shadow:0 0 24px rgba(239,68,68,.26);}

/* ====== SIDEBAR (drawer-style) ====== */
#sidebar{
  position:fixed; right:0; top:113px; bottom:0;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:410;
  width:360px;
  background:var(--surface);
  border-left:1px solid var(--border2);
  box-shadow:-12px 0 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
#sidebar.show{transform:translateX(0);}
#sidebar-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, var(--surface2), transparent);
}
#sidebar-header h2{
  font-size:11px; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:1.2px;
}
#sb-count{
  font-size:11px; color:var(--text2); font-weight:600;
  font-variant-numeric:tabular-nums;
  padding:3px 9px; background:var(--surface3); border-radius:999px;
}
#sidebar-list{overflow-y:auto; flex:1; padding:6px;}
.list-item{
  padding:13px 14px;
  margin:3px 2px;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .15s, border-color .15s;
  border:1px solid transparent;
  position:relative;
  contain:layout paint;
  content-visibility:auto;
  contain-intrinsic-size:96px;
}
.list-item:hover{background:var(--surface2); border-color:var(--border);}
.list-item.selected{
  background:var(--grad-accent-soft);
  border-color:color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow:0 4px 16px var(--accent-soft);
}
.list-item.selected::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  background:var(--grad-accent); border-radius:0 3px 3px 0;
}
.li-name{font-size:13.5px; font-weight:600; color:var(--text); line-height:1.4; letter-spacing:-.1px;}
.li-eng{font-size:11px; color:var(--text2); margin-top:2px;}
.li-meta{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;}

/* TAGS */
.tag{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:6px;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  letter-spacing:.3px; line-height:1.4;
}
.tag-confirmed{background:var(--green-bg); color:var(--green); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--green) 25%, transparent);}
.tag-mou{background:var(--mou-bg); color:var(--mou); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--mou) 25%, transparent);}
.tag-check{background:var(--yellow-bg); color:var(--yellow); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--yellow) 25%, transparent);}
.tag-closed{background:var(--red-bg); color:var(--red); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--red) 25%, transparent);}
.tag-p1{background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent);}
.tag-p2{background:rgba(99,102,241,.14); color:var(--accent2); box-shadow:inset 0 0 0 1px rgba(99,102,241,.25);}
.tag-x{background:rgba(100,116,139,.14); color:var(--muted); box-shadow:inset 0 0 0 1px rgba(100,116,139,.20);}
.tag-neutral{background:var(--surface3); color:var(--text2); border:1px solid var(--border);}
.tag-l1{background:var(--green-bg); color:var(--green); border:1px solid color-mix(in oklab, var(--green) 28%, transparent);}
.tag-l2{background:var(--yellow-bg); color:var(--yellow); border:1px solid color-mix(in oklab, var(--yellow) 28%, transparent);}
.tag-l3{background:var(--red-bg); color:var(--red); border:1px solid color-mix(in oklab, var(--red) 28%, transparent);}

/* ====== DETAIL MODAL ====== */
#detail-drawer{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -46%) scale(.96);
  width:min(600px, 94vw);
  max-height:86vh;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:18px;
  display:flex; flex-direction:column; overflow:hidden;
  z-index:9500;
  box-shadow:var(--shadow-xl), 0 0 0 1px var(--border);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
#detail-drawer.open{
  opacity:1; pointer-events:all;
  transform:translate(-50%, -50%) scale(1);
}
#drawer-header{
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0; position:relative;
  background:linear-gradient(180deg, var(--surface2), transparent);
}
#drawer-close{
  position:absolute; top:18px; right:18px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); border-radius:9px;
  width:32px; height:32px; cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; font-family:inherit;
}
#drawer-close .svg-icon{width:16px; height:16px;}
#drawer-close:hover{background:var(--red-bg); border-color:var(--red); color:var(--red); transform:rotate(90deg);}
#drawer-body{overflow-y:auto; flex:1; padding:18px 24px 24px;}

/* DRAWER TABS */
.drawer-tabs{
  display:flex; gap:4px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:4px; margin:4px 0 18px;
}
.dtab{
  flex:1;
  padding:9px 14px; font-size:12.5px; font-weight:600;
  cursor:pointer; color:var(--text2);
  border:0; background:transparent; font-family:inherit;
  border-radius:7px;
  transition:all .18s; white-space:nowrap; letter-spacing:.2px;
  text-align:center;
}
.dtab:hover{color:var(--text); background:var(--surface3);}
.dtab.active{
  color:#fff;
  background:var(--grad-accent);
  box-shadow:0 4px 14px var(--accent-glow);
}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

/* DRAWER CONTENT */
.d-title{font-size:19px; font-weight:700; color:var(--text); line-height:1.3; padding-right:48px; letter-spacing:-.3px;}
.d-eng{font-size:12.5px; color:var(--text2); margin-top:4px;}
.d-tags{display:flex; gap:5px; flex-wrap:wrap; margin:12px 0 0;}

.section-head{
  font-size:10.5px; font-weight:800; color:var(--accent);
  text-transform:uppercase; letter-spacing:1.4px;
  padding-bottom:8px;
  margin:20px 0 14px;
  display:flex; align-items:center; gap:10px;
}
.section-head::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--border2), transparent);
}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.info-cell{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  transition:border .15s;
}
.info-cell:hover{border-color:var(--border2);}
.info-cell label{
  font-size:9.5px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; display:block; margin-bottom:4px;
}
.info-cell p{font-size:13px; color:var(--text); line-height:1.55; font-weight:500;}
.info-cell.full{grid-column:1/-1;}
.info-cell p a{color:var(--accent); text-decoration:none; font-weight:600;}
.info-cell p a:hover{text-decoration:underline;}
.coord-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.copy-coord-btn{
  border:1px solid var(--border); background:var(--surface3); color:var(--text2);
  border-radius:7px; padding:4px 8px; cursor:pointer;
  font:700 11px/1 'Inter','Segoe UI',sans-serif;
  display:inline-flex; align-items:center; gap:5px;
  transition:all .16s;
}
.copy-coord-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.copy-coord-btn.copied{border-color:var(--green); color:var(--green); background:var(--green-bg);}
.copy-coord-btn .svg-icon{width:12px; height:12px;}

/* FEE TABLE */
.fee-table{width:100%; border-collapse:separate; border-spacing:0; margin-top:6px; background:var(--surface2); border-radius:10px; overflow:hidden; border:1px solid var(--border);}
.fee-table tr{border-bottom:1px solid var(--border);}
.fee-table tr:last-child{border-bottom:none;}
.fee-table td{padding:11px 14px; font-size:13px; vertical-align:top; border-bottom:1px solid var(--border);}
.fee-table tr:last-child td{border-bottom:none;}
.fee-table td:first-child{color:var(--text2); width:60%;}
.fee-table td:last-child{font-weight:700; text-align:right; color:var(--text); font-variant-numeric:tabular-nums;}
.fee-total-row td{
  font-weight:800; color:var(--accent);
  background:var(--accent-soft);
  font-size:14.5px;
}
.fee-total-row td:last-child{color:var(--accent);}

.no-fee{color:var(--muted); font-size:13px; text-align:center; padding:32px 0; font-style:italic;}

.remark-box{
  background:var(--yellow-bg); border:1px solid color-mix(in oklab, var(--yellow) 30%, transparent);
  border-left:4px solid var(--yellow);
  border-radius:8px; padding:12px 16px; margin-top:10px;
  font-size:12.5px; color:var(--text); line-height:1.7;
}
.contact-card{
  background:var(--surface2); border-radius:12px;
  padding:16px; border:1px solid var(--border); margin-bottom:12px;
  transition:border .15s, transform .15s;
}
.contact-card:hover{border-color:var(--border2); transform:translateY(-1px);}
.contact-name{
  font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--border); letter-spacing:-.1px;
}
.contact-row{display:flex; align-items:flex-start; gap:10px; margin-top:9px; font-size:12.5px;}
.contact-row .ico{flex-shrink:0; margin-top:1px; display:flex; align-items:center; color:var(--accent);}
.contact-row .val{color:var(--text2); word-break:break-word; line-height:1.6;}
.contact-row .val a{color:var(--accent); text-decoration:none; font-weight:600;}

/* BUILDING DOCUMENTS / NAS */
.building-doc-toolbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.building-doc-toolbar .section-head{margin:0 0 5px; padding:0;}
.building-doc-toolbar .section-head::after{display:none;}
.building-doc-toolbar p{font-size:11.5px; color:var(--text2); line-height:1.55;}
.building-doc-download .svg-icon{width:13px; height:13px;}
.building-doc-status{
  margin:0 0 12px; border:1px solid; border-radius:9px; padding:9px 11px;
  font-size:11.5px; font-weight:700; line-height:1.5;
}
.building-doc-status.error{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.building-doc-connect{
  display:inline-flex; align-items:center; flex:0 0 auto; border:1px solid currentColor;
  border-radius:8px; padding:7px 10px; color:inherit; background:var(--surface);
  font:inherit; cursor:pointer;
}
.building-doc-connect:hover{filter:brightness(.97);}
.building-doc-connect:disabled{opacity:.6; cursor:wait;}
.building-doc-status.success{color:var(--green); background:var(--green-bg); border-color:color-mix(in oklab,var(--green) 30%,transparent);}
.building-doc-status.error{color:var(--red); background:var(--red-bg); border-color:color-mix(in oklab,var(--red) 30%,transparent);}
.building-doc-summary{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.building-doc-summary>span{
  background:var(--surface3); border:1px solid var(--border); border-radius:999px;
  color:var(--text2); padding:5px 9px; font-size:10.5px;
}
.building-doc-summary strong{color:var(--text);}
.building-doc-category{
  border:1px solid var(--border); border-radius:11px; overflow:hidden;
  background:var(--surface2); margin-top:11px;
}
.building-doc-category-head{
  width:100%; border:0; color:inherit; cursor:pointer; font-family:inherit; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--surface3); transition:background .16s;
}
.building-doc-category-head:hover:not(:disabled){background:var(--accent-soft);}
.building-doc-category-head:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.building-doc-category-head:disabled{cursor:default; opacity:.72;}
.building-doc-category.expanded .building-doc-category-head{border-bottom:1px solid var(--border);}
.building-doc-category-head>span:first-child{display:flex; align-items:center; gap:7px; color:var(--text); font-size:12px; font-weight:800;}
.building-doc-category-head .svg-icon{width:14px; height:14px; color:var(--accent);}
.building-doc-category-meta{display:inline-flex; align-items:center; gap:8px;}
.building-doc-category-meta>strong{
  min-width:24px; padding:3px 7px; border-radius:999px; text-align:center;
  background:var(--accent-soft); color:var(--accent); font-size:10.5px;
}
.building-doc-chevron{
  width:15px; height:15px; fill:none; stroke:var(--text2); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .18s;
}
.building-doc-category-head[aria-expanded="true"] .building-doc-chevron{transform:rotate(180deg);}
.building-doc-list{display:flex; flex-direction:column;}
.building-doc-list[hidden]{display:none;}
.building-doc-row{
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:10px 11px; border-bottom:1px solid var(--border);
}
.building-doc-row:last-child{border-bottom:0;}
.building-doc-type{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; padding:5px 4px; color:#fff; font-size:9px; font-weight:900; letter-spacing:.4px;
  background:#64748b;
}
.building-doc-type.dwg{background:#2563eb;}
.building-doc-type.pdf{background:#dc2626;}
.building-doc-type.image{background:#059669;}
.building-doc-info{min-width:0; display:flex; flex-direction:column; gap:3px;}
.building-doc-info strong{color:var(--text); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.building-doc-info>span{color:var(--muted); font-size:9.5px; line-height:1.45; overflow-wrap:anywhere;}
.building-doc-download{
  border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent);
  border-radius:7px; padding:7px 9px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; font:800 10px/1 'Inter','Segoe UI',sans-serif;
  transition:all .16s;
}
.building-doc-download:hover{background:var(--accent); color:#fff; transform:translateY(-1px);}
.building-doc-none,.building-doc-empty{
  color:var(--muted); font-size:11.5px; text-align:center; padding:18px 12px;
}

@media(max-width:560px){
  .building-doc-toolbar{flex-direction:column;}
  .building-doc-row{grid-template-columns:42px minmax(0,1fr);}
  .building-doc-row .building-doc-download{grid-column:2; justify-self:start;}
  .drawer-tabs .dtab{padding-left:7px; padding-right:7px; font-size:11px;}
}

/* LEAFLET OVERRIDES */
.leaflet-popup-content-wrapper{
  background:var(--surface) !important; border:1px solid var(--border2) !important;
  color:var(--text) !important; border-radius:12px !important;
  box-shadow:var(--shadow-lg) !important;
}
.leaflet-popup-tip{background:var(--surface) !important; border:1px solid var(--border2) !important;}
.leaflet-popup-content{margin:0 !important; font-family:'Inter','Segoe UI',sans-serif;}
.leaflet-popup-close-button{
  top:8px !important; right:8px !important;
  width:24px !important; height:24px !important; border-radius:50% !important;
  display:grid !important; place-items:center !important;
  background:color-mix(in oklab, var(--surface) 84%, transparent) !important;
  color:var(--text2) !important; border:1px solid var(--border) !important;
  font:700 16px/1 'Inter','Segoe UI',sans-serif !important;
}
.leaflet-popup-close-button:hover{background:var(--red-bg) !important; color:var(--red) !important;}
.lf-popup{padding:14px 16px; min-width:200px;}
.lf-popup .pn{font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:-.1px;}
.lf-popup .pe{font-size:11px; color:var(--text2); margin-top:3px;}
.lf-popup .pm{display:flex; gap:5px; flex-wrap:wrap; margin-top:9px;}
.lf-popup .popen{
  display:block; width:100%; margin-top:12px;
  background:var(--grad-accent); color:#fff; border:none; border-radius:8px;
  padding:9px; font-size:12.5px; font-weight:700; cursor:pointer; text-align:center;
  font-family:inherit; letter-spacing:.3px; transition:transform .15s, box-shadow .15s;
  box-shadow:0 4px 12px var(--accent-glow);
}
.lf-popup .popen:hover{transform:translateY(-1px); box-shadow:0 6px 18px var(--accent-glow);}
.leaflet-control-zoom a{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--border2) !important;
  backdrop-filter:blur(10px);
}
.leaflet-control-zoom a:hover{background:var(--surface2) !important; color:var(--accent) !important;}
.leaflet-control-attribution{
  background:var(--glass) !important; color:var(--text2) !important;
  backdrop-filter:blur(10px); border-radius:6px 0 0 0 !important;
  font-size:10px !important;
}
.leaflet-control-attribution a{color:var(--accent) !important;}
.map-mode-toggle{
  position:absolute; top:14px; left:58px; z-index:420;
  display:flex; gap:4px; padding:4px;
  background:var(--glass); border:1px solid var(--border2); border-radius:10px;
  box-shadow:var(--shadow-md); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.map-mode-toggle button{
  border:none; background:transparent; color:var(--text2);
  padding:7px 10px; border-radius:7px; cursor:pointer;
  font:700 11px/1 'Inter','Segoe UI',sans-serif; letter-spacing:.2px;
  transition:background .16s, color .16s, transform .16s;
}
.map-mode-toggle button:hover{background:var(--surface2); color:var(--text); transform:translateY(-1px);}
.map-mode-toggle button.active{background:var(--grad-accent); color:#fff; box-shadow:0 5px 16px var(--accent-glow);}
.map-sync-status{
  position:absolute; top:72px; left:58px; z-index:420;
  min-height:32px;
  background:color-mix(in oklab, var(--surface) 86%, transparent);
  border:1px solid var(--border2);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.map-sync-status::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(16,185,129,.13);
  margin-right:8px;
}
.map-tools-panel{
  position:absolute; top:14px; right:14px; z-index:420;
  width:232px; padding:12px;
  background:var(--glass); border:1px solid var(--border2); border-radius:12px;
  box-shadow:var(--shadow-md); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.map-tools-actions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;}
.map-tool-btn{
  border:1px solid var(--border); background:var(--surface2); color:var(--text);
  border-radius:8px; padding:8px 9px; cursor:pointer;
  font:800 11px/1 'Inter','Segoe UI',sans-serif; letter-spacing:.2px;
  transition:transform .16s, border-color .16s, background .16s, color .16s;
}
.map-tool-btn:hover{transform:translateY(-1px); border-color:var(--border2); background:var(--surface3);}
.map-tool-btn.active{background:var(--grad-accent); color:#fff; border-color:transparent; box-shadow:0 5px 16px var(--accent-glow);}
.measure-status{
  margin-top:9px; padding:9px 10px; border:1px solid var(--border); border-radius:9px;
  background:color-mix(in oklab, var(--surface) 90%, transparent);
  color:var(--text2); font-size:10.5px; font-weight:700; line-height:1.45;
}
.measure-status strong{color:var(--text); font-size:12px; font-variant-numeric:tabular-nums;}
#map.measuring,.measuring .leaflet-interactive{cursor:crosshair !important;}
.measure-drag-marker{
  display:grid !important; place-items:center; border-radius:50%;
  background:#2563eb; border:2px solid #fff;
  box-shadow:0 2px 7px rgba(0,0,0,.38); cursor:grab !important;
}
.measure-drag-marker:hover{box-shadow:0 0 0 5px rgba(37,99,235,.2),0 3px 9px rgba(0,0,0,.42);}
.measuring .measure-drag-marker{cursor:grab !important;}
.measure-drag-marker.leaflet-drag-target,.measuring .measure-drag-marker.leaflet-drag-target{cursor:grabbing !important;}
.measure-drag-marker.measure-start-point{background:#16a34a;}
.leaflet-tooltip.measure-tooltip{
  padding:4px 7px; border:1px solid rgba(255,255,255,.7); border-radius:6px;
  background:#2563eb; color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.25);
  font:800 10.5px/1.2 'Inter','Segoe UI',sans-serif;
}
.leaflet-tooltip-top.measure-tooltip::before{border-top-color:#2563eb;}
.legend-panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .22s ease, opacity .18s ease, margin-top .18s ease;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
}
.legend-panel.collapsed{grid-template-rows:0fr; opacity:0; margin-top:0; pointer-events:none;}
.legend-panel-inner{overflow:hidden; display:grid; gap:0; padding:12px;}
.legend-panel-inner::before{
  content:"สถานะอาคาร";
  color:var(--muted);
  font:800 10px/1 'Inter','Segoe UI',sans-serif;
  letter-spacing:.7px;
  margin-bottom:8px;
}
.legend-row{
  display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; gap:10px;
  min-height:28px;
  padding:0 4px 0 2px;
  font-size:11.5px; color:var(--text2);
  border-bottom:1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.legend-row:nth-of-type(4){border-bottom:none; margin-bottom:10px;}
.legend-name{
  display:flex; align-items:center; gap:8px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700;
}
.legend-pin{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--legend-color); box-shadow:0 0 0 4px color-mix(in oklab, var(--legend-color) 14%, transparent);
}
.legend-count{
  min-width:0; text-align:right; justify-self:end;
  font-weight:900; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.15px;
}
.layer-toggle{
  width:100%; border:1px solid var(--border); background:var(--surface2); color:var(--text);
  border-radius:9px; padding:8px 9px; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
  font:800 11px/1 'Inter','Segoe UI',sans-serif;
  transition:opacity .16s, transform .16s, border-color .16s, background .16s;
}
.layer-toggle + .layer-toggle{margin-top:7px;}
.layer-toggle:hover{transform:translateY(-1px); border-color:color-mix(in oklab, var(--legend-color) 36%, var(--border));}
.layer-toggle.off{opacity:.52; color:var(--muted);}
.layer-toggle > span:first-child{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.15;
}
.layer-toggle-dot{width:8px; height:8px; border-radius:50%; background:var(--legend-color); flex:0 0 auto;}
.layer-state{
  justify-self:end;
  border-radius:999px;
  padding:3px 7px;
  background:color-mix(in oklab, var(--legend-color) 12%, transparent);
  color:var(--text);
  font-size:10px;
  line-height:1;
}
.layer-toggle.off .layer-state{background:var(--surface3); color:var(--muted);}
.pm-marker{
  position:relative; width:34px; height:42px;
  transform:translateZ(0); filter:drop-shadow(0 8px 12px rgba(0,0,0,.34));
}
.pm-marker svg{display:block; overflow:visible;}
.pm-marker .pin-shell{fill:color-mix(in oklab, var(--surface) 92%, transparent); stroke:rgba(255,255,255,.82); stroke-width:1.5;}
.pm-marker .pin-core{fill:var(--marker-color);}
.pm-marker .pin-glint{fill:rgba(255,255,255,.62);}
.pm-marker.selected{
  width:42px; height:52px;
  filter:drop-shadow(0 10px 18px color-mix(in oklab, var(--marker-color) 42%, rgba(0,0,0,.42)));
}
.pm-marker.selected::before{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--marker-color);
  transform:translate(-50%,-58%);
  animation:markerPulse 1.7s ease-out infinite;
}
@keyframes markerPulse{
  0%{opacity:.62; transform:translate(-50%,-58%) scale(.65);}
  100%{opacity:0; transform:translate(-50%,-58%) scale(2.45);}
}
.pm-cluster{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  color:#fff; font:800 13px/1 'Inter','Segoe UI',sans-serif;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), transparent 28%),
             linear-gradient(135deg, var(--accent), var(--accent2));
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 10px 28px var(--accent-glow), 0 0 0 5px rgba(59,130,246,.18);
}
.leaflet-marker-icon.marker-cluster{background:transparent; border:none;}
.lf-popup-premium{
  min-width:230px; overflow:hidden;
  border-radius:12px;
}
.lf-popup-head{
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 14px 11px;
  background:linear-gradient(180deg, var(--surface2), var(--surface));
  border-bottom:1px solid var(--border);
}
.lf-popup-dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto; margin-top:4px;
  background:var(--popup-color); box-shadow:0 0 0 4px color-mix(in oklab, var(--popup-color) 18%, transparent);
}
.lf-popup-title{font-size:13.5px; font-weight:800; color:var(--text); line-height:1.35;}
.lf-popup-sub{font-size:11px; color:var(--text2); margin-top:3px; line-height:1.35;}
.lf-popup-body{padding:12px 14px 14px;}
.lf-popup-tags{display:flex; gap:5px; flex-wrap:wrap;}
.lf-popup-action{
  display:block; width:100%; margin-top:12px;
  background:var(--grad-accent); color:#fff; border:none; border-radius:8px;
  padding:9px; font-size:12.5px; font-weight:800; cursor:pointer; text-align:center;
  font-family:inherit; letter-spacing:.2px; box-shadow:0 4px 12px var(--accent-glow);
}
.lf-popup-action:hover{transform:translateY(-1px); box-shadow:0 6px 18px var(--accent-glow);}

/* OVERLAY */
#drawer-overlay{
  position:fixed; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), rgba(0,0,0,.65));
  backdrop-filter:blur(8px) saturate(.7);
  -webkit-backdrop-filter:blur(8px) saturate(.7);
  z-index:9400;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  cursor:pointer;
}
#drawer-overlay.open{opacity:1; pointer-events:all;}

@media(max-width:1180px){
  #topbar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"logo menu";
    align-items:center;
    height:auto;
    min-height:64px;
    padding:10px 14px;
    gap:9px 10px;
  }
  .logo{grid-area:logo; min-width:0;}
  .logo h1{font-size:14px; overflow:hidden; text-overflow:ellipsis;}
  .mobile-actions-toggle{
    grid-area:menu;
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text2); border-radius:12px; padding:0 12px;
    cursor:pointer; font-size:12px; font-family:inherit; font-weight:800;
  }
  .mobile-actions-toggle[aria-expanded="true"]{
    border-color:var(--accent); color:var(--accent); background:var(--accent-soft);
  }
  .topbar-actions{
    position:absolute; top:calc(100% + 8px); right:14px;
    width:min(250px, calc(100vw - 28px));
    display:none; grid-template-columns:1fr; gap:8px;
    padding:10px;
    background:color-mix(in oklab, var(--surface) 94%, transparent);
    border:1px solid var(--border2); border-radius:14px;
    box-shadow:var(--shadow-lg); z-index:100000;
  }
  .topbar-actions.open{display:grid;}
  .topbar-group{
    display:grid; grid-template-columns:1fr; gap:8px;
    padding-left:0; border-left:none;
  }
  .topbar-actions .total-badge,
  .topbar-actions .user-pill,
  .topbar-actions button{
    width:100%; min-height:44px; justify-content:center;
  }
  .topbar-actions .total-badge{display:flex; align-items:center;}
  .topbar-actions .user-pill strong{display:inline; max-width:130px;}
  #filterbar.with-search .search-wrap{
    flex:1 1 320px;
    max-width:none;
    margin-left:0;
  }
}

@media(max-width:768px){
  #detail-drawer{width:96vw; max-height:90vh; border-radius:14px;}
  #filterbar{padding:8px 14px; gap:6px;}
  .filter-controls{gap:6px;}
  #statsbar{gap:6px; bottom:18px; left:14px;}
  .map-mode-toggle{top:10px; left:52px;}
  .map-mode-toggle button{padding:6px 8px; font-size:10px;}
  .map-sync-status{top:52px; left:52px; min-height:30px; padding:0 10px; font-size:11px;}
  .map-tools-panel{top:52px; right:10px; width:min(232px, calc(100vw - 20px)); padding:8px;}
  .map-tool-btn,.layer-toggle{font-size:10px; padding:7px;}
  .stat-card{padding:11px 16px; min-width:90px;}
  .stat-card .sv{font-size:24px;}
  .stat-card .sl{font-size:10px;}
  select.flt{font-size:12px; padding:6px 9px;}
  #sidebar{top:108px; width:100vw;}
  .info-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .logo-icon{height:34px !important;}
  select.flt{display:none;}
  #f-status{display:block;}
  .filters-collapsed #f-status{display:none;}
  #filterbar{padding:7px 10px;}
  #filterbar.with-search .search-wrap{
    flex-basis:100%;
    min-width:100%;
    order:3;
  }
  .map-sync-status{left:12px;}
  .filter-label{display:none;}
  #result-count{font-size:11px;}
}

/* FOCUS */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
button:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #auth-particles{display:none;}
  .auth-card{transform:none !important;}
}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* ====== QUOTATION FEATURE ====== */
#quotation-modal{
  display:none; position:fixed; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.78));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:10000;
  align-items:center; justify-content:center; padding:20px;
}
#quotation-modal.open{display:flex; animation:fadeIn .25s ease;}

#building-editor-modal{
  display:none; position:fixed; inset:0;
  background:radial-gradient(ellipse at center, rgba(15,23,42,.42), rgba(0,0,0,.78));
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  z-index:11000;
  align-items:center; justify-content:center; padding:18px;
}
#building-editor-modal.open{display:flex; animation:fadeIn .25s ease;}
#building-editor-container{
  width:min(920px,96vw);
  max-height:92vh;
  overflow:auto;
  background:linear-gradient(180deg, var(--surface2) 0%, var(--surface) 180px);
  border:1px solid var(--border2);
  border-radius:18px;
  box-shadow:var(--shadow-xl);
  padding:0;
}
.building-editor-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border);
  background:var(--grad-accent-soft);
}
.building-editor-kicker{
  display:block; color:var(--accent); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:1.2px; margin-bottom:5px;
}
#building-editor-title{
  font-size:20px; line-height:1.2; color:var(--text); margin:0;
  font-weight:800; letter-spacing:-.4px;
}
.building-editor-subtitle{
  color:var(--text2); font-size:12px; margin-top:6px;
}
.building-editor-close{
  border:1px solid var(--border2); background:var(--surface2); color:var(--text2);
  border-radius:10px; padding:8px 11px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700;
  transition:all .18s;
}
.building-editor-close:hover{background:var(--red-bg); border-color:var(--red); color:var(--red);}
#building-editor-form{padding:20px 24px 22px;}
.building-editor-message{
  display:none; margin:0 0 14px; padding:11px 13px;
  border:1px solid var(--yellow); border-radius:10px;
  background:var(--yellow-bg); color:var(--text);
  font-size:12px; line-height:1.55;
}
.building-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.building-editor-grid .full{grid-column:1 / -1;}
.building-editor-section{
  grid-column:1 / -1;
  padding-top:6px;
  margin-top:4px;
  border-top:1px solid var(--border);
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
}
.other-fees-panel{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.other-fees-list{display:flex; flex-direction:column; gap:10px;}
.other-fee-row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(135px,.75fr) minmax(120px,.65fr) minmax(130px,.7fr) minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.other-fee-period[hidden]{display:none;}
.other-fee-remove{
  border:1px solid color-mix(in oklab, var(--red) 40%, transparent);
  background:var(--red-bg);
  color:var(--red);
  border-radius:10px;
  padding:11px 12px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
}
.other-fee-add{
  align-self:flex-start;
  border:1px dashed var(--border2);
  background:var(--surface2);
  color:var(--accent);
  border-radius:10px;
  padding:10px 13px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:900;
}
.building-editor-message.show{display:block;}
.building-field label{
  display:block; color:var(--text); font-size:12px; font-weight:800;
  margin-bottom:7px; letter-spacing:.25px;
}
.building-field input,
.building-field select,
.building-field textarea{
  width:100%; background:var(--surface3); border:1px solid var(--border);
  color:var(--text); border-radius:10px; padding:11px 13px;
  font-size:13px; font-family:inherit;
  transition:border .18s, background .18s, box-shadow .18s;
}
.building-field textarea{resize:vertical; min-height:92px; line-height:1.55;}
.building-field input:focus,
.building-field select:focus,
.building-field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--surface2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.building-field input.is-invalid{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-bg);
}
#user-admin-form .building-field label{
  color:#334155 !important;
}
#user-admin-form .building-field input,
#user-admin-form .building-field select{
  background:#fff !important;
  border-color:#cbd5e1 !important;
  color:#0f172a !important;
  border-radius:12px !important;
  -webkit-text-fill-color:#0f172a;
}
#user-admin-form .building-field input::placeholder{
  color:#94a3b8 !important;
  opacity:1 !important;
}
#user-admin-form .building-field input:focus,
#user-admin-form .building-field select:focus{
  background:#fff !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14) !important;
}
#user-admin-form .building-field input:-webkit-autofill,
#user-admin-form .building-field input:-webkit-autofill:hover,
#user-admin-form .building-field input:-webkit-autofill:focus{
  box-shadow:0 0 0 1000px #fff inset, 0 0 0 4px rgba(37,99,235,.10) !important;
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a;
}
.building-editor-actions{
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--border);
}
.building-editor-action-group{display:flex; justify-content:flex-end; gap:10px;}
.building-editor-btn{
  border:1px solid var(--border2); border-radius:10px; padding:10px 14px;
  cursor:pointer; font-family:inherit; font-weight:800; font-size:12px;
  transition:all .18s;
}
.building-editor-btn.secondary{background:var(--surface2); color:var(--text2);}
.building-editor-btn.secondary:hover{background:var(--surface3); color:var(--text); transform:translateY(-1px);}
.building-editor-btn.danger{
  background:var(--red-bg); border-color:color-mix(in oklab, var(--red) 45%, transparent);
  color:var(--red);
}
.building-editor-btn.danger:hover{
  background:var(--red); border-color:var(--red); color:#fff;
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(239,68,68,.24);
}
.building-editor-btn[hidden]{display:none;}
.building-editor-btn.primary{
  border:none; background:var(--grad-accent); color:#fff;
  box-shadow:0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.building-editor-btn.primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px var(--accent-glow);}
@media(max-width:780px){
  .building-editor-grid{grid-template-columns:1fr;}
  .other-fee-row{grid-template-columns:1fr;}
  .building-editor-header{padding:18px;}
  #building-editor-form{padding:18px;}
  .building-editor-actions{flex-direction:column-reverse; align-items:stretch;}
  .building-editor-action-group{flex-direction:column-reverse;}
  .building-editor-btn{width:100%;}
}

#quotation-container{
  background:var(--surface);
  border-radius:18px;
  box-shadow:var(--shadow-xl);
  width:100%; max-width:1240px; height:90vh; max-height:90vh;
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border2);
  overflow:hidden;
}
#quotation-form-panel{
  padding:28px 32px; overflow-y:auto; overflow-x:hidden;
  border-right:1px solid var(--border);
  height:100%; box-sizing:border-box;
  background:linear-gradient(180deg, var(--surface2) 0%, var(--surface) 200px);
}
#quotation-preview-panel{
  padding:28px 32px; overflow-y:auto; overflow-x:hidden;
  background:var(--surface2); height:100%; box-sizing:border-box;
}
#quotation-container h2{
  color:var(--text); margin-bottom:22px; font-size:18px;
  font-weight:700; letter-spacing:-.3px;
  display:flex; align-items:center; gap:10px;
  padding-bottom:14px; border-bottom:1px solid var(--border);
}

.quotation-form-group{margin-bottom:16px;}
.quotation-form-group label{
  display:block; color:var(--text); font-size:12px;
  font-weight:700; margin-bottom:7px;
  text-transform:uppercase; letter-spacing:.6px;
}
.quotation-form-group input,
.quotation-form-group textarea,
.quotation-form-group select{
  width:100%; background:var(--surface3); border:1px solid var(--border);
  color:var(--text); border-radius:9px; padding:11px 14px;
  font-size:13px; font-family:inherit;
  transition:all .18s;
}
.quotation-form-group textarea{resize:vertical; min-height:64px;}
.quotation-field-hint{color:var(--muted); font-size:11px; margin-top:3px; display:block;}
.quotation-hwire-warning{
  display:block; color:var(--yellow); font-size:11px; margin-top:4px; line-height:1.5;
}
.quotation-stale-banner{
  background:var(--yellow-bg); border:1px solid rgba(245,158,11,.35);
  color:var(--yellow); border-radius:8px; padding:9px 12px; margin-bottom:10px;
  font-size:12px; font-weight:600; line-height:1.5;
}
.quotation-mobile-tabs{display:none;}
.quotation-mobile-tab{
  flex:1; border:none; background:transparent; color:var(--text2);
  padding:10px 12px; font-size:12px; font-weight:700; cursor:pointer;
  border-bottom:2px solid transparent; font-family:inherit;
}
.quotation-mobile-tab.active{color:var(--accent); border-bottom-color:var(--accent);}
.quotation-btn-ghost{
  background:var(--surface2); color:var(--text2); border:1px solid var(--border2);
}
.quotation-btn-ghost:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
.quotation-btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.quotation-form-group input:focus,
.quotation-form-group textarea:focus,
.quotation-form-group select:focus{
  outline:none; border-color:var(--accent);
  background:var(--surface2);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.quotation-revenue-panel,
.quotation-permission-panel{
  display:none; margin:4px 0 16px; padding:14px;
  border:1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius:10px; background:var(--grad-accent-soft);
}
.quotation-revenue-panel-title,
.quotation-permission-panel-title{font-size:12px; font-weight:800; color:var(--accent); margin-bottom:10px;}
.quotation-revenue-panel .quotation-form-group:last-child,
.quotation-permission-panel .quotation-form-group:last-child{margin-bottom:0;}

.quotation-calc-display{
  background:var(--grad-accent-soft);
  border:1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius:12px; padding:18px; margin:22px 0;
}
.quotation-calc-section{
  display:flex; justify-content:space-between; align-items:center;
  margin:12px 0 8px; padding:8px 0;
  border-top:1px solid var(--border);
  font-size:12px; font-weight:800; color:var(--text);
}
.quotation-calc-section:first-child{border-top:none; margin-top:0; padding-top:0;}
.quotation-calc-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; margin:8px 0; font-size:13px;}
.quotation-calc-label{color:var(--text2); font-weight:500;}
.quotation-calc-value{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums;}
.quotation-cost-breakdown{margin-top:14px; padding-top:12px; border-top:1px solid var(--border2);}
.quotation-cost-breakdown > div,
#prev-cost-breakdown > div,
#prev-revenue-share-summary > div{display:flex; justify-content:space-between; gap:16px; margin:7px 0; font-size:12px;}
.quotation-cost-breakdown strong,
#prev-cost-breakdown strong,
#prev-revenue-share-summary strong{font-variant-numeric:tabular-nums;}
.quotation-cost-breakdown .excluded{color:var(--muted);}
#prev-cost-breakdown{margin-bottom:12px; color:#334155;}
#prev-revenue-share-summary{margin:12px 0; padding-top:10px; border-top:1px dashed #cbd5e1; color:#334155;}
#prev-cost-breakdown .excluded{color:#64748b;}
.quotation-total-row{
  display:flex; justify-content:space-between;
  margin:14px 0 0 0; padding-top:14px;
  border-top:1px dashed var(--border2);
  font-size:15px; font-weight:800;
}
.quotation-total-label{color:var(--text);}
.quotation-total-value{
  background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:18px; font-variant-numeric:tabular-nums;
}

.quotation-buttons{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px;}
.quotation-btn{
  padding:12px; border:none; border-radius:9px;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all .18s; font-family:inherit; letter-spacing:.2px;
}
.quotation-btn-primary{background:var(--grad-accent); color:#fff; box-shadow:0 4px 14px var(--accent-glow);}
.quotation-btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 22px var(--accent-glow);}
.quotation-btn-secondary{background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#fff;}
.quotation-btn-secondary:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(99,102,241,.35);}
.quotation-btn-warning{background:linear-gradient(135deg, var(--yellow), #f97316); color:#fff;}
.quotation-btn-warning:hover{transform:translateY(-2px); box-shadow:0 8px 22px var(--yellow-glow);}
.quotation-export-buttons{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
@media(min-width:641px){
  .quotation-export-buttons{grid-template-columns:repeat(4,minmax(0,1fr));}
}

.quotation-close-btn{
  background:var(--surface3); color:var(--text2);
  border:1px solid var(--border); padding:9px 16px;
  border-radius:9px; cursor:pointer; font-size:13px;
  transition:all .18s; font-family:inherit; font-weight:600;
}
.quotation-close-btn:hover{border-color:var(--red); color:var(--red); background:var(--red-bg);}

#quotation-message{
  padding:13px 16px; border-radius:9px; margin-bottom:18px;
  font-size:13px; display:none; font-weight:600;
}
#quotation-export-message{
  padding:13px 16px; border-radius:9px; margin-top:14px;
  font-size:13px; display:none; font-weight:600;
}
#quotation-message.success, #quotation-export-message.success{background:var(--green-bg); color:var(--green); border:1px solid color-mix(in oklab, var(--green) 28%, transparent);}
#quotation-message.error, #quotation-export-message.error{background:var(--red-bg); color:var(--red); border:1px solid color-mix(in oklab, var(--red) 28%, transparent);}

/* Quotation Preview (kept neutral for print) */
#quotation-preview{
  background:#fff; color:#222; padding:24px; border-radius:10px;
  font-family:'Noto Sans Thai',Tahoma,'Leelawadee UI',Arial,sans-serif; font-size:12px;
  line-height:1.5; font-kerning:normal; font-variant-ligatures:normal;
  min-height:500px; position:relative;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  max-height:calc(100vh - 220px); overflow:auto;
}
#quotation-preview.quotation-exporting{
  width:794px;
  max-width:none;
  min-height:0;
  max-height:none;
  overflow:visible;
  box-sizing:border-box;
  box-shadow:none;
  border-radius:0;
}
.quotation-preview-watermark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:900; letter-spacing:.2em; color:rgba(15,23,42,.05);
  transform:rotate(-24deg); pointer-events:none; user-select:none;
}
.quotation-preview-logo{display:block; margin:0 auto 10px; border-radius:10px;}
.quotation-preview-ref{font-size:10px; color:#64748b; margin-top:6px; font-weight:700;}
.quotation-preview-remark{
  margin:0 0 18px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px;
  background:#f8fafc; font-size:11px;
}
.quotation-preview-remark h3{
  font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:#64748b; margin:0 0 4px;
}
.quotation-preview-remark p{margin:0; color:#222; white-space:pre-wrap;}
.quotation-preview-footer-note{
  margin-top:20px; padding-top:15px; border-top:1px solid #ddd;
  text-align:center; color:#999; font-size:10px; line-height:1.6;
}
#quotation-preview *{letter-spacing:normal !important;}
.quotation-preview-header{text-align:center; border-bottom:2px solid #0f172a; padding-bottom:16px; margin-bottom:22px;}
.quotation-preview-title{font-size:20px; font-weight:800; margin-bottom:4px; letter-spacing:-.3px;}
.quotation-preview-subtitle{font-size:10px; color:#999;}
.quotation-preview-info{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; font-size:11px;}
.quotation-preview-block h3{
  color:#2563eb; font-size:10px; font-weight:800;
  text-transform:uppercase; margin-bottom:7px; letter-spacing:.8px;
}
.quotation-preview-block p{color:#222; margin:3px 0;}
.quotation-preview-table{width:100%; border-collapse:collapse; margin:22px 0; font-size:11px;}
.quotation-preview-table thead{background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff;}
.quotation-preview-table th{padding:10px; text-align:left; font-weight:700; letter-spacing:.3px;}
.quotation-preview-table td{padding:9px 10px; border-bottom:1px solid #e5e7eb;}
.quotation-preview-table tr,
.quotation-preview-info,
.quotation-preview-summary{
  break-inside:avoid; page-break-inside:avoid;
}
.quotation-preview-table tbody tr:nth-child(even){background:#f8fafc;}
.quotation-preview-table .quotation-section-row td{
  background:#eef2ff; color:#1e40af; font-weight:800;
  border-top:1px solid #c7d2fe; border-bottom:1px solid #c7d2fe;
}
.quotation-preview-table .quotation-subtotal-row td{
  background:#f8fafc; font-weight:800; border-top:1px solid #cbd5e1;
}
.quotation-preview-table .quotation-subtotal-row td:first-child{text-align:right; color:#475569;}
.quotation-amount{text-align:right; font-weight:700; font-variant-numeric:tabular-nums;}
.quotation-preview-summary{margin:22px 0; border-top:1px solid #e5e7eb; padding-top:16px;}
.quotation-summary-row{display:flex; justify-content:space-between; margin:6px 0; font-size:11px;}
.quotation-summary-total{
  display:flex; justify-content:space-between;
  margin:12px 0 0 0; padding-top:12px;
  border-top:2px solid #2563eb;
  font-size:13px; font-weight:800; color:#2563eb;
}

@media(max-width:1024px){
  #quotation-container{grid-template-columns:1fr; grid-template-rows:1fr 1fr; height:92vh;}
  #quotation-form-panel{border-right:none; border-bottom:1px solid var(--border);}
}
@media(max-width:640px){
  #quotation-modal{padding:8px;}
  #quotation-container{
    grid-template-columns:1fr; grid-template-rows:auto auto 1fr;
    height:96vh; border-radius:12px;
  }
  .quotation-mobile-tabs{
    display:flex; gap:0; border-bottom:1px solid var(--border); background:var(--surface2);
  }
  #quotation-form-panel, #quotation-preview-panel{padding:18px; overflow:auto;}
  #quotation-container h2{font-size:15px;}
  #quotation-container.quotation-tab-form #quotation-preview-panel{display:none;}
  #quotation-container.quotation-tab-preview #quotation-form-panel{display:none;}
}
@media print{
  body *{visibility:hidden;}
  #quotation-preview, #quotation-preview *{visibility:visible;}
  #quotation-preview{
    position:absolute; left:0; top:0; width:100%; max-height:none; overflow:visible;
    box-shadow:none; border-radius:0;
  }
}


/* ====== PREMIUM POLISH v5 — Modern Light Enterprise ====== */
:root{
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:22px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}
[data-theme="light"] body{
  font-feature-settings:"cv11","ss01","ss03","cv02";
  letter-spacing:-0.005em;
}
[data-theme="light"] ::selection{ background:rgba(59,130,246,.22); color:#0f1b3d; }

/* Scrollbars — thin & modern */
[data-theme="light"] *::-webkit-scrollbar{ width:10px; height:10px; }
[data-theme="light"] *::-webkit-scrollbar-track{ background:transparent; }
[data-theme="light"] *::-webkit-scrollbar-thumb{
  background:rgba(15,27,61,.14); border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background:rgba(15,27,61,.28); background-clip:padding-box; border:2px solid transparent; }

/* Topbar — refined enterprise header */
[data-theme="light"] #topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.88));
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--topbar-border);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 20px -12px rgba(15,27,61,.15);
}

/* Filter bar */
[data-theme="light"] #filterbar{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

/* Cards / panels — soft premium elevation */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .side-card,
[data-theme="light"] .glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .side-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(59,130,246,.28);
}

/* KPI numbers — tabular, tighter */
[data-theme="light"] .kpi-value,
[data-theme="light"] .stat-value,
[data-theme="light"] .metric-value,
[data-theme="light"] .big-num{
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  font-weight:700;
  background:linear-gradient(135deg,#0f1b3d 0%,#3b82f6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Buttons — premium primary */
[data-theme="light"] .btn,
[data-theme="light"] button.btn-primary,
[data-theme="light"] .btn-primary{
  border-radius:var(--radius);
  font-weight:600;
  letter-spacing:-0.005em;
  transition:transform .18s var(--ease-out), box-shadow .22s var(--ease-out), background .22s var(--ease-out);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] button.primary{
  background:var(--grad-accent);
  color:#fff;
  border:none;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(59,130,246,.55), 0 2px 6px rgba(15,27,61,.10);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 28px -10px rgba(59,130,246,.6), 0 4px 10px rgba(15,27,61,.14);
}
[data-theme="light"] .btn-primary:active,
[data-theme="light"] button.primary:active{ transform:translateY(0); }

/* Secondary / ghost buttons */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost,
[data-theme="light"] button.ghost{
  background:#fff;
  border:1px solid var(--border2);
  color:var(--text);
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] button.ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}

/* Inputs, selects */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .input,
[data-theme="light"] .select{
  background:#fff;
  border:1px solid var(--border2);
  border-radius:var(--radius);
  color:var(--text);
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .input:focus,
[data-theme="light"] .select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}

[data-theme="light"] .auth-field input{
  background:rgba(15,23,42,.56);
  border-color:rgba(148,163,184,.22);
  color:#fff;
  border-radius:14px;
}
[data-theme="light"] .auth-field input:focus{
  background:rgba(15,23,42,.74);
  border-color:rgba(96,165,250,.72);
  color:#fff;
  box-shadow:0 0 0 4px rgba(59,130,246,.16), 0 14px 32px rgba(2,6,23,.24);
}
[data-theme="light"] .auth-field input::placeholder{color:rgba(226,232,240,.58);}

/* Badges / chips */
[data-theme="light"] .badge,
[data-theme="light"] .chip,
[data-theme="light"] .tag,
[data-theme="light"] .pill{
  border-radius:999px;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid var(--border);
  background:#fff;
}

/* Tables — clean enterprise grid */
[data-theme="light"] table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
[data-theme="light"] table thead th{
  background:var(--surface2);
  color:var(--text2);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  padding:12px 14px;
}
[data-theme="light"] table tbody td{
  border-bottom:1px solid var(--border);
  padding:12px 14px;
  color:var(--text);
}
[data-theme="light"] table tbody tr{ transition:background .15s ease; }
[data-theme="light"] table tbody tr:hover{ background:rgba(59,130,246,.045); }

/* Tooltip / popover */
[data-theme="light"] .tooltip,
[data-theme="light"] .popover,
[data-theme="light"] .leaflet-tooltip,
[data-theme="light"] .leaflet-popup-content-wrapper{
  background:var(--tooltip-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-lg) !important;
  font-family:inherit;
}
[data-theme="light"] .leaflet-popup-tip{ background:var(--tooltip-bg) !important; }

/* Leaflet controls */
[data-theme="light"] .leaflet-control-zoom a,
[data-theme="light"] .leaflet-bar a{
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  transition:all .18s var(--ease-out);
}
[data-theme="light"] .leaflet-control-zoom a:hover,
[data-theme="light"] .leaflet-bar a:hover{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border-color:var(--accent) !important;
}
[data-theme="light"] .leaflet-bar{ box-shadow:var(--shadow-md) !important; border:none !important; border-radius:var(--radius) !important; overflow:hidden; }

/* Marker cluster refinement */
[data-theme="light"] .marker-cluster{
  background:rgba(59,130,246,.18) !important;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 6px 16px -4px rgba(59,130,246,.35);
}
[data-theme="light"] .marker-cluster div{
  background:linear-gradient(135deg,#3b82f6,#0f1b3d) !important;
  color:#fff !important;
  font-weight:700 !important;
}

/* Focus visible ring — a11y polish */
[data-theme="light"] :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Section headings */
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3,[data-theme="light"] h4{
  color:var(--text);
  letter-spacing:-0.02em;
  font-weight:700;
}
[data-theme="light"] h1{ letter-spacing:-0.03em; }

/* Divider */
[data-theme="light"] hr{ border:none; border-top:1px solid var(--border); }

/* Subtle motion on load */
@keyframes cardFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
[data-theme="light"] .card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .side-card{
  animation:cardFadeIn .5s var(--ease-out) both;
}

/* Loader */
[data-theme="light"] .spinner,[data-theme="light"] .loader{
  border-color:var(--border) !important;
  border-top-color:var(--accent) !important;
}

/* Modal / dialog */
[data-theme="light"] .modal,[data-theme="light"] .dialog,[data-theme="light"] .drawer{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
}
[data-theme="light"] .modal-backdrop,[data-theme="light"] .backdrop{
  background:rgba(15,27,61,.45);
  backdrop-filter:blur(6px);
}

/* ============================================================
   ====== EXECUTIVE REDESIGN v6 — dramatic light overhaul ======
   Targets the ACTUAL IDs/classes used in this file so changes
   are visible (v5 targeted generic classes that didn't exist).
   ============================================================ */

[data-theme="light"]{
  --brand-1:#2563eb;
  --brand-2:#7c3aed;
  --brand-3:#0f1b3d;
  --grad-brand:linear-gradient(120deg,#2563eb 0%, #7c3aed 55%, #0f1b3d 100%);
  --grad-brand-soft:linear-gradient(120deg,rgba(37,99,235,.10), rgba(124,58,237,.06));
  --ring-brand:0 0 0 4px rgba(37,99,235,.14);
}

/* ---------- BACKGROUND: brighter enterprise canvas ---------- */
[data-theme="light"] body{
  background:
    radial-gradient(1000px 520px at 92% -12%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 6%,  rgba(37,99,235,.10),  transparent 60%),
    linear-gradient(180deg,#f6f8fc 0%, #eef2f8 100%);
}

/* ---------- TOPBAR: taller, gradient underline, refined ---------- */
[data-theme="light"] #topbar{
  height:72px !important;
  padding:0 28px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82)) !important;
  border-bottom:1px solid rgba(15,27,61,.06) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 28px -18px rgba(15,27,61,.20) !important;
}
[data-theme="light"] #topbar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--grad-brand); border-radius:0 4px 4px 0;
}
[data-theme="light"] #topbar::after{
  background:linear-gradient(90deg, transparent, rgba(37,99,235,.35), rgba(124,58,237,.25), transparent) !important;
  opacity:.7 !important;
}

/* Brand block */
[data-theme="light"] .logo h1{
  font-size:17px !important; font-weight:700 !important; letter-spacing:-.4px !important;
  color:var(--brand-3) !important;
}
[data-theme="light"] .logo h1 span{
  background:var(--grad-brand) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  font-weight:800 !important;
}
[data-theme="light"] .logo::after{
  content:"Building Permission • Live";
  display:inline-block; margin-left:14px; padding:5px 11px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-1); background:var(--grad-brand-soft);
  border:1px solid rgba(37,99,235,.18); border-radius:999px;
}

/* Group separators — remove the vertical dividers, more air */
[data-theme="light"] .topbar-primary-actions,
[data-theme="light"] .topbar-user-actions{
  padding-left:12px !important; border-left:none !important;
}
[data-theme="light"] .topbar-user-actions{ gap:10px !important; }

/* Topbar buttons — clean white cards, NOT dark */
[data-theme="light"] #theme-btn,
[data-theme="light"] #building-toggle,
[data-theme="light"] #user-manage-btn,
[data-theme="light"] #export-csv-btn,
[data-theme="light"] #sync-boq-db-btn,
[data-theme="light"] #logout-btn{
  background:#ffffff !important;
  border:1px solid rgba(15,27,61,.10) !important;
  color:var(--brand-3) !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  box-shadow:0 1px 2px rgba(15,27,61,.04), 0 2px 8px -4px rgba(15,27,61,.08) !important;
}
[data-theme="light"] #theme-btn:hover,
[data-theme="light"] #building-toggle:hover,
[data-theme="light"] #user-manage-btn:hover,
[data-theme="light"] #export-csv-btn:hover,
[data-theme="light"] #sync-boq-db-btn:hover,
[data-theme="light"] #logout-btn:hover{
  border-color:rgba(37,99,235,.35) !important;
  color:var(--brand-1) !important;
  background:#fff !important;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.35), 0 2px 6px rgba(15,27,61,.06) !important;
}
[data-theme="light"] #logout-btn{
  color:#b91c1c !important; border-color:rgba(185,28,28,.18) !important;
}
[data-theme="light"] #logout-btn:hover{
  color:#fff !important; background:linear-gradient(135deg,#ef4444,#b91c1c) !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px -8px rgba(239,68,68,.5) !important;
}

/* Primary add button — bold gradient */
[data-theme="light"] #add-building-btn{
  background:var(--grad-brand) !important;
  min-height:38px !important; padding:0 16px !important;
  border-radius:10px !important; font-weight:700 !important;
  box-shadow:0 10px 26px -8px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
[data-theme="light"] #add-building-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(1.05);
  box-shadow:0 16px 34px -10px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* User pill — refined chip */
[data-theme="light"] .user-pill{
  background:var(--grad-brand-soft) !important;
  border:1px solid rgba(37,99,235,.20) !important;
  color:var(--brand-3) !important;
  border-radius:999px !important; padding:6px 14px !important;
  font-size:12.5px !important;
  box-shadow:none !important;
}
[data-theme="light"] .user-pill strong{ color:var(--brand-1) !important; font-weight:700 !important; }

/* ---------- FILTER BAR: pill controls with clear hierarchy ---------- */
[data-theme="light"] #filterbar{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55)) !important;
  border-bottom:1px solid rgba(15,27,61,.06) !important;
  padding:12px 28px !important;
}
[data-theme="light"] .filter-label{
  color:var(--brand-3) !important; opacity:.55;
  font-size:10px !important; letter-spacing:1.4px !important;
}
[data-theme="light"] #filter-toggle{
  background:#fff !important; border:1px solid rgba(15,27,61,.10) !important;
  color:var(--brand-3) !important; border-radius:10px !important;
  padding:8px 12px !important;
  box-shadow:0 1px 2px rgba(15,27,61,.04) !important;
}
[data-theme="light"] #filter-toggle:hover{
  border-color:rgba(37,99,235,.35) !important; color:var(--brand-1) !important;
  background:#fff !important;
}
[data-theme="light"] select.flt{
  background:#ffffff !important;
  border:1px solid rgba(15,27,61,.10) !important;
  color:var(--brand-3) !important;
  border-radius:999px !important;
  padding:8px 32px 8px 14px !important;
  font-weight:600 !important; font-size:12.5px !important;
  box-shadow:0 1px 2px rgba(15,27,61,.04) !important;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
[data-theme="light"] select.flt:hover{
  border-color:rgba(37,99,235,.35) !important;
  box-shadow:0 6px 14px -6px rgba(37,99,235,.30) !important;
  transform:translateY(-1px);
}
[data-theme="light"] select.flt:focus{
  outline:none !important;
  border-color:var(--brand-1) !important;
  box-shadow:var(--ring-brand) !important;
}
[data-theme="light"] #btn-reset{
  background:transparent !important;
  border:1px dashed rgba(15,27,61,.22) !important;
  color:var(--brand-3) !important;
  border-radius:999px !important; padding:8px 14px !important;
  font-weight:600 !important; font-size:12.5px !important;
}
[data-theme="light"] #btn-reset:hover{
  border-color:var(--brand-1) !important; color:var(--brand-1) !important;
  background:var(--grad-brand-soft) !important;
}

/* Search — larger, more prominent */
[data-theme="light"] #search-input{
  background:#fff !important;
  border:1px solid rgba(15,27,61,.10) !important;
  border-radius:999px !important;
  padding:11px 40px 11px 44px !important;
  font-size:13.5px !important;
  box-shadow:0 2px 8px -4px rgba(15,27,61,.10) !important;
}
[data-theme="light"] #search-input:focus{
  border-color:var(--brand-1) !important;
  box-shadow:var(--ring-brand), 0 8px 20px -8px rgba(37,99,235,.28) !important;
}
[data-theme="light"] .search-ico{ color:var(--brand-1) !important; }

/* Result count chip */
[data-theme="light"] #result-count{
  background:var(--grad-brand-soft) !important;
  border:1px solid rgba(37,99,235,.18) !important;
  color:var(--brand-1) !important;
  padding:6px 12px !important; border-radius:999px !important;
  font-weight:700 !important; font-size:12px !important;
  font-variant-numeric:tabular-nums;
}

/* ---------- MAP TOOLS / MODE TOGGLE — segmented premium ---------- */
[data-theme="light"] .map-mode-toggle{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,27,61,.08) !important;
  border-radius:12px !important;
  padding:4px !important;
  box-shadow:0 10px 30px -12px rgba(15,27,61,.18) !important;
  backdrop-filter:blur(10px);
}
[data-theme="light"] .map-mode-toggle button{
  border-radius:9px !important;
  color:var(--brand-3) !important;
  font-weight:600 !important;
  padding:8px 14px !important;
}
[data-theme="light"] .map-mode-toggle button.active{
  background:var(--grad-brand) !important;
  color:#fff !important;
  box-shadow:0 8px 20px -6px rgba(37,99,235,.5) !important;
}
[data-theme="light"] .map-tool-btn{
  background:#fff !important;
  border:1px solid rgba(15,27,61,.10) !important;
  color:var(--brand-3) !important;
  border-radius:10px !important;
  font-weight:600 !important;
  box-shadow:0 4px 12px -6px rgba(15,27,61,.15) !important;
}
[data-theme="light"] .map-tool-btn.active,
[data-theme="light"] .map-tool-btn:hover{
  background:var(--grad-brand) !important; color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px -8px rgba(37,99,235,.5) !important;
}

[data-theme="light"] .map-tools-panel{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(15,27,61,.08) !important;
  border-radius:16px !important;
  box-shadow:0 18px 50px -22px rgba(15,27,61,.34), 0 8px 18px -16px rgba(15,27,61,.22) !important;
}
[data-theme="light"] .map-tools-actions{
  background:#eef3fb;
  border:1px solid rgba(15,27,61,.06);
  border-radius:12px;
  padding:4px;
  gap:4px;
}
[data-theme="light"] .map-tools-actions .map-tool-btn{
  border:none !important;
  box-shadow:none !important;
  min-height:30px;
}
[data-theme="light"] .map-tools-actions .map-tool-btn:not(.active):hover{
  background:#fff !important;
  color:var(--brand-1) !important;
}

/* Sync / count badges */
[data-theme="light"] .sync-badge{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,27,61,.08) !important;
  color:var(--brand-3) !important;
  box-shadow:0 6px 16px -8px rgba(15,27,61,.15) !important;
}
[data-theme="light"] .count-badge{
  background:var(--grad-brand) !important;
  box-shadow:0 10px 24px -8px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* Legend panel — floating glass */
[data-theme="light"] .legend-panel,
[data-theme="light"] #legend-panel{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(15,27,61,.08) !important;
  border-radius:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 32px -26px rgba(15,27,61,.34) !important;
  backdrop-filter:blur(10px);
}
[data-theme="light"] .legend-panel-inner::before{
  color:#64748b;
}
[data-theme="light"] .legend-row{
  color:#334155;
  border-bottom-color:rgba(15,27,61,.07);
}
[data-theme="light"] .legend-count{
  color:#0f1b3d;
}
[data-theme="light"] .layer-toggle{
  background:#f8fafc;
  border-color:rgba(15,27,61,.08);
  color:#0f1b3d;
}
[data-theme="light"] .layer-toggle:hover{
  background:#fff;
  box-shadow:0 8px 20px -14px color-mix(in oklab, var(--legend-color) 55%, rgba(15,27,61,.18));
}
[data-theme="light"] .layer-state{
  color:#334155;
  background:color-mix(in oklab, var(--legend-color) 13%, white);
}
[data-theme="light"] .layer-toggle.off .layer-state{
  background:#e2e8f0;
  color:#64748b;
}

/* Marker clusters — bolder gradient */
[data-theme="light"] .marker-cluster{
  background:rgba(37,99,235,.16) !important;
  border:3px solid rgba(255,255,255,.95) !important;
  box-shadow:0 10px 22px -6px rgba(37,99,235,.45) !important;
}
[data-theme="light"] .marker-cluster div{
  background:var(--grad-brand) !important;
  color:#fff !important; font-weight:800 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}

/* Leaflet controls */
[data-theme="light"] .leaflet-control-zoom a,
[data-theme="light"] .leaflet-bar a{
  background:#fff !important;
  color:var(--brand-3) !important;
  border:1px solid rgba(15,27,61,.08) !important;
  font-weight:600 !important;
}
[data-theme="light"] .leaflet-control-zoom a:hover{
  background:var(--grad-brand-soft) !important;
  color:var(--brand-1) !important;
}
[data-theme="light"] .leaflet-bar{
  border-radius:12px !important; overflow:hidden;
  box-shadow:0 12px 28px -12px rgba(15,27,61,.25) !important;
  border:none !important;
}

/* Popovers / tooltips */
[data-theme="light"] .leaflet-popup-content-wrapper{
  background:#fff !important;
  border:1px solid rgba(15,27,61,.08) !important;
  border-radius:14px !important;
  box-shadow:0 24px 60px -18px rgba(15,27,61,.28) !important;
  color:var(--brand-3) !important;
}
[data-theme="light"] .leaflet-popup-tip{ background:#fff !important; }

/* Auth screen — brighter, cleaner */
[data-theme="light"] .auth-form-head h3{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  font-weight:800 !important; letter-spacing:-.5px;
}
[data-theme="light"] .auth-submit{
  background:var(--grad-brand) !important;
  box-shadow:0 14px 30px -10px rgba(37,99,235,.55) !important;
}

/* Autocomplete panel */
[data-theme="light"] #autocomplete{
  border:1px solid rgba(15,27,61,.08) !important;
  border-radius:14px !important;
  box-shadow:0 24px 60px -20px rgba(15,27,61,.28) !important;
}

/* Neutralize the dark rgba(15,23,42,.34) fallback anywhere in light mode */
[data-theme="light"] button{
  font-family:inherit;
}

/* Subtle entrance for topbar/filterbar */
@keyframes barFadeDown{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
[data-theme="light"] #topbar{ animation:barFadeDown .45s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
[data-theme="light"] #filterbar{ animation:barFadeDown .5s .05s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }