/* ==========================================
   Gargoli — Systems catalogue (admin) styles
   gargoli.md §20.3.2, §20.3.3, §3.14
   ========================================== */

@import url('/styles/menu.css');

.sys-drag {
  cursor: grab;
  color: var(--color-text-secondary);
  width: 32px;
  text-align: center;
}
.sys-drag:active {
  cursor: grabbing;
}
.sys-icon {
  color: var(--color-primary-cyan);
  margin-right: var(--space-2);
}
.sys-actions {
  white-space: nowrap;
}
.sys-actions .btn {
  margin-right: var(--space-1);
}

.sys-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.sys-badge-on {
  background: rgba(14, 116, 144, 0.12);
  color: var(--color-primary-cyan);
}
.sys-badge-off {
  background: var(--color-background-light);
  color: var(--color-text-secondary);
}
.sys-badge-preview {
  background: rgba(190, 24, 93, 0.12);
  color: var(--color-accent-rose);
}
.sys-badge-paid {
  background: rgba(14, 116, 144, 0.12);
  color: var(--color-primary-cyan);
}

/* jQuery UI sortable placeholder */
.sys-row.ui-sortable-helper {
  background: var(--color-surface-white);
  box-shadow: var(--shadow-lg);
}
#systems-tbody .ui-sortable-placeholder {
  visibility: visible !important;
  background: var(--color-background-light);
}