/* Site-wide theme and layout styles (moved into assets) */
/* copied from static/css/site.css */
:root{
  --bg:#ffffff; --fg:#212529; --muted:#6c757d; --card:#ffffff; --accent:#0d6efd;
  --header-height:64px; --footer-height:64px; --attribution-height:32px;
}
.theme-dark {
  /* slightly off-black background to match table tones */
  --bg:#0b0b0d; /* page gutter/background */
  --fg:#ffffff; 
  --muted:#9fb2c8; 
  --card:#121416; /* cards, header/footer */
  --table-head:#1b1f23; /* table header slightly lighter */
  --accent:#4dabf7;
  color-scheme: dark;
}
.        
html, body { background: var(--bg); color: var(--fg); }
body{background:var(--bg);color:var(--fg);margin:0;padding:0}
main.container { padding-top: 0; margin-top: 0; padding-bottom:var(--footer-height); }
.theme-dark .text-dark { color: var(--fg) !important; }
.card, .navbar, header, footer {background:var(--card) !important}
/* Force darker backgrounds and white text for all common elements in dark mode */
.theme-dark main.container, .theme-dark .container, .theme-dark header, .theme-dark footer, .theme-dark .nav, .theme-dark .navbar {
  background: var(--bg) !important;
  color: var(--fg) !important;
}
.theme-dark .card {
  background: var(--card) !important;
  color: var(--fg) !important;
}
.theme-dark .table, .theme-dark .table thead, .theme-dark .table tbody, .theme-dark .table tr, .theme-dark .table td, .theme-dark .table th {
  background: rgba(255,255,255,0.02) !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.theme-dark .table thead th { background: var(--table-head) !important; }
.theme-dark .table tbody tr { background: transparent !important; }
.theme-dark .form-control, .theme-dark .dropdown-menu, .theme-dark .btn, .theme-dark .btn-primary {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
header, footer {padding:0.6rem 0; box-shadow: 0 2px 8px rgba(2,6,23,0.04);} 
header { margin-bottom: 0; }
#site-footer {position:fixed;left:0;right:0;bottom:0;z-index:1040;height:var(--footer-height)}
/* Map centered with side padding and rounded corners */
#map, #profile-map {
  height: calc(100vh - var(--header-height) - var(--footer-height) - var(--attribution-height));
  /* make map wider with very small side gaps */
  max-width: none;
  width: calc(100% - 0.5rem);
  margin: 0.25rem auto 0.5rem auto;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  overflow: hidden;
}
.container{max-width:1100px}
.btn-theme { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--fg); }
.nav-tabs .nav-link { color: var(--fg); border: none; }
.nav-tabs .nav-link:hover { color: var(--accent); }
.nav-tabs .nav-link.active { background: var(--accent); color: var(--card) !important; border-radius: .25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.theme-dark table.table.table-dark, .theme-dark table.table.table-dark tbody, .theme-dark table.table.table-dark thead { background-color: #000; color: var(--fg); }
.theme-dark table.table.table-dark thead th { background-color: #0a0a0a; }
.footer-text { color: var(--muted); }
.theme-dark .footer-text { color: var(--fg); }
/* keep footer title and flag on one line where possible */
#site-footer .footer-text { display: flex; align-items: center; gap: 0.5rem; justify-content: center; white-space: nowrap; }
/* Leaflet controls placement */
.leaflet-container .leaflet-control-attribution { position: absolute !important; right: 8px; left: auto !important; bottom: 8px !important; z-index:1060; background: rgba(255,255,255,0.02); padding: 4px 6px; border-radius:4px; display:flex; align-items:center; justify-content:center; }
.leaflet-top-left { top: calc(var(--header-height) + 8px) !important; z-index:1060 }

.theme-dark .leaflet-container .leaflet-control-attribution { background: rgba(0,0,0,0.6) !important; color: var(--fg) !important; }

/* Theme-aware element colors */
.nav-link, .site-title, .footer-text, .nav-tabs .nav-link, .btn, .form-label, .form-control, .table {
  color: var(--fg) !important;
}
.btn { color: var(--fg); }
.btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--card); }
.form-control { background: transparent; border-color: rgba(0,0,0,0.08); color: var(--fg); }
.theme-dark .form-control { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.theme-dark .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--card); }
.leaflet-container .leaflet-control-attribution { color: var(--fg) !important; }

/* Display the attribution flag above the text (vertical stack) */
.leaflet-container .leaflet-control-attribution a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  padding: 2px 4px;
}
.leaflet-container .leaflet-control-attribution a .leaflet-attribution-flag {
  display: block;
  width: 18px;
  height: auto;
  line-height: 1;
}
.leaflet-container .leaflet-control-attribution a svg.leaflet-attribution-flag { display:block; }
.leaflet-container .leaflet-control-attribution a { font-size: 12px; }
.leaflet-container .leaflet-control-attribution a svg.leaflet-attribution-flag { display:block; }
.leaflet-container .leaflet-control-attribution a:hover { text-decoration: none; }

/* ensure links and small text follow theme */
a.nav-link, .nav-link { color: var(--fg) !important; }


@media (max-width: 576px) {
  #map, #profile-map { width: calc(100% - 1rem); margin: 0.5rem auto; }
}

/* Dark-theme Leaflet popup adjustments */
.theme-dark .leaflet-popup-content-wrapper {
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}
.theme-dark .leaflet-popup-tip {
  background: var(--card) !important;
}
.theme-dark .leaflet-popup-content {
  color: var(--fg) !important;
}
.theme-dark .leaflet-popup-close-button {
  color: var(--fg) !important;
}

/* Slightly lighter controls inside popups for readability */
.theme-dark .leaflet-popup-content .btn {
  background: rgba(255,255,255,0.06) !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.theme-dark .leaflet-popup-content .btn-primary {
  background: rgba(255,255,255,0.08) !important;
  color: var(--card) !important;
}
.theme-dark .leaflet-popup-content .form-control {
  background: rgba(255,255,255,0.04) !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Ensure small/muted popup text is readable (white) in dark theme */
.theme-dark .leaflet-popup-content .small,
.theme-dark .leaflet-popup-content .text-muted {
  color: var(--fg) !important;
}

/* Ensure button text inside popups is white in dark theme (add/edit buttons) */
.theme-dark .leaflet-popup-content .btn,
.theme-dark .leaflet-popup-content .btn *,
.theme-dark .leaflet-popup-content .btn-primary,
.theme-dark .leaflet-popup-content .btn-success,
.theme-dark .leaflet-popup-content .btn-secondary {
  color: var(--fg) !important;
}

/* Ensure Bootstrap modal follows site theme */
.modal-content {
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
.modal-header, .modal-body, .modal-footer {
  background: transparent !important;
  color: var(--fg) !important;
}
.modal-content .form-control {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.theme-dark .modal-content {
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.theme-dark .modal-content .form-control {
  background: rgba(255,255,255,0.02) !important;
  color: var(--fg) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.theme-dark .modal-backdrop.show { background-color: rgba(0,0,0,0.6); }

/* Placeholder color adjustments for readability in modals and popups */
.modal-content .form-control::placeholder { color: rgba(0,0,0,0.5) !important; }
.leaflet-popup-content .form-control::placeholder { color: rgba(0,0,0,0.5) !important; }
.theme-dark .modal-content .form-control::placeholder { color: rgba(255,255,255,0.65) !important; }
.theme-dark .leaflet-popup-content .form-control::placeholder { color: rgba(255,255,255,0.65) !important; }

/* Ensure accordion collapse rows inside dark tables are dark with white text */
.theme-dark table.table.table-dark .collapse,
.theme-dark table.table.table-dark .collapse .list-group,
.theme-dark table.table.table-dark .collapse .list-group-item {
  background-color: #0b0b0d !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.theme-dark table.table.table-dark .collapse .list-group-item {
  background-color: #121416 !important;
  color: #fff !important;
}

/* Profile summary control removed per UI request */

/* Save-geometry control styling to match Leaflet zoom buttons */
.leaflet-control-zoom .save-geom,
.leaflet-bar .save-geom {
  width: 26px;
  height: 26px;
  display: inline-block;
  text-align: center;
  line-height: 26px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #dddddd;
  box-shadow: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 14px;
}
.leaflet-control-zoom .save-geom:hover { background: #f5f5f5; }

/* Container tweaks: remove outer frame and position under zoom buttons */
.save-geom-container { padding: 0; border: none; box-shadow: none; }
.leaflet-top-left .save-geom-container { margin-top: 6px; }
.leaflet-top-left .save-geom-container .save-geom { display: block; }

/* Ensure anchor border is the visible frame and matches background exactly */
.leaflet-top-left .save-geom-container .save-geom { border: 1px solid #dddddd; background: #ffffff; }
.theme-dark .leaflet-top-left .save-geom-container .save-geom { background: #121416; color: var(--fg); border-color: rgba(255,255,255,0.06); }