/* PIQ Dashboard layout helpers */
.piq-trends-wrap { width: 100%; }
.piq-trends-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0;
}
.piq-trends-canvas-wrap {
  position: relative;
  width: 100%;
  height: 380px;
}
.piq-trends-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Prevent horizontal page scroll caused by wide tables */
.piq-table-wrap { overflow-x: auto; }
.piq-table { width: 100%; table-layout: fixed; }
.piq-table th, .piq-table td { word-break: break-word; }

.piq-card--trends { margin-top: 12px; }
.piq-trends-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.piq-trends-controls{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.piq-field{ font-size:12px; color:#6b7280; display:flex; flex-direction:column; gap:6px; }
.piq-select{
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}
.piq-chart-wrap{
  height: 320px;   /* key: Chart.js needs a real height when maintainAspectRatio=false */
}
#piqTrendChart{ width:100% !important; height:100% !important; }
/* --- Filters row: keep controls aligned and compact --- */
.piq-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

/* Each field: label on top, control below */
.piq-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:140px;
}

/* Multi-selects (Clouds/Regions) look compact */
.piq-select[multiple]{
  height:auto;              /* ignore default tall size */
  max-height:120px;         /* cap height */
  min-height:44px;          /* still clickable */
  overflow:auto;
  padding:6px 8px;
  line-height:1.2;
}

/* Make options less “spaced out” */
.piq-select[multiple] option{
  padding:2px 6px;
}

/* On small screens, let multi-selects take full width */
@media (max-width: 900px){
  .piq-field{ min-width: 100%; }
  .piq-select[multiple]{ max-height:160px; }
}

.piq-legend { margin-top: 8px; }
.piq-legend-list { margin: 0; padding-left: 18px; }
.piq-legend-list li { margin: 6px 0; }