/* Mobile/PWA polish layer
   Keeps desktop behavior intact while making the installed phone experience
   denser, calmer, and free from sticky-control overlaps. */

@media (max-width: 680px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* Compact app chrome: bottom navigation already owns primary actions. */
  .appbar-in {
    min-height: 52px;
    padding: 6px 14px;
    gap: 8px;
  }

  .brand-button {
    max-width: calc(100vw - 28px);
    gap: 9px;
  }

  .logo {
    width: 27px;
    height: 27px;
  }

  .brand-text b {
    font-size: 15px;
    line-height: 1.2;
  }

  .brand-text > span,
  .connection,
  #btnGanti,
  #btnCsv {
    display: none !important;
  }

  .wrap {
    padding: 10px 12px calc(20px + env(safe-area-inset-bottom));
  }

  /* Result header */
  .venue {
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 7px 1px 9px;
    margin: 0;
  }

  .venue-heading {
    min-width: 0;
    flex: 1 1 auto;
  }

  .venue .section-kicker {
    display: none;
  }

  .venue h1 {
    overflow: hidden;
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .venue-meta {
    gap: 4px 8px;
    margin-top: 5px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  .venue-meta .tag {
    padding: 2px 6px;
  }

  /* Update is already permanently reachable in the bottom nav. */
  .result-refresh {
    display: none !important;
  }

  #hasilMsg .msg {
    margin: 8px 0 10px;
  }

  /* Summary: show everything at a glance instead of a clipped horizontal carousel. */
  .insight {
    display: grid !important;
    grid-auto-flow: initial !important;
    grid-auto-columns: initial !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 8px 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .ins {
    min-width: 0;
    min-height: 82px;
    padding: 11px 12px;
    border-radius: 14px;
    scroll-snap-align: none !important;
  }

  .ins dt {
    margin-bottom: 6px;
    font-size: 8.5px;
    line-height: 1.2;
    letter-spacing: .11em;
  }

  .ins dd,
  .ins.hero dd {
    overflow-wrap: anywhere;
    font-size: 16px !important;
    line-height: 1.16;
  }

  .ins dd small {
    margin-top: 5px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  /* The old sticky tabs could overlap the select controls in installed iOS PWA. */
  .results-shell {
    margin: 0 -12px;
    overflow: visible;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .tabs {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 27, 35, .72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tab {
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 12.5px;
  }

  .tab[aria-selected="true"] {
    border-color: rgba(216, 242, 39, .20);
    background: rgba(216, 242, 39, .10);
  }

  /* Filters */
  .toolbar {
    gap: 8px;
    padding: 9px 12px 8px;
    background: rgba(7, 27, 35, .28);
  }

  .filter-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .select-label {
    min-width: 0;
  }

  .select-label > span {
    margin: 0 0 4px 2px;
    font-size: 8px;
    letter-spacing: .10em;
  }

  .select-label select {
    min-width: 0;
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 12.5px;
  }

  .chip-scroll {
    display: flex;
    gap: 7px;
    margin: 0 -12px;
    padding: 1px 12px 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .chip-scroll::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    min-height: 35px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .desktop-refresh {
    display: none !important;
  }

  .count {
    padding-inline: 1px;
    font-size: 10px;
    line-height: 1.3;
    text-align: left;
  }

  [role="tabpanel"] {
    padding: 0 12px 12px;
  }

  .scroll-tip {
    margin: 0 -12px 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 9.5px;
    line-height: 1.35;
  }

  /* Board: denser heading, same tappable slot size. */
  .court-head {
    align-items: center;
    gap: 8px;
    margin: 11px 0 7px;
  }

  .court-head h3 {
    font-size: 14px;
    line-height: 1.2;
  }

  .court-head > span {
    max-width: 52%;
    font-size: 9.5px;
    line-height: 1.3;
    text-align: right;
  }

  .bar {
    margin-top: 5px;
  }

  .grid-scroll {
    max-height: calc(100dvh - 190px);
    border-radius: 11px;
    overscroll-behavior: contain;
  }

  table.grid thead th {
    min-width: 55px;
    padding: 6px 5px;
  }

  table.grid tbody th.rowhead {
    min-width: 55px;
    padding-inline: 7px;
  }

  .hd-day {
    font-size: 8.5px;
  }

  .hd-date {
    font-size: 10.5px;
  }

  td.slot,
  .cell {
    height: 36px;
    min-height: 36px;
  }

  .cell {
    font-size: 10px;
  }

  .legend {
    gap: 7px 11px;
    margin-top: 9px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  /* Table/chart also need to fit an installed phone window. */
  .chart-wrap,
  .tbl-wrap {
    border-radius: 11px;
  }

  .tbl-wrap {
    max-height: calc(100dvh - 190px);
  }

  table.data {
    font-size: 11.5px;
  }

  table.data th {
    padding: 8px 9px;
    font-size: 8.5px;
  }

  table.data td {
    padding: 8px 9px;
  }

  /* Bottom nav: visually lighter while respecting the iPhone home indicator. */
  .bottom-nav {
    min-height: 54px;
    padding: 4px 10px calc(4px + env(safe-area-inset-bottom));
    background: rgba(4, 20, 27, .96);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }

  .bottom-nav button {
    min-height: 46px;
    gap: 2px;
    padding: 3px 8px;
    font-size: 10.5px;
  }

  .bottom-nav svg {
    width: 18px;
    height: 18px;
  }

  footer {
    margin-top: 22px;
    padding-bottom: 4px;
  }
}

@media (max-width: 370px) {
  .wrap {
    padding-inline: 10px;
  }

  .results-shell {
    margin-inline: -10px;
  }

  .ins {
    padding: 10px;
  }

  .ins dd,
  .ins.hero dd {
    font-size: 15px !important;
  }

  .tabs,
  .toolbar,
  [role="tabpanel"] {
    padding-right: 10px;
    padding-left: 10px;
  }

  .chip-scroll {
    margin-inline: -10px;
    padding-inline: 10px;
  }
}