/* 後台：同一套發車屏元件的編輯模式 */
.admin { padding-bottom: 96px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.bad { color: var(--red); }
.ok { color: var(--green); }
code { font-family: var(--px); font-size: 24px; }
.admin h1.px, .admin h2.px { font-weight: 400; margin: 18px 0 8px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.admin-tabs .key.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 8px 10px;
  background: var(--bg-sunk); color: var(--text);
  border: 1px solid var(--line); border-radius: 2px;
  font: 16px/1.4 var(--sans);
}
html[data-theme="paper"] input, html[data-theme="paper"] select, html[data-theme="paper"] textarea { background: #fff; border-color: #8C928D; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
input[type="checkbox"] { width: 20px; min-height: 20px; accent-color: var(--green); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
label.inline { display: inline-flex; align-items: center; gap: 8px; }
label.inline select { width: auto; }

.login { min-height: 100vh; display: grid; place-items: center; }
.login-box { width: min(26rem, 100%); display: grid; gap: 12px; padding: 24px; border: 1px solid var(--frame); background: var(--bg-row); }
.login-box .back { color: var(--muted); font-size: 14px; }

.dayform { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; margin: 12px 0; }
.a-warn { margin: 8px 0 12px; }
.a-warn h3 { margin: 0 0 4px; color: var(--red); font-size: 16px; }
.a-warn ul { margin: 0; padding-left: 1.2em; }
.a-warn .w-anchor { color: var(--red); }

.stop.edit { display: grid; grid-template-columns: var(--col-time) minmax(0, 1fr); cursor: auto; }
.stop.edit .stop-time .px { font-size: 24px; }
.edit-card { display: grid; gap: 10px; min-width: 0; }
.edit-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.edit-row > label { flex: 1 1 8rem; }
.edit-row .w-time { flex: 0 1 9rem; }
.edit-row .w-stay { flex: 0 1 7rem; }
.edit-row .spacer { flex: 1; }
.anchor-chip { color: var(--red); font-weight: 600; font-size: 14px; }
.anchor-edit { padding: 8px; border: 1px solid var(--red); }
input:invalid { border-color: var(--red); }
.key-danger { color: var(--red); border-color: var(--red); }
.add-row { list-style: none; padding: 12px 10px; border-top: 1px solid var(--line); }
.bad b, b.bad { color: var(--red); }

.savebar {
  position: sticky; bottom: 0; z-index: 25; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0)); background: var(--bg); border-top: 1px solid var(--line);
}
.export { margin-top: 8px; font: 13px/1.4 ui-monospace, Consolas, monospace; }

.places { display: grid; gap: 16px; }
.place-list { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--line); max-height: 70vh; overflow: auto; }
.place-row { padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.place-row:first-child { border-top: 0; }
.place-row:hover { background: var(--bg-row); }
.place-row.is-missing b { color: var(--red); }
.place-form { display: grid; gap: 10px; align-content: start; }
.p-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.p-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-map { height: 320px; border: 1px solid var(--line); }
.p-map .leaflet-tile-pane { filter: var(--map-filter); }

.settings { display: grid; gap: 12px; max-width: 44rem; }

.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; background: var(--text); color: var(--bg); font-weight: 600;
  transition: opacity .2s, transform .3s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { background: var(--red); color: #fff; }

@media (min-width: 1000px) {
  .places { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .place-form { position: sticky; top: 16px; }
}
.stop.edit .stop-no { justify-self: start; }