/* =====================================================================
   SIMURBAN v0.9.65 — compactação final da interface e fluxo de frota
   Carregado depois de styles-ui-v0964.css.
   ===================================================================== */

:root{
  --v965-bottom-gap:82px;
  --v965-panel-line:rgba(214,236,226,.14);
  --v965-card:rgba(255,255,255,.052);
}

/* ---------- Topbar compacta: RCI vertical, frota e eventos por ícone ---------- */
body.city-mode #topbar.topbar{
  grid-template-columns:190px minmax(0,1fr) 64px!important;
}
body.city-mode #topbar .topbar-center>.hud-pill{
  flex:0 1 102px!important;
  min-width:66px!important;
  max-width:116px!important;
  padding:0 8px!important;
}
body.city-mode #topbar .hud-fleet-pill{
  flex-basis:76px!important;
  min-width:68px!important;
  max-width:82px!important;
}
body.city-mode #topbar #hudRci{
  flex:0 0 94px!important;
  min-width:94px!important;
  max-width:94px!important;
  padding:0 8px!important;
  align-items:center!important;
}
body.city-mode #topbar #hudRci>b{align-self:flex-start!important}
body.city-mode #topbar #hudRci .rci-demand-bars{
  width:56px!important;
  height:27px!important;
  margin:2px auto 0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:8px!important;
}
body.city-mode #topbar #hudRci .rci-demand-item{
  width:12px!important;
  height:27px!important;
  display:flex!important;
  flex-direction:column-reverse!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:2px!important;
}
body.city-mode #topbar #hudRci .rci-demand-label{
  display:block!important;
  width:auto!important;
  height:7px!important;
  color:#edf7f0!important;
  font-size:7px!important;
  line-height:7px!important;
  font-weight:950!important;
}
body.city-mode #topbar #hudRci .rci-demand-track{
  position:relative!important;
  display:block!important;
  width:7px!important;
  height:18px!important;
  border-radius:3px 3px 2px 2px!important;
  background:rgba(0,0,0,.40)!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
body.city-mode #topbar #hudRci .rci-demand-fill{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:5%!important;
  min-height:1px!important;
  border-radius:2px 2px 1px 1px!important;
  transition:height .28s ease!important;
}
body.city-mode #topbar #hudEvents{
  position:relative!important;
  flex:0 0 50px!important;
  min-width:50px!important;
  max-width:50px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:0 5px!important;
}
body.city-mode #topbar #hudEvents .ui-ico{
  position:static!important;
  transform:none!important;
  width:16px!important;
  height:16px!important;
  color:#d9e6df!important;
}
body.city-mode #topbar #hudEvents #hudEventsCount{
  margin:0!important;
  color:#f5faf7!important;
  font-size:12px!important;
  line-height:1!important;
  overflow:visible!important;
}

/* ---------- Menu hambúrguer sem rolagem e sem save rápido ---------- */
body.city-mode #hamburgerMenu.classic-menu{
  width:min(330px,calc(100vw - 20px))!important;
  max-height:none!important;
  overflow:hidden!important;
  gap:8px!important;
  padding:11px!important;
}
body.city-mode #hamburgerMenu .classic-menu-actions{
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
}
body.city-mode #hamburgerMenu .classic-menu-actions button{
  grid-column:auto!important;
  min-height:44px!important;
}
body.city-mode #hamburgerMenu .classic-menu-actions .danger-menu-action{grid-column:auto!important}

/* ---------- Todas as ferramentas surgem junto à bottombar ---------- */
body.city-mode #toolPanel.tool-panel{
  top:auto!important;
  bottom:var(--v965-bottom-gap)!important;
  max-height:calc(100vh - 146px)!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel .tool-section.active{
  max-height:calc(100vh - 204px)!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}
body.city-mode #toolPanel.hidden-tool-panel,
body.city-mode #toolPanel.fleet-stage-open{display:none!important}
body.city-mode #toolPanel[data-active-tool="inspect"]{display:none!important}
body.city-mode #toolPanel[data-active-tool="vehicles"]{
  display:block!important;
  width:min(310px,calc(100vw - 90px))!important;
  min-width:0!important;
}
body.city-mode #toolPanel[data-active-tool="vehicles"] .tool-section.active{
  display:grid!important;
  gap:8px!important;
  padding:10px!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="vehicles"] .classic-tool-group{padding:8px!important}
body.city-mode #toolPanel[data-active-tool="vehicles"] #vehiclesOpenFleet{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}

/* ---------- Estradas compactas e sem rolagem horizontal ---------- */
body.city-mode #toolPanel[data-active-tool="road"]{
  width:min(390px,calc(100vw - 90px))!important;
  min-width:0!important;
  max-width:390px!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-section.active{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-group{
  padding:8px!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-group:has(.speed-quick-buttons),
body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-group:has(.road-extra-grid),
body.city-mode #toolPanel[data-active-tool="road"] .tool-hint{grid-column:1/-1!important}
body.city-mode #toolPanel[data-active-tool="road"] .icon-choice{
  height:44px!important;
  min-height:44px!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .road-main-presets .ui-ico{
  width:30px!important;
  height:30px!important;
  stroke-width:1.9!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .lane-quick-buttons .ui-ico{
  width:27px!important;
  height:27px!important;
  stroke-width:2!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .speed-quick-buttons{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:5px!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .speed-quick-buttons .icon-choice{
  height:46px!important;
  padding:2px 0 0!important;
  flex-direction:column!important;
  gap:0!important;
}
body.city-mode #toolPanel[data-active-tool="road"] .speed-quick-buttons .ui-ico{
  width:19px!important;
  height:19px!important;
}
.choice-number,.speed-value{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#eff8f1;
  font-weight:950;
  pointer-events:none;
}
.choice-number{
  right:3px;
  bottom:3px;
  min-width:14px;
  height:14px;
  padding:0 2px;
  border-radius:5px;
  background:rgba(0,0,0,.44);
  font-size:8px;
}
.speed-value{
  position:static;
  height:13px;
  font-size:8px;
  line-height:1;
}
body.city-mode #toolPanel .icon-choice.active .choice-number,
body.city-mode #toolPanel .icon-choice.active .speed-value{color:#fff}

/* ---------- Trilhos compactos e baixos ---------- */
body.city-mode #toolPanel[data-active-tool="rail"]{
  width:min(300px,calc(100vw - 90px))!important;
  min-width:0!important;
  bottom:var(--v965-bottom-gap)!important;
}
body.city-mode #toolPanel[data-active-tool="rail"] .classic-tool-section.active{
  gap:8px!important;
  padding:10px!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="rail"] .classic-tool-group{padding:8px!important}
body.city-mode #toolPanel[data-active-tool="rail"] .rail-main-presets .ui-ico{width:28px!important;height:28px!important;stroke-width:2!important}

/* ---------- Zoneamento estreito; tipos 2x2 em cards quadrados ---------- */
body.city-mode #toolPanel[data-active-tool="zone"]{
  width:min(270px,calc(100vw - 90px))!important;
  min-width:0!important;
  max-width:270px!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .tool-section.active{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-buttons:not(.zone-grid-toggle-row){
  display:grid!important;
  grid-template-columns:repeat(2,102px)!important;
  justify-content:center!important;
  grid-column:1/-1!important;
  gap:7px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-buttons:not(.zone-grid-toggle-row) button{
  aspect-ratio:1/1!important;
  width:102px!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:8px!important;
  white-space:normal!important;
  text-align:center!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-buttons:not(.zone-grid-toggle-row) button .ui-ico{width:25px!important;height:25px!important}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-density-wrap{padding:7px!important;min-width:0!important}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-density-buttons,
body.city-mode #toolPanel[data-active-tool="zone"] .zone-brush-buttons{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-grid-toggle-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-column:1/-1!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
body.city-mode #toolPanel[data-active-tool="zone"] .tool-hint{grid-column:1/-1!important;font-size:8.2px!important;line-height:1.25!important;padding:6px 7px!important}


body.city-mode #toolPanel[data-active-tool="zone"] .zone-density-title{font-size:8px!important;margin-bottom:6px!important}
body.city-mode #toolPanel[data-active-tool="zone"] .zone-density-buttons button,
body.city-mode #toolPanel[data-active-tool="zone"] .zone-brush-buttons button{height:30px!important;min-height:30px!important;padding:0 3px!important;font-size:8px!important}

/* ---------- Linhas menores, sem estouro horizontal ---------- */
body.city-mode #toolPanel[data-active-tool="lines"]{
  width:min(590px,calc(100vw - 90px))!important;
  min-width:0!important;
  max-width:590px!important;
}
body.city-mode #toolPanel[data-active-tool="lines"] .lines-tool-section.active{
  padding:10px!important;
  overflow-x:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="lines"] .lines-layout{
  grid-template-columns:minmax(220px,.82fr) minmax(0,1.18fr)!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
body.city-mode #toolPanel[data-active-tool="lines"] .lines-pane{padding:9px!important;min-width:0!important;overflow:hidden!important}
body.city-mode #toolPanel[data-active-tool="lines"] .transit-line-list{max-height:168px!important}
body.city-mode #toolPanel[data-active-tool="lines"] #transitLineSummary .transit-fare-box label{grid-template-columns:minmax(0,1fr) 66px!important}
body.city-mode #toolPanel[data-active-tool="lines"] .lines-help{font-size:8.5px!important;padding:7px!important}

/* ---------- Veículos em duas etapas: seletor primeiro, catálogo depois ---------- */
body.city-mode #transitFleetPanel.transit-fleet-panel{
  top:auto!important;
  bottom:var(--v965-bottom-gap)!important;
  left:62px!important;
  width:min(420px,calc(100vw - 90px))!important;
  max-width:420px!important;
  max-height:calc(100vh - 146px)!important;
  overflow:hidden!important;
}
body.city-mode #transitFleetPanel .transit-fleet-body{
  max-height:calc(100vh - 204px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:10px!important;
}
body.city-mode #transitFleetPanel .fleet-catalog-grid{grid-template-columns:1fr!important;gap:7px!important}
body.city-mode #transitFleetPanel .fleet-catalog-card{padding:9px!important}
body.city-mode #transitFleetPanel .fleet-card-actions button{border-radius:9px!important;position:relative!important;overflow:hidden!important}
body.city-mode #transitFleetPanel .fleet-vehicle-row{overflow:hidden!important}

/* ---------- Terreno menor, duas colunas no topo, sem barras ---------- */
body.city-mode #toolPanel[data-active-tool="terrain"]{
  width:min(380px,calc(100vw - 90px))!important;
  min-width:0!important;
  max-width:380px!important;
}
body.city-mode #toolPanel[data-active-tool="terrain"] .tool-section.active{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)!important;
  gap:8px!important;
  padding:10px!important;
  overflow:hidden!important;
}
body.city-mode #toolPanel[data-active-tool="terrain"] .terrain-tool-group{padding:8px!important;min-width:0!important}
body.city-mode #toolPanel[data-active-tool="terrain"] .terrain-tool-group[data-terrain-panel]{grid-column:1/-1!important}
body.city-mode #toolPanel[data-active-tool="terrain"] .tool-hint{grid-column:1/-1!important;font-size:8.7px!important;padding:7px 8px!important}
body.city-mode #toolPanel[data-active-tool="terrain"] .terrain-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
body.city-mode #toolPanel[data-active-tool="terrain"] .three-col{grid-template-columns:1fr!important;gap:6px!important}
body.city-mode #toolPanel[data-active-tool="terrain"] .terrain-swatch-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
body.city-mode #toolPanel[data-active-tool="terrain"] [data-terrain-panel="path"] .terrain-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.city-mode #toolPanel[data-active-tool="terrain"] button{height:32px!important;min-height:32px!important;padding:0 7px!important;font-size:9px!important}

/* ---------- Minimapa na mesma linha/rodapé da bottombar ---------- */
body.city-mode #miniMapPanel{
  bottom:10px!important;
}
body.city-mode #bottombar.classic-bottombar{
  left:10px!important;
  right:196px!important;
  bottom:10px!important;
}

/* ---------- Controles de tempo preservam ícones ao atualizar o texto ---------- */
body.city-mode #bottombar .speed-cluster .compact-action{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
body.city-mode #bottombar #pauseGame .ui-ico,
body.city-mode #bottombar #dayNightToggle .ui-ico{display:block!important;width:14px!important;height:14px!important;flex:0 0 14px!important}
body.city-mode #bottombar .compact-label{display:inline!important}

@media(max-width:1120px){
  body.city-mode #topbar.topbar{grid-template-columns:166px minmax(0,1fr) 58px!important}
  body.city-mode #topbar .topbar-center>.hud-pill{flex-basis:88px!important;min-width:60px!important;padding:0 6px!important}
  body.city-mode #topbar .topbar-center>.hud-pill:has(#hudPassengers){display:none!important}
  body.city-mode #toolPanel.tool-panel,body.city-mode #transitFleetPanel.transit-fleet-panel{left:60px!important;right:auto!important;top:auto!important;bottom:var(--v965-bottom-gap)!important}
}

@media(max-width:860px){
  body.city-mode #toolPanel.tool-panel,body.city-mode #transitFleetPanel.transit-fleet-panel{
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    bottom:72px!important;
  }
  body.city-mode #toolPanel[data-active-tool="lines"] .lines-layout{grid-template-columns:1fr!important}
  body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-section.active{grid-template-columns:1fr!important;overflow-y:auto!important}
  body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-group:has(.speed-quick-buttons),
  body.city-mode #toolPanel[data-active-tool="road"] .classic-tool-group:has(.road-extra-grid),
  body.city-mode #toolPanel[data-active-tool="road"] .tool-hint{grid-column:auto!important}
  body.city-mode #miniMapPanel{display:none!important}
  body.city-mode #bottombar.classic-bottombar{right:10px!important}
}
body.city-mode #transitFleetPanel .fleet-mode-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  margin:0 0 8px!important;
}
body.city-mode #transitFleetPanel .fleet-mode-row button{
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.055)!important;
  color:#edf6f1!important;
  font-size:10px!important;
  font-weight:900!important;
}
body.city-mode #transitFleetPanel .fleet-mode-row button.active{
  background:linear-gradient(180deg,rgba(143,211,107,.33),rgba(67,112,55,.27))!important;
  border-color:rgba(143,211,107,.5)!important;
}
body.city-mode #transitFleetPanel .fleet-mode-row .ui-ico{width:15px!important;height:15px!important}