/* ============================================================
   Mobile-native polish: cards, grids, tables, buttons, chips
   Works with Bootstrap (no JS required)
   ============================================================ */

:root{
  --native-radius: 18px;
  --native-radius-sm: 12px;
  --native-border: rgba(15,23,42,.05);
  --native-shadow: 0 12px 30px rgba(0,0,0,.07);
  --native-shadow-sm: 0 8px 22px rgba(0,0,0,.06);
}

.native-page{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.native-card{
  border-radius: var(--native-radius) !important;
  border: 1px solid var(--native-border) !important;
  box-shadow: var(--native-shadow-sm) !important;
  overflow: hidden;
  background: #fff;
}

.native-card .card-header{
  background: #fff;
  border-bottom: 1px solid var(--native-border);
}

.native-card .card-body{
  padding: 8px;
}

@media (max-width: 575.98px){
  .native-card .card-body{ padding: 8px; }
}

.native-btn{
  border-radius: var(--native-radius-sm) !important;
  font-weight: 800;
  letter-spacing: .1px;
  padding: .30rem .52rem;
  font-size: .82rem;
  line-height: 1.15;
}

@media (max-width: 575.98px){
  .native-btn{
    padding: .30rem .52rem;
    font-size: .82rem;
  }
}

/* Soft “pill” badge */
.native-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--native-border);
  background: rgba(0,0,0,.02);
  font-weight: 800;
  font-size: 12px;
}

/* KPI grids (auto-fit) */
.native-kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 991.98px){
  .native-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .native-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Tables that feel native on mobile */
.native-table{
  font-size: 0.86rem;
}
.native-table thead th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-bottom: 1px solid var(--native-border) !important;
}
.native-table td, .native-table th{
  vertical-align: middle !important;
}

/* Scrollable tables on small screens */
.native-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--native-radius);
}

/* Spacing helpers */
.native-section{
  margin-top: 14px;
  margin-bottom: 14px;
}

/* Leaderboard medals */
.native-medal{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 1px solid var(--native-border);
  background: rgba(0,0,0,.03);
}

/* Small, tidy form controls */
.native-input, .native-select{
  border-radius: var(--native-radius-sm) !important;
  padding: .6rem .8rem !important;
}


/* === Ultra-compact (iOS-like) tightening === */
.native-card h1, .native-card h2, .native-card h3, .native-card h4,
.native-card .card-title, .native-card .h1, .native-card .h2, .native-card .h3, .native-card .h4{
  margin-bottom: .35rem;
}
.native-card h1, .native-card .h1{ font-size: 1.25rem; }
.native-card h2, .native-card .h2{ font-size: 1.12rem; }
.native-card h3, .native-card .h3{ font-size: 1.02rem; }
.native-card h4, .native-card .h4{ font-size: .96rem; }

.native-table th, .native-table td{
  padding: .38rem .52rem !important;
}
.native-table thead th{
  padding-top: .48rem !important;
  padding-bottom: .48rem !important;
}
.native-kpi-grid{
  gap: 6px;
}
.native-kpi-grid .native-card .card-body{
  padding: 8px;
}
.native-section{
  margin-top: 10px;
  margin-bottom: 10px;
}

/* iOS hairline separators inside native cards */
:root{ --ios-hairline: rgba(15,23,42,.07); }

.native-card .card-header{
  border-bottom: 1px solid var(--ios-hairline);
}
.native-card hr{
  border-top: 1px solid var(--ios-hairline);
  opacity: 1;
}
.native-card .list-group-item{
  border-color: var(--ios-hairline);
}
.native-card .border-top,
.native-card .border-bottom{
  border-color: var(--ios-hairline) !important;
}

/* Tables: thinner separators */
.native-table th, .native-table td{
  padding: .30rem .45rem !important;
  border-color: var(--ios-hairline) !important;
}

/* v12 iOS grouped baseline */
.native-page{background:#F2F2F7;}