@media (max-width: 719px) {
  .topbar {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  .topbar-logo {
    font-size: 15px;
  }

  .topbar-tenant {
    max-width: 88px;
    font-size: 10px;
    padding: 3px 8px;
    gap: 4px;
  }

  .topbar-currency-wrap {
    gap: 4px;
    min-width: 0;
  }

  .topbar-currency-label {
    font-size: 9px;
    font-weight: 600;
  }

  .topbar-currency-select {
    min-width: 62px;
    max-width: 76px;
    height: 28px;
    font-size: 11px;
    padding-left: 4px;
    padding-right: 16px;
  }

  .grid.cols-4 {
    grid-template-columns: 1fr 1fr;
  }

  .page-title {
    font-size: 19px;
  }

  .panel-host {
    --panel-inline-pad: var(--space-4);
    padding: var(--space-4);
    padding-bottom: 112px;
  }

  .page-head {
    flex-wrap: wrap;
  }

  .card .table {
    width: 100%;
    table-layout: auto;
    white-space: normal;
    max-width: 100%;
  }

  .card .table th,
  .card .table td {
    white-space: normal;
  }
}

@media (min-width: 720px) {
  .grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .qa-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1023px) {
  .sidebar {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --primary: #0B5CAD;
    --primary-light: #EBF3FB;
    --border: #D1D5DB;
    --divider: #E5E7EB;
    --text: #1F2937;
  }

  body {
    font-size: 14px;
  }

  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: block;
  }

  .topbar {
    padding: 0 var(--space-5);
  }

  .desktop-split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }

  .mobile-tabbar {
    position: static;
    width: auto;
    padding: var(--space-2) var(--space-1) var(--space-4);
  }
}