:root { --gap: 10px; --accent: #0b5fff; --bg:#f7f8fb; --border:#e3e6ef; --text:#1f2430; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); }
.app { display: grid; grid-template-columns: 340px 1fr; grid-template-rows: 100vh; gap: 0; transition: grid-template-columns 220ms ease; }
.sidebar { background:#fff; border-right:1px solid var(--border); padding:16px; overflow:auto; transition: width 220ms ease, transform 220ms ease, opacity 220ms ease; }
.main { padding:14px; display:flex; flex-direction:column; gap:12px; }
h1 { margin: 0 0 10px 0; font-size: 0.8rem; }
h4 { margin: 10px 0 8px; font-size: 0.8rem; }


button {
  font-size: 0.7rem;
}

.toolbar { display:flex; flex-direction:column; gap:8px; }
.toolbar hr { border:none; border-top:1px dashed var(--border); margin:4px 0; }
.export-group, .import-group { display:flex; flex-wrap:wrap; gap:6px; }
.inline { display:flex; align-items:center; gap:6px; }
.filters fieldset { border:1px solid var(--border); padding:8px; border-radius:8px; background:#fafbff; }
.filters label { display:flex; align-items:center; gap:6px; margin:6px 0; }
.filter-actions { display:flex; gap:8px; }
.lista { list-style:none; padding:0; margin:8px 0 10px; }
.lista li { padding:8px 0; border-bottom:1px dashed var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.lista li .actions button { margin-left:6px; }

.filters label {   font-size: 0.7rem; /* lub np. 14px */
}

#map { flex:1; min-height: 60vh; border:1px solid var(--border); border-radius:8px; background:#eef1f7; }
.pager { display:flex; gap:8px; align-items:center; }
.hint { font-size:0.8rem; color:#5f6b85; }
button { padding:8px 8px; border:1px solid var(--border); background:#fff; cursor:pointer; border-radius:6px; }
button:hover { background:#f0f6ff; border-color: var(--accent); }
button.primary { background:#0b5fff; color:#fff; border-color:#0b5fff; }
button.secondary { background:#fff; }
select, input[type="date"], input[type="search"] { padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.edit-btn { background:#e9f4ff; }
.delete-btn { background:#ffecec; }

/* Collapsed state */
.app.collapsed { grid-template-columns: 35px 1fr; }
.app.collapsed .sidebar { width: 35px; overflow: hidden; opacity: .96; }
.app.collapsed .sidebar > :not(h1) { display: none; }

/* Edge toggle: stały uchwyt */
.edge-toggle { position: fixed; left: 8px; top: 8px; z-index: 9999; width: 36px; height: 36px; display: grid; place-items: center; background: #ffffffcc; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); cursor: pointer; user-select: none; }
.edge-toggle:hover { background: #f0f6ff; border-color: var(--accent); }
.app.collapsed ~ .edge-toggle { left: 8px; }

/* Ghost button in H1 */
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 6px; line-height: 1; }
button.ghost:hover { background: #f0f6ff; border-color: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  .app { grid-template-columns: 30px 1fr; }
  .sidebar > :not(h1) { display: none; }
}