/* ==========================================================
   JT-CONFIG-MODAL.CSS — modal de Configurações (visual novo)
   ----------------------------------------------------------
   Origem: jeanustrade-codigo-modal-conta.html (modal + popover).
   Carrega DEPOIS de styles.css e jt-liquid-glass.css.

   Regra: tudo está confinado a #modalOverlay (modal), #cfgPop
   (popover) e #cfgPopBackdrop. Os tokens do HTML de referência
   (--glass, --primary, --border, ...) NÃO vão para :root —
   o :root do projecto já tem --border/--card/--muted com outros
   valores, e o resto da app dependia deles. Aqui os tokens têm
   prefixo --cm- e vivem só nestes três elementos.

   Cores semânticas reutilizam os tokens do projecto
   (--accent2 verde, --accent3 azul, --text, --muted, --muted2),
   por isso o tema claro herda-os sozinho.
   ========================================================== */

#modalOverlay,
#cfgPop,
#cfgPopBackdrop{
  --cm-glass: linear-gradient(165deg, rgba(40,42,58,.55), rgba(14,15,30,.72));
  --cm-blur: blur(28px) saturate(160%);
  --cm-border: 0.5px solid rgba(255,255,255,.16);
  --cm-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.20);
  --cm-spec: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  /* azul único tirado do glow do fundo (substitui o #0a84ff do liquid-glass,
     só dentro do modal) */
  /* o popover abre POR CIMA do texto do modal — vidro bem mais opaco que o do cartão,
     senão as linhas de baixo transparecem e prejudicam a leitura */
  --cm-pop-glass: linear-gradient(165deg, rgba(36,38,56,.96), rgba(14,15,30,.98));
  --cm-primary: linear-gradient(135deg, #21b6ff, #0a63d6);
  --cm-primary-glow: 0 4px 18px rgba(0,150,255,.25);
  --cm-focus: #21b6ff;
  --cm-focus-ring: 0 0 0 3px rgba(33,182,255,.18);
  --cm-fill: rgba(255,255,255,.05);
  --cm-fill-soft: rgba(255,255,255,.03);
  --cm-line: rgba(255,255,255,.10);
  --cm-dot: #0a0a14;
  --cm-spring: cubic-bezier(.34,1.4,.64,1);
  --cm-cyan: var(--accent3);
  --cm-win: var(--accent2);
  --cm-cyan-rgb: 0,176,255;
  --cm-win-rgb: 0,230,118;
}

/* Variante clara — vidro leitoso (mesma ideia do tema claro do liquid-glass) */
[data-theme="light"] #modalOverlay,
[data-theme="light"] #cfgPop,
[data-theme="light"] #cfgPopBackdrop{
  --cm-glass: linear-gradient(165deg, rgba(255,255,255,.90), rgba(246,247,255,.82));
  --cm-pop-glass: linear-gradient(165deg, rgba(255,255,255,.98), rgba(244,245,252,.98));
  --cm-border: 0.5px solid rgba(13,14,43,.14);
  --cm-shadow: 0 8px 24px rgba(13,14,43,.10), inset 0 1px 0 rgba(255,255,255,.7);
  --cm-spec: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  --cm-primary-glow: 0 4px 16px rgba(10,99,214,.28);
  --cm-focus-ring: 0 0 0 3px rgba(14,165,233,.22);
  --cm-fill: rgba(13,14,43,.05);
  --cm-fill-soft: rgba(13,14,43,.03);
  --cm-line: rgba(13,14,43,.10);
  --cm-dot: #ffffff;
  --cm-cyan-rgb: 14,165,233;
  --cm-win-rgb: 16,185,129;
}

/* ---------- Overlay + cartão do modal ---------- */
#modalOverlay{
  display: flex;                       /* o styles.css usa display:none/flex; aqui é fade */
  opacity: 0; visibility: hidden; pointer-events: none;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .2s ease, visibility 0s linear .2s;
}
#modalOverlay.open{
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .2s ease;
}
[data-theme="light"] #modalOverlay{ background: rgba(120,124,160,.25); }

#modalOverlay .modal{
  width: 100%; max-width: 400px;
  border-radius: 24px; padding: 20px 18px;
  background: var(--cm-glass);
  backdrop-filter: var(--cm-blur);
  -webkit-backdrop-filter: var(--cm-blur);
  border: var(--cm-border);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), var(--cm-shadow);
  position: relative;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  scrollbar-width: none;
  animation: none;
}
[data-theme="light"] #modalOverlay .modal{ box-shadow: 0 24px 60px rgba(13,14,43,.22), var(--cm-shadow); }
#modalOverlay .modal::-webkit-scrollbar{ display: none; }
#modalOverlay .modal::before{
  content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  border-radius: 0; background: var(--cm-spec);
}

#modalOverlay .modal-close{
  float: none; position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cm-fill); border: var(--cm-border);
  color: var(--muted); cursor: pointer; z-index: 2; font-size: 0;
}
#modalOverlay .modal-close .icon{ width: 13px; height: 13px; }
#modalOverlay .modal-title{ display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; margin-bottom: 0; }
#modalOverlay .modal-sub{ font-size: 11px; color: var(--muted); margin: 3px 0 16px; }

#modalOverlay .section-label{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: 14px 0 8px;
}
#modalOverlay .gest-label{ font-size: 10px; color: var(--muted); margin: 10px 0 5px; }

/* ---------- Campos ---------- */
#modalOverlay .field{ margin-bottom: 10px; }
#modalOverlay .field label{
  display: block; font-size: 10px; font-weight: 400; color: var(--muted);
  text-transform: none; letter-spacing: 0; margin-bottom: 5px;
}
#modalOverlay .field label small{ font-size: 9px; color: var(--muted2); margin-left: 3px; }
#modalOverlay .field input{
  width: 100%; padding: 10px 11px; border-radius: 12px;
  border: var(--cm-border); background: var(--cm-fill);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#modalOverlay .field input:focus{ border-color: var(--cm-focus); box-shadow: var(--cm-focus-ring); }
#modalOverlay .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Caixas compactas (abrem o popover) ---------- */
#modalOverlay .compact-select{
  width: 100%; margin-bottom: 0; text-align: left; color: inherit; font: inherit;
  background: var(--cm-fill); border: var(--cm-border); border-radius: 12px;
  padding: 11px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: transform .15s var(--cm-spring), border-color .2s ease;
}
#modalOverlay .compact-select:active{ transform: scale(.98); border-color: rgba(var(--cm-cyan-rgb),.4); }
#modalOverlay .compact-select .cs-icon{ font-size: 15px; display: grid; place-items: center; flex-shrink: 0; }
#modalOverlay .compact-select .cs-icon .icon{ width: 16px; height: 16px; color: var(--cm-cyan); }
#modalOverlay .compact-select .cs-info{ flex: 1; min-width: 0; text-align: left; }
#modalOverlay .compact-select .cs-value{ font-size: 12.5px; font-weight: 800; }
#modalOverlay .compact-select .cs-sub{ font-size: 10px; color: var(--muted2); margin-top: 2px; }
#modalOverlay .compact-select .cs-chev{ width: 16px; height: 16px; color: var(--muted2); flex-shrink: 0; }

/* ---------- Guardar ---------- */
#modalOverlay .modal-save{
  width: 100%; background: var(--cm-primary); box-shadow: var(--cm-primary-glow);
  border: none; border-radius: 14px; padding: 13px;
  font-size: 13.5px; font-weight: 800; color: #fff; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  transition: transform .15s var(--cm-spring);
}
#modalOverlay .modal-save:active{ transform: scale(.97); }

/* ---------- Popover (Perfil / Gestão / Risco / Modo) ---------- */
#cfgPopBackdrop{
  position: fixed; inset: 0; z-index: 440; background: transparent;
  opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
#cfgPopBackdrop.open{ opacity: 1; visibility: visible; }

#cfgPop{
  position: fixed; z-index: 450;                 /* acima do .modal-overlay (400) */
  width: min(280px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: hidden auto; scrollbar-width: none;
  border-radius: 16px;
  background: var(--cm-pop-glass);
  backdrop-filter: var(--cm-blur);
  -webkit-backdrop-filter: var(--cm-blur);
  border: var(--cm-border);
  box-shadow: 0 20px 48px rgba(0,0,0,.45), var(--cm-shadow);
  opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
  transition: opacity .16s var(--cm-spring), transform .16s var(--cm-spring);
}
[data-theme="light"] #cfgPop{ box-shadow: 0 20px 48px rgba(13,14,43,.22), var(--cm-shadow); }
#cfgPop::-webkit-scrollbar{ display: none; }
#cfgPop.open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#cfgPop::before{
  content: ''; position: absolute; left: 16%; right: 16%; top: 0; height: 1px; background: var(--cm-spec);
}
#cfgPop .icon{ width: 16px; height: 16px; }

#cfgPop .pop-title{
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 12px 12px 8px;
}
#cfgPop .pop-body{ padding: 2px 8px 8px; }
#cfgPop .pop-empty{ font-size: 10.5px; color: var(--muted2); line-height: 1.45; padding: 4px 4px 2px; }

#cfgPop .pop-item{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px; margin-bottom: 4px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; background: var(--cm-fill-soft);
  color: inherit; font: inherit; transition: all .15s;
}
#cfgPop .pop-item:last-child{ margin-bottom: 0; }
#cfgPop .pop-item .ic{
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
#cfgPop .pop-item .info{ flex: 1; min-width: 0; }
#cfgPop .pop-item .nm{ font-size: 12.5px; font-weight: 700; display: block; }
#cfgPop .pop-item .sb{ font-size: 10.5px; color: var(--muted2); display: block; margin-top: 1px; }
#cfgPop .pop-item .ck{
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(140,142,169,.3); flex-shrink: 0; display: grid; place-items: center;
}
#cfgPop .pop-item.on .ck{ border-color: currentColor; background: currentColor; }
#cfgPop .pop-item.on .ck::after{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cm-dot); }

/* gestão / risco / modo */
#cfgPop .pop-item.mode .ic{ background: var(--cm-fill); color: var(--cm-cyan); }
#cfgPop .pop-item.mode.on{ background: rgba(var(--cm-cyan-rgb),.08); border-color: rgba(var(--cm-cyan-rgb),.4); }
#cfgPop .pop-item.mode.on .ck{ color: var(--cm-cyan); }

/* perfil */
#cfgPop .pop-item.profile{ display: block; cursor: default; }
#cfgPop .pop-item.profile .p-row{ display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
#cfgPop .pop-item.profile .p-icon{
  width: 30px; height: 30px; border-radius: 8px; background: var(--cm-fill);
  display: grid; place-items: center; flex-shrink: 0; font-size: 16px; line-height: 1;
}
#cfgPop .pop-item.profile .desc{ font-size: 10px; color: var(--muted2); margin-top: 2px; line-height: 1.35; display: block; }
#cfgPop .pop-item.profile.selected{ border-color: rgba(var(--cm-cyan-rgb),.4); background: rgba(var(--cm-cyan-rgb),.07); }
#cfgPop .p-i{
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  background: var(--cm-fill); border: 1px solid var(--cm-line); color: var(--muted);
  font-size: 10.5px; font-weight: 800; font-style: italic; font-family: Georgia, serif;
  display: grid; place-items: center; flex-shrink: 0; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
#cfgPop .p-i:active{ transform: scale(.9); }
#cfgPop .p-i.active{ background: rgba(var(--cm-cyan-rgb),.18); color: var(--cm-cyan); border-color: rgba(var(--cm-cyan-rgb),.4); }
#cfgPop .p-more{
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .22s ease, opacity .18s ease;
  font-size: 10px; color: var(--muted2); line-height: 1.5;
}
#cfgPop .p-more.open{
  max-height: 170px; opacity: 1;
  margin-top: 8px; padding-top: 8px; border-top: 0.5px solid var(--cm-line);
}

/* campos dentro do popover */
#cfgPop .pop-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#cfgPop .pop-fields.one{ grid-template-columns: 1fr; }
#cfgPop .pop-fields label{ font-size: 9.5px; color: var(--muted); line-height: 1.3; }
#cfgPop .pop-fields small{ display: block; font-size: 9px; color: var(--muted2); }
#cfgPop .pop-fields input{
  width: 100%; margin-top: 4px; padding: 8px 9px; border-radius: 10px;
  border: var(--cm-border); background: var(--cm-fill);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; outline: none;
}
#cfgPop .pop-fields input:focus{ border-color: var(--cm-focus); box-shadow: var(--cm-focus-ring); }