* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: #f5f7fa;
  color: #222;
  display: flex;
  min-height: 100vh;
}
/* Sidebar */
.sidebar {
  width: 240px;
  background: #ffffff;
  padding: 20px;
  border-right: 1px solid #e6e9ee;
  height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar h2 { color:#800000; margin-bottom:10px; }
.nav-item { padding:10px 12px; border-radius:8px; cursor:pointer; color:#333; margin-bottom:8px; }
.nav-item.active, .nav-item:hover { background:#800000; color:white; }
.file-label { display:block; margin-top:12px; font-weight:600; color:#444; }
#fileInput { margin-top:8px; }

/* Main content */
.main { flex:1; padding: 28px; overflow:auto; }
.header h1 { color:#111; font-size:26px; margin-bottom:6px; }
.subtitle { color:#666; font-size:13px; margin-top:4px; }

/* Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(20,20,20,0.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.card h3 { font-size:14px; color:#800000; margin-bottom:6px; }
.metric-value { font-size:20px; font-weight:700; color:#111; }

/* Charts layout */
.charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    width: 100%;
}

.chart-box {
    background-color: white;
    color: black;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    min-height: 350px; /* same height for all charts */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-box > div {
    height: 100% !important; /* makes Plotly fill container */
}


/* right column holds many boxes */
.right-column {
  display: grid;
  grid-template-rows: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

/* full-width charts (placed under main grid) */
.chart-box.full {
  grid-column: 1 / -1;
  min-height: 420px;
}

/* Responsive */
@media (max-width: 980px) {
  .charts-section { grid-template-columns: 1fr; }
  .right-column { grid-template-rows: none; grid-auto-rows: minmax(180px, auto); }
  .chart-box.full { min-height: 320px; }
  .sidebar { display:none; }
  body { padding:0; }
}


/*dispach dashboard style*/
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: #f5f7fa;
  color: #222;
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  background: #ffffff;
  padding: 20px;
  border-right: 1px solid #e6e9ee;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}
.sidebar h2 { color:#800000; margin-bottom:10px; }
.nav-item { padding:10px 12px; border-radius:8px; cursor:pointer; color:#333; margin-bottom:8px; }
.nav-item.active, .nav-item:hover { background:#800000; color:white; }
.file-label { display:block; margin-top:12px; font-weight:600; color:#444; }
#fileInput { margin-top:8px; width:100%; }

/* Main content */
.main { flex:1; padding: 28px; overflow:auto; }
.header h1 { color:#111; font-size:26px; margin-bottom:6px; }
.subtitle { color:#666; font-size:13px; margin-top:4px; }

/* KPIs */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(20,20,20,0.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.card h3 { font-size:14px; color:#800000; margin-bottom:6px; }
.metric-value { font-size:20px; font-weight:700; color:#111; }

/* Charts layout */
.charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    width: 100%;
}
.chart-box {
    background-color: white;
    color: black;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.12);
    min-height: 300px; /* same height for all charts */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.chart-box.full { grid-column: 1 / -1; min-height: 420px; }
.chart-box > div { height:100% !important; }

/* table inside chart */
.table-wrap { overflow:auto; height:380px; }
.table-wrap table { width:100%; border-collapse: collapse; font-size:13px; }
.table-wrap th, .table-wrap td { padding:8px; border-bottom:1px solid #eee; text-align:left; }

/* Responsive */
@media (max-width: 980px) {
  .charts { grid-template-columns: 1fr; }
  .sidebar { display:none; }
  body { padding:0; }
}