/* SY GIS Boring - base layout (structure only). Colours, type and the workspace shell come from sy-ui.css,
   which app.js injects after this sheet - the same arrangement as SY Pave / SY GirderNL / SY Column. */
* { box-sizing: border-box; }
html, body { margin: 0; }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; }
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
.brand-icon { display: inline-block; width: 26px; height: 26px; background:
  radial-gradient(circle at 50% 38%, #fff 0 4px, transparent 4.5px), #d9341b; clip-path: polygon(50% 100%, 8% 42%, 8% 0, 92% 0, 92% 42%); }
.btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn:disabled { cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; padding: 7px 9px; font: inherit; }
.grid { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }
.card { margin: 0 0 16px; }
.msg { padding: 10px 12px; margin: 0 0 14px; font-size: 13px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th, table.t td { padding: 6px 8px; text-align: left; vertical-align: middle; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t tr.click { cursor: pointer; }
.tablewrap { overflow-x: auto; }
table.edit { table-layout: fixed; min-width: 0; }
@media (max-width: 1100px) { table.edit { min-width: 780px; } }
table.edit input[type=number] { -moz-appearance: textfield; appearance: textfield; }
table.edit input[type=number]::-webkit-outer-spin-button, table.edit input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.edit input, table.edit select { width: 100%; min-width: 0; padding: 5px 4px; font: inherit; font-size: 12.5px; }
table.edit th { padding: 6px 4px; white-space: normal; line-height: 1.2; vertical-align: bottom; }
table.edit th:first-child { width: 28px; } table.edit th:last-child { width: 36px; }
table.edit.layers th:nth-child(4) { width: 70px; } table.edit.layers th:nth-child(5) { width: 54px; } table.edit.layers th:nth-child(6) { width: 96px; } table.edit.layers th:nth-child(13) { width: 62px; }
table.edit.samples th:nth-child(3) { width: 72px; }
table.edit td { padding: 3px 2px; }
table.edit td.idx { width: 28px; text-align: center; font-weight: 700; }
.gate { margin: 60px auto; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2000; padding: 10px 16px; max-width: min(92vw, 560px); font-size: 13px; }
.map { width: 100%; height: clamp(320px, calc(100vh - 250px), 760px); }
.map.small { height: 300px; }
.map-fallback { position: relative; background: #f4f3ef; overflow: hidden; }
.map-fallback .pt { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #141414; cursor: pointer; }
.map-fallback .note { position: absolute; left: 10px; bottom: 8px; font-size: 11px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 8px 0 0; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #141414; margin-right: 5px; vertical-align: -1px; }
.soilcol { display: block; width: 100%; height: auto; }
.modal-back { position: fixed; inset: 0; background: rgba(20,20,20,.45); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; max-width: 680px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px 24px; }
.modal p { margin: 0 0 10px; }