/* PORTAL_WARGA_GRAFIK_FRAME_TERPISAH_V40
   VISUAL ONLY. Do not move/remove #pumpGraph, #pumpDaily30, old controls,
   or settings: scripts and authorization keep their original DOM structure. */

/* The enclosing panel and chart section should no longer appear as one
   continuous cream-colored frame encompassing both graphs. */
#pumpPanelV1.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  min-width: 0;
}
#pumpPanelV1 .pump-chart-section.pump-card-section {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 24px 0 0 !important;
  overflow: visible !important;
  min-width: 0;
}

/* Card 1: blue/orange Watt curve, its comparison, zoom, timestamps, tooltip. */
#pumpPanelV1 .pump-chart-section > .pump-ref-v28 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 24px !important;
  padding: clamp(16px, 2vw, 28px) !important;
  background: #fffdfa !important;
  border: 1px solid #dce4df !important;
  border-radius: 24px !important;
  box-shadow: 0 5px 18px rgba(34, 59, 43, .06) !important;
}

/* Card 2: independent 30-day kWh history, controls, bars, legend and table. */
#pumpPanelV1 .pump-chart-section > #pumpDaily30.pump-daily30 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(18px, 2.2vw, 30px) !important;
  background: #fffdfa !important;
  border: 1px solid #dce4df !important;
  border-radius: 24px !important;
  box-shadow: 0 5px 18px rgba(34, 59, 43, .06) !important;
}

/* Keep responsive SVG width contained inside its independent card. */
#pumpPanelV1 .pump-chart-section > #pumpDaily30 .pump-daily30-chart-wrap,
#pumpPanelV1 .pump-chart-section > .pump-ref-v28 .pump-ref-canvas-wrap-v28 {
  max-width: 100%;
  min-width: 0;
}

/* Category notification form is not part of either chart: preserve it
   as its own frame when admin is allowed to see it. Do not change hidden. */
#pumpPanelV1 > #pumpCategoryPanelV18 {
  box-sizing: border-box;
  width: 100%;
  margin-top: 24px;
  padding: clamp(18px, 2.2vw, 30px);
  background: #fffdfa;
  border: 1px solid #dce4df;
  border-radius: 24px;
  box-shadow: 0 5px 18px rgba(34, 59, 43, .06);
}

@media (max-width: 700px) {
  #pumpPanelV1 .pump-chart-section.pump-card-section {margin-top: 18px !important;}
  #pumpPanelV1 .pump-chart-section > .pump-ref-v28 {
    margin-bottom: 18px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  #pumpPanelV1 .pump-chart-section > #pumpDaily30.pump-daily30 {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  #pumpPanelV1 > #pumpCategoryPanelV18 {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
  }
}