/* Location feature visuals
   Extracted from index.html to keep PWA visual ownership explicit. */

.tracking-status-card{
  margin-top:var(--space-6);
  padding:var(--space-control-x) var(--space-6);
  border-radius:var(--radius-xl);
  border:1px solid #dbeafe;
  background:var(--color-primary-soft);
}
.tracking-status-card.hidden{
  display:none;
}
.tracking-status-eyebrow{
  display:block;
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-bold);
  color:var(--color-primary-strong);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.tracking-status-title{
  margin:var(--space-2) 0 0;
  font-size:var(--font-size-2xl);
  line-height:1.2;
}
.tracking-status-title.with-icon,
.location-indicator-head,
.location-incidents-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.tracking-status-detail{
  margin:var(--space-3) 0 0;
  color:#1e3a8a;
  line-height:1.45;
  white-space:pre-line;
}
.tracking-status-meta{
  margin:var(--space-4) 0 0;
  color:var(--text-secondary);
  font-size:var(--font-size-sm);
}
  .tracking-status-card[data-state="active"],
  .tracking-status-card[data-state="available"]{
    border-color:var(--color-success-border);
    background:var(--color-success-soft);
  }
  .tracking-status-card[data-state="active"] .tracking-status-eyebrow,
  .tracking-status-card[data-state="active"] .tracking-status-detail,
  .tracking-status-card[data-state="available"] .tracking-status-eyebrow,
  .tracking-status-card[data-state="available"] .tracking-status-detail{
    color:var(--color-success-strong);
  }
.tracking-status-card[data-state="paused"]{
  border-color:var(--color-warning-border);
  background:var(--color-warning-soft);
}
.tracking-status-card[data-state="paused"] .tracking-status-eyebrow,
.tracking-status-card[data-state="paused"] .tracking-status-detail{
  color:var(--color-warning);
}
.tracking-status-card[data-state="permissions_missing"],
.tracking-status-card[data-state="gps_disabled"],
.tracking-status-card[data-state="error"]{
  border-color:var(--color-danger-border);
  background:var(--color-danger-soft);
}
.tracking-status-card[data-state="permissions_missing"] .tracking-status-eyebrow,
.tracking-status-card[data-state="permissions_missing"] .tracking-status-detail,
.tracking-status-card[data-state="gps_disabled"] .tracking-status-eyebrow,
.tracking-status-card[data-state="gps_disabled"] .tracking-status-detail,
.tracking-status-card[data-state="error"] .tracking-status-eyebrow,
.tracking-status-card[data-state="error"] .tracking-status-detail{
  color:var(--color-danger-strong);
}
.location-card-cta{
  margin-top:var(--space-5);
}
.location-view{
  display:flex;
  flex-direction:column;
  gap:var(--space-7);
}
.location-view-header{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.location-view-copy{
  margin:0;
  color:var(--text-body);
  line-height:1.5;
}
.cuidare-icon{
  display:inline-block;
  width:1.25em;
  height:1.25em;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--cuidare-icon-url) center / contain no-repeat;
  mask:var(--cuidare-icon-url) center / contain no-repeat;
}
.cuidare-icon[data-icon=""]{
  display:none;
}
.tracking-status-title .cuidare-icon{
  width:1.2em;
  height:1.2em;
}
.location-view-state{
  padding:var(--space-8);
  border-radius:var(--radius-4xl);
  border:1px solid #dbeafe;
  background:linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow:0 10px 24px rgba(37,99,235,.08);
}
.location-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
  margin-bottom:var(--space-4);
}
.location-hero-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-7);
}
.location-hero-copy{
  min-width:0;
}
.location-hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-3);
  min-width:168px;
}
.location-refresh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.location-refresh-btn .cuidare-icon{
  width:18px;
  height:18px;
}
.location-refresh-msg{
  margin:0;
  color:#475569;
  font-size:13px;
  line-height:1.35;
  text-align:right;
  max-width:220px;
}
.location-refresh-msg[hidden]{
  display:none !important;
}
.location-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  background:#dbeafe;
  color:#1d4ed8;
}
.location-hero-badge[data-state="inside"]{
  background:#dcfce7;
  color:#166534;
}
.location-hero-badge[data-state="outside"],
.location-hero-badge[data-state="stale"]{
  background:#fef3c7;
  color:#92400e;
}
.location-hero-badge[data-state="paused"],
.location-hero-badge[data-state="permissions_missing"],
.location-hero-badge[data-state="gps_disabled"],
.location-hero-badge[data-state="error"]{
  background:#fee2e2;
  color:#b91c1c;
}
.location-view-state[data-state="inside"]{
  border-color:#bbf7d0;
  background:linear-gradient(145deg, #f0fdf4 0%, #ecfdf5 100%);
}
.location-view-state[data-state="inside"] .tracking-status-eyebrow,
.location-view-state[data-state="inside"] .tracking-status-detail{
  color:#166534;
}
.location-view-state[data-state="fresh"]{
  border-color:#bfdbfe;
}
.location-view-state[data-state="stale"]{
  border-color:#fde68a;
  background:linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
}
.location-view-state[data-state="outside"]{
  border-color:#fde68a;
  background:linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
}
.location-view-state[data-state="outside"] .tracking-status-eyebrow,
.location-view-state[data-state="outside"] .tracking-status-detail,
.location-view-state[data-state="stale"] .tracking-status-eyebrow,
.location-view-state[data-state="stale"] .tracking-status-detail{
  color:#92400e;
}
.location-view-state[data-state="paused"],
.location-view-state[data-state="permissions_missing"],
.location-view-state[data-state="gps_disabled"],
.location-view-state[data-state="error"]{
  border-color:#fecaca;
  background:linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%);
}
.location-view-state[data-state="paused"] .tracking-status-eyebrow,
.location-view-state[data-state="paused"] .tracking-status-detail,
.location-view-state[data-state="permissions_missing"] .tracking-status-eyebrow,
.location-view-state[data-state="permissions_missing"] .tracking-status-detail,
.location-view-state[data-state="gps_disabled"] .tracking-status-eyebrow,
.location-view-state[data-state="gps_disabled"] .tracking-status-detail,
.location-view-state[data-state="error"] .tracking-status-eyebrow,
.location-view-state[data-state="error"] .tracking-status-detail{
  color:#b91c1c;
}
.location-indicators{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
.location-indicator{
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:14px;
  background:#fff;
}
.location-indicator[data-tone="positive"]{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.location-indicator[data-tone="warning"]{
  border-color:#fde68a;
  background:#fffbeb;
}
.location-indicator[data-tone="neutral"]{
  background:#f8fafc;
}
.location-indicator-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
}
.location-indicator-value{
  font-size:16px;
  color:#0f172a;
}
.location-indicator-head{
  color:#64748b;
}
.location-indicator[data-tone="positive"] .location-indicator-head{
  color:#15803d;
}
.location-indicator[data-tone="warning"] .location-indicator-head{
  color:#92400e;
}
.location-sources-panel{
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  padding:16px;
}
.location-sources-header,
.location-source-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.location-sources-header h3{
  margin:0;
  font-size:16px;
}
.location-sources-header span{
  color:#64748b;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.location-sources-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.location-official-source-selector{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:12px;
  background:#f8fafc;
}
.location-source-item{
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px;
  background:#f8fafc;
}
.location-source-item[data-tone="positive"]{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.location-source-item[data-tone="warning"]{
  border-color:#fde68a;
  background:#fffbeb;
}
.location-source-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-weight:700;
  color:#0f172a;
}
.location-source-head .cuidare-icon{
  width:18px;
  height:18px;
  color:#334155;
}
.location-source-badge{
  flex:0 0 auto;
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  background:#e2e8f0;
  color:#334155;
}
.location-source-badge[data-tone="positive"]{
  background:#dcfce7;
  color:#166534;
}
.location-source-badge[data-tone="warning"]{
  background:#fef3c7;
  color:#92400e;
}
.location-source-meta{
  margin:8px 0 0;
  color:#475569;
  font-size:13px;
  line-height:1.45;
}
.location-source-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;
}
.location-source-action-btn{
  min-height:34px;
  padding:0 12px;
  font-size:13px;
}
.location-source-action-btn[data-refresh-state="waiting"]{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:#64748b;
  box-shadow:none;
  cursor:not-allowed;
}
.location-shell-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(300px, 1fr);
  gap:16px;
  align-items:start;
}
.location-map-frame{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}
.location-map-stage{
  width:100%;
  min-height:360px;
}
.location-map-stage[data-state="stale"]{
  filter:saturate(.72);
}
.location-map-stage[data-state="error"],
.location-map-stage[data-state="empty"],
.location-map-stage[data-state="loading"]{
  display:none;
}
.location-map-fallback{
  padding:18px 16px;
  color:#475569;
  line-height:1.45;
}
.location-map-fallback[hidden]{
  display:none !important;
}
.location-side-card,
.location-summary-card{
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  padding:18px;
}
.location-side-card h3,
.location-summary-card h3{
  margin:0;
}
.location-side-copy{
  margin:8px 0 0 0;
  color:#475569;
  line-height:1.5;
}
.location-side-meta{
  margin:10px 0 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.45;
}
.location-side-meta[hidden]{
  display:none !important;
}
.location-side-notice{
  margin:10px 0 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.45;
}
.location-side-notice[hidden]{
  display:none !important;
}
.location-incidents-list{
  margin:14px 0 0 0;
  padding-left:0;
  list-style:none;
  color:#334155;
}
.location-incidents-item + .location-incidents-item{
  margin-top:6px;
}
.location-incidents-item{
  align-items:flex-start;
}
.location-side-actions,
.location-summary-actions,
.location-quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.location-side-card[data-state="warning"]{
  border-color:#fde68a;
  background:#fffbeb;
}
.location-side-card[data-state="clear"]{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.location-summary-card{
  background:#f8fafc;
}
.location-companion-card{
  border:1px solid #c7d2fe;
  border-radius:14px;
  background:#eef2ff;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.location-companion-card[data-state="active"]{
  border-color:#a7f3d0;
  background:#ecfdf5;
}
.location-companion-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.location-companion-title{
  margin:0;
  font-size:15px;
}
.location-companion-detail{
  margin:0;
  color:#475569;
  line-height:1.45;
}
.location-companion-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.location-companion-controls select{
  min-height:38px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  padding:0 10px;
  background:#fff;
}
.location-quick-actions{
  margin-top:0;
}
.location-wifi-candidate{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border:1px solid #bfdbfe;
  border-radius:16px;
  background:#eff6ff;
  padding:18px;
}
.location-wifi-candidate[hidden],
.location-wifi-candidate.hidden{
  display:none !important;
}
.location-wifi-candidate-copy{
  min-width:0;
}
.location-wifi-candidate h3{
  margin:0;
  color:#0f172a;
  font-size:20px;
  line-height:1.25;
}
.location-wifi-candidate p{
  overflow-wrap:anywhere;
}
#locationWifiCandidateDetail{
  margin:8px 0 0;
  color:#1e3a8a;
  line-height:1.45;
}
.location-wifi-candidate-meta{
  margin:8px 0 0;
  color:#475569;
  font-size:13px;
  line-height:1.4;
}
.location-wifi-candidate-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.location-map-note{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
}
.location-map-column{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.location-scope-note{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
}
@media (max-width: 820px){
  .location-wifi-candidate{
    flex-direction:column;
  }
  .location-wifi-candidate-actions,
  .location-wifi-candidate-actions .btn{
    width:100%;
  }
  .location-sources-list{
    grid-template-columns:1fr;
  }
  .location-source-top{
    align-items:flex-start;
  }
}