/* =====================================================================
   Site shell — universal header, footer, theme toggle, brand-pair logo
   ----------------------------------------------------------------------
   Drop-in replacement for the per-page header markup that grew organically
   across the portal (.top-bar in index.html, .uc-head on dashboards,
   .topbar on the maps). All NEW pages should use .site-header markup; old
   pages migrate to it in PRs 2-6.

   Logical properties (inset-inline-start, padding-inline) are used so RTL
   and LTR pages both work without per-direction overrides.

   Token contract — every colour read in this file resolves through
   css/moh-brand.css surface tokens, so [data-theme="dark"] flips the look
   without touching this file.
   ===================================================================== */

/* ── HEADER ──────────────────────────────────────────────────────────── */

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 28px;
  background:var(--card);
  box-shadow:var(--shadow);
  position:relative;
  z-index:50;
  flex-shrink:0;
}

/* gradient-header lifts to brand green; reuse on dashboard pages whose
   <header class="site-header gradient-header"> wants the bold band. */
.site-header.gradient-header{
  background:linear-gradient(135deg,var(--gradient-from) 0%,var(--gradient-to) 100%);
  color:var(--text-on-brand);
  box-shadow:0 2px 8px rgba(0,135,85,0.18);
}

/* Pair of brand logos: MOH-text + thin divider + Midani-arabic logo.
   In RTL flex-row the DOM first child appears on the visual RIGHT, which
   matches the Figma brand placement (Ministry first, Midani after).      */
.brand-pair-logo{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand-pair-logo img.moh{
  height:42px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}
.brand-pair-logo .pair-divider{
  width:1px;
  height:36px;
  background:var(--divider);
  flex-shrink:0;
}
.site-header.gradient-header .brand-pair-logo .pair-divider{
  background:rgba(255,255,255,0.35);
}
.brand-pair-logo img.midani{
  height:34px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}

/* Optional 3rd logo slot used ONLY on the 3 hajj-*.html pages. The slot is
   empty by default; add the markup on those pages to opt in. */
.hajj-co-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.hajj-co-brand .pair-divider{
  width:1px;
  height:36px;
  background:var(--divider);
  flex-shrink:0;
}
.hajj-co-brand img{
  height:36px;
  width:auto;
  object-fit:contain;
}

/* Action cluster on the LEFT side (logical end in RTL). Contains the theme
   toggle + the logout button + any per-page extras. */
.site-header__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* ── THEME TOGGLE ──────────────────────────────────────────────────────
   36×36 icon button. Two inline SVG icons (sun + moon) live inside the
   button; CSS toggles their visibility based on [data-theme="dark"]. */
.theme-toggle{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-dark);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex-shrink:0;
  transition:background .15s, border-color .15s, transform .15s;
}
.theme-toggle:hover{
  background:var(--border-soft);
  transform:translateY(-1px);
}
.theme-toggle svg{
  width:18px;
  height:18px;
  display:block;
}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* When the toggle sits inside a gradient header it inverts colour scheme so
   it stays visible on the green band in light mode. */
.site-header.gradient-header .theme-toggle{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.30);
  color:#fff;
}
.site-header.gradient-header .theme-toggle:hover{
  background:rgba(255,255,255,0.28);
}

/* ── LOGOUT BUTTON variant for site-header (matches existing .logout-btn
   in styles.css but with token-driven colours). The legacy class is also
   accepted — site-shell pages can use either. */
.site-header .logout-btn,
.site-header__actions .logout-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:none;
  color:var(--text-dark);
  font:inherit;
  font-size:.9rem;
  font-weight:500;
  cursor:pointer;
  padding:8px 12px;
  border-radius:8px;
  transition:background .15s;
  text-decoration:none;
}
.site-header .logout-btn:hover,
.site-header__actions .logout-btn:hover{
  background:var(--border-soft);
}
.site-header.gradient-header .logout-btn{
  color:#fff;
}
.site-header.gradient-header .logout-btn:hover{
  background:rgba(255,255,255,0.18);
}

/* ── FOOTER ────────────────────────────────────────────────────────────
   "Powered by Midani" lockup at the bottom of every page. The SVG already
   contains the Midani mark + the wording so this is a single <img>. */
.site-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 24px 22px;
  margin-top:auto;
  flex-shrink:0;
}
.site-footer img{
  height:24px;
  width:auto;
  object-fit:contain;
  opacity:.85;
}
.site-footer.left-aligned{ justify-content:flex-start; }

/* ── LEAFLET CONTROL + POPUP OVERRIDES ─────────────────────────────────
   Extracted from emergency-map/styles.css so EVERY map page (clinics-map,
   triage-points-map, encounters-map, emergency-map) gets a contrast-correct
   popup in both themes. The :not(.dont-theme) guard lets the emergency-map
   keep its own zoom-control colour palette if it ever needs to. */
.leaflet-popup-content-wrapper{
  background:var(--card);
  color:var(--text-dark);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.leaflet-popup-tip{
  background:var(--card);
}
.leaflet-popup-content{
  color:var(--text-dark);
  font-family:inherit;
}
.leaflet-popup-content a{
  color:var(--moh-green);
}
[data-theme="dark"] .leaflet-popup-content a{
  color:var(--accent-soft,#F0B323);
}

/* Default zoom controls + attribution — keep the existing portal styling
   intact in light, lift to surface-aware in dark. */
[data-theme="dark"] .leaflet-control-zoom a{
  background:var(--card);
  color:var(--text-dark);
  border-color:var(--card-border);
}
[data-theme="dark"] .leaflet-control-zoom a:hover{
  background:var(--bg-deep);
}
[data-theme="dark"] .leaflet-bar a.leaflet-disabled{
  background:var(--bg-deep);
  color:var(--text-muted);
}
[data-theme="dark"] .leaflet-control-layers{
  background:var(--card);
  color:var(--text-dark);
  border:1px solid var(--card-border);
}

/* ── PRINT — always render as light no matter the active theme.
   PDF exports (html2pdf.js, browser print-to-PDF) should never carry the
   dark surface tokens because the colour-on-paper contrast is wrong. */
@media print{
  :root,
  [data-theme="dark"]{
    color-scheme:light;
    --bg:        #ffffff;
    --bg-deep:   #f9fafb;
    --card:      #ffffff;
    --card-border:#e5e7eb;
    --panel:     #ffffff;
    --divider:   #d9d9d9;
    --border:    #e5e7eb;
    --border-soft:#f2f2f2;
    --text-dark: #101828;
    --text:      #475467;
    --text2:     #667085;
    --text-muted:#6B7280;
    --shadow:    none;
  }
  .theme-toggle,
  .site-footer{display:none !important;}
}

/* ── MOBILE TIGHTENING — keep the universal header readable on narrow
   viewports without each page overriding. */
@media (max-width:720px){
  .site-header{padding:10px 14px; gap:10px;}
  .brand-pair-logo{gap:10px;}
  .brand-pair-logo img.moh{height:32px;}
  .brand-pair-logo img.midani{height:26px;}
  .brand-pair-logo .pair-divider,
  .hajj-co-brand .pair-divider{height:28px;}
  .hajj-co-brand img{height:28px;}
  .theme-toggle{width:32px;height:32px;}
  .theme-toggle svg{width:16px;height:16px;}
  .site-header .logout-btn span{display:none;}
}