@media(max-width:1100px) {
  .grid {
    grid-template-columns: 1fr
  }

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

  .metric.big {
    grid-column: span 1
  }
}

@media(max-width:680px) {
  .page {
    padding: 8px
  }

  .topbar {
    align-items: flex-start
  }

  .owner-link {
    display: none
  }

  .grid,
  .content {
    padding: 8px
  }

  .grid-2,
  .grid-3,
  .actions,
  .kpi {
    grid-template-columns: 1fr
  }

  .top-actions {
    width: 100%;
    justify-content: stretch
  }

  .top-actions .btn {
    width: 100%;
    min-width: 0
  }

  .loan-dialog {
    width: calc(100vw - 14px);
    max-height: 90vh
  }

  .loan-dialog-panel {
    max-height: 90vh
  }

  .loan-dialog-body {
    padding: 8px
  }

  .loan-dialog-body .excel-box {
    min-width: 0
  }

  .loan-dialog-body .excel.compact {
    min-width: 720px
  }

  .loan-dialog-summary {
    padding: 10px;
    margin-bottom: 10px
  }

  .loan-summary-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 5px 0
  }

  .loan-summary-label,
  .loan-summary-value {
    font-size: 12px
  }

  .loan-summary-control,
  .loan-summary-input {
    max-width: 100%
  }

  .brand h1 {
    font-size: 20px
  }

  .hero {
    padding: 16px 13px
  }

  .card {
    padding: 11px
  }

  input,
  select {
    font-size: 16px
  }

  .excel {
    min-width: 760px
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .hero-text {
    flex: 1;
    min-width: 0;
  }

  .hero-badge {
    margin-top: 0;
    white-space: nowrap;
    align-self: center;
  }

  .hero .top-actions {
    width: 100%;
    justify-content: flex-end;
  }
}