/* NHPQ UI BALANCE R1 — 2026-09-07
   UI-only layer. No map/search/data logic changes.
   Goals: more map breathing room, consistent panel scale, clearer touch targets,
   balanced desktop/tablet/mobile, and matching parcel-detail proportions. */

/* ---------- DESKTOP / LARGE LAPTOP ---------- */
@media (min-width:1181px) {
  .topbar,
  .admin-header {
    height:76px;
    padding-inline:22px;
    gap:14px;
  }

  .map-shell {
    height:calc(100dvh - 76px);
  }

  .topbar .brand { gap:11px; }
  .topbar .brand-mark {
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:13px;
  }
  .topbar .brand strong { font-size:15px; }
  .topbar .brand small { font-size:12.5px; }
  .topbar .top-actions { gap:10px; }
  .topbar .account-button {
    min-height:40px;
    padding-inline:14px;
    font-size:.82rem;
  }

  /* Main map: slightly narrower side cards = more usable map in the middle. */
  .map-shell > .search-card {
    top:18px;
    left:18px;
    width:clamp(360px,28vw,410px);
    padding:15px;
    border-radius:18px;
  }
  .search-card .search-title { font-size:16px; }
  .search-card .search-mode-tabs { margin-bottom:12px; }
  .search-card .search-mode-tab {
    min-height:40px;
    font-size:12.5px;
  }
  .search-card .parcel-grid { gap:9px; }
  .search-card .parcel-grid label { font-size:12.5px; }
  .search-card .parcel-grid input,
  .search-card .coordinate-input-label input {
    min-height:42px;
    font-size:14px;
  }
  .search-card .parcel-lookup-button {
    min-height:42px;
    padding-block:10px;
  }
  .search-card .parcel-lookup-hint { line-height:1.45; }

  .map-shell > .controls-card {
    top:18px;
    right:18px;
    gap:6px;
    padding:8px;
    border-radius:16px;
  }
  .map-shell > .controls-card .control-button {
    min-height:40px;
    padding:9px 12px;
    border-radius:10px;
    font-size:12.5px;
  }

  .map-shell > .data-browser-card {
    top:76px;
    right:18px;
    width:clamp(335px,25vw,375px);
    max-height:calc(100dvh - 205px);
    border-radius:18px;
  }
  .data-browser-card .data-browser-section { padding:15px; }
  .data-browser-card .card-title { font-size:15px; }
  .data-browser-card .layer-row {
    min-height:38px;
    gap:9px;
    font-size:13px;
  }
  .data-browser-card .layer-row input {
    width:17px;
    height:17px;
    margin:0;
  }
  .data-browser-card .layer-row em { font-size:10.5px; }
  .data-browser-card .sheet-filter {
    min-height:40px;
    font-size:12.5px;
  }
  .data-browser-card .sheet-row {
    min-height:34px;
    font-size:12px;
  }

  .map-shell > .opacity-card {
    right:18px;
    bottom:24px;
    width:clamp(335px,25vw,375px);
    padding:12px 15px;
    border-radius:16px;
  }

  .map-shell > .left-map-stack {
    left:18px;
    bottom:24px;
    width:clamp(300px,22vw,340px);
    gap:10px;
  }
  .left-map-stack .documents-card { max-height:235px; }
  .left-map-stack .legend-card { max-height:min(32dvh,310px); }
  .left-map-stack .legend-heading { padding:14px 15px; }

  /* Parcel detail: panel is substantial, but map remains dominant. */
  .parcel-detail-shell {
    grid-template-columns:minmax(0,1fr) clamp(440px,29vw,515px);
    height:calc(100dvh - 76px);
  }
  .parcel-detail-panel {
    padding:28px 28px 50px;
  }
  .parcel-detail-panel h1 { font-size:31px; }
  .parcel-detail-subtitle { font-size:14px; }
  .parcel-detail-actions {
    gap:10px;
    margin-top:15px;
  }
  .parcel-detail-actions button {
    min-height:44px;
    font-size:.83rem;
  }
  .parcel-detail-section { margin-top:26px; padding-top:21px; }
  .parcel-detail-section h2 { font-size:18.5px; }
  .detail-dl { font-size:13.5px; gap:10px 15px; }

  .parcel-map-controls {
    top:16px;
    right:16px;
    gap:7px;
    padding:8px;
    border-radius:15px;
  }
  .parcel-map-controls .control-button {
    min-height:40px;
    padding:9px 12px;
    font-size:12.5px;
  }
  .parcel-map-status {
    top:16px;
    left:16px;
  }
  .parcel-layer-panel {
    top:76px;
    right:16px;
    width:min(360px,calc(100% - 32px));
    max-height:calc(100% - 98px);
    border-radius:18px;
  }
  .parcel-layer-panel-heading { padding:15px 16px 13px; }
  .parcel-layer-panel-heading strong { font-size:15.5px; }
  .parcel-layer-row { min-height:49px; }
  .parcel-layer-row input { width:17px; height:17px; }
  .parcel-layer-row > span strong { font-size:12.5px; }
  .parcel-layer-row > span small { font-size:10.5px; }
}

/* Extra protection for narrower desktop/laptop widths just above tablet mode. */
@media (min-width:1181px) and (max-width:1360px) {
  .map-shell > .search-card { width:350px; left:14px; }
  .map-shell > .data-browser-card,
  .map-shell > .opacity-card { width:325px; right:14px; }
  .map-shell > .left-map-stack { width:292px; left:14px; }
  .map-shell > .controls-card { right:14px; }
  .map-shell > .controls-card .control-button { padding-inline:9px; font-size:11.5px; }
  .parcel-detail-shell { grid-template-columns:minmax(0,1fr) 440px; }
}

/* ---------- TABLET / IPAD / NARROW LAPTOP ---------- */
@media (min-width:761px) and (max-width:1180px),
       (min-width:761px) and (max-width:1400px) and (any-pointer:coarse) {
  .topbar { height:var(--nhpq-tablet-header,64px); }
  .map-shell { height:calc(100dvh - var(--nhpq-tablet-header,64px)); }
  .topbar .brand-mark { width:40px; height:40px; flex-basis:40px; border-radius:12px; }
  .topbar .brand strong { font-size:14px; }
  .topbar .brand small { font-size:11px; }
  .nhpq-mobile-dock {
    width:min(520px,calc(100% - 28px));
  }
  .nhpq-mobile-dock button { min-height:54px; }
  .search-card,
  .data-browser-card,
  .left-map-stack .documents-card,
  .left-map-stack .legend-card,
  .nhpq-mobile-support-sheet {
    width:min(445px,calc(100% - 28px)) !important;
  }
  .search-card .search-mode-tab,
  .search-card input,
  .search-card button,
  .data-browser-card .sheet-filter { min-height:46px; }
  .data-browser-card .layer-row { min-height:46px; }
  .data-browser-card .sheet-row { min-height:43px; }
}

/* ---------- PHONE ---------- */
@media (max-width:760px) {
  .topbar { gap:8px; }

  /* Touch targets without making cards visually bulky. */
  .search-card .search-mode-tab,
  .search-card input,
  .search-card button,
  .control-button,
  .data-browser-card .sheet-filter,
  .data-browser-card .layer-row,
  .nhpq-mobile-dock button {
    min-height:46px;
  }
  .data-browser-card .layer-row input {
    width:18px;
    height:18px;
  }
  .search-card .parcel-grid input { font-size:16px; } /* avoids iOS zoom */
  .search-card .search-title { font-size:16px; }

  .parcel-detail-map-wrap {
    height:54dvh;
    min-height:360px;
  }
  .parcel-detail-panel {
    padding:22px 18px 44px;
  }
  .parcel-detail-panel h1 { font-size:26px; }
  .parcel-detail-subtitle { font-size:13.5px; }
  .parcel-detail-actions button { min-height:46px; }
  .detail-dl { font-size:13.5px; }

  .parcel-map-controls .control-button {
    min-height:42px;
    padding:8px 10px;
  }
  .parcel-layer-panel-heading > button {
    width:38px;
    height:38px;
  }
  .parcel-layer-row {
    min-height:47px;
    grid-template-columns:20px minmax(0,1fr);
    gap:10px;
  }
  .parcel-layer-row input {
    width:18px;
    height:18px;
  }
  .parcel-layer-row > span strong { font-size:13px; }
  .parcel-layer-row > span small { font-size:11px; }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width:380px) {
  .parcel-detail-map-wrap { height:51dvh; min-height:340px; }
  .parcel-detail-panel { padding-inline:15px; }
  .parcel-detail-actions { gap:7px; }
  .parcel-detail-actions button { padding-inline:8px; font-size:.78rem; }
}