body { margin:0; background:#f4f6f8; color:#111; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; background:#111; color:#fff; }
.topbar a { color:#fff; text-decoration:none; margin-right:12px; }
.brand a { font-weight:700; letter-spacing:0.4px; }
.nav a { opacity:0.9; }
.main { padding: 16px; }

.row { display:flex; gap: 16px; align-items:flex-start; }
.panel { background:#fff; padding: 14px; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.panel.inner { margin-bottom: 12px; }

#authPanel { width: 360px; }
#mainPanel { flex:1; }

.grid2 { display:grid; grid-template-columns: 120px 1fr; gap: 8px 10px; align-items:center; }
.grid2 input, .grid2 select { width:100%; padding: 8px; border:1px solid #ddd; border-radius: 8px; }
textarea { width:100%; padding: 8px; border:1px solid #ddd; border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.actions { display:flex; gap: 8px; margin-top: 10px; }
button { padding: 9px 12px; border:0; border-radius: 8px; background:#111; color:#fff; cursor:pointer; }
button.secondary { background:#e7eaee; color:#111; }
button:disabled { opacity:0.5; cursor:not-allowed; }

.muted { color:#666; font-size: 13px; }
.status { margin-top: 10px; font-size: 13px; }
.hidden { display:none; }

.toolbar { display:flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tool { display:flex; flex-direction: column; gap: 6px; }
.tool label { font-size: 12px; color:#333; }
.tool input, .tool select { padding: 8px; border:1px solid #ddd; border-radius: 8px; min-width: 200px; }

.split { display:flex; gap: 12px; margin-top: 12px; }
.mapwrap { flex: 1; position: relative; }
#map { width: 100%; height: 70vh; border-radius: 10px; overflow:hidden; border: 1px solid #ddd; }
.maphint { position:absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,0.92); padding: 8px 10px; border-radius: 8px; font-size: 12px; border:1px solid #ddd; }
.side { width: 520px; }

.tablewrap { max-height: 36vh; overflow:auto; border:1px solid #ddd; border-radius: 8px; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; vertical-align: top; }
th { position: sticky; top: 0; background:#fafbfc; cursor:pointer; user-select:none; }
tr:hover td { background:#f7f9fb; }

.detailCard { border:1px solid #ddd; border-radius: 10px; padding: 10px; background:#fff; }
.mediaRow { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mediaRow img { max-width: 180px; border-radius: 10px; border:1px solid #ddd; }

.badge { display:inline-block; background:#f0f2f4; padding: 2px 8px; border-radius: 999px; font-size: 12px; margin-right: 6px; }

.colour-swatches { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.colour-swatch { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color 0.12s; flex-shrink:0; }
.colour-swatch.selected, .colour-swatch:hover { border-color:#333; }

/* ------------------------------------------------------------------------- */
/* Farm background maps modal */
/* ------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:flex-start; justify-content:center; padding: 30px 12px; z-index: 9999; }
.modal.hidden { display:none; }
.modalCard { width: min(920px, 96vw); background:#fff; border-radius: 12px; padding: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
.modalHeader { display:flex; justify-content:space-between; align-items:center; gap: 12px; }

.bbox4 { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bbox4 input { width:100%; padding: 8px; border:1px solid #ddd; border-radius: 8px; }

.list { border:1px solid #ddd; border-radius: 10px; padding: 10px; max-height: 260px; overflow:auto; background:#fafbfc; }
.list .item { display:flex; justify-content:space-between; gap: 10px; padding: 8px; border-bottom:1px solid #eee; align-items:center; }
.list .item:last-child { border-bottom:0; }
.list .meta { font-size: 12px; color:#666; }
.list .title { font-weight: 600; }