/* Tablet / iPad responsive layer. Desktop layouts stay unchanged outside these media queries. */

@media (min-width: 721px) and (max-width: 1180px),
  (hover: none) and (pointer: coarse) and (min-width: 721px) and (max-width: 1366px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .page {
    width: 100% !important;
    max-width: none !important;
    padding: 24px max(18px, env(safe-area-inset-left)) calc(56px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right)) !important;
  }

  .hero,
  .card,
  .panel,
  .table-card,
  .header,
  .filter-card,
  .kpi,
  .metric-card,
  .snapshot-card,
  .tab-btn {
    border-radius: 20px !important;
  }

  .hero,
  .card,
  .header,
  .table-card {
    padding: 18px !important;
  }

  h1 {
    font-size: clamp(2rem, 4.8vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(1.18rem, 2.4vw, 1.55rem) !important;
  }

  img,
  svg,
  canvas {
    max-width: 100%;
  }

  select,
  input,
  button,
  .btn,
  .tab,
  .tab-btn,
  .tabs a,
  .multi-select-btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  .toolbar,
  .toolbar-head,
  .hero-top,
  .brand-row,
  .section-head,
  .top-grid,
  .hero-grid,
  .split,
  .two-col,
  .grid-2,
  .dashboard-grid,
  .section-grid,
  .matrix-grid,
  .bu-columns,
  .pl-grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .toolbar [style*="justify-items:end"],
  .hero-actions,
  .refresh-wrap,
  .status-stack,
  .status-actions {
    justify-items: start !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .filters,
  .toolbar-grid,
  .controls,
  .cards,
  .executive-grid,
  .refresh-grid,
  .kpi-grid,
  .kpis,
  .metrics,
  .metric-grid,
  .topline,
  .snapshot-grid,
  .pl-highlights,
  .grid-3,
  .grid-4,
  .three-col,
  .triple,
  .metric-pair-grid,
  .evolution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .filter-card.filter-card-range,
  .section-span-2,
  .section-span-3 {
    grid-column: auto !important;
  }

  .filters .filter-card,
  .toolbar-grid > *,
  .controls > * {
    min-width: 0 !important;
  }

  .tabs,
  .tabbar,
  .tab-bar,
  .tablist,
  .tabs-wrap .tabs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin-left: -2px;
    margin-right: -2px;
  }

  .tabs > *,
  .tabbar > *,
  .tab-bar > *,
  .tablist > *,
  .tabs a,
  .tab,
  .tab-btn {
    flex: 0 0 auto !important;
    min-width: 150px !important;
    scroll-snap-align: start;
    white-space: normal !important;
  }

  .table-wrap,
  .table-card,
  .matrix,
  .ledger,
  .scroll-x,
  table {
    max-width: 100%;
  }

  .table-wrap,
  .table-card,
  .matrix,
  .ledger,
  .chart-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-wrap::after,
  .table-card::after,
  .chart-scroll::after {
    content: "Swipe horizontally for more";
    display: block;
    padding: 8px 10px 2px;
    color: #66727d;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
  }

  table {
    font-size: 13px !important;
  }

  th,
  td {
    padding: 9px 10px !important;
  }

  .chart {
    width: 100% !important;
    min-width: 0 !important;
    height: 320px !important;
    min-height: 320px !important;
  }

  .bar-row,
  .line-row {
    grid-template-columns: minmax(110px, 190px) 1fr auto !important;
  }

  .logo img,
  .logo-wrap img,
  .logo-panel img {
    max-height: 86px !important;
    width: auto !important;
  }

  .multi-select-menu {
    min-width: min(460px, calc(100vw - 48px)) !important;
    max-height: 62vh !important;
  }

  .pill,
  .status-pill,
  .badge,
  .cta,
  .chip {
    max-width: 100%;
  }

  .modal,
  .popover,
  .dropdown,
  .filter-popover {
    max-width: calc(100vw - 36px) !important;
  }
}

@media (min-width: 721px) and (max-width: 900px),
  (hover: none) and (pointer: coarse) and (min-width: 721px) and (max-width: 900px) {
  .filters,
  .toolbar-grid,
  .controls,
  .cards,
  .executive-grid,
  .refresh-grid,
  .kpi-grid,
  .kpis,
  .metrics,
  .metric-grid,
  .topline,
  .snapshot-grid,
  .pl-highlights,
  .grid-3,
  .grid-4,
  .three-col,
  .triple,
  .metric-pair-grid,
  .evolution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-2,
  .two-col,
  .split,
  .top-grid,
  .hero-grid,
  .dashboard-grid,
  .section-grid,
  .matrix-grid,
  .bu-columns,
  .pl-grid {
    grid-template-columns: 1fr !important;
  }

  .page {
    padding-top: 22px !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px),
  (hover: none) and (pointer: coarse) and (min-width: 901px) and (max-width: 1366px) {
  .filters,
  .toolbar-grid,
  .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .cards,
  .executive-grid,
  .refresh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .kpi-grid,
  .kpis,
  .metrics,
  .metric-grid,
  .topline,
  .snapshot-grid,
  .pl-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .grid-3,
  .grid-4,
  .three-col,
  .triple,
  .metric-pair-grid,
  .evolution-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}