.mobile-demo-admin .mobile-demo-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:7px;background:#fff;border:1px solid #d8e3df;border-radius:20px;box-shadow:0 10px 25px rgba(15,23,42,.07)}
.mobile-demo-admin .mobile-demo-nav-item{border:0;background:transparent;color:#667c87;border-radius:14px;min-width:0;min-height:62px;display:grid;justify-items:center;align-content:center;gap:4px;font-family:inherit;font-size:11px;font-weight:800;line-height:1.15;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}
.mobile-demo-admin .mobile-demo-nav-item:first-child{background:#e9f8f6;color:#0f766e}
.mobile-demo-admin .mobile-demo-nav-item:hover,.mobile-demo-admin .mobile-demo-nav-item:focus-visible{background:#128b83;color:#fff;transform:translateY(-2px) scale(1.035);box-shadow:0 10px 20px rgba(15,118,110,.18);outline:none}
.mobile-demo-admin .mobile-stat-btn{min-height:78px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center;gap:2px;padding:10px 12px!important;box-shadow:none!important}
.mobile-demo-admin .mobile-stat-btn>div:first-child{display:contents}
.mobile-demo-admin .mobile-stat-btn>div:first-child>div:first-child{order:0;font-size:11px!important;margin:0!important}
.mobile-demo-admin .mobile-stat-btn>div:last-child{order:1;text-align:left!important;font-size:23px!important}
.mobile-demo-admin .mobile-stat-btn>div:first-child>div:last-child{order:2;margin:0!important;font-weight:500!important;font-size:10px!important}
.mobile-demo-admin .mobile-stat-btn:hover,.mobile-demo-admin .mobile-stat-btn:focus-visible{background:#128b83!important;color:#fff!important;transform:translateY(-2px) scale(1.025);outline:none}
.mobile-demo-admin .mobile-stat-btn:hover div,.mobile-demo-admin .mobile-stat-btn:focus-visible div{color:#fff!important}
.mobile-demo-admin [id^="mobile-"]{scroll-margin-top:12px}

/* Keep the demo phone screen contained even when a child has wide content. */
html body #root #mobile-demo-home.mobile-demo-admin{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:clip}
html body #root #mobile-demo-home.mobile-demo-admin>div{width:min(100%,480px)!important;max-width:480px!important;min-width:0!important;margin-inline:auto!important;grid-template-columns:minmax(0,1fr)!important;box-sizing:border-box}
html body #root #mobile-demo-home.mobile-demo-admin>div>section,
html body #root #mobile-demo-home.mobile-demo-admin>div>nav{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:520px){html body #root #mobile-demo-home.mobile-demo-admin{padding-left:8px!important;padding-right:8px!important}}
/* Share the administrator phone layout with inspectors without changing their data. */
#mobile-demo-home:has(#admin-terrain-dashboard) .mobile-demo-nav {
  display: none;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border: 1px solid #d8e3df;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 24px #94a3b814;
  overflow: visible;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav-item {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #111111;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav-item:first-child {
  border-color: transparent;
  background: transparent;
  color: #111111;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav-item:is(:hover, :focus-visible, :active) {
  z-index: 2;
  border-color: #d8e3df;
  background: #fff;
  color: #111111;
  box-shadow: 0 12px 24px #0f172a2b;
  transform: translateY(-4px) scale(1.08);
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav-item:focus-visible {
  outline: 2px solid #596776;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav-item {
    transition: none;
  }
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section {
  gap: 0 !important;
  overflow: visible;
  background: #fff;
  border: 1px solid #d8e3df;
  box-shadow: 0 12px 24px #0f172a12;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  min-height: 84px !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #171a20 !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:nth-child(odd) {
  border-right: 1px solid #d9e1ed !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:nth-child(-n+2) {
  border-bottom: 1px solid #d9e1ed !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34%;
  bottom: 34%;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: #12a89c;
  opacity: 0;
  transition: opacity .16s ease;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn[aria-pressed="true"]::before {
  opacity: 1;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:hover::before {
  opacity: 1;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn > div:first-child {
  display: contents !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn > div:first-child > div:first-child {
  grid-row: 2;
  color: #171a20 !important;
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 650 !important;
  text-align: center !important;
  white-space: normal !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn > div:last-child {
  grid-row: 1;
  justify-self: center;
  align-self: center;
  color: #171a20 !important;
  font-size: 19px !important;
  text-align: center !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn > div:first-child > div:last-child {
  grid-row: 3;
  margin-top: 0 !important;
  color: #171a20 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  white-space: normal !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:is(:hover, :focus) {
  background: #fff !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:hover {
  z-index: 2;
  box-shadow: 0 12px 24px #0f172a21 !important;
  transform: translateY(-2px) scale(1.1) !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn[aria-pressed="true"] {
  z-index: auto;
  outline: none;
  box-shadow: none !important;
  transform: none !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:is(:hover, :active) {
  z-index: 2;
  box-shadow: 0 12px 24px #0f172a21 !important;
  transform: translateY(-2px) scale(1.1) !important;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:focus-visible {
  outline: 2px solid #596776;
  outline-offset: 2px;
}
#mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn:is(:hover, :focus) div {
  color: #171a20 !important;
}
@media (prefers-reduced-motion: reduce) {
  #mobile-demo-home:not(:has(#admin-terrain-dashboard)) .mobile-demo-nav + section > .mobile-stat-btn {
    transition: none;
  }
}

/* The suggested stop is the green action; keep both lines readable. */
#mobile-demo-home #mobile-route-section button.mobile-fine-btn:has(> div:first-child):first-child:not(:disabled) {
  background: #0f8278 !important;
  border-color: #0f8278 !important;
  color: #fff !important;
}
#mobile-demo-home #mobile-route-section button.mobile-fine-btn:has(> div:first-child):first-child:not(:disabled) > div {
  color: #fff !important;
}
#mobile-demo-home #mobile-route-section button.mobile-fine-btn:has(> div:first-child):nth-child(2):is(:hover, :focus-visible, :active) > div {
  color: #fff !important;
}

#mobile-demo-home #mobile-route-section [aria-hidden="true"]:has(> span:nth-child(5)) {
  background: url("/route-car-side.svg") center / 46px 28px no-repeat;
}
#mobile-demo-home #mobile-route-section [aria-hidden="true"]:has(> span:nth-child(5)) > span {
  display: none !important;
}

#mobile-demo-home #mobile-route-section:has(> div:nth-child(2) > div:nth-child(2) > button:first-child:not(:disabled)) > div:first-child > div:first-child {
  min-width: 0;
}
#mobile-demo-home #mobile-route-section:has(> div:nth-child(2) > div:nth-child(2) > button:first-child:not(:disabled)) > div:first-child > div:first-child > div:nth-child(3) {
  display: inline-block;
  max-width: 100%;
  width: fit-content;
  margin-top: 8px !important;
  padding: 4px 0 4px 12px;
  border-left: 4px solid #12a89c;
  background: transparent;
  color: #20242a !important;
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#mobile-demo-home #mobile-route-section:has(> div:nth-child(2) > div:nth-child(2) > button:first-child:not(:disabled)) > div:first-child > div:first-child > div:nth-child(3):not(:has(> .mobile-route-prefix))::before {
  content: "Către ";
  color: #6f7c85;
  font-size: 13px;
  font-weight: 700;
  white-space: pre;
}