/* GeoFenceIt brand - same system as geofenceit.com
   Fairway   #153F29  primary - logo, headers, app chrome (the top bar)
   Brass     #C59E58  accent - used sparingly (logo dot, "It", confirming actions)
   Clubhouse #121E17  text, dark surfaces
   Ivory     #F8F5EC  page background
   Linen     #EBE4D5  cards, dividers
   Zone status colours share one OKLCH lightness/chroma so no state reads louder than
   another: in #307A4F, warning #8A5F18, out/locked #9A5146 (text/badges on light), and
   a lighter set for map markers (js/map.js). Cormorant Garamond for headings and the
   wordmark, Manrope for everything else. */
:root {
  --fairway: #153f29;
  --fairway-2: #1c5236;
  --brass: #c59e58;
  --brass-2: #d4b274;
  --clubhouse: #121e17;
  --ivory: #f8f5ec;
  --linen: #ebe4d5;
  --card: #fffdf8;

  --zone-in: #307a4f;
  --zone-warn: #8a5f18;
  --zone-out: #9a5146;
  --zone-out-2: #84443a;
  --neutral: #606a74;

  /* names the pages' inline styles and scripts already use */
  --bg: var(--ivory);
  --panel: var(--card);
  --panel-border: rgba(21, 63, 41, 0.12);
  --panel-shadow: 0 1px 2px rgba(18, 30, 23, 0.04), 0 10px 30px -18px rgba(18, 30, 23, 0.25);
  --text: var(--clubhouse);
  --text-dim: rgba(18, 30, 23, 0.6);
  --accent: var(--fairway);
  --accent-dark: var(--fairway);
  --danger: var(--zone-out);
  --danger-dark: var(--zone-out-2);
  --success: var(--brass);
  --success-dark: var(--zone-warn);
  --warning: var(--zone-warn);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar (Fairway) ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1.5rem;
  background: var(--fairway);
  color: var(--ivory);
  box-shadow: 0 8px 24px -16px rgba(18, 30, 23, 0.6);
}
nav .brand { display: flex; align-items: center; gap: 0.6rem; margin-right: 1.4rem; color: var(--ivory); text-decoration: none; }
.brand-ring { color: var(--ivory); flex: none; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1; letter-spacing: -0.005em; }
.wordmark .it { color: var(--brass); }
.brand-client { margin-left: 0.2rem; padding-left: 0.8rem; border-left: 1px solid rgba(248, 245, 236, 0.25); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-2); }
nav a {
  color: rgba(248, 245, 236, 0.78);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.92rem;
  transition: background 0.2s, color 0.2s;
}
nav a:hover { color: var(--ivory); background: rgba(248, 245, 236, 0.1); }
nav a.active { color: var(--clubhouse); background: var(--ivory); }
nav .brand:hover { background: none; }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.82rem; color: rgba(248, 245, 236, 0.7); }
.nav-right a { color: rgba(248, 245, 236, 0.85); border: 1px solid rgba(248, 245, 236, 0.3); padding: 0.35rem 0.85rem; }
.nav-right a:hover { background: var(--brass); border-color: var(--brass); color: var(--clubhouse); }

/* ---------- login ---------- */
.login-body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(18, 30, 23, 0.55), rgba(21, 63, 41, 0.8)), url(../assets/login-bg.jpg) center / cover no-repeat, var(--fairway);
}
.login-main { width: 100%; max-width: 410px; padding: 1rem; }
.login-panel { display: flex; flex-direction: column; gap: 1rem; padding: 2.4rem 2.2rem 2rem; border-radius: 24px; background: rgba(248, 245, 236, 0.95); border: 1px solid rgba(248, 245, 236, 0.6); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 0.7rem; color: var(--fairway); }
.login-brand .brand-ring { color: var(--fairway); }
.login-brand .wordmark { font-size: 2.3rem; color: var(--fairway); }
.login-client { margin: -0.4rem 0 0.6rem; text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zone-warn); }
.login-panel label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 600; color: var(--fairway); gap: 0.4rem; }
.login-panel input { font-size: 0.98rem; padding: 0.75rem 0.85rem; border-radius: 12px; }
.login-panel button { padding: 0.85rem; font-size: 1rem; margin: 0.4rem 0 0; border-radius: 999px; }

.badge-role-admin { background: rgba(197, 158, 88, 0.2); color: var(--zone-warn); font-size: 0.74rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 700; }
.badge-role-staff { background: rgba(21, 63, 41, 0.08); color: var(--fairway); font-size: 0.74rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 700; }

/* ---------- page ---------- */
main { padding: 1.8rem 1.6rem 2.4rem; max-width: 1440px; margin: 0 auto; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 2.5rem; line-height: 1.05; color: var(--fairway); margin: 0 0 1.1rem; letter-spacing: -0.01em; }
h2 { font-family: var(--serif); font-weight: 600; color: var(--fairway); }
.panel-title { font-size: 1.45rem; line-height: 1.1; margin: 0 0 0.85rem; }
.page-intro { color: var(--text-dim); margin: -0.4rem 0 1.4rem; max-width: 980px; line-height: 1.65; }
.page-intro strong { color: var(--clubhouse); }
.zone-word.allowed { color: var(--zone-in); }
.zone-word.forbidden { color: var(--zone-out); }
.zone-word.cart { color: var(--zone-warn); }
code { font-size: 0.86em; background: rgba(21, 63, 41, 0.07); padding: 0.1rem 0.35rem; border-radius: 5px; color: var(--fairway); }

.layout-with-sidebar { display: grid; grid-template-columns: 1fr 360px; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .layout-with-sidebar { grid-template-columns: 1fr; } }
/* Geofences page: carts list | map | editor panel. Narrower screens put the carts list
   on its own row above the map, then everything stacks. */
.layout-three-col { grid-template-columns: 230px 1fr 360px; }
@media (max-width: 1200px) {
  .layout-three-col { grid-template-columns: 1fr 360px; }
  .layout-three-col > .carts-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .layout-three-col { grid-template-columns: 1fr; } }
.carts-panel { padding: 1rem 0.8rem; }
.carts-panel td { padding: 0.5rem 0.4rem; }

#map { height: 74vh; min-height: 440px; border-radius: 18px; border: 1px solid var(--panel-border); background: #e3dccb; box-shadow: var(--panel-shadow); }
.map-wrap { position: relative; }
.map-search {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000; /* above Leaflet's panes, same layer as its own controls */
  display: flex;
  gap: 0.4rem;
  background: rgba(255, 253, 248, 0.95);
  padding: 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}
.map-search input[type="text"] { width: 250px; border-radius: 999px; border-color: transparent; background: transparent; }
.map-search button { border-radius: 999px; margin: 0; }
.search-results { display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; background: var(--card); border: 1px solid var(--panel-border); border-radius: 14px; max-height: 260px; overflow-y: auto; box-shadow: var(--panel-shadow); }
.search-results.visible { display: block; }
.search-results > div { padding: 0.55rem 0.8rem; font-size: 0.84rem; cursor: pointer; border-bottom: 1px solid var(--panel-border); }
.search-results > div:last-child { border-bottom: none; }
.search-results > div:hover { background: var(--ivory); }
.search-results .search-empty { cursor: default; color: var(--text-dim); }
.search-results .search-empty:hover { background: none; }

/* ---------- Leaflet controls in the brand ---------- */
.leaflet-bar a, .leaflet-control-layers-toggle { background-color: var(--card) !important; color: var(--fairway) !important; }
.leaflet-bar { border: 1px solid var(--panel-border) !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--panel-shadow) !important; }
.leaflet-bar a:hover { background-color: var(--ivory) !important; }
.leaflet-control-layers { border-radius: 12px !important; border: 1px solid var(--panel-border) !important; box-shadow: var(--panel-shadow) !important; }
.leaflet-control-layers-expanded { background: var(--card); color: var(--text); font-family: var(--sans); }
.leaflet-popup-content-wrapper { border-radius: 14px; font-family: var(--sans); color: var(--text); box-shadow: 0 18px 40px -18px rgba(18, 30, 23, 0.5); }
.leaflet-popup-content strong { color: var(--fairway); }
.leaflet-container { font-family: var(--sans); }

/* ---------- panels + tables ---------- */
.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px; padding: 1.25rem 1.3rem; box-shadow: var(--panel-shadow); }
.subpanel { background: var(--ivory); border: 1px solid var(--panel-border); border-radius: 12px; padding: 0.75rem; margin-bottom: 0.85rem; }
.subpanel label { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-dim); gap: 0.35rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--panel-border); }
th { color: var(--text-dim); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; background: rgba(235, 228, 213, 0.5); }
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }
tr.row-inactive { opacity: 0.45; }
tr.device-row { cursor: pointer; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(235, 228, 213, 0.45); }

/* Wide/dense content (like a table crammed into the sidebar column) scrolls inside its
   own container instead of overflowing or forcing the whole page wider. */
.table-scroll { overflow-x: auto; }
.table-subtext { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; margin-top: 0.2rem; }
/* Buttons stack vertically instead of squeezing side-by-side in a narrow column. */
.table-compact .table-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; }
.table-compact .table-actions button { margin-right: 0; font-size: 0.78rem; padding: 0.42rem 0.6rem; width: 100%; }

.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.45rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.badge-stale, .badge-active, .badge-locked { font-size: 0.7rem; padding: 0.18rem 0.55rem; border-radius: 999px; margin-left: 0.4rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.badge-stale { background: rgba(138, 95, 24, 0.12); color: var(--zone-warn); }
.badge-active { background: rgba(48, 122, 79, 0.13); color: var(--zone-in); }
.badge-locked { background: rgba(154, 81, 70, 0.13); color: var(--zone-out); }
/* Geofence type switch in the editor's versions list (js/geofence-editor.js). */
.fence-type-select { margin-top: 0.35rem; font-size: 0.75rem; padding: 0.2rem 0.4rem; font-weight: 700; border-radius: 999px; }
.fence-type-select.fence-type-allowed { color: var(--zone-in); }
.fence-type-select.fence-type-forbidden { color: var(--zone-out); }

/* ---------- map markers ---------- */
.cart-marker {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory); font-size: 0.72rem; font-weight: 800;
  border: 2.5px solid var(--ivory);
  box-shadow: 0 0 0 1.5px rgba(18, 30, 23, 0.45), 0 4px 10px rgba(18, 30, 23, 0.45);
}
.cart-marker.marker-stale { opacity: 0.55; border-style: dashed; }
.cart-marker.marker-locked { border-color: #f1c8bf; box-shadow: 0 0 0 2.5px var(--zone-out), 0 4px 10px rgba(18, 30, 23, 0.45); }
.marker-lock-badge { position: absolute; top: -9px; right: -9px; font-size: 0.68rem; line-height: 1; background: var(--card); border-radius: 50%; padding: 2px; box-shadow: 0 1px 4px rgba(18, 30, 23, 0.35); }
/* Geofence editor's live cart dots (js/geofence-editor.js) - a small number label beside
   each dot, no arrow, so it never covers the exact point. */
.leaflet-tooltip.cart-dot-label { padding: 1px 6px; font-size: 0.7rem; font-weight: 800; color: var(--fairway); background: rgba(255, 253, 248, 0.95); border: none; border-radius: 999px; box-shadow: 0 1px 4px rgba(18, 30, 23, 0.35); }
.leaflet-tooltip.cart-dot-label::before { display: none; }

.popup-stale { color: var(--zone-warn); margin-top: 0.3rem; font-size: 0.85rem; }
.popup-locked { color: var(--zone-out); margin-top: 0.2rem; font-size: 0.85rem; font-weight: 700; }
.popup-override { color: var(--zone-warn); margin-top: 0.2rem; font-size: 0.85rem; }

.status-message { font-size: 0.9rem; color: var(--text-dim); margin: 0.6rem 0; min-height: 1.2em; }
.status-error { color: var(--zone-out); font-weight: 600; }

/* ---------- inputs ---------- */
input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="search"], select, textarea {
  font: inherit;
  font-size: 0.92rem;
  background: var(--card);
  border: 1px solid rgba(21, 63, 41, 0.22);
  color: var(--text);
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fairway); box-shadow: 0 0 0 4px rgba(21, 63, 41, 0.12); }
input[type="range"] { accent-color: var(--fairway); }

/* ---------- buttons: one colour per action type ----------
   default = Fairway (save, add, search, log in) · .btn-success = Brass (publish, activate,
   unlock, grant access) · .btn-danger = brick (delete, deactivate, lock) ·
   .btn-secondary = outlined (edit, new draft, reset password) */
button {
  font-family: var(--sans);
  background: var(--fairway);
  color: var(--ivory);
  border: 1px solid transparent;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  margin-right: 0.3rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s;
}
button:hover { background: var(--fairway-2); box-shadow: 0 8px 18px -12px rgba(21, 63, 41, 0.9); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
button.btn-danger { background: var(--zone-out); }
button.btn-danger:hover { background: var(--zone-out-2); }
button.btn-success { background: var(--brass); color: var(--clubhouse); }
button.btn-success:hover { background: var(--brass-2); }
button.btn-secondary { background: transparent; color: var(--fairway); border-color: rgba(21, 63, 41, 0.35); }
button.btn-secondary:hover { background: rgba(21, 63, 41, 0.07); border-color: var(--fairway); box-shadow: none; }

form.inline { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
form.inline label { display: flex; flex-direction: column; font-size: 0.78rem; font-weight: 600; color: var(--fairway); gap: 0.3rem; }

tr.alert-danger td:nth-child(3) { color: var(--zone-out); font-weight: 700; }
tr.alert-warning td:nth-child(3) { color: var(--zone-warn); font-weight: 700; }

.section-gap { margin-top: 1.3rem; }

/* Small spinner shown wherever a table/panel is waiting on its first fetch from the
   backend (see dashboard/js/loading.js). */
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(21, 63, 41, 0.18); border-top-color: var(--brass); border-radius: 50%; vertical-align: middle; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.table-loading-row td { text-align: center; color: var(--text-dim); padding: 1.4rem 0.5rem; }
.table-loading-row .spinner { margin-right: 0.5rem; }

/* ---------- Geofences workspace (geofences.html) ----------
   The page fills the window: carts | map | editor + fences, each list scrolling inside
   its own panel instead of stretching the page. */
nav { min-height: 64px; }
.app-main { display: flex; flex-direction: column; height: calc(100vh - 64px); height: calc(100dvh - 64px); padding-top: 1.2rem; padding-bottom: 1.1rem; max-width: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.page-head h1 { margin: 0; }
.legend { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.legend-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.8rem; border-radius: 999px; background: var(--card); border: 1px solid var(--panel-border); font-size: 0.8rem; font-weight: 600; color: var(--fairway); }
.legend-chip i { display: inline-block; flex: none; }
.lg-allowed { width: 22px; border-top: 3px dashed #c59e58; }
.lg-nogo { width: 22px; height: 12px; border: 2px dashed #bf6b5e; background: rgba(191, 107, 94, 0.22); border-radius: 3px; }
.lg-cart { width: 11px; height: 11px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(21, 63, 41, 0.35); }
.help-pop { position: relative; }
.help-pop summary { list-style: none; cursor: pointer; padding: 0.38rem 0.85rem; border-radius: 999px; background: var(--fairway); color: var(--ivory); font-size: 0.8rem; font-weight: 700; }
.help-pop summary::-webkit-details-marker { display: none; }
.help-pop summary::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 0.45rem; border-radius: 50%; background: var(--brass); color: var(--clubhouse); font-size: 0.7rem; }
.help-card { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; width: min(440px, 90vw); padding: 1.1rem 1.2rem 0.9rem; border-radius: 16px; background: var(--card); border: 1px solid var(--panel-border); box-shadow: 0 24px 50px -24px rgba(18, 30, 23, 0.55); font-size: 0.88rem; line-height: 1.55; color: var(--text); }
.help-card ol { margin: 0 0 0.6rem; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.help-card p { margin: 0; color: var(--text-dim); font-size: 0.82rem; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 420px; gap: 1rem; }
.workspace .map-wrap, .workspace #map { height: 100%; min-height: 0; }
.ws-panel { display: flex; flex-direction: column; min-height: 0; }
.ws-side { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.ws-head .panel-title { margin: 0; }
.count-pill { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(21, 63, 41, 0.08); color: var(--fairway); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.scroll-area { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(21, 63, 41, 0.3) transparent; }
.carts-panel .scroll-area { margin: 0 -0.4rem; padding: 0 0.4rem; }
.carts-panel tbody tr td { border-bottom-color: rgba(21, 63, 41, 0.08); }

.editor-card { flex: none; padding: 1rem 1.2rem 0.85rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--fairway); margin-bottom: 0.55rem; }
.field input, .field select { width: 100%; font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 110px; gap: 0.7rem; }
details.mini { margin: 0 0 0.8rem; border: 1px dashed rgba(21, 63, 41, 0.25); border-radius: 12px; padding: 0.45rem 0.75rem; }
details.mini summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--fairway); }
details.mini .hint { margin: 0.45rem 0; font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; }
.import-row { display: flex; gap: 0.4rem; margin-bottom: 0.3rem; }
.import-row select { flex: 1; min-width: 0; }
.btn-block { display: block; width: 100%; margin: 0; padding: 0.7rem; font-size: 0.92rem; }
button.btn-xs { padding: 0.3rem 0.7rem; font-size: 0.76rem; margin: 0; }
.editor-card .status-message { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.5; }
/* The editor folds down to its title bar until you draw, Edit a fence, or open it. */
.editor-card.collapsed .editor-body { display: none; }
.editor-card.collapsed .ws-head { margin-bottom: 0; }
.editor-toggle { all: unset; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; border-radius: 8px; }
.editor-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.editor-toggle .panel-title { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--fairway); }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--fairway); border-bottom: 2px solid var(--fairway); transform: rotate(45deg); margin-top: -4px; transition: transform 0.2s; }
.editor-card.collapsed .chev { transform: rotate(-45deg); margin-top: 0; }

.fences-card { flex: 1; min-height: 340px; padding: 1.1rem 1.2rem 0.6rem; }
.fence-tools { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.fence-tools input[type="search"] { flex: 1; min-width: 0; border-radius: 999px; padding: 0.45rem 0.9rem; }
.seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(21, 63, 41, 0.07); }
.seg button { background: transparent; color: var(--text-dim); margin: 0; padding: 0.3rem 0.85rem; font-size: 0.76rem; box-shadow: none; }
.seg button:hover { background: rgba(21, 63, 41, 0.08); color: var(--fairway); box-shadow: none; }
.seg button.on { background: var(--card); color: var(--fairway); box-shadow: 0 1px 4px rgba(18, 30, 23, 0.18); }
.fence-list { list-style: none; margin: 0 -0.4rem; padding: 0 0.4rem 0.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.fence-item { position: relative; padding: 0.75rem 0.85rem 0.75rem 1.05rem; border-radius: 14px; background: var(--ivory); border: 1px solid var(--panel-border); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.fence-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #c59e58; }
.fence-item.forbidden::before { background: #bf6b5e; }
.fence-item:hover { border-color: rgba(21, 63, 41, 0.3); box-shadow: 0 8px 20px -16px rgba(18, 30, 23, 0.6); }
.fence-item.previewing { background: #fffaf0; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(197, 158, 88, 0.22); }
.fence-item.editing { border-color: var(--fairway); }
.fence-title { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.fence-name { font-weight: 700; color: var(--clubhouse); overflow-wrap: anywhere; }
.fence-ver { font-size: 0.74rem; font-weight: 700; color: var(--text-dim); }
.badge-draft { font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 700; background: rgba(96, 106, 116, 0.12); color: var(--neutral); }
.fence-meta { margin: 0.25rem 0 0.6rem; font-size: 0.76rem; color: var(--text-dim); }
.fence-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.fence-actions .fence-type-select { margin: 0 auto 0 0; }
.list-empty { padding: 1.4rem 0.4rem; text-align: center; color: var(--text-dim); font-size: 0.86rem; }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr); }
  .workspace > .carts-panel { grid-column: 1 / -1; max-height: 190px; }
}
@media (max-width: 900px) {
  .app-main { height: auto; }
  .workspace { display: flex; flex-direction: column; }
  .workspace .map-wrap, .workspace #map { height: 62vh; min-height: 380px; }
  .ws-side .fences-card { max-height: 70vh; }
}

@media (max-width: 760px) {
  nav { flex-wrap: wrap; padding: 0.6rem 0.9rem; }
  nav .brand { width: 100%; margin: 0 0 0.3rem; }
  .brand-client { display: none; }
  .nav-right { margin-left: auto; }
  main { padding: 1.2rem 0.9rem 2rem; }
  h1 { font-size: 2rem; }
}