/* settings.css — sezione Impostazioni: profilo, gruppi, guscio Connettori,
   pannello debug. Riferimento: mockup impostazioni.html. */

.imp-screen { max-width: 720px; margin: 0 auto; }

/* Header fisso: resta in cima mentre il corpo scorre. */
.imp-hd {
  position: sticky; top: 0; z-index: 5;
  padding: 18px 18px 10px;
  background: linear-gradient(180deg, #16121f, #0d0d12);
}
.imp-hd-t { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.4px; }

.imp-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ===== Profilo ===== */
.prof {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: linear-gradient(150deg, #1d1733, #141019);
  border: 1px solid #2c2740; border-radius: 16px;
  padding: 13px; cursor: pointer; text-align: left;
}
.prof-av {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.prof-txt { flex: 1; min-width: 0; }
.prof-n { font-size: 16px; font-weight: 800; color: #fff; }
.prof-s { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.prof-chev { color: rgba(255, 255, 255, 0.2); font-size: 17px; }

/* ===== Gruppi ===== */
.imp-glab {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.33); font-weight: 700;
  margin: 0 0 6px 4px;
}
.f6tag {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px;
  color: #fbbf24; background: rgba(251, 191, 36, 0.13);
  border: 1px solid rgba(251, 191, 36, 0.33);
  padding: 1.5px 5px; border-radius: 5px;
}
.grp {
  background: #15151c; border: 1px solid #22222c;
  border-radius: 14px; overflow: hidden;
}
.srow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; text-align: left;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  cursor: pointer;
}
.srow:last-child { border-bottom: none; }
.srow[disabled] { cursor: default; }
.srow:not([disabled]):hover { background: rgba(255, 255, 255, 0.03); }
.sic {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.slab { font-size: 13px; color: #ececf0; font-weight: 600; flex: 1; }
.sval { font-size: 11.5px; color: var(--text-dim); }
.schev { color: rgba(255, 255, 255, 0.18); font-size: 15px; margin-left: 6px; }

/* Connettori */
.pill {
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 8px; cursor: pointer;
}
.pill.on { color: #5fd9af; background: rgba(52, 211, 153, 0.09); border: 1px solid rgba(52, 211, 153, 0.27); }
.pill.off { color: #b79af2; background: rgba(124, 58, 237, 0.12); border: 1px solid rgba(124, 58, 237, 0.33); }
.addrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px;
  background: transparent; border: 0;
  font-size: 12px; font-weight: 700; color: #a78bfa; cursor: pointer;
}
.addrow:hover { background: rgba(124, 58, 237, 0.1); }
.gnote {
  font-size: 10.5px; color: rgba(255, 255, 255, 0.27);
  margin: 6px 0 0 4px; line-height: 1.45;
}

/* ===== Pannello debug ===== */
.imp-debug {
  margin-top: 8px;
  background: #0c0c11; border: 1px solid #22222c;
  border-radius: 12px; overflow: hidden;
}
.imp-debug-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px; font-size: 10.5px; color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.imp-debug-top .mono { font-family: 'JetBrains Mono', monospace; color: #a78bfa; }
.imp-debug-clear {
  background: rgba(255, 255, 255, 0.05); border: 0; border-radius: 6px;
  color: #cfc6e6; font-size: 10px; padding: 3px 8px; cursor: pointer;
}
.imp-debug-log {
  max-height: 220px; overflow-y: auto;
  padding: 8px 11px; font-family: 'JetBrains Mono', monospace; font-size: 10px;
}
.imp-debug-log .dbg-row { display: flex; gap: 8px; padding: 1px 0; }
.imp-debug-log .dbg-t { color: rgba(255, 255, 255, 0.3); flex-shrink: 0; }
.imp-debug-log .dbg-evt { color: #9b95a8; }
.imp-debug-log .dbg-evt.err { color: #fda4af; }
.imp-debug-log .dbg-evt b { color: #cfc6e6; }

/* ===== Esci ===== */
.imp-logout {
  width: 100%; padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border); border-radius: 12px;
  color: #cfc6e6; font-size: 13px; font-weight: 600; cursor: pointer;
}
.imp-logout:hover { background: rgba(236, 72, 153, 0.12); color: #f7a8c8; }