/* Global styles */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;

  overflow: hidden;
}

#header {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  padding: 10px;
}

#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

#mainContainer {
  display: flex;
  width: 100%;
  height: 100%;
}

/* ────────── highlight a selected Favourite‐panel toast ────────── */
#favsList .toast.selected-fav {
  border: 2px solid #6366f1;       /* Indigo-500 border */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 1) Favourites list: allow vertical scrolling */
/* ───────────────────────────────────────────────────────
   Give each “scrollable” div a real max-height (200px here,
   but you can tweak up or down until it fits nicely).
   Overflow-y:auto will then show a scrollbar whenever the
   content exceeds that 200px. 
─────────────────────────────────────────────────────────*/

/* 1) Favourites list */
#favsList {
  max-height: 400px;    /* adjust as needed */
  overflow-y: auto;
}

/* 2) AI-Intel panel */
#intelContent {
  max-height: 400px;    /* adjust as needed */
  overflow-y: auto;
}

/* 3) Weather table wrapper */
#weatherTable_wrapper {
  max-height: 400px;    /* adjust as needed */
  overflow-y: auto;
}



  .map-toast .toast{
    min-width:140px;
    font-size:.70rem;
    padding:.25rem .5rem;
  }
  .map-toast .toast-header{
    padding:.25rem .5rem;
    font-size:.70rem;
  }
  .map-toast i.fs-lg{ font-size:1rem; }

  /* NEW — let mouse / touch events fall through the toast */



/* 1) Make the favs container a grid with two equal columns */
#favsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}


/* #favsList .toast:first-child {
  grid-column: 1 / -1;
} */

#favsList .toast {
  width: 100%;
}

/* ── force Manrope on the course name (formerly <strong> now <span>) ── */
.map-toast .toast-header .me-auto {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 400; /* or 500 / 700, whichever weight you prefer */
}


  .hourWrap .hourBtn{
    cursor:pointer; user-select:none;
    transition:background-color .15s,color .15s;
  }




  /* selected toast grows ×2 and scrolls nicely */
  .map-toast .toast.toast-expanded{
    min-width: 280px !important;          /* ⇽ 2 × the old 140 px  */
    max-width: 280px !important;
  }
  /* intel area gets its own scroll bar */
  .map-toast .toast.toast-expanded .intel-text{
    max-height: 6rem;          /* ~96 px, tweak to taste */
    overflow-y: auto;
    white-space: pre-wrap;     /* preserve line-breaks   */
  }



  /* hide intel unless the toast is expanded */


  /* put the selected toast above every other marker */
  .map-toast.selected-toast   { z-index:9999 !important; }

  /* Leaflet gives markers position:absolute, add this for safety */
  .map-toast                  { position:relative; }




#mapContainer {
  flex: 1;

}

/* add to any <style> block */
.hourWrap{
  flex-wrap: wrap;          /* actually wrap!           */
  max-width: 220px;         /* keeps it inside the cell */
}


#tableContainer {
  z-index: -1;
  margin-top: -1rem;
  overflow-y: auto;
  background-color: #fff;
  padding: 10px;

  /* margin-top: -2.8rem; */
}

/* ONE-LINE, EVEN TABS ──────────────────────────────────────────────*/
.nav-tabs-alt .nav-item         { flex: 1 1 0; }   /* all tabs = ¼ width */
.nav-tabs-alt .nav-link         { height: 3rem; padding: .5rem 0; }

/* keep every icon exactly 1 rem tall so the line-box matches text */
.nav-tabs-alt .nav-link .bx,
.nav-tabs-alt .nav-link .material-symbols-rounded {
  font-size: 1rem !important;   /* override fs-5 etc. */
  line-height: 1 !important;
}


/* body hidden */
.toast--compact .toast-body      { display:none !important; }

/* name hidden & body hidden */
.toast--mini   .toast-body,
.toast--mini   .toast-header strong { display:none !important; }

/* make the header itself a bit slimmer */
.toast--compact .toast-header,
.toast--mini    .toast-header { padding:.15rem .35rem; font-size:.65rem; }

#weatherCard {
  position: fixed;
  width: 380px !important;
  right: 1rem;
  top: 20%;
  /* transform: translateY(-50%); */
  z-index: 100;              /* adjust if needed so it floats above the map */
}

/* anywhere after your other styles */

#weatherCard .card,
#weatherCard .card-body,
#weatherCard .tab-content > .tab-pane {
  height: auto !important;
  overflow: visible !important;
}

#weatherCard {
  overflow-y: visible !important;
  height: auto;                /* start at content height */
}

.map-toast .toast.toast--compact,
.map-toast .toast.toast--mini{
  /* let the content dictate the width */
  min-width : 0;             /* kill the 140 px floor                */
  width     : auto;          /* no forced stretching                 */
  max-width : max-content;   /* stop Bootstrap from expanding it     */
  display   : inline-flex;   /* contents sit side-by-side, no block  */
  align-items:center;        /* vertically centre the icon           */
  padding   : 0;             /* we’ll pad the header instead         */
  box-shadow:none;           /* optional – feels more “label-ish”    */
}

/* =========== header tweaks =========== */
.toast--compact .toast-header,
.toast--mini    .toast-header{
  padding   : .15rem .25rem; /* slimmer                               */
  font-size : .70rem;
}

/* icon-only: squeeze even more */
.toast--mini .toast-header{
  padding   : .1rem .15rem;
}

/* lose the left margin when we hide the name */
.toast--mini .toast-header i{
  margin-right:0 !important;
}

/* ------------------------------------------------------------
   GLOBAL TRANSITIONS ― we only animate on the Y-axis + opacity
   ------------------------------------------------------------*/
.map-toast .toast,
.map-toast .toast-header,
.map-toast .toast-body{
  /* shared easing curve = Material-ish “fast-out, slow-in” */
  
}

/* ------------------------------------------------------------
   ❶  FULL TOAST  (≥ zoom-12 -– default)                      
   ------------------------------------------------------------*/
.map-toast .toast{
  /* give the body something to interpolate *from* */
  max-height: 400px;                 /* a bit taller than needed      */
  opacity: 1;
}

/* ------------------------------------------------------------
   ❷  HEADER-ONLY  (zoom-10 → 11)                              
   ------------------------------------------------------------*/
.toast--compact{
  /* “squash” the body instead of yanking it out of the DOM */
  max-height: 44px;                 /* ≈ one header row              */
}

.toast--compact .toast-body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;                 /* keep it tidy while shrinking  */
}

/* the pill header gradually rounds as we enter this state */
.toast--compact .toast-header{
  border-radius: .40rem;
}

/* ------------------------------------------------------------
   ❸  ICON-ONLY MAP-PIN  (≤ zoom-9)                            
   ------------------------------------------------------------*/
.toast--mini{
  max-height: 40px;                 /* header circle + pointer       */
  opacity: 1;                       /* keep the pin itself visible   */
  transform: translateY(-6px);      /* gentle “lift” during morph    */
  
}

.toast--mini .toast-header{
  width : 32px;     /* these values now animate from auto → 32px  */
  height: 32px;
  border-radius: 50%;
  padding: 0;
}

.toast--mini .toast-body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* name text fades instead of popping */
.toast-header strong{
  transition: opacity .2s;
}
.toast--mini   .toast-header strong{ opacity: 0; }
.toast--compact .toast-header strong{ opacity: 1; }

/* the pointer triangle eases in alongside the circle */
.toast--mini .toast-header::after{
  transition: opacity .25s cubic-bezier(.4,.0,.2,1);
  opacity: 1;
}
.toast--compact .toast-header::after,
.map-toast      .toast:not(.toast--mini) .toast-header::after{
  opacity: 0;                        /* hidden in non-pin states      */
}

/* ─────────── Drag handle (hidden on desktop) ─────────── */
#weatherCard .drag-handle{
  position:absolute;             /* float over card content            */
  top:-10px; left:50%; transform:translateX(-50%);
  
  background:#6366f1; opacity:.85; cursor:ns-resize; touch-action:none;
  display:none;                  /* mobile will flip this to block     */
  z-index:2;
}

#weatherCard.is-resizing{
  
  background: #f1e4ff !important;   /* or simply remove the rule */
}

.btn-xs {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.2;
    border-radius: 0.2rem;
  }
/* ──────────────────────────────────────────────────────────────
   1.  BASE PIN GEOMETRY – make the 32×32 circle a true flex box
   ──────────────────────────────────────────────────────────────*/
.toast--mini .toast-header{
  display:flex;
  align-items:center;            /* vertical centre */
  justify-content:center;        /* horizontal      */

  width :34px;                   /* ↑ 2 px gives the icon breathing-room */
  height:34px;
  border-radius:50%;
  padding:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);  /* subtle outline */
}

/* icon sits dead-centre with no stray margin */
.toast--mini i.fs-lg{
  margin:0 !important;
  font-size:1.2rem;              /* optically centred in 34×34 */
  line-height:1;
}

/* pointer triangle – recalc so it meets the new circle flush */
.toast--mini .toast-header::after{
  content:'';
  position:absolute;
  bottom:-8px; left:50%;
  width:0; height:0;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:inherit;
}

/* ──────────────────────────────────────────────────────────────
   2.  ANIMATION – scale/opacity instead of squeezing the height
   ──────────────────────────────────────────────────────────────*/
.map-toast .toast{
  /* we'll animate transform + opacity instead of height */
  transition: transform .25s cubic-bezier(.4,.0,.2,1),
              opacity   .25s cubic-bezier(.4,.0,.2,1);
}

/* full toast (default) */
.map-toast .toast{
  transform: scale(1);
  opacity: 1;
}

/* HEADER-ONLY (compact) – body fades, toast shrinks a touch     */
.toast--compact{
  transform: scale(.92);
}
.toast--compact .toast-body{
  opacity: 0;
  pointer-events:none;
  transition:opacity .15s ease-in-out;
}

/* PIN state – shrink further & lift slightly                    */
.toast--mini{
  transform: translateY(-6px) scale(.78);
  width: 10px !important;
}
.toast--mini .toast-body{ opacity:0; pointer-events:none; }

/* title text fades smoothly */
.toast-header strong{
  transition:opacity .2s ease-in-out;
}
.toast--mini   .toast-header strong{ opacity:0; }
.toast--compact .toast-header strong{ opacity:1; }

/* eradicate the default white “box” while we morph */
.toast--mini,
.toast--compact{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0;
}

/* when coming back to FULL, restore the classic look */
.map-toast .toast:not(.toast--mini):not(.toast--compact){
  background:#fff;                  /* whatever your original was   */
  border: -1px solid rgb(255, 255, 255);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  padding: 0px !important;
}

  /* makes an expanded toast ignore the zoom-level classes */
  .map-toast.selected-toast .toast {
    display: block;          /* body always visible               */
    width: min-content;        /* a little breathing room           */
    white-space: normal;     /* let long course names wrap nicely */
  }

/* ───── slight polish: hover halo on any state (desktop) ─────── */
@media(pointer:fine){
  .map-toast .toast-header:hover{
    filter:brightness(1.1);
    transition:filter .15s;
  }
}

/* pin-state outline ─ place after your existing toast rules */
.toast--mini               { position:relative; }          /* anchor */
.map-toast.selected-toast .toast--mini::before{
  content:'';
  position:absolute;
  inset:-3px;                        /* ring thickness       */

  border-radius:50%;                 /* perfect circle       */
  /* box-shadow: 0 3px 6px rgba(0,0,0,.35);  */
  pointer-events:none;

}

/* hide the wrapper’s old ring whenever we’re in pin mode */
.map-toast.selected-toast.toast--mini::before{display:none;}

.toast-header.bg-warning .fav-star.bxs-star {
  color:#fff !important;
}


/* ─────────── Mobile “bottom sheet” mode ─────────── */
@media (max-width:767.98px){
  #weatherCard{
    position:fixed;
    inset:auto 0 0 0;            /* left:0 right:0 bottom:0             */
    width:100% !important;
    height:40vh;                 /* starting height (≈40 % of viewport) */
    transform:none;
    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;
  }
  #weatherCard .drag-handle{ display:block; 
  
  }
}


/* add once, anywhere after your DataTables CSS */
#weatherTable tr.daychild > td{
  background:#f1e4ff !important;   /* light purple */
  padding:0.35rem 0.5rem;          /* same as your <div> had */
  border-top:0;                    /* optional: lose the extra rule */
}

/* paste this AFTER your other toast rules */
.map-toast.selected-toast .toast--mini .toast-header{
  /* outline + shadow that hugs the 34 × 34 circle */
  /* border:3px solid #6366f1 !important;          */
  box-shadow:
      0 0 0 4px var(--toast-accent),
      0 2px 6px rgba(0,0,0,.25) !important;
  border-radius:50%;                            /* stay round   */
  z-index: 100000;
}



.hourBtn.selected{
  background:#0d6efd !important;
  color:#fff;
  border-radius:.25rem;
}

/*  16 px, subtle spacing, inherits colour from text  */
.wx-icon{
  font-size:1rem;       /* 16 px */
  vertical-align:middle;
  margin-left:.25rem;   /* nudge away from numbers */
}

  .day-detail {                 /* full-width purple background */
    background:#f1e4ff;
  }

  /* add after your other <style>s */
.day-detail .metline{            /* the little “H • P” line */
  color:#000;                    /* black text */
  font-size:.80rem;              /* still a bit smaller */
}


.container-fluid {
  position: absolute;
  z-index: 1050;              /* push it behind the map */
}

.leaflet-container {
  z-index: 1;              /* ensure the map is above */
}

/* or, if only the card should block clicks: */
.container-fluid {
  pointer-events: none;
}
.container-fluid .card {
  pointer-events: auto;
}

.today-row { background-color:#24cf63 !important; color: white !important; }

/* nicer highlight for the chosen day (uses Bootstrap .table-primary colours) */
#weatherTable tbody tr.selected-day.table-primary > td {
  background-color: #6366f1 !important;
  color: #fff !important;
}

/* full-width bar that lives inside AG-Grid’s scrollable area */
#hourSelector{
  display:flex;          /* lay out the 24 buttons */
  flex-wrap:wrap;
  background:#f8f9fa;
  padding:4px 6px;
  border-top:1px solid #dee2e6;
}
#hourSelector .hourBtn{
  cursor:pointer;
  padding:2px 4px;
  border:1px solid #dee2e6;
  border-radius:3px;
  font-size:.72rem;
  margin:2px 2px;
}
#hourSelector .hourBtn.selected,
#hourSelector .hourBtn:hover{
  background:#0d6efd;
  color:#fff;
}

.dataTable td:nth-child(4) {        /* 4th visible column (= icon) */
  width: 40px;                      /* fixed width so table shrinks */
}
.material-icons-round{
  vertical-align: middle;
  line-height: 1;
}


@media (max-width: 800px) {
  #mainContainer {
    flex-direction: column;
  }
  #tableContainer {
    width: 100%;
    max-width: 100%;

    overflow-y: auto;
  }
}

/* thick green outline + subtle shadow for the active toast */
.map-toast.selected-toast .toast {
  /* border: 10px solid var(--bs-success); */
  box-shadow:.5rem .5rem .5rem .5rem rgba(0, 0, 0, 0.418);
  transition: all 0.5s;
}


  /* ———  Re-establish the classic toast look  ————————————— */

  /* keep the width you like, but remove the outer padding */
  .map-toast .toast{
    min-width:170px;      /* same as before */
    padding:0;            /* ✨ no padding = header touches edges */
    font-size: .8125rem;  /* back to Bootstrap’s default (~13px)  */
  }

  /* restore the original header size & spacing */
  .map-toast .toast-header{
    padding:.35rem .75rem;      /* Bootstrap default */
    font-size: .875rem;         /* default ~14px */
  }

  /* icon back to its default heading size */
  .map-toast i.fs-lg{ font-size:1.25rem; }



/* style.css */
.modal .small-note  { font-size:.85em; color:#555 }
.modal .filter-block input[type=range] { width:100% }
.modal .filter-block label { display:block; margin-bottom:.3em }

/* Gray out past days and disable pointer events */
.pastDay {
  color: #999;
  background-color: #f5f5f5;
  pointer-events: none;
}
.pastDay td {
  opacity: 0.6;
}

  /* don’t let the nav wrap */
  .nav-tabs-alt{ flex-wrap:nowrap; }

  /* each <li> takes half the bar */
  .nav-tabs-alt .nav-item{ flex:1 0 50%; }

  /* centre the label / icon inside the link */
  .nav-tabs-alt .nav-link{
    width:100%;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;   /* keep padding inside the 50 % */

    
  }

    .nav-tabs-alt        { flex-wrap:nowrap; }
  .nav-tabs-alt .nav-item { flex:1 0 33.333%; }     /* 3 × ⅓ */
  .nav-tabs-alt .nav-link{
    width:100%; display:flex; justify-content:center; align-items:center;
  }

#map {
  width: 100%;
  height: 100%;
}
/* Highlight the selected day row */
.dailyRow.selected {
  background-color: #cce5ff; /* Choose a color that fits your design */
}

/* Single "weatherTable" for daily data (historical, today, forecast). */
.weatherTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.weatherTable th, .weatherTable td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}

.weatherTable th {
  background-color: #e0e0e0;
}

/* Remove or omit any hourlyTable or hourlyRow references */

/* Modals */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto; 
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fafafa;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
  max-width: 500px;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

/* ─── Trail Intelligence modal ────────────────────────────────── */
.intel {
  position: fixed;
  bottom: 60px;
  left: 15px;
  max-width: 360px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #666;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  padding: 10px 12px;
  font-size: .9em;
  line-height: 1.35em;
  opacity: 0;
  pointer-events: none;          /* ignore mouse while hidden      */
  transition: opacity .2s ease-in-out;
  z-index: 1200;                 /* above tooltips & overlays       */
}

.intel.visible {
  opacity: 1;
  pointer-events: auto;          /* clickable when shown            */
}

/* header row */
.intel-header {
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.closeBtn {
  cursor: pointer;
  font-size: 1.1em;
}

/* body text uses monospace while typing to reduce shift */
.intel-body {
  font-family: Consolas, monospace;
  white-space: pre-wrap;
}


.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

/* Upload area styling */
#dropZone {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: #888;
  margin: 10px 0;
  cursor: pointer;
}
#dropZone.dragover {
  border-color: #333;
  color: #333;
}

/* Crop Modal customizations */
#cropMap {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
}
.crop-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.crop-slider {
  width: 45%;
}

/* Elevation chart styling */
#elevationChart {
  width: 100%;
  height: 150px;
  display: block;
  margin-bottom: 10px;
}

/* Bottom pane */
#bottomPane {

  width: 100%;

  padding: 10px;
  box-sizing: border-box;
  overflow-x: auto;
}

/* hour grid */
/* .hourWrap      { display:flex; gap:.25rem; flex-wrap:nowrap; } */
.hourBtn       { cursor:pointer; padding:.15rem .3rem;
                 border:1px solid #dee2e6; border-radius:.25rem;
                 font-size:.75rem; }
.hourBtn:hover { background:#0d6efd; color:#fff; }
.hourBtn.selected{ background:#0d6efd; color:#fff; }
.caret         { cursor:pointer; user-select:none; }
.expander      { width:1.5rem; text-align:center; }
.hourRow td    { background:#fcfcfc; }

/* add _once_ to any stylesheet */


/* little ▸ / ▾ icon like AG-Grid did */
td.dt-control {
  text-align:center; cursor:pointer;
}
tr.shown td.dt-control:before { content:"▾"; }
td.dt-control:before         { content:"▸"; }


/* This one line is enough */
.map-toast { pointer-events:none; }

/* make the details cell behave like a normal block */
#weatherTable td.child        { white-space: normal !important; }

/* and let the hour bar really fill that cell */
.day-detail .hourWrap         { min-width: 100% !important; }   /* stops shrink-wrap */

:root{ --toast-accent: #6366f1;}   /* Indigo-500 */

  /* full / compact toast — purple ring + very soft shadow */
  .map-toast.selected-toast .toast{
    outline:3px solid var(--toast-accent) !important;
    outline: offset 2rem;
    box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
  }

  /* highlight helper class (used while typing intel, etc.) */
  .toast-highlight{
    box-shadow:
      0 0 0 4px var(--toast-accent),
      0 2px 6px rgba(0,0,0,.25) !important;
  }

  /* “active” state the click-handler adds */
  .toast-active{
    /* border: 2px dashed var(--toast-accent); */
    
  }

  /* wrapper pseudo-ring (used in mini mode if you kept it) */
  .map-toast.selected-toast::before{
    border-color:var(--toast-accent) !important;
    box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
  }

  /* optional: subtler lift on the whole wrapper */
  .map-toast.selected-toast{
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.30));
  }

  .toast .toast-header {
    margin: -1px !important;
    border-radius: 0.25rem 0.25rem 0 0 ;
    
  }

  .toast--compact .toast-header {
    margin: 0px !important;
    border-radius: 0.25rem ;
    text-wrap: nowrap;
    font-family: "Manrope", system-ui, sans-serif ;
  }

  .toast--mini .toast-header {
    border-radius: 50%;
    
  }

/* kill the 400 px tween ONLY on the clicked / expanded toast */
.map-toast.selected-toast .toast,
.map-toast .toast.toast-expanded{
  max-height: none !important;   /* skip the fake height */
  overflow   : visible !important;
}

/* Tone the selected-toast shadow right down */
.map-toast.selected-toast .toast{
 box-shadow: 0 3px 6px rgba(0,0,0,.35) !important;
}
.map-toast.selected-toast{
  filter:none;                              /* or keep if you like the lift */
}