html, body { height: 100%; }
:root {
  --panel-height: 60vh;
  --panel-min-height: 360px;
  --map-stack-offset: 21rem;
}

.demo-action-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.demo-action-row .demo-dropdown {
  flex: 1 1 0;
  min-width: 0;
}
.demo-action-row .btn {
  width: 100%;
  min-height: 38px;
}
.demo-action-row > .btn {
  flex: 1 1 0;
}
.demo-preset-menu {
  min-width: 21rem;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: calc(7 * 4.35rem + 0.8rem);
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid #d7dde5;
  border-radius: 0.45rem;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  z-index: 2050;
}
.demo-preset-menu.show {
  display: block;
  margin-top: 0.35rem;
}
.demo-preset-menu .dropdown-item {
  white-space: normal;
  border-radius: 0.35rem;
  height: 4.35rem;
  padding: 0.5rem 0.65rem;
  line-height: 1.25;
  overflow: hidden;
}
.demo-preset-menu.demo-preset-menu-compact {
  max-height: calc(7 * 2.7rem + 0.8rem);
}
.demo-preset-menu.demo-preset-menu-compact .dropdown-item {
  height: 2.7rem;
  display: flex;
  align-items: center;
}
.demo-preset-menu .dropdown-item:hover,
.demo-preset-menu .dropdown-item:focus {
  background: #edf4ff;
  color: #0f172a;
}
.demo-preset-menu .dropdown-item span {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-preset-menu .dropdown-item small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.15rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.threshold-profile-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.4rem;
  border: 1px solid #d7dde5;
  border-radius: 0.45rem;
  background: #f8fafc;
}
.threshold-profile-label {
  margin: 0;
  font-weight: 600;
  color: #334155;
}
.threshold-profile-select {
  width: auto;
  min-width: 11rem;
}
.selection-mode-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
}
.guidance-download-btn {
  white-space: nowrap;
}
.demo-only-mode .demo-locked-control,
.demo-only-mode input.demo-locked-control,
.demo-only-mode select.demo-locked-control,
.demo-only-mode button.demo-locked-control {
  cursor: not-allowed;
}
.demo-only-mode input.demo-locked-control,
.demo-only-mode select.demo-locked-control {
  background-color: #f8fafc;
  color: #475569;
  opacity: 1;
}
.demo-only-mode .custom-control-input:disabled ~ .custom-control-label,
.demo-only-mode button.demo-locked-control {
  opacity: 0.62;
}
#filtersForm.street-mode #timeApplyBlock .time-field-col {
  flex: 0 0 50%;
  max-width: 50%;
}
#filtersForm.street-mode .filter-actions-col {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 0.55rem;
}
.assessment-actions-col {
  margin-left: auto;
}
.assessment-actions-col .demo-action-row {
  margin-left: auto;
  max-width: 28rem;
}
#filtersForm.street-mode .assessment-time-field-col {
  flex: 0 0 25%;
  max-width: 25%;
}
#filtersForm.street-mode .street-history-select {
  min-height: 190px;
}
@media (max-width: 575.98px) {
  .demo-action-row {
    flex-direction: column;
  }
  .demo-preset-menu {
    min-width: 100%;
  }
  .threshold-profile-control {
    align-items: stretch;
    flex-direction: column;
  }
  .threshold-profile-select {
    width: 100%;
  }
  .guidance-download-btn {
    margin-top: 0.5rem;
    width: 100%;
  }
  #filtersForm.street-mode #timeApplyBlock .time-field-col,
  #filtersForm.street-mode .assessment-time-field-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .assessment-actions-col .demo-action-row {
    max-width: none;
  }
}

/* Map heights */
.map-shell {
  height: var(--panel-height);
  min-height: var(--panel-min-height);
}
.map-shell #map {
  height: 100%;
  width: 100%;
}
.map-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: calc(var(--panel-height) + var(--map-stack-offset));
  min-height: calc(var(--panel-min-height) + var(--map-stack-offset));
}
.map-stack .card {
  flex: 1 1 0;
  min-height: 0;
}
.map-stack .card-body {
  height: 100%;
}
#mapA, #mapB {
  height: 100%;
  width: 100%;
}
.tool-panel { height: var(--panel-height); overflow: auto; }
.assessment-layout .tool-panel {
  height: 52vh;
  min-height: 320px;
}
.assessment-layout .map-stack {
  height: calc(52vh + 18rem);
  min-height: calc(320px + 18rem);
}
.street-history-select {
  height: 100%;
  min-height: 120px;
  font-size: 0.9rem;
}

.layer-option .custom-control-label {
  display: flex;
  align-items: center;
}
.layer-option-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.layer-main-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  flex: 1 1 auto;
}
.layer-level-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  margin-left: auto;
  justify-content: flex-end;
  text-align: right;
}
.layer-level-group .custom-control {
  min-width: 70px;
}
.level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, auto));
  column-gap: 0.6rem;
  justify-items: end;
}
.level-grid .custom-control {
  min-width: 0;
}
.level-spacer {
  width: 100%;
  min-height: 1px;
}
.level-option .custom-control-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.checkbox-right .custom-control-label {
  padding-left: 0;
  padding-right: 1.5rem;
}
.checkbox-right .custom-control-label::before,
.checkbox-right .custom-control-label::after {
  left: auto;
  right: 0;
}
.level-icon {
  transform: scale(0.8);
}
.level-icon.mk-square {
  width: 12px;
  height: 12px;
}
.level-icon.mk-circle {
  width: 12px;
  height: 12px;
  border-width: 1px;
  box-shadow: none;
}
.layer-single-toggle {
  display: flex;
  margin-left: auto;
  justify-content: flex-end;
}
.layer-single-toggle .layer-symbol {
  margin: 0;
}
.layer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 0.4rem;
  margin-right: 0.35rem;
}
.layer-symbol img {
  max-width: 18px;
  max-height: 18px;
}
.layer-symbol .mk {
  transform: scale(0.85);
}

/* Layer layout: left info + right thresholds */
.layer-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.layer-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.layer-info {
  flex: 1 1 55%;
  min-width: 220px;
}
.layer-title {
  font-weight: 600;
}
.layer-desc {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #6c757d;
}
.layer-controls {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.level-row {
  display: grid;
  grid-template-columns: 110px 24px 90px auto;
  align-items: center;
  column-gap: 0.5rem;
  justify-items: start;
}
.level-toggle {
  margin: 0;
}
.level-toggle .custom-control-label {
  margin: 0;
}
.threshold-input {
  width: 90px;
}
.threshold-input-placeholder {
  width: 90px;
  height: 1px;
}
.threshold-unit {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: left;
}
@media (max-width: 992px) {
  .layer-item {
    flex-direction: column;
  }
  .layer-controls {
    width: 100%;
  }
  .level-row {
    grid-template-columns: auto 22px 90px auto;
  }
}

/* Shape markers: keep explicit size so they render */
.mk { position: relative; display: inline-block; }
.mk-circle {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #111827; box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.mk-square {
  width: 14px; height: 14px; background:#333;
  border: 2px solid #111827; box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.mk-diamond {
  width: 12px; height: 12px; background:#333;
  transform: rotate(45deg);
  border: 2px solid #111827; box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.mk-tri-up, .mk-tri-down {
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  filter: drop-shadow(0 0 0.9px #111827) drop-shadow(0 0 0.9px #111827);
}
.mk-tri-up   { border-bottom:14px solid #333; }
.mk-tri-down { border-top:   14px solid #333; }

/* Ensure Leaflet div icon container doesn't mask shapes */
.leaflet-div-icon { background: transparent; border: none; }
.street-marker-wrapper {
  background: transparent;
  border: none;
}
.street-marker-pin {
  position: relative;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  background: #2563eb;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.32);
}
.street-marker-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Simple half-gauge visuals */
.gauge { display: inline-block; width: 100%; max-width: 320px; }
.gauge-svg { width: 100%; height: auto; }
#crashReport {
  font-size: 1.06rem;
}
.gauge-label {
  font-weight: 700;
  margin-top: .25rem;
  font-size: 1.12rem;
  color: #1f2937;
}
.gauge-value { font-size: 1.55rem; font-weight: 700; color: #374151; }
.summary-download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.assessment-gauge-cluster {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(250px, 320px) minmax(220px, 280px);
  grid-template-areas:
    "smf cmf crash"
    "adjusted-smf adjusted-cmf crash";
  justify-content: center;
  align-items: start;
  column-gap: 2.5rem;
  row-gap: 0.45rem;
  margin: 0.45rem auto 0.35rem;
  padding: 0.1rem 0 0.7rem;
}
.assessment-gauge-cell {
  min-width: 0;
}
.assessment-gauge-smf {
  grid-area: smf;
}
.assessment-gauge-cmf {
  grid-area: cmf;
}
.assessment-gauge-adjusted-smf {
  grid-area: adjusted-smf;
}
.assessment-gauge-adjusted-cmf {
  grid-area: adjusted-cmf;
}
.half-gauge {
  position: relative;
  width: 220px;
  height: 132px;
  margin: 0.45rem auto 0;
}
.half-gauge-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  height: 132px;
  overflow: visible;
}
.half-gauge-track {
  fill: none;
  stroke-width: 18;
  stroke-linecap: round;
}
.half-gauge-marks line {
  stroke: rgba(17, 24, 39, 0.72);
  stroke-linecap: round;
}
.half-gauge-marks line.major {
  stroke-width: 2.4;
  opacity: 0.9;
}
.half-gauge-marks line.minor {
  stroke-width: 1.35;
  opacity: 0.55;
}
.half-gauge-labels text {
  fill: #4b5563;
  font-size: 13px;
  font-weight: 700;
  dominant-baseline: middle;
  text-anchor: middle;
}
.half-gauge-needle {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 4px;
  height: 80px;
  background: #111827;
  border-radius: 999px;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--needle-angle, -90deg));
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.half-gauge-center {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.25);
}
.smf-gauge .half-gauge-needle,
.smf-gauge .half-gauge-center {
  background: #b91c1c;
}
.cmf-gauge .half-gauge-needle,
.cmf-gauge .half-gauge-center {
  background: #1d4ed8;
}
.adjusted-smf-gauge .half-gauge-needle,
.adjusted-smf-gauge .half-gauge-center {
  background: #15803d;
}
.adjusted-cmf-gauge .half-gauge-needle,
.adjusted-cmf-gauge .half-gauge-center {
  background: #b45309;
}
.smf-value {
  color: #b91c1c;
}
.cmf-value {
  color: #1d4ed8;
}
.adjusted-smf-value {
  color: #15803d;
}
.adjusted-cmf-value {
  color: #b45309;
}
.assessment-crash-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.assessment-crash-side {
  grid-area: crash;
  align-self: center;
  justify-self: center;
  min-width: 240px;
  padding: 0.3rem 0.75rem 0.4rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.assessment-crash-side .gauge-label {
  margin-top: 0;
  font-size: 1rem;
}
.crash-metrics-list {
  margin-top: 0.45rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.05rem;
}
.assessment-crash-side .crash-metrics-list {
  margin-top: 0.25rem;
  gap: 0.25rem;
  font-size: 1rem;
}
.crash-metric-line span {
  font-weight: 700;
}
.factor-meaning-note {
  color: #111827;
  font-size: 1rem;
  line-height: 1.45;
  margin-top: 0.45rem;
  margin-bottom: 0.7rem;
}
.factor-formula-note {
  margin-top: 0.55rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.48;
  color: #6b7280;
}
.factor-formula-note strong {
  color: #4b5563;
  font-weight: 600;
}
.metric-table thead th {
  background: #6b8798;
  color: #f8fafc;
  font-weight: 600;
  vertical-align: middle;
  font-size: 1rem;
}
.metric-table tbody td {
  background: #fbfcfd;
  vertical-align: middle;
  font-size: 1rem;
}
.metric-table tbody tr:nth-child(odd) td {
  background: #f1f4f7;
}
.metric-table-total td {
  background: #f6e7b3 !important;
  font-weight: 600;
}
.intermediate-tables-row {
  margin-top: 0.55rem !important;
  margin-bottom: 0.95rem;
}
.cs-params-wrap {
  margin-top: 0.2rem;
  padding: 0.55rem 0.65rem 0.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.35rem;
  background: #f8fafc;
}
.cs-params-title {
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 0.45rem;
}
.cs-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.2rem;
}
.cs-params-note {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  color: #6b7280;
}

.crash-monthly {
  font-size: 1rem;
}
.crash-monthly-count b {
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .assessment-gauge-cluster {
    column-gap: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .assessment-gauge-cluster {
    grid-template-columns: minmax(240px, 320px);
    grid-template-areas:
      "smf"
      "cmf"
      "crash"
      "adjusted-smf"
      "adjusted-cmf";
    row-gap: 0.55rem;
    padding-bottom: 0.2rem;
  }

  .assessment-crash-side {
    width: min(100%, 280px);
    min-width: 0;
    margin: 0.15rem auto 0.35rem;
  }
}