/* metrics/assets/mobile.css */

/* Default: keep desktop layout unchanged; hide mobile alternates */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media (max-width: 860px) {
  /* Swap: hide desktop-only blocks, show mobile alternates */
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }

  /* Slightly denser typography */
  html, body { font-size: 14px; max-width: 100%; overflow-x: hidden; }
  .wrap { max-width: 100%; padding: 12px; }

  /* INDEX: Search + Sort should be the same width on mobile */
  .controls { display: flex; flex-direction: column; gap: 10px; }
  .controls input,
  .controls select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* key for iOS */
  }

  /* Any tables that remain visible should scroll within wrapper */
  .tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }

  /* Field observations: keep consistent sizing */
  .obsForm .formRow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .obsForm .formRow label {
    min-width: 0 !important; /* critical for iOS shrink */
  }
  .obsForm input[type="date"],
  .obsForm select,
  .obsForm textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* iOS Safari date input “overhang” fix */
  .obsForm input[type="date"] { padding-right: 40px; }
  .obsForm input[type="date"]::-webkit-date-and-time-value { text-align: left; }

  /* 7-day summaries: 4 cards then 3 cards */
  .summaryMobile { margin-top: 10px; }
  .sumRow { display: grid; gap: 8px; }
  .sumRow4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sumRow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }

  .sumCard { border-radius: 14px; padding: 8px; overflow: hidden; line-height: 1.15; }
  .sumTop { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .sumDate { font-weight: 900; font-size: 12px; }
  .sumIcons { display: flex; gap: 6px; align-items: center; }
  .sumIcons img { width: 16px; height: 16px; }
  .sumIcos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .sumIcos img { width: 16px; height: 16px; }
  .sumBody { margin-top: 6px; }
  .sumLvl { font-size: 12px; }
  .sumTrend, .sumMeta { font-size: 11px; color: rgba(0,0,0,0.65); }

  /* Hourly cards */
  .hourlyCards { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
  .hourCard { border: 1px solid rgba(0,0,0,0.10); border-radius: 14px; padding: 10px; background: #fff; }
  .hourCard.builderC { border-color: rgba(16, 185, 129, 0.55); }
  .hourCard.builderW { border-color: rgba(245, 158, 11, 0.55); }

  .hrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }
  .kv { min-width: 0; }
  .k { font-size: 11px; color: rgba(0,0,0,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v { font-weight: 800; font-size: 13px; }
  .v img { width: 16px; height: 16px; vertical-align: middle; }
}

/* Very small phones */
@media (max-width: 420px) {
  .obsForm .formRow { grid-template-columns: 1fr !important; }
  .sumRow4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sumRow3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Slightly wider phones: 3 columns inside hourly cards */
@media (max-width: 860px) and (min-width: 520px) {
  .hrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}