/* ============================================================
   responsive.css — Sitaidel FRS mobile/tablet adaptation.
   Load AFTER css/styles.css. No desktop visual changes.
   ============================================================ */

/* topbar becomes a flex row so the (mobile-only) menu button can sit inline */
.topbar { display: flex; align-items: center; gap: 12px; }
.topbar-text { min-width: 0; flex: 1; }
.topbar-text h1, .topbar-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* hamburger — hidden on desktop */
.menu-btn {
  display: none;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--ink-2);
  place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
.menu-btn:hover { background: var(--surface-2); color: var(--ink); }
.menu-btn svg { width: 19px; height: 19px; }

/* scrim behind the sidebar drawer */
.scrim {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(16,24,40,.42);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ============================================================
   ≤ 920px — sidebar collapses into an off-canvas drawer
   ============================================================ */
@media (max-width: 920px) {
  .app { display: block; height: 100dvh; }
  .main { height: 100%; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(300px, 85vw);
    transform: translateX(-104%);
    transition: transform .22s ease;
    box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }

  .menu-btn { display: grid; }

  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 17px; }
  .topbar p { font-size: 12px; }
  .page { padding: 18px 16px 72px; max-width: none; }

  /* two-column tab layouts (identify / enroll / jobs) stack */
  .split-main { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* tables scroll sideways instead of crushing */
  .card:has(> .tbl) { overflow-x: auto; }
  .card > .tbl { min-width: 560px; }

  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .dropzone { padding: 28px 18px; }
  .empty { padding: 44px 18px; }
  .section-head .row { flex-wrap: wrap; }

  /* gallery search stretches */
  .gal-search { width: 100% !important; }
  .gal-search-wrap { flex: 1; min-width: 180px; }
}

/* ============================================================
   ≤ 640px — phone-size refinements
   ============================================================ */
@media (max-width: 640px) {
  /* identify ranked rows: score block drops to its own line */
  .match-row { grid-template-columns: 20px 44px 10px 44px minmax(0, 1fr) !important; gap: 9px !important; }
  .match-row .crop { width: 44px !important; height: 44px !important; }
  .match-row .crop .crop-label { display: none; }
  .match-row > div:last-child {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    text-align: left !important;
    border-top: 1px solid var(--border-2); padding-top: 8px;
  }
  .match-row > div:last-child .match-row-cta { margin-left: auto; opacity: 1; margin-top: 0; }

  /* enroll file cards: crop + text, actions tuck under text */
  .en-file-top { grid-template-columns: 60px minmax(0, 1fr) !important; gap: 11px !important; }
  .en-file-top .crop { width: 60px !important; height: 60px !important; }
  .en-file-top > :last-child { grid-column: 2; justify-content: flex-start; }

  /* modal becomes a bottom sheet */
  .modal-overlay { place-items: end center; padding: 0; }
  .modal, .modal-wide {
    width: 100%; max-width: 100%;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .md-crops { gap: 10px; }
  .md-crop { max-width: 132px; }
  .md-footer { flex-direction: column; }
  .sig-metrics { grid-template-columns: repeat(2, 1fr); }

  .topbar { padding: 11px 14px; }
  .page { padding: 16px 12px 64px; }
}

/* comfortable touch targets on touch devices */
@media (pointer: coarse) {
  .nav-item { padding: 12px 11px; }
  .btn-sm { padding: 8px 12px; }
  .chip { padding: 8px 13px; }
  input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
}