/* Criador de escalas: dimensoes estaveis evitam saltos durante arraste. */
.roster-admin-host,
.roster-preference-form {
  min-width: 0;
}

.roster-month-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 340px);
  align-items: end;
}

.roster-empty-state {
  display: grid;
  max-width: 620px;
  gap: var(--space-3);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-4);
  background: var(--color-surface-muted);
}

.roster-command-bar,
.roster-post-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.roster-command-bar {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-3) 0;
}

.roster-validation {
  display: grid;
  gap: var(--space-3);
}

.roster-kpis .kpi {
  min-height: 82px;
}

.roster-issues {
  border-left: 4px solid var(--color-warning);
  background: #fff7df;
  padding: var(--space-3);
}

.roster-issues.error {
  border-left-color: var(--color-danger);
  background: #fdecec;
}

.roster-issues h3,
.roster-issues ul {
  margin: 0;
}

.roster-issues ul {
  display: grid;
  gap: 5px;
  margin-top: var(--space-2);
  padding-left: var(--space-5);
}

.contention-grid {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-line);
}

.contention-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 54px;
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
}

.contention-row strong,
.contention-row .meta {
  display: block;
}

.contention-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: #dfe5ea;
}

.contention-meter span {
  display: block;
  height: 100%;
  background: #2979a8;
}

.roster-board {
  display: grid;
  min-width: 0;
  gap: var(--space-6);
}

.roster-post {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  border-top: 6px solid #d6c400;
  padding-top: var(--space-3);
}

.roster-post.green-sector {
  border-top-color: #4d9b58;
}

.roster-post-header h3 {
  margin: 0;
}

.roster-post-header > div:first-child {
  min-width: 0;
  max-width: 720px;
}

.roster-post-actions {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  min-width: min(100%, 420px);
}

.roster-off-editor {
  display: grid;
  grid-template-columns: auto minmax(130px, 180px) auto;
  align-items: center;
  gap: var(--space-2);
}

.roster-off-editor > span {
  color: var(--color-heading);
  font-weight: 800;
}

.roster-off-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  padding: 8px 10px;
}

.roster-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.roster-lane {
  display: grid;
  min-width: 0;
  min-height: 184px;
  align-content: start;
  gap: var(--space-2);
  border: 1px solid var(--color-line);
  background: var(--color-surface-muted);
  padding: var(--space-2);
  transition: border-color 120ms ease, background 120ms ease;
}

.roster-lane.drag-target {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.roster-lane h4 {
  min-height: 36px;
  margin: 0;
  font-size: 0.88rem;
}

.roster-team-size {
  color: var(--color-heading);
  font-size: 0.75rem;
  font-weight: 800;
}

.roster-lane-members {
  display: grid;
  gap: var(--space-2);
}

.roster-team-editor {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

.roster-team-editor .field {
  min-width: 0;
  font-size: 0.78rem;
}

.roster-team-editor select,
.roster-team-editor .btn {
  width: 100%;
}

.roster-team-move {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
}

.roster-team-move .field {
  min-width: 0;
  font-size: 0.78rem;
}

.roster-team-move select,
.roster-team-move .btn {
  width: 100%;
}

.roster-team-complete {
  margin: auto 0 0;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
  color: #26633b;
  font-size: 0.78rem;
  font-weight: 800;
}

.roster-member {
  display: grid;
  min-width: 0;
  min-height: 108px;
  gap: var(--space-2);
  border: 1px solid var(--color-line-strong);
  border-radius: 6px;
  background: var(--color-surface);
  padding: var(--space-3);
  cursor: grab;
}

.roster-member.is-dragging {
  opacity: 0.52;
}

.roster-member strong,
.roster-member .meta {
  display: block;
  overflow-wrap: anywhere;
}

.roster-member .btn {
  width: 100%;
}

.canga-label {
  color: #174f82;
  font-size: 0.72rem;
  font-weight: 800;
}

.roster-member-editor {
  display: grid;
  gap: var(--space-2);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-2);
  cursor: default;
}

.roster-member-editor .field {
  font-size: 0.78rem;
}

.roster-member-editor .field select {
  min-height: 40px;
}

.roster-events {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-4);
}

@media (max-width: 520px) {
  .contention-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .contention-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .roster-off-editor {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .roster-post-actions {
    justify-items: stretch;
    width: 100%;
  }

  .roster-off-editor .btn {
    width: 100%;
  }

  .roster-lanes {
    grid-template-columns: 1fr;
  }

  .roster-lane {
    min-height: 130px;
  }

  .roster-member {
    min-height: 100px;
  }
}