:root {
  /* Base sizes */
  --day-label-width: 30px;
  --site-width: 150px;

  /* Slider sizes */
  --handle-width: 12px;
  --handle-height: 30px;
  --label-font: 14px;
  --slider-thickness: 10px;
  /*document.documentElement.style.setProperty("--sites-per-month", sites.length);*/
  --sites-per-month: 1;
  --hdrColor: #f0f0f0;

  --bg: #AABBCC;
  --bg: #77A5DB;
  --panel: #AABBCC;
  --panel: #B1D3F8;
  --text: #0f0f0f;
  --muted: #000;
   
  --accent: #58a6ff;
  --input: #334455;
  --input: #fff;
  
  --hdrbg: #C9DFF5;
  
  --btnIn: #0099A4;
  --btnOut: #003366;
  --btnHover: #33CCFF;
  --btnActive: #006B80;
  
  --error-bg: #3a1f1f; /* Date Range */
  --error-text: #ffb3b3;
}
/* ===========================
   GLOBAL BASE
   =========================== */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  padding: 1rem;
}
body.resizing {
  cursor: col-resize;
  user-select: none;
}
header {
  padding: 12px 16px;
  border-bottom: 1px solid #23262d;
}
select, 
/*input[type="number"],*/
input[type="date"], 
input[type="time"], 
input[type="checkbox"] {
  background: var(--input);
  color: var(--text);
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 4px 6px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
}
input[type="date"] {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
input[type="date"].invalid-range {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: #d9534f; /* subtle red border */
}
.timeline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-btn {
  background: var(--input);
  color: var(--text);
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
}

.step-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three equal columns */
  gap: 12px;
}

.hidden {
  display: none !important;
}
.view { display: none; }
.view.active { display: block; }

    #map {
      width: 100%; 
	  height: 480px;
      border: 1px solid #2a2f3a; 
	  border-radius: 8px;
    }

	/* Hide the leaflet control title */	
	.leaflet-control-layers-collapsed .tidetables {
		display: none;
	}
	/* Optional: make the title look clean when expanded */
	.tidetables {
		display: block;
		padding: 4px 10px 2px 10px;
		font-size: 13px;
		background: #f4f4f4;
		border-bottom: 1px solid #ccc;
		margin-bottom: 4px;
	}
	.iconLabel {
		font-size: medium;
		left: -45px;
		min-height: 0.1em;
		min-width: 100px;
		text-align: center;
		top: 1.5em;
		font-size: var(--label-size, small);
	}
	.NTSLFicon {
		color: orange;
	}
	.EASYicon {
		color: blue;
	}
	.siteIcon {
		color: #000;
	}
    .note {
      font-size: 12px;
      margin-top: 6px;
      color: var(--muted);
    }
	
#monthsContainer,
#legendWrapper {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}
#monthsContainer,
#legendWrapper {
  margin: 0 auto 24px auto;     /* centers the block horizontally */
  width: 100%;        /* allows it to shrink on smaller screens */
}

    /* Panels base style */
	.sitePanel, .mapPanel, .calendarPanel {
      background: var(--panel);
      border: 1px solid #23262d;
      border-radius: 8px;
      padding: 8px;
    }
    .sitePanel h2, .mapPanel h2, .calendarPanel h2, 
	.sitePanel h3, .mapPanel h3, .calendarPanel h3 {
      margin: 0 0 8px 0;
      font-size: 16px;
	  background: var(--hdrbg);
      border-radius: 8px;
      padding: 4px 8px;
    }
	.sitePanel label {
      font-size: 14px;
      color: var(--muted);
      display: block;
      margin-bottom: 4px;
      padding: 4px 8px;
    }
/***  sitePanel  ***/
	.row, .halfrow {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
      padding: 1px;
      flex-wrap: wrap; /* allows wrapping on small screens */
	  border: 1px solid #eee;
      border-radius: 8px;
	  width: 100%;
	  margin-top: 8px;
	  flex-basis: 100%; /* forces slider to take full row width */
	}

	.row > div {
      flex: 1; /* equal width for each child */
      min-width: 150px; /* ensures they don’t shrink too small */
    }
	
    .halfrow > div {
      flex: 1; /* equal width for each child */
      min-width: 150px; /* ensures they don’t shrink too small */
    }
    .halfrow > select {
      flex: 1; /* equal width for each child */
      min-width: 220px; /* ensures they don’t shrink too small */
    }

/* ===========================
   SLIDER COMPONENTS
   =========================== */
.slider-container {
  position: relative;
  width: 100%;
  height: 90px;
  margin: 0;
}
.track {
  position: absolute;
  top: 45px;
  width: 100%;
  height: var(--slider-thickness);
  background: #ddd;
  border-radius: 5px;
}
.range {
  position: absolute;
  top: 45px;
  height: var(--slider-thickness);
  border-radius: 5px;
}
.handle {
  position: absolute;
  top: 35px;
  width: var(--handle-width);
  height: var(--handle-height);
  background: #333;
  border-radius: 5px;
  cursor: pointer;
  transform: translateX(-50%);
}
.handle:focus {
  box-shadow: 0 0 5px #00f;
}
.label {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  font-size: var(--label-font);
  color: var(--text); /*#f00;*/
}

/* Hide the slider by default */
#toggle1Slider:not(:checked) ~ #currentSlider {
  display: none;
}
#toggle1Slider:checked ~ #currentSlider {
  display: block;
}

#toggle2Slider:not(:checked) ~ #slackSlider {
  display: none;
}
#toggle2Slider:checked ~ #slackSlider {
  display: block;
}

#toggle3Slider:not(:checked) ~ #timeSliderDiv {
  display: none;
}
#toggle3Slider:checked ~ #timeSliderDiv {
  display: block;
}

#toggle4Slider:not(:checked) ~ #timeRangeDiv {
  display: none;
}
#toggle4Slider:checked ~ #timeRangeDiv {
  display: block;
}

#timeRangeDiv {
    padding-top: 10px;
}
#dayTime {
	border: 0px;
}


/* Style the label like a button */
.slider-btn {
  display: inline-block;
  padding: 8px 14px;
  background-color: #007acc;   /* blue background */
  border: 1px solid #005a99;   /* darker border */
  border-radius: 4px;          /* rounded corners */
  cursor: pointer;
  /*color: #fff;                 /* white text * /
  font-size: 14px;
  font-weight: 600;*/
  text-align: center;
  transition: background-color 0.3s ease;
}

/* Hover effect */
.slider-btn:hover {
  background-color: #005a99;
}

/* Style the label like a button */
.toggle-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  /*color: #fff;*/
  transition: all 0.3s ease;
  border: 1px solid #002244; /* dark edge */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* raised look */
}
/*** Use toggle-btn as in/out button ***/
/* Default (unchecked = OUT) */
/* Only checkboxes with .toggle-control affect toggle-btn */
.toggle-control:not(:checked) + .toggle-btn {
  background: var(--btnOut);
  color: #fff;
}
.toggle-control:checked + .toggle-btn {
  background: var(--btnIn);
  color: #fff;
  box-shadow: inset 0 3px 5px rgba(0,0,0,1); /* pressed look */
}
/* Hover effect */
.toggle-control:hover + .toggle-btn{
  background-color: var(--btnHover);
}
/* Active/pressed (simulate button pushed in) */
.toggle-btn:active {
  background-color: var(--btnActive); /* dark teal */
  box-shadow: inset 0 3px 5px rgba(0,0,0,1); /* pressed look */
}

/* Time slider (native input range) */

/* Wrapper grows naturally */
.range-wrapper {
  position: relative;
  width: 100%;
  padding-top: 32px; /* space for bubble */
}

/* Bubble above the thumb */
#timeVal {
  position: absolute;
  top: 0;
  left: calc(var(--pos, 100%) - 12px);
  background: #fff;
  border: 1px solid #aaa;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none;
}

/* Slider track with gradient fill */
#timeSlider {
  width: 100%;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    blue 0 var(--val, 100%),
    #ddd var(--val, 100%) 100%
  );
  outline: none;
}

/* Thumb */
#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 24px;
  background: #333;
  border-radius: 4px;
  cursor: pointer;
}

#timeSlider::-moz-range-thumb {
  width: 14px;
  height: 24px;
  background: #333;
  border-radius: 4px;
  cursor: pointer;
}

.time-range {
  display: flex;
  gap: 1rem;
}
input[type="time"].disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* ===========================
   CALENDAR GRID
   =========================== */
#calendarWrapper {
  --scale: 1;
  position: relative;        /* anchors the custom .resizer */
  display: flex;
  flex-direction: row;
  overflow-x: auto;          /* horizontal scroll for months */
  overflow-y: auto;          /* allow vertical scroll if needed */
  resize: both;              /* native bottom-right handle */
  box-sizing: border-box;
  min-width: 600px;
  min-height: 2px;
  /*max-height: calc(var(--row-height) * 33);*/
} 
#monthsContainer {
  display: flex;             /* months side by side */
  flex-direction: row;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
} 
#calendarWrapper .resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(0,0,0,0.05);
}
#calendarWrapper .resizer:hover { background: rgba(0,0,0,0.18); }
#calendarWrapper .resizer:active { background: rgba(0,0,0,0.26); }
.month {
  display: grid;
  grid-template-rows: auto auto 1fr; /* label, site labels, days */
  border-right: 2px solid #ccc;
  /* min-width: calc(30px + var(--site-width, 200px) * var(--sites-per-month)); */
  position: relative; /* allow .resizer to anchor inside */
  padding: calc(1px * var(--scale));
}
.month .resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(0,0,0,0.05);
}
.month .resizer:hover { background: rgba(0,0,0,0.18); }
.month .resizer:active { background: rgba(0,0,0,0.26); }
.month-label {
  font-weight: bold;
  font-size: calc(14px * var(--scale));
  text-align: center;
  background: var(--hdrColor);
  padding: 4px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.site-label-row,
.day-row {
  display: grid;
  grid-template-columns: calc(var(--day-label-width) * var(--scale))
						 repeat(var(--sites-per-month), calc(var(--site-width, 200px) * var(--scale)));
}
.site-label-row {
  border-bottom: 1px solid #999;
  background: var(--hdrColor);
}
.month-spacer {
  border-right: 1px solid #ccc;
  display: flex; 
  font-size: calc(10px * var(--scale));
  background: var(--hdrColor);
  align-items: center;   /* vertical centering */
  justify-content: center; /* horizontal centering */
}
.site-label {
  position: relative;
  text-align: center;
  font-size: calc(12px * var(--scale));
  padding: 4px;
  background: #f0f0f0;
  border-right: 1px solid #ccc;
}
.day-label {
  flex: 0 0 auto;    /* natural width */
  text-align: right;
  padding-right: 10px;
  font-size: calc(12px * var(--scale));
  color: #555;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.site {
  flex: 1;          /* each site splits evenly */
  display: flex;    /* allow multiple slacks inside */
  flex-direction: column; /* stack multiple slacks vertically */
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.slack {
  display: flex;        /* lay out pre/main/post side by side */
  flex-direction: row;
  flex: 1;
  width: 100%;
  font-size: calc(14px * var(--scale));
  line-height: calc(14px * var(--scale));
  height: calc(20px * var(--scale));
  align-items: center;
  justify-content: center;
  transition: font-size 0.2s ease, line-height 0.2s ease, height 0.2s ease;
}
.slack.pre,
.slack.main,
.slack.post {
  flex: 1;              /* each block takes equal width */
  display: flex;
  /* Critical for flex items to shrink and allow overflow detection */
  min-width: 0;
  /* Optional: choose your wrapping policy */
  white-space: nowrap;     /* if you want single-line and detect horizontal overflow */
  text-align: center;
}

/* ===========================
   LEGEND
   =========================== */
#legendWrapper {
  display: block;
  font-size: 14px;
  max-width: 600px;   /* wider to fit 3 columns */
  padding: 8px;
  width: 100%;
}
.legend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three equal columns */
  gap: 12px;
}
.legend-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legend-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
}
.legend-item {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.legend-square {
  display: inline-block;
  width: 32px;
  height: 32px;
  font-size: 32px;   /* if using ■ character */
  line-height: 18px;
  text-align: center;
}

/* ===========================
   SETTINGS DIALOG
   =========================== */

/* Grid wrapper for the three columns */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(175px, 1fr));
  flex-wrap: wrap; /* allows wrapping on small screens */
  gap: 8px;
  padding: 16px;
}
/* Each column */
.settings-col {
  min-width: 100px;         /* minimum width before wrapping */
  display: grid;
  grid-template-columns: 2fr 1fr; /* label + input */
  gap: 8px 8px;
  align-items: center;
  box-sizing: border-box;
}
/* Headings inside each column */
.settings-col h2 {
  grid-column: 1 / -1;      /* span both columns */
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px 0;
  text-align: center;
}
/* Labels (plain divs) */
.settings-col div {
  font-size: 14px;
  text-align: right;
}
/* Inputs */
.settings-col input[type="checkbox"] {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* settings-actions */
.settings-actions {
  padding: 8px 16px;
  display: flex;
  gap: 16px; /* consistent spacing between all buttons */
}
/* Reset buttons */
#resetSettings{
  align-self: flex-start;
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
}
#resetSettings:hover{
  background: #e0e0e0;
}

.tide-tooltip {
  font-size: 12px;
  display: grid;
  gap: 0px;
  padding: 4px 6px;
  background: rgba(111,222,333,0.75);
}
.tide-tooltip .hdrrow {
  display: grid;
  grid-template-columns: auto 1fr;
}
.tide-tooltip .myrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.tide-tooltip .title {
  font-weight: 600;
  text-align: right;
  font-weight: bold;
}
.tide-tooltip .value {
  text-align: right;
}


	/* Base: small screens (mobile-first) */
	.grid {
	  display: flex;
	  flex-direction: column; /* stack everything */
	  gap: 8px;
	  margin: 8px 8px 8px 8px;
	}
/* ===========================
   RESPONSIVE MEDIA QUERIES
   =========================== */

/* Tablet screens up to 768px */
@media (max-width: 768px) {
  :root {
    --day-label-width: 20px;
	--handle-width: 10px;
    --handle-height: 25px;
    --label-font: 10px;
  }
  body {
    padding: 0.5rem;
    font-size: 14px;
  }
  #calendarWrapper {
    min-width: 100%;
    height: auto;
    min-height: 300px;
  }
  .month-label {
    padding: 2px;
  }
  .site-label {
    padding: 2px;
  }
  .day-label {
    padding-right: 2px;
  }
  .site-label-row,
  .day-row {
    grid-template-columns: 20px repeat(var(--sites-per-month), minmax(50px, 1fr));
  }
  .label {
    padding: 1px 3px;
  }
  /* Responsive: stack columns vertically on narrow screens */
  .settings-grid {
    flex-direction: column;
  }
  .settings-col {
    min-width: 100%;
  }
}

/* Medium+ screens: site selection + map side by side, calendar full width below */
@media (min-width: 768px) {
  h1{
      font-size:24px;
	  margin:10;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* sites wider, map narrower */
    grid-template-rows: auto auto;  /* first row for sites+map, second row for calendar */
    gap: 16px;
	margin: 16px 16px 16px 16px;
  }
  .sitePanel {
    grid-column: 1; /* first column */
    grid-row: 1;    /* first row */
  }
  .mapPanel {
    grid-column: 2; /* second column */
    grid-row: 1;    /* first row */
  }
  #map {
    height: 90%;
  }
  .calendarPanel {
    grid-column: 1 / span 2; /* span across both columns */
    grid-row: 2;             /* second row */
  }
}

@media (max-width: 590px) {
  :root {
    --day-label-width: 19px;
  }
  .settings-grid {
	grid-template-columns: 1fr; /* one column, full width */
	justify-items: center;      /* center each column horizontally */
  }
  .settings-col {
    width: auto;                    /* shrink to fit content */
    max-width: 400px;               /* cap width so they look like cards */
    padding: 8px;                   /* optional: add padding for card feel */
    border: 1px solid #ccc;         /* optional: card border */
    border-radius: 6px;             /* optional: rounded corners */
  }
  /* Labels (plain divs) */
  .settings-col div {
    font-size: 14px;
    text-align: center;
  }
  /* Inputs */
  .settings-col input[type="checkbox"] {
    width: 50%;
	box-sizing: border-box;
	padding: 4px 6px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
  }
  .legend-grid {
    font-size: 12px;
  }
  .legend-col {
    width: auto;                    /* shrink to fit */
    max-width: 400px;               /* compact card size */
    padding: 8px;
  }
}

/* Very small screens (phones ≤ 480px) */
@media (max-width: 480px) {
  :root {
    --day-label-width: 18px;
	--handle-width: 8px;
    --handle-height: 20px;
    --label-font: 9px;
  }
  body {
    padding: 0.25rem;
    font-size: 13px;
  }

  #calendarWrapper {
    min-width: 100%;
    height: auto;
    min-height: 250px;
    flex-direction: column; /* stack months vertically */
  }
  .month-label {
    padding: 2px;
  }
  .site-label {
    padding: 1px;
  }
  .day-label {
    padding-right: 2px;
  }
  .site-label-row,
  .day-row {
    grid-template-columns: 18px repeat(var(--sites-per-month), minmax(80px, 1fr));
  }
  .label {
    padding: 1px 2px;
  }
  .legend-col {
    width: auto;
    max-width: 400px;
    padding: 8px;
    background: #fff;
  }
}