*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-open: #e74c3c;
  --color-in-progress: #f39c12;
  --color-resolved: #27ae60;
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-text: #222;
  --color-muted: #666;
  --color-border: #ddd;
  --radius: 8px;
  --topbar-height: 56px;
}

body { font-family: system-ui, sans-serif; color: var(--color-text); background: var(--color-bg); }

/* ── Login ── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 1rem; }
.login-container { background: var(--color-surface); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 360px; box-shadow: 0 2px 16px rgba(0,0,0,.1); }
.login-container h1 { font-size: 1.25rem; margin-bottom: 1.5rem; text-align: center; }
.login-container label { display: block; font-size: .875rem; color: var(--color-muted); margin-bottom: .25rem; }
.login-container input { display: block; width: 100%; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; margin-bottom: 1rem; }
.login-container button[type=submit] { width: 100%; padding: .875rem; background: #2563eb; color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer; }
.login-container button[type=submit]:hover { background: #1d4ed8; }
.error-msg { color: var(--color-open); font-size: .875rem; margin-bottom: .75rem; }

/* ── Map page layout ── */
.map-page { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ── Top bar ── */
.topbar { height: var(--topbar-height); min-height: var(--topbar-height); display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); z-index: 1000; flex-shrink: 0; }
.topbar h1 { font-size: 1rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Filter buttons ── */
.filter-group { display: flex; gap: 2px; background: var(--color-border); border-radius: 6px; padding: 2px; flex-shrink: 0; }
.filter-btn { padding: .25rem .5rem; border: none; background: transparent; border-radius: 4px; font-size: .75rem; cursor: pointer; color: var(--color-muted); white-space: nowrap; }
.filter-btn.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* ── Logout button ── */
.logout-btn { padding: .5rem; border: none; background: transparent; cursor: pointer; border-radius: var(--radius); color: var(--color-muted); font-size: .875rem; flex-shrink: 0; }
.logout-btn:hover { background: var(--color-bg); }

/* ── Map container ── */
#map { flex: 1; z-index: 1; }

/* ── FAB (mobile add button) ── */
.fab { position: fixed; bottom: 1.5rem; right: 1rem; width: 56px; height: 56px; border-radius: 50%; background: #2563eb; color: #fff; border: none; font-size: 1.75rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 1100; display: none; align-items: center; justify-content: center; }
@media (pointer: coarse) { .fab { display: flex; } }

/* ── Crosshair overlay (mobile placement mode) ── */
.crosshair-overlay { position: fixed; inset: 0; z-index: 1050; pointer-events: none; display: none; }
.crosshair-overlay.active { display: block; }
.crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: #2563eb; }
.crosshair::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.crosshair::after { height: 2px; width: 100%; top: 50%; transform: translateY(-50%); }

/* ── Placement confirm bar ── */
.placement-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: .75rem 1rem; display: none; gap: .5rem; z-index: 1100; }
.placement-bar.active { display: flex; }
.placement-bar p { flex: 1; font-size: .875rem; color: var(--color-muted); align-self: center; }
.placement-bar .btn-cancel { padding: .75rem 1rem; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); font-size: 1rem; cursor: pointer; }
.placement-bar .btn-confirm { padding: .75rem 1.25rem; background: #2563eb; color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer; }

/* ── Bottom sheet / Side panel ── */
.panel { position: fixed; background: var(--color-surface); z-index: 1200; overflow-y: auto; }

/* Mobile: bottom sheet */
@media (max-width: 640px), (pointer: coarse) {
  .panel { bottom: 0; left: 0; right: 0; max-height: 70dvh; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.15); transform: translateY(100%); transition: transform .25s ease; }
  .panel.open { transform: translateY(0); }
  .panel-drag { width: 36px; height: 4px; background: var(--color-border); border-radius: 2px; margin: .75rem auto; }
}

/* Desktop: right side panel */
@media (min-width: 641px) and (pointer: fine) {
  .panel { top: var(--topbar-height); right: 0; bottom: 0; width: 360px; box-shadow: -4px 0 16px rgba(0,0,0,.1); transform: translateX(100%); transition: transform .25s ease; }
  .panel.open { transform: translateX(0); }
  .panel-drag { display: none; }
}

.panel-inner { padding: 1rem; }
.panel-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.panel-status { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .875rem; color: var(--color-muted); }
.status-select { padding: .25rem .5rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: .875rem; }
.panel-close { float: right; border: none; background: transparent; font-size: 1.25rem; cursor: pointer; color: var(--color-muted); line-height: 1; }
.comment-log { list-style: none; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.comment-log li { font-size: .875rem; }
.comment-meta { font-size: .75rem; color: var(--color-muted); margin-bottom: .2rem; }
.comment-text { line-height: 1.4; }
.comment-form { display: flex; gap: .5rem; }
.comment-input { flex: 1; padding: .625rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .9rem; }
.comment-submit { padding: .625rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: .9rem; }

/* ── Desktop new-issue popup (Leaflet popup override) ── */
.new-issue-popup input[type=text] { width: 100%; padding: .5rem; border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: .5rem; font-size: .875rem; }
.new-issue-popup .popup-btns { display: flex; gap: .5rem; justify-content: flex-end; }
.new-issue-popup .btn-cancel-sm { padding: .375rem .75rem; border: 1px solid var(--color-border); background: transparent; border-radius: 4px; cursor: pointer; font-size: .875rem; }
.new-issue-popup .btn-confirm-sm { padding: .375rem .75rem; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: .875rem; }

/* ── New issue form (mobile bottom sheet) ── */
.new-issue-form { padding: 1rem; }
.new-issue-form h2 { font-size: 1rem; margin-bottom: .75rem; }
.new-issue-form input[type=text] { display: block; width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; margin-bottom: .75rem; }
.new-issue-form .form-btns { display: flex; gap: .5rem; }
.new-issue-form .btn-cancel { flex: 1; padding: .75rem; border: 1px solid var(--color-border); background: transparent; border-radius: var(--radius); font-size: 1rem; cursor: pointer; }
.new-issue-form .btn-save { flex: 2; padding: .75rem; background: #2563eb; color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer; }

/* ── Toast ── */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); background: #333; color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius); font-size: .875rem; z-index: 2000; transition: transform .25s ease; white-space: nowrap; }
.toast.show { transform: translateX(-50%) translateY(0); }