/* =====================================================================
   Decade of Gas — shared site shell (header, sub-nav, footer)
   Everything is prefixed dg- so it never collides with page styles.
   ===================================================================== */
:root{
  --dg-green:#1E9E4A; --dg-green-deep:#146633; --dg-green-mid:#39B368;
  --dg-green-soft:#E7F4EB; --dg-green-soft-2:#DBF0E2;
  --dg-ink:#0F2B20; --dg-text:#3E4A43; --dg-dim:#7C8B82;
  --dg-paper:#FFFFFF; --dg-paper-2:#F6F8F4; --dg-line:#E2E8E0;
  --dg-bar-h:68px; --dg-sub-h:0px;
  /* TYPOGRAPHY — every page reads its fonts from these three tokens.
     Set them to the decadeofgas.com.ng typefaces (and update the Google Fonts link) to restyle the whole site. */
  --dg-display:'Poppins','Montserrat',Arial,Helvetica,sans-serif;
  --dg-body:'Poppins','Montserrat',Arial,Helvetica,sans-serif;
  --dg-mono:'Poppins','Montserrat',Arial,Helvetica,sans-serif;
}
html{scroll-padding-top:calc(var(--dg-bar-h) + var(--dg-sub-h) + 12px); color-scheme:light;}
body.dg-has-sub{--dg-sub-h:44px;}
body.dg-locked{overflow:hidden;}

/* ---------- reset inside the shell (pages carry their own global CSS) ---------- */
.dg-header, .dg-header *, .dg-footer, .dg-footer *{box-sizing:border-box; letter-spacing:normal; text-transform:none;}
.dg-header, .dg-footer{font-family:var(--dg-body); line-height:1.45; -webkit-font-smoothing:antialiased;}
.dg-header a, .dg-footer a{text-decoration:none; border:0;}
.dg-header img, .dg-footer img{display:block; max-width:none;}
.dg-skip{position:absolute; left:-9999px; top:8px; z-index:1100; background:var(--dg-ink); color:#fff; padding:10px 14px; border-radius:8px; font:600 14px var(--dg-body);}
.dg-skip:focus{left:12px;}

/* ---------- header ---------- */
.dg-header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--dg-line); margin:0;}
.dg-bar{max-width:1320px; height:var(--dg-bar-h); margin:0 auto; padding:0 clamp(16px,3.4vw,44px); display:flex; align-items:center; gap:22px;}
.dg-logo{display:flex; align-items:center; flex-shrink:0; height:100%; padding:8px 0;}
.dg-logo img{height:50px; width:auto;}
.dg-menu{display:flex; align-items:center; gap:2px; margin-left:auto;}
.dg-link{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 13px; border-radius:9px; background:none; border:0; cursor:pointer;
  font:500 14.5px/1 var(--dg-body); color:var(--dg-text) !important; transition:background .15s,color .15s; white-space:nowrap;}
.dg-link:hover, .dg-dd.open > .dg-link{background:var(--dg-green-soft); color:var(--dg-green-deep) !important;}
.dg-link.is-active{color:var(--dg-green-deep) !important; font-weight:600; box-shadow:inset 0 -2px 0 var(--dg-green);}
.dg-link svg{transition:transform .2s;}
.dg-dd{position:relative;}
.dg-dd.open > .dg-link svg{transform:rotate(180deg);}
.dg-dd-panel{position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,6px); min-width:300px; padding:8px; background:#fff;
  border:1px solid var(--dg-line); border-radius:14px; box-shadow:0 22px 48px rgba(15,43,32,.14); opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility 0s .16s;}
.dg-dd-panel::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px;}
.dg-dd.open .dg-dd-panel{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .16s, transform .16s;}
.dg-dd-panel a{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; color:var(--dg-ink) !important;}
.dg-dd-panel a:hover, .dg-dd-panel a.is-active{background:var(--dg-paper-2);}
.dg-dd-panel a.is-active b{color:var(--dg-green-deep);}
.dg-dd-panel .dg-ico{flex-shrink:0; width:34px; height:34px; border-radius:9px; background:var(--dg-green-soft); color:var(--dg-green-deep); display:flex; align-items:center; justify-content:center;}
.dg-dd-panel b{display:block; font:600 14.5px/1.25 var(--dg-display); color:var(--dg-ink);}
.dg-dd-panel span.dg-d{display:block; font-size:12.5px; color:var(--dg-dim); margin-top:2px;}
.dg-dd-label{font:500 10.5px/1 var(--dg-mono); letter-spacing:.02em !important; text-transform:uppercase !important; color:var(--dg-dim); padding:10px 12px 6px;}
.dg-cta{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:100px; background:var(--dg-green-deep); color:#fff !important;
  font:600 14px/1 var(--dg-body); flex-shrink:0; transition:background .15s;}
.dg-cta:hover{background:var(--dg-ink);}
.dg-burger{display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--dg-line); background:#fff; cursor:pointer; margin-left:auto; align-items:center; justify-content:center; padding:0;}
.dg-burger span, .dg-burger span::before, .dg-burger span::after{display:block; width:18px; height:2px; background:var(--dg-ink); border-radius:2px; position:relative; transition:transform .2s, background .2s;}
.dg-burger span::before, .dg-burger span::after{content:""; position:absolute; left:0;}
.dg-burger span::before{top:-6px;} .dg-burger span::after{top:6px;}
.dg-open .dg-burger span{background:transparent;}
.dg-open .dg-burger span::before{transform:translateY(6px) rotate(45deg);}
.dg-open .dg-burger span::after{transform:translateY(-6px) rotate(-45deg);}

/* sub-nav: page name + in-page sections */
.dg-sub{border-top:1px solid var(--dg-line); background:rgba(246,248,244,.92);}
.dg-sub-in{max-width:1320px; height:44px; margin:0 auto; padding:0 clamp(16px,3.4vw,44px); display:flex; align-items:center; gap:22px;}
.dg-crumb{font:500 12px/1 var(--dg-mono); color:var(--dg-dim); white-space:nowrap; letter-spacing:.04em !important;}
.dg-crumb a{color:var(--dg-dim) !important;} .dg-crumb a:hover{color:var(--dg-green-deep) !important;}
.dg-crumb b{color:var(--dg-ink); font-weight:600;}
.dg-sublinks{display:flex; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:none;}
.dg-sublinks::-webkit-scrollbar{display:none;}
.dg-sublinks a{font:500 12.5px/1 var(--dg-mono); color:var(--dg-dim) !important; padding:8px 11px; border-radius:100px; white-space:nowrap;}
.dg-sublinks a:hover{color:var(--dg-green-deep) !important; background:var(--dg-green-soft);}
.dg-sublinks a.is-on{color:#fff !important; background:var(--dg-green-deep);}

@media (max-width:1100px){
  .dg-link{padding:0 10px; font-size:14px;}
}
@media (max-width:1080px){
  :root{--dg-bar-h:62px;}
  .dg-logo img{height:40px;}
  .dg-burger{display:inline-flex;}
  .dg-cta{display:none;}
  .dg-menu{position:fixed; left:0; right:0; top:var(--dg-bar-h); bottom:0; margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:10px 16px 40px; overflow-y:auto; opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s .2s; border-top:1px solid var(--dg-line);}
  .dg-open .dg-menu{opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .2s ease, transform .2s ease;}
  .dg-link{height:52px; width:100%; justify-content:space-between; font-size:16px; padding:0 8px; border-radius:0; border-bottom:1px solid var(--dg-line) !important;}
  .dg-link.is-active{box-shadow:inset 3px 0 0 var(--dg-green);}
  .dg-dd-panel{position:static; transform:none !important; min-width:0; box-shadow:none; border:0; border-radius:0; padding:4px 0 10px; display:none; opacity:1; visibility:visible;}
  .dg-dd.open .dg-dd-panel{display:block;}
  .dg-menu .dg-cta-m{display:flex; justify-content:center; margin-top:18px; height:48px; border-radius:100px; background:var(--dg-green-deep); color:#fff !important; align-items:center; font:600 15px var(--dg-body);}
  .dg-crumb{display:none;}
  .dg-sublinks{margin-left:0;}
}
@media (min-width:1081px){ .dg-cta-m{display:none;} }

/* ---------- footer ---------- */
.dg-footer{background:var(--dg-ink); color:#B9CCC1; margin:0; position:relative; z-index:1;}
.dg-footer-in{max-width:1320px; margin:0 auto; padding:0 clamp(16px,3.4vw,44px);}
.dg-pagenote{border-bottom:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:12.5px; color:#93ad9f; text-align:left;}
.dg-pagenote b{color:#fff; font-weight:600;}
.dg-pagenote div, .dg-pagenote .src{font-family:var(--dg-mono); font-size:11.5px; opacity:.85; margin-top:4px;}
.dg-pagenote > div:first-child{font-family:var(--dg-body); font-size:12.5px; margin-top:0; opacity:1;}
.dg-fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:40px; padding:56px 0 44px;}
.dg-fbrand .dg-flogo{display:inline-block; background:#fff; border-radius:12px; padding:10px 14px;}
.dg-fbrand .dg-flogo img{height:52px; width:auto;}
.dg-fbrand p{font-size:14px; color:#B9CCC1; margin:18px 0 0; max-width:360px;}
.dg-fbrand .dg-tag{font:600 17px/1.35 var(--dg-display); color:#fff; margin-top:18px; max-width:320px;}
.dg-fcol h4{font:500 11px/1 var(--dg-mono); letter-spacing:.02em !important; text-transform:uppercase !important; color:#7FA08D; margin:6px 0 16px;}
.dg-fcol a{display:block; color:#E3ECE6 !important; font-size:14px; padding:5px 0;}
.dg-fcol a:hover{color:#fff !important; text-decoration:underline !important; text-underline-offset:3px;}
.dg-fcol address{font-style:normal; font-size:14px; color:#E3ECE6; line-height:1.55;}
.dg-fcol .dg-fc{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;}
.dg-fcol .dg-fc svg{flex-shrink:0; margin-top:3px; color:var(--dg-green-mid);}
.dg-fbottom{border-top:1px solid rgba(255,255,255,.1); padding:20px 0 26px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:12.5px; color:#7FA08D;}
.dg-fbottom .dg-pipe{height:3px; width:64px; border-radius:2px; background:linear-gradient(90deg,var(--dg-green),var(--dg-green-mid)); align-self:center;}
@media (max-width:900px){ .dg-fgrid{grid-template-columns:1fr 1fr; gap:32px;} .dg-fbrand{grid-column:1/-1;} }
@media (max-width:520px){ .dg-fgrid{grid-template-columns:1fr;} }

/* ---------- small per-page compatibility fixes ---------- */
/* Leaflet controls carry z-index 1000; isolate maps so they stay under the sticky header */
.map-stage, #mapEl, .leaflet-container{isolation:isolate;}
/* Gas Supply Dashboard: its sidebar was hidden on phones, leaving no way to switch views */
body.dg-page-dashboard .shell{min-height:calc(100vh - var(--dg-bar-h));}
body.dg-page-dashboard .sidebar{position:sticky; top:calc(var(--dg-bar-h) + var(--dg-sub-h)); align-self:start; height:calc(100vh - var(--dg-bar-h) - var(--dg-sub-h)); display:flex; flex-direction:column;}
@media (max-width:960px){
  body.dg-page-dashboard .sidebar{display:block; position:sticky; top:var(--dg-bar-h); height:auto; z-index:40;}
  body.dg-page-dashboard .sidebar .brand, body.dg-page-dashboard .sidebar-foot{display:none;}
  body.dg-page-dashboard #nav{display:flex; overflow-x:auto; scrollbar-width:none;}
  body.dg-page-dashboard .nav-btn{width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; padding:12px 14px;}
  body.dg-page-dashboard .nav-btn.active{border-bottom-color:var(--warning);}
}
/* Sponsors modal sits above the sticky header */
body.dg-page-team .modal-overlay{z-index:1200 !important;}
body.dg-page-dashboard .modal-bg{z-index:1200;}

@media (max-width:960px){
  body.dg-page-dashboard .shell{grid-template-columns:minmax(0,1fr);}
  body.dg-page-dashboard .sidebar, body.dg-page-dashboard .main{min-width:0;}
}
/* Arrears tracker: keep KPI tiles inside the phone viewport */
body.dg-page-arrears .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:1024px){ body.dg-page-arrears .kpis{grid-template-columns:repeat(4,minmax(0,1fr));} }
body.dg-page-arrears .kpi .value{overflow-wrap:anywhere;}
body.dg-page-arrears #app main{grid-template-columns:minmax(0,1fr);}
body.dg-page-arrears #app main > *{min-width:0;}

@media (max-width:1080px){ body.dg-sub-nolinks .dg-sub{display:none;} body.dg-sub-nolinks{--dg-sub-h:0px;} }
@media (max-width:960px){ body.dg-page-dashboard .sidebar{top:calc(var(--dg-bar-h) + var(--dg-sub-h));} }

/* Bring the two dashboards onto the site palette and type */
body.dg-page-arrears{--navy:#146633; --navy-deep:#0F2B20; --navy-soft:#39B368; --green:#1E9E4A; --green-deep:#146633; --green-mid:#39B368; --green-soft:#E7F4EB;
  --background:#F6F8F4; --border:#E2E8E0; --radius:10px; --font-sans:var(--dg-body); --font-mono:var(--dg-mono);}
body.dg-page-arrears .site-header h1{font-family:var(--dg-display); letter-spacing:-.01em;}
body.dg-page-dashboard{--brand:#146633; --primary:#1E9E4A; --bg:#F6F8F4; --border:#E2E8E0; font-family:var(--dg-body);}
body.dg-page-dashboard .page-header h1{font-family:var(--dg-display); letter-spacing:-.01em;}
/* backdrop-filter would make the header the containing block for the fixed mobile drawer */
@media (max-width:1080px){ .dg-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff;} }

/* ---------- account (demo sign-in) ---------- */
.dg-auth{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.dg-auth-m{display:none;}
.dg-signin{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:100px; border:1px solid var(--dg-line) !important; color:var(--dg-ink) !important; font:600 14px/1 var(--dg-body); background:#fff;}
.dg-signin:hover{border-color:var(--dg-green) !important; color:var(--dg-green-deep) !important;}
.dg-user{display:inline-flex; align-items:center; gap:8px; font:500 13.5px/1 var(--dg-body); color:var(--dg-ink);}
.dg-av{width:32px; height:32px; border-radius:50%; background:var(--dg-green-deep); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:600 12.5px/1 var(--dg-display);}
.dg-signout{height:34px; padding:0 12px; border-radius:100px; border:1px solid var(--dg-line); background:#fff; color:var(--dg-text); font:500 13px/1 var(--dg-body); cursor:pointer;}
.dg-signout:hover{border-color:#D99; color:#9B2C2C;}
@media (max-width:1380px){ .dg-un{display:none;} }
@media (max-width:1080px){
  .dg-bar > .dg-auth{display:none;}
  .dg-auth-m{display:flex; justify-content:space-between; padding:14px 8px; border-bottom:1px solid var(--dg-line);}
  .dg-auth-m .dg-un{display:inline;}
  .dg-auth-m .dg-signin{width:100%; justify-content:center; height:48px;}
}
html.dg-auth-pending body{visibility:hidden;}

/* dashboard + arrears controls inherit the site body face */
body.dg-page-dashboard button, body.dg-page-dashboard input, body.dg-page-dashboard select,
body.dg-page-arrears button, body.dg-page-arrears input, body.dg-page-arrears select{font-family:var(--dg-body);}
a.dg-user{color:var(--dg-ink) !important;}
.dg-admin-link{height:34px !important; padding:0 12px !important; font-size:13px !important;}

/* ---------- brand colours: green header bar, navy footer ---------- */
:root{--dg-head:#64DD80; --dg-head-ink:#11182A; --dg-foot:#11182A;}
.dg-header, .dg-header.dg-scrolled{background:var(--dg-head); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(17,24,42,.12);}
.dg-logo img{background:#fff; border-radius:10px; padding:3px 8px; height:46px; box-sizing:content-box;}
.dg-bar > .dg-menu > .dg-link, .dg-bar > .dg-menu > .dg-dd > .dg-link{color:var(--dg-head-ink) !important;}
.dg-bar > .dg-menu > .dg-link:hover, .dg-bar > .dg-menu > .dg-dd > .dg-link:hover, .dg-bar > .dg-menu > .dg-dd.open > .dg-link{background:rgba(255,255,255,.4); color:var(--dg-head-ink) !important;}
.dg-bar > .dg-menu > .dg-link.is-active, .dg-bar > .dg-menu > .dg-dd > .dg-link.is-active{color:var(--dg-head-ink) !important; font-weight:700; box-shadow:inset 0 -3px 0 var(--dg-head-ink);}
.dg-cta{background:var(--dg-head-ink);} .dg-cta:hover{background:#000;}
.dg-signin, .dg-signout{border-color:transparent !important;}
.dg-user, a.dg-user{color:var(--dg-head-ink) !important;}
.dg-av{background:var(--dg-head-ink);}
.dg-burger{border-color:transparent;}
@media (max-width:1080px){
  .dg-header{background:var(--dg-head);}
  .dg-logo img{height:36px; padding:2px 7px;}
  .dg-bar > .dg-menu > .dg-link, .dg-bar > .dg-menu > .dg-dd > .dg-link{color:var(--dg-text) !important;}
  .dg-bar > .dg-menu > .dg-link:hover, .dg-bar > .dg-menu > .dg-dd > .dg-link:hover, .dg-bar > .dg-menu > .dg-dd.open > .dg-link{background:var(--dg-green-soft); color:var(--dg-green-deep) !important;}
  .dg-bar > .dg-menu > .dg-link.is-active, .dg-bar > .dg-menu > .dg-dd > .dg-link.is-active{color:var(--dg-green-deep) !important; box-shadow:inset 3px 0 0 var(--dg-green);}
  .dg-user, a.dg-user{color:var(--dg-ink) !important;}
}
.dg-footer{background:var(--dg-foot); color:#B4BDCC;}
.dg-pagenote{color:#9AA4B6;}
.dg-fbrand p{color:#B4BDCC;}
.dg-fcol h4{color:#8B96AB;}
.dg-fcol a, .dg-fcol address{color:#E6EAF1 !important;}
.dg-fcol .dg-fc svg{color:var(--dg-head);}
.dg-fbottom{color:#8B96AB;}
.dg-fbottom .dg-pipe{background:var(--dg-head);}

/* breadcrumb / section strip under the header: removed */
.dg-sub{display:none !important;}
body.dg-has-sub, body{--dg-sub-h:0px !important;}

/* logo stands on its own (transparent PNG), no white tile */
.dg-logo img{background:none; padding:0; border-radius:0; height:50px;}
.dg-fbrand .dg-flogo{background:none; padding:0; border-radius:0;}
.dg-fbrand .dg-flogo img{height:64px;}
@media (max-width:1080px){ .dg-logo img{height:40px; padding:0;} }

/* ---------- brand typography: Poppins throughout ----------
   Headlines Poppins Bold (black or primary green) · subheadings Poppins Medium, forest green ·
   body Poppins Regular, black, 16px+ · captions and labels Poppins Regular/Medium, tracked +20.
   Fallback: Montserrat, then Arial / Helvetica. */
html body{font-variant-numeric:tabular-nums;}
.dg-dd-label, .dg-fcol h4, .dg-crumb, .dg-sublinks a{letter-spacing:.02em !important; font-weight:500;}

/* ---------- light stone grey page backgrounds (cards, tables and inputs stay white) ---------- */
html:root{--dg-stone:#F1F0EC; --dg-stone-2:#E8E6E0;
  --paper:var(--dg-stone); --paper-2:var(--dg-stone-2);   /* site pages */
  --bg:var(--dg-stone); --background:var(--dg-stone);      /* Gas Supply dashboard, Arrears Tracker */
}
html body{background:var(--dg-stone);}
/* cards and inputs that used the page colour keep a white surface */
html body .chip, html body .map-stage, html body .map-loading, html body .search, html body .roadmap, html body .pcard,
html body .stat-grid div, html body .tcard{background:#fff;}

/* maps without their outside tiles: sea-coloured background behind the bundled state outlines */
#mapEl.no-tiles, #mapEl.no-tiles.leaflet-container{background:#DCE9EF !important;}
#mapEl.no-tiles .leaflet-tile-pane{display:none;}

/* new Decade(s) of Gas logo: a little larger so its small lettering stays legible */
.dg-logo{padding:4px 0;}
.dg-logo img{height:60px;}
.dg-fbrand .dg-flogo img{height:84px;}
@media (max-width:1080px){ .dg-logo img{height:50px;} }
@media (max-width:1279px) and (min-width:1081px){ .dg-logo img{height:50px;} }
/* Poppins is wider than the old menu font: tighten the menu on mid-size screens so it fits on one line */
@media (max-width:1279px) and (min-width:1081px){
  .dg-bar{gap:14px;}
  .dg-link{padding:0 8px; font-size:13.5px;}
  .dg-cta{padding:0 14px;}
  .dg-signin{padding:0 11px;}
}