/* ===== Global background to avoid white stripes below tall graphs ===== */
html, body {
  height: 100%;
  background-color: #0a1424;  /* match colors['background'] */
  color: #f2f5ff;
  overflow-x: hidden;          /* prevent sideways scroll on mobile */
}

/* ===== Base contrast ===== */
.container, .card, .offcanvas, .modal-content {
  color: #f2f5ff;
}
.form-label, .input-group-text, .nav-link, .text-secondary {
  color: #e8eeff !important;
}

/* ===== Inputs and dropdowns (dcc.Dropdown legacy React-Select v1/v2) ===== */
.form-control {
  background-color: rgba(255,255,255,0.07) !important;
  color: #f6f8ff !important;
  border-color: rgba(255,255,255,0.28) !important;
}
.form-control::placeholder {
  color: #c7d2e8 !important;
  opacity: 0.9;
}
.form-control:disabled, .form-control[readonly] {
  background-color: rgba(255,255,255,0.06) !important;
  color: #c9d6ff !important;
}

/* Dropdown control box */
.Select, .Select-control {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #f6f8ff !important;
}

/* Selected value & placeholder (fixes "black text" issue) */
.Select--single > .Select-control .Select-value,
.Select--single > .Select-control .Select-placeholder {
  color: #f6f8ff !important;
  background-color: transparent !important;
}

/* The actual selected label span */
.Select-value-label {
  color: #f6f8ff !important;
}

/* Input text when typing into dropdown */
.Select-input > input {
  color: #f6f8ff !important;
}

/* Dropdown arrow & zone */
.Select-arrow-zone, .Select-arrow {
  color: #f6f8ff !important;
  fill: #f6f8ff !important;
}

/* Dropdown menu and options */
.Select-menu-outer {
  background-color: #142445 !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
}
.VirtualizedSelectOption {
  color: #ffffff !important;
}
.VirtualizedSelectFocusedOption {
  background-color: rgba(95,179,255,0.25) !important;
  color: #ffffff !important;
}

/* Unit chips (mm, µm, etc.) */
.input-group-text {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #dbe6ff !important;
}

/* Tabs contrast */
.nav-tabs .nav-link {
  border: none;
  color: #c7d2e8 !important;
}
.nav-tabs .nav-link.active {
  color: #ffffff !important;
  background-color: transparent !important;
  border-bottom: 2px solid #5fb3ff !important;
}

/* Radio stack tightness */
.radio-stack .form-check { margin-bottom: 0.25rem; }

/* Graph containers: responsive + no horizontal overflow */
.dash-graph, .js-plotly-plot, .plotly, .svg-container {
  max-width: 100% !important;
}

/* Cards padding on mobile */
@media (max-width: 576px) {
  .card-body { padding: 0.9rem 0.9rem; }
}

/* Equal height cards on desktop */
.equal-row > [class*="col-"] > .card {
  height: 100%;
  display: flex;
}
.equal-row > [class*="col-"] > .card > .card-body {
  display: flex;
  flex-direction: column;
}

/* Navbar logo */
#company_logo { object-fit: contain; }

/* Alerts legibility on dark */
.alert-info {
  background-color: rgba(95,179,255,0.12);
  border-color: rgba(95,179,255,0.35);
  color: #d8ecff;
}
.alert-secondary {
  background-color: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  color: #e9edff;
}