/* Quiet role hierarchy; preserve assignment, editing and drag interactions. */
#studentCadreBoard { gap:20px; }
#studentCadreBoard .student-cadre-group { --role-tint:#527da0; }
#studentCadreBoard .class-cadres { --role-tint:var(--accent); }
#studentCadreBoard .group-leaders { --role-tint:#398678; }
#studentCadreBoard .student-cadre-group > header {
  position:static; width:auto; height:auto; clip:auto; clip-path:none;
  overflow:visible; white-space:normal; margin:0 0 10px; padding:0 0 9px;
  border:0; border-bottom:1px solid var(--line); justify-content:flex-start;
}
#studentCadreBoard .student-cadre-group > header::before {
  content:""; width:5px; height:14px; border-radius:3px;
  background:var(--role-tint); align-self:center;
}
#studentCadreBoard .student-cadre-group > header h4 {
  margin:0; font-size:13px; line-height:20px; color:var(--muted); font-weight:650;
}
#studentCadreBoard .student-cadre-role-grid { gap:8px 12px; }
#studentCadreBoard .student-cadre-role-picker {
  border-radius:10px; padding:6px; gap:6px; grid-auto-rows:auto;
  min-height:52px; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  background:var(--surface); box-shadow:none;
}
#studentCadreBoard .student-cadre-role-picker:hover {
  border-color:color-mix(in srgb,var(--role-tint) 40%,var(--line));
  background:var(--surface); box-shadow:0 2px 7px color-mix(in srgb,var(--ink) 4%,transparent);
}
#studentCadreBoard .student-cadre-subject-icon {
  transform:none; color:color-mix(in srgb,var(--role-tint) 75%,var(--ink));
  width:26px; height:26px; border-radius:8px;
  background:color-mix(in srgb,var(--role-tint) 8%,var(--surface));
}
#studentCadreBoard .student-cadre-subject-icon .ui-icon { width:17px; height:17px; }
#studentCadreBoard .student-cadre-role-label.has-subject-icon { grid-template-columns:26px minmax(0,1fr); padding:0; gap:4px; }
#studentCadreBoard:not(.is-edit-mode) .student-cadre-role-name-input { display:none; }
#studentCadreBoard:not(.is-edit-mode) .cadre-role-display {
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:13px; line-height:1.5;
  text-align:center; font-weight:600; overflow-wrap:anywhere;
}
#studentCadreBoard .student-cadre-select {
  height:auto; min-height:36px; padding:6px 4px; border-radius:7px;
  box-shadow:none; background:var(--surface-soft);
}
#studentCadreBoard .student-cadre-select.has-selection {
  border-color:transparent; background:color-mix(in srgb,var(--role-tint) 5%,var(--surface)); color:var(--ink);
}
#studentCadreBoard .student-cadre-select:not(.has-selection)::before { content:"＋"; font-size:18px; line-height:20px; color:var(--muted); }
#studentCadreBoard .student-cadre-select:not(.has-selection) .student-cadre-selection { display:none; }
#studentCadreBoard .student-cadre-selection { width:100%; white-space:normal; overflow:visible; }
#studentCadreBoard .cadre-name-grid { gap:3px 7px; }
#studentCadreBoard .cadre-name-grid > span { font-weight:650; line-height:1.6; }
#studentCadreBoard .student-cadre-select:focus-visible { outline:2px solid var(--role-tint); outline-offset:2px; }
#studentCadreBoard .student-cadre-role-picker.is-drop-target { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 8%,var(--surface)); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent); }
#studentCadreBoard.is-edit-mode .student-cadre-role-picker { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); }
#studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:130px minmax(0,1fr); }
@media(max-width:1100px) and (min-width:761px) {
  #studentCadreBoard .student-cadre-role-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:760px) {
  #studentCadreBoard { gap:14px; padding:10px 8px 16px; }
  #studentCadreBoard .student-cadre-role-grid { gap:7px; }
  #studentCadreBoard .student-cadre-role-picker,
  #studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:minmax(0,1fr) minmax(50px,.9fr); min-height:48px; padding:5px; gap:4px; }
  #studentCadreBoard .student-cadre-role-label.has-subject-icon { grid-template-columns:minmax(0,1fr); }
  #studentCadreBoard:not(.is-edit-mode) .cadre-role-display { font-size:12px; }
  #studentCadreBoard .student-cadre-select { min-height:34px; padding:5px 2px; }
  #studentCadreBoard .group-leaders .cadre-name-grid { flex-direction:row; flex-wrap:wrap; }
  #studentCadreBoard .group-leaders .cadre-name-grid > span { width:auto; flex:0 1 auto; }
}
@media(prefers-reduced-motion:reduce) {
  #studentCadreBoard .student-cadre-role-picker { transition:none; }
}

/* Both display and edit modes share one explicit row, including narrow screens. */
#studentCadreBoard .student-cadre-role-picker { align-items:center; }
#studentCadreBoard .student-cadre-role-label.has-subject-icon {
 display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:minmax(36px,auto);
 align-items:center; align-content:center; height:auto; min-height:36px; gap:6px; margin:0; padding:0;
}
#studentCadreBoard .student-cadre-subject-icon {
 display:grid; grid-column:1; grid-row:1; place-self:center; place-items:center;
 position:static; padding:0; margin:0; transform:none; line-height:1;
}
#studentCadreBoard .student-cadre-subject-icon .ui-icon { display:grid; place-items:center; margin:0; padding:0; align-self:center; }
#studentCadreBoard .student-cadre-subject-icon svg { display:block; }
#studentCadreBoard .cadre-role-display,
#studentCadreBoard .student-cadre-role-name-input { grid-column:2; grid-row:1; align-self:center; margin:0; width:100%; min-width:0; }
#studentCadreBoard .cadre-role-display { padding:4px 0; }
#studentCadreBoard.is-edit-mode .cadre-role-display { display:none; }
#studentCadreBoard.is-edit-mode .student-cadre-role-name-input { display:block; height:36px; padding:6px 2px; line-height:22px; }
#studentCadreBoard .student-cadre-select { display:flex; align-items:center; justify-content:center; align-self:stretch; }
#studentCadreBoard .cadre-name-grid { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:3px 10px; }
#studentCadreBoard .cadre-name-grid > span { width:auto; flex:0 0 auto; white-space:nowrap; }
#studentCadreBoard .student-cadre-role-remove .ui-icon { margin:0; }
@media(max-width:760px) {
 #studentCadreBoard .student-cadre-role-label.has-subject-icon { grid-template-columns:24px minmax(0,1fr); gap:3px; min-height:34px; grid-template-rows:minmax(34px,auto); }
 #studentCadreBoard .student-cadre-subject-icon { width:24px; height:24px; border-radius:7px; }
 #studentCadreBoard .student-cadre-subject-icon .ui-icon { width:16px; height:16px; }
 #studentCadreBoard.is-edit-mode .student-cadre-role-name-input { height:34px; font-size:12px; padding:5px 1px; }
 #studentCadreBoard .cadre-name-grid { gap:2px 7px; }
 #studentCadreBoard .cadre-name-grid > span { font-size:12px; }
 #studentCadreBoard .student-cadre-role-remove { top:-6px; left:-5px; width:20px; height:20px; min-width:20px; min-height:20px; box-shadow:0 2px 5px #0002; }
}

@media(max-width:760px) {
 #studentCadreBoard .student-cadre-role-grid { grid-template-columns:minmax(0,1fr); }
 #studentCadreBoard .student-cadre-role-picker, #studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}