/* Framework de widgets — apps/core/widgets.py */

:root {
  --rw-borda: #d1d5db;
  --rw-borda-ativa: #2563eb;
  --rw-fundo: #ffffff;
  --rw-fundo-ativo: #eff6ff;
  --rw-texto: #1f2937;
  --rw-texto-suave: #6b7280;
  --rw-raio: 6px;
}

/* ─── ToggleSwitch ─────────────────────────────────────────── */
.rw-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.rw-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.rw-toggle__track {
  width: 44px; height: 24px; border-radius: 12px; background: var(--rw-borda);
  position: relative; transition: background .15s ease;
}
.rw-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--rw-fundo); transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.rw-toggle input:checked + .rw-toggle__track { background: var(--rw-borda-ativa); }
.rw-toggle input:checked + .rw-toggle__track .rw-toggle__thumb { left: 22px; }
.rw-toggle input:focus-visible + .rw-toggle__track { outline: 2px solid var(--rw-borda-ativa); outline-offset: 2px; }

/* ─── DiasSemanaBisel ──────────────────────────────────────── */
.rw-dias { display: inline-flex; gap: 0; }
.rw-dias__chip { cursor: pointer; }
.rw-dias__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.rw-dias__chip span {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--rw-borda);
  border-right-width: 0; background: var(--rw-fundo); color: var(--rw-texto-suave);
  font-size: 13px; font-weight: 600; user-select: none;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.06);
}
.rw-dias__chip:first-child span { border-radius: var(--rw-raio) 0 0 var(--rw-raio); }
.rw-dias__chip:last-child span { border-right-width: 1px; border-radius: 0 var(--rw-raio) var(--rw-raio) 0; }
.rw-dias__chip input:checked + span {
  background: var(--rw-fundo-ativo); color: var(--rw-borda-ativa);
  border-color: var(--rw-borda-ativa); box-shadow: inset 0 2px 3px rgba(37,99,235,.18);
}
.rw-dias__chip input:focus-visible + span { outline: 2px solid var(--rw-borda-ativa); }

/* ─── HorarioFuncionamento ─────────────────────────────────── */
.rw-horario { display: inline-flex; align-items: center; gap: 8px; }
.rw-horario input[type="time"] {
  padding: 5px 8px; border: 1px solid var(--rw-borda); border-radius: var(--rw-raio);
}
.rw-horario__sep { color: var(--rw-texto-suave); font-size: 13px; }

/* ─── Monetary ─────────────────────────────────────────────── */
.rw-money { display: inline-flex; align-items: stretch; }
.rw-money__prefixo {
  display: inline-flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--rw-borda); border-right: 0;
  border-radius: var(--rw-raio) 0 0 var(--rw-raio);
  background: #f3f4f6; color: var(--rw-texto-suave); font-size: 13px;
}
.rw-money input {
  padding: 5px 8px; border: 1px solid var(--rw-borda);
  border-radius: 0 var(--rw-raio) var(--rw-raio) 0; text-align: right; width: 110px;
}

/* ─── PesoQuantidade ───────────────────────────────────────── */
.rw-peso { display: inline-flex; }
.rw-peso__valor {
  width: 100px; padding: 5px 8px; text-align: right;
  border: 1px solid var(--rw-borda); border-radius: var(--rw-raio) 0 0 var(--rw-raio);
}
.rw-peso__unidade {
  border: 1px solid var(--rw-borda); border-left: 0;
  border-radius: 0 var(--rw-raio) var(--rw-raio) 0; background: #f3f4f6; padding: 0 6px;
}

/* ─── RadioComDescricao ────────────────────────────────────── */
.rw-radiocards { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.rw-radiocard {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--rw-borda); border-radius: var(--rw-raio);
  background: var(--rw-fundo); cursor: pointer; transition: border-color .1s ease;
}
.rw-radiocard:hover { border-color: var(--rw-borda-ativa); }
.rw-radiocard input { margin-top: 3px; accent-color: var(--rw-borda-ativa); }
.rw-radiocard__corpo { display: flex; flex-direction: column; gap: 2px; }
.rw-radiocard__corpo strong { font-size: 14px; color: var(--rw-texto); }
.rw-radiocard__corpo small { font-size: 12px; color: var(--rw-texto-suave); line-height: 1.4; }
.rw-radiocard:has(input:checked) {
  border-color: var(--rw-borda-ativa); background: var(--rw-fundo-ativo);
}

/* ─── CheckboxIcones ───────────────────────────────────────── */
.rw-iconcards { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-iconcard {
  cursor: pointer; border: 1px solid var(--rw-borda); border-radius: var(--rw-raio);
  background: var(--rw-fundo); transition: border-color .1s ease;
}
.rw-iconcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.rw-iconcard__corpo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 16px; min-width: 84px; font-size: 13px; color: var(--rw-texto);
}
.rw-iconcard__icone { font-size: 22px; line-height: 1; }
.rw-iconcard:has(input:checked) {
  border-color: var(--rw-borda-ativa); background: var(--rw-fundo-ativo);
  box-shadow: inset 0 0 0 1px var(--rw-borda-ativa);
}
.rw-iconcard:has(input:focus-visible) { outline: 2px solid var(--rw-borda-ativa); }

/* ─── EstacoesPorTurno ─────────────────────────────────────── */
.rw-grade { border-collapse: collapse; }
.rw-grade th, .rw-grade td {
  border: 1px solid var(--rw-borda); padding: 6px 10px; text-align: center;
  font-size: 12px; color: var(--rw-texto);
}
.rw-grade thead th { background: #f3f4f6; font-weight: 600; }
.rw-grade tbody th { background: #f9fafb; text-align: left; }
.rw-grade__celula { display: block; cursor: pointer; }
.rw-grade__celula input { accent-color: var(--rw-borda-ativa); width: 16px; height: 16px; }
.rw-grade__celula span { display: none; }
.rw-grade td:has(input:checked) { background: var(--rw-fundo-ativo); }

/* ─── Ordenável / Etapas ───────────────────────────────────── */
.rw-sortable, .rw-etapas__lista { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.rw-sortable__item, .rw-etapas__item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--rw-borda); border-radius: var(--rw-raio); background: var(--rw-fundo);
}
.rw-sortable__handle { cursor: grab; color: var(--rw-texto-suave); font-size: 15px; user-select: none; }
.rw-sortable__item.sortable-ghost, .rw-etapas__item.sortable-ghost { opacity: .4; }
.rw-etapas__titulo { flex: 1; min-width: 120px; padding: 4px 8px; border: 1px solid var(--rw-borda); border-radius: 4px; }
.rw-etapas__descricao { flex: 2; padding: 4px 8px; border: 1px solid var(--rw-borda); border-radius: 4px; }
.rw-etapas__duracao { width: 64px; padding: 4px 6px; border: 1px solid var(--rw-borda); border-radius: 4px; text-align: right; }
.rw-etapas__remover {
  border: 0; background: none; color: #dc2626; font-size: 18px; cursor: pointer; line-height: 1;
}
.rw-etapas__adicionar {
  margin-top: 4px; padding: 6px 12px; border: 1px dashed var(--rw-borda);
  border-radius: var(--rw-raio); background: none; color: var(--rw-borda-ativa);
  cursor: pointer; font-size: 13px;
}
.rw-etapas__adicionar:hover { border-color: var(--rw-borda-ativa); }

/* ─── Mapa Mapbox GL ──────────────────────────────────────────── */
.rw-mapa { width: 100%; max-width: 100%; }
.rw-mapa__canvas {
  height: 520px; border: 1px solid var(--rw-borda); border-radius: var(--rw-raio); overflow: hidden;
}
.rw-mapa__acoes {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
  color: var(--rw-texto-suave); font-size: 12px;
}
.rw-mapa__limpar, .rw-mapa__osm {
  padding: 4px 10px; border: 1px solid var(--rw-borda); border-radius: 4px;
  background: var(--rw-fundo); cursor: pointer; font-size: 12px;
}
.rw-mapa__osm.is-ativa {
  border-color: var(--rw-borda-ativa); background: var(--rw-fundo-ativo);
  color: var(--rw-borda-ativa);
}
.rw-mapa__osm:disabled { cursor: default; opacity: .8; }
.rw-mapa__hex-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--rw-texto-suave);
}
.rw-mapa__hex-slider { cursor: pointer; width: 100px; accent-color: var(--rw-borda-ativa); }
.rw-mapa__hex-output { min-width: 40px; font-weight: 600; color: var(--rw-texto); }

/* ─── Editor de zona: palco + barra de ferramentas vertical ─────── */
.rw-mapa__palco { position: relative; width: 100%; }
/* No palco, o canvas é a base; a toolbar flutua sobre ele à direita. */
.rw-mapa__palco .rw-mapa__canvas { height: 520px; width: 100%; }

.rw-mapa__toolbar {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px; border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25); border: 1px solid var(--rw-borda);
}
.rw-mapa__tool {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--rw-texto); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.rw-mapa__tool:hover { background: #f3f4f6; border-color: var(--rw-borda); }
.rw-mapa__tool.is-ativa {
  background: var(--rw-fundo-ativo); border-color: var(--rw-borda-ativa);
  color: var(--rw-borda-ativa); box-shadow: inset 0 0 0 1px var(--rw-borda-ativa);
}
.rw-mapa__tool:disabled { opacity: .4; cursor: default; }
.rw-mapa__tool-sep { height: 1px; margin: 2px 4px; background: var(--rw-borda); }

/* Flyout contextual: cartão à esquerda da barra, alinhado ao topo. */
.rw-mapa__flyout {
  position: absolute; top: 10px; right: 56px; z-index: 6;
  min-width: 180px; max-width: 240px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--rw-borda);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.rw-mapa__flyout strong { display: block; font-size: 13px; margin-bottom: 6px; color: var(--rw-texto); }
.rw-mapa__flyout small { display: block; margin-top: 6px; font-size: 11px; color: var(--rw-texto-suave); line-height: 1.4; }
.rw-mapa__ctrl { display: flex; align-items: center; gap: 8px; }
.rw-mapa__slider { flex: 1; cursor: pointer; accent-color: var(--rw-borda-ativa); }
.rw-mapa__out { min-width: 52px; text-align: right; font-weight: 600; font-size: 12px; color: var(--rw-texto); }

/* ─── Fullscreen do mapa (overlay sobre a página) ──────────────── */
.rw-mapa--fullscreen { position: fixed; inset: 0; z-index: 9999; background: #fff; padding: 0; }
.rw-mapa--fullscreen .rw-mapa__palco,
.rw-mapa--fullscreen .rw-mapa__canvas { height: 100vh; border-radius: 0; border: 0; }

/* ─── Admin: campo zona-mapa ocupa largura total (colapsa coluna do rótulo vazio) ─── */
.field-poligono label:empty,
.field-poligono label { display: none !important; }
.field-poligono,
.field-poligono > div,
.field-poligono > div > div { display: block !important; width: 100% !important; max-width: 100% !important; }
/* Tailwind/Unfold: desfaz grid de label|input quando a label está vazia */
.field-poligono [class*="grid"],
.field-poligono [class*="flex"] { display: block !important; }