/* Map sizing */
#map {
  width: 100%;
  height: 500px;              /* map height */
  background: #e9edf3;        /* placeholder; remove when real map renders */
  border: 1px solid #cfd6df;
  box-sizing: border-box;
  max-width: 1200px;
  max-height: 500px;
  margin: 40px auto; /*  Adds space above and below */
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Chart/table panel container */
.chart-container {
  background: #fff;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  padding: 12px;
  height: 100%;               /* let child fill */
  box-sizing: border-box;
}

/* Canvas sizing: have Chart.js fill the parent */
#doughnutChart,
#barChart {
  display: block;
  width: 100%;
  height: 300px;              /* consistent height for both charts */
}

/* Table styling to match the panel */
#groupTable {
  width: 100%;
  margin: 0;
}

#groupTable thead th {
  color: #163352;
  font-size: 10px;
  font-weight: 700;
}

#groupTable tbody td {
  color: #163352;
  font-size: 10px;
}

/* Optional: decrease default Bootstrap table cell padding for compactness */
.table.table-striped.table-bordered > :not(caption) > * > * {
  padding: .5rem .5rem;
}



/* Responsive behavior: keep nice spacing on smaller screens */
@media (max-width: 767.98px) {
  #doughnutChart,
  #barChart {
     width: 100%;
	height: 300px;
  }
}


/* Match table panel background, border, and spacing */
#groupTable {
  width: 100%;  
  margin: 0;
  background-color: #fff;       /* table background */
  border: 1px solid #cfd6df;    /* panel border */
  border-radius: 6px;           /* rounded corners */
  overflow: hidden;             /* clip rounded corners */
}

/* Header styling */
#groupTable thead th {
  background-color: #f3f6fa;    /* soft header background */
  color: #163352;
  font-size: 10px;
  font-weight: 700;
  border-color: #e1e6ee;        /* header cell borders */
}

/* Body cells */
#groupTable tbody td {
  background-color: #fff;       /* body background */
  color: #163352;
  font-size: 10px;
  border-color: #e9edf3;
  padding: .5rem .75rem;        /* compact padding */
}

/* If you keep Bootstrap's striped & bordered classes, customize them */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #f9fbfd !important; /* light stripe */
}

.table-bordered > :not(caption) > * {
  border-color: #e1e6ee; /* unify borders */
}



/* Ensure the table fills the column panel neatly */
.col-md-4 .chart-container,
.col-md-4 #groupTable {
  box-sizing: border-box;
}
            .chart-container canvas {
                display: block;
            }

            .chart-container {
                max-width: 400px;
				max-height: 300px;
                margin: 40px auto; /*  Adds space above and below */
                padding: 20px;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }


body {
    font-family: Arial, sans-serif; /* Dashboard default font */
}

#groupTable {
    font-family: Arial, sans-serif; /* Table font */
}

#groupTable thead th,
#groupTable tbody td {
    font-family: Arial, sans-serif;
    font-size: 10px; /* Slightly larger for readability */
    font-weight: 400; /* Regular weight for body cells */
}

#groupTable thead th {
    font-weight: 700; /* Bold for headers */
}


body {
    font-family: Arial, sans-serif; /* Dashboard default font */
}

#groupTable {
    font-family: Arial, sans-serif; /* Table font */
}

#groupTable thead th,
#groupTable tbody td {
    font-family: Arial, sans-serif;
    font-size: 10px; /* Slightly larger for readability */
    font-weight: 400; /* Regular weight for body cells */
}

#groupTable thead th {
    font-weight: 700; /* Bold for headers */
}