/* ============================================================
   UI Improvements (2026-06) — accessibility, consistency, polish.
   Loaded LAST in index.html so it can refine earlier styles.
   ============================================================ */

/* --- Accessibility: visible keyboard focus (was missing app-wide) --- */
:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Keep the ring for keyboard users; suppress it for pointer/mouse focus. */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- Welcoming disclaimer (override the old warning-red styling) --- */
.disclaimer-header {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(30, 41, 59, 0) 100%) !important;
}
.disclaimer-header h2 {
  color: #e6edf7 !important;
}
.disclaimer-header h2::before {
  content: "" !important;
  display: none !important;
}
.disclaimer-btn {
  background: #3b82f6 !important;
}

/* --- Header auth CTAs (Sign In / Get Started / Upgrade / Account) --- */
.header-auth { display: flex; align-items: center; gap: 10px; margin-left: 20px; }
.hdr-cta {
  font-family: inherit; font-weight: 600; font-size: .9rem; border-radius: 8px;
  padding: 8px 16px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, filter .15s;
}
.hdr-cta-ghost { background: transparent; color: #cbd5e1; border-color: rgba(148,163,184,.3); }
.hdr-cta-ghost:hover { color: #fff; border-color: #3b82f6; }
.hdr-cta-primary { background: #3b82f6; color: #fff; }
.hdr-cta-primary:hover { background: #2f6fd6; }
.hdr-cta-upgrade { background: linear-gradient(135deg, #3b82f6, #38bdf8); color: #fff; }
.hdr-cta-upgrade:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .hdr-cta { padding: 6px 11px; font-size: .82rem; }
  .header-auth { gap: 6px; margin-left: 10px; }
}

/* Header: keep it tidy on small screens now that auth CTAs share the row */
@media (max-width: 760px) {
  .logo-text .tagline { display: none; }
  .logo-text h1 { white-space: nowrap; font-size: 1.05rem; line-height: 1.1; }
  #data-freshness { display: none !important; }
  .hdr-cta { padding: 6px 10px; font-size: .78rem; }
  .header-auth { margin-left: 8px; }
}
@media (max-width: 430px) {
  #header-signin { display: none !important; }
}

/* --- Collapse the map on tabs where it isn't relevant (desktop only) --- */
@media (min-width: 769px) {
  .main-container.map-collapsed .map-panel {
    flex: 0 0 0 !important;
    min-width: 0;
    overflow: hidden;
  }
  .main-container.map-collapsed .results-panel {
    flex: 1 1 100% !important;
  }
}

/* --- Error retry button --- */
.retry-btn {
  margin-top: 14px; background: #3b82f6; color: #fff; border: none;
  border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: background .15s;
}
.retry-btn:hover { background: #2f6fd6; }

/* --- First-run sample-search hint chips (parcels list) --- */
.search-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.search-hints-label { color: #8295b3; font-size: .82rem; }
.search-hint-chip {
  background: rgba(59,130,246,.1); color: #93c5fd; border: 1px solid rgba(59,130,246,.3);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 500;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.search-hint-chip:hover { background: rgba(59,130,246,.2); color: #fff; border-color: #3b82f6; }

/* --- Detail header: show the record title in the center of the actions bar --- */
.detail-panel-actions .header-actions .detail-title {
  flex: 1; min-width: 0; text-align: center; padding: 0 10px;
  font-weight: 600; font-size: .95rem; color: var(--text-primary, #e6edf7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Detail view layout: details in the MIDDLE, list on the RIGHT (desktop) --- */
@media (min-width: 769px) {
  .results-body.detail-open .detail-panel { order: 1; border-left: none; }
  .results-body.detail-open .results-list { order: 2; border-left: 1px solid var(--border-color); }
}

/* --- Skip link (a11y): visible only when focused --- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 2000;
  background: #3b82f6; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }