/* ====================================
   ISA Form & Widget Styles
   Tabs, Lists, Toggle, Forms
   ==================================== */

/* ─── ISA Tabs ─── */
.isa-tabs {
  background: rgba(10, 10, 26, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.tab-headers {
  display: flex;
  background: rgba(139, 92, 246, 0.1);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.tab-header {
  flex: 1;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}

.tab-header:hover { background: rgba(139, 92, 246, 0.1); color: var(--text); }
.tab-header.active { background: rgba(139, 92, 246, 0.2); color: var(--brain); font-weight: 600; }
.tab-content { padding: 1rem; }

/* ─── ISA List ─── */
.isa-list { list-style: none; margin: 0; padding: 0; }

.isa-list li {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s;
}

.isa-list li:hover { background: rgba(139, 92, 246, 0.1); }
.isa-list li.selected { background: rgba(139, 92, 246, 0.2); border-left: 3px solid var(--brain); }

/* ─── ISA Toggle ─── */
.toggle-btn {
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.on { background: var(--brain); color: white; }
.toggle-btn:hover { border-color: var(--brain); }

/* ─── Form States ─── */
.form-3d { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-size: 0.85rem; color: var(--text-light); }

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  background: rgba(10, 10, 26, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brain);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: #ef4444; }

.form-error { font-size: 0.8rem; color: #ef4444; }
.form-hint { font-size: 0.75rem; color: var(--text-light); }

.form-error-banner {
  padding: 1rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
}

.form-success { text-align: center; padding: 3rem; }
.success-icon { font-size: 3rem; color: var(--money); }

.form-submitting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem;
}

/* ─── Data Table ─── */
.content-perf .spec-table-3d { font-size: 0.9rem; }

.content-perf .spec-table-3d td:first-child {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}