hyapp-admin-platform/databi/src/styles/responsive.css

@media (max-width: 1440px) {
  .databi-shell {
    padding: 14px;
  }

  .metric-grid {
    gap: 10px;
  }

  .metric-card {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px;
  }

  .metric-content strong {
    font-size: 18px;
  }

  .funnel-layout {
    grid-template-columns: minmax(0, 1fr) 176px;
    gap: 10px;
  }

  .funnel-stack {
    gap: 12px;
    padding-left: 2px;
  }

  .funnel-stage-row {
    grid-template-columns: minmax(160px, 1fr) 46px;
    gap: 8px;
  }

  .funnel-stage {
    height: 55px;
    padding: 0 18px;
  }

  .funnel-stage span {
    font-size: 11px;
  }

  .funnel-stage strong {
    font-size: 15px;
  }

  .funnel-stage--2 {
    margin-inline: 8px;
  }

  .funnel-stage--3 {
    margin-inline: 14px;
  }

  .funnel-stage--4 {
    margin-inline: 20px;
  }

  .funnel-layout .mini-stat {
    height: 74px;
    padding: 9px 10px;
  }

  .funnel-layout .mini-stat strong {
    font-size: 20px;
  }

  .funnel-layout .mini-stat small {
    font-size: 8px;
  }

  .donut-layout {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
  }

  .donut-chart {
    height: 132px;
  }

  .distribution-row {
    grid-template-columns: 8px minmax(118px, 1fr) 48px 68px;
    gap: 7px;
  }

  .distribution-row em {
    font-size: 12px;
  }

  .five-metric-row {
    gap: 7px;
  }

  .five-metric-row .mini-stat {
    padding: 8px 4px;
  }

  .five-metric-row .mini-stat strong {
    font-size: 10px;
  }

  .five-metric-row .mini-stat small {
    font-size: 7px;
  }

}

@media (max-width: 1180px) {
  body,
  .databi-shell {
    min-width: 0;
  }

  .databi-header,
  .header-controls {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .databi-grid--top,
  .databi-grid--middle {
    grid-template-columns: 1fr;
  }

  .databi-grid--top .databi-panel:last-child {
    grid-column: auto;
  }
}

@media (max-width: 1300px) {
  .databi-shell {
    min-width: 1280px;
    padding-inline: 14px;
  }

  .databi-header {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .metric-card {
    grid-template-columns: 36px 1fr;
    padding-inline: 12px;
  }

  .metric-content strong {
    font-size: 20px;
  }

  .metric-delta {
    font-size: 11px;
  }

  .metric-delta span {
    white-space: nowrap;
  }

  .funnel-layout {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 8px;
  }

  .funnel-stage-row {
    grid-template-columns: minmax(150px, 1fr) 40px;
    gap: 6px;
  }

  .funnel-stage {
    padding: 0 12px;
  }

  .funnel-stage strong {
    font-size: 14px;
  }

  .funnel-stage--2 {
    margin-inline: 5px;
  }

  .funnel-stage--3 {
    margin-inline: 9px;
  }

  .funnel-stage--4 {
    margin-inline: 13px;
  }

  .funnel-layout .mini-stat {
    padding-inline: 8px;
  }

  .funnel-layout .mini-stat strong {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}