/* ============================================================
   MetarMap v0.6  —  FULL MASTER STYLESHEET
   ============================================================ */

/* ---------- Root Variables ---------- */
:root {
  --vfr:#28a745;
  --mvfr:#0080f0;
  --ifr:#dc3545;
  --lifr:#9722ce;

  --bg:#f8f9fa;
  --surface:#ffffff;
  --text:#111;
  --muted:#666;
  --border:#ccc;

  --accent:#0d6efd;
  --tint-opacity-light:0.035;
  --tint-opacity-dark:0.06;
}

/* ============================================================
   BASE / RESETS
   ============================================================ */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  transition:background .6s ease,color .6s ease;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{cursor:pointer;font-family:inherit;}
img{max-width:100%;display:block;}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.hidden{display:none!important;}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.5rem 1rem;
  height:50px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  z-index:1001;
}
.navbar-title{font-weight:600;font-size:1.1rem;}
.navbar-right{display:flex;align-items:center;gap:.5rem;}

/* ---------- Buttons (Bootstrap-like) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:500;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);color:var(--text);
  padding:.35rem .6rem;
  transition:background .2s,border .2s,color .2s,transform .1s;
}
.btn i{font-size:1rem;line-height:1;}
.btn:hover{background:#e9ecef;}
.btn:active{transform:scale(.96);}
.btn-outline-primary{border-color:var(--accent);color:var(--accent);}
.btn-outline-primary:hover{background:var(--accent);color:#fff;}
.btn-outline-secondary{border-color:#6c757d;color:#6c757d;}
.btn-outline-secondary:hover{background:#6c757d;color:#fff;}
.btn-sm{font-size:.8rem;padding:.25rem .5rem;}

/* ---------- Theme Toggle Glow ---------- */
#themeToggle.active{
  box-shadow:0 0 8px var(--accent);
  transition:box-shadow .4s ease;
}

/* ============================================================
   MAP AREA
   ============================================================ */
/* Map fills below navbar */
#map {
  position: absolute;
  top: 50px;           /* height of navbar */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 0;          /* ensure it's behind overlay UI */
}

/* Make sure navbar stays above the map */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1001;
}

/* Adjust fav-bar and other overlays relative to fixed navbar */
.fav-bar {
  top: 60px;
}

.leaflet-container{font:inherit;}
.leaflet-layer,.leaflet-tile{transition:opacity .6s ease-in-out!important;}

/* ============================================================
   OVERLAYS / INDICATORS
   ============================================================ */
.loading-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);
  z-index:999;font-weight:500;
  transition:background .6s ease,color .6s ease;
}
body.theme-dark .loading-overlay{
  background:rgba(20,20,20,.9);color:#f8f9fa;
}
.zoom-indicator{
  position:absolute;bottom:12px;right:16px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 10px;font-size:13px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
body.theme-dark .zoom-indicator{
  background:rgba(40,40,40,.8);color:#f8f9fa;border:1px solid #333;
}

/* ============================================================
   MARKERS
   ============================================================ */
.metar-marker{
display: inline-flex;
align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    white-space: nowrap;
    user-select: none;
    transition: background-color 200ms ease;
}

.metar-marker:hover{transform:scale(1.15);z-index:1001;}

.metar-vfr{background:var(--vfr)!important;}
.metar-mvfr{background:var(--mvfr)!important;}
.metar-ifr{background:var(--ifr)!important;}
.metar-lifr{background:var(--lifr)!important;}
.metar-na{background:var(--muted)!important;}
body.theme-dark .metar-marker{
  border-color:#dadada;text-shadow:0 1px 3px rgba(0,0,0,.6);
}


/* ---------- User Location ---------- */
.user-location{
  width:12px;height:12px;border:2px solid #fff;border-radius:50%;
  background:#0d6efd;box-shadow:0 0 0 rgba(13,110,253,0.4);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(13,110,253,0.4);}
  70%{box-shadow:0 0 0 15px rgba(13,110,253,0);}
  100%{box-shadow:0 0 0 0 rgba(13,110,253,0);}
}
.accuracy-ring{border:2px dashed rgba(13,110,253,.3);}

/* ============================================================
   LEGEND
   ============================================================ */
.legend{
  position:absolute;bottom:12px;left:12px;
  background:rgba(255,255,255,.9);
  border-radius:8px;padding:.5rem .75rem;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
  font-size:13px;
}
.legend-item{display:flex;align-items:center;margin-bottom:3px;}
.legend-swatch{
  width:16px;height:10px;border-radius:3px;margin-right:6px;
}
body.theme-dark .legend{background:rgba(30,30,30,.9);color:#f8f9fa;}
.legend-swatch.vfr{background:var(--vfr);}
.legend-swatch.mvfr{background:var(--mvfr);}
.legend-swatch.ifr{background:var(--ifr);}
.legend-swatch.lifr{background:var(--lifr);}

/* ============================================================
   FAVOURITES BAR
   ============================================================ */
.fav-bar{
  position:absolute;top:60px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.95);
  border-radius:8px;padding:6px 10px;
  display:flex;gap:6px;overflow-x:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  z-index:1001;
}
body.theme-dark .fav-bar{
  background:rgba(25,25,25,.95);color:#eee;
}
.fav-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 8px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:4px;
  cursor:pointer;white-space:nowrap;
}
.fav-item:hover{background:#e9ecef;}
.fav-item i{font-size:14px;opacity:.8;}
body.theme-dark .fav-item{background:#2b2b2b;border-color:#3a3a3a;}
body.theme-dark .fav-item:hover{background:#3a3a3a;}

/* ============================================================
   MODAL  (Weather Details)
   ============================================================ */
.modal-content{
  position:relative;background:#fff!important;color:#111;
  border-radius:.75rem;isolation:isolate;
  box-shadow:0 0 25px rgba(0,0,0,.25);
  transition:background .6s ease,color .6s ease;
}
body.theme-dark .modal-content{
  background:#1e1e1e!important;color:#f8f9fa;
  box-shadow:0 0 35px rgba(0,0,0,.5);
}

/* ---------- Category Tint Overlay ---------- */
.cat-vfr .modal-content::before,
.cat-mvfr .modal-content::before,
.cat-ifr .modal-content::before,
.cat-lifr .modal-content::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;
  opacity:var(--tint-opacity-light);
}
body.theme-dark .cat-vfr .modal-content::before,
body.theme-dark .cat-mvfr .modal-content::before,
body.theme-dark .cat-ifr .modal-content::before,
body.theme-dark .cat-lifr .modal-content::before{
  opacity:var(--tint-opacity-dark);
}
.cat-vfr .modal-content::before{background:var(--vfr);}
.cat-mvfr .modal-content::before{background:var(--mvfr);}
.cat-ifr .modal-content::before{background:var(--ifr);}
.cat-lifr .modal-content::before{background:var(--lifr);}
.modal-content>*{position:relative;z-index:1;}

/* ---------- Header Strip ---------- */
.cat-vfr .modal-header{background:var(--vfr);color:#fff;}
.cat-mvfr .modal-header{background:var(--mvfr);color:#fff;}
.cat-ifr .modal-header{background:var(--ifr);color:#fff;}
.cat-lifr .modal-header{background:var(--lifr);color:#fff;}

/* ---------- Category Banner ---------- */
.bg-purple{background-color:var(--lifr)!important;color:#fff!important;}
.category-banner{
  display:flex;align-items:center;justify-content:flex-start;
  font-size:.9rem;color:#fff;
  padding:.55rem .75rem;border-radius:.5rem;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
  position:relative;overflow:hidden;
  animation:bannerFadeIn .8s ease-out forwards;
}
body.theme-dark .category-banner{
  box-shadow:0 2px 6px rgba(255,255,255,.08);
}
.category-banner i{font-size:1.1rem;opacity:.9;}
@keyframes bannerFadeIn{
  0%{opacity:0;transform:translateY(-8px);filter:brightness(.9);}
  60%{opacity:1;transform:translateY(0);filter:brightness(1.15);}
  100%{opacity:1;filter:brightness(1);}
}
.category-banner::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 20px currentColor;
  opacity:0;animation:bannerGlow 1.2s ease-out .6s forwards;
}
@keyframes bannerGlow{
  0%{opacity:.8;transform:scale(1.02);}
  100%{opacity:0;transform:scale(1);}
}

/* ---------- Stat Cards ---------- */
.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .3s,transform .2s;
}
.stat-card:hover{transform:scale(1.04);}
body.theme-dark .stat-card{background:#2b2b2b;border-color:#3a3a3a;}
.cat-vfr .stat-card{border-left:4px solid var(--vfr);}
.cat-mvfr .stat-card{border-left:4px solid var(--mvfr);}
.cat-ifr .stat-card{border-left:4px solid var(--ifr);}
.cat-lifr .stat-card{border-left:4px solid var(--lifr);}
.cat-vfr .stat-card i{color:var(--vfr)!important;}
.cat-mvfr .stat-card i{color:var(--mvfr)!important;}
.cat-ifr .stat-card i{color:var(--ifr)!important;}
.cat-lifr .stat-card i{color:var(--lifr)!important;}
.stat-card .label{font-size:.8rem;color:var(--muted);}

/* ---------- Sections ---------- */
.metar-section{border-top:1px solid var(--border);padding-top:.75rem;}
.section-title{font-weight:600;margin-bottom:.4rem;}
body.theme-dark .metar-section{border-color:#3a3a3a;}

/* ---------- Cloud Badges ---------- */
.bg-secondary-subtle{
  background:#e9ecef;color:#333;
  padding:.1rem .4rem;border-radius:.5rem;
}
body.theme-dark .bg-secondary-subtle{background:#444;color:#eee;}

/* ---------- Modal Entrance ---------- */
@keyframes modalTintFade{
  0%{opacity:0;filter:brightness(.85);}
  100%{opacity:1;filter:brightness(1);}
}
.modal-content{animation:modalTintFade .8s ease-out forwards;}

/* ============================================================
   DARK THEME VARIANT
   ============================================================ */
body.theme-dark{
  --bg:#121212;--surface:#1e1e1e;--border:#333;--text:#f8f9fa;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  #map{height:calc(100vh - 45px);}
  .stat-card .value{font-size:.9rem;}
  .category-banner{font-size:.8rem;}
  .fav-bar{top:50px;gap:4px;padding:4px 6px;}
  .legend{font-size:12px;padding:.4rem .6rem;}
}
/* ============================================================
   Cloud Graph (SVG)
   ============================================================ */
.cloud-graph { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); }
.cg-svg { width:100%; height:160px; display:block; }
.cg-bg { fill: var(--surface); }
.cg-grid { stroke: rgba(0,0,0,0.08); stroke-width:1; }
body.theme-dark .cg-grid { stroke: rgba(255,255,255,0.08); }
.cg-alt { fill: var(--muted); font-size: 10px; text-anchor: end; }
.cg-label { fill: var(--text); font-size: 11px; }
.cg-layer { fill: #9aa6b2; opacity: 0.9; }
.cg-layer.few  { fill: #cfd6dd; }
.cg-layer.sct  { fill: #b7c1ca; }
.cg-layer.bkn  { fill: #9aa6b2; }
.cg-layer.ovc  { fill: #7f8a95; }
.cg-layer.vv   { fill: #6c7680; opacity: 0.85; }

/* ============================================================
   Cloud Graph Theme Vars
   ============================================================ */
:root{
  --cloud-grad-top:#ffffff;
  --cloud-grad-bottom:#dfe6ee;
  --cloud-stroke:#94a1ad;
  --shadow-color:#3a3f45;
  --cloud-grid:#00000020;
  --cloud-grid-text:#666;
  --cloud-label:#eef2f6;
  --cloud-label-strong:#d8e0e9;
  --cloud-label-text:#2c343b;
}
body.theme-dark{
  --cloud-grad-top:#2e343b;
  --cloud-grad-bottom:#1f2328;
  --cloud-stroke:#47515a;
  --shadow-color:#000000;
  --cloud-grid:#ffffff22;
  --cloud-grid-text:#b7c1ca;
  --cloud-label:#39424b;
  --cloud-label-strong:#313942;
  --cloud-label-text:#e8edf2;
}

/* Container polish */
.cloud-graph { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.cg-svg { width:100%; height:320px; display:block; }
/* Ceiling line + label */
:root{
  --ceiling-line:#ff5a6e;
  --ceiling-pill-bg:#ffe7eb;
  --ceiling-pill-text:#8a0f23;
}
body.theme-dark{
  --ceiling-line:#ff7b94;
  --ceiling-pill-bg:#4a1f28;
  --ceiling-pill-text:#ffd7df;
}

.cg-ceiling-line{
  stroke: var(--ceiling-line);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.cg-ceiling-pill{ fill: var(--ceiling-pill-bg); }
.cg-ceiling-label{ fill: var(--ceiling-pill-text); font-size: 12px; font-weight: 600; }

/* Cloud graph tooltip */
.cloud-graph { position: relative; }
.cg-tip{
  position:absolute; pointer-events:none;
  background: rgba(0,0,0,0.78); color:#fff;
  padding:4px 8px; border-radius:6px; font-size:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  opacity:0; transition:opacity .12s ease;
}
body.theme-dark .cg-tip{
  background: rgba(255,255,255,0.92); color:#111;
}
/* Cloud layout switch */
.cg-layout-switch .btn { padding: .2rem .5rem; }
.cg-layout-switch .btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}