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

.home-zone-view{
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.home-zone-copy{
  margin:0;
  color:var(--text-body);
  line-height:1.45;
}
.home-zone-state{
  padding:var(--space-control-x) var(--space-6);
  border-radius:var(--radius-xl);
  border:1px solid #dbeafe;
  background:var(--color-primary-soft);
}
.home-zone-state[data-state="ready"]{
  border-color:var(--border-muted);
  background:var(--surface-muted);
}
.home-zone-state[data-state="empty"]{
  border-color:var(--color-warning-border);
  background:var(--color-warning-soft);
}
.home-zone-state[data-state="saved"]{
  border-color:var(--color-success-border);
  background:var(--color-success-soft);
}
.home-zone-state[data-state="error"]{
  border-color:var(--color-danger-border);
  background:var(--color-danger-soft);
}
.home-zone-state[data-state="saved"] .tracking-status-eyebrow,
.home-zone-state[data-state="saved"] .tracking-status-detail{
  color:var(--color-success-strong);
}
.home-zone-state[data-state="empty"] .tracking-status-eyebrow,
.home-zone-state[data-state="empty"] .tracking-status-detail{
  color:var(--color-warning);
}
.home-zone-state[data-state="error"] .tracking-status-eyebrow,
.home-zone-state[data-state="error"] .tracking-status-detail{
  color:var(--color-danger-strong);
}
.home-zone-baseline{
  margin:var(--space-4) 0 0;
  color:var(--text-secondary);
  font-size:var(--font-size-sm);
}
.home-zone-baseline[hidden]{
  display:none !important;
}
.home-zone-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-5);
  align-items:end;
}
.home-zone-slider-block{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.home-zone-slider-label{
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  font-size:var(--font-size-md);
  font-weight:var(--font-weight-bold);
  color:var(--text-primary);
}
.home-zone-slider{
  width:100%;
}
.home-zone-actions{
  display:flex;
  gap:var(--space-3);
  flex-wrap:wrap;
}
.home-zone-note{
  margin:0;
  color:var(--text-muted);
  font-size:var(--font-size-sm);
  line-height:1.45;
}
.zones-shell{
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.zones-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:stretch;
}
.zones-panel{
  border:1px solid var(--border-muted);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  padding:var(--space-6);
  min-width:0;
}
.zones-panel h3{
  margin:0;
  color:var(--text-primary);
}
.zones-supervision-panel{
  grid-column:1 / -1;
}
.zones-supervision-controls{
  margin-top:var(--space-control-x);
  display:flex;
  flex-direction:column;
}
.zones-supervision-heading{
  margin:0;
  color:#0f172a;
  font-size:16px;
  line-height:1.25;
}
.supervision-level-select{
  display:none;
}
.supervision-level-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.supervision-level-card{
  position:relative;
  min-height:104px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  cursor:pointer;
}
.supervision-level-card:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.supervision-level-card[data-level="light"]{
  --supervision-accent:#16a34a;
}
.supervision-level-card[data-level="medium"]{
  --supervision-accent:#2563eb;
}
.supervision-level-card[data-level="high"]{
  --supervision-accent:#ea580c;
}
.supervision-level-card.selected{
  border-color:var(--supervision-accent);
  background:color-mix(in srgb, var(--supervision-accent) 9%, #fff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--supervision-accent) 20%, transparent);
}
.supervision-card-icon{
  width:32px;
  height:32px;
  color:var(--supervision-accent);
}
.supervision-card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:800;
}
.supervision-card-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.supervision-card-indicator{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid var(--supervision-accent);
}
.supervision-level-card.selected .supervision-card-indicator{
  background:var(--supervision-accent);
}
.zones-choice-card{
  --supervision-accent:#2563eb;
  position:relative;
  min-height:112px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.zones-choice-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.zones-choice-card.selected{
  border-color:var(--supervision-accent);
  background:color-mix(in srgb, var(--supervision-accent) 9%, #fff);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--supervision-accent) 20%, transparent);
}
.zones-choice-card .zones-choice-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
}
.zones-choice-card .zones-choice-copy{
  color:#475569;
  font-size:13px;
  line-height:1.35;
}
.zones-choice-card .supervision-card-indicator{
  flex:0 0 auto;
}
.zones-panel-copy,
.zones-max-hint,
.zones-editor-detail{
  margin:6px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.4;
}
.zones-tile strong{
  color:#0f172a;
}
.zones-tile span{
  color:#475569;
  font-size:13px;
}
.zones-tile small{
  color:#64748b;
  font-size:12px;
}
.zones-safety-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.zones-tile-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}
.zones-tile{
  --zone-accent-soft:#eef6ff;
  --zone-accent-border:#bfdbfe;
  min-height:112px;
  border:1px solid var(--zone-accent-border);
  border-color:color-mix(in srgb, var(--zone-accent, #2563eb) 35%, #e2e8f0);
  border-radius:12px;
  background:var(--zone-accent-soft);
  background:color-mix(in srgb, var(--zone-accent, #2563eb) 8%, #fff);
  padding:12px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.zones-tile:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.zones-tile.selected{
  border-color:var(--zone-accent, #2563eb);
  box-shadow:0 0 0 2px rgba(37,99,235,.18);
}
.zones-tile-dot{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  color:var(--zone-accent, #2563eb);
  background:#fff;
  background:color-mix(in srgb, var(--zone-accent, #2563eb) 14%, #fff);
}
.zones-tile-dot .cuidare-icon{
  width:21px;
  height:21px;
}
.zones-home-tile{
  --zone-accent:#16a34a;
  --zone-accent-soft:#f0fdf4;
  --zone-accent-border:#bbf7d0;
}
.zones-add-tile{
  --zone-accent:#2563eb;
  --zone-accent-soft:#eff6ff;
  --zone-accent-border:#93c5fd;
  border-style:dashed;
}
.zones-add-tile .zones-tile-dot{
  border-radius:999px;
  background:#2563eb;
  color:#fff;
}
.zones-workspace{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(280px, .85fr);
  gap:16px;
  align-items:start;
}
.zones-map-frame{
  position:relative;
  min-height:420px;
}
.zones-map-stage{
  min-height:420px;
}
.zones-map-add-home{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px dashed #fb923c;
  border-radius:12px;
  background:rgba(255,247,237,.96);
  color:#9a3412;
  padding:12px 16px;
  font-weight:800;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
}
.zones-map-add-home[hidden]{
  display:none !important;
}
.zones-map-add-home span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  background:#fed7aa;
  font-size:18px;
  line-height:1;
}
.zones-editor{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.zones-editor-empty{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
  padding:14px;
  color:#475569;
  font-size:14px;
  line-height:1.45;
}
.zones-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.zones-form[hidden],
.zones-editor-empty[hidden]{
  display:none !important;
}
.zones-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#0f172a;
  font-weight:700;
  font-size:13px;
}
.zones-form .input{
  min-width:0;
  width:100%;
}
.zones-checkbox{
  flex-direction:row !important;
  align-items:center;
  gap:8px;
  font-weight:600 !important;
}
.zones-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #94a3b8;
  color:#475569;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:help;
}
.zones-radius-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
}
.zones-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.zones-wifi-block{
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.zones-wifi-block[hidden],
.zones-wifi-block.hidden{
  display:none !important;
}
.zones-wifi-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.zones-wifi-head h3{
  margin:0;
  color:#0f172a;
  font-size:16px;
  line-height:1.25;
}
.zones-wifi-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}
.zones-wifi-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.zones-wifi-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  padding:10px;
}
.zones-wifi-item-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.zones-wifi-item-copy strong,
.zones-wifi-item-copy span{
  overflow-wrap:anywhere;
}
.zones-wifi-item-copy strong{
  color:#0f172a;
}
.zones-wifi-item-copy span,
.zones-wifi-empty{
  color:#64748b;
  font-size:13px;
  line-height:1.35;
}
.zones-wifi-empty{
  margin:0;
}
@media (max-width: 840px){
  .home-zone-controls{
    grid-template-columns:1fr;
  }
  .zones-grid,
  .zones-workspace{
    grid-template-columns:1fr;
  }
  .zones-map-frame,
  .zones-map-stage{
    min-height:340px;
  }
  .zones-actions{
    width:100%;
  }
  .zones-wifi-head,
  .zones-wifi-item{
    flex-direction:column;
    align-items:stretch;
  }
  .zones-actions .btn{