/* css/style.css */
:root {
  --header-height: 60px;
}
/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%;
  overflow-x:hidden;
  font-family:system-ui, sans-serif;
  background:#f6f8fa;
}
body {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow:hidden;
}
img { max-width:100%; height:auto; display:block; }

/* Header */
.site-header {
  height:var(--header-height);
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:0 1rem;
}
.site-header img { max-height:50px; }

/* Dashboard container */
.dashboard {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
/* Desktop/tablet: side-by-side */
@media(min-width:768px) {
  .dashboard {
    display:grid;
    grid-template-columns:2fr 1fr;
    grid-template-rows:1fr;
    height:calc(100vh - var(--header-height));
  }
}

/* Map container */
.map-container {
  width:100%; height:50vh;
}
@media(min-width:768px) {
  .map-container { height:100%; }
}

/* Sidebar */
.sidebar {
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.sidebar h2, .sidebar h3 {
  color:#ff7900;
  padding:1rem;
}

/* Cards grid */
.cards-container {
  display:grid;
  gap:1rem;
  padding:0 1rem 1rem;
  overflow-y:auto;
}
@media(min-width:600px) {
  .cards-container {
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
}
.region-card {
  background:#fff;
  border:1px solid #ddd;
  border-left:4px solid #ff7900;
  border-radius:4px;
  padding:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  transition:transform 0.2s;
}
.region-card:hover { transform:translateY(-2px); }
.region-card h4 { font-size:1.1rem; margin-bottom:0.5rem; }
.region-card p { font-size:0.9rem; margin-bottom:0.3rem; }

/* Partners logos */
.partners-logos {
  display:flex;
  gap:1rem;
  padding:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.partners-logos img { max-height:80px; }

/* Map styling */
.region {
  fill:#000;
  stroke:#fff;
  stroke-opacity:0.6;
  stroke-width:1px;
  transition:fill 0.2s ease,transform 0.2s ease;
}
.region-hover {
  fill:#ff7900 !important;
  stroke:#ff7900 !important;
  stroke-opacity:1 !important;
  transform:scale(1.02);
  transform-origin:center;
}

/* Tooltip */
.tooltip {
  position:absolute;
  padding:6px 10px;
  background:rgba(0,0,0,0.8);
  color:#fff;
  font-size:0.85rem;
  border-radius:4px;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s;
  white-space:nowrap;
}
#map svg {
  width:100%; height:100%; display:block;
}

/* Prevent unwanted scrollbars */
html, body, .dashboard, .sidebar, .cards-container {
  max-width:100%;
  overflow-x:hidden;
}