*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: Arial, sans-serif; }

header {
  position: fixed; top: 0; left: 0; right: 0;
  background: #1e293b; border-bottom: 1px solid #334155;
  padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 14px;
  z-index: 1000; font-size: 0.95rem; color: #e2e8f0;
}
header h1 { font-size: 0.95rem; font-weight: 600; color: #f1f5f9; }
#country-count { color: #fff; display: flex; align-items: center; }
#home-link { display: flex; align-self: stretch; }
#home-logo { height: 100%; cursor: pointer; }
#header-user { color: #94a3b8; white-space: nowrap; margin-left: auto; }
#adminLink { display: none; }
#adminLink.visible { display: inline; }

#hdrTop10.active { background: #fbbf24 !important; color: #1e293b !important; }

.legend-item { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 0.95rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.country   { background: #ef4444; }
.legend-dot.territory { background: #eab308; }

#map { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: #d5e8eb; will-change: transform; -webkit-transform: translateZ(0); }

#list-toggle { font-size: 0.82rem; background: #1e3a5f; color: #93c5fd; border: 1px solid #334155; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
#list-toggle.active { background: #2563eb; color: #fff; }
#list-toggle:hover { background: #2563eb; color: #fff; }

#list-view { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: #e8f0fe; overflow-y: auto; z-index: 500; }
#country-list-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: #0f172a; }
#country-list-table thead { position: sticky; top: 0; background: #bfdbfe; z-index: 1; }
#country-list-table th { padding: 10px 16px; text-align: left; cursor: pointer; font-weight: 600; border-bottom: 2px solid #93c5fd; }
#country-list-table th:hover { background: #93c5fd; }
#country-list-table td { padding: 8px 16px; border-bottom: 1px solid #bfdbfe; text-align: left; }
#country-list-table th:nth-child(3), #country-list-table td:nth-child(3) { white-space: nowrap; }
#country-list-table tbody tr { cursor: pointer; }
#country-list-table tbody tr:hover { background: #bfdbfe; }
.leaflet-container { background: #d5e8eb !important; }

.leaflet-tooltip { font-size: 1rem !important; font-weight: 600 !important; color: #000 !important; background: rgba(255,255,255,0.9) !important; border: 1px solid #cbd5e1 !important; padding: 3px 8px !important; white-space: nowrap !important; }

#panel-content h2 { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin: 0; padding-bottom: 0; padding-right: 0; border-bottom: none; }
.panel-title-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.panel-title-row .fb-posts-btn { margin-left: 8px; }
.panel-first-visited { color: #94a3b8; }