/* Basic CSS for the progress-bar */
#progress-bar {
  position: fixed; /* Fix it to the top of the page */
  top: 0px; /* Place it at the very top */
  left: 0%; /* Start at the left edge */
  width: 0%; /* Start at 0% width */
  height: 4px; /* Thin progress bar */
  background-color: #ff4500; /* Change to bright red-orange for better contrast */
  transition: width 0.4s, background-color 0.8s; /* Smooth width transition */
  animation: pulse 1.2s ease-in-out infinite; /* Optional pulsing animation */
  z-index: 99999; /* Make sure it's on top of all other content */
  visibility: visible; /* Ensure it's visible */
}

/* Animation for pulsing effect to make the spinner vivid */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* Basic CSS for the spinning ball */
.spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1.5s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* Ensure it's on top of other elements */

  /* Adding WebKit prefix for Chrome */
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
}

/* Animation for spinning */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== MenuContainer ===== */
.MenuContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: linear-gradient(180deg, #c9f2c7 0%, #bdf0ba 100%);
  border-top: 1px solid rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  font-family: "Segoe UI", "Inter", "Poppins", Arial, sans-serif;
}

.InputMenu {
  width: 50%;
  padding: 18px 28px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  border-right: 1px solid rgba(255,255,255,0.45);
}

.InputMenu-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  width: 100%;
}

.field-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.field-group label {
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  color: #355f73;
  letter-spacing: 0.2px;
}

.MenuContainer .field-group-date {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-group-date input {
  width: 165px;
}

.field-group-select {
  flex: 1 1 0;
}

.field-group-select select {
  width: 100%;
  min-width: 0;
}

#sector,
#industry {
  max-width: 320px;
}

.PlotMenu {
  width: 50%;
  padding: 18px 28px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
}

.PlotMenu-2D,
.PlotMenu-3D {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.PlotMenu-2D {
  justify-content: center;
}

.PlotMenu-3D {
  justify-content: flex-end;
}

.plot-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,0.82),
    rgba(255,255,255,0)
  );
  margin: 2px 0 4px;
}

.PlotMenu label {
  font-size: 18px;
  font-weight: 600;
  color: #355f73;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ===== Native select styling ===== */
.InputMenu select,
.PlotMenu select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: "Segoe UI", "Inter", "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #4f6278;
  background-color: #dbe7fb;
  border: 1px solid #b9c9e8;
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  height: 38px;
  line-height: 1.2;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  background-image:
    linear-gradient(45deg, transparent 50%, #7087a4 50%),
    linear-gradient(135deg, #7087a4 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#windowSize3D {
  min-width: 78px;
}

#sector:invalid,
#industry:invalid {
  color: #8fa1b3;
}

#sector option,
#industry option,
#windowSize3D option {
  color: #172432;
}

#sector option[disabled],
#industry option[disabled] {
  color: #8fa1b3;
}

/* ===== Buttons ===== */
.plot-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid #b9c9e8;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #dde9fb 100%);
  color: #5f6f86;
  font-family: "Segoe UI", "Inter", "Poppins", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.plot-btn:hover {
  background-color: #edf4ff;
  border-color: #98b4e3;
}

.plot-btn:focus,
.InputMenu select:focus,
.PlotMenu select:focus {
  outline: none;
  border-color: #7aa8e8;
  box-shadow: 0 0 0 3px rgba(122,168,232,0.18);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.InputMenu select:hover,
.PlotMenu select:hover {
  background-color: #edf4ff;
  border-color: #98b4e3;
}

/* ===== Flatpickr visible input inherits original input classes when altInput is on.
   We add a custom class too for exact control. ===== */

.MenuContainer .field-group-date input.menu-date-input,
.MenuContainer .flatpickr-alt-input.menu-date-input {
  width: 165px !important;
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px !important;

  border-radius: 12px !important;
  border: 1px solid #b9c9e8 !important;
  background: #dbe7fb !important;
  color: #4f6278 !important;

  font-family: "Segoe UI", "Inter", "Poppins", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;

  box-sizing: border-box !important;
  display: inline-block !important;
}

.flatpickr-input.menu-date-input:hover,
.flatpickr-alt-input.menu-date-input:hover {
  background-color: #edf4ff;
  border-color: #98b4e3;
}

.flatpickr-input.menu-date-input:focus,
.flatpickr-alt-input.menu-date-input:focus {
  outline: none;
  border-color: #7aa8e8;
  box-shadow: 0 0 0 3px rgba(122,168,232,0.18);
}

/* ===== Flatpickr calendar theme ===== */
.flatpickr-calendar {
  border: 1px solid #cfe0f5;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(23, 36, 50, 0.16);
  font-family: "Segoe UI", "Inter", "Poppins", Arial, sans-serif;
  overflow: hidden;
}

.flatpickr-months {
  background: linear-gradient(90deg, #00d84f 0%, #6e3aa8 100%);
}

.flatpickr-months .flatpickr-month {
  color: #ffffff;
  fill: #ffffff;
  height: 54px;
}

.flatpickr-current-month {
  padding-top: 8px;
  font-size: 18px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #ffffff;
  font-weight: 700;
}

.flatpickr-weekdays {
  background: #eef6ff;
}

span.flatpickr-weekday {
  color: #5d728c;
  font-weight: 700;
  font-size: 12px;
}

.flatpickr-day {
  border-radius: 10px;
  color: #2f4458;
  font-weight: 500;
}

.flatpickr-day:hover {
  background: #e8f1ff;
  border-color: #e8f1ff;
}

.flatpickr-day.today {
  border-color: #6aa3ff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(180deg, #72b5f2 0%, #4f9ee8 100%);
  border-color: #4f9ee8;
  color: #ffffff;
}

.flatpickr-day.inRange {
  background: rgba(114, 181, 242, 0.18);
  border-color: rgba(114, 181, 242, 0.18);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #bcc8d6;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #d9ecff;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .MenuContainer {
    flex-direction: column;
  }

  .InputMenu,
  .PlotMenu {
    width: 100%;
    border-right: none;
  }

  .PlotMenu {
    align-items: flex-start;
    border-top: 1px solid rgba(255,255,255,0.45);
  }

  .PlotMenu-2D,
  .PlotMenu-3D {
    justify-content: flex-start;
  }

  .InputMenu-row {
    flex-wrap: wrap;
  }

  .field-group-select {
    flex: 1 1 100%;
  }

  #sector,
  #industry {
    max-width: none;
  }
}