/* Route editor only. Loaded after the shared office design. */
#managerApp #editor {
  --me-gradient: linear-gradient(110deg, #40baff, #5c70f7);
  --me-ink: #233857;
  --me-muted: #7186a7;
  --me-line: #e0eaf8;
  color: var(--me-ink);
  font-size: 17px;
  line-height: 1.5;
  min-width: 0;
}

#managerApp:has(#editor.active) .topbar .actions > :is(.desktop-only, #newTourButton) { display: none; }
#managerApp #editor [hidden] { display: none !important; }

#managerApp #editor .me-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#managerApp #editor .btn {
  min-height: 44px;
  border-radius: 11px;
  font-size: 17px;
  font-weight: 600;
  padding: 10px 15px;
}

#managerApp #editor .btn.primary {
  background: var(--me-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 16px #5694f51f;
}

#managerApp #editor .btn.primary:hover { box-shadow: 0 7px 20px #5694f533; }
#managerApp #editor .btn .md-icon { width: 20px; height: 20px; }

#managerApp #editor .me-back {
  margin: 0 0 16px;
  padding-left: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #54769e;
}

#managerApp #editor .me-back:hover { color: #2584e8; background: transparent; }

#managerApp #editor .me-tourbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 25px;
  border: 1px solid var(--me-line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 5px 18px #3d71a609;
}

#managerApp #editor .me-tour-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #3d92ee;
  background: #edf6ff;
  border-radius: 13px;
}

#managerApp #editor .me-tour-icon .md-icon { width: 26px; height: 26px; }
#managerApp #editor .me-tour-select { flex: 1 1 220px; min-width: 0; max-width: 350px; }

#managerApp #editor #editorTourSelect {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #dce8f9;
  background: #fff;
  border-radius: 10px;
  color: #203b61;
  padding: 9px 30px 9px 12px;
  font-size: 18px;
  font-weight: 650;
}

#managerApp #editor .me-type {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 8px;
  color: #6383bd;
  background: #eef3ff;
  font-size: 15px;
  font-weight: 600;
}
#managerApp #editor .me-type.is-week { background: #e5f8ef; color: #21865e; }
#managerApp #editor .me-type.is-evening { background: #efeaff; color: #7654bd; }
#managerApp #editor .me-type.is-weekend { background: #fff3df; color: #a77525; }

#managerApp #editor :is(#editorTourHours, #editorTourVehicle) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6a83a6;
  font-size: 15px;
  line-height: 1.4;
}

#managerApp #editor :is(#editorTourHours, #editorTourVehicle) .md-icon { width: 19px; height: 19px; flex-basis: 19px; }
#managerApp #editor .me-tourbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-left: auto; }
#managerApp #editor .me-tourbar-actions .btn { padding: 9px 12px; color: #6080a9; }

#managerApp #editor .editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 22px;
}

#managerApp #editor .editor-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#managerApp #editor .me-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

#managerApp #editor .me-passage-title { flex: 1 1 200px; min-width: 0; }
#managerApp #editor .me-passage-title h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.3px; line-height: 1.4; }
#managerApp #editor #stopCount { color: #7e93af; font-size: 17px; font-weight: 500; }
#managerApp #editor .me-search { flex: 1 1 210px; max-width: 310px; min-width: 0; }

#managerApp #editor .me-search-input {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--me-line);
  background: #fff;
  border-radius: 11px;
  color: #8ca2c0;
}

#managerApp #editor .me-search-input > svg { width: 20px; height: 20px; flex: 0 0 20px; }
#managerApp #editor .me-search-input:focus-within { border-color: #96c9fb; box-shadow: 0 0 0 3px #bfddff45; }

#managerApp #editor #editorStopSearch {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #314e74;
  padding: 9px 0;
  font-size: 17px;
  line-height: 1.4;
  box-shadow: none;
}

#managerApp #editor #editorStopSearch:focus-visible { outline: 0; }
#managerApp #editor .me-editor-toolbar > .btn { flex: 0 0 auto; }
#managerApp #editor .stop-list { display: grid; gap: 12px; }

#managerApp #editor .stop {
  position: relative;
  display: grid;
  grid-template-columns: 28px 34px 88px minmax(0, 1fr) 142px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid var(--me-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 14px #4875a305;
}

#managerApp #editor .stop .me-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 44px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9bb0ce;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#managerApp #editor .stop .me-drag-handle svg { width: 18px; height: 24px; flex: 0 0 auto; }
#managerApp #editor .stop .me-drag-handle:hover:not(:disabled):not([aria-disabled="true"]) { color: #6095cf; background: #f0f6ff; }
#managerApp #editor .stop .me-drag-handle:focus-visible { outline: 3px solid #82b6ff; outline-offset: 2px; background: #edf5ff; }
#managerApp #editor .stop .me-drag-handle:active:not(:disabled):not([aria-disabled="true"]),
#managerApp #editor .stop.me-dragging .me-drag-handle { cursor: grabbing; }
#managerApp #editor .stop .me-drag-handle:is(:disabled, [aria-disabled="true"]) { opacity: .4; cursor: default; }
#managerApp #editor .stop.me-dragging { opacity: .45; }
#managerApp #editor .stop.me-drop-before::before,
#managerApp #editor .stop.me-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: #3b9ef5;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}
#managerApp #editor .stop.me-drop-before::before { top: -8px; }
#managerApp #editor .stop.me-drop-after::after { bottom: -8px; }

#managerApp #editor .stop .num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #edf4fe;
  color: #7892b4;
  font-size: 16px;
  font-weight: 600;
}

#managerApp #editor .stop .time { min-width: 0; color: #294565; font-size: 18px; font-weight: 650; line-height: 1.4; }

#managerApp #editor .me-stop-type {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  margin-top: 6px;
  border-radius: 7px;
  background: #e8f7ef;
  color: #38886a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 100%;
}
#managerApp #editor .me-stop-type.is-call { background: #fff3df; color: #a77525; }
#managerApp #editor .stop .place .me-review { display: inline-flex; border-radius: 8px; padding: 4px 8px; background: #fff3df; color: #a77525; font-size: 15px; }

#managerApp #editor .stop .place { min-width: 0; grid-column: auto; overflow-wrap: anywhere; }
#managerApp #editor .stop .place b { display: block; color: #284464; font-size: 18px; font-weight: 600; line-height: 1.4; }
#managerApp #editor .stop .place span { display: block; margin-top: 5px; color: #7b91ae; font-size: 15px; line-height: 1.5; }

#managerApp #editor .stop .stop-actions {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 5px;
  grid-column: auto;
  justify-content: end;
  width: 142px;
}

#managerApp #editor .stop .iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #dfe9f8;
  border-radius: 10px;
  background: #fff;
  color: #6793c7;
  font-size: 18px;
}

#managerApp #editor .stop .iconbtn .md-icon { width: 20px; height: 20px; }
#managerApp #editor .stop .iconbtn:hover { color: #268bec; background: #f3f8ff; border-color: #afd3fa; }
#managerApp #editor .stop .iconbtn.me-delete { color: #d44d64; background: #fff3f5; border-color: #f7e2e6; }
#managerApp #editor .stop .iconbtn.me-delete:hover { color: #da5264; background: #fff0f2; border-color: #efbdc7; }
#managerApp #editor .stop .iconbtn:disabled { opacity: .4; cursor: default; }

#managerApp #editor .me-add-bottom {
  width: 100%;
  margin-top: 13px;
  min-height: 50px;
  border-style: dashed;
  border-color: #bfd5f4;
  color: #4297ec;
  background: #f8fbff;
  box-shadow: none;
}

#managerApp #editor .me-add-bottom:hover { background: #eef6ff; border-color: #83b9f5; }

#managerApp #editor .editor-side {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--me-line);
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 5px 18px #3d71a605;
}

#managerApp #editor .editor-side :is(h2, h3) { margin: 0 0 21px; color: #294564; font-size: 18px; font-weight: 650; line-height: 1.4; }
#managerApp #editor .me-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 13px; }
#managerApp #editor .me-fields .field { min-width: 0; margin: 0; gap: 7px; }
#managerApp #editor .me-fields .field:has(#eName),
#managerApp #editor .me-fields .field:has(#eNote) { grid-column: 1 / -1; }
#managerApp #editor .field label { color: #6c84a6; font-size: 15px; font-weight: 500; line-height: 1.4; }

#managerApp #editor .field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #dfe9f8;
  border-radius: 10px;
  color: #344f72;
  background: #fff;
  font-size: 17px;
  line-height: 1.4;
}

#managerApp #editor .field textarea { min-height: 115px; resize: vertical; }
#managerApp #editor .editor-side .small { color: #7b91ae; font-size: 15px; line-height: 1.5; }

#managerApp #editor .me-editor-foot {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 23px;
  padding: 15px 18px;
  border: 1px solid #e0eafb;
  border-radius: 15px;
  background: #fffffff2;
  box-shadow: 0 5px 25px #3b6a9e0c;
  backdrop-filter: blur(12px);
}

#managerApp #editor .me-editor-foot > .small { max-width: 560px; min-width: 0; color: #8297b5; font-size: 15px; line-height: 1.5; }
#managerApp #editor .me-save-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
#managerApp #editor .me-save-actions .btn { min-height: 46px; }

@media (max-width: 1450px) and (min-width: 1201px) {
  #managerApp #editor .editor-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
  #managerApp #editor .editor-side { padding: 18px; }
  #managerApp #editor .stop { grid-template-columns: 24px 32px 77px minmax(0, 1fr) 142px; gap: 9px; padding: 13px 11px; }
  #managerApp #editor .stop .me-drag-handle { width: 24px; }
  #managerApp #editor .me-passage-title { flex-basis: 100%; }
  #managerApp #editor .me-search { max-width: none; }
}

@media (max-width: 1200px) {
  #managerApp #editor .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #managerApp #editor .editor-main { order: 0; }
  #managerApp #editor .editor-side { order: 1; }
  #managerApp #editor .me-fields .field:has(#eServiceType),
  #managerApp #editor .me-fields .field:has(#eVehicle) { grid-column: auto; }
  #managerApp #editor .me-editor-foot { flex-wrap: wrap; }
  #managerApp #editor .me-editor-foot > .small { max-width: none; flex: 1 1 270px; }
  #managerApp #editor .me-save-actions { flex: 1 1 auto; }
  #managerApp #editor .me-tourbar { gap: 11px; }
  #managerApp #editor .me-tourbar-actions { flex-basis: 100%; justify-content: flex-end; }
}

@media (max-width: 760px) {
  #managerApp #editor .me-back { margin-bottom: 11px; }
  #managerApp #editor .me-tourbar { padding: 15px; margin-bottom: 20px; gap: 11px; }
  #managerApp #editor .me-tour-select { flex-basis: calc(100% - 60px); max-width: none; }
  #managerApp #editor .me-tourbar-actions { justify-content: stretch; }
  #managerApp #editor .me-tourbar-actions .btn { flex: 1 1 140px; }
  #managerApp #editor .me-editor-toolbar { gap: 11px; }
  #managerApp #editor .me-passage-title { flex-basis: 100%; }
  #managerApp #editor .me-search { max-width: none; }
  #managerApp #editor .stop { grid-template-columns: 44px 32px 82px minmax(0, 1fr); gap: 11px; padding: 14px; }
  #managerApp #editor .stop .me-drag-handle { width: 44px; min-width: 44px; }
  #managerApp #editor .stop .place { grid-column: auto; }
  #managerApp #editor .stop .stop-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, 44px); width: auto; justify-content: end; margin-top: 2px; gap: 8px; }
  #managerApp #editor .editor-side { padding: 18px; }
  #managerApp #editor .me-editor-foot { position: static; margin-top: 20px; padding: 16px; gap: 15px; }
  #managerApp #editor .me-save-actions { display: grid; grid-template-columns: 1fr; width: 100%; flex-basis: 100%; }
  #managerApp #editor .me-save-actions .btn { width: 100%; min-height: 48px; }
}

@media (max-width: 480px) {
  #managerApp #editor .me-editor-toolbar > .btn { width: 100%; }
  #managerApp #editor .me-search { flex-basis: 100%; }
  #managerApp #editor .stop { grid-template-columns: 44px 32px minmax(0, 1fr); gap: 10px; }
  #managerApp #editor .stop .time { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  #managerApp #editor .me-stop-type { margin-top: 0; }
  #managerApp #editor .stop .place { grid-column: 1 / -1; }
  #managerApp #editor .me-fields { grid-template-columns: minmax(0, 1fr); }
  #managerApp #editor .me-fields .field { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  #managerApp #editor .btn { transition: none; }
}