/* Size donut frames from available content space, including sidebar changes.
   Keep the existing horizontal rails and their keyboard / touch navigation. */
@layer mobile_readability {
  @media screen {
    :root body :is(.dashboard-donut-rail, .vm-explorer-overview__rail) {
      container: donut-rail / inline-size;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    :root body :is(.dashboard-donut-strip, .vm-explorer-overview__charts) {
      --donut-columns: 1;
      display: grid !important;
      grid-template-columns: none !important;
      grid-auto-flow: column !important;
      grid-auto-columns: calc((100% - (var(--donut-columns) - 1) * 12px) / var(--donut-columns)) !important;
      gap: 12px !important;
      align-items: stretch !important;
      scrollbar-gutter: auto !important;
      padding-inline: 3px !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    /* Other donut collections wrap when another readable frame will not fit. */
    :root body :is(.dashboard-grid, .chart-grid):has(> .donut-card):not(:has(> :not(.donut-card))),
    :root body :is(.audit-count-donut-grid, .servicenow-donut-grid, .donut-grid),
    :root body .summary-grid:has(> .chart-panel) {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      align-items: stretch !important;
    }
    :root body :is(.donut-card, .servicenow-donut-card, .chart-card:has(.integration-donut)) {
      container: donut-frame / inline-size;
      box-sizing: border-box !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      align-self: stretch !important;
    }
    :root body .donut-card .chart-card__head {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 10px !important;
      min-width: 0 !important;
      min-height: 0 !important;
    }
    :root body .donut-card .chart-controls {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      gap: 6px !important;
    }
    :root body .donut-card .chart-controls > :is(.search-field, input.toolbar-search) {
      flex: 1 1 8rem !important;
      width: auto !important;
      min-width: min(100%, 8rem) !important;
      max-width: 100% !important;
    }
    :root body .donut-card .chart-controls > :is(button, .donut-glossary-trigger) {
      flex: 0 0 auto !important;
      max-width: 100% !important;
    }
    :root body :is(.donut-card__body, .integration-donut-layout) {
      min-width: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      align-content: start !important;
    }
    :root body :is(.donut-chart__ring, .integration-donut, .donut-ring) {
      width: min(100%, clamp(140px, 50cqi, 200px), max(140px, 34dvh)) !important;
      height: auto !important;
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: 100% !important;
      aspect-ratio: 1 !important;
      flex-shrink: 0;
      margin-inline: auto;
    }
    :root body .donut-card .donut-chart {
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
    :root body :is(.ac-donut-legend-panel, .donut-legend, .integration-donut-legend) {
      min-width: 0 !important;
      max-width: 100% !important;
    }
    :root body .ac-donut-legend-panel > :is(.donut-legend, .integration-donut-legend) {
      max-height: min(var(--ac-legend-five-rows, 220px), max(100px, 30dvh)) !important;
    }
    :root body .single-donut-card {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: center;
    }
    :root body .single-donut-card .donut-copy { flex: 1 1 140px; min-width: 0; }
    :root body .chart-panel:has(.donut-ring) { container: donut-panel / inline-size; min-width: 0; }
    :root body .chart-legend { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  }
  @container donut-rail (min-width: 600px) {
    :root body :is(.dashboard-donut-strip, .vm-explorer-overview__charts) { --donut-columns: 2; }
  }
  @container donut-rail (min-width: 900px) {
    :root body :is(.dashboard-donut-strip, .vm-explorer-overview__charts) { --donut-columns: 3; }
  }
  @container donut-rail (min-width: 1200px) {
    :root body :is(.dashboard-donut-strip, .vm-explorer-overview__charts) { --donut-columns: 4; }
  }
  @container donut-rail (min-width: 1500px) {
    :root body .dashboard-donut-strip { --donut-columns: 5; }
  }
  @container donut-rail (min-width: 1800px) {
    :root body .dashboard-donut-strip { --donut-columns: 6; }
  }
  @container donut-frame (max-width: 440px) {
    :root body :is(.donut-card__body, .integration-donut-layout) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
  @container donut-panel (max-width: 440px) {
    :root body .donut-card:has(> .donut-ring) { grid-template-columns: minmax(0, 1fr) !important; }
  }
}