/* Belgrade canvassing map */
:root {
  --sb-bg: #111827;
  --sb-panel: #1b2433;
  --sb-panel-2: #243044;
  --sb-border: #334155;
  --sb-text: #e5e7eb;
  --sb-muted: #9ca3af;
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --focus: #93c5fd;

  --st-none: #6B7280;
  --st-visited: #1FA85C;
  --st-rejected: #E03A3A;
  --st-pending: #F2B01E;

  --pop-text: #111827;
  --pop-muted: #4b5563;
  --radius: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--sb-bg); color: var(--sb-text); font-size: 14px; line-height: 1.4; overflow: hidden; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.popup :focus-visible, .find :focus-visible, .route-panel :focus-visible { outline-color: var(--accent-strong); }

/* ---------- Layout ---------- */
.app { display: flex; height: 100vh; height: 100dvh; width: 100vw; }
.sidebar {
  width: 340px; flex: 0 0 340px; display: flex; flex-direction: column;
  background: var(--sb-bg); border-right: 1px solid var(--sb-border); min-height: 0;
}
.map-wrap { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; }
.map { position: absolute; inset: 0; background: #e5e3df; z-index: 0; } /* own stacking context: map panes stay under the find box and route panel */

.sb-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--sb-border);
}
.sb-head h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.sheet-toggle { display: none; }
.sb-body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 24px; flex: 1 1 auto; min-height: 0; }

.sb-section { margin-top: 12px; }
.sb-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--sb-muted); margin: 18px 0 8px; }

.status {
  margin: 0; padding: 8px 10px; background: var(--sb-panel); border-radius: var(--radius);
  font-size: 13px; min-height: 34px; border-left: 3px solid var(--accent);
}
.status.error { border-left-color: var(--st-rejected); color: #fecaca; }
.status.busy { border-left-color: var(--st-pending); }
.status.ok { border-left-color: var(--st-visited); }

.hint { color: var(--sb-muted); font-size: 12px; margin: 6px 0 0; }
.muted { color: var(--sb-muted); font-weight: 400; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------- Controls ---------- */
.btn {
  font: inherit; font-size: 13px; color: var(--sb-text); background: var(--sb-panel-2);
  border: 1px solid var(--sb-border); border-radius: var(--radius); padding: 8px 12px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover { background: #2d3a52; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #7f1d1d; border-color: #991b1b; color: #fff; }
.btn-small { padding: 5px 9px; font-size: 12px; }
.btn-block { width: 100%; margin-top: 8px; }

.input {
  font: inherit; color: var(--sb-text); background: var(--sb-panel); border: 1px solid var(--sb-border);
  border-radius: var(--radius); padding: 8px 10px; width: 100%;
}
select.input { width: auto; }
select.input.wide { width: 100%; }
.row select.input.grow { width: auto; }
.input.time { width: auto; min-width: 0; }
.input::placeholder { color: #6b7280; }
.link-btn {
  font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer;
  color: #1d4ed8; text-decoration: underline;
}

.switch, .check { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; user-select: none; }
.switch input, .check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* ---------- Counter tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.tile {
  font: inherit; color: var(--sb-text); background: var(--sb-panel); border: 1px solid var(--sb-border);
  border-top: 4px solid var(--c); border-radius: var(--radius); padding: 6px 4px; cursor: pointer; text-align: center;
  transition: opacity .15s;
}
.tile b { display: block; font-size: 17px; line-height: 1.2; }
.tile span { display: block; font-size: 11px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }

/* ---------- Categories ---------- */
.cats summary { cursor: pointer; font-weight: 600; padding: 6px 0; list-style-position: inside; }
.cats-global { margin: 6px 0 4px; }
.sector { margin-top: 10px; }
.sector-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sector-head h3 { font-size: 12px; margin: 0; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
  font: inherit; font-size: 12px; color: var(--sb-muted); background: transparent; border: 1px solid var(--sb-border);
  border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.chip[aria-pressed="true"] { color: #fff; background: #1e3a8a; border-color: #3b82f6; }
.chip .n { font-variant-numeric: tabular-nums; opacity: .8; }

/* ---------- Open now ---------- */
.opennow {
  margin: 8px 0 0; padding: 8px 10px; background: var(--sb-panel);
  border-radius: var(--radius); border-left: 3px solid var(--st-visited);
}
.opennow .hint { margin: 6px 0 0; }
.opennow .check { margin-top: 6px; }

/* ---------- List ---------- */
.list { list-style: none; margin: 8px 0 0; padding: 0; }
.list-item {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 10px; align-items: start;
  padding: 9px 8px; border-radius: var(--radius); cursor: pointer; border: 1px solid transparent;
}
.list-item:hover { background: var(--sb-panel); }
.list-item:focus-visible { outline-offset: -2px; }
.list-item.selected { background: var(--sb-panel-2); border-color: var(--sb-border); }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-top: 3px; border: 2px solid #fff; flex: 0 0 auto; }
.dot.none { border-color: #1f2937; }
.li-name { font-weight: 600; overflow-wrap: anywhere; }
.li-meta, .li-note { grid-column: 2 / 4; font-size: 12px; color: var(--sb-muted); overflow-wrap: anywhere; }
.li-note { color: #fcd34d; font-style: italic; }
.li-open { font-weight: 600; }
.li-open.is-open { color: #34d399; }
.li-open.is-closed { color: #fca5a5; }
.li-mine { color: #a5b4fc; font-weight: 600; }
.li-dist { font-size: 12px; color: var(--sb-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.empty { color: var(--sb-muted); text-align: center; padding: 22px 8px; border: 1px dashed var(--sb-border); border-radius: var(--radius); margin-top: 8px; }

/* ---------- Tools ---------- */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-wide { grid-column: 1 / 3; }

/* ---------- Find box (top right of map) ---------- */
.find { position: absolute; top: 10px; right: 10px; width: min(300px, calc(100% - 140px)); z-index: 5; }
.find-input {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid #d1d5db; background: #fff; color: var(--pop-text); box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.find-results {
  list-style: none; margin: 4px 0 0; padding: 4px; background: #fff; color: var(--pop-text);
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.3); max-height: 60vh; overflow-y: auto;
}
.find-results li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.find-results li[aria-selected="true"], .find-results li:hover { background: #e0e7ff; }
.find-results .dot { margin-top: 3px; border-color: #fff; box-shadow: 0 0 0 1px #9ca3af; }
.find-results .fr-name { font-weight: 600; }
.find-results .fr-addr { font-size: 12px; color: var(--pop-muted); }

/* ---------- Route planner (bottom left, above the Google logo) ---------- */
.route-open { position: absolute; left: 10px; bottom: 40px; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.route-panel {
  position: absolute; left: 10px; bottom: 40px; z-index: 6;
  width: min(340px, calc(100% - 74px)); max-height: calc(100% - 110px); overflow-y: auto;
  background: var(--sb-bg); color: var(--sb-text); border: 1px solid var(--sb-border); border-radius: 10px;
  padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.rp-head { display: flex; align-items: center; justify-content: space-between; }
.rp-head h2 { margin: 0; font-size: 15px; }
.icon-btn { font: inherit; background: transparent; border: 0; color: var(--sb-text); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.icon-btn:hover { background: var(--sb-panel-2); }
.rp-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sb-border); }
.rp-label { font-weight: 600; }
.rp-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.rp-grid .input { width: 100%; }
.route-panel > .row { margin-top: 12px; }
.chip .dot { margin-top: 0; width: 10px; height: 10px; }
.rp-result { margin-top: 10px; }
.rp-summary { background: var(--sb-panel); border-radius: var(--radius); padding: 8px 10px; }
.rp-summary b { font-size: 15px; }
.rp-stops { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: stop; }
.rp-stops li { display: flex; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.rp-stops li:hover { background: var(--sb-panel); }
.rp-num { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent-strong); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.rp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rp-links a { color: #93c5fd; }

/* ---------- Add / edit a place (modal) ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.modal-back { position: absolute; inset: 0; background: rgba(2, 6, 23, .62); }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  background: var(--sb-bg); color: var(--sb-text); border: 1px solid var(--sb-border);
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--sb-border); flex: 0 0 auto;
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.modal-foot {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--sb-border); flex: 0 0 auto;
}
.fld { display: block; margin-top: 12px; }
.fld > span:first-child { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.fld .hint { margin-top: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.hours-quick { margin-bottom: 8px; }
.hours-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; }
.hr-day { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 13px; }
.hr-day input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.hours-grid .input.time { width: 100%; }
.hours-grid .input.time:disabled { opacity: .4; }
#plError { margin-top: 12px; }

/* ---------- Online storage: status line, team list, sign-in box ---------- */
.status.cloud { margin-top: 6px; font-size: 12px; min-height: 0; padding: 6px 10px; }
.sidebar .link-btn, .modal .link-btn { color: #93c5fd; }
.team-list { list-style: none; margin: 8px 0 0; padding: 0; }
.team-list li { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid var(--sb-border); overflow-wrap: anywhere; }
.team-list li .hint { margin: 0; }
.modal.auth { z-index: 1100; }
.modal.auth .modal-back { background: rgba(2, 6, 23, .86); }
.modal.auth .modal-card { width: min(420px, 100%); }
.modal.auth .hint { margin: 0; font-size: 13px; }
.modal.auth .btn-block { margin-top: 14px; padding: 10px 12px; }
.modal.auth #authError { margin-top: 12px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
#authWaitText { margin: 4px 0 14px; }

/* ---------- "Pick on the map" bar ---------- */
.pick-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px);
  background: var(--sb-bg); color: var(--sb-text); border: 1px solid var(--sb-border);
  border-left: 4px solid #16a34a; border-radius: var(--radius);
  padding: 8px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); font-size: 13px;
}

/* ---------- Popup (white, on the map) ---------- */
.popup { color: var(--pop-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; width: 270px; max-width: 100%; }
.popup h3 { margin: 0 0 2px; font-size: 15px; line-height: 1.25; }
.popup .pp-sub { color: var(--pop-muted); font-size: 12px; margin-bottom: 8px; }
.popup .pp-line { margin: 3px 0; overflow-wrap: anywhere; }
.popup a { color: #1d4ed8; }
.popup details { margin: 3px 0; }
.popup summary { cursor: pointer; }
.popup ul.hours { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: #374151; }
.pp-status { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 10px 0 8px; }
.pp-status button {
  font: inherit; font-size: 12px; padding: 6px 4px; border-radius: 6px; cursor: pointer;
  background: #fff; color: var(--pop-text); border: 2px solid var(--c);
}
.pp-status button[aria-pressed="true"] { background: var(--c); color: #fff; font-weight: 700; }
.pp-status button.none[aria-pressed="true"] { color: #fff; }
.popup textarea {
  width: 100%; min-height: 58px; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid #d1d5db; resize: vertical; color: var(--pop-text); background: #fff;
}
.pp-time { font-size: 11px; color: var(--pop-muted); margin-top: 3px; }
.pp-open { margin: 3px 0; font-weight: 700; }
.pp-open.is-open { color: #15803d; }
.pp-open.is-closed { color: #b91c1c; }
.pp-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-weight: 600; }

/* Google InfoWindow tweaks */
.gm-style .gm-style-iw-c { padding: 12px !important; }
.gm-style .gm-style-iw-d { overflow: auto !important; }

/* Leaflet popup tweaks (free map mode) */
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-container.bcm-pointer, .leaflet-container.bcm-pointer .leaflet-interactive { cursor: pointer !important; }

/* ---------- Map markers (HTML) ---------- */
.m-stop {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent-strong); color: #fff;
  font: 700 12px/22px system-ui, sans-serif; text-align: center; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer; user-select: none;
}
.m-start { width: 36px; height: 44px; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.m-start:active { cursor: grabbing; }
.m-start svg { display: block; width: 100%; height: 100%; }
.m-target { width: 36px; height: 36px; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.m-target:active { cursor: grabbing; }
.m-target svg { display: block; width: 100%; height: 100%; }
.m-new { position: relative; width: 36px; height: 44px; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.m-new:active { cursor: grabbing; }
.m-new svg { display: block; width: 100%; height: 100%; }
.m-new span {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #166534; color: #fff; font: 600 11px system-ui, sans-serif; padding: 2px 6px; border-radius: 4px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.m-radius { position: relative; width: 28px; height: 28px; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.m-radius:active { cursor: grabbing; }
.m-radius svg { display: block; width: 100%; height: 100%; }
.m-radius span {
  position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #dc2626; color: #fff; font: 600 11px system-ui, sans-serif; padding: 2px 6px; border-radius: 4px;
}
.target-row { margin-top: 6px; padding: 8px 10px; background: var(--sb-panel); border-radius: var(--radius); border-left: 3px solid #dc2626; }
.target-row .hint { margin: 0 0 6px; }
.m-me { position: relative; width: 18px; height: 18px; }
.m-me i { position: absolute; inset: 0; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.m-me::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(37,99,235,.25);
  animation: pulse 2s ease-out infinite;
}
.m-me span {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%); white-space: nowrap;
  background: #1e3a8a; color: #fff; font: 600 11px system-ui, sans-serif; padding: 2px 6px; border-radius: 4px;
}
@keyframes pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Phones: map on top, sidebar as bottom sheet ---------- */
@media (max-width: 859px) {
  .app { flex-direction: column-reverse; }
  .sidebar {
    width: 100%; flex: 0 0 52%; border-right: 0; border-top: 1px solid var(--sb-border);
    border-radius: 14px 14px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.35); z-index: 10;
  }
  .sidebar.collapsed { flex-basis: auto; }
  .sidebar.collapsed .sb-body { display: none; }
  .sheet-toggle { display: inline-block; }
  .sb-head { padding: 8px 14px; }
  .find { width: calc(100% - 130px); }
  .route-open { bottom: 38px; }
  .pick-bar { top: auto; bottom: 10px; }
  .modal { padding: 0; place-items: end stretch; }
  .modal-card { width: 100%; max-height: 92dvh; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .two { grid-template-columns: 1fr; }
  .hours-grid { grid-template-columns: auto 1fr 1fr; gap: 6px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .m-me::before { display: none; }
}