html {
  scrollbar-gutter: stable;
  height: 100%;
}

/* Lock html when modal open (prevents header/footer scroll propagation) */
html:has(body.modal-open) {
  overflow-y: hidden !important;
}

/* Lock body when modal open (prevents Bootstrap padding) */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

@font-face {
  font-display: block;
  font-family: "miami-icons";
  src: url("./miami-icons.woff2") format("woff2"),
       url("./miami-icons.woff") format("woff");
}
.miami-icons::before, 
  [class*=" miami-icons-"]::before, 
  [class^=miami-icons-]::before {
    font-family: "miami-icons" !important;;
    display: inline-block;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.miami-icons-ebike::before { 
  content: "\e001";
}

/* Don't center vertically start */
.modal-dialog-scrollable {
  max-height: calc(100vh - 40px) !important;
  margin-top: 20px !important;      /* 20px from top */
  margin-bottom: auto !important;
  margin-left: auto !important;     /* Center horizontally */
  margin-right: auto !important;    /* Center horizontally */
}

.modal-dialog-centered{
  display: block !important;
  align-items: unset !important; 
}
/* don't center vertically end */

/* Flex layout */
.modal-content {
  max-height: 100% !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollable body */
.modal-body {
  flex-grow: 1;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  min-height: 0;
}

/* Fixed header/footer */
.modal-header,
.modal-footer {
  flex-shrink: 0;
}

/* Handle navset_tab */
.modal-body > .bslib-navs-card-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

      

.main-container {
  max-width: 1400px;
}

.tabbable {
  margin: 0 10px;
}

.nav {
  background-color: var(--bs-body-color);
}

.navbar-brand {
  color: white !important;
  pointer-events: none;
  cursor: default;
}

.navbar-brand:hover {
  text-decoration: none;
}

.card-header {
  background-color: var(--bs-primary) !important;
  color: white !important;
  font-weight: 600;
}

.navbar {
  background-color: var(--bs-body-color) !important;
}

.nav-tabs {
  background-color: var(--bslib-dashboard-main-bg);
}

.nav-tabs .nav-link.active {
  background-color: var(--bs-primary) !important;
  color: white !important;
  border-color: var(--bs-primary) !important;
}

.nav-tabs .nav-link {
  color: var(--bs-body-color);
}

.nav-link-disabled-able {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.nav-icon-overlay {
  pointer-events: auto !important; 
  cursor: pointer;
  opacity: 1 !important;
}

/* For disabled nav-link if icon is set (tooltip) - no border for nav-link */
.nav-link.disabled:hover {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep icon colored even if tab is disabled */
.nav-link.disabled .nav-icon-overlay {
  opacity: 1 !important;
  color: black;
}

.nav-link-disabled-able i:active {
  pointer-events: none;
}

.tab-pane {
  margin-top: 5px !important;
  padding-top: 5px !important;
}

#startScenario {
  background-color: var(--bs-primary);
}

#ui_version, #geo_level, #modes, #ui_version_adv {
  width: 100%;
}

.walk-color {
  color: var(--walk-color) !important;
}

.walk-color-bg {
  background-color: var(--walk-color) !important;
}

.bike-color {
  color: var(--bike-color) !important;
}

.bike-color-bg {
  background-color: var(--bike-color) !important;
}

.ebike-color, .ebiking-color {
  color: var(--ebike-color) !important;
}

.ebike-color-bg, .ebiking-color-bg {
  background-color: var(--ebike-color) !important;
}

.pt-color {
  color: var(--pt-color) !important;
}

.pt-color-bg {
  background-color: var(--pt-color) !important;
}

.all-modes-color {
  color: var(--all-modes-color) !important;
}

.all-modes-color-bg {
  background-color: var(--all-modes-color) !important;
}

.car-color {
  color: var(--car-color) !important;
}

.car-color-bg {
  background-color: var(--car-color) !important;
}

.mode-summary-band {
  min-height: 3.25rem;
}

.mode-summary-icon {
  color: white;
  font-size: 2.25rem;
  line-height: 1;
}

.mode-summary-label {
  color: white;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.mode-summary-card {
  border-width: 2px !important;
}

.walk-color-border {
  border-color: var(--walk-color) !important;
}

.bike-color-border {
  border-color: var(--bike-color) !important;
}

.ebike-color-border, .ebiking-color-border {
  border-color: var(--ebike-color) !important;
}

.pt-color-border {
  border-color: var(--pt-color) !important;
}

.all-modes-color-border {
  border-color: var(--all-modes-color) !important;
}

.card-data-entry{
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.miami-textinput-wider:not(.shiny-input-container-inline){
  width: 450px;
}

/* pressed effect */
.card-data-entry:hover {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.card-data-entry-missing {
  outline: 4px solid var(--bs-danger); 
  outline-offset: -1px; 
  /*animation: pulse-outline 2s ease-in-out infinite;*/
}

@keyframes pulse-outline {
  0% {
    outline-offset: 0px;
    outline-color: var(--bs-danger);
    outline-width: 4px;
  }
  100% {
    outline-offset: 15px;
    outline-color: rgba(0, 255, 252, 0);
    outline-width: 0px;
  }
}

/* TODO: assumptions table */
.input-table td .shiny-input-container { margin-bottom: 0; }
.input-table th[scope='row'] { vertical-align: middle; }

/* TODO: bold for pop table */
.m-bold input {
  font-weight: 700;
}

#pop_size_advanced_type{
  width: unset;
}

[mtaba='mtab3'] .shiny-input-container{
  width: unset;
}

/* TODO: sliders without labels */
.no-labels .irs-min,
.no-labels .irs-max,
.no-labels .irs-single,
.no-labels .irs-from,
.no-labels .irs-bar,
.no-labels .irs-grid-text,
.no-labels .irs-to { 
  display: none !important; 
}

.no-labels .irs--shiny { 
  margin: 0;
}

/* ── Tab 5: Results ───────────────────────────────────────────────────────── */

/* Metric tile: icon + text row */
.results-metric-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid #e9ecef;
}

.results-metric-tile:last-child {
  border-bottom: none;
}

.results-metric-icon {
  font-size: 2rem;
  color: var(--bs-primary);
  min-width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}

.results-metric-value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}

.results-metric-label {
  font-size: 0.78rem;
  color: #6c757d;
  line-height: 1.3;
}

/* Ensure chart SVGs in cards fill nicely */
.results-chart-placeholder {
  width: 100%;
  padding: 0.25rem 0;
}


/* NEW - keep from here */
.miama-modal-full-labels .miama-input{
  width: 100%;
}

.miama-input-full-labels:not(.shiny-input-container-inline){
  width: 100%;
}

.miamia-textinput-inline .form-group.shiny-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.miamia-textinput-inline label {
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.miamia-textinput-inline input {
    width: 100px;
    flex: 0 0 100px;
  }

.miama-data-entry-pie { 
  min-height: 320px; 
  width: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.miami-full-width-children .shiny-input-container{
  width: 100%;
}

/* for withProgress */
#ui-blocker {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9999;                 
  cursor: not-allowed;
}

html:has(.shiny-progress-notification) #ui-blocker {
  display: block !important;
}

#shiny-notification-panel {
  z-index: 10000 !important;
}
/* end: for withProgress */

/* plotly spinner */
.plotly-wrapper {
  position: relative;
}

.plotly-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(255,255,255,0.7);
}

.plotly-spinner i {
  font-size: 2rem;
}

.plotly-wrapper.loaded .plotly-spinner {
  display: none;
}

.plotly-spinner i {
  font-size: 2rem;
  animation: plotlyspin 1s linear infinite;
}

@keyframes plotlyspin {
  to {
    transform: rotate(360deg);
  }
}
/*end plotly spinner */

/* results */
.results-reduce-icon-padding i{
  padding-right: 4px !important;
}
/* END results */

/* diversion rates */
.miama-diversion-rates-title i.bi,
.miama-diversion-rates-title i.miami-icons{
  padding-right: 3px !important;
}
/* END diversion rates */