/* Rules here are exclusive to the native Android shell. Regular web/mobile stays unchanged. */
html.kiper-android-shell #sync-status {
  display: none !important;
}

html.kiper-android-shell .page-header {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  html.kiper-android-shell .card,
  html.kiper-android-shell .card.pad {
    margin-bottom: 10px;
    padding: 12px;
  }

  html.kiper-android-shell .card h3 {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  html.kiper-android-shell .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 10px;
  }

  html.kiper-android-shell .metric {
    min-height: 76px;
    padding: 12px 10px;
  }

  html.kiper-android-shell .metric-label {
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.25;
  }

  html.kiper-android-shell .metric-value {
    font-size: 23px;
  }

  html.kiper-android-shell #page-pasien > .segmented {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px !important;
  }

  html.kiper-android-shell #page-pasien > .segmented .seg {
    min-height: 46px;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.2;
  }

  html.kiper-android-shell #page-pasien .patient-searchbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html.kiper-android-shell #page-pasien .patient-searchbox,
  html.kiper-android-shell #page-pasien .patient-searchbar > .btn {
    grid-column: 1 / -1;
  }
}