/*
 * Margalla Enclave map — scoped styles.
 *
 * Ported from index.html's inline <style>. Everything is nested under
 * #margalla-app so this cannot leak into the active theme (and the theme
 * can't leak into it either — see margalla_map_dequeue_theme_styles() in
 * margalla-map.php for the other half of that guarantee on the full-screen
 * template). IDs that were generic in the original (#app, #summary,
 * #loader, #stage) are prefixed me-/margalla- throughout; see
 * templates/app-markup.php for the matching markup.
 */
#margalla-app{
  --navy-deep:#0a1530; --navy:#0f2350; --navy-mid:#16316e;
  --gold:#c9a24e; --gold-soft:#e4c789;
  --paper:#f6f3ec; --line:rgba(201,162,78,0.35);
  --sum-w:400px;

  height:100vh;width:100vw;display:flex;flex-direction:column;
  background:var(--navy-deep);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* On the full-screen template body_class() adds .margalla-map-page; this
   replaces the original global html,body{margin:0;...;overflow:hidden}. */
body.margalla-map-page{margin:0;padding:0;height:100%;width:100%;overflow:hidden;}
body.margalla-map-page #margalla-app{position:fixed;inset:0;}

/* When used via the [margalla_map] shortcode inside a normal theme page
   (rather than the full-screen template), give the app a sane default
   height instead of 100vh so it doesn't fight the theme's own layout. */
body:not(.margalla-map-page) #margalla-app{height:85vh;min-height:480px;width:100%;position:relative;}

#margalla-app, #margalla-app *{box-sizing:border-box;}

/* ---------------- header ---------------- */
#margalla-app header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 18px;background:linear-gradient(180deg,var(--navy),var(--navy-mid));
  border-bottom:1px solid var(--line);z-index:1200;margin:0;}
#margalla-app .brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto;overflow:hidden;}
#margalla-app .brand > div{min-width:0;}
#margalla-app .mark{width:32px;height:32px;flex:0 0 auto;border:1.5px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;}
#margalla-app .mark svg{width:17px;height:17px;}
#margalla-app .brand h1,#margalla-app .brand p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#margalla-app .brand h1{margin:0;color:var(--paper);font-family:Georgia,"Times New Roman",serif;
  font-size:16px;letter-spacing:.09em;font-weight:600;text-transform:uppercase;}
#margalla-app .brand p{margin:2px 0 0;color:var(--gold-soft);font-size:10.5px;letter-spacing:.06em;}

#margalla-app .seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:0 0 auto;}
#margalla-app .seg button{appearance:none;border:0;background:transparent;color:var(--paper);
  font-size:12px;letter-spacing:.03em;padding:8px 13px;cursor:pointer;white-space:nowrap;}
#margalla-app .seg button + button{border-left:1px solid var(--line);}
#margalla-app .seg button.on{background:var(--gold);color:#12203f;font-weight:600;}
#margalla-app .seg button:not(.on):hover{background:rgba(201,162,78,.15);}

#margalla-app .tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
#margalla-app .btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--paper);font-size:12px;padding:8px 12px;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;gap:6px;white-space:nowrap;}
#margalla-app .btn:hover{background:rgba(201,162,78,.14);border-color:var(--gold);}
#margalla-app .btn.on{background:var(--gold);color:#12203f;font-weight:600;border-color:var(--gold);}
#margalla-app .btn svg{width:14px;height:14px;}

/* ---------------- stage ---------------- */
#margalla-app #me-stage{position:relative;flex:1 1 auto;min-height:0;background:#0d193b;}
#margalla-app .view{position:absolute;inset:0;}
#margalla-app .view[hidden]{display:none;}
#margalla-app .leaflet-container{background:#0d193b;font-family:inherit;}
#margalla-app .leaflet-control-attribution{background:rgba(15,35,80,.8);color:#cbd5e8;font-size:10px;}
#margalla-app .leaflet-control-attribution a{color:var(--gold-soft);}
/* the plan tiles are pre-rendered at each zoom's native resolution, so let
   the browser scale them smoothly on the way between levels */
#margalla-app .plan-tiles{image-rendering:auto;}

#margalla-app .panel{background:rgba(10,21,48,.9);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:9px;color:var(--paper);}

#margalla-app #me-overlayCard{position:absolute;left:14px;top:14px;z-index:800;width:212px;padding:12px 13px;}
#margalla-app #me-overlayCard h2{margin:0 0 9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;}
#margalla-app .row{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;margin-top:9px;}
#margalla-app input[type=range]{width:100%;accent-color:var(--gold);margin-top:5px;}
#margalla-app .swap{display:flex;gap:6px;margin-top:8px;}
#margalla-app .swap button{flex:1;font-size:11px;padding:6px 0;border-radius:5px;border:1px solid var(--line);
  background:transparent;color:var(--paper);cursor:pointer;}
#margalla-app .swap button.on{background:var(--gold);color:#12203f;font-weight:600;}

/* title block for the flat plan view — kept as live text so it stays sharp
   (it is painted out of the tiles so it can't float over Islamabad) */
#margalla-app #me-planTitle{position:absolute;left:16px;top:16px;z-index:800;padding:11px 14px;
  pointer-events:none;max-width:min(60%,420px);}
#margalla-app #me-planTitle h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper);font-weight:600;}
#margalla-app #me-planTitle p{margin:3px 0 0;font-size:11px;letter-spacing:.05em;color:var(--gold-soft);}
#margalla-app #me-planTitle .agency{margin-top:7px;font-size:10.5px;color:rgba(246,243,236,.55);letter-spacing:.03em;}

#margalla-app .zoom{position:absolute;right:14px;bottom:52px;z-index:800;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(15,35,80,.9);
  transition:right .28s ease;}
#margalla-app .zoom button{width:36px;height:36px;border:0;background:transparent;color:var(--paper);
  font-size:17px;cursor:pointer;}
#margalla-app .zoom button:hover{background:rgba(201,162,78,.18);}
#margalla-app .zoom .sep{height:1px;background:var(--line);}
#margalla-app.sum-open .zoom{right:calc(var(--sum-w) + 14px);}

/* ---------------- summary drawer ---------------- */
#margalla-app #me-summary{position:absolute;top:0;right:0;bottom:0;width:var(--sum-w);z-index:900;
  background:rgba(8,17,40,.97);backdrop-filter:blur(8px);
  border-left:1px solid var(--line);color:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s ease;}
#margalla-app.sum-open #me-summary{transform:translateX(0);}
#margalla-app .sum-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--navy),rgba(22,49,110,.4));}
#margalla-app .sum-head h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--paper);font-weight:600;}
#margalla-app .sum-head p{margin:2px 0 0;font-size:10px;letter-spacing:.05em;color:var(--gold-soft);}
#margalla-app #me-sumClose{appearance:none;border:1px solid var(--line);background:transparent;color:var(--paper);
  width:26px;height:26px;border-radius:5px;cursor:pointer;font-size:15px;line-height:1;flex:0 0 auto;}
#margalla-app #me-sumClose:hover{background:rgba(201,162,78,.16);}
#margalla-app .sum-body{flex:1 1 auto;overflow-y:auto;padding:14px;}

#margalla-app .kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
#margalla-app .kpi{border:1px solid var(--line);border-radius:8px;padding:9px 10px;
  background:linear-gradient(160deg,rgba(201,162,78,.12),rgba(201,162,78,.02));}
#margalla-app .kpi b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:20px;
  color:var(--gold-soft);letter-spacing:.02em;line-height:1.15;}
#margalla-app .kpi span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(246,243,236,.6);}

#margalla-app .sum-body h3{margin:20px 0 8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--line);}
#margalla-app .sum-body h3:first-child{margin-top:0;}
#margalla-app .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#margalla-app table{border-collapse:collapse;font-size:10.5px;width:100%;min-width:max-content;margin:0;}
#margalla-app th,#margalla-app td{padding:5px 7px;text-align:right;white-space:nowrap;
  border-bottom:1px solid rgba(201,162,78,.14);}
#margalla-app th{color:var(--gold-soft);font-weight:600;font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line);}
/* first column stays put while the wide tables scroll — it must be fully
   opaque or the scrolled-under figures ghost through it */
#margalla-app th:first-child,#margalla-app td:first-child{text-align:left;position:sticky;left:0;z-index:1;
  background:#081128;}
#margalla-app th:first-child{z-index:2;}
#margalla-app tr.sub td{font-weight:700;color:var(--paper);background:rgba(201,162,78,.07);}
#margalla-app tr.sub td:first-child{background:#141d33;}
#margalla-app tfoot td{font-weight:700;color:var(--paper);border-top:1px solid var(--line);
  border-bottom:0;background:rgba(201,162,78,.09);}
#margalla-app tfoot td:first-child{background:#161f36;}
#margalla-app td.num{font-variant-numeric:tabular-nums;}

#margalla-app .grand{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:8px;padding:9px 11px;border:1px solid var(--gold);border-radius:7px;
  background:rgba(201,162,78,.1);}
#margalla-app .grand span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-soft);}
#margalla-app .grand b{font-family:Georgia,"Times New Roman",serif;font-size:19px;color:var(--paper);}

#margalla-app .sw{display:inline-block;width:26px;height:13px;border-radius:2px;
  border:1px solid rgba(0,0,0,.35);vertical-align:-2px;margin-right:7px;}

#margalla-app .sum-note{margin:18px 0 0;font-size:9.5px;line-height:1.5;color:rgba(246,243,236,.4);}

#margalla-app #me-loader{position:absolute;inset:0;z-index:950;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;background:var(--navy-deep);transition:opacity .35s;}
#margalla-app .spinner{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(201,162,78,.25);
  border-top-color:var(--gold);animation:margalla-spin .9s linear infinite;}
@keyframes margalla-spin{to{transform:rotate(360deg);}}
#margalla-app #me-loader span{color:var(--gold-soft);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}

#margalla-app footer{flex:0 0 auto;padding:7px 18px;text-align:center;background:var(--navy-deep);
  border-top:1px solid var(--line);color:rgba(246,243,236,.45);font-size:10.5px;margin:0;}

@media (max-width:1180px){
  #margalla-app .btn span{display:none;}
  #margalla-app .btn{padding:8px 10px;}
}
@media (max-width:900px){
  #margalla-app{--sum-w:320px;}
  #margalla-app .brand p{display:none;}
}
@media (max-width:760px){
  #margalla-app{--sum-w:100%;}
  #margalla-app header{padding:9px 12px;gap:8px;}
  #margalla-app .seg button{padding:8px 10px;}
  #margalla-app #me-overlayCard{width:170px;left:10px;top:10px;padding:10px;}
  #margalla-app #me-planTitle{left:10px;top:10px;padding:9px 11px;max-width:70%;}
  #margalla-app #me-planTitle h2{font-size:12.5px;}
  #margalla-app.sum-open .zoom{right:14px;}
}