/*
 * Mobile baseline overrides.
 *
 * Sneat ships responsive defaults but a few patterns degrade poorly on
 * phones — icon-only buttons end up too small to tap, tables push
 * users into horizontal scroll, KPI cards waste vertical space when
 * they stack. This file lifts those specific pain points without
 * touching the desktop look.
 *
 * Loaded after the Sneat core CSS so these rules win the cascade.
 */

@media (max-width: 575.98px) {
  /* ── Touch targets ─────────────────────────────────────────────── */
  /* iOS HIG = 44px, Material = 48dp. Sneat .btn-sm is 31px which is
     fine on desktop but a coin-toss on a phone. Bump icon-only and
     small action buttons to 40px (slightly under 44 so the existing
     layouts don't reflow visibly, but well above the 31px default). */
  .btn-sm {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Form controls — Bootstrap's 38px default works but bumping them
     to 44px makes typing on a phone considerably less error-prone. */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 1rem; /* prevent iOS Safari auto-zoom on focus */
  }
  /* Checkboxes / radios — bump the hit area without changing the
     visible glyph size. */
  .form-check-input {
    min-width: 22px;
    min-height: 22px;
  }

  /* ── Tables — trim padding so the primary columns stay legible
     before .table-responsive triggers horizontal scroll. */
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
  }
  .table {
    font-size: 0.875rem;
  }

  /* ── KPI cards stack vertically on small screens. Reduce the
     vertical padding so 4 cards don't push the chart section off
     the visible fold. */
  .card-body {
    padding: 1rem;
  }

  /* ── Page header rows — title on the left, action button or filter
     form on the right. On a phone the two can't share 375px, so let
     the row wrap; the action lands on its own line below the title. */
  .d-flex.align-items-center.justify-content-between {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .d-flex.align-items-center.justify-content-between > .btn,
  .d-flex.align-items-center.justify-content-between > .d-flex > .btn {
    margin-top: 0.5rem;
  }
}

/* ── Hover-only affordances behave badly on touch — convert the
   common .table-hover row highlight to active-only on devices that
   don't support real hover. Saves a sticky highlight after tapping. */
@media (hover: none) {
  .table-hover > tbody > tr:hover > * {
    background-color: inherit;
  }
}

/* ── Card-link affordance ─────────────────────────────────────────
   Anchor-wraps-card and anchor-is-card patterns need to read as
   actionable AT REST, not just on hover. Mobile has no hover; even
   on desktop a dead-looking nav card means users discover the link
   by accident. ``.card-nav-chevron`` (placed inline in the markup)
   is the always-visible, touch-friendly signal. The lift + cursor
   are pointer-device polish on top.

   Two markup variants both work:
     <a href><div class="card">…</div></a>     (anchor wraps card)
     <a href class="card">…</a>                 (anchor IS the card)
*/
a.card,
a:has(> .card) {
  cursor: pointer;
}
a.card,
a > .card {
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
a.card:hover,
a:hover > .card,
a.card:focus-visible,
a:focus-visible > .card {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}
.card-nav-chevron {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  color: var(--bs-secondary-color, #8592a3);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}
a.card:hover .card-nav-chevron,
a:hover > .card .card-nav-chevron,
a.card:focus-visible .card-nav-chevron,
a:focus-visible > .card .card-nav-chevron {
  opacity: 1;
  transform: translateX(2px);
}