/* These are the picker's own styles. The ArcGIS Maps SDK's theme CSS is injected into at runtime (see map.js). Theme: light is the default set of variables on :root. Dark is applied either explicitly (data-theme="dark" — set by app.js from ?theme / the toggle) or, when not forced light, via prefers-color-scheme. */ :root { --pp-bg: #ffffff; --pp-fg: #1f2937; --pp-muted: #6b7280; --pp-border: #d1d5db; --pp-border-soft: #eef0f3; --pp-hover: #eff6ff; --pp-accent: #2563eb; --pp-accent-fg: #ffffff; --pp-shadow: 0 6px 24px rgba(0, 0, 0, .16); --pp-error: #b91c1c; --pp-error-bg: #fef2f2; --pp-error-border: #fecaca; --pp-hint-bg: rgba(37, 99, 235, .96); --pp-hint-fg: #ffffff; } :root[data-theme="dark"] { color-scheme: dark; --pp-bg: #2c2f34; --pp-fg: #e8eaed; --pp-muted: #a6abb3; --pp-border: #474c54; --pp-border-soft: #3a3e44; --pp-hover: #3a3f46; --pp-accent: #5b93f0; --pp-accent-fg: #ffffff; --pp-shadow: 0 8px 28px rgba(0, 0, 0, .5); --pp-error: #f1a3a3; --pp-error-bg: #3a2c2c; --pp-error-border: #6b4f4f; --pp-hint-bg: rgba(58, 63, 70, .96); --pp-hint-fg: #f3f4f6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pp-bg: #2c2f34; --pp-fg: #e8eaed; --pp-muted: #a6abb3; --pp-border: #474c54; --pp-border-soft: #3a3e44; --pp-hover: #3a3f46; --pp-accent: #5b93f0; --pp-accent-fg: #ffffff; --pp-shadow: 0 8px 28px rgba(0, 0, 0, .5); --pp-error: #f1a3a3; --pp-error-bg: #3a2c2c; --pp-error-border: #6b4f4f; --pp-hint-bg: rgba(58, 63, 70, .96); --pp-hint-fg: #f3f4f6; } } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { position: relative; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--pp-fg); background: var(--pp-bg); } button { font: inherit; } .root { position: absolute; inset: 0; display: flex; flex-direction: row; } /* --- map (ArcGIS MapView fills .map) --- */ .map-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .map { position: absolute; inset: 0; background: #e5e7eb; } :root[data-theme="dark"] .map { background: #2b2f34; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map { background: #2b2f34; } } /* While the user hasn't picked a spot yet, signal that the map is clickable. */ .root.pristine .esri-view-surface { cursor: crosshair !important; } /* --- map tool buttons (bottom-left of the map): theme + basemap --- */ .map-tools { position: absolute; left: 10px; bottom: 10px; z-index: 1000; display: flex; gap: 8px; } .map-tool { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--pp-bg); color: var(--pp-fg); border: 1px solid var(--pp-border); box-shadow: var(--pp-shadow); } .map-tool:hover { background: var(--pp-hover); } .map-tool.is-active { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-fg); } /* --- sidebar --- */ .sidebar { flex: 0 0 312px; width: 312px; overflow-y: auto; display: flex; flex-direction: column; background: var(--pp-bg); color: var(--pp-fg); border-left: 1px solid var(--pp-border); } .card { padding: 12px; border-bottom: 1px solid var(--pp-border); } .card:last-child { border-bottom: none; } /* confirm bar pinned to the bottom of the sidebar; the button spans full width */ .confirm-bar { margin-top: auto; padding: 12px; border-top: 1px solid var(--pp-border); } .confirm-bar[hidden] { display: none; } .confirm-bar .btn { display: block; width: 100%; flex: none; } .w-full { display: block; width: 100%; flex: none; } /* --- locked / confirmed view (replaces map + sidebar) --- */ .locked-view { display: none; flex: 1 1 auto; flex-direction: column; padding: 16px; overflow: auto; background: var(--pp-bg); } .root.locked .map-wrap, .root.locked .sidebar { display: none; } .root.locked .locked-view { display: flex; } .locked-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #16a34a; margin-bottom: 14px; } :root[data-theme="dark"] .locked-head { color: #4ade80; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .locked-head { color: #4ade80; } } .locked-actions { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 14px; } .locked-actions .btn { flex: 0 0 auto; padding: 9px 18px; } .card-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 10px; } .pane[hidden] { display: none; } .card input { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--pp-border); border-radius: 9px; background: var(--pp-bg); color: var(--pp-fg); } .card input::placeholder { color: var(--pp-muted); } .card input:focus { outline: 2px solid var(--pp-accent); outline-offset: -1px; } .street-results { margin-top: 6px; border: 1px solid var(--pp-border); border-radius: 9px; max-height: 220px; overflow: auto; background: var(--pp-bg); } .street-results[hidden] { display: none; } .s-item { display: block; width: 100%; text-align: left; border: none; cursor: pointer; padding: 9px 11px; background: none; color: var(--pp-fg); border-bottom: 1px solid var(--pp-border-soft); } .s-item:last-child { border-bottom: none; } .s-item:hover { background: var(--pp-hover); } .s-item small { display: block; color: var(--pp-muted); font-size: 11px; } .street-results .empty { padding: 9px 11px; color: var(--pp-muted); } .loader { display: flex; align-items: center; gap: 8px; padding: 11px; color: var(--pp-muted); } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pp-border); border-top-color: var(--pp-accent); animation: pp-spin .7s linear infinite; } @keyframes pp-spin { to { transform: rotate(360deg); } } /* Small spinner shown at the clicked point while nearby parcels load. */ .map-busy { position: absolute; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pp-bg); box-shadow: var(--pp-shadow); } .map-busy[hidden] { display: none; } .chosen { font-size: 13px; color: var(--pp-muted); margin-bottom: 8px; } .actions { display: flex; gap: 8px; margin-top: 10px; } .btn { flex: 1; padding: 9px 10px; border-radius: 9px; cursor: pointer; border: 1px solid var(--pp-border); background: var(--pp-bg); color: var(--pp-fg); } .btn.primary { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-fg); } .btn.primary:disabled { opacity: .5; cursor: default; } .btn.ghost:hover { background: var(--pp-hover); } /* --- selection card --- */ .placeholder { color: var(--pp-muted); font-size: 13px; } .subparcel[hidden], .parcel-details[hidden] { display: none; } .subparcel-list { border: 1px solid var(--pp-border); border-radius: 9px; overflow: hidden; } .sp-item { display: block; width: 100%; text-align: left; border: none; cursor: pointer; padding: 8px 11px; background: none; color: var(--pp-fg); border-bottom: 1px solid var(--pp-border); } .sp-item:last-child { border-bottom: none; } .sp-item:hover { background: var(--pp-hover); } /* field tables (selected parcel + each sub-parcel option) */ .pd-label { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .pd-table { display: table; width: 100%; } .pd-extra { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--pp-border); } .pd-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; } .pd-row .k { color: var(--pp-muted); flex: 0 0 auto; } .pd-row .v { font-weight: 600; text-align: right; word-break: break-word; } /* compact + emphasise the Partida (first row) inside a sub-parcel option */ .sp-item .pd-row { font-size: 12px; padding: 2px 0; } .sp-item .pd-row:first-child .k, .sp-item .pd-row:first-child .v { color: var(--pp-accent); } /* --- map hint (over the map) --- */ .map-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000; display: none; align-items: center; gap: 8px; background: var(--pp-hint-bg); color: var(--pp-hint-fg); padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; box-shadow: var(--pp-shadow); pointer-events: none; max-width: 85%; white-space: nowrap; } .root.pristine .map-hint { display: flex; animation: pp-bob 1.8s ease-in-out infinite; } .map-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pp-hint-fg); } @keyframes pp-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } } /* --- status (over the map; sits above the map-tool buttons) --- */ .status { position: absolute; bottom: 54px; left: 10px; z-index: 1000; background: var(--pp-bg); color: var(--pp-fg); border: 1px solid var(--pp-border); border-radius: 8px; padding: 6px 10px; font-size: 13px; max-width: 80%; box-shadow: var(--pp-shadow); } .status[hidden] { display: none; } .status.error { color: var(--pp-error); border-color: var(--pp-error-border); background: var(--pp-error-bg); } /* --- responsive: stack sidebar under the map on narrow screens / embeds --- */ @media (max-width: 560px) { .root { flex-direction: column; } .map-wrap { flex: 1 1 auto; min-height: 240px; } .sidebar { flex: 0 0 auto; width: auto; max-height: 46%; border-left: none; border-top: 1px solid var(--pp-border); } }