.iat-hub .card-header { background:#fff; }
.iat-hub .card { border-radius: .5rem; }
.iat-hub .card .badge { font-weight:600; }
.iat-hub textarea { resize: vertical; }

/* make KPI numbers pop a bit */
#iat-kpis .h4 { font-weight: 700; }

/* helpful spacing inside grid cards */
.iat-hub .card .ratio { display:block; }

/* --- Responsive 2/3/4-column layout with a Bootstrap fallback --- */
/* If Bootstrap is missing or overridden, this guarantees the layout */
.iat-kpis {
  display: grid;                       /* fallback grid */
  grid-template-columns: repeat(2, minmax(0,1fr));  /* 2 cols on mobile */
  gap: 1rem;                           /* matches g-3-ish spacing */
}
.iat-kpis > .col { width: auto; }      /* prevent Bootstrap .col widths from fighting grid */
@media (min-width: 768px) {
  .iat-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } /* md: 3 cols */
}
@media (min-width: 1200px) {
  .iat-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); } /* xl: 4 cols */
}

/* Ensure equal-height tiles */
.iat-kpis .card { height: 100%; }

/* Hide KPI spark charts on phones */
@media (max-width: 575.98px){
  .iat-kpis .spark{ display:none !important; }
}

/* === IAT Hub: iPad sizing fixes (add after your existing CSS) === */

/* 1) Keep Chart.js canvases from blowing up */
.iat-hub canvas { width: 100% !important; display:block; }
.iat-kpis .spark { height: 32px; max-height: 32px; }           /* default spark size */
#iat-chart-mix, #iat-chart-top { max-height: 280px; }           /* sensible cap for main charts */

/* 2) Slightly dial back KPI number size globally (still bold) */
#iat-kpis .h4 { font-weight: 700; font-size: 1.25rem; line-height: 1.1; }

/* 3) iPad / tablet range — clamp typography & chart heights further */
@media (min-width: 768px) and (max-width: 1024.98px) {
  /* keep 3-up layout but reduce visual scale */
  .iat-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }

  /* tighter card padding so content doesn’t feel “zoomed” */
  .iat-kpis .card-body { padding: .75rem; }

  /* smaller KPI number + sparklines on iPad */
  #iat-kpis .h4 { font-size: 1.15rem; }
  .iat-kpis .spark { height: 24px !important; max-height: 24px !important; }

  /* main charts stay compact */
  #iat-chart-mix, #iat-chart-top { max-height: 240px; }
}

/* 4) Large tablets just below desktop (e.g., iPad Pro landscape) */
@media (min-width: 1025px) and (max-width: 1199.98px) {
  #iat-kpis .h4 { font-size: 1.2rem; }
  .iat-kpis .spark { height: 26px !important; max-height: 26px !important; }
  #iat-chart-mix, #iat-chart-top { max-height: 260px; }
}

/* 5) Prevent any odd overflow in image/ratio wrappers */
.iat-hub .card .ratio,
.iat-hub canvas { display:block; }

/* 6) Tiny polish: slightly smaller helper text across cards */
.iat-hub .card-body .small { font-size: .8125rem; }

/* Optional: iOS/Safari rendering hint (safe no-op elsewhere) */
@supports (-webkit-touch-callout: none) {
  .iat-kpis canvas { image-rendering: -webkit-optimize-contrast; }
}

#text-white-50{
    --bs-text-opacity: 1;
    color: rgb(255 0 0) !important;
}