/* basic layout and centering */
body {
  margin: 0;
  padding: 16px;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fafafa;
  color: #222;
}

/* constrain content width so things are centered and readable */
.container, .content {
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  padding: 0 12px;
}

/* chart container canvas sizing — Chart.js will respect CSS height when maintainAspectRatio:false */
.chart-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.chart-container-canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  height: 280px; /* reduced from 340px */
  margin: 16px auto;
  box-sizing: border-box;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* tables, heatmap, and smaller widgets centered and responsive */
table { border-collapse: collapse; margin: 20px auto; }
td, th { width: 30px; height: 30px; text-align: center; border: 1px solid #ccc; }
.finance { margin: 10px auto; font-family: monospace; max-width: 720px; width: 100%; }
.finance .label { display: inline-block; width: 180px; }
.negative { color: red; }

/* heatmap scrolling container */
.heatmap-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.heatmap-wrapper table {
  min-width: 600px; /* prevent table from becoming too squished */
}

/* finance section container and centering */
.finance-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* round stats layout */
.round-stats-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.round-stats-numbers {
  flex: 0 0 200px;
  padding: 20px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-top: 16px;
  font-size: 14px;
}

.round-stats-chart {
  flex: 1;
  min-width: 300px; /* prevent collapse */
}

/* center headings and buttons */
h1, h2, h3 { text-align: center; width: 100%; }
button { cursor: pointer; }

/* Date filter styling */
.date-filter-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  text-align: center;
}

.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin-top: 15px;
}

.filter-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.filter-controls input[type="datetime-local"] {
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.filter-controls input[type="datetime-local"]:disabled {
  background-color: #f5f5f5;
  color: #999;
}

/* responsive adjustments */
@media (max-width: 900px) {
  .chart-container-canvas { 
    height: 240px;
    max-width: 600px;
  }
  .finance .label { width: 140px; }
}

@media (max-width: 800px) {
  .round-stats-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .round-stats-numbers {
    flex: none;
    margin: 0 auto 20px;
  }
}

@media (max-width: 600px) {
  body { padding: 8px; }
  .chart-container-canvas { 
    height: 200px;
    max-width: 100%;
  }
  td, th { width: 26px; height: 26px; font-size: 12px; }
  .finance .label { display: block; width: 100%; margin-bottom: 4px; }
  .finance div { display:block; margin-bottom:6px; }

  .heatmap-wrapper table.mobile {
    min-width: unset;
    margin: 10px auto; /* changed from 10px 0 to 10px auto */
  }
  .heatmap-wrapper table.mobile td,
  .heatmap-wrapper table.mobile th {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  
  .round-stats-numbers {
    font-size: 16px;
    line-height: 1.4;
  }
  
  .round-stats-chart .chart-container-canvas {
    min-height: 240px;
  }

  .filter-controls {
    align-items: stretch;
  }
  
  .filter-controls label {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .filter-controls input[type="datetime-local"] {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

/* keep canvases visually centered even when narrow */
canvas { max-width: 100%; box-sizing: border-box; }