/* .gate-screen / .gate-box / .gate-title / .gate-input / .gate-error
   now live in styles.css, shared with the main app's login screen. */


.admin-screen{ padding: 30px 32px 60px; max-width: 1300px; margin: 0 auto; }

.admin-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 800px){ .admin-columns{ grid-template-columns: 1fr; } }

.admin-panel{
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 22px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
}
.panel-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-bright);
  margin: 0 0 4px;
  display:flex; align-items:center; gap: 8px;
}
.panel-sub{ font-size: 12.5px; color: var(--text-dim); margin: 0 0 16px; }
.count-badge{
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--brand-dim);
  border-radius: 100px;
  padding: 2px 9px;
  color: var(--brand);
}

.catalogue-group{ margin-bottom: 18px; }
.catalogue-group-title{
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.catalogue-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease;
  background: #FFFFFF;
}
.catalogue-item:hover{ border-color: #AEBCCE; background: var(--panel-raised); }
.catalogue-item.added{
  border-color: var(--green-dim);
  background: #F0FDF4;
  color: var(--text);
  cursor: default;
}
.catalogue-item-add{ font-size: 16px; color: var(--brand); }
.catalogue-item.added .catalogue-item-add{ color: var(--green); }

.selected-list{ display:flex; flex-direction:column; gap: 8px; }
.selected-item{
  display:flex; align-items:center; gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #FFFFFF;
  cursor: grab;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.selected-item.dragging{ opacity: 0.4; }
.selected-item-handle{ color: var(--text-faint); font-size: 14px; }
.selected-item-label{ flex:1; font-size: 13px; color: var(--text); }
.selected-item-remove{
  color: var(--text-faint);
  font-size: 15px;
  padding: 2px 6px;
}
.selected-item-remove:hover{ color: var(--red); }
.selected-empty{ color: var(--text-dim); font-size: 13px; padding: 20px 0; text-align:center; }