html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    background-color: rgb(209, 209, 209);
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* This will hide the horizontal scrollbar */
    overflow-y: hidden; /* This will hide the vertical scrollbar */
}

/* File controls styling */
#file-controls {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#file-controls h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

#file-controls label {
    font-weight: bold;
    margin-right: 5px;
    color: #555;
}

#file-controls input[type="file"] {
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

#load-files-btn {
    background-color: #007cba;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

#load-files-btn:hover:not(:disabled) {
    background-color: #005a8b;
}

#load-files-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#file-status {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}
 

 
.axis path{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
/* .grid-line {
	stroke: rgb(206, 206, 206);
  } */
.bar-flight {
	fill: #33b5e5;
}
 
.bar-PCM {
	fill: #000000;
}

/* Color variables. Defaults match the 5-band gradient; colorSettings.js
   can override these on :root for custom palettes or flat mode.
   --line-Nsigma is intentionally a separate variable from --color-wN so
   the boundary-line stroke (which often needs to match the band fill in
   flat mode) can change without affecting the .bar-PHM-wN fills. */
:root {
  --color-ok:    #18b700;
  --color-w3:    #9ec900;
  --color-w2:    #ffd400;
  --color-w1:    #ff8a00;
  --color-after: #ff0000;
  --color-mean:  #ff0000;
  --color-ok-band: #c8e6b8;  /* pastel green: "good opportunity" gap band */
  --color-std3:  #d8ea90;
  --color-std2:  #ffeb88;
  --color-std1:  #ffc080;
  --line-3sigma: #9ec900;
  --line-2sigma: #ffd400;
  --line-1sigma: #ff8a00;
  /* Upper σ area + after-failure rects/pills/lines. Gradient: 3 escalating
     reds; flat mode collapses all three to one red (set in colorSettings.js). */
  --color-up1:  #ff8a80;
  --color-up2:  #e53935;
  --color-up3:  #b71c1c;
  --color-aft1: #ff8a80;
  --color-aft2: #e53935;
  --color-aft3: #b71c1c;
  --line-aft1:  #ff8a80;
  --line-aft2:  #e53935;
  --line-aft3:  #b71c1c;
}
.bar-PHM {
	fill: var(--color-ok);
}
.bar-PHM-w3 {
  fill: var(--color-w3);
}
.bar-PHM-w2 {
  fill: var(--color-w2);
}
.bar-PHM-w1 {
  fill: var(--color-w1);
}
.bar-PHM-after {
  fill: var(--color-after);
}
.bar-PHM-inf {
  fill: var(--color-after);
}
.bar-SlotFlexible {
	fill: #ffffff00;
  stroke: #878787;
  stroke-dasharray: 3, 5;
  stroke-width: 1px;
}
.bar-SlotFlexibleHold {
	fill: #aeaeae;
  stroke: #878787;
  stroke-dasharray: 3, 5;
  stroke-width: 1px;
}
.bar-SlotFlexibleUnhold {
	fill: #ffffff00;
  stroke: #878787;
  stroke-dasharray: 3, 5;
  stroke-width: 0px;
}
.bar-SlotFixed {
	fill: #e2e2e2;
  stroke: #878787;
  stroke-width: 1px;
}
.bar-route {
	fill: #b3e5fc;
  stroke: #0066cc;
  stroke-width: 1.5px;
  opacity: 0.85;
}
/* Visual marker for a route/envelope reassigned to a different aircraft
   via the vertical drag in normal mode (routeDrag.js). Persists across
   reloads because the underlying Route XML carries an original_aircraft
   attribute that the loader translates back into a moved=true flag. */
.bar-route.moved {
  fill: #1976d2;
  stroke: #0d47a1;
}
.bar-route-envelope {
  fill: #33b5e5;
  stroke: #0066cc;
  stroke-width: 1.5px;
  opacity: 0.7;
}
.bar-route-envelope.moved {
  fill: #1976d2;
  stroke: #0d47a1;
  opacity: 0.85;
}
/* Tentative = flights more than 3 days after the current simulation
   day. Rendered in a very light blue so the user can tell they're not
   yet "fixed" but still see the upcoming pipeline. Declared AFTER the
   .moved rules so tentative wins visually when both flags apply. */
.bar-route.tentative {
  fill: #c8e6f7;
  stroke: #7fb8d9;
  stroke-width: 1px;
  opacity: 0.9;
}
.bar-route-envelope.tentative {
  fill: #93c6e2;
  stroke: #4a8fbf;
  stroke-width: 1px;
  opacity: 0.75;
}
.error {
  stroke: #ff0000;
  stroke-width: 1px;
}

.drag-over {
    stroke: #1900ff;
    stroke-width: 1px;
}
#sticky-header {
  position: sticky;
  top: 0;
  background-color: rgb(209, 209, 209); /* Add a background color to prevent content from showing through */
  z-index: 100; /* Optional: Add a z-index to ensure the header is above all other content */
}

#chart-container {
  flex-grow: 1; /* This will allow the chart container to expand */
    overflow-y: auto;  /* This will create a vertical scrollbar if the SVG is taller than the div */
    bottom: 50px; /* This will leave space for the x-axis container */
    width: 100%; /* This will make the chart container span the full width of the viewport */
    overflow: auto; /* This will add a scrollbar if the content is taller than the div */
  }

  body {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
.chart {
   /*width: 2000px;   Set to a fixed width larger than the viewport width */
    overflow-x: scroll;  /* Enable horizontal scrolling */
}
#x-axis-container { 
    position: relative; /* !!! Must be relative to the chart container */
    height: 50px; /* This will reserve a height of 50px for the x-axis container */
    z-index: 100; /* Optional: Add a z-index to ensure the header is above all other content */
}
#bottom-sheet {
  position: fixed;
  bottom: -100%; /* Start off-screen */
  left: 0;
  right: 0;
  background-color: white;
  transition: bottom 0.3s ease-in-out;
  z-index: 1000; /* Ensure it's above other content */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
}

#bottom-sheet.open {
  bottom: 0; /* Slide into view */
}
.tooltip {
  position: absolute;
  text-align: center;
  width: 100px;
  height: auto;
  padding: 5px;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}
.tooltip_task {
  position: absolute;
  background-color: white;
  border: 2px solid black;
  padding: 10px;
  font-size: 12px;
  max-width: 300px;
  z-index: 10;
  pointer-events: none;
}
.buttons-container {
  display: flex; /* Use Flexbox */
  align-items: center; /* Align items vertically in the center */
  gap: 10px; /* Optional: Adds some space between the items */
}

.mean {
  stroke: #000;              /* central predicted-failure line — black, solid, prominent */
  stroke-width: 2;
}
/* Styles for STD level paths — pastels driven by colorSettings.js
   (derived as lighter versions of --color-w3 / w2 / w1 by default). */
.std3 {
  fill: var(--color-std3);
  opacity: 1;
}
.meanLine3 {
  stroke: var(--line-3sigma);   /* saturated, contrasts with pastel std3 rect */
  stroke-width: 1.5;
}
.std2 {
  fill: var(--color-std2);
  opacity: 1;
}
.meanLine2 {
  stroke: var(--line-2sigma);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}
.std1 {
  fill: var(--color-std1);
  opacity: 1;
}

.meanLine1 {
  stroke: var(--line-1sigma);
  stroke-width: 1.5;
  stroke-dasharray: 4 2;
}

/* After-failure σ boundary lines (right of the black line): escalating red
   tones, dashed — mirroring the left meanLine* but on the overdue side, and
   matching the aft1/2/3 band fills. aft1 = just past → aft3 = well past. */
.aftLine1 { stroke: var(--line-aft1); stroke-width: 1.5; stroke-dasharray: 4 2; }
.aftLine2 { stroke: var(--line-aft2); stroke-width: 1.5; stroke-dasharray: 4 2; }
.aftLine3 { stroke: var(--line-aft3); stroke-width: 1.5; stroke-dasharray: 4 2; }

/* Flight-aligned projection pills (curve panel "by flights" mode).
   Each upcoming flight gets one pill coloured by which σ band its
   cumulative-FH endpoint lands in. Colours inherit the same CSS
   variables the existing σ rectangles use, so the colour-settings
   panel and flat mode Just Work. */
.curve-pill {
  opacity: 0.95;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 0.5;
}
.curve-pill.ok    { fill: var(--color-ok-band); }  /* good opportunity: ≤3 avg-days before −3σ */
.curve-pill.std3  { fill: var(--color-std3); }
.curve-pill.std2  { fill: var(--color-std2); }
.curve-pill.std1  { fill: var(--color-std1); }
.curve-pill.after { fill: var(--color-after); }

/* AFTER the predicted-failure line: escalating reds (overdue), NOT a mirror of
   the pre-failure warning ramp. aft1 = just past → aft3 = well past. Shared by
   the "by time" σ rectangles and the "by flights" gap pills. */
.curve-rect.aft1, .curve-pill.aft1 { fill: var(--color-aft1); }  /* just past failure */
.curve-rect.aft2, .curve-pill.aft2 { fill: var(--color-aft2); }  /* past failure       */
.curve-rect.aft3, .curve-pill.aft3 { fill: var(--color-aft3); }  /* well past failure  */

/* UPPER half of the curve's σ envelope: three escalating red bands (light near
   the mean → dark at +3σ). The lower half keeps the green/yellow/orange σ
   bands. Slightly translucent so the mean line + dots stay visible. */
.curve-area-up1 { fill: var(--color-up1); opacity: 0.85; }
.curve-area-up2 { fill: var(--color-up2); opacity: 0.85; }
.curve-area-up3 { fill: var(--color-up3); opacity: 0.85; }

.curve-background {
  fill: #acacac; /* Orange Red color for 1σ */
  opacity: 1;  /* Most transparent */
}

/* Bottom zoom bar — switches the chart's visible time window. */
#zoom-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: #efefef;
  border-top: 1px solid #ccc;
  font-size: 13px;
  position: sticky;
  bottom: 0;
  z-index: 50;
}
#zoom-bar label {
  cursor: pointer;
}

/* Color settings panel — toggled from #openColorSettingsBtn. */
#openColorSettingsBtn {
  cursor: pointer;
}
#colorSettingsBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 998;
}
#colorSettingsPanel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 18px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  z-index: 999;
  min-width: 360px;
  font-size: 13px;
}
#colorSettingsPanel input[type="color"] {
  width: 50px;
  height: 28px;
  border: 1px solid #999;
  padding: 0;
  background: none;
  cursor: pointer;
}
#colorSettingsPanel button {
  padding: 6px 14px;
  cursor: pointer;
}
/* Each picker row is grid-transparent (display:contents) so label+input
   stay aligned in the parent grid, but the row can be hidden as a unit. */
#colorPickers .picker-row { display: contents; }
#colorPickers .picker-row.hidden { display: none; }
.hidden {
    display: none;
}

/* Submit-plan: a task overlapping a flight blinks slowly until the planner
   moves it to a free slot. */
@keyframes sp-slow-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}
rect.task-overlap-blink {
  animation: sp-slow-blink 1.4s ease-in-out infinite;
  stroke: #ff0000;
  stroke-width: 2px;
}

/* Submit-plan: operations-planner verification result modal. */
#submitPlanBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 998;
}
#submitPlanPanel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 18px 20px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  z-index: 999;
  min-width: 360px;
  max-width: 480px;
  font-size: 13px;
}
#submitPlanPanel button { padding: 6px 14px; cursor: pointer; }
#submitPlanPanel .sp-row {
  padding: 8px 0;
  border-top: 1px solid #eee;
}
#submitPlanPanel .sp-row:first-of-type { border-top: none; }
#submitPlanPanel .sp-leg { font-weight: 600; margin-bottom: 4px; }
#submitPlanPanel .sp-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
}
#submitPlanPanel .sp-badge.sp-ok { background: #18b700; }
#submitPlanPanel .sp-badge.sp-no { background: #d32f2f; }
#submitPlanPanel .sp-reason { margin-top: 4px; color: #777; font-style: italic; }

/* Agent proposal: ghost rects mark each moved task's OLD position, with a
   dashed connector to the new position. Non-interactive overlay. */
.proposal-ghost-rect {
    fill: #888;
    fill-opacity: 0.18;
    stroke: #555;
    stroke-width: 1.2;
    stroke-dasharray: 4 3;
    pointer-events: none;
}
.proposal-ghost-link {
    stroke: #d9534f;
    stroke-width: 1.2;
    stroke-dasharray: 3 3;
    opacity: 0.7;
    pointer-events: none;
}