/* css/workspace-setup.css — tela cheia de criação/edição de Projeto ou Workspace (carrega antes de shell.css) */
.wsx-head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.wsx-card { margin-bottom:16px; }
.wsx-card > h3, .wsx-card .panel-header-with-actions h3 { margin-top:0; }
.wsx-sub { margin:18px 0 10px; font-size:13px; color:var(--muted); font-weight:600; }
.wsx-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px 18px; }
.wsx-span2 { grid-column:1 / -1; }
.wsx-f label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.wsx-f small { display:block; margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.4; }
.wsx-input { width:100%; box-sizing:border-box; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:8px 10px; border-radius:6px; font-size:13px; font-family:inherit; }
.wsx-input:focus { outline:none; border-color:var(--accent); }
.wsx-input:disabled { opacity:.55; cursor:not-allowed; }
textarea.wsx-input { resize:vertical; }

/* switch Projeto / Workspace */
.wsx-switch { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:6px; }
.wsx-opt { text-align:left; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:10px; padding:14px 16px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:4px; }
.wsx-opt strong { font-size:15px; }
.wsx-opt span { font-size:12px; color:var(--muted); }
.wsx-opt:hover:not(:disabled) { border-color:var(--accent); }
.wsx-opt.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; background:color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.wsx-opt:disabled { cursor:not-allowed; opacity:.8; }

/* tema e logo */
.wsx-temas { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; }
.wsx-tema { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:8px; padding:7px 10px; cursor:pointer; font-size:12.5px; font-family:inherit; }
.wsx-tema i { width:11px; height:11px; border-radius:50%; display:inline-block; background:var(--accent); }
.wsx-tema.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.wsx-logo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wsx-logo img { height:44px; max-width:140px; object-fit:contain; border:1px solid var(--line); border-radius:6px; padding:3px; background:var(--panel); }

/* módulos (toggles) */
.wsx-cat { margin-top:14px; }
.wsx-cat h4 { margin:0 0 6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.wsx-mod { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; cursor:pointer; background:var(--bg); }
.wsx-mod:hover:not(.off) { border-color:var(--accent); }
.wsx-mod.off { cursor:not-allowed; opacity:.62; }
.wsx-mod input { position:absolute; opacity:0; pointer-events:none; }
.wsx-sw { flex:0 0 38px; height:22px; border-radius:11px; background:var(--chip); position:relative; transition:background .15s; margin-top:2px; }
.wsx-sw::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.wsx-mod input:checked + .wsx-sw { background:var(--accent); }
.wsx-mod input:checked + .wsx-sw::after { transform:translateX(16px); }
.wsx-mod input:focus-visible + .wsx-sw { outline:2px solid var(--accent); outline-offset:2px; }
.wsx-mod-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wsx-mod-txt strong { font-size:13.5px; }
.wsx-mod-txt small { font-size:12px; color:var(--muted); line-height:1.4; }
.wsx-badge { font-style:normal; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; margin-left:6px; vertical-align:middle; background:var(--chip); color:var(--muted); }
.wsx-badge.soon { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.wsx-badge.requires { background:color-mix(in srgb, var(--inc-col) 15%, transparent); color:var(--inc-col); }

/* Jira */
.wsx-jira { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; background:var(--bg); }
.wsx-jira .wsx-f { margin-top:10px; }
.wsx-jira-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.wsx-jira-head strong { flex:1; font-size:14px; }
.wsx-status { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--chip); color:var(--muted); }
.wsx-status.connected { background:color-mix(in srgb, var(--ext) 16%, transparent); color:var(--ext); }
.wsx-status.error { background:color-mix(in srgb, var(--inc-col) 16%, transparent); color:var(--inc-col); }

.wsx-footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:12px 0; margin-top:8px; background:linear-gradient(to top, var(--bg) 70%, transparent); z-index:5; }
#wsxErr { margin:12px 0; }

/* Editor de etapas do funil (+ Adicionar etapa, cor estilo Excel) */
.wsx-et { display:flex; flex-direction:column; gap:6px; }
.wsx-et-row { display:grid; grid-template-columns:34px 1fr 150px auto; gap:8px; align-items:center; }
.wsx-et-cor { width:34px; height:34px; border-radius:6px; border:2px solid var(--line); cursor:pointer; padding:0; }
.wsx-et-cor:hover, .wsx-et-cor:focus { border-color:var(--accent); outline:none; }
.wsx-et-acoes { display:flex; gap:4px; }
.wsx-et-btn { border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:6px; width:30px; height:34px; cursor:pointer; font-size:13px; }
.wsx-et-btn:hover:not(:disabled) { border-color:var(--accent); }
.wsx-et-btn:disabled { opacity:.35; cursor:not-allowed; }
.wsx-et-add { margin-top:8px; border:1px dashed var(--accent); background:transparent; color:var(--accent); padding:8px 12px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.wsx-et-add:hover { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.wsx-pal { position:absolute; z-index:50; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.35); width:max-content; }
.wsx-pal-grid { display:grid; grid-template-columns:repeat(10, 22px); gap:3px; }
.wsx-pal-sw { width:22px; height:22px; border:1px solid rgba(255,255,255,.18); border-radius:3px; cursor:pointer; padding:0; }
.wsx-pal-sw:hover { transform:scale(1.15); }
.wsx-pal-mais { margin-top:8px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.wsx-pal-mais input { width:40px; height:26px; padding:0; border:none; background:none; cursor:pointer; }
@media (max-width:640px) { .wsx-et-row { grid-template-columns:34px 1fr; } }

/* Abas de Navegação e Painel de Status / Zona de Perigo */
.wsx-tabs-nav {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: var(--panel);
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wsx-tab-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s ease;
}
.wsx-tab-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.wsx-tab-btn.active {
  background: var(--accent);
  color: #fff;
}
.wsx-danger-card {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.04);
}
.wsx-danger-card h3 {
  color: #ef4444;
}
.wsx-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.wsx-status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.wsx-status-badge.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Recursos por tela em cards modernos */
.wsx-rec-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.wsx-rec-group-card {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s ease;
}
.wsx-rec-group-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.wsx-rec-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}
.wsx-rec-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wsx-rec-group-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--chip);
  color: var(--muted);
}
.wsx-rec-group-actions {
  display: flex;
  gap: 8px;
}
.wsx-rec-btn-mini {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.wsx-rec-btn-mini:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.wsx-rec-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px 12px;
}
.wsx-rec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--panel);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.wsx-rec-item:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.wsx-rec-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wsx-rec-sw {
  flex: 0 0 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--chip);
  position: relative;
  transition: background 0.15s;
}
.wsx-rec-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.wsx-rec-item input:checked + .wsx-rec-sw {
  background: var(--accent);
}
.wsx-rec-item input:checked + .wsx-rec-sw::after {
  transform: translateX(14px);
}
.wsx-rec-label {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.3;
}