html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at top left, #203047 0%, #10192e 100%);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #d3f2ff;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
.app-container {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 90px;
  background: rgba(24, 28, 43, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.4rem;
  box-shadow: 4px 0 24px 0 #0006;
  z-index: 2;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}
.logo {
  font-size: 2.6rem;
  margin-bottom: 2.4rem;
  filter: drop-shadow(0 0 6px #00f6ffcc);
  user-select: none;
}
.nav-item {
  color: #c1eaff;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 0.95rem 0.6rem;
  border-radius: 1.1rem;
  display: block;
  margin-bottom: 1.1rem;
  width: 100%;
  text-align: center;
  transition: background 0.16s, color 0.14s;
}
.nav-item.active, .nav-item:hover {
  background: linear-gradient(90deg, #00e1ff29 0%, #229fff2f 100%);
  color: #fff;
}
.main-content {
  margin-left: 90px;
  flex: 1;
  padding: 2.2rem 2vw 3rem 2vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
header {
  width: 100%;
  text-align: center;
  margin-bottom: 1.7rem;
}
header h1 {
  font-size: 2.5rem;
  letter-spacing: 0.015em;
  font-weight: 700;
  color: #aef4ff;
  margin-bottom: 0;
  filter: drop-shadow(0 2px 8px #00e7ff24);
  text-shadow: 0 1px 16px #0be2ff29;
}
.filter-section {
  background: rgba(36, 48, 72, 0.74);
  border-radius: 1.5rem;
  padding: 1.1rem 1.8rem;
  margin-bottom: 2.4rem;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 24px #01e6ff0c;
  font-size: 1.12rem;
}
.filter-section label {
  margin-right: 1rem;
  font-weight: 500;
  color: #74eaff;
}
.filter-section select {
  background: #173249;
  color: #c6f1ff;
  border: 1px solid #22416b;
  border-radius: 0.55rem;
  padding: 0.48rem 1.1rem;
  font-size: 1.08rem;
  outline: none;
  transition: border 0.15s;
  margin-left: 0.6rem;
}
.filter-section select:focus {
  border-color: #00e0ff;
  background: #173249;
}
.chart-section {
  width: 100%;
  max-width: 1050px;
  background: rgba(24,32,57,0.94);
  border-radius: 1.7rem;
  box-shadow: 0 12px 42px #0be2ff11;
  padding: 1.7rem 1.5rem 2.7rem 1.5rem;
  margin: 0 auto;
  margin-bottom: 1.7rem;
}
.chart-section h2 {
  font-size: 1.45rem;
  margin-bottom: 1.6rem;
  font-weight: 600;
  color: #32e2ff;
  letter-spacing: 0.02em;
}
.chart-canvas-wrapper {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#callVolumeChart {
  width: 100% !important;
  height: 390px !important;
  min-height: 350px;
  max-width: 980px;
  margin: auto;
  background: none;
  border-radius: 1.4rem;
  box-shadow: 0 6px 30px #00bfff0c;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .main-content { padding: 1.1rem 1vw 2rem 1vw; }
  .chart-section { padding: 1rem 0.5rem 1.4rem 0.5rem; }
  .sidebar { width: 70px; }
  .main-content { margin-left: 70px; }
  .chart-canvas-wrapper { min-height: 220px; }
}
@media (max-width: 650px) {
  .main-content { margin-left: 0; padding: 1vw; }
  .sidebar { display: none; }
  header h1 { font-size: 1.4rem; }
  .filter-section { font-size: 0.96rem; padding: 0.65rem 0.4rem;}
  .chart-section { padding: 0.7rem 0.1rem 1.2rem 0.1rem; }
  .chart-canvas-wrapper { min-height: 150px; }
}
.chart-canvas-wrapper {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  /* Limit height for all charts */
  min-height: 300px;
  max-height: 400px;
  overflow: auto;
  padding: 0.7em 0;
  background: #1a2839;
  border-radius: 1.1em;
  box-shadow: 0 4px 22px #102d4a25;
}

/* Specifically for the Medication Routes chart, you can target the canvas directly if you want: */
#medsRouteChart {
  width: 100% !important;
  max-width: 800px;
  height: 370px !important;
  display: block;
  margin: 0 auto;
}
#medDoseDistChart {
  max-height: 340px;
  min-height: 240px;
}
.chart-section {
  max-width: 900px;
  margin: 0 auto 2rem auto;
}