:root {
  --teal: #00695c;
  --teal-dark: #004d40;
  --bg: #f5f7f6;
  --border: #dde3e1;
  --text: #1a1f1e;
  --danger: #c62828;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
}
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
button.danger { color: var(--danger); border-color: var(--danger); }

input, select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

/* ---- login ---- */
.login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-card {
  background: #fff; padding: 32px; border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  width: 320px; display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { margin: 0; color: var(--teal-dark); }
.login-card .subtitle { margin: 0 0 8px; color: #667; font-size: 14px; }
.login-card button { background: var(--teal); color: #fff; border-color: var(--teal); padding: 10px; }
.error { color: var(--danger); font-size: 13px; margin: 0; }

/* ---- shell ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 200px; background: var(--teal-dark); color: #fff;
  display: flex; flex-direction: column; padding: 16px 0; flex-shrink: 0;
}
.sidebar .brand { font-weight: 700; font-size: 18px; padding: 0 16px 16px; }
.sidebar button {
  background: none; border: none; color: #cfe3df; text-align: left;
  padding: 12px 16px; font-size: 14px; border-radius: 0;
}
.sidebar button.active { background: rgba(255,255,255,0.12); color: #fff; font-weight: 600; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,0.15); }
.sidebar-footer .who { font-size: 13px; margin-bottom: 8px; color: #cfe3df; }
.sidebar-footer .logout { width: 100%; background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); }

.content { flex: 1; padding: 24px 32px; overflow-x: auto; }
.content h2 { margin-top: 0; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .count { margin-left: auto; color: #667; font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { background: #eef2f1; font-weight: 600; }
tr.disabled td { opacity: 0.5; }
td.actions { display: flex; gap: 6px; white-space: nowrap; }
td.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; background: #e0e0e0; color: #333;
}
.badge.danger { background: #fdecea; color: var(--danger); }
.badge.status-approved { background: #e3f2e9; color: #1b5e20; }
.badge.status-pending { background: #fff3e0; color: #e65100; }
.badge.status-rejected { background: #fdecea; color: var(--danger); }

.pager { display: flex; gap: 8px; margin-top: 12px; }

/* ---- photo grid ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.photo-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.photo-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: #eee; }
.photo-card .photo-meta { padding: 8px 10px; font-size: 13px; }
.photo-card .dim { color: #778; font-size: 12px; }
.photo-card .actions { display: flex; gap: 6px; padding: 0 10px 10px; }

.dim { color: #778; font-size: 12px; }

/* ---- modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal {
  background: #fff; border-radius: 10px; padding: 24px; width: 480px;
  max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.modal h3 { margin: 0 0 8px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #556; }
.modal label input, .modal label select { font-size: 14px; }
/* flex-shrink: 0 is required, not cosmetic — .modal is a flex column with
   max-height + overflow-y:auto, and this div has no normal-flow content of
   its own (MapLibre's canvas container is absolutely positioned), so its
   flexbox-computed min-height is 0: without flex-shrink:0 the flex algorithm
   crushes it to 0px before touching the text inputs' own min-content size. */
#poi-edit-map { width: 100%; height: 220px; min-height: 220px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }

.hours-grid { display: flex; flex-direction: column; gap: 6px; }
.hours-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hours-row .hours-day { width: 84px; flex-shrink: 0; }
.hours-row .hours-closed { display: flex; align-items: center; gap: 4px; width: 80px; flex-shrink: 0; color: #556; font-size: 12px; }
.hours-row input[type="time"] { padding: 4px 6px; font-size: 13px; width: 110px; }
.hours-row input[type="time"]:disabled { background: #f2f2f2; color: #aaa; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }